+
+```
+
### Right-to-Left Languages
The details styling automatically adapts to right-to-left languages:
diff --git a/docs/docs/native/input.md b/docs/docs/native/input.md
index c7c11f0dc..ef7c483e5 100644
--- a/docs/docs/native/input.md
+++ b/docs/docs/native/input.md
@@ -42,6 +42,14 @@ wa-code-demo::part(preview) {
+
+Outlined (default)
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+Filled
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+Filled + Outlined
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+Plain
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +` 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
+
+### Bugfixes
+
+- Specifying inherited CSS properties on `` now works as expected ([thanks Dennis!](https://github.com/shoelace-style/webawesome-alpha/discussions/203))
+- Fixed a bug in `` 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 `` elements
+- Fixed a bug in `` that prevented light dismiss from working when clicking immediately above the color picker dropdown
+- Fixed a bug in `` that sometimes resulted in empty `
` elements being output
+
## 3.0.0-alpha.11
### Color Palettes
@@ -26,6 +42,7 @@ During the alpha period, things might break! We take breaking changes very serio
- Added a `pink` scale to all color palettes
- Tweaked hues of all color palettes to make them more distinct and make their hues more intentional
- Dropped `violet` and `teal`, instead using `purple` and `cyan` (this is not just a renaming, the colors have been adjusted too).
+- Fixed a bug in `` that caused tooltips to work incorrectly when toggling the switch
### Design Tokens
diff --git a/docs/docs/themes/creating.md b/docs/docs/themes/creating.md
index 618d7bead..a73484182 100644
--- a/docs/docs/themes/creating.md
+++ b/docs/docs/themes/creating.md
@@ -31,8 +31,7 @@ If you're customizing the default dark styles, scope your styles to the followin
```css
.wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
+.wa-invert {
/* your custom styles here */
}
```
diff --git a/docs/docs/themes/index.njk b/docs/docs/themes/index.njk
index 9c1753e0e..71331c483 100644
--- a/docs/docs/themes/index.njk
+++ b/docs/docs/themes/index.njk
@@ -1,13 +1,13 @@
---
title: Themes
-description: Themes are collections of design tokens that thread through every Web Awesome component and pattern.
+description: Themes are collections of design tokens that thread through every Web Awesome component and pattern.
Themes play a crucial role in [customizing Web Awesome](/docs/customizing).
layout: overview
override:tags: []
forTag: theme
categories:
+ tags: [other, pro]
other: Free
- pro: Pro
---
@@ -30,7 +30,7 @@ In pre-made themes, we use a light color scheme by default.
Additionally, styles may be scoped to the `:root` selector to be activated automatically.
For pre-made themes, *all* custom properties are scoped to `:root`, the theme class, and `wa-light`.
-Finally, we scope themes to `:host` and `:host-context()` to ensure the styles are applied to the shadow roots of custom elements.
+Finally, we scope themes to `:host` to ensure the styles are applied to the shadow roots of custom elements.
For example, the default theme is set up like this:
@@ -44,8 +44,7 @@ For example, the default theme is set up like this:
}
.wa-dark,
-.wa-invert,
-:host-context(.wa-dark) {
+.wa-invert {
/* subset of CSS custom properties for a dark color scheme */
}
```
diff --git a/docs/docs/themes/themes.json b/docs/docs/themes/themes.json
index 3af2e88e3..35e61b030 100644
--- a/docs/docs/themes/themes.json
+++ b/docs/docs/themes/themes.json
@@ -3,6 +3,7 @@
"wide": true,
"tags": ["themes", "theme"],
"brand": "blue",
+ "icon": "theme",
"eleventyComputed": {
"file": "styles/themes/{{ page.fileSlug }}.css"
}
diff --git a/docs/docs/tokens/index.njk b/docs/docs/tokens/index.njk
index 74337da3f..578b6524f 100644
--- a/docs/docs/tokens/index.njk
+++ b/docs/docs/tokens/index.njk
@@ -3,4 +3,5 @@ title: Design Tokens
description: A theme is a collection of predefined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.
layout: overview
override:tags: []
+categories: {tags: true}
---
diff --git a/docs/docs/usage.md b/docs/docs/usage.md
index aea75ebc4..651ade28e 100644
--- a/docs/docs/usage.md
+++ b/docs/docs/usage.md
@@ -8,6 +8,30 @@ Web Awesome components are just regular HTML elements, or [custom elements](http
If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
+## Awaiting Registration
+
+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.
+
+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
+await customElements.whenDefined('wa-button');
+
+// is ready to use!
+const button = document.querySelector('wa-button');
+```
+
+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
+import { allDefined } from '/dist/webawesome.js';
+
+// Waits for all Web Awesome components in the DOM to be registered
+await allDefined();
+
+// All Web Awesome components on the page are ready!
+```
+
## 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.
diff --git a/docs/docs/utilities/fouce.md b/docs/docs/utilities/fouce.md
new file mode 100644
index 000000000..e80173065
--- /dev/null
+++ b/docs/docs/utilities/fouce.md
@@ -0,0 +1,32 @@
+---
+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
+---
+
+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.
+
+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 `` element.
+
+```html
+
+ ...
+
+```
+
+As soon as all elements are registered _or_ after two seconds have elapsed, the autoloader will show the page. The two-second timeout prevents blank screens from persisting on slow networks and pages that have errors.
+
+:::details Are you using Turbo in your app?
+
+If you're using [Turbo](https://turbo.hotwired.dev/) to serve a multi-page application (MPA) as a single page application (SPA), you might notice FOUCE when navigating from page to page. This is because Turbo renders the new page's content before the autoloader has a change to register new components.
+
+The following function acts as a middleware to ensure components are registered _before_ the page shows, eliminating FOUCE for page-to-page navigation with Turbo.
+
+```js
+import { preventTurboFouce } from '/dist/webawesome.js';
+
+preventTurboFouce();
+```
+:::
diff --git a/docs/docs/utilities/fouce.njk b/docs/docs/utilities/fouce.njk
deleted file mode 100644
index 23669b9dc..000000000
--- a/docs/docs/utilities/fouce.njk
+++ /dev/null
@@ -1,131 +0,0 @@
----
-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
----
-{% markdown %}
-No class is needed to use this utility, it will be applied automatically as long as it its CSS is included.
-
-Here is a comparison of the loading experience with and without this utility,
-with a simulated slow loading time:
-
-{% endmarkdown %}
-
-
-
- 
-
- Mittens
- This kitten is as cute as he is playful. Bring him home today!
- 6 weeks old - -
-
-
-{% endset %}
-
-
-
- Normal loading
-
-
- With FOUCE reduction
-
-
-
-{% set sample_card %}
-
-
-
-
-
-
-
- Mittens- This kitten is as cute as he is playful. Bring him home today!
- 6 weeks old - -
- More Info
-
-
-
-
-
-
-
-{% markdown %}
-## How does it work?
-
-The utility consists of a timeout (`2s` by default) and a fade duration (`200ms` by default).
-- If the element is _ready_ before the timeout, it will appear immediately.
-- If it takes longer than _timeout_ + _fade_, it will fade in over the fade duration.
-- If it takes somewhere between _timeout_ and _timeout_ + _fade_, you will get an interrupted fade.
-
-An element is considered ready when both of these are true:
-1. Either It has been registered or has a `did-ssr` attribute (indicating it was pre-rendered)
-2. If it’s a Web Awesome component, its contents are also ready
-
-## Customization
-
-You can use the following CSS variables to customize the behavior:
-
-| Variable | Description | Default |
-| --- | --- | --- |
-| `--wa-fouce-fade` | The transition duration for the fade effect. | `200ms` |
-| `--wa-fouce-timeout` | The timeout after which elements will appear even if not registered | `2s` |
-
-The fade duration cannot be longer than the timeout.
-This means that you can disable FOUCE reduction on an element by setting `--wa-fouce-timeout: 0s`.
-
-For example, if instead of `did-ssr` you used an `ssr` attribute to mark elements that were pre-rendered, you can do this to get them to appear immediately:
-
-```css
-[ssr] {
- --wa-fouce-timeout: 0s;
-}
-```
-
-You can also opt-out from FOUCE reduction for an element and its contents by adding the `.wa-fouce-off` class to it.
-Applying this class to the root element will disable the utility for the entire page.
-{% endmarkdown %}
diff --git a/docs/index.md b/docs/index.md
index aa3d060f5..9ae2e8a82 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -4,8 +4,6 @@ description: Build better with Web Awesome, the open source library of web compo
layout: page
---
-
-