fix version

Prevent theme icons from getting focus when tabbing
Looks like `tabindex="-1"` didn't work, need to file a separate issue for that
2026-01-13 12:39:14 +00:00 · 2025-03-28 13:40:28 -04:00 · 2025-03-28 13:27:08 -04:00 · 2025-03-28 13:27:08 -04:00 · 2025-03-28 13:27:08 -04:00 · 2025-03-28 13:27:08 -04:00
11 changed files with 97 additions and 35 deletions
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -1,7 +1,7 @@
 {# Getting started #}
 <h2>Getting Started</h2>
 <ul>
-  <li><a href="/docs/installation">Installation</a></li>
+  <li><a href="/docs/">Installation</a></li>
  <li><a href="/docs/usage">Usage</a></li>
  <li><a href="/docs/customizing">Customizing</a></li>
  <li><a href="/docs/form-controls">Form Controls</a></li>
--- a/docs/_includes/svgs/theme.njk
+++ b/docs/_includes/svgs/theme.njk
@@ -21,8 +21,8 @@
        </div>
      </div>
      <div class="row row-2">
-        <wa-input value="Input" size="small"></wa-input>
-        <wa-button size="small" variant="brand">Go</wa-button>
+        <wa-input value="Input" size="small" inert></wa-input>
+        <wa-button size="small" variant="brand" inert>Go</wa-button>
      </div>
    </div>
  </template>
--- a/docs/docs/components/page.md
+++ b/docs/docs/components/page.md
@@ -885,4 +885,4 @@ If you don’t want to use [native styles](/docs/native/), you can include this

 ```html
 <link rel="stylesheet" href="{% cdnUrl 'styles/components/page.css' %}" />
-```
+```
--- a/docs/docs/docs.11tydata.js
+++ b/docs/docs/docs.11tydata.js
@@ -5,8 +5,11 @@ import { sort } from '../_utils/filters.js';

 export default {
  eleventyComputed: {
-    // Default parent. Can be overridden by explicitly setting parent in the data.
-    // parent can refer to either an ancestor page in the URL or another page in the same directory
+    /**
+     * Default parent slug. Can be overridden by explicitly setting parent in the data.
+     * It can be either the URL slug of a page in the same directory or a parent directory.
+     * @returns {string | undefined}
+     */
    parent(data) {
      let { parent, page } = data;

@@ -17,16 +20,28 @@ export default {
      return page.url.split('/').filter(Boolean).at(-2);
    },

+    /**
+     * URL of parent page
+     * @returns {string | undefined}
+     */
    parentUrl(data) {
      let { parent, page } = data;
      return getParentUrl(page.url, parent);
    },

+    /**
+     * Collection item of parent page
+     * @returns {object | undefined} Parent page item
+     */
    parentItem(data) {
      let { parentUrl } = data;
      return data.collections.all.find(item => item.url === parentUrl);
    },

+    /**
+     * Child pages of current page
+     * @returns {object[]} Array of child pages
+     */
    children(data) {
      let { collections, page, parentOf } = data;

@@ -48,7 +63,17 @@ export default {
  },
 };

+/**
+ * Resolve a parent slug against a page URL
+ * @param {string} url - The URL of the page
+ * @param {string} parent - The slug of the parent page
+ * @returns {string} The resolved URL of the parent page
+ */
 function getParentUrl(url, parent) {
+  if (!parent) {
+    return undefined;
+  }
+
  let parts = url.split('/').filter(Boolean);
  let ancestorIndex = parts.findLastIndex(part => part === parent);
  let retParts = parts.slice();
@@ -64,15 +89,18 @@ function getParentUrl(url, parent) {
  let ret = retParts.join('/');

  if (url.startsWith('/')) {
+    // If the current page starts with a slash, make sure the parent does too
+    // This is pretty much always the case with 11ty page URLs
    ret = '/' + ret;
  }

-  if (!retParts.at(-1).includes('.') && !ret.endsWith('/')) {
+  if (!retParts.at(-1)?.includes('.') && !ret.endsWith('/')) {
    // If no extension, make sure to end with a slash
    ret += '/';
  }

  if (ret === '/docs/') {
+    // We don't want anyone's parent to be "Installation"!
    ret = '/';
  }

--- a/docs/docs/installation.md
+++ b/docs/docs/installation.md
@@ -32,7 +32,7 @@ To get everything included in Web Awesome, add the following code to the `<head>

 This snippet includes three parts:
 1. **The default theme**, a stylesheet that gives a cohesive look to Web Awesome components with both light and dark modes
-2. **Web Awesome styles**, an optional stylesheet that [styles native HTML elements](/docs/native) and includes [utility classes](/docs/utilities) you can use in your project 
+2. **Web Awesome styles**, an optional stylesheet that [styles native HTML elements](/docs/native) and includes [utility classes](/docs/utilities) you can use in your project
 3. **The autoloader**, a lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically

 Now you can [start using Web Awesome!](/docs/usage)
@@ -58,7 +58,7 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You

 ## Advanced Setup

-The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods. 
+The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods.

 ### Installing via npm

@@ -122,4 +122,4 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
  // Get the path to an asset, e.g. /path/to/assets/file.ext
  const assetPath = getBasePath('file.ext');
 </script>
-```
+```
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -12,37 +12,37 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
 During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
 :::

-## Next
-
- Fixed the search dialog's styles so it doesn't jump around as you search
- Removed close watcher logic to backdrop hide animation bugs in `<wa-dialog>` and `<wa-drawer>`; this logic is already handled and we'll revisit `CloseWatcher` when browser support is better and behaviors are consistent
- Fixed a bug that caused dropdowns inside button groups to show with a vertical misalignment
- Revert `<wa-dialog>` structure and CSS to fix clipped content in dialogs (WA-A #123) and light dismiss in iOS Safari (WA-A #201)
- Fixed a bug in `<wa-progress>` that prevented Safari from animation progress changes
- Fixed the missing indeterminate icon in native checkbox styles
- Fixed a bug where changing a `<wa-option>` label wouldn't update the display label in `<wa-select>`
- Fixed a bug in `<wa-radio>` where elements would stack instead of display inline
+## 3.0.0-alpha.12

 ### Enhancements

 - Added `appearance` to [`<wa-details>`](/docs/components/details) and [`<wa-card>`](/docs/components/card) and support for the [appearance utilities](/docs/utilities/appearance/) in the [`<details>` native styles](/docs/native/details).
 - Added an `orange` scale to all color palettes
- Added the `.wa-cloak` utility to prevent FOUCE
- Added the `allDefined()` utility for awaiting component registration
- Added default spacing to icons slotted into `<wa-tab>`
- Fixed `wa-pill` class for text fields
+- Added the [`.wa-cloak` utility](/docs/utilities/fouce) to prevent FOUCE
+- Added the [`allDefined()` utility](/docs/usage/#all-defined) for awaiting component registration

-### Bugfixes
+### Bug fixes

 - Specifying inherited CSS properties on `<wa-tooltip>` now works as expected ([thanks Dennis!](https://github.com/shoelace-style/webawesome-alpha/discussions/203))
 - Fixed a bug in `<wa-select>` that made it hard to use with VueJS, Svelte, and many other frameworks
- Fixed the `wa-pill` class for text fields
- Fixed `pill` style for `<wa-input>` elements
- Fixed a bug in `<wa-color-picker>` that prevented light dismiss from working when clicking immediately above the color picker dropdown
 - Fixed a bug in `<wa-select multiple>` that sometimes resulted in empty `<div>` elements being output
- Fixed a bug in `<wa-radio-button>` that prevented the pill effect from applying properly
+- Fixed a bug where changing a `<wa-option>` label wouldn't update the display label in `<wa-select>`
+- Added default spacing to icons slotted into `<wa-tab>`
+- Lots of fixes around pill-shaped elements:
+  - Fixed the `wa-pill` class for text fields
+  - Fixed `pill` style for `<wa-input>` and `<wa-radio-button>` elements
 - Fixed a bug in `<wa-radio-button>` that prevented active buttons from receiving the correct styles
 - Fixed a bug in `<wa-button>` that prevented the focus ring from showing in Safari
+- Fixed alignment of `<wa-dropdown>` inside button groups
+- Removed close watcher logic to backdrop hide animation bugs in `<wa-dialog>` and `<wa-drawer>`; this logic is already handled and we'll revisit `CloseWatcher` when browser support is better and behaviors are consistent
+- Revert `<wa-dialog>` structure and CSS to fix clipped content in dialogs (WA-A #123) and light dismiss in iOS Safari (WA-A #201)
+- Fixed a bug in `<wa-color-picker>` that prevented light dismiss from working when clicking immediately above the color picker dropdown
+- Fixed a bug in `<wa-progress>` that prevented Safari from animation progress changes
+- Fixed the missing indeterminate icon in [native checkbox styles](/docs/native/checkbox)
+- Fixed a bug in `<wa-radio>` where elements would stack instead of display inline
+- Docs fixes:
+  - Fixed the search dialog's styles so it doesn't jump around as you search
+  - Theme cards now have icons

 ## 3.0.0-alpha.11

--- a/docs/docs/usage.md
+++ b/docs/docs/usage.md
@@ -12,6 +12,8 @@ If you're new to custom elements, often referred to as "web components," this se

 Unlike traditional frameworks, custom elements don't have a centralized initialization phase. This means you need to verify that a custom element has been properly registered before attempting to interact with its properties or methods.

+### Individual components: `customElements.whenDefined()` { #when-defined}
+
 You can use the [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined) method to ensure a specific component is ready:

 ```ts
@@ -21,6 +23,8 @@ await customElements.whenDefined('wa-button');
 const button = document.querySelector('wa-button');
 ```

+### All Web Awesome components: `allDefined()` { #all-defined }
+
 When working with multiple components, checking each one individually can become tedious. For convenience, Web Awesome provides the `allDefined()` function which automatically detects and waits for all Web Awesome components in the DOM to be initialized before resolving.

 ```ts
@@ -32,6 +36,33 @@ await allDefined();
 // All Web Awesome components on the page are ready!
 ```

+#### Advanced Usage
+
+By default, `allDefined()` will wait for all `wa-` prefixed custom elements within the current `document` to be registered.
+You can customize this behavior by passing in options:
+- `root` allows you to pass in a different element to search within, or a different document entirely (defaults to `document`).
+- `match` allows you to specify a custom function to determine which elements to wait for. This function should return `true` for elements you want to wait for and `false` for those you don't.
+- `additionalElements` allows you to wait for custom elements to be defined that may not be present in the DOM at the time `allDefined()` is called. This can be useful for elements that are loaded dynamically via JS.
+
+Here is an example of using `match` and `root` to await registration of Web Awesome components inside an element with an id of `sidebar`, plus a `<my-component>` element if present in the DOM, and `<wa-slider>` and `<other-slider>` elements whether present in the DOM or not:
+
+```js
+import { allDefined } from '/dist/webawesome.js';
+
+await allDefined({
+  match: tagName => tagName.startsWith('wa-') || tagName === 'my-component',
+  root: document.getElementById('sidebar'),
+  additionalElements: ['wa-slider', 'other-slider']
+});
+```
+
+:::warning
+`additionalElements` will only wait for elements to be registered — it will not load them.
+If you're using the autoloader plus custom JS to inject HTML dynamically, **you need to make sure your JS runs _before_ the `await allDefined()` call**,
+otherwise you could run into a chicken and egg issue:
+since the autoloader will not load elements until they are present in the DOM, the promise will never resolve and your JS to inject them will not run.
+:::
+
 ## Attributes & Properties

 Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.
--- a/docs/docs/utilities/fouce.md
+++ b/docs/docs/utilities/fouce.md
@@ -3,12 +3,14 @@ title: Reduce FOUCE
 description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
 file: styles/utilities/fouce.css
 icon: spinner
+snippet: .wa-cloak
 ---

-While convenient, autoloading can lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).
-The [FOUCE style utility](/docs/utilities/fouce/#opting-in) (which is automatically applied if you use the [Web Awesome utilities](/docs/utilities/)) takes care of hiding custom elements until they and their contents have been registered, up to a maximum of two seconds.
+Often, components are shown before their logic and styles have had a chance to load, also known as a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).
+The FOUCE style utility (which is automatically applied if you use our [style utilities](/docs/utilities/)) automatically takes care of hiding custom elements until **both they and their contents** have been registered, up to a maximum of two seconds.

-In many cases, this is not enough, and you may wish to hide a broader wrapper element or even the entire page until all WA elements within it have loaded. To do that, you can add the `wa-reduce-fouce` class to any element on the page or even apply it to the whole page by placing the class on the `<html>` element.
+In many cases, this is not enough, and you may wish to hide a broader wrapper element or even the entire page until all WA elements within it have loaded.
+To do that, you can add the `wa-cloak` class to any element on the page or even apply it to the whole page by placing the class on the `<html>` element:

 ```html
 <html class="wa-cloak">
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@shoelace-style/webawesome",
-  "version": "3.0.0-alpha.11",
+  "version": "3.0.0-alpha.12",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@shoelace-style/webawesome",
-      "version": "3.0.0-alpha.11",
+      "version": "3.0.0-alpha.12",
      "license": "MIT",
      "dependencies": {
        "@ctrl/tinycolor": "^4.1.0",
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@shoelace-style/webawesome",
  "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-alpha.11",
+  "version": "3.0.0-alpha.12",
  "homepage": "https://webawesome.com/",
  "author": "Web Awesome",
  "license": "MIT",
--- a/src/components/page/page.css
+++ b/src/components/page/page.css
@@ -97,6 +97,7 @@ slot:not([name]) {
 :host([disable-sticky~='menu']) [part~='menu'] {
  position: static;
  overflow: unset;
+  z-index: unset;
 }

 :host([disable-sticky~='aside']) [part~='aside'],
Author	SHA1	Message	Date
Cory LaViska	734417d66b	fix version	2025-03-28 13:40:28 -04:00
Lea Verou	2cfd651d2f	Prevent theme icons from getting focus when tabbing Looks like `tabindex="-1"` didn't work, need to file a separate issue for that	2025-03-28 13:27:08 -04:00
Lea Verou	3e2d1b98be	Changelog fixes - Moved fixes to bug fixes section - Linked `allDefined()` and `.wa-cloak` to their docs - Grouped related bugfixes together - Moved docs bugfixes to the end (since they are of least interest to users)	2025-03-28 13:27:08 -04:00
Lea Verou	40f332f37c	Expand docs on `allDefined()`	2025-03-28 13:27:08 -04:00
Lea Verou	bfda64f690	Fix `wa-cloak` docs	2025-03-28 13:27:08 -04:00
Konnor Rogers	883d6df2ef	fix z-index issues on sticky-disabled elements. (#848 )	2025-03-28 12:26:30 -04:00
Lea Verou	b4240fd321	Move `/docs/installation` to `/docs/`, fix parent URL logic, closes #585 (#846 ) * Fix: Parent URL should be undefined if parent is falsy * Document `docs.11tydata.js` better * Move `docs/installation.md` to `docs/`, fixes #585 * Just in case	2025-03-28 12:12:42 -04:00
Cory LaViska	8755a834f6	3.0.0-alpha.12	2025-03-28 11:07:44 -04:00
Cory LaViska	8d905296b8	update changelog	2025-03-28 11:07:42 -04:00
Cory LaViska	8eba1e5003	Various bug fixes (#839 ) * add default icon spacing in tab; fixes #779 * fix radio button pill styles; fixes #759 * remove redundant styles * fixes #840 * fix focus ring in Safari; fixes #745 * improve details styles; fixes #685 * update examples * Revert "improve details styles; fixes #685" This reverts commit `8151872d22`. * revert * revert * fix dropdown alignment in button group; closes #374 * fix progress animation in Safari; closes #356 * fix native checkbox indeterminate icon; closes #386 * add comment * stop running SSR tests locally * update test * add FA kit code for codepen 🤞🏻 * remove wa-cloak after components load * fix whitespace * update display labels when changed; fixes #702 * fix radio labels (ALPHA-211) * revert example * add option as a dep of select * remove outdated section	2025-03-28 10:57:01 -04:00