Merge branch 'next' into slider-tooltips

packages/webawesome/docs/_includes/sidebar.njk

@@ -18,12 +18,6 @@
 <ul>
   <li><a href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">Help &amp; Support</a></li>
   <li><a href="https://github.com/shoelace-style/webawesome/">Source Code</a></li>
-  <li>
-    <span class="wa-split">
-      <a href="/docs/resources/figma">Figma Design Kit</a></li>
-      {{ proBadge() }}
-    </span>
-  </li>
   <li><a href="/docs/resources/community">Community</a></li>
   <li><a href="/docs/resources/accessibility">Accessibility</a></li>
   <li><a href="/docs/resources/browser-support">Browser Support</a></li>

packages/webawesome/docs/_layouts/component.njk

@@ -297,11 +297,11 @@
   <div class="component-help">
     <strong>Need a hand?</strong>
     <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome/issues" target="_blank">
-      <wa-icon slot="start" variant="regular" name="bug"></wa-icon>
+      <wa-icon slot="prefix" name="bug"></wa-icon>
       Report a bug
     </wa-button>
     <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">
-      <wa-icon slot="start" variant="regular" name="message-question"></wa-icon>
+      <wa-icon slot="prefix" name="message-question"></wa-icon>
       Ask for help
     </wa-button>
   </div>

packages/webawesome/docs/assets/scripts/permalink.js

@@ -0,0 +1,178 @@
+import { deepEach, deepGet, deepSet } from './util/deep.js';
+import { camelCase, kebabCase } from './util/string.js';
+
+export default class Permalink extends URLSearchParams {
+  /** Params changed since last URL I/O */
+  changed = false;
+
+  constructor(params) {
+    super(location.search);
+    this.params = params;
+  }
+
+  toJSON() {
+    return Object.fromEntries(this.entries());
+  }
+
+  /**
+   * Set multiple values from an object. Nested values will be joined with a hyphen.
+   * @param {object} values - The object containing the values to set.
+   * @param {object} defaults - The object containing the default values.
+   *
+   */
+  setAll(values, defaults) {
+    deepEach(values, (value, key, parent, path) => {
+      let fullPath = [...path, key];
+      let param = fullPath.map(kebabCase).join('-');
+
+      if (typeof value === 'object') {
+        // We'll handle this when we descend into it
+        return;
+      }
+
+      let defaultValue = deepGet(defaults, fullPath);
+
+      if (equals(value, defaultValue)) {
+        // Remove the param from the URL
+        this.delete(param);
+        return;
+      }
+
+      this.set(param, value);
+    });
+  }
+
+  /**
+   * Convert the URL params to a (potentially nested) object.
+   * @param {object} options - Options object.
+   * @param {(key: string, value: string) => string[]} options.getPath - Function to get the path of a param.
+   * @returns {object} The nested object.
+   */
+  toObject(options = {}) {
+    // Default getPath() assumes hyphens always mean nesting
+    let { ignoreKeys = [], getPath = param => param.split('-') } = options;
+
+    // Get all values as a nested object
+
+    let obj = {};
+
+    for (let [key, value] of this.entries()) {
+      let path = getPath(key, value);
+
+      if (path === null || ignoreKeys.includes(key)) {
+        // Skip this param
+        continue;
+      }
+
+      // Default to key if `getPath()` returns undefined
+      path ??= key;
+
+      path = Array.isArray(path) ? path : [path];
+
+      // Camel case any remaining hyphens
+      path = path.map(camelCase);
+
+      deepSet(obj, path, value);
+    }
+
+    return obj;
+  }
+
+  delete(key, value) {
+    let hadValue = this.has(key);
+    super.delete(key, value);
+
+    if (hadValue) {
+      this.changed = true;
+    }
+  }
+
+  set(key, value, defaultValue) {
+    if (equals(value, defaultValue) || equals(value, '')) {
+      value = null;
+    }
+
+    value ??= null; // undefined -> null
+
+    let oldValue = Array.isArray(value) ? this.getAll(key) : this.get(key);
+    let changed = !equals(value, oldValue);
+
+    if (!changed) {
+      // Nothing to do here
+      return;
+    }
+
+    if (Array.isArray(value)) {
+      super.delete(key);
+      value = value.slice();
+
+      for (let v of value) {
+        if (v || v === 0) {
+          if (typeof v === 'object') {
+            super.append(key, JSON.stringify(v));
+          } else {
+            super.append(key, v);
+          }
+        }
+      }
+    } else if (value === null) {
+      super.delete(key);
+    } else {
+      super.set(key, value);
+    }
+
+    this.sort();
+    this.changed ||= changed;
+  }
+
+  /**
+   * Update page URL if it has changed since last time
+   */
+  updateLocation() {
+    if (this.changed) {
+      // If there’s already a search, replace it.
+      // We don’t want to clog the user’s history while they iterate
+      let search = this.toString();
+      let historyAction = location.search && search ? 'replaceState' : 'pushState';
+      history[historyAction](null, '', `?${search}`);
+      this.changed = false;
+    }
+  }
+}
+
+function equals(value, oldValue) {
+  if (Array.isArray(value) || Array.isArray(oldValue)) {
+    value = toArray(value);
+    oldValue = toArray(oldValue);
+
+    if (value.length !== oldValue.length) {
+      return false;
+    }
+
+    return value.every((v, i) => equals(v, oldValue[i]));
+  }
+
+  // (value ?? oldValue ?? true) returns true if they're both empty (null or undefined)
+  [value, oldValue] = [value, oldValue].map(v => (!v && v !== false && v !== 0 ? null : v));
+  return value === oldValue || String(value) === String(oldValue);
+}
+
+/**
+ * Convert a value to an array. `undefined` and `null` values are converted to an empty array.
+ * @param {*} value - The value to convert.
+ * @returns {any[]} The converted array.
+ */
+function toArray(value) {
+  value ??= [];
+
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  // Don't convert "foo" into ["f", "o", "o"]
+  if (typeof value !== 'string' && typeof value[Symbol.iterator] === 'function') {
+    return Array.from(value);
+  }
+
+  return [value];
+}

packages/webawesome/docs/assets/scripts/scroll.js

@@ -34,8 +34,7 @@ document.addEventListener('click', event => {
         top: target.offsetTop - headerHeight,
         behavior: 'smooth',
       });
-
-      history.replaceState(history.state, '', `#${id}`);
+      history.pushState(undefined, undefined, `#${id}`);
     }
   }
 });

packages/webawesome/docs/assets/styles/docs.css

@@ -386,27 +386,6 @@ h1.title {
   }
 }
 
-/* Images & Figures */
-
-figure.signpost {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--wa-space-s);
-
-  img {
-    border: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
-  }
-
-  figcaption {
-    color: var(--wa-color-text-quiet);
-    font-size: var(--wa-font-size-xs);
-    line-height: var(--wa-line-height-condensed);
-    text-align: center;
-  }
-}
-
 /* Search list pages */
 wa-page > main:has(> .search-list) {
   max-width: var(--content-width-l);

packages/webawesome/docs/assets/styles/utils.css

@@ -109,15 +109,6 @@
     line-height: var(--wa-form-control-value-line-height);
     padding-inline: 0.33em;
   }
-
-  /* step icons for ordered instructions */
-  .step-icon {
-    --primary-color: var(--wa-color-neutral-on-normal);
-    --secondary-color: var(--wa-color-neutral-fill-normal);
-    --secondary-opacity: 1;
-    font-size: 2em;
-  }
-
   /* #endregion */
 
   /* #region funsies + cosmetics */

packages/webawesome/docs/docs/resources/changelog.md

@@ -30,13 +30,10 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-checkbox>` where its value would revert to `""` when checked / unchecked [pr:1547]
 - Fixed a bug that caused icon button labels to not render in frameworks [issue:1542]
 - Fixed a bug in `<wa-details>` that caused the `name` property not to reflect [pr:1538]
+- Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
 - Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that prevented focus from being set on the dialog/drawer when opened [issue:1302]
 - Fixed an overflow style that was causing tab group content to be unnecessarily truncated [issue:1401]
 - Fixed a bug in `<wa-icon>` that caused icon buttons to render when non-text nodes were slotted in [issue:1475]
-- Fixed a bug in `<wa-tooltip>` that prevented tooltips from showing when disconnecting and then reconnecting to the DOM [issue:1595]
-- Fixed a bug that caused the required `*` in form labels to have incorrect spacing in `<wa-checkbox>` and `<wa-switch>` [issue:1472]
-- Improved autofill styles in `<wa-input>` so they span the entire width of the visual input [issue:1439]
-- Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
 
 ## 3.0.0-beta.6
 
@@ -480,4 +477,4 @@ Many of these changes and improvements were the direct result of feedback from u
 
 </details>
 
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
+Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)

packages/webawesome/src/components/callout/callout.ts

@@ -9,7 +9,7 @@ import styles from './callout.css';
  * @summary Callouts are used to display important messages inline.
  * @documentation https://webawesome.com/docs/components/callout
  * @status stable
- * @since 3.0
+ * @since 2.0
  *
  * @slot - The callout's main content.
  * @slot icon - An icon to show in the callout. Works best with `<wa-icon>`.

packages/webawesome/src/components/input/input.css

@@ -63,40 +63,22 @@
   border-radius: var(--wa-border-radius-pill) !important;
 }
 
-.text-field {
-  /* Show autofill styles over the entire text field, not just the native <input> */
-  &:has(:autofill),
-  &:has(:-webkit-autofill) {
-    background-color: var(--wa-color-brand-fill-quiet) !important;
-  }
-
-  input,
-  textarea {
-    /*
+.text-field input,
+.text-field textarea {
+  /*
     Fixes an alignment issue with placeholders.
     https://github.com/shoelace-style/webawesome/issues/342
   */
-    height: 100%;
+  height: 100%;
 
-    padding: 0;
-    border: none;
-    outline: none;
-    box-shadow: none;
-    margin: 0;
-    cursor: inherit;
-    -webkit-appearance: none;
-    font: inherit;
-
-    /* Turn off Safari's autofill styles */
-    &:-webkit-autofill,
-    &:-webkit-autofill:hover,
-    &:-webkit-autofill:focus,
-    &:-webkit-autofill:active {
-      -webkit-background-clip: text;
-      background-color: transparent;
-      -webkit-text-fill-color: inherit;
-    }
-  }
+  padding: 0;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  margin: 0;
+  cursor: inherit;
+  -webkit-appearance: none;
+  font: inherit;
 }
 
 input {

packages/webawesome/src/components/tooltip/tooltip.ts

@@ -101,11 +101,6 @@ export default class WaTooltip extends WebAwesomeElement {
   connectedCallback() {
     super.connectedCallback();
 
-    // Recreate event controller if it was aborted
-    if (this.eventController.signal.aborted) {
-      this.eventController = new AbortController();
-    }
-
     // TODO: This is a hack that I need to revisit [Konnor]
     if (this.open) {
       this.open = false;
@@ -118,15 +113,6 @@ export default class WaTooltip extends WebAwesomeElement {
     if (!this.id) {
       this.id = uniqueId('wa-tooltip-');
     }
-
-    // Re-establish anchor connection after being disconnected
-    if (this.for && this.anchor) {
-      this.anchor = null; // force reattach
-      this.handleForChange();
-    } else if (this.for) {
-      // Initial connection
-      this.handleForChange();
-    }
   }
 
   disconnectedCallback() {

packages/webawesome/src/styles/component/form-control.css

@@ -5,17 +5,17 @@
 
 /* Label */
 :is([part~='form-control-label'], [part~='label']):has(*:not(:empty)) {
-  display: inline-flex;
+  display: inline-block;
   color: var(--wa-form-control-label-color);
   font-weight: var(--wa-form-control-label-font-weight);
   line-height: var(--wa-form-control-label-line-height);
   margin-block-end: 0.5em;
-}
 
-:host([required]) :is([part~='form-control-label'], [part~='label'])::after {
-  content: var(--wa-form-control-required-content);
-  margin-inline-start: var(--wa-form-control-required-content-offset);
-  color: var(--wa-form-control-required-content-color);
+  :host([required]) &::after {
+    content: var(--wa-form-control-required-content);
+    margin-inline-start: var(--wa-form-control-required-content-offset);
+    color: var(--wa-form-control-required-content-color);
+  }
 }
 
 /* Help text */

packages/webawesome/src/styles/themes/awesome.css

@@ -332,7 +332,7 @@
 
     --wa-form-control-required-content: '*';
     --wa-form-control-required-content-color: inherit;
-    --wa-form-control-required-content-offset: 0.1em;
+    --wa-form-control-required-content-offset: -0.1em;
 
     --wa-form-control-padding-block: 1em;
     --wa-form-control-padding-inline: 1.25em;

packages/webawesome/src/styles/themes/default.css

@@ -326,7 +326,7 @@
 
     --wa-form-control-required-content: '*';
     --wa-form-control-required-content-color: inherit;
-    --wa-form-control-required-content-offset: 0.1em;
+    --wa-form-control-required-content-offset: -0.1em;
 
     --wa-form-control-padding-block: 0.75em;
     --wa-form-control-padding-inline: 1em;

packages/webawesome/src/styles/themes/shoelace.css

@@ -332,7 +332,7 @@
 
     --wa-form-control-required-content: '*';
     --wa-form-control-required-content-color: inherit;
-    --wa-form-control-required-content-offset: 0.1em;
+    --wa-form-control-required-content-offset: -0.1em;
 
     --wa-form-control-padding-block: 0.75em;
     --wa-form-control-padding-inline: 1em;