allow required indicator to be targetable

* add Figma to sidebar

* add common styles for step icons

* move sidebar link

* fix missing help button icons

* add signpost `figure` styles

* step icons: it's all relative

packages/webawesome/docs/_includes/sidebar.njk

@@ -18,6 +18,12 @@
 <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="prefix" name="bug"></wa-icon>
+      <wa-icon slot="start" variant="regular" 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="prefix" name="message-question"></wa-icon>
+      <wa-icon slot="start" variant="regular" name="message-question"></wa-icon>
       Ask for help
     </wa-button>
   </div>

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

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

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

@@ -386,6 +386,27 @@ 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,6 +109,15 @@
     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,10 +30,13 @@ 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
 
@@ -477,4 +480,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 2.0
+ * @since 3.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,22 +63,40 @@
   border-radius: var(--wa-border-radius-pill) !important;
 }
 
-.text-field input,
-.text-field textarea {
-  /*
+.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 {
+    /*
     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;
+    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;
+    }
+  }
 }
 
 input {

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

@@ -101,6 +101,11 @@ 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;
@@ -113,6 +118,15 @@ 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-block;
+  display: inline-flex;
   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]) &::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]) :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);
 }
 
 /* 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;