-
-
- Left
- Center
- Right
-
-```
-
-:::info
-While you can still set the size of [buttons](/docs/components/button) individually,
-and it will override the inherited size,
-it is rarely a good idea to mix sizes within the same button group.
-:::
-
### Vertical Button Groups
Set the `orientation` attribute to `vertical` to make a vertical button group.
diff --git a/packages/webawesome/docs/docs/components/details.md b/packages/webawesome/docs/docs/components/details.md
index f35193982..bd4f7b8a1 100644
--- a/packages/webawesome/docs/docs/components/details.md
+++ b/packages/webawesome/docs/docs/components/details.md
@@ -50,15 +50,15 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
### Icon Position
-The default position for the expand and collapse icons is at the end of the summary. Set the `icon-position` attribute to `start` to place the icon at the start of the summary.
+The default position for the expand and collapse icons is at the end of the summary. Set the `icon-placement` attribute to `start` to place the icon at the start of the summary.
```html {.example}
-
+
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.
-
+
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.
@@ -85,14 +85,14 @@ Links and other interactive elements will still retain their behavior:
### Right-to-Left Languages
-The details component, including its `icon-position`, automatically adapts to right-to-left languages:
+The details component, including its `icon-placement`, automatically adapts to right-to-left languages:
```html {.example}
استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
-
+
استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
diff --git a/packages/webawesome/docs/docs/components/icon.md b/packages/webawesome/docs/docs/components/icon.md
index c4aaa2da2..0f7e88c78 100644
--- a/packages/webawesome/docs/docs/components/icon.md
+++ b/packages/webawesome/docs/docs/components/icon.md
@@ -7,6 +7,10 @@ category: Imagery
Web Awesome comes bundled with over 2,000 free icons courtesy of [Font Awesome](https://fontawesome.com/). These icons are part of the `default` icon library. Font Awesome Pro users can unlock additional icon families. Or, if you prefer, you can register your own [custom icon library](#icon-library).
+```html {.example}
+
+```
+
:::info
Not sure which icon to use? [Find the perfect icon over at Font Awesome!](https://fontawesome.com/search?o=r&m=free&f=brands%2Cclassic)
:::
@@ -17,73 +21,58 @@ Not sure which icon to use? [Find the perfect icon over at Font Awesome!](https:
The default icon library is Font Awesome Free, which comes with two icon families: `classic` and `brands`. Use the `family` attribute to set the icon family.
-Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/#using-font-awesome-kit-codes) to unlock additional families, including `sharp`, `duotone`, and `sharp-duotone`. For these icon families, use the `variant` attribute to set the variant.
+Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/#using-font-awesome-kit-codes) to unlock additional premium icon families, including `sharp`, `duotone`, `sharp-duotone`, and additional Pro+ icon packs.
+
+For supportive icon families, use the `variant` attribute to set the variant.
```html {.example}
-
-
-
-
-
-```
-
-### Colors
-
-Icons inherit their color from the current text color. Thus, you can set the `color` property on the `` element or an ancestor to change the color.
-
-```html {.example}
-
-
-
-
-
+
+
+ Classic
+
+
+
+
+
+
+
+
+ Duotone
+
+
+
+
+
+
+
+
+ Sharp
+
+
+
+
+
+
+
+
+ Sharp Duotone
+
+
+
+
+
+
+
+
+ Brands
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### Sizing
-
-Icons are sized relative to the current font size. To change their size, set the `font-size` property on the icon itself or on a parent element as shown below.
-
-```html {.example}
-
-
-
-
-
-
-
-
-```
-
-### Fixed Width Icons
-
-By default, icons have a 1em height and a variable width. Use the `fixed-width` attribute to render the host element in a 1em by 1em box.
-
-```html {.example}
-
-
-
-
-
-
```
### Labels
@@ -91,9 +80,335 @@ By default, icons have a 1em height and a variable width. Use the `fixed-width`
For non-decorative icons, use the `label` attribute to announce it to assistive devices.
```html {.example}
-
+
```
+### Sizing
+
+Icons are sized relative to the current font size. To change their size, set the `font-size` property on the icon itself or on a parent element as shown below.
+
+```html {.example}
+
+
+
+
+
+
+
+
+```
+
+### Auto Width
+
+By default, icons have a 1em height and a fixed 1em width. Use the `auto-width` attribute to allow the icon to use its natural variable width.
+
+```html {.example}
+Without auto-width
+
+
+
+
+
+
+
+
+
+
+
+With auto-width
+
+
+
+
+
+
+
+
+```
+
+### Colors
+
+Icons inherit their color from the current text color. Thus, you can set the `color` property on the `` element or an ancestor to change the color.
+
+```html {.example}
+
+
+
+
+
+
+
+
+```
+
+### Duotone
+
+Font Awesome's [Duotone icons](https://docs.fontawesome.com/web/style/duotone) change with the `color` property as well, but you can customize the primary and secondary colors independently using the `--primary-color` and `--secondary-color` custom properties. To change the opacity of either, use `--primary-opacity` and `--secondary-opacity`.
+
+Note that these custom properties will not inherit and _must be applied directly to the icon_.
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+:::info
+Duotone icons can be unlocked by [providing a valid Font Awesome kit code](/docs/#using-font-awesome-kit-codes).
+:::
+
+### Swap Duotone Opacity
+
+For duotone icons, you can swap the primary and secondary opacity values using the `swap-opacity` attribute. This is useful when you want to emphasize the secondary layer of the icon.
+
+```html {.example}
+Normal duotone
+
+
+
+
+
+
+
+
+
+Swapped duotone
+
+
+
+
+
+
+```
+
+### Font Awesome Pro+
+
+If you're a [Font Awesome Pro+ customer](https://fontawesome.com/), you have access to even more premium icons! Just set the appropriate `family`, `variant`, and `name` on the icon.
+
+```html {.example}
+
+```
+
+:::info
+Pro+ icons can be unlocked by [providing a valid Font Awesome kit code](/docs/#using-font-awesome-kit-codes).
+:::
+
### Custom Icons
Custom icons can be loaded individually with the `src` attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a [custom icon library](#icon-libraries).
@@ -287,7 +602,9 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
import { registerIconLibrary } from '/dist/webawesome.js';
registerIconLibrary('iconoir', {
- resolver: name => `https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@latest/icons/${name}.svg`,
+ resolver: (name, family) => {
+ return `https://cdn.jsdelivr.net/npm/iconoir@7.11.0/icons/regular/${name}.svg`;
+ },
mutator: svg =>
svg.querySelectorAll('path').forEach(path => {
path.setAttribute('fill', 'none');
@@ -297,7 +614,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
-
+
diff --git a/packages/webawesome/docs/docs/components/select.md b/packages/webawesome/docs/docs/components/select.md
index 4aeb21d2f..9bcb40e91 100644
--- a/packages/webawesome/docs/docs/components/select.md
+++ b/packages/webawesome/docs/docs/components/select.md
@@ -366,7 +366,7 @@ Here's a comprehensive example showing different lazy loading scenarios:
const option = document.createElement('wa-option');
option.setAttribute('value', 'foo');
- option.selected = true
+ option.selected = true;
option.innerText = 'Foo';
// For the multiple select with existing selected options, make the new option selected
@@ -403,4 +403,4 @@ Here's a comprehensive example showing different lazy loading scenarios:
:::info
The key principle is that the select component prioritizes user interactions and explicit selections over programmatic changes, ensuring a predictable user experience even with dynamically loaded content.
-:::
\ No newline at end of file
+:::
diff --git a/packages/webawesome/docs/docs/index.md b/packages/webawesome/docs/docs/index.md
index b1b62f36f..484e8ae23 100644
--- a/packages/webawesome/docs/docs/index.md
+++ b/packages/webawesome/docs/docs/index.md
@@ -32,7 +32,7 @@ Now you can [start using Web Awesome!](/docs/usage)
## Using Font Awesome Kit Codes
-Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You can provide it by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
+Font Awesome users can provide their kit code to unlock premium icon packs. You can provide yours by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
```html
@@ -45,6 +45,10 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You
```
+:::info
+Not a Font Awesome user yet? [Learn more about premium icon packs](https://fontawesome.com/) and sign up for an account to unlock them!
+:::
+
---
{# This looks weird, but without it, markdownItAttrs flags the raw calls incorrectly. #}
diff --git a/packages/webawesome/docs/docs/localization.md b/packages/webawesome/docs/docs/localization.md
index 2327b5d63..dfb3b6bd6 100644
--- a/packages/webawesome/docs/docs/localization.md
+++ b/packages/webawesome/docs/docs/localization.md
@@ -22,43 +22,7 @@ Through the magic of a mutation observer, changing the `lang` attribute will aut
## Available Translations
-Web Awesome ships with a number of translations. The default is English (US), which also serves as the fallback locale. As such, you do not need to import the English translation.
-
-Available translations include:
-
-
-
-- ar
-- cs
-- da
-- de-ch
-- de
-- en-gb
-- en
-- es
-- fa
-- fi
-- fr
-- he
-- hr
-- hu
-- id
-- it
-- ja
-- nb
-- nl
-- nn
-- pl
-- pt
-- ru
-- sl
-- sv
-- tr
-- uk
-- zh-cn
-- zh-tw
-
-
+Web Awesome ships with [a number of translations](https://github.com/shoelace-style/webawesome/tree/next/packages/webawesome/src/translations). The default is English (US), which also serves as the fallback locale. As such, you do not need to import the English translation.
You can import translations using the following syntax, where `` is replaced with any language code shown above.
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 11ea58450..6a9b80dfb 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -8,6 +8,32 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes
Components with the Experimental badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
+## Next
+
+### Bug Fixes and Improvements {data-no-outline}
+
+- 🚨 BREAKING: Updated `` to use Font Awesome 7 [pr:1222]
+ - Added the `auto-width` attribute to automatically size icons, since FA7 is fixed-width by default now
+ - Improved support for duotone icons in ``, including custom colors, custom opacity, and opacity swapping
+ - Removed the `fixed-width` attribute as it's now the default behavior
+- 🚨 BREAKING: Renamed the `icon-position` attribute to `icon-placement` in `` [discuss:1340]
+- 🚨 BREAKING: Removed the `size` attribute from `` as it only set the initial size and gets out of sync when buttons are updated (apply a `size` to each button instead)
+- Added the Hindi translation [pr:1307]
+- Added `--show-duration` and `--hide-duration` to `` [issue:1281]
+- Fixed incorrectly named exported tooltip parts in `` [pr:1277]
+- Fixed a bug in `` that caused menus to overflow the viewport instead of resizing [issue:1267]
+- Fixed a bug in `` that prevented keyboard selection of items when nested in shadow roots [issue:1270]
+- Fixed a bug in `` that prevented items passed in from slots from being detected [issue:1271]
+- Fixed a bug in JSX typings that prevented the types file from being exported [pr:1295]
+- Fixed a bug in JSX typings that generated the incorrect component imports [issue:1303]
+- Fixed a bug in `` that prevented the thumb from receiving focus when clicking/tapping [issue:1312]
+- Fixed a bug in `` that caused the shadow to appear below relatively-positioned elements [issue:1326]
+- Fixed a bug in `` that caused it to expand/collapse when clicking on interactive elements in the summary [issue:1252]
+- Fixed `` to have `static` positioning by default and `relative` positioning only when used with `` [pr:1346]
+- Fixed spacing in `` when both clear and password toggle icons are present [issue:1325]
+- Fixed a bug in `` and `` where changing appearances dynamically would render incorrectly [issue:1178]
+- Fixed a bug in `` that prevented the value from changing when assigning non-string values to `value` [issue:1323]
+
## 3.0.0-beta.4
### New Features {data-no-outline}
@@ -17,12 +43,14 @@ Components with the Experimental badge sh
- Added `--wa-tooltip-border-color`, `--wa-tooltip-border-style`, and `--wa-tooltip-border-width` tokens [issue:1224]
- Added the `without-arrow` attribute to `` and `` to hide arrows without artifacts
- Added JSX types for use with React and others [pr:1256]
+- Added `` to native styles [pr:1279]
### Bug Fixes and Improvements {data-no-outline}
- Fixed a bug in `` that caused the content to overflow the container when animating [issue:1149]
- Fixed a bug in `` and `` that prevented the header from showing when the label was missing [issue:1209]
- Fixed a missing dependency required for React wrappers
+- Fixed missing `:hover` and `:active` styles on native buttons without an appearance modifier class
## 3.0.0-beta.3
@@ -411,4 +439,4 @@ Many of these changes and improvements were the direct result of feedback from u
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
\ No newline at end of file
+Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
diff --git a/packages/webawesome/docs/docs/resources/contributing.md b/packages/webawesome/docs/docs/resources/contributing.md
index e2ccac067..447dc6792 100644
--- a/packages/webawesome/docs/docs/resources/contributing.md
+++ b/packages/webawesome/docs/docs/resources/contributing.md
@@ -252,22 +252,16 @@ This creates confusion because the part will be documented, but it won't work wh
### Emitting Events
-Components must only emit events that start with `wa-` as a namespace. For compatibility with frameworks that utilize DOM templates, events must have lowercase, kebab-style names. For example, use `wa-change` instead of `waChange`.
+Components must only emit events that start with `wa-` as a namespace. For compatibility with frameworks that utilize DOM templates, events must have lowercase, kebab-style names. For example, use `wa-event` instead of `waEvent`.
This convention avoids the problem of browsers lowercasing attributes, causing some frameworks to be unable to listen to them. This problem isn't specific to one framework, but [Vue's documentation](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names) provides a good explanation of the problem.
-### Change Events
-
-When change events are emitted by Web Awesome components, they should be named `wa-change` and they should only be emitted as a result of user input. Programmatic changes, such as setting `el.value = '…'` _should not_ result in a change event being emitted. This is consistent with how native form controls work.
-
### Data Attribute Invokers
Some components can be controlled using [data attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/data-*) that trigger specific behaviors. These controls must use the following convention:
```html
-
+
```
The `data-component` portion corresponds to the component's name without the `wa-` prefix. For example, `data-dialog` must control a `` component.
@@ -277,13 +271,9 @@ The `action` parameter is required and must be a concise, descriptive term indic
The `id` parameter must point to the ID of the target component. The ID may be omitted if and only if the target component wraps the element with the `data-` attribute.
```html
-
- Dialog content
-
+ Dialog content
-
+
```
### CSS Custom Properties
@@ -416,4 +406,4 @@ or for hydrated rendering only:
```bash
SSR_ONLY="true" npm run test
-```
\ No newline at end of file
+```
diff --git a/packages/webawesome/docs/docs/utilities/native.md b/packages/webawesome/docs/docs/utilities/native.md
index cfeb25f89..00d825c44 100644
--- a/packages/webawesome/docs/docs/utilities/native.md
+++ b/packages/webawesome/docs/docs/utilities/native.md
@@ -404,6 +404,7 @@ Create a variety of form controls with ``, `
```
+Add any [button](#buttons) modifier class to `` to change the file selector button's color variant, appearance, size, and shape.
+
+```html {.example}
+
+```
+
### Fieldsets
Group form controls together with `