diff --git a/docs/assets/data/theming.js b/docs/assets/data/theming.js
index b44299370..1fe14251d 100644
--- a/docs/assets/data/theming.js
+++ b/docs/assets/data/theming.js
@@ -40,24 +40,6 @@ export const themeConfig = {
return this.base;
},
},
- icon: {
- library: {
- cssProperty: '--wa-icon-library',
- default: 'default',
- },
- family: {
- cssProperty: '--wa-icon-family',
- default(baseTheme) {
- return baseTheme?.icon?.family ?? 'classic';
- },
- },
- style: {
- cssProperty: '--wa-icon-variant',
- default(baseTheme) {
- return baseTheme?.icon?.style ?? 'solid';
- },
- },
- },
rounding: {
cssProperty: '--wa-border-radius-scale',
default(baseTheme) {
diff --git a/docs/assets/scripts/util/string.js b/docs/assets/scripts/util/string.js
index 617935a50..ff889e169 100644
--- a/docs/assets/scripts/util/string.js
+++ b/docs/assets/scripts/util/string.js
@@ -5,7 +5,7 @@
*/
export function capitalize(str) {
str += '';
- return str[0].toUpperCase() + str.slice(1);
+ return str[0]?.toUpperCase() + str.slice(1);
}
/**
@@ -29,7 +29,7 @@ export function slugify(str) {
* @returns {string} The camel case string.
*/
export function camelCase(str) {
- return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+ return str.replace(/-([a-z])/g, (_, letter) => letter?.toUpperCase());
}
/**
@@ -38,5 +38,5 @@ export function camelCase(str) {
* @returns {string} The kebab case string.
*/
export function kebabCase(str) {
- return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+ return str.replace(/([A-Z])/g, '-$1')?.toLowerCase();
}
diff --git a/docs/assets/styles/theme-headers.css b/docs/assets/styles/theme-headers.css
index 5636326b4..02192e96c 100644
--- a/docs/assets/styles/theme-headers.css
+++ b/docs/assets/styles/theme-headers.css
@@ -71,7 +71,8 @@ html.wa-theme-tailspin .preview-container {
.hero {
--hero-background-color: var(--wa-color-surface-default);
--hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 30%);
- background: linear-gradient(to top, var(--wa-color-surface-lowered), transparent 40%),
+ background:
+ linear-gradient(to top, var(--wa-color-surface-lowered), transparent 40%),
radial-gradient(circle at 10% 70%, color-mix(in oklab, var(--wa-color-red-50) 16%, transparent), transparent 30%),
radial-gradient(
circle at 40% 50%,
diff --git a/docs/assets/vue/components/icons-card.js b/docs/assets/vue/components/icons-card.js
index c23ccdfda..7b0a23e21 100644
--- a/docs/assets/vue/components/icons-card.js
+++ b/docs/assets/vue/components/icons-card.js
@@ -90,7 +90,7 @@ export default {
let value = this.computed[key];
if (key === 'library') {
- titles[key] = iconLibraries[value].title;
+ titles[key] = iconLibraries[value]?.title;
}
titles[key] ??= capitalize(value);
@@ -113,6 +113,7 @@ export default {
if (vary.length > 0) {
for (let param of vary) {
let allValues = library[param];
+ if (!allValues) return;
let random = (allValues.random ??= []);
while (random.length < TOTAL_ICONS) {
diff --git a/docs/docs/components/callout.md b/docs/docs/components/callout.md
index 07b9b90e5..5a378475f 100644
--- a/docs/docs/components/callout.md
+++ b/docs/docs/components/callout.md
@@ -110,15 +110,15 @@ Use the `appearance` attribute to change the callout's visual appearance (the de
Use the `size` attribute to change a callout's size.
```html {.example}
-
-
+
+
This is meant to be very emphasized.
-
+
Normal-sized callout.
-
+
Just a small tip!
diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
index dda37916e..1795dd39e 100644
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -127,41 +127,6 @@ If using SSR, you need to also use the `with-media` attribute to add a media sec
```
-### Sizing
-
-Use the `size` attribute to change a card's size.
-
-```html {.example}
-
-
- This is a small card.
-
-
-
-
-
- This is a medium card (default).
-
-
-
-
-
- This is a large card.
-
-
-
-
-```
-
### Appearance
Use the `appearance` attribute to change the card's visual appearance.
diff --git a/docs/docs/components/icon.md b/docs/docs/components/icon.md
index 166a4b04e..ea4e7462e 100644
--- a/docs/docs/components/icon.md
+++ b/docs/docs/components/icon.md
@@ -27,86 +27,6 @@ Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regu
```
-### Setting defaults via CSS
-
-You can use certain CSS custom properties to set icon defaults, not just on the icon itself, but any ancestor.
-This can be useful when you want certain parameters to vary based on context, e.g. icons inside callouts or all icons for a given theme.
-
-:::warning
-These CSS properties are intended to set **defaults**, and thus only make a difference when the corresponding attributes are not set.
-In future versions of Web Awesome, we may change this behavior to allow CSS properties to override attributes if `!important` is used.
-:::
-
-For example, here is how you can use CSS custom properties to set a default icon for each type of callout:
-
-```html {.example}
-
-
-
- This is a normal callout.
-
-
-
-
- This is a callout with an explicit icon, which overrides these defaults.
-
-
-
-
-
- Here be dragons.
-
-
-
-
-
- Here be more dragons.
-
-
-
-
-
- Success!
-
-
-
-```
-
-You can even set icons dynamically, as a response to user interaction or media queries.
-For example, here's how we can change the icon on hover:
-
-```html {.example}
- GitHub Repo
-
-```
-
### 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.
@@ -222,17 +142,33 @@ This will register the [Bootstrap Icons](https://icons.getbootstrap.com/) librar
Icons in this library are licensed under the [MIT License](https://github.com/twbs/icons/blob/main/LICENSE).
-```html
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
### Boxicons
@@ -287,6 +223,18 @@ This will register the [Lucide](https://lucide.dev/) icon library using the jsDe
Icons in this library are licensed under the [MIT License](https://github.com/lucide-icons/lucide/blob/master/LICENSE).
```html {.example}
+
+
@@ -295,14 +243,6 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
-
-
```
### Heroicons
@@ -316,7 +256,11 @@ Icons in this library are licensed under the [MIT License](https://github.com/ta
import { registerIconLibrary } from '/dist/webawesome.js';
registerIconLibrary('heroicons', {
- resolver: name => `https://cdn.jsdelivr.net/npm/heroicons@2.0.1/24/outline/${name}.svg`
+ resolver: name => `https://cdn.jsdelivr.net/npm/heroicons@2.0.1/24/outline/${name}.svg`,
+ mutator: svg => svg.querySelectorAll('path').forEach(path => {
+ path.setAttribute('fill', 'none');
+ path.setAttribute('stroke', 'currentColor');
+ })
});
@@ -341,7 +285,11 @@ 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 => `https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@latest/icons/${name}.svg`,
+ mutator: svg => svg.querySelectorAll('path').forEach(path => {
+ path.setAttribute('fill', 'none');
+ path.setAttribute('stroke', 'currentColor');
+ })
});
diff --git a/docs/docs/palettes/tweak.css b/docs/docs/palettes/tweak.css
index d4b9cc103..1e9fdb320 100644
--- a/docs/docs/palettes/tweak.css
+++ b/docs/docs/palettes/tweak.css
@@ -23,7 +23,8 @@ wa-dropdown > .color.swatch {
--track-color-inactive: transparent;
--track-color-active: transparent;
--thumb-color: var(--color-tweaked, var(--color));
- --thumb-shadow: 0 0 0 var(--thumb-gap) var(--wa-color-surface-default),
+ --thumb-shadow:
+ 0 0 0 var(--thumb-gap) var(--wa-color-surface-default),
var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
calc(var(--wa-shadow-offset-x-m) * -1 + var(--thumb-gap)) var(--wa-color-shadow);
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 6aaadb20e..d16499060 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -30,6 +30,7 @@ During the alpha period, things might break! We take breaking changes very serio
- `` => ``
- `` => ``
- `` => ``
+- 🚨 BREAKING: removed the `size` attribute from ``; please set the size of child elements on the children directly
- Added a `min-block-size` to `` to ensure the divider is visible regardless of container height [issue:675]
- Fixed a bug in `` that caused radios to uncheck when assigning a numeric value [issue:924]
- Fixed `` so dividers properly show between buttons
diff --git a/docs/docs/test/benchmark.njk b/docs/docs/test/benchmark.njk
deleted file mode 100644
index 50183155d..000000000
--- a/docs/docs/test/benchmark.njk
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: CSS Properties Benchmark
-unlisted: true
-wide: true
----
-
-{% set icons = {
- check: '',
- 'chevron-down': '',
- 'chevron-left': '',
- 'chevron-right': '',
- circle: '',
- 'eye-dropper': '',
- 'grip-vertical': '',
- indeterminate: '',
- minus: '',
- pause: '',
- play: '',
- star: '',
- user: '',
- xmark: ''
-} %}
-
-
-
-{% set repetitions = 200 %}
-
-