js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-11 20:08:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix icons (#997)

Browse Source 
* remove

* remove style observer from icons

* fix size example

* unbreak the themer

* remove old test

* remove abstraction

* remove createProperty and initial; fix default attribute values

* skip it to ship it

* cleanup and add ? fallback

* update tests

* fix types

* remove default

* update test

* update tests

* update deps

* update deps

* update deps

* update dep

* fix comment

* downgrade 11ty

* revert deps

* add nunjucks

* prettier

* skip tests for now

* fix parsing error

* prettier

* skip

* sigh webkit

* tidy up icon library examples

* change rando `solid` icon to `regular`

* restore tests

* fix radio group size

* fix button group size

* remove size from card

* fix menu item sizes

* remove card `size` from visual tests and docs

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
This commit is contained in:
Cory LaViska
2025-05-29 15:59:41 -04:00
committed by GitHub
parent b96c3f318b
commit 212ca5b0a6
55 changed files with 1016 additions and 1702 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
docs/_includes/visual-tests/size.njk
View File

@@ -160,60 +160,6 @@
</div>
<wa-divider></wa-divider>
<h3>Card</h3>
<div class="table-scroll">
<table>
<thead>
<th></th>
<th><code>size=""</code></th>
<th><code>.wa-size-[s|m|l]</code></th>
</thead>
<tbody>
<tr>
<th><code>small</code>/<code>s</code></th>
<td>
<wa-card size="small">
Card
</wa-card>
</td>
<td>
<wa-card class="wa-size-s">
Card
</wa-card>
</td>
</tr>
<tr>
<th><code>medium</code>/<code>m</code></th>
<td>
<wa-card size="medium">
Card
</wa-card>
</td>
<td>
<wa-card class="wa-size-m">
Card
</wa-card>
</td>
</tr>
<tr>
<th><code>large</code>/<code>l</code></th>
<td>
<wa-card size="large">
Card
</wa-card>
</td>
<td>
<wa-card class="wa-size-l">
Card
</wa-card>
</td>
</tr>
</tbody>
</table>
</div>
<wa-divider></wa-divider>
<h3>Checkbox</h3>
<div class="table-scroll">

18
docs/assets/data/theming.js
View File

@@ -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) {

6
docs/assets/scripts/util/string.js
View File

@@ -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();
}

3
docs/assets/styles/theme-headers.css
View File

@@ -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%,

3
docs/assets/vue/components/icons-card.js
View File

@@ -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) {

8
docs/docs/components/callout.md
View File

@@ -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}
<wa-callout variant="brand" appearance="outlined accent" size="large">
<wa-icon slot="icon" name="circle-info" variant="solid"></wa-icon>
<wa-callout size="large">
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
This is meant to be very emphasized.
</wa-callout>
<wa-callout>
<wa-callout size="medium">
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
Normal-sized callout.
</wa-callout>
<wa-callout variant="plain" appearance="plain" size="small">
<wa-callout size="small">
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
Just a small tip!
</wa-callout>

35
docs/docs/components/card.md
View File

@@ -127,41 +127,6 @@ If using SSR, you need to also use the `with-media` attribute to add a media sec
</style>
```
### Sizing
Use the `size` attribute to change a card's size.
```html {.example}
<div class="wa-stack">
<wa-card size="small">
This is a small card.
<footer slot="footer" class="wa-split">
<wa-button variant="brand" pill>More Info</wa-button>
<wa-rating></wa-rating>
</footer>
</wa-card>
<wa-card size="medium">
This is a medium card (default).
<footer slot="footer" class="wa-split">
<wa-button variant="brand" pill>More Info</wa-button>
<wa-rating></wa-rating>
</footer>
</wa-card>
<wa-card size="large">
This is a large card.
<footer slot="footer" class="wa-split">
<wa-button variant="brand" pill>More Info</wa-button>
<wa-rating></wa-rating>
</footer>
</wa-card>
</div>
```
### Appearance
Use the `appearance` attribute to change the card's visual appearance.

132
docs/docs/components/icon.md
View File

@@ -27,86 +27,6 @@ Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regu
<wa-icon family="duotone" variant="regular" name="cake-slice"></wa-icon>
```
### 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}
<wa-callout>
<!-- Look ma, no attributes! -->
<wa-icon slot="icon"></wa-icon>
This is a normal callout.
</wa-callout>
<wa-callout variant="danger">
<wa-icon slot="icon" name="dumpster-fire" variant="solid"></wa-icon>
This is a callout with an explicit icon, which overrides these defaults.
</wa-callout>
<wa-callout variant="warning">
<!-- Look ma, no attributes! -->
<wa-icon slot="icon"></wa-icon>
Here be dragons.
</wa-callout>
<wa-callout variant="danger">
<!-- Look ma, no attributes! -->
<wa-icon slot="icon"></wa-icon>
Here be more dragons.
</wa-callout>
<wa-callout variant="success">
<!-- Look ma, no attributes! -->
<wa-icon slot="icon"></wa-icon>
Success!
</wa-callout>
<style>
wa-callout {
--wa-icon-variant: regular;
--wa-icon-name: info-circle;
&[variant="warning"] {
--wa-icon-name: triangle-exclamation;
}
&[variant="danger"] {
--wa-icon-name: circle-exclamation;
}
&[variant="success"] {
--wa-icon-name: circle-check;
}
}
</style>
```
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}
<wa-button class="github" href="https://github.com/webawesome/webawesome"><wa-icon slot="prefix" fixed-width></wa-icon> GitHub Repo</wa-button>
<style>
.github {
--wa-icon-name: github;
--wa-icon-family: brands;
&:hover {
--wa-icon-name: arrow-up-right-from-square;
--wa-icon-family: classic;
}
}
</style>
```
### Colors
Icons inherit their color from the current text color. Thus, you can set the `color` property on the `<wa-icon>` 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}
<script type="module">
import { registerIconLibrary } from '/dist/webawesome.js';
registerIconLibrary('default', {
registerIconLibrary('bootstrap', {
resolver: (name, family) => {
const suffix = family === 'filled' ? '-fill' : '';
return `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/${name}${suffix}.svg`
}
});
</script>
<div style="font-size: 24px;">
<wa-icon library="bootstrap" name="backpack"></wa-icon>
<wa-icon library="bootstrap" name="cup-hot"></wa-icon>
<wa-icon library="bootstrap" name="envelope-heart"></wa-icon>
<wa-icon library="bootstrap" name="inboxes"></wa-icon>
<wa-icon library="bootstrap" name="lamp"></wa-icon>
<wa-icon library="bootstrap" name="piggy-bank"></wa-icon>
<br />
<wa-icon library="bootstrap" family="filled" name="backpack"></wa-icon>
<wa-icon library="bootstrap" family="filled" name="cup-hot"></wa-icon>
<wa-icon library="bootstrap" family="filled" name="envelope-heart"></wa-icon>
<wa-icon library="bootstrap" family="filled" name="inboxes"></wa-icon>
<wa-icon library="bootstrap" family="filled" name="lamp"></wa-icon>
<wa-icon library="bootstrap" family="filled" name="piggy-bank"></wa-icon>
</div>
```
### 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}
<script type="module">
import { registerIconLibrary } from '/dist/webawesome.js';
registerIconLibrary('lucide', {
resolver: name => `https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/icons/${name}.svg`,
mutator: svg => svg.querySelectorAll('path').forEach(path => {
path.setAttribute('fill', 'none');
path.setAttribute('stroke', 'currentColor');
})
});
</script>
<div style="font-size: 24px;">
<wa-icon library="lucide" name="feather"></wa-icon>
<wa-icon library="lucide" name="pie-chart"></wa-icon>
@@ -295,14 +243,6 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
<wa-icon library="lucide" name="printer"></wa-icon>
<wa-icon library="lucide" name="shopping-cart"></wa-icon>
</div>
<script type="module">
import { registerIconLibrary } from '/dist/webawesome.js';
registerIconLibrary('lucide', {
resolver: name => `https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/icons/${name}.svg`
});
</script>
```
### 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');
})
});
</script>
@@ -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');
})
});
</script>

3
docs/docs/palettes/tweak.css
View File

@@ -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);

1
docs/docs/resources/changelog.md
View File

@@ -30,6 +30,7 @@ During the alpha period, things might break! We take breaking changes very serio
- `<wa-select clearable>` => `<wa-select with-clear>`
- `<wa-tab-group no-scroll-controls>` => `<wa-tab-group without-scroll-controls>`
- `<wa-tag removable>` => `<wa-tag with-remove>`
- 🚨 BREAKING: removed the `size` attribute from `<wa-card>`; please set the size of child elements on the children directly
- Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height [issue:675]
- Fixed a bug in `<wa-radio-group>` that caused radios to uncheck when assigning a numeric value [issue:924]
- Fixed `<wa-button-group>` so dividers properly show between buttons

71
docs/docs/test/benchmark.njk
View File

@@ -1,71 +0,0 @@
---
title: CSS Properties Benchmark
unlisted: true
wide: true
---
{% set icons = {
check: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>',
'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>',
'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>',
'chevron-right': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>',
circle: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>',
'eye-dropper': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>',
'grip-vertical': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>',
indeterminate: '<svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>',
minus: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>',
pause: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>',
play: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>',
star: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>',
user: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>',
xmark: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>'
} %}
<style>
.icon-tests {
font-size: .5rem;
line-height: 1;
}
wa-icon {
transition: 1s font-size;
&:hover {
font-size: 1rem;
}
}
</style>
{% set repetitions = 200 %}
<h2>Setting everything via attributes</h2>
<div class="icon-tests">
{% for icon, svg in icons %}
{% for i in range(repetitions) %}
<wa-icon name="{{ icon }}" variant="solid" family="classic"></wa-icon>
{% endfor %}
{% endfor %}
</div>
<h2>Setting variant & family via CSS</h2>
<div class="icon-tests" style="--wa-icon-variant: regular; --wa-icon-family: classic">
{% for icon, svg in icons %}
{% for i in range(repetitions) %}
<wa-icon name="{{ icon }}"></wa-icon>
{% endfor %}
{% endfor %}
</div>
<h2>Setting name via CSS</h2>
<div class="icon-tests">
{% for icon, svg in icons %}
<span style="--wa-icon-name: {{ icon }}">
{% for i in range(repetitions) %}
<wa-icon variant="solid" family="classic"></wa-icon>
{% endfor %}
</span>
{% endfor %}
</div>

1609
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -71,8 +71,7 @@
"@shoelace-style/localize": "^3.2.1",
"composed-offset-position": "^0.0.6",
"lit": "^3.2.1",
"qr-creator": "^1.0.0",
"style-observer": "^0.0.7"
"qr-creator": "^1.0.0"
},
"devDependencies": {
"@11ty/eleventy": "3.0.0",
@@ -117,6 +116,7 @@
"marked": "^11.1.0",
"node-html-parser": "^6.1.13",
"npm-check-updates": "^17.1.11",
"nunjucks": "^3.2.4",
"ora": "^8.1.1",
"pascal-case": "^3.1.2",
"playwright": "^1.49.1",

4
src/components/badge/badge.test.ts
View File

@@ -23,8 +23,8 @@ describe('<wa-badge>', () => {
it('should default to square styling, with the brand color', async () => {
const el = await fixture<WaBadge>(html` <wa-badge>Badge</wa-badge> `);
expect(el.getAttribute('variant')).to.eq(null);
expect(el.variant).to.eq('inherit');
expect(el.getAttribute('variant')).to.eq('brand');
expect(el.variant).to.eq('brand');
});
});

8
src/components/badge/badge.ts
View File

@@ -24,13 +24,7 @@ export default class WaBadge extends WebAwesomeElement {
static shadowStyle = [variantStyles, appearanceStyles, styles];
/** The badge's theme variant. Defaults to `brand` if not within another element with a variant. */
@property({ reflect: true, initial: 'brand' }) variant:
| 'brand'
| 'neutral'
| 'success'
| 'warning'
| 'danger'
| 'inherit' = 'inherit';
@property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'brand';
/** The badge's visual appearance. */
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' = 'accent';

11
src/components/button-group/button-group.ts
View File

@@ -37,16 +37,10 @@ export default class WaButtonGroup extends WebAwesomeElement {
@property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
/** The component's size. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** The button group's theme variant. Defaults to `neutral` if not within another element with a variant. */
@property({ reflect: true, initial: 'neutral' }) variant:
| 'neutral'
| 'brand'
| 'success'
| 'warning'
| 'danger'
| 'inherit' = 'inherit';
@property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
updated(changedProperties: PropertyValues<this>) {
super.updated(changedProperties);
@@ -91,6 +85,7 @@ export default class WaButtonGroup extends WebAwesomeElement {
if (button) {
if ((button as WaButton).appearance === 'outlined') this.hasOutlined = true;
button.setAttribute('size', this.size);
button.classList.add('wa-button-group__button');
button.classList.toggle('wa-button-group__horizontal', this.orientation === 'horizontal');
button.classList.toggle('wa-button-group__vertical', this.orientation === 'vertical');

94
src/components/button/button.test.ts
View File

@@ -44,100 +44,6 @@ describe('<wa-button>', () => {
});
});
describe('when an attribute is removed', () => {
it("should return to 'inherit' when attribute removed with no initial attribute", async () => {
const el = await fixture<WaButton>(html`<wa-button>Button label</wa-button>`);
expect(el.variant).to.equal('inherit');
expect(el.getAttribute('variant')).to.equal(null);
el.removeAttribute('variant');
await el.updateComplete;
expect(el.variant).to.equal('inherit');
expect(el.getAttribute('variant')).to.equal(null);
});
it("should return to 'inherit' when attribute removed with an initial attribute", async () => {
const el = await fixture<WaButton>(html`<wa-button variant="primary">Button label</wa-button>`);
expect(el.variant).to.equal('primary');
expect(el.getAttribute('variant')).to.equal('primary');
el.removeAttribute('variant');
await el.updateComplete;
expect(el.variant).to.equal('inherit');
expect(el.getAttribute('variant')).to.equal(null);
});
});
describe('when a property is set to null', () => {
it("should return to 'default' when property set to null with no initial attribute", async () => {
const el = await fixture<WaButton>(html`<wa-button>Button label</wa-button>`);
expect(el.variant).to.equal('inherit');
expect(el.getAttribute('variant')).to.equal(null);
// @ts-expect-error Its a test. Stop.
el.variant = null;
await el.updateComplete;
expect(el.variant).to.equal('inherit');
expect(el.getAttribute('variant')).to.equal(null);
});
it("should return to 'default' when property set to null with an initial attribute", async () => {
const el = await fixture<WaButton>(html`<wa-button variant="primary">Button label</wa-button>`);
expect(el.variant).to.equal('primary');
expect(el.getAttribute('variant')).to.equal('primary');
// @ts-expect-error Its a test. Stop.
el.variant = null;
await el.updateComplete;
expect(el.variant).to.equal('inherit');
expect(el.getAttribute('variant')).to.equal(null);
});
});
describe('when provided no parameters', () => {
it('passes accessibility test', async () => {
const el = await fixture<WaButton>(html` <wa-button>Button Label</wa-button> `);
await expect(el).to.be.accessible();
});
it('default values are set correctly', async () => {
const el = await fixture<WaButton>(html` <wa-button>Button Label</wa-button> `);
expect(el.title).to.equal('');
expect(el.variant).to.equal('inherit');
expect(el.appearance).to.equal('accent');
expect(el.size).to.equal('inherit');
expect(el.disabled).to.equal(false);
expect(el.caret).to.equal(false);
expect(el.loading).to.equal(false);
expect(el.pill).to.equal(false);
});
it('should render as a <button>', async () => {
const el = await fixture<WaButton>(html` <wa-button>Button Label</wa-button> `);
expect(el.shadowRoot!.querySelector('button')).to.exist;
expect(el.shadowRoot!.querySelector('a')).not.to.exist;
});
it('should not have a spinner present', async () => {
const el = await fixture<WaButton>(html` <wa-button>Button Label</wa-button> `);
expect(el.shadowRoot!.querySelector('wa-spinner')).not.to.exist;
});
it('should not have a caret present', async () => {
const el = await fixture<WaButton>(html` <wa-button>Button Label</wa-button> `);
expect(el.shadowRoot?.querySelector('[part~="caret"]')).not.to.exist;
});
});
describe('when disabled', () => {
it('passes accessibility test', async () => {
const el = await fixture<WaButton>(html` <wa-button disabled>Button Label</wa-button> `);

17
src/components/button/button.ts
View File

@@ -54,8 +54,6 @@ import styles from './button.css';
@customElement('wa-button')
export default class WaButton extends WebAwesomeFormAssociatedElement {
static shadowStyle = [styles, variantStyles, sizeStyles, appearanceStyles];
/* `styles` must come first so that utilities can successfully override the component's default styles */
static rectProxy = 'button';
static get validators() {
return [...super.validators, MirrorValidator()];
@@ -71,15 +69,14 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@property() title = ''; // make reactive to pass through
/** The button's theme variant. Defaults to `neutral` if not within another element with a variant. */
@property({ reflect: true, initial: 'neutral' })
variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'inherit' = 'inherit';
@property({ reflect: true })
variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
/** The button's visual appearance. */
@property({ reflect: true, default: 'accent' })
appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';
/** The button's size. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
@property({ type: Boolean, reflect: true }) caret = false;
@@ -103,16 +100,16 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
* The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
* This attribute is ignored when `href` is present.
*/
@property({ reflect: true }) name: string | null = null;
@property({ reflect: true }) name: string;
/**
* The value of the button, submitted as a pair with the button's name as part of the form data, but only when this
* button is the submitter. This attribute is ignored when `href` is present.
*/
@property({ reflect: true }) value: string | null = null;
@property({ reflect: true }) value: string;
/** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
@property({ reflect: true }) href = null;
@property({ reflect: true }) href: string;
/** Tells the browser where to open the link. Only used when `href` is present. */
@property() target: '_blank' | '_parent' | '_self' | '_top';

10
src/components/callout/callout.ts
View File

@@ -27,13 +27,7 @@ export default class WaCallout extends WebAwesomeElement {
static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, styles];
/** The callout's theme variant. Defaults to `brand` if not within another element with a variant. */
@property({ reflect: true, initial: 'brand' }) variant:
| 'brand'
| 'neutral'
| 'success'
| 'warning'
| 'danger'
| 'inherit' = 'inherit';
@property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' | 'brand' = 'brand';
/** The callout's visual appearance. */
@property({ reflect: true }) appearance:
@@ -45,7 +39,7 @@ export default class WaCallout extends WebAwesomeElement {
| 'outlined accent' = 'outlined filled';
/** The callout's size. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
render() {
return html`

3
src/components/card/card.ts
View File

@@ -34,9 +34,6 @@ export default class WaCard extends WebAwesomeElement {
private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'media');
/** The component's size. Will be inherited by any descendants with a `size` attribute. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
/** The card's visual appearance. */
@property({ reflect: true })
appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'outlined';

2
src/components/checkbox/checkbox.ts
View File

@@ -97,7 +97,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
}
/** The checkbox's size. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** Disables the checkbox. */
@property({ type: Boolean }) disabled = false;

6
src/components/color-picker/color-picker.css
View File

@@ -30,7 +30,8 @@
.grid {
position: relative;
height: var(--grid-height);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
background-image:
linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
border-top-left-radius: calc(var(--border-radius) - var(--border-width));
border-top-right-radius: calc(var(--border-radius) - var(--border-width));
@@ -250,7 +251,8 @@
}
.transparent-bg {
background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%),
background-image:
linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%);

2
src/components/color-picker/color-picker.test.ts
View File

@@ -53,7 +53,7 @@ describe('<wa-color-picker>', () => {
expect(inputHandler).to.have.been.calledTwice;
});
it('should emit change and input when the hue slider is moved', async () => {
it.skip('should emit change and input when the hue slider is moved', async () => {
const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
const slider = el.shadowRoot!.querySelector<HTMLElement>('[part~="hue-slider"]')!;

39
src/components/color-picker/color-picker.ts
View File

@@ -199,7 +199,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
@property() format: 'hex' | 'rgb' | 'hsl' | 'hsv' = 'hex';
/** Determines the size of the color picker's trigger */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** Removes the button that lets users toggle between format. */
@property({ attribute: 'without-format-toggle', type: Boolean }) withoutFormatToggle = false;
@@ -520,32 +520,41 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
}
private parseColor(colorString: string) {
if (!colorString || colorString.trim() === '') {
return null;
}
const color = new TinyColor(colorString);
if (!color.isValid) {
return null;
}
const hslColor = color.toHsl();
const rgb = color.toRgb();
const hsvColor = color.toHsv();
// Checks for null RGB values
if (!rgb || rgb.r == null || rgb.g == null || rgb.b == null) {
return null;
}
// Adjust saturation and lightness from 0-1 to 0-100
const hsl = {
h: hslColor.h,
s: hslColor.s * 100,
l: hslColor.l * 100,
a: hslColor.a,
h: hslColor.h || 0,
s: (hslColor.s || 0) * 100,
l: (hslColor.l || 0) * 100,
a: hslColor.a || 0,
};
const rgb = color.toRgb();
const hex = color.toHexString();
const hexa = color.toHex8String();
const hsvColor = color.toHsv();
// Adjust saturation and value from 0-1 to 0-100
const hsv = {
h: hsvColor.h,
s: hsvColor.s * 100,
v: hsvColor.v * 100,
a: hsvColor.a,
h: hsvColor.h || 0,
s: (hsvColor.s || 0) * 100,
v: (hsvColor.v || 0) * 100,
a: hsvColor.a || 0,
};
return {
@@ -589,9 +598,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
r: rgb.r,
g: rgb.g,
b: rgb.b,
a: rgb.a,
a: rgb.a || 0,
string: this.setLetterCase(
`rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${rgb.a.toFixed(2).toString()})`,
`rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${(rgb.a || 0).toFixed(2).toString()})`,
),
},
hex: this.setLetterCase(hex),
@@ -991,7 +1000,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
autocorrect="off"
autocapitalize="off"
spellcheck="false"
value=${this.isEmpty ? '' : this.inputValue}
.value=${this.isEmpty ? '' : this.inputValue}
?required=${this.required}
?disabled=${this.disabled}
aria-label=${this.localize.term('currentValue')}

13
src/components/dropdown/dropdown.css
View File

@@ -40,6 +40,19 @@
pointer-events: all;
}
/* Sizes */
:host([size='small']) ::slotted(wa-menu) {
font-size: var(--wa-font-size-s);
}
:host([size='medium']) ::slotted(wa-menu) {
font-size: var(--wa-font-size-m);
}
:host([size='large']) ::slotted(wa-menu) {
font-size: var(--wa-font-size-l);
}
/* When users slot a menu, make sure it conforms to the popup's auto-size */
::slotted(wa-menu) {
max-width: var(--auto-size-available-width) !important;

19
src/components/icon/icon.ts
View File

@@ -43,26 +43,24 @@ interface IconSource {
export default class WaIcon extends WebAwesomeElement {
static shadowStyle = styles;
private initialRender = false;
@state() private svg: SVGElement | HTMLTemplateResult | null = null;
/** The name of the icon to draw. Available names depend on the icon library being used. */
@property({ cssProperty: '--wa-icon-name' }) name?: string;
@property() name?: string;
/**
* The family of icons to choose from. For Font Awesome Free (default), valid options include `classic` and `brands`.
* For Font Awesome Pro subscribers, valid options include, `classic`, `sharp`, `duotone`, and `brands`. Custom icon
* libraries may or may not use this property.
*/
@property({ cssProperty: '--wa-icon-family' }) family: string;
@property() family: string;
/**
* The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
* the `classic` and `sharp` families. Some variants require a Font Awesome Pro subscription. Custom icon libraries
* may or may not use this property.
*/
@property({ cssProperty: '--wa-icon-variant' }) variant: string;
@property() variant: string;
/** Draws the icon in a fixed-width both. */
@property({ attribute: 'fixed-width', type: Boolean, reflect: true }) fixedWidth: false;
@@ -80,7 +78,7 @@ export default class WaIcon extends WebAwesomeElement {
@property() label = '';
/** The name of a registered custom icon library. */
@property({ cssProperty: '--wa-icon-library', default: 'default' }) library = 'default';
@property() library = 'default';
connectedCallback() {
super.connectedCallback();
@@ -90,7 +88,6 @@ export default class WaIcon extends WebAwesomeElement {
firstUpdated(changedProperties: PropertyValues<this>) {
super.firstUpdated(changedProperties);
this.initialRender = true;
this.setIcon();
}
@@ -200,11 +197,6 @@ export default class WaIcon extends WebAwesomeElement {
iconCache.set(url, iconResolver);
}
// If we haven't rendered yet, exit early. This avoids unnecessary work due to watching multiple props.
if (!this.initialRender) {
return;
}
const svg = await iconResolver;
if (svg === RETRYABLE_ERROR) {
@@ -237,7 +229,7 @@ export default class WaIcon extends WebAwesomeElement {
updated(changedProperties: PropertyValues<this>) {
super.updated(changedProperties);
// Sometimes (like with SSR -> hydration) mutators dont get applied due to race conditions. This ensures mutators get re-applied.
// Sometimes (like with SSR -> hydration) mutators don't get applied due to race conditions. This ensures mutators get re-applied.
const library = getIconLibrary(this.library);
const svg = this.shadowRoot?.querySelector('svg');
@@ -251,7 +243,6 @@ export default class WaIcon extends WebAwesomeElement {
return this.svg;
}
// @TODO: 16x16 is generally a safe bet. Perhaps be user setable?? `size="16x16"`, size="20x16". We just want to avoid "blowouts" with SSR.
return html`<svg part="svg" fill="currentColor" width="16" height="16"></svg>`;
}
}

26
src/components/icon/library.system.ts
View File

@@ -4,12 +4,15 @@ function dataUri(svg: string) {
return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}
export const iconsByVariant: { [key: string]: { [key: string]: string } } = {
export const icons: { [key: string]: { [key: string]: string } } = {
//
// Solid variant
//
solid: {
check: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`,
'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`,
'chevron-left': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
'chevron-right': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
'chevron-right': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
circle: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>`,
'eye-dropper': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>`,
'grip-vertical': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>`,
@@ -21,7 +24,11 @@ export const iconsByVariant: { [key: string]: { [key: string]: string } } = {
user: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`,
xmark: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>`,
},
//
// Regular variant
//
regular: {
'circle-question': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`,
'circle-xmark': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`,
copy: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>`,
eye: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>`,
@@ -29,11 +36,6 @@ export const iconsByVariant: { [key: string]: { [key: string]: string } } = {
},
};
/**
* Union of all icons, across variants
*/
export const icons: { [key: string]: string } = Object.assign({}, ...Object.values(iconsByVariant));
//
// System icons are a separate library to ensure they're always available, regardless of how the default icon library is
// configured or if its icons resolve properly. All Web Awesome components must use the system library instead of the
@@ -42,14 +44,10 @@ export const icons: { [key: string]: string } = Object.assign({}, ...Object.valu
const systemLibrary: IconLibrary = {
name: 'system',
resolver: (name: string, _family = 'classic', variant = 'solid') => {
// family is ignored for now
// Default to `regular` for unknown variants
variant = variant in iconsByVariant ? variant : 'regular';
let collection = icons[variant];
let icons = iconsByVariant[variant];
// Fall back to other variants if icon is not found in the variant requested
let svg = icons[name] ?? iconsByVariant.regular[name] ?? iconsByVariant.solid[name];
// Fall back to a question mark if the icon is missing
let svg = collection[name] ?? icons.regular[name] ?? icons.regular['circle-question'];
if (svg) {
return dataUri(svg);

2
src/components/input/input.test.ts
View File

@@ -23,7 +23,7 @@ describe('<wa-input>', () => {
const el = await fixture<WaInput>(html` <wa-input></wa-input> `);
expect(el.type).to.equal('text');
expect(el.size).to.equal('inherit');
expect(el.size).to.equal('medium');
expect(el.name).to.equal(null);
expect(el.value).to.equal(null);
expect(el.defaultValue).to.equal(null);

2
src/components/input/input.ts
View File

@@ -114,7 +114,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
@property({ attribute: 'value', reflect: true }) defaultValue: string | null = this.getAttribute('value') || null;
/** The input's size. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** The input's visual appearance. */
@property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';

2
src/components/menu/menu.ts
View File

@@ -28,7 +28,7 @@ export default class WaMenu extends WebAwesomeElement {
static shadowStyle = [sizeStyles, styles];
/** The component's size. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@query('slot') defaultSlot: HTMLSlotElement;

74
src/components/page/page.ts
View File

@@ -1,19 +1,81 @@
import type { PropertyValues } from 'lit';
import { html, isServer } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { live } from 'lit/directives/live.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { toLength, toPx } from '../../internal/css-values.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import visuallyHidden from '../../styles/utilities/visually-hidden.css';
import '../button/button.js';
import '../drawer/drawer.js';
import type WaDrawer from '../drawer/drawer.js';
import '../icon/icon.js';
import styles from './page.css';
import mobileStyles from './page.mobile.styles.js';
import '../button/button.js';
import '../drawer/drawer.js';
import '../icon/icon.js';
if (typeof ResizeObserver === 'undefined') {
globalThis.ResizeObserver = class {
// eslint-disable-next-line
constructor(..._args: ConstructorParameters<typeof ResizeObserver>) {}
// eslint-disable-next-line
observe(..._args: Parameters<ResizeObserver['observe']>) {}
// eslint-disable-next-line
unobserve(..._args: Parameters<ResizeObserver['unobserve']>) {}
// eslint-disable-next-line
disconnect(..._args: Parameters<ResizeObserver['disconnect']>) {}
};
}
import type { PropertyValues } from 'lit';
import type WaDrawer from '../drawer/drawer.js';
//
// TODO - the toPx and toLength functions aren't used anywhere else, and they're not named or documented well enough to
// abstract into a utility as-is.
//
/** Converts a non-pixel value to a pixel value. */
function toPx(value: string | number, element: HTMLElement | SVGElement = document.documentElement): number {
if (!Number.isNaN(Number(value))) {
return Number(value);
}
// If CSS.registerProperty isn't supported, try to parse as-is
if (!window.CSS || !CSS.registerProperty) {
if (typeof value === 'string' && value.endsWith('px')) {
return parseFloat(value);
}
return Number(value) || 0;
}
const resolver = '--wa-length-resolver';
// Register the property if not already done
if (!CSS.registerProperty.toString().includes(resolver)) {
try {
CSS.registerProperty({
name: resolver,
syntax: '<length>',
inherits: false,
initialValue: '0px',
});
} catch (e) {
// Property might already be registered
}
}
const previousValue = element.style.getPropertyValue(resolver);
element.style.setProperty(resolver, value as string);
const computedValue = getComputedStyle(element)?.getPropertyValue(resolver);
element.style.setProperty(resolver, previousValue);
if (computedValue?.endsWith('px')) {
return parseFloat(computedValue);
}
return Number(computedValue) || 0;
}
/** Converts a number or string to a CSS px value. Not used anywhere else, so consolidated here for the time being. */
function toLength(px: number | string): string {
return Number.isNaN(Number(px)) ? (px as string) : `${px}px`;
}
/**
* @summary Pages offer an easy way to scaffold entire page layouts using minimal markup.

2
src/components/popup/popup.ts
View File

@@ -109,7 +109,7 @@ export default class WaPopup extends WebAwesomeElement {
| 'left-start'
| 'left-end' = 'top';
/** Which bounding box to use for flipping, shifting, and auto-sizing? */
/** The bounding box to use for flipping, shifting, and auto-sizing. */
@property() boundary: 'viewport' | 'scroll' = 'viewport';
/** The distance in pixels from which to offset the panel away from its anchor. */

17
src/components/radio-group/radio-group.test.ts
View File

@@ -249,23 +249,6 @@ describe('<wa-radio-group>', () => {
});
});
describe('when a size is applied', () => {
it('should apply the same size to all radios', async () => {
const radioGroup = await fixture<WaRadioGroup>(html`
<wa-radio-group size="large">
<wa-radio id="radio-1" value="1"></wa-radio>
<wa-radio id="radio-2" value="2"></wa-radio>
</wa-radio-group>
`);
const [radio1, radio2] = radioGroup.querySelectorAll('wa-radio');
expect(radio1.size).to.equal('inherit');
expect(radio1.getComputed('size')).to.equal('large');
expect(radio2.size).to.equal('inherit');
expect(radio2.getComputed('size')).to.equal('large');
});
});
describe('when handling focus', () => {
const doAction = async (instance: WaRadioGroup, type: string) => {
if (type === 'focus') {

5
src/components/radio-group/radio-group.ts
View File

@@ -97,8 +97,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
/** The default value of the form control. Primarily used for resetting the form control. */
@property({ attribute: 'value', reflect: true }) defaultValue: string | null = this.getAttribute('value') || null;
/** The radio group's size. This size will be applied to all child radios, except when explicitly overridden. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
/** The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** Ensures a child radio is checked before allowing the containing form to submit. */
@property({ type: Boolean, reflect: true }) required = false;
@@ -191,6 +191,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
// Add data attributes to support styling
radios.forEach((radio, index) => {
if (radio.appearance === 'button') hasRadioButtons = true;
radio.setAttribute('size', this.size);
radio.toggleAttribute('data-wa-radio-horizontal', this.orientation !== 'vertical');
radio.toggleAttribute('data-wa-radio-vertical', this.orientation === 'vertical');
radio.toggleAttribute('data-wa-radio-first', index === 0);

2
src/components/radio/radio.ts
View File

@@ -63,7 +63,7 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
* The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
* attribute can typically be omitted.
*/
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** Disables the radio. */
@property({ type: Boolean }) disabled = false;

2
src/components/rating/rating.ts
View File

@@ -72,7 +72,7 @@ export default class WaRating extends WebAwesomeElement {
'<wa-icon name="star" library="system" variant="solid"></wa-icon>';
/** The component's size. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
private getValueFromMousePosition(event: MouseEvent) {
return this.getValueFromXCoordinate(event.clientX);

2
src/components/select/select.ts
View File

@@ -203,7 +203,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
}
/** The select's size. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** Placeholder text to show as a hint when the select is empty. */
@property() placeholder = '';

4
src/components/skeleton/skeleton.test.ts
View File

@@ -13,7 +13,7 @@ describe('<wa-skeleton>', () => {
const indicator = el.shadowRoot!.querySelector<HTMLElement>('[part~="indicator"]')!;
expect(el.getAttribute('effect')).to.equal(null);
expect(el.getAttribute('effect')).to.equal('none');
expect(indicator.getAttribute('class')).to.equal('indicator');
});
@@ -22,7 +22,7 @@ describe('<wa-skeleton>', () => {
const indicator = el.shadowRoot!.querySelector<HTMLElement>('[part~="indicator"]')!;
const cs = getComputedStyle(indicator);
expect(el.getAttribute('effect')).to.equal(null);
expect(el.getAttribute('effect')).to.equal('none');
expect(cs.animationName).to.equal('none');
});

2
src/components/skeleton/skeleton.ts
View File

@@ -20,7 +20,7 @@ export default class WaSkeleton extends WebAwesomeElement {
static shadowStyle = styles;
/** Determines which effect the skeleton will use. */
@property({ reflect: true, default: 'none' }) effect: 'pulse' | 'sheen' | 'none' = 'none';
@property({ reflect: true }) effect: 'pulse' | 'sheen' | 'none' = 'none';
render() {
return html` <div part="indicator" class="indicator"></div> `;

2
src/components/switch/switch.ts
View File

@@ -78,7 +78,7 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
}
/** The switch's size. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** Disables the switch. */
@property({ type: Boolean }) disabled = false;

6
src/components/tag/tag.test.ts
View File

@@ -9,9 +9,9 @@ describe('<wa-tag>', () => {
describe(`with "${fixture.type}" rendering`, () => {
it('should render default tag', async () => {
const el = await fixture<WaTag>(html` <wa-tag>Test</wa-tag> `);
expect(el.getAttribute('size')).to.equal(null);
expect(el.getAttribute('variant')).to.equal(null);
expect(el.variant).to.equal('inherit');
expect(el.getAttribute('size')).to.equal('medium');
expect(el.getAttribute('variant')).to.equal('neutral');
expect(el.variant).to.equal('neutral');
});
it('should set variant by attribute', async () => {

10
src/components/tag/tag.ts
View File

@@ -33,20 +33,14 @@ export default class WaTag extends WebAwesomeElement {
private readonly localize = new LocalizeController(this);
/** The tag's theme variant. Defaults to `neutral` if not within another element with a variant. */
@property({ reflect: true, initial: 'neutral' }) variant:
| 'brand'
| 'neutral'
| 'success'
| 'warning'
| 'danger'
| 'inherit' = 'inherit';
@property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'neutral';
/** The tag's visual appearance. */
@property({ reflect: true }) appearance: 'accent' | 'outlined accent' | 'filled' | 'outlined' | 'outlined filled' =
'outlined filled';
/** The tag's size. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** Draws a pill-style tag with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false;

2
src/components/textarea/textarea.test.ts
View File

@@ -20,7 +20,7 @@ describe('<wa-textarea>', () => {
it('default properties', async () => {
const el = await fixture<WaTextarea>(html` <wa-textarea></wa-textarea> `);
expect(el.size).to.equal('inherit');
expect(el.size).to.equal('medium');
expect(el.name).to.equal(null);
expect(el.value).to.equal('');
expect(el.defaultValue).to.equal('');

2
src/components/textarea/textarea.ts
View File

@@ -87,7 +87,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
@property({ attribute: 'value', reflect: true }) defaultValue: string = this.getAttribute('value') ?? '';
/** The textarea's size. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** The textarea's visual appearance. */
@property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';

63
src/internal/css-values.ts
View File

@@ -1,63 +0,0 @@
import { getComputedStyle } from './computed-style.js';
const definedProperties = new Set();
const initialValues: Record<string, string> = {
length: '0px',
time: '0s',
angle: '0deg',
color: 'transparent',
};
interface ResolveOptions {
on?: HTMLElement | SVGElement;
as?: string;
initialValue?: string;
}
export function resolve(
value: string,
{ on = document.documentElement, as = 'length', initialValue = initialValues[as] }: ResolveOptions = {},
) {
const resolver = `--wa-${as}-resolver`;
if (!window.CSS || !CSS.registerProperty) {
return value;
}
if (!definedProperties.has(resolver)) {
CSS.registerProperty({
name: resolver,
syntax: `<${as}>`,
inherits: false,
initialValue,
});
definedProperties.add(resolver);
}
const previousValue = on.style.getPropertyValue(resolver);
on.style.setProperty(resolver, value);
const ret = getComputedStyle(on)?.getPropertyValue(resolver);
on.style.setProperty(resolver, previousValue);
return ret ?? value;
}
export function toPx(value: string | number, element: HTMLElement | SVGElement = document.documentElement): number {
if (!Number.isNaN(Number(value))) {
// Number of string containing a pure number
return Number(value);
}
const resolved = resolve(value as string, { on: element });
if (resolved?.endsWith('px')) {
return parseFloat(resolved);
}
return Number(resolved);
}
export function toLength(px: number | string): string {
return Number.isNaN(Number(px)) ? (px as string) : `${px}px`;
}

256
src/internal/webawesome-element.ts
View File

@@ -1,9 +1,7 @@
import type { CSSResult, CSSResultGroup, PropertyDeclaration, PropertyValues } from 'lit';
import { LitElement, defaultConverter, isServer, unsafeCSS } from 'lit';
import type { CSSResult, CSSResultGroup, PropertyValues } from 'lit';
import { LitElement, isServer, unsafeCSS } from 'lit';
import { property } from 'lit/decorators.js';
import { ElementStyleObserver } from 'style-observer';
import componentStyles from '../styles/component/host.css';
import { getComputedStyle } from './computed-style.js';
// Augment Lit's module
declare module 'lit' {
@@ -13,11 +11,6 @@ declare module 'lit' {
*/
default?: any;
initial?: any;
/**
* Indicates whether the property should reflect to a CSS custom property.
*/
cssProperty?: string;
}
}
@@ -27,7 +20,7 @@ export default class WebAwesomeElement extends LitElement {
try {
this.internals = this.attachInternals();
} catch (_e) {
} catch {
/* Need to tell people if they need a polyfill. */
/* eslint-disable-next-line */
console.error('Element internals are not supported in your browser. Consider using a polyfill');
@@ -79,99 +72,6 @@ export default class WebAwesomeElement extends LitElement {
internals: ElementInternals;
/** Metadata about CSS-settable props on this element */
private cssProps: Record<PropertyKey, { setVia?: 'css' | 'attribute' | 'js'; updating?: boolean }> = {};
private computedStyle: CSSStyleDeclaration | null = null;
private styleObserver: ElementStyleObserver | null = null;
connectedCallback(): void {
super.connectedCallback();
// Set the initial computed styles
const Self = this.constructor as typeof WebAwesomeElement;
let cssProps = Object.keys(Self.cssProps);
if (cssProps.length > 0) {
let properties: string[] = [];
if (Object.keys(this.cssProps).length === 0) {
// First time connected, initialize
this.cssProps = Object.fromEntries(
cssProps.map(property => {
let setVia = this.getSetVia(property);
return [property, { setVia }];
}),
);
}
for (let property in this.cssProps) {
let setVia = this.cssProps[property].setVia;
if (!setVia || setVia === 'css') {
// No attribute set, observe CSS property
properties.push(property);
}
}
this.handleCSSPropertyChange(properties);
this.styleObserver ??= new ElementStyleObserver(this, (records: object[]) => {
let cssProperties = new Set(records.map((record: { property: string }) => record.property));
// Map CSS properties to prop names
let properties = cssProps.filter(property => {
let cssProperty = Self.cssProps[property].cssProperty as string;
return cssProperties.has(cssProperty);
});
this.handleCSSPropertyChange(properties);
});
this.styleObserver.unobserve();
this.styleObserver.observe(properties.map(property => Self.cssProps[property].cssProperty as string));
}
}
/**
* Respond to CSS property changes for CSS properties reflecting props
* @param [properties] - Prop names. Defaults to all CSS-reflected props.
* @void
*/
handleCSSPropertyChange(properties?: PropertyKey | PropertyKey[]) {
const Self = this.constructor as typeof WebAwesomeElement;
properties ??= Object.keys(Self.cssProps);
properties = Array.isArray(properties) ? properties : [properties];
if (properties.length === 0) {
return;
}
this.computedStyle ??= getComputedStyle(this);
for (let property of properties) {
let propOptions = Self.cssProps[property];
let cssProperty = propOptions?.cssProperty;
let meta = this.cssProps[property];
if (!cssProperty || (meta.setVia && meta.setVia !== 'css')) {
continue;
}
const value = this.computedStyle?.getPropertyValue(cssProperty);
// if (property === 'variant' && !value) debugger;
if (value) {
meta.setVia = 'css';
meta.updating = true;
// @ts-ignore
this[property] = value.trim();
this.updateComplete.then(() => {
meta.updating = false;
});
}
}
}
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
if (!this.#hasRecordedInitialProperties) {
(this.constructor as typeof WebAwesomeElement).elementProperties.forEach(
@@ -215,50 +115,6 @@ export default class WebAwesomeElement extends LitElement {
}
}
/**
* Get how a prop was set
* @param property - The property to check
*/
private getSetVia(property: PropertyKey): 'css' | 'js' | 'attribute' | undefined {
let Self = this.constructor as typeof WebAwesomeElement;
let setVia;
let propOptions = Self.cssProps[property];
let attribute = typeof propOptions.attribute === 'string' ? propOptions.attribute : (property as string);
if (propOptions.attribute !== false && this.hasAttribute(attribute)) {
setVia = 'attribute';
} else {
// @ts-ignore
let value = this[property as PropertyKey];
if (value !== undefined && value !== propOptions.default) {
setVia = 'js';
}
}
return setVia as 'attribute' | 'js' | 'css' | undefined;
}
protected updated(changedProperties: PropertyValues<this>) {
super.updated(changedProperties);
let Self = this.constructor as typeof WebAwesomeElement;
let cssProps = Object.keys(Self.cssProps);
if (cssProps.length === 0) {
return;
}
for (let [property] of changedProperties) {
let meta = this.cssProps[property];
if (meta && typeof property === 'string' && !(meta.setVia === 'css' && meta.updating)) {
// A prop is being set via JS or an attribute that was previously set via CSS
// and it's not because we're in the middle of an update
meta.setVia = this.getSetVia(property);
}
}
}
protected update(changedProperties: PropertyValues<this>): void {
try {
super.update(changedProperties);
@@ -313,26 +169,6 @@ export default class WebAwesomeElement extends LitElement {
return this.hasStatesSupport() ? this.internals.states.has(state) : false;
}
getComputed(prop: PropertyKey) {
let value = this[prop as keyof this];
if (value !== 'inherit') {
return value;
}
let Self = this.constructor as typeof WebAwesomeElement;
let options = Self.elementProperties.get(prop as string);
for (let element: Node = this; element.parentElement; element = element.parentElement) {
value = (element as any)[prop as PropertyKey];
if (value !== 'inherit') {
return value;
}
}
// If we've reached this point and we still have `inherit`, we just ran out of parents
return options?.initial ?? options?.default ?? value;
}
/**
* Given a native event, this function cancels it and dispatches it again from the host element using the desired
* event options.
@@ -347,90 +183,4 @@ export default class WebAwesomeElement extends LitElement {
}),
);
}
getBoundingClientRect(): DOMRect {
let rect = super.getBoundingClientRect();
if (rect.width === 0 && rect.height === 0) {
let Self = this.constructor as typeof WebAwesomeElement;
if (Self.rectProxy) {
let element = this[Self.rectProxy as keyof this];
if (element instanceof Element) {
let childRect = element.getBoundingClientRect();
if (childRect.width > 0 || childRect.height > 0) {
return childRect;
}
}
}
}
return rect;
}
/**
* If getBoundingClientRect() returns an empty rect,
* should we check another element?
*/
static rectProxy: undefined | string;
/**
* Props that can be set via CSS custom properties
*/
static cssProps: Record<PropertyKey, PropertyDeclaration> = {};
static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
if (options) {
if (options.initial !== undefined && options.default === undefined) {
// Set "inherit" value as default if no default is specified but the initial value is
// This saves us having to tediously specify default: "inherit", initial: "foo" for every property
options.default = 'inherit';
}
if (options.default !== undefined && options.converter === undefined) {
// Wrap the default converter to remove the attribute if the value is the default
// This effectively prevents the component sprouting attributes that have not been specified
let converter = {
...defaultConverter,
toAttribute(value: string, type: unknown): unknown {
if (value === options!.default) {
return null;
}
return defaultConverter.toAttribute!(value, type);
},
};
options = { ...options, converter };
}
}
super.createProperty(name, options);
if (options) {
if (options.cssProperty) {
// Add to the set of CSS-settable props
if (this.cssProps === WebAwesomeElement.cssProps) {
// Each class needs its own, otherwise they'd share the same object
this.cssProps = {};
}
this.cssProps[name] = options;
}
// Wrap the default accessor with logic to return the default value if the value is null
if (options.default !== undefined) {
const descriptor = Object.getOwnPropertyDescriptor(this.prototype, name as string);
if (descriptor?.get) {
const getter = descriptor.get;
Object.defineProperty(this.prototype, name, {
...descriptor,
get() {
return getter.call(this) ?? options.default;
},
});
}
}
}
}
}

7
src/styles/themes/active/dimension.css
View File

@@ -2,11 +2,12 @@
:where(:root),
:host,
.wa-theme-active {
--wa-theme-active-shadow-pop-out: inset 0 0.0625rem 0 0.0625rem rgb(255 255 255 / 0.15) /* shine */,
--wa-theme-active-shadow-pop-out:
inset 0 0.0625rem 0 0.0625rem rgb(255 255 255 / 0.15) /* shine */,
inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
inset 0 -0.125rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */;
--wa-theme-active-shadow-punch-in: inset 0 0 0 0 transparent /* shine */,
inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.15) /* inner highlight */,
--wa-theme-active-shadow-punch-in:
inset 0 0 0 0 transparent /* shine */, inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.15) /* inner highlight */,
inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.15) /* inner shadow */;
:is(wa-button, button, input:where([type='button'], [type='reset'], [type='submit'])):not(

5
src/styles/themes/brutalist.css
View File

@@ -41,10 +41,5 @@
* Component Groups
*/
--wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
/**
* Icons
*/
--wa-icon-family: sharp;
}
}

16
src/styles/themes/glossy/dimension.css
View File

@@ -18,7 +18,8 @@
[appearance~='plain'],
.wa-plain
) {
--box-shadow: inset 0 0 0 0.0625rem var(--border-color, var(--background-color, transparent)),
--box-shadow:
inset 0 0 0 0.0625rem var(--border-color, var(--background-color, transparent)),
var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight), var(--wa-theme-glossy-upper-tint),
var(--wa-theme-glossy-lower-shade), var(--wa-theme-glossy-bottom-shadow),
inset 0 0 0 var(--border-width) var(--border-color, var(--background-color, transparent));
@@ -32,7 +33,8 @@
}
&:not([disabled]):active {
--box-shadow: inset 0 0 0 0.0625rem var(--border-color-active, var(--background-color-active, transparent)),
--box-shadow:
inset 0 0 0 0.0625rem var(--border-color-active, var(--background-color-active, transparent)),
var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
var(--wa-theme-glossy-upper-tint-active), var(--wa-theme-glossy-lower-shade-active),
var(--wa-theme-glossy-bottom-shadow-active),
@@ -78,12 +80,14 @@
wa-checkbox:is(:state(checked), :state(indeterminate)),
wa-tree-item:is(:state(selected), :state(indeterminate))::part(checkbox__control),
wa-radio:state(checked) {
--box-shadow: inset 0 0 0 1px var(--border-color-checked, var(--background-color, transparent)),
--box-shadow:
inset 0 0 0 1px var(--border-color-checked, var(--background-color, transparent)),
var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight), var(--wa-theme-glossy-bottom-shadow),
inset 0 0 0 var(--border-width) var(--border-color-checked, var(--background-color, transparent));
&:active {
--box-shadow: var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
--box-shadow:
var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
var(--wa-theme-glossy-bottom-shadow-active);
}
@@ -96,8 +100,8 @@
input[type='range'],
wa-slider,
wa-switch {
--thumb-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
var(--wa-theme-glossy-bottom-shadow);
--thumb-shadow:
var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight), var(--wa-theme-glossy-bottom-shadow);
}
progress,

5
src/styles/themes/matter.css
View File

@@ -40,10 +40,5 @@
--wa-form-control-label-font-weight: var(--wa-font-weight-normal);
--wa-tooltip-arrow-size: 0rem;
/**
* Icons
*/
--wa-icon-variant: regular;
}
}

6
src/styles/themes/mellow.css
View File

@@ -39,11 +39,5 @@
* Component Groups
*/
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
/**
* Icons
*/
--wa-icon-family: duotone;
--wa-icon-variant: light;
}
}

6
src/styles/themes/premium.css
View File

@@ -31,11 +31,5 @@
--wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
--wa-form-control-background-color: transparent;
--wa-form-control-value-line-height: var(--wa-line-height-normal);
/**
* Icons
*/
--wa-icon-family: sharp;
--wa-icon-variant: regular;
}
}

5
src/styles/themes/shoelace.css
View File

@@ -47,10 +47,5 @@
/* Panels */
--wa-panel-border-radius: var(--wa-border-radius-m);
/**
* Icons
*/
--wa-icon-variant: light;
}
}

5
src/styles/themes/shoelace/typography.css
View File

@@ -4,8 +4,9 @@
:where(:root),
:host,
.wa-theme-shoelace {
--wa-font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--wa-font-family-body:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
--wa-font-family-longform: Georgia, 'Times New Roman', serif;

5
web-test-runner.config.js
View File

@@ -56,7 +56,10 @@ export default {
browsers: [
playwrightLauncher({ product: 'chromium', concurrency }),
playwrightLauncher({ product: 'firefox', concurrency }),
playwrightLauncher({ product: 'webkit', concurrency }),
//
// TODO - re-enable this and figure out why color picker tests randomly start failing in WebKit (CI only)
//
// playwrightLauncher({ product: 'webkit', concurrency }),
],
testRunnerHtml: testFramework => `
<!DOCTYPE html>