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

Merge branch 'next' into theming-ui/add-curated-font-list

Browse Source
This commit is contained in:
Kelsey Jackson
2024-01-03 11:01:05 -06:00
parent fe23a7ddb8 ccc6f1aa23
commit 430730f24a
135 changed files with 1028 additions and 1007 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored
View File

@@ -2,7 +2,7 @@
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
"source.fixAll.eslint": "explicit"
},
"debug.enableStatusBarColor": false
}

3
cspell.json
View File

@@ -176,7 +176,8 @@
"WCAG",
"webawesome",
"WEBP",
"Webpacker"
"Webpacker",
"xmark"
],
"ignorePaths": [
"package.json",

6
custom-elements-manifest.config.js
View File

@@ -38,6 +38,7 @@ export default {
customElementsManifest.package = { name, description, version, author, homepage, license };
}
},
// Infer tag names because we no longer use @customElement decorators.
{
name: 'wa-infer-tag-names',
@@ -66,6 +67,7 @@ export default {
}
}
},
// Parse custom jsDoc tags
{
name: 'wa-custom-tags',
@@ -137,6 +139,7 @@ export default {
}
}
},
{
name: 'wa-react-event-names',
analyzePhase({ ts, node, moduleDoc }) {
@@ -155,6 +158,7 @@ export default {
}
}
},
{
name: 'wa-translate-module-paths',
packageLinkPhase({ customElementsManifest }) {
@@ -191,6 +195,7 @@ export default {
});
}
},
// Generate custom VS Code data
customElementVsCodePlugin({
outdir,
@@ -202,6 +207,7 @@ export default {
}
]
}),
customElementJetBrainsPlugin({
outdir: './dist',
excludeCss: true,

8
docs/_includes/component.njk
View File

@@ -155,12 +155,12 @@
</td>
<td style="text-align: center;">
{% if prop.reflects %}
<wa-icon label="yes" name="check-lg"></wa-icon>
<wa-icon label="yes" name="check" variant="solid"></wa-icon>
{% endif %}
</td>
<td>
{% if prop.type.text %}
<code>{{ prop.type.text | markdownInline | safe }}</code>
<code>{{ prop.type.text | trimPipes | markdownInline | safe }}</code>
{% else %}
-
{% endif %}
@@ -211,7 +211,7 @@
<td>{{ event.description | markdownInline | safe }}</td>
<td>
{% if event.type.text %}
<code>{{ event.type.text }}</code>
<code>{{ event.type.text | trimPipes }}</code>
{% else %}
-
{% endif %}
@@ -245,7 +245,7 @@
{% if method.parameters.length %}
<code>
{% for param in method.parameters %}
{{ param.name }}: {{ param.type.text }}{% if not loop.last %},{% endif %}
{{ param.name }}: {{ param.type.text | trimPipes }}{% if not loop.last %},{% endif %}
{% endfor %}
</code>
{% else %}

6
docs/_includes/default.njk
View File

@@ -87,13 +87,13 @@
<div class="sidebar-buttons">
<wa-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
<wa-icon slot="prefix" name="github"></wa-icon> Code
<wa-icon slot="prefix" name="github" family="brands"></wa-icon> Code
</wa-button>
<wa-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
<wa-icon slot="prefix" name="star-fill"></wa-icon> Star
<wa-icon slot="prefix" name="star" variant="solid"></wa-icon> Star
</wa-button>
<wa-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
<wa-icon slot="prefix" name="twitter"></wa-icon> Follow
<wa-icon slot="prefix" name="twitter" family="brands"></wa-icon> Follow
</wa-button>
</div>

2
docs/_utilities/code-previews.cjs
View File

@@ -68,7 +68,7 @@ module.exports = function (doc, options) {
<div class="code-preview__preview">
${code.textContent}
<div class="code-preview__resizer">
<wa-icon name="grip-vertical"></wa-icon>
<wa-icon name="grip-vertical" variant="solid"></wa-icon>
</div>
</div>

8
docs/_utilities/markdown.cjs
View File

@@ -24,16 +24,16 @@ markdown.use(markdownItReplaceIt);
// Callouts
['tip', 'warning', 'danger'].forEach(type => {
const variant = type === 'tip' ? 'brand' : type;
let icon = 'info-circle';
if (type === 'warning') icon = 'exclamation-circle';
if (type === 'danger') icon = 'exclamation-triangle';
let icon = 'circle-info';
if (type === 'warning') icon = 'triangle-exclamation';
if (type === 'danger') icon = 'circle-exclamation';
markdown.use(markdownItContainer, type, {
render: function (tokens, idx) {
if (tokens[idx].nesting === 1) {
return `
<wa-alert class="callout" variant="${variant}" open>
<wa-icon slot="icon" name="${icon}"></wa-icon>
<wa-icon slot="icon" name="${icon}" variant="regular"></wa-icon>
`;
}
return '</wa-alert>\n';

12
docs/assets/scripts/search.js
View File

@@ -30,7 +30,7 @@
aria-activedescendant
>
<button type="button" class="search__clear-button" aria-label="Clear entry" tabindex="-1" hidden>
<wa-icon name="x-circle-fill"></wa-icon>
<wa-icon name="circle-xmark" variant="regular"></wa-icon>
</button>
</div>
</div>
@@ -44,8 +44,8 @@
<div class="search__empty">No matching pages</div>
</div>
<footer class="search__footer">
<small><kbd>↑</kbd> <kbd>↓</kbd> Navigate</small>
<small><kbd>↲</kbd> Select</small>
<small><kbd><wa-icon label="Up" name="arrow-up"></wa-icon></kbd> <kbd><wa-icon label="Down" name="arrow-down"></wa-icon></kbd> Navigate</small>
<small><kbd><wa-icon label="Enter" name="arrow-turn-down-left"></wa-icon></kbd> Select</small>
<small><kbd>Esc</kbd> Close</small>
</footer>
</div>
@@ -297,16 +297,16 @@
icon = 'book';
}
if (page.url.includes('components/')) {
icon = 'puzzle';
icon = 'puzzle-piece';
}
if (page.url.includes('tokens/')) {
icon = 'palette2';
icon = 'swatchbook';
}
if (page.url.includes('utilities/')) {
icon = 'wrench';
}
if (page.url.includes('tutorials/')) {
icon = 'joystick';
icon = 'gamepad';
}
li.classList.add('search__result');

2
docs/assets/styles/code-previews.css
View File

@@ -39,7 +39,7 @@
right: 0;
bottom: 0;
width: 1.75rem;
font-size: 20px;
font-size: var(--wa-font-size-xs);
color: var(--wa-color-text-quiet);
background-color: var(--wa-color-surface-default);
border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);

6
docs/eleventy.config.cjs
View File

@@ -96,6 +96,12 @@ module.exports = function (eleventyConfig) {
return webAwesomeFlavoredMarkdown.renderInline(content);
});
// Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
// With Prettier 3, this means a leading pipe will exist if the line wraps.
eleventyConfig.addFilter('trimPipes', content => {
return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
});
eleventyConfig.addFilter('classNameToComponentName', className => {
let name = capitalCase(className.replace(/^Wa/, ''));
if (name === 'Qr Code') name = 'QR Code'; // manual override

56
docs/pages/components/alert.md
View File

@@ -7,7 +7,7 @@ layout: component
```html:preview
<wa-alert open>
<wa-icon slot="icon" name="info-circle"></wa-icon>
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
This is a standard alert. You can customize its content and even the icon.
</wa-alert>
```
@@ -18,7 +18,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<WaAlert open>
<WaIcon slot="icon" name="info-circle" />
<WaIcon slot="icon" name="circle-info" variant="regular" />
This is a standard alert. You can customize its content and even the icon.
</WaAlert>
);
@@ -36,7 +36,7 @@ Set the `variant` attribute to change the alert's variant.
```html:preview
<wa-alert variant="brand" open>
<wa-icon slot="icon" name="info-circle"></wa-icon>
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
<strong>This is super informative</strong><br />
You can tell by how pretty the alert is.
</wa-alert>
@@ -44,7 +44,7 @@ Set the `variant` attribute to change the alert's variant.
<br />
<wa-alert variant="success" open>
<wa-icon slot="icon" name="check2-circle"></wa-icon>
<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
<strong>Your changes have been saved</strong><br />
You can safely exit the app now.
</wa-alert>
@@ -52,7 +52,7 @@ Set the `variant` attribute to change the alert's variant.
<br />
<wa-alert variant="neutral" open>
<wa-icon slot="icon" name="gear"></wa-icon>
<wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
<strong>Your settings have been updated</strong><br />
Settings will take effect on next login.
</wa-alert>
@@ -60,7 +60,7 @@ Set the `variant` attribute to change the alert's variant.
<br />
<wa-alert variant="warning" open>
<wa-icon slot="icon" name="exclamation-triangle"></wa-icon>
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
<strong>Your session has ended</strong><br />
Please login again to continue.
</wa-alert>
@@ -68,7 +68,7 @@ Set the `variant` attribute to change the alert's variant.
<br />
<wa-alert variant="danger" open>
<wa-icon slot="icon" name="exclamation-octagon"></wa-icon>
<wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
<strong>Your account has been deleted</strong><br />
We're very sorry to see you go!
</wa-alert>
@@ -81,7 +81,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<>
<WaAlert variant="brand" open>
<WaIcon slot="icon" name="info-circle" />
<WaIcon slot="icon" name="circle-info" variant="regular" />
<strong>This is super informative</strong>
<br />
You can tell by how pretty the alert is.
@@ -90,7 +90,7 @@ const App = () => (
<br />
<WaAlert variant="success" open>
<WaIcon slot="icon" name="check2-circle" />
<WaIcon slot="icon" name="circle-check" variant="regular" />
<strong>Your changes have been saved</strong>
<br />
You can safely exit the app now.
@@ -99,7 +99,7 @@ const App = () => (
<br />
<WaAlert variant="neutral" open>
<WaIcon slot="icon" name="gear" />
<WaIcon slot="icon" name="gear" variant="regular" />
<strong>Your settings have been updated</strong>
<br />
Settings will take effect on next login.
@@ -108,7 +108,7 @@ const App = () => (
<br />
<WaAlert variant="warning" open>
<WaIcon slot="icon" name="exclamation-triangle" />
<WaIcon slot="icon" name="triangle-exclamation" variant="regular" />
<strong>Your session has ended</strong>
<br />
Please login again to continue.
@@ -117,7 +117,7 @@ const App = () => (
<br />
<WaAlert variant="danger" open>
<WaIcon slot="icon" name="exclamation-octagon" />
<WaIcon slot="icon" name="circle-exclamation" variant="regular" />
<strong>Your account has been deleted</strong>
<br />
We're very sorry to see you go!
@@ -132,7 +132,7 @@ Add the `closable` attribute to show a close button that will hide the alert.
```html:preview
<wa-alert variant="brand" open closable class="alert-closable">
<wa-icon slot="icon" name="info-circle"></wa-icon>
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
You can close this alert any time!
</wa-alert>
@@ -159,7 +159,7 @@ const App = () => {
return (
<WaAlert open={open} closable onWaAfterHide={handleHide}>
<WaIcon slot="icon" name="info-circle" />
<WaIcon slot="icon" name="circle-info" variant="regular" />
You can close this alert any time!
</WaAlert>
);
@@ -193,7 +193,7 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
<wa-button variant="brand">Show Alert</wa-button>
<wa-alert variant="brand" duration="3000" closable>
<wa-icon slot="icon" name="info-circle"></wa-icon>
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
This alert will automatically hide itself after three seconds, unless you interact with it.
</wa-alert>
</div>
@@ -236,7 +236,7 @@ const App = () => {
</WaButton>
<WaAlert variant="brand" duration="3000" open={open} closable onWaAfterHide={() => setOpen(false)}>
<WaIcon slot="icon" name="info-circle" />
<WaIcon slot="icon" name="circle-info" variant="regular" />
This alert will automatically hide itself after three seconds, unless you interact with it.
</WaAlert>
</div>
@@ -262,31 +262,31 @@ You should always use the `closable` attribute so users can dismiss the notifica
<wa-button variant="danger">Danger</wa-button>
<wa-alert variant="brand" duration="3000" closable>
<wa-icon slot="icon" name="info-circle"></wa-icon>
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
<strong>This is super informative</strong><br />
You can tell by how pretty the alert is.
</wa-alert>
<wa-alert variant="success" duration="3000" closable>
<wa-icon slot="icon" name="check2-circle"></wa-icon>
<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
<strong>Your changes have been saved</strong><br />
You can safely exit the app now.
</wa-alert>
<wa-alert variant="neutral" duration="3000" closable>
<wa-icon slot="icon" name="gear"></wa-icon>
<wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
<strong>Your settings have been updated</strong><br />
Settings will take effect on next login.
</wa-alert>
<wa-alert variant="warning" duration="3000" closable>
<wa-icon slot="icon" name="exclamation-triangle"></wa-icon>
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
<strong>Your session has ended</strong><br />
Please login again to continue.
</wa-alert>
<wa-alert variant="danger" duration="3000" closable>
<wa-icon slot="icon" name="exclamation-octagon"></wa-icon>
<wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
<strong>Your account has been deleted</strong><br />
We're very sorry to see you go!
</wa-alert>
@@ -344,35 +344,35 @@ const App = () => {
</WaButton>
<WaAlert ref={brand} variant="brand" duration="3000" closable>
<WaIcon slot="icon" name="info-circle" />
<WaIcon slot="icon" name="circle-info" variant="regular" />
<strong>This is super informative</strong>
<br />
You can tell by how pretty the alert is.
</WaAlert>
<WaAlert ref={success} variant="success" duration="3000" closable>
<WaIcon slot="icon" name="check2-circle" />
<WaIcon slot="icon" name="circle-check" variant="regular" />
<strong>Your changes have been saved</strong>
<br />
You can safely exit the app now.
</WaAlert>
<WaAlert ref={neutral} variant="neutral" duration="3000" closable>
<WaIcon slot="icon" name="gear" />
<WaIcon slot="icon" name="gear" variant="regular" />
<strong>Your settings have been updated</strong>
<br />
Settings will take effect on next login.
</WaAlert>
<WaAlert ref={warning} variant="warning" duration="3000" closable>
<WaIcon slot="icon" name="exclamation-triangle" />
<WaIcon slot="icon" name="triangle-exclamation" variant="regular" />
<strong>Your session has ended</strong>
<br />
Please login again to continue.
</WaAlert>
<WaAlert ref={danger} variant="danger" duration="3000" closable>
<WaIcon slot="icon" name="exclamation-octagon" />
<WaIcon slot="icon" name="circle-exclamation" variant="regular" />
<strong>Your account has been deleted</strong>
<br />
We're very sorry to see you go!
@@ -404,13 +404,13 @@ For convenience, you can create a utility that emits toast notifications with a
}
// Custom function to emit toast notifications
function notify(message, variant = 'brand', icon = 'info-circle', duration = 3000) {
function notify(message, variant = 'brand', icon = 'circle-info', duration = 3000) {
const alert = Object.assign(document.createElement('wa-alert'), {
variant,
closable: true,
duration: duration,
innerHTML: `
<wa-icon name="${icon}" slot="icon"></wa-icon>
<wa-icon name="${icon}" variant="regular" slot="icon"></wa-icon>
${escapeHtml(message)}
`
});

10
docs/pages/components/avatar.md
View File

@@ -57,13 +57,13 @@ const App = () => (
When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon.
```html:preview
<wa-avatar initials="SL" label="Avatar with initials: SL"></wa-avatar>
<wa-avatar initials="WA" label="Avatar with initials: SL"></wa-avatar>
```
```jsx:react
import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
const App = () => <WaAvatar initials="SL" label="Avatar with initials: SL" />;
const App = () => <WaAvatar initials="WA" label="Avatar with initials: SL" />;
```
### Custom Icons
@@ -72,15 +72,15 @@ When no image or initials are set, an icon will be shown. The default avatar sho
```html:preview
<wa-avatar label="Avatar with an image icon">
<wa-icon slot="icon" name="image"></wa-icon>
<wa-icon slot="icon" name="image" variant="solid"></wa-icon>
</wa-avatar>
<wa-avatar label="Avatar with an archive icon">
<wa-icon slot="icon" name="archive"></wa-icon>
<wa-icon slot="icon" name="archive" variant="solid"></wa-icon>
</wa-avatar>
<wa-avatar label="Avatar with a briefcase icon">
<wa-icon slot="icon" name="briefcase"></wa-icon>
<wa-icon slot="icon" name="briefcase" variant="solid"></wa-icon>
</wa-avatar>
```

2
docs/pages/components/breadcrumb-item.md
View File

@@ -8,7 +8,7 @@ layout: component
```html:preview
<wa-breadcrumb>
<wa-breadcrumb-item>
<wa-icon slot="prefix" name="house"></wa-icon>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
Home
</wa-breadcrumb-item>
<wa-breadcrumb-item>Clothing</wa-breadcrumb-item>

24
docs/pages/components/breadcrumb.md
View File

@@ -73,7 +73,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
```html:preview
<wa-breadcrumb>
<wa-icon name="dot" slot="separator"></wa-icon>
<wa-icon slot="separator" name="angles-right" variant="solid"></wa-icon>
<wa-breadcrumb-item>First</wa-breadcrumb-item>
<wa-breadcrumb-item>Second</wa-breadcrumb-item>
<wa-breadcrumb-item>Third</wa-breadcrumb-item>
@@ -82,7 +82,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
<br />
<wa-breadcrumb>
<wa-icon name="arrow-right" slot="separator"></wa-icon>
<wa-icon slot="separator" name="arrow-right" variant="solid"></wa-icon>
<wa-breadcrumb-item>First</wa-breadcrumb-item>
<wa-breadcrumb-item>Second</wa-breadcrumb-item>
<wa-breadcrumb-item>Third</wa-breadcrumb-item>
@@ -106,7 +106,7 @@ import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-ite
const App = () => (
<>
<WaBreadcrumb>
<wa-icon name="dot" slot="separator" />
<wa-icon slot="separator" name="angles-right" variant="solid" />
<WaBreadcrumbItem>First</WaBreadcrumbItem>
<WaBreadcrumbItem>Second</WaBreadcrumbItem>
<WaBreadcrumbItem>Third</WaBreadcrumbItem>
@@ -115,7 +115,7 @@ const App = () => (
<br />
<WaBreadcrumb>
<wa-icon name="arrow-right" slot="separator" />
<wa-icon slot="separator" name="arrow-right" variant="solid" />
<WaBreadcrumbItem>First</WaBreadcrumbItem>
<WaBreadcrumbItem>Second</WaBreadcrumbItem>
<WaBreadcrumbItem>Third</WaBreadcrumbItem>
@@ -140,7 +140,7 @@ Use the `prefix` slot to add content before any breadcrumb item.
```html:preview
<wa-breadcrumb>
<wa-breadcrumb-item>
<wa-icon slot="prefix" name="house"></wa-icon>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
Home
</wa-breadcrumb-item>
<wa-breadcrumb-item>Articles</wa-breadcrumb-item>
@@ -156,7 +156,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<WaBreadcrumb>
<WaBreadcrumbItem>
<WaIcon slot="prefix" name="house" />
<WaIcon slot="prefix" name="house" variant="solid" />
Home
</WaBreadcrumbItem>
<WaBreadcrumbItem>Articles</WaBreadcrumbItem>
@@ -175,7 +175,7 @@ Use the `suffix` slot to add content after any breadcrumb item.
<wa-breadcrumb-item>Policies</wa-breadcrumb-item>
<wa-breadcrumb-item>
Security
<wa-icon slot="suffix" name="shield-lock"></wa-icon>
<wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
</wa-breadcrumb-item>
</wa-breadcrumb>
```
@@ -191,7 +191,7 @@ const App = () => (
<WaBreadcrumbItem>Policies</WaBreadcrumbItem>
<WaBreadcrumbItem>
Security
<WaIcon slot="suffix" name="shield-lock"></WaIcon>
<WaIcon slot="suffix" name="shield" variant="solid"></WaIcon>
</WaBreadcrumbItem>
</WaBreadcrumb>
);
@@ -209,8 +209,8 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op
<wa-breadcrumb-item>
Web Design
<wa-dropdown slot="suffix">
<wa-button slot="trigger" size="small" circle>
<wa-icon label="More options" name="three-dots"></wa-icon>
<wa-button slot="trigger" size="small" pill>
<wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
</wa-button>
<wa-menu>
<wa-menu-item type="checkbox" checked>Web Design</wa-menu-item>
@@ -241,8 +241,8 @@ const App = () => (
<WaBreadcrumbItem>
Web Design
<WaDropdown slot="suffix">
<WaButton slot="trigger" size="small" circle>
<WaIcon label="More options" name="three-dots"></WaIcon>
<WaButton slot="trigger" size="small" pill>
<WaIcon label="More options" name="ellipsis"></WaIcon>
</WaButton>
<WaMenu>
<WaMenuItem type="checkbox" checked>

32
docs/pages/components/button-group.md
View File

@@ -401,34 +401,34 @@ Create interactive toolbars with button groups.
<div class="button-group-toolbar">
<wa-button-group label="History">
<wa-tooltip content="Undo">
<wa-button><wa-icon name="arrow-counterclockwise" label="Undo"></wa-icon></wa-button>
<wa-button><wa-icon name="undo" variant="solid" label="Undo"></wa-icon></wa-button>
</wa-tooltip>
<wa-tooltip content="Redo">
<wa-button><wa-icon name="arrow-clockwise" label="Redo"></wa-icon></wa-button>
<wa-button><wa-icon name="redo" variant="solid" label="Redo"></wa-icon></wa-button>
</wa-tooltip>
</wa-button-group>
<wa-button-group label="Formatting">
<wa-tooltip content="Bold">
<wa-button><wa-icon name="type-bold" label="Bold"></wa-icon></wa-button>
<wa-button><wa-icon name="bold" variant="solid" label="Bold"></wa-icon></wa-button>
</wa-tooltip>
<wa-tooltip content="Italic">
<wa-button><wa-icon name="type-italic" label="Italic"></wa-icon></wa-button>
<wa-button><wa-icon name="italic" variant="solid" label="Italic"></wa-icon></wa-button>
</wa-tooltip>
<wa-tooltip content="Underline">
<wa-button><wa-icon name="type-underline" label="Underline"></wa-icon></wa-button>
<wa-button><wa-icon name="underline" variant="solid" label="Underline"></wa-icon></wa-button>
</wa-tooltip>
</wa-button-group>
<wa-button-group label="Alignment">
<wa-tooltip content="Align Left">
<wa-button><wa-icon name="justify-left" label="Align Left"></wa-icon></wa-button>
<wa-button><wa-icon name="align-left" variant="solid" label="Align Left"></wa-icon></wa-button>
</wa-tooltip>
<wa-tooltip content="Align Center">
<wa-button><wa-icon name="justify" label="Align Center"></wa-icon></wa-button>
<wa-button><wa-icon name="align-center" variant="solid" label="Align Center"></wa-icon></wa-button>
</wa-tooltip>
<wa-tooltip content="Align Right">
<wa-button><wa-icon name="justify-right" label="Align Right"></wa-icon></wa-button>
<wa-button><wa-icon name="align-right" variant="solid" label="Align Right"></wa-icon></wa-button>
</wa-tooltip>
</wa-button-group>
</div>
@@ -458,12 +458,12 @@ const App = () => (
<WaButtonGroup label="History">
<WaTooltip content="Undo">
<WaButton>
<WaIcon name="arrow-counterclockwise"></WaIcon>
<WaIcon name="undo" variant="solid"></WaIcon>
</WaButton>
</WaTooltip>
<WaTooltip content="Redo">
<WaButton>
<WaIcon name="arrow-clockwise"></WaIcon>
<WaIcon name="redo" variant="solid"></WaIcon>
</WaButton>
</WaTooltip>
</WaButtonGroup>
@@ -471,17 +471,17 @@ const App = () => (
<WaButtonGroup label="Formatting">
<WaTooltip content="Bold">
<WaButton>
<WaIcon name="type-bold"></WaIcon>
<WaIcon name="bold" variant="solid"></WaIcon>
</WaButton>
</WaTooltip>
<WaTooltip content="Italic">
<WaButton>
<WaIcon name="type-italic"></WaIcon>
<WaIcon name="italic" variant="solid"></WaIcon>
</WaButton>
</WaTooltip>
<WaTooltip content="Underline">
<WaButton>
<WaIcon name="type-underline"></WaIcon>
<WaIcon name="underline" variant="solid"></WaIcon>
</WaButton>
</WaTooltip>
</WaButtonGroup>
@@ -489,17 +489,17 @@ const App = () => (
<WaButtonGroup label="Alignment">
<WaTooltip content="Align Left">
<WaButton>
<WaIcon name="justify-left"></WaIcon>
<WaIcon name="align-left" variant="solid"></WaIcon>
</WaButton>
</WaTooltip>
<WaTooltip content="Align Center">
<WaButton>
<WaIcon name="justify"></WaIcon>
<WaIcon name="align-center" variant="solid"></WaIcon>
</WaButton>
</WaTooltip>
<WaTooltip content="Align Right">
<WaButton>
<WaIcon name="justify-right"></WaIcon>
<WaIcon name="align-right" variant="solid"></WaIcon>
</WaButton>
</WaTooltip>
</WaButtonGroup>

48
docs/pages/components/button.md
View File

@@ -229,54 +229,54 @@ Use the `prefix` and `suffix` slots to add icons.
```html:preview
<wa-button size="small">
<wa-icon slot="prefix" name="gear"></wa-icon>
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
Settings
</wa-button>
<wa-button size="small">
<wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
<wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
Refresh
</wa-button>
<wa-button size="small">
<wa-icon slot="prefix" name="link-45deg"></wa-icon>
<wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
<wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
Open
</wa-button>
<br /><br />
<wa-button>
<wa-icon slot="prefix" name="gear"></wa-icon>
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
Settings
</wa-button>
<wa-button>
<wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
<wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
Refresh
</wa-button>
<wa-button>
<wa-icon slot="prefix" name="link-45deg"></wa-icon>
<wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
<wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
Open
</wa-button>
<br /><br />
<wa-button size="large">
<wa-icon slot="prefix" name="gear"></wa-icon>
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
Settings
</wa-button>
<wa-button size="large">
<wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
<wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
Refresh
</wa-button>
<wa-button size="large">
<wa-icon slot="prefix" name="link-45deg"></wa-icon>
<wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
<wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
Open
</wa-button>
```
@@ -288,18 +288,18 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<>
<WaButton size="small">
<WaIcon slot="prefix" name="gear"></WaIcon>
<WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
Settings
</WaButton>
<WaButton size="small">
<WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
<WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
Refresh
</WaButton>
<WaButton size="small">
<WaIcon slot="prefix" name="link-45deg"></WaIcon>
<WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
<WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
<WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
Open
</WaButton>
@@ -307,18 +307,18 @@ const App = () => (
<br />
<WaButton>
<WaIcon slot="prefix" name="gear"></WaIcon>
<WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
Settings
</WaButton>
<WaButton>
<WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
<WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
Refresh
</WaButton>
<WaButton>
<WaIcon slot="prefix" name="link-45deg"></WaIcon>
<WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
<WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
<WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
Open
</WaButton>
@@ -326,18 +326,18 @@ const App = () => (
<br />
<WaButton size="large">
<WaIcon slot="prefix" name="gear"></WaIcon>
<WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
Settings
</WaButton>
<WaButton size="large">
<WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
<WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
Refresh
</WaButton>
<WaButton size="large">
<WaIcon slot="prefix" name="link-45deg"></WaIcon>
<WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
<WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
<WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
Open
</WaButton>
</>

4
docs/pages/components/card.md
View File

@@ -133,7 +133,7 @@ Headers can be used to display titles and more.
<wa-card class="card-header">
<div slot="header">
Header Title
<wa-icon-button name="gear" label="Settings"></wa-icon-button>
<wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
</div>
This card has a header. You can put all sorts of things in it!
@@ -189,7 +189,7 @@ const App = () => (
<WaCard className="card-header">
<div slot="header">
Header Title
<WaIconButton name="gear"></WaIconButton>
<WaIconButton name="gear" variant="solid"></WaIconButton>
</div>
This card has a header. You can put all sorts of things in it!
</WaCard>

18
docs/pages/components/copy-button.md
View File

@@ -51,9 +51,9 @@ Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the ico
```html:preview
<wa-copy-button value="Copied from a custom button">
<wa-icon slot="copy-icon" name="clipboard"></wa-icon>
<wa-icon slot="success-icon" name="clipboard-check"></wa-icon>
<wa-icon slot="error-icon" name="clipboard-x"></wa-icon>
<wa-icon slot="copy-icon" name="clipboard" variant="regular"></wa-icon>
<wa-icon slot="success-icon" name="thumbs-up" variant="solid"></wa-icon>
<wa-icon slot="error-icon" name="xmark" variant="solid"></wa-icon>
</wa-copy-button>
```
@@ -64,9 +64,9 @@ import { WaIcon } from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<>
<WaCopyButton value="Copied from a custom button">
<WaIcon slot="copy-icon" name="clipboard" />
<WaIcon slot="success-icon" name="clipboard-check" />
<WaIcon slot="error-icon" name="clipboard-x" />
<WaIcon slot="copy-icon" name="clipboard" variant="regular" />
<WaIcon slot="success-icon" name="check" variant="solid" />
<WaIcon slot="error-icon" name="xmark" variant="solid" />
</WaCopyButton>
</>
);
@@ -179,9 +179,9 @@ You can customize the button to your liking with CSS.
```html:preview
<wa-copy-button value="I'm so stylish" class="custom-styles">
<wa-icon slot="copy-icon" name="asterisk"></wa-icon>
<wa-icon slot="success-icon" name="check-lg"></wa-icon>
<wa-icon slot="error-icon" name="x-lg"></wa-icon>
<wa-icon slot="copy-icon" name="clipboard"></wa-icon>
<wa-icon slot="success-icon" name="thumbs-up"></wa-icon>
<wa-icon slot="error-icon" name="thumbs-down"></wa-icon>
</wa-copy-button>
<style>

14
docs/pages/components/details.md
View File

@@ -55,8 +55,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
```html:preview
<wa-details summary="Toggle Me" class="custom-icons">
<wa-icon name="plus-square" slot="expand-icon"></wa-icon>
<wa-icon name="dash-square" slot="collapse-icon"></wa-icon>
<wa-icon name="square-plus" slot="expand-icon" variant="regular"></wa-icon>
<wa-icon name="square-minus" slot="collapse-icon" variant="regular"></wa-icon>
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.
@@ -84,8 +84,8 @@ const css = `
const App = () => (
<>
<WaDetails summary="Toggle Me" class="custom-icon">
<WaIcon name="plus-square" slot="expand-icon" />
<WaIcon name="dash-square" slot="collapse-icon" />
<WaIcon name="square-plus" slot="expand-icon" />
<WaIcon name="square-minus" slot="collapse-icon" />
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.
@@ -122,9 +122,9 @@ Details are designed to function independently, but you can simulate a group or
const container = document.querySelector('.details-group-example');
// Close all other details when one is shown
container.addEventListener('sl-show', event => {
if (event.target.localName === 'sl-details') {
[...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
container.addEventListener('wa-show', event => {
if (event.target.localName === 'wa-details') {
[...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
}
});
</script>

4
docs/pages/components/dialog.md
View File

@@ -165,7 +165,7 @@ The header shows a functional close button by default. You can use the `header-a
```html:preview
<wa-dialog label="Dialog" class="dialog-header-actions">
<wa-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></wa-icon-button>
<wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<wa-button slot="footer" variant="brand">Close</wa-button>
</wa-dialog>
@@ -199,7 +199,7 @@ const App = () => {
<WaIconButton
class="new-window"
slot="header-actions"
name="box-arrow-up-right"
name="arrow-up-right-from-square"
onClick={() => window.open(location.href)}
/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

4
docs/pages/components/drawer.md
View File

@@ -375,7 +375,7 @@ The header shows a functional close button by default. You can use the `header-a
```html:preview
<wa-drawer label="Drawer" class="drawer-header-actions">
<wa-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></wa-icon-button>
<wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<wa-button slot="footer" variant="brand">Close</wa-button>
</wa-drawer>
@@ -406,7 +406,7 @@ const App = () => {
return (
<>
<WaDrawer label="Drawer" open={open} onWaAfterHide={() => setOpen(false)}>
<WaIconButton slot="header-actions" name="box-arrow-up-right" onClick={() => window.open(location.href)} />
<WaIconButton slot="header-actions" name="arrow-up-right-from-square" onClick={() => window.open(location.href)} />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
Close

4
docs/pages/components/dropdown.md
View File

@@ -22,11 +22,11 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a
<wa-divider></wa-divider>
<wa-menu-item>
Prefix
<wa-icon slot="prefix" name="gift"></wa-icon>
<wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
</wa-menu-item>
<wa-menu-item>
Suffix Icon
<wa-icon slot="suffix" name="heart"></wa-icon>
<wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
</wa-menu-item>
</wa-menu>
</wa-dropdown>

36
docs/pages/components/icon-button.md
View File

@@ -24,9 +24,9 @@ const App = () => <WaIconButton name="gear" label="Settings" />;
Icon buttons inherit their parent element's `font-size`.
```html:preview
<wa-icon-button name="pencil" label="Edit" style="font-size: 1.5rem;"></wa-icon-button>
<wa-icon-button name="pencil" label="Edit" style="font-size: 2rem;"></wa-icon-button>
<wa-icon-button name="pencil" label="Edit" style="font-size: 2.5rem;"></wa-icon-button>
<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 1.5rem;"></wa-icon-button>
<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2rem;"></wa-icon-button>
<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2.5rem;"></wa-icon-button>
```
{% raw %}
@@ -36,9 +36,9 @@ import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
const App = () => (
<>
<WaIconButton name="pencil" label="Edit" style={{ fontSize: '1.5rem' }} />
<WaIconButton name="pencil" label="Edit" style={{ fontSize: '2rem' }} />
<WaIconButton name="pencil" label="Edit" style={{ fontSize: '2.5rem' }} />
<WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '1.5rem' }} />
<WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '2rem' }} />
<WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '2.5rem' }} />
</>
);
```
@@ -51,9 +51,9 @@ Icon buttons are designed to have a uniform appearance, so their color is not in
```html:preview
<div class="icon-button-color">
<wa-icon-button name="type-bold" label="Bold"></wa-icon-button>
<wa-icon-button name="type-italic" label="Italic"></wa-icon-button>
<wa-icon-button name="type-underline" label="Underline"></wa-icon-button>
<wa-icon-button name="bold" variant="solid" label="Bold"></wa-icon-button>
<wa-icon-button name="italic" variant="solid" label="Italic"></wa-icon-button>
<wa-icon-button name="underline" variant="solid" label="Underline"></wa-icon-button>
</div>
<style>
@@ -93,9 +93,9 @@ const css = `
const App = () => (
<>
<div className="icon-button-color">
<WaIconButton name="type-bold" label="Bold" />
<WaIconButton name="type-italic" label="Italic" />
<WaIconButton name="type-underline" label="Underline" />
<WaIconButton name="type-bold" variant="solid" label="Bold" />
<WaIconButton name="type-italic" variant="solid" label="Italic" />
<WaIconButton name="type-underline" variant="solid" label="Underline" />
</div>
<style>{css}</style>
@@ -108,13 +108,13 @@ const App = () => (
Use the `href` attribute to convert the button to a link.
```html:preview
<wa-icon-button name="gear" label="Settings" href="https://example.com" target="_blank"></wa-icon-button>
<wa-icon-button name="gear" variant="solid" label="Settings" href="https://example.com" target="_blank"></wa-icon-button>
```
```jsx:react
import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
const App = () => <WaIconButton name="gear" label="Settings" href="https://example.com" target="_blank" />;
const App = () => <WaIconButton name="gear" variant="solid" label="Settings" href="https://example.com" target="_blank" />;
```
### Icon Button with Tooltip
@@ -123,7 +123,7 @@ Wrap a tooltip around an icon button to provide contextual information to the us
```html:preview
<wa-tooltip content="Settings">
<wa-icon-button name="gear" label="Settings"></wa-icon-button>
<wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
</wa-tooltip>
```
@@ -133,7 +133,7 @@ import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
const App = () => (
<WaTooltip content="Settings">
<WaIconButton name="gear" label="Settings" />
<WaIconButton name="gear" variant="solid" label="Settings" />
</WaTooltip>
);
```
@@ -143,11 +143,11 @@ const App = () => (
Use the `disabled` attribute to disable the icon button.
```html:preview
<wa-icon-button name="gear" label="Settings" disabled></wa-icon-button>
<wa-icon-button name="gear" variant="solid" label="Settings" disabled></wa-icon-button>
```
```jsx:react
import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
const App = () => <WaIconButton name="gear" label="Settings" disabled />;
const App = () => <WaIconButton name="gear" variant="solid" label="Settings" disabled />;
```

241
docs/pages/components/icon.md
View File

@@ -19,23 +19,11 @@ All available icons in the `default` icon library are shown below. Click or tap
<wa-icon name="icon-name-here"></wa-icon>
```
<div class="icon-search">
<div class="icon-search-controls">
<wa-input placeholder="Search Icons" clearable>
<wa-icon slot="prefix" name="search"></wa-icon>
</wa-input>
<wa-select value="outline">
<wa-option value="outline">Outlined</wa-option>
<wa-option value="fill">Filled</wa-option>
<wa-option value="all">All icons</wa-option>
</wa-select>
</div>
<div class="icon-list"></div>
<input type="text" class="icon-copy-input" aria-hidden="true" tabindex="-1">
</div>
## Examples
TODO - show how to use `family` and `variant` attributes.
TODO - show how to use FA pro via `data-webawesome-kit="..."`
### 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.
@@ -44,23 +32,23 @@ Icons inherit their color from the current text color. Thus, you can set the `co
<div style="color: #4a90e2;">
<wa-icon name="exclamation-triangle"></wa-icon>
<wa-icon name="archive"></wa-icon>
<wa-icon name="battery-charging"></wa-icon>
<wa-icon name="battery-three-quarters"></wa-icon>
<wa-icon name="bell"></wa-icon>
</div>
<div style="color: #9013fe;">
<wa-icon name="clock"></wa-icon>
<wa-icon name="cloud"></wa-icon>
<wa-icon name="download"></wa-icon>
<wa-icon name="file-earmark"></wa-icon>
<wa-icon name="file"></wa-icon>
</div>
<div style="color: #417505;">
<wa-icon name="flag"></wa-icon>
<wa-icon name="heart"></wa-icon>
<wa-icon name="image"></wa-icon>
<wa-icon name="lightning"></wa-icon>
<wa-icon name="bolt-lightning"></wa-icon>
</div>
<div style="color: #f5a623;">
<wa-icon name="mic"></wa-icon>
<wa-icon name="microphone"></wa-icon>
<wa-icon name="search"></wa-icon>
<wa-icon name="star"></wa-icon>
<wa-icon name="trash"></wa-icon>
@@ -77,23 +65,23 @@ const App = () => (
<div style={{ color: '#4a90e2' }}>
<WaIcon name="exclamation-triangle"></WaIcon>
<WaIcon name="archive"></WaIcon>
<WaIcon name="battery-charging"></WaIcon>
<WaIcon name="battery-three-quarters"></WaIcon>
<WaIcon name="bell"></WaIcon>
</div>
<div style={{ color: '#9013fe' }}>
<WaIcon name="clock"></WaIcon>
<WaIcon name="cloud"></WaIcon>
<WaIcon name="download"></WaIcon>
<WaIcon name="file-earmark"></WaIcon>
<WaIcon name="file"></WaIcon>
</div>
<div style={{ color: '#417505' }}>
<WaIcon name="flag"></WaIcon>
<WaIcon name="heart"></WaIcon>
<WaIcon name="image"></WaIcon>
<WaIcon name="lightning"></WaIcon>
<WaIcon name="bolt-lightning"></WaIcon>
</div>
<div style={{ color: '#f5a623' }}>
<WaIcon name="mic"></WaIcon>
<WaIcon name="microphone"></WaIcon>
<WaIcon name="search"></WaIcon>
<WaIcon name="star"></WaIcon>
<WaIcon name="trash"></WaIcon>
@@ -112,17 +100,17 @@ Icons are sized relative to the current font size. To change their size, set the
<div style="font-size: 32px;">
<wa-icon name="exclamation-triangle"></wa-icon>
<wa-icon name="archive"></wa-icon>
<wa-icon name="battery-charging"></wa-icon>
<wa-icon name="battery-three-quarters"></wa-icon>
<wa-icon name="bell"></wa-icon>
<wa-icon name="clock"></wa-icon>
<wa-icon name="cloud"></wa-icon>
<wa-icon name="download"></wa-icon>
<wa-icon name="file-earmark"></wa-icon>
<wa-icon name="file"></wa-icon>
<wa-icon name="flag"></wa-icon>
<wa-icon name="heart"></wa-icon>
<wa-icon name="image"></wa-icon>
<wa-icon name="lightning"></wa-icon>
<wa-icon name="mic"></wa-icon>
<wa-icon name="bolt-lightning"></wa-icon>
<wa-icon name="microphone"></wa-icon>
<wa-icon name="search"></wa-icon>
<wa-icon name="star"></wa-icon>
<wa-icon name="trash"></wa-icon>
@@ -138,17 +126,17 @@ const App = () => (
<div style={{ fontSize: '32px' }}>
<WaIcon name="exclamation-triangle" />
<WaIcon name="archive" />
<WaIcon name="battery-charging" />
<WaIcon name="battery-three-quarters" />
<WaIcon name="bell" />
<WaIcon name="clock" />
<WaIcon name="cloud" />
<WaIcon name="download" />
<WaIcon name="file-earmark" />
<WaIcon name="file" />
<WaIcon name="flag" />
<WaIcon name="heart" />
<WaIcon name="image" />
<WaIcon name="lightning" />
<WaIcon name="mic" />
<WaIcon name="bolt-lightning" />
<WaIcon name="microphone" />
<WaIcon name="search" />
<WaIcon name="star" />
<WaIcon name="trash" />
@@ -163,13 +151,13 @@ const App = () => (
For non-decorative icons, use the `label` attribute to announce it to assistive devices.
```html:preview
<wa-icon name="star-fill" label="Add to favorites"></wa-icon>
<wa-icon name="star" label="Add to favorites"></wa-icon>
```
```jsx:react
import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => <WaIcon name="star-fill" label="Add to favorites" />;
const App = () => <WaIcon name="star" label="Add to favorites" />;
```
### Custom Icons
@@ -680,190 +668,3 @@ If you want to change the icons Web Awesome uses internally, you can register an
});
</script>
```
<!-- Supporting scripts and styles for the search utility -->
<script>
function wrapWithTooltip(item) {
const tooltip = document.createElement('wa-tooltip');
tooltip.content = item.getAttribute('data-name');
// Close open tooltips
document.querySelectorAll('.icon-list wa-tooltip[open]').forEach(tooltip => tooltip.hide());
// Wrap it with a tooltip and trick it into showing up
item.parentNode.insertBefore(tooltip, item);
tooltip.appendChild(item);
requestAnimationFrame(() => tooltip.dispatchEvent(new MouseEvent('mouseover')));
}
fetch('/dist/assets/icons/icons.json')
.then(res => res.json())
.then(icons => {
const container = document.querySelector('.icon-search');
const input = container.querySelector('wa-input');
const select = container.querySelector('wa-select');
const copyInput = container.querySelector('.icon-copy-input');
const loader = container.querySelector('.icon-loader');
const list = container.querySelector('.icon-list');
const queue = [];
let inputTimeout;
// Generate icons
icons.map(i => {
const item = document.createElement('div');
item.classList.add('icon-list-item');
item.setAttribute('data-name', i.name);
item.setAttribute('data-terms', [i.name, i.title, ...(i.tags || []), ...(i.categories || [])].join(' '));
item.innerHTML = `
<svg width="1em" height="1em" fill="currentColor">
<use href="/assets/images/sprite.svg#${i.name}"></use>
</svg>
`;
list.appendChild(item);
// Wrap it with a tooltip the first time the mouse lands on it. We do this instead of baking them into the DOM
// to improve this page's performance. See: https://github.com/shoelace-style/shoelace/issues/1122
item.addEventListener('mouseover', () => wrapWithTooltip(item), { once: true });
// Copy on click
item.addEventListener('click', () => {
const tooltip = item.closest('wa-tooltip');
copyInput.value = i.name;
copyInput.select();
document.execCommand('copy');
if (tooltip) {
tooltip.content = 'Copied!';
setTimeout(() => tooltip.content = i.name, 1000);
}
});
});
// Filter as the user types
input.addEventListener('wa-input', () => {
clearTimeout(inputTimeout);
inputTimeout = setTimeout(() => {
[...list.querySelectorAll('.icon-list-item')].map(item => {
const filter = input.value.toLowerCase();
if (filter === '') {
item.hidden = false;
} else {
const terms = item.getAttribute('data-terms').toLowerCase();
item.hidden = terms.indexOf(filter) < 0;
}
});
}, 250);
});
// Sort by type and remember preference
const iconType = sessionStorage.getItem('wa-icon:type') || 'outline';
select.value = iconType;
list.setAttribute('data-type', select.value);
select.addEventListener('wa-change', () => {
list.setAttribute('data-type', select.value);
sessionStorage.setItem('wa-icon:type', select.value);
});
});
</script>
<style>
.icon-search {
border: solid 1px var(--wa-color-surface-border);
border-radius: var(--wa-corners-s);
padding: var(--wa-space-m);
}
.icon-search [hidden] {
display: none;
}
.icon-search-controls {
display: flex;
}
.icon-search-controls wa-input {
flex: 1 1 auto;
}
.icon-search-controls wa-select {
width: 10rem;
flex: 0 0 auto;
margin-left: 1rem;
}
.icon-loader {
display: flex;
align-items: center;
justify-content: center;
min-height: 30vh;
}
.icon-list {
display: grid;
grid-template-columns: repeat(12, 1fr);
position: relative;
margin-top: 1rem;
}
.icon-loader[hidden],
.icon-list[hidden] {
display: none;
}
.icon-list-item {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--wa-corners-s);
font-size: 24px;
width: 2em;
height: 2em;
margin: 0 auto;
cursor: copy;
transition: var(--wa-transition-fast) all;
}
.icon-list-item:hover {
background-color: var(--wa-color-brand-fill-subtle);
color: var(--wa-color-brand-text-on-fill);
}
.icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] {
display: none;
}
.icon-list[data-type="fill"] .icon-list-item:not([data-name$="-fill"]) {
display: none;
}
.icon-copy-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
@media screen and (max-width: 1000px) {
.icon-list {
grid-template-columns: repeat(8, 1fr);
}
.icon-list-item {
font-size: 20px;
}
.icon-search-controls {
display: block;
}
.icon-search-controls wa-select {
width: auto;
margin: 1rem 0 0 0;
}
}
@media screen and (max-width: 500px) {
.icon-list {
grid-template-columns: repeat(4, 1fr);
}
}
</style>

24
docs/pages/components/input.md
View File

@@ -205,18 +205,18 @@ Use the `prefix` and `suffix` slots to add icons.
```html:preview
<wa-input placeholder="Small" size="small">
<wa-icon name="house" slot="prefix"></wa-icon>
<wa-icon name="chat" slot="suffix"></wa-icon>
<wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
<wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
</wa-input>
<br />
<wa-input placeholder="Medium" size="medium">
<wa-icon name="house" slot="prefix"></wa-icon>
<wa-icon name="chat" slot="suffix"></wa-icon>
<wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
<wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
</wa-input>
<br />
<wa-input placeholder="Large" size="large">
<wa-icon name="house" slot="prefix"></wa-icon>
<wa-icon name="chat" slot="suffix"></wa-icon>
<wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
<wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
</wa-input>
```
@@ -227,18 +227,18 @@ import WaInput from '@shoelace-style/shoelace/dist/react/input';
const App = () => (
<>
<WaInput placeholder="Small" size="small">
<WaIcon name="house" slot="prefix"></WaIcon>
<WaIcon name="chat" slot="suffix"></WaIcon>
<WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
<WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
</WaInput>
<br />
<WaInput placeholder="Medium" size="medium">
<WaIcon name="house" slot="prefix"></WaIcon>
<WaIcon name="chat" slot="suffix"></WaIcon>
<WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
<WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
</WaInput>
<br />
<WaInput placeholder="Large" size="large">
<WaIcon name="house" slot="prefix"></WaIcon>
<WaIcon name="chat" slot="suffix"></WaIcon>
<WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
<WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
</WaInput>
</>
);

20
docs/pages/components/menu-item.md
View File

@@ -16,11 +16,11 @@ layout: component
<wa-divider></wa-divider>
<wa-menu-item>
Prefix Icon
<wa-icon slot="prefix" name="gift"></wa-icon>
<wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
</wa-menu-item>
<wa-menu-item>
Suffix Icon
<wa-icon slot="suffix" name="heart"></wa-icon>
<wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
</wa-menu-item>
</wa-menu>
```
@@ -46,11 +46,11 @@ const App = () => (
<WaDivider />
<WaMenuItem>
Prefix Icon
<WaIcon slot="prefix" name="gift" />
<WaIcon slot="prefix" name="gift" variant="solid" />
</WaMenuItem>
<WaMenuItem>
Suffix Icon
<WaIcon slot="suffix" name="heart" />
<WaIcon slot="suffix" name="heart" variant="solid" />
</WaMenuItem>
</WaMenu>
);
@@ -96,12 +96,12 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
```html:preview
<wa-menu style="max-width: 200px;">
<wa-menu-item>
<wa-icon slot="prefix" name="house"></wa-icon>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
Home
</wa-menu-item>
<wa-menu-item>
<wa-icon slot="prefix" name="envelope"></wa-icon>
<wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
Messages
<wa-badge slot="suffix" variant="brand" pill>12</wa-badge>
</wa-menu-item>
@@ -109,7 +109,7 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
<wa-divider></wa-divider>
<wa-menu-item>
<wa-icon slot="prefix" name="gear"></wa-icon>
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
Settings
</wa-menu-item>
</wa-menu>
@@ -127,12 +127,12 @@ import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
const App = () => (
<WaMenu style={{ maxWidth: '200px' }}>
<WaMenuItem>
<WaIcon slot="prefix" name="house" />
<WaIcon slot="prefix" name="house" variant="solid" />
Home
</WaMenuItem>
<WaMenuItem>
<WaIcon slot="prefix" name="envelope" />
<WaIcon slot="prefix" name="envelope" variant="solid" />
Messages
<WaBadge slot="suffix" variant="brand" pill>
12
@@ -142,7 +142,7 @@ const App = () => (
<WaDivider />
<WaMenuItem>
<WaIcon slot="prefix" name="gear" />
<WaIcon slot="prefix" name="gear" variant="solid" />
Settings
</WaMenuItem>
</WaMenu>

12
docs/pages/components/option.md
View File

@@ -62,21 +62,21 @@ Add icons to the start and end of menu items using the `prefix` and `suffix` slo
```html:preview
<wa-select label="Select one">
<wa-option value="option-1">
<wa-icon slot="prefix" name="envelope"></wa-icon>
<wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
Email
<wa-icon slot="suffix" name="patch-check"></wa-icon>
<wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
</wa-option>
<wa-option value="option-2">
<wa-icon slot="prefix" name="telephone"></wa-icon>
<wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
Phone
<wa-icon slot="suffix" name="patch-check"></wa-icon>
<wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
</wa-option>
<wa-option value="option-3">
<wa-icon slot="prefix" name="chat-dots"></wa-icon>
<wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
Chat
<wa-icon slot="suffix" name="patch-check"></wa-icon>
<wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
</wa-option>
</wa-select>
```

8
docs/pages/components/progress-bar.md
View File

@@ -58,8 +58,8 @@ Use the default slot to show a value.
<br />
<wa-button circle><wa-icon name="dash" label="Decrease"></wa-icon></wa-button>
<wa-button circle><wa-icon name="plus" label="Increase"></wa-icon></wa-button>
<wa-button circle><wa-icon name="minus" variant="solid" label="Decrease"></wa-icon></wa-button>
<wa-button circle><wa-icon name="plus" variant="solid" label="Increase"></wa-icon></wa-button>
<script>
const progressBar = document.querySelector('.progress-bar-values');
@@ -103,11 +103,11 @@ const App = () => {
<br />
<WaButton circle onClick={() => adjustValue(-10)}>
<WaIcon name="dash" label="Decrease" />
<WaIcon name="minus" variant="solid" label="Decrease" />
</WaButton>
<WaButton circle onClick={() => adjustValue(10)}>
<WaIcon name="plus" label="Increase" />
<WaIcon name="plus" variant="solid" label="Increase" />
</WaButton>
</>
);

8
docs/pages/components/progress-ring.md
View File

@@ -108,8 +108,8 @@ Use the default slot to show a label inside the progress ring.
<br />
<wa-button circle><wa-icon name="dash" label="Decrease"></wa-icon></wa-button>
<wa-button circle><wa-icon name="plus" label="Increase"></wa-icon></wa-button>
<wa-button circle><wa-icon name="minus" variant="solid" label="Decrease"></wa-icon></wa-button>
<wa-button circle><wa-icon name="plus" variant="solid" label="Increase"></wa-icon></wa-button>
<script>
const progressRing = document.querySelector('.progress-ring-values');
@@ -157,11 +157,11 @@ const App = () => {
<br />
<WaButton circle onClick={() => adjustValue(-10)}>
<WaIcon name="dash" label="Decrease" />
<WaIcon name="minus" variant="solid" label="Decrease" />
</WaButton>
<WaButton circle onClick={() => adjustValue(10)}>
<WaIcon name="plus" label="Increase" />
<WaIcon name="plus" variant="solid" label="Increase" />
</WaButton>
</>
);

36
docs/pages/components/radio-button.md
View File

@@ -203,18 +203,18 @@ Use the `prefix` and `suffix` slots to add icons.
```html:preview
<wa-radio-group label="Select an option" name="a" value="1">
<wa-radio-button value="1">
<wa-icon slot="prefix" name="archive"></wa-icon>
<wa-icon slot="prefix" name="archive" variant="solid"></wa-icon>
Option 1
</wa-radio-button>
<wa-radio-button value="2">
<wa-icon slot="suffix" name="bag"></wa-icon>
<wa-icon slot="suffix" name="bag-shopping" variant="solid"></wa-icon>
Option 2
</wa-radio-button>
<wa-radio-button value="3">
<wa-icon slot="prefix" name="gift"></wa-icon>
<wa-icon slot="suffix" name="cart"></wa-icon>
<wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
<wa-icon slot="suffix" name="shopping-cart" variant="solid"></wa-icon>
Option 3
</wa-radio-button>
</wa-radio-group>
@@ -228,18 +228,18 @@ import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
const App = () => (
<WaRadioGroup label="Select an option" name="a" value="1">
<WaRadioButton value="1">
<WaIcon slot="prefix" name="archive" />
<WaIcon slot="prefix" name="archive" variant="solid" />
Option 1
</WaRadioButton>
<WaRadioButton value="2">
<WaIcon slot="suffix" name="bag" />
<WaIcon slot="suffix" name="bag" variant="solid" />
Option 2
</WaRadioButton>
<WaRadioButton value="3">
<WaIcon slot="prefix" name="gift" />
<WaIcon slot="suffix" name="cart" />
<WaIcon slot="prefix" name="gift" variant="solid" />
<WaIcon slot="suffix" name="cart" variant="solid" />
Option 3
</WaRadioButton>
</WaRadioGroup>
@@ -253,23 +253,23 @@ You can omit button labels and use icons instead. Make sure to set a `label` att
```html:preview
<wa-radio-group label="Select an option" name="a" value="neutral">
<wa-radio-button value="angry">
<wa-icon name="emoji-angry" label="Angry"></wa-icon>
<wa-icon name="face-angry" variant="solid" label="Angry"></wa-icon>
</wa-radio-button>
<wa-radio-button value="sad">
<wa-icon name="emoji-frown" label="Sad"></wa-icon>
<wa-icon name="face-frown" variant="solid" label="Sad"></wa-icon>
</wa-radio-button>
<wa-radio-button value="neutral">
<wa-icon name="emoji-neutral" label="Neutral"></wa-icon>
<wa-icon name="face-meh" variant="solid" label="Neutral"></wa-icon>
</wa-radio-button>
<wa-radio-button value="happy">
<wa-icon name="emoji-smile" label="Happy"></wa-icon>
<wa-icon name="face-smile" variant="solid" label="Happy"></wa-icon>
</wa-radio-button>
<wa-radio-button value="laughing">
<wa-icon name="emoji-laughing" label="Laughing"></wa-icon>
<wa-icon name="face-laugh" variant="solid" label="Laughing"></wa-icon>
</wa-radio-button>
</wa-radio-group>
```
@@ -282,23 +282,23 @@ import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
const App = () => (
<WaRadioGroup label="Select an option" name="a" value="neutral">
<WaRadioButton value="angry">
<WaIcon name="emoji-angry" label="Angry" />
<WaIcon name="face-angry" label="Angry" />
</WaRadioButton>
<WaRadioButton value="sad">
<WaIcon name="emoji-frown" label="Sad" />
<WaIcon name="face-frown" label="Sad" />
</WaRadioButton>
<WaRadioButton value="neutral">
<WaIcon name="emoji-neutral" label="Neutral" />
<WaIcon name="face-neutral" label="Neutral" />
</WaRadioButton>
<WaRadioButton value="happy">
<WaIcon name="emoji-smile" label="Happy" />
<WaIcon name="face-smile" label="Happy" />
</WaRadioButton>
<WaRadioButton value="laughing">
<WaIcon name="emoji-laughing" label="Laughing" />
<WaIcon name="face-laughing" label="Laughing" />
</WaRadioButton>
</WaRadioGroup>
);

8
docs/pages/components/rating.md
View File

@@ -207,7 +207,7 @@ You can provide custom icons by passing a function to the `getSymbol` property.
<script>
const rating = document.querySelector('.rating-hearts');
rating.getSymbol = () => '<wa-icon name="heart-fill"></wa-icon>';
rating.getSymbol = () => '<wa-icon name="heart" variant="solid"></wa-icon>';
</script>
```
@@ -219,7 +219,7 @@ import WaRating from '@shoelace-style/shoelace/dist/react/rating';
const App = () => (
<WaRating
label="Rating"
getSymbol={() => '<wa-icon name="heart-fill"></wa-icon>'}
getSymbol={() => '<wa-icon name="heart" variant="solid"></wa-icon>'}
style={{ '--symbol-color-active': '#ff4136' }}
/>
);
@@ -238,7 +238,7 @@ You can also use the `getSymbol` property to render different icons based on val
const rating = document.querySelector('.rating-emojis');
rating.getSymbol = value => {
const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh'];
return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
};
</script>
@@ -248,7 +248,7 @@ You can also use the `getSymbol` property to render different icons based on val
import WaRating from '@shoelace-style/shoelace/dist/react/rating';
function getSymbol(value) {
const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh'];
return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
}

18
docs/pages/components/select.md
View File

@@ -401,21 +401,21 @@ Use the `prefix` slot to prepend an icon to the control.
```html:preview
<wa-select placeholder="Small" size="small" clearable>
<wa-icon name="house" slot="prefix"></wa-icon>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
</wa-select>
<br />
<wa-select placeholder="Medium" size="medium" clearable>
<wa-icon name="house" slot="prefix"></wa-icon>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
</wa-select>
<br />
<wa-select placeholder="Large" size="large" clearable>
<wa-icon name="house" slot="prefix"></wa-icon>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
@@ -430,21 +430,21 @@ import WaSelect from '@shoelace-style/shoelace/dist/react/select';
const App = () => (
<>
<WaSelect placeholder="Small" size="small">
<WaIcon name="house" slot="prefix"></WaIcon>
<WaIcon slot="prefix" name="house" variant="solid"></WaIcon>
<WaOption value="option-1">Option 1</WaOption>
<WaOption value="option-2">Option 2</WaOption>
<WaOption value="option-3">Option 3</WaOption>
</WaSelect>
<br />
<WaSelect placeholder="Medium" size="medium">
<WaIcon name="house" slot="prefix"></WaIcon>
<WaIcon slot="prefix" name="house" variant="solid"></WaIcon>
<WaOption value="option-1">Option 1</WaOption>
<WaOption value="option-2">Option 2</WaOption>
<WaOption value="option-3">Option 3</WaOption>
</WaSelect>
<br />
<WaSelect placeholder="Large" size="large">
<WaIcon name="house" slot="prefix"></WaIcon>
<WaIcon slot="prefix" name="house" variant="solid"></WaIcon>
<WaOption value="option-1">Option 1</WaOption>
<WaOption value="option-2">Option 2</WaOption>
<WaOption value="option-3">Option 3</WaOption>
@@ -468,15 +468,15 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
class="custom-tag"
>
<wa-option value="email">
<wa-icon slot="prefix" name="envelope"></wa-icon>
<wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
Email
</wa-option>
<wa-option value="phone">
<wa-icon slot="prefix" name="telephone"></wa-icon>
<wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
Phone
</wa-option>
<wa-option value="chat">
<wa-icon slot="prefix" name="chat-dots"></wa-icon>
<wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
Chat
</wa-option>
</wa-select>

18
docs/pages/components/split-panel.md
View File

@@ -638,7 +638,7 @@ You can target the `divider` part to apply CSS properties to the divider. To add
```html:preview
<wa-split-panel style="--divider-width: 20px;">
<wa-icon slot="divider" name="grip-vertical"></wa-icon>
<wa-icon slot="divider" name="grip-vertical" variant="solid"></wa-icon>
<div
slot="start"
style="
@@ -676,7 +676,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<WaSplitPanel style={{ '--divider-width': '20px' }}>
<WaIcon slot="divider" name="grip-vertical" />
<WaIcon slot="divider" name="grip-vertical" variant="solid" />
<div
slot="start"
style={{
@@ -712,7 +712,7 @@ Here's a more elaborate example that changes the divider's color and width and a
```html:preview
<div class="split-panel-divider">
<wa-split-panel>
<wa-icon slot="divider" name="grip-vertical"></wa-icon>
<wa-icon slot="divider" name="grip-vertical" variant="solid"></wa-icon>
<div
slot="start"
style="
@@ -744,7 +744,7 @@ Here's a more elaborate example that changes the divider's color and width and a
<style>
.split-panel-divider wa-split-panel {
--divider-width: 2px;
--divider-width: 4px;
}
.split-panel-divider wa-split-panel::part(divider) {
@@ -756,7 +756,7 @@ Here's a more elaborate example that changes the divider's color and width and a
border-radius: var(--wa-corners-l);
background: var(--wa-color-red-50);
color: white;
padding: 0.5rem 0.125rem;
padding: 0.5rem 0.25rem;
}
.split-panel-divider wa-split-panel::part(divider):focus-visible {
@@ -778,8 +778,8 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const css = `
.split-panel-divider wa-split-panel {
--divider-width: 2px;
}
--divider-width: 4px;
}
.split-panel-divider wa-split-panel::part(divider) {
background-color: var(--wa-color-red-50);
@@ -790,7 +790,7 @@ const css = `
border-radius: var(--wa-corners-xs);
background: var(--wa-color-red-50);
color: white;
padding: .5rem .125rem;
padding: .5rem .25rem;
}
.split-panel-divider wa-split-panel::part(divider):focus-visible {
@@ -807,7 +807,7 @@ const App = () => (
<>
<div className="split-panel-divider">
<WaSplitPanel>
<WaIcon slot="divider" name="grip-vertical" />
<WaIcon slot="divider" name="grip-vertical" variant="solid" />
<div
slot="start"
style={{

26
docs/pages/components/tree.md
View File

@@ -304,8 +304,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
```html:preview
<wa-tree class="custom-icons">
<wa-icon name="plus-square" slot="expand-icon"></wa-icon>
<wa-icon name="dash-square" slot="collapse-icon"></wa-icon>
<wa-icon name="square-plus" variant="solid" slot="expand-icon"></wa-icon>
<wa-icon name="square-minus" variant="solid" slot="collapse-icon"></wa-icon>
<wa-tree-item>
Deciduous
@@ -349,8 +349,8 @@ import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
const App = () => (
<WaTree>
<WaIcon name="plus-square" slot="expand-icon"></WaIcon>
<WaIcon name="dash-square" slot="collapse-icon"></WaIcon>
<WaIcon name="square-plus" variant="solid" slot="expand-icon"></WaIcon>
<WaIcon name="square-minus" variant="solid" slot="collapse-icon"></WaIcon>
<WaTreeItem>
Deciduous
@@ -388,39 +388,39 @@ Decorative icons can be used before labels to provide hints for each node.
```html:preview
<wa-tree class="tree-with-icons">
<wa-tree-item expanded>
<wa-icon name="folder"></wa-icon>
<wa-icon name="folder" variant="regular"></wa-icon>
Documents
<wa-tree-item>
<wa-icon name="folder"> </wa-icon>
<wa-icon name="folder" variant="regular"> </wa-icon>
Photos
<wa-tree-item>
<wa-icon name="image"></wa-icon>
<wa-icon name="image" variant="regular"></wa-icon>
birds.jpg
</wa-tree-item>
<wa-tree-item>
<wa-icon name="image"></wa-icon>
<wa-icon name="image" variant="regular"></wa-icon>
kitten.jpg
</wa-tree-item>
<wa-tree-item>
<wa-icon name="image"></wa-icon>
<wa-icon name="image" variant="regular"></wa-icon>
puppy.jpg
</wa-tree-item>
</wa-tree-item>
<wa-tree-item>
<wa-icon name="folder"></wa-icon>
<wa-icon name="folder" variant="regular"></wa-icon>
Writing
<wa-tree-item>
<wa-icon name="file"></wa-icon>
<wa-icon name="file" variant="regular"></wa-icon>
draft.txt
</wa-tree-item>
<wa-tree-item>
<wa-icon name="file-pdf"></wa-icon>
<wa-icon name="file-pdf" variant="regular"></wa-icon>
final.pdf
</wa-tree-item>
<wa-tree-item>
<wa-icon name="file-bar-graph"></wa-icon>
<wa-icon name="file-lines" variant="regular"></wa-icon>
sales.xls
</wa-tree-item>
</wa-tree-item>

2
docs/pages/components/visually-hidden.md
View File

@@ -26,7 +26,7 @@ In this example, the link will open a new window. Screen readers will announce "
```html:preview
<a href="https://example.com/" target="_blank">
Visit External Page
<wa-icon name="box-arrow-up-right"></wa-icon>
<wa-icon name="arrow-up-right-from-square" variant="regular"></wa-icon>
<wa-visually-hidden>opens in a new window</wa-visually-hidden>
</a>
```

10
docs/pages/experimental/sandbox.md
View File

@@ -47,31 +47,31 @@ meta:
```html:preview
<wa-alert variant="brand" open>
<wa-icon slot="icon" name="info-circle"></wa-icon>
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
<strong>This is super informative</strong><br />
You can tell by how pretty the alert is.
</wa-alert>
<br />
<wa-alert variant="success" open>
<wa-icon slot="icon" name="check2-circle"></wa-icon>
<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
<strong>Your changes have been saved</strong><br />
You can safely exit the app now.
</wa-alert>
<br />
<wa-alert variant="neutral" open>
<wa-icon slot="icon" name="gear"></wa-icon>
<wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
<strong>Your settings have been updated</strong><br />
Settings will take affect on next login.
</wa-alert>
<br />
<wa-alert variant="warning" open>
<wa-icon slot="icon" name="exclamation-triangle"></wa-icon>
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
<strong>Your session has ended</strong><br />
Please login again to continue.
</wa-alert>
<br />
<wa-alert variant="danger" open>
<wa-icon slot="icon" name="exclamation-octagon"></wa-icon>
<wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
<strong>Your account has been deleted</strong><br />
We're very sorry to see you go!
</wa-alert>

8
docs/pages/experimental/themer.md
View File

@@ -266,7 +266,7 @@ toc: false
<wa-card>
<div class="space-vertically">
<wa-alert variant="success" open>
<wa-icon slot="icon" name="check-circle-fill"></wa-icon>
<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
This is the way.
</wa-alert>
<wa-select label="Signet" help-text="This identifies your clan. You can change this later.">
@@ -279,7 +279,7 @@ toc: false
<wa-card>
<div class="space-vertically">
<wa-alert variant="warning" open>
<wa-icon slot="icon" name="check-circle-fill"></wa-icon>
<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
It's a trap!
</wa-alert>
<wa-radio-group label="Faction" value="2">
@@ -293,7 +293,7 @@ toc: false
<wa-card>
<div class="space-vertically">
<wa-alert variant="danger" open>
<wa-icon slot="icon" name="check-circle-fill"></wa-icon>
<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
That's no moon.
</wa-alert>
<wa-input label="Destination" value="Alderaan"></wa-input>
@@ -348,7 +348,7 @@ toc: false
left: calc(-1 * var(--wa-space-2xl));
width: calc(100% + var(--wa-space-2xl) * 2);
height: 300px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-spot-darker);
z-index: -1;
}

6
docs/pages/getting-started/installation.md
View File

@@ -100,8 +100,8 @@ Some components rely on assets (icons, images, etc.) and Web Awesome needs to kn
However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Web Awesome, you'll need to set the base path. You can do this one of two ways.
```html
<!-- Option 1: the data-web-awesome attribute -->
<script src="bundle.js" data-web-awesome="/path/to/shoelace/%NPMDIR%"></script>
<!-- Option 1: the data-webawesome attribute -->
<script src="bundle.js" data-webawesome="/path/to/shoelace/%NPMDIR%"></script>
<!-- Option 2: the setBasePath() method -->
<script src="bundle.js"></script>
@@ -144,7 +144,7 @@ Here's an example that loads only the button component. Again, if you're not usi
```html
<link rel="stylesheet" href="/path/to/shoelace/%NPMDIR%/themes/default.css" />
<script type="module" data-web-awesome="/path/to/shoelace/%NPMDIR%">
<script type="module" data-webawesome="/path/to/shoelace/%NPMDIR%">
import '@shoelace-style/shoelace/%NPMDIR%/components/button/button.js';
// <wa-button> is ready to use!

2
docs/pages/getting-started/usage.md
View File

@@ -85,7 +85,7 @@ Some components also have _named_ slots. A named slot can be populated by adding
```html
<wa-button>
<wa-icon slot="prefix" name="gear"></wa-icon>
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
Settings
</wa-button>
```

8
docs/pages/resources/changelog.md
View File

@@ -14,6 +14,10 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
## 3.0 Changes (BREAKING)
- Added `setKitCode()` and `getKitCode()` functions as well as support for setting kit codes declaratively with `data-webawesome-kit`
- Added `family` and `variant` attributes to `<wa-icon>` and `<wa-icon-button>`
- Changed the attribute for setting the base path declaratively to `data-webawesome` instead of `data-shoelace`; additionally, you can place it on any element now instead of just the associated `<script>` tag
- `<wa-icon>` icons are no longer fixed width by default to accommodate variable width icons
- Changed the `sl` prefix to `wa` for Web Awesome, including tags, events, etc.
- Changed `primary` variants to `brand` in all components
- Improved submenu selection by implementing the [safe triangle](https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/) method [#1550]
@@ -22,8 +26,12 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
## Next
- Fixed files that did not have `.js` extensions. [#1770]
- Fixed `<sl-dialog>` not accounting for elements with hidden dialog controls like `<video>` [#1755]
- Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
- Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
- Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
- Fixed a bug in `<sl-spinner>` that caused the animation to appear strange in certain circumstances [#1787]
- Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
## 2.12.0

6
docs/pages/resources/community.md
View File

@@ -20,7 +20,7 @@ The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) i
- Learn more about the project, its values, and its roadmap
<wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank">
<wa-icon name="github" slot="prefix"></wa-icon>
<wa-icon name="github" family="brands" slot="prefix"></wa-icon>
Join the Discussion
</wa-button>
@@ -34,7 +34,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
- Chat live with other designers, developers, and Web Awesome fans
<wa-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank">
<wa-icon name="discord" slot="prefix"></wa-icon>
<wa-icon name="discord" family="brands" slot="prefix"></wa-icon>
Join the Chat
</wa-button>
@@ -45,6 +45,6 @@ Follow [@shoelace_style](https://twitter.com/shoelace_style) on Twitter for gene
**Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
<wa-button variant="brand" href="https://twitter.com/shoelace_style" target="_blank">
<wa-icon name="twitter" slot="prefix"></wa-icon>
<wa-icon name="twitter" family="brands" slot="prefix"></wa-icon>
Follow on Twitter
</wa-button>

2
docs/pages/resources/contributing.md
View File

@@ -439,7 +439,7 @@ Form controls should support submission and validation through the following con
Avoid inlining SVG icons inside of templates. If a component requires an icon, make sure `<wa-icon>` is a dependency of the component and use the [system library](/components/icon#customizing-the-system-library):
```html
<wa-icon library="system" name="..."></wa-icon>
<wa-icon library="system" name="..." variant="..."></wa-icon>
```
This will render the icons instantly whereas the default library will fetch them from a remote source. If an icon isn't available in the system library, you will need to add it to `library.system.ts`. Using the system library ensures that all icons load instantly and are customizable by users who wish to provide a custom resolver for the system library.

32
docs/pages/tokens/typography.md
View File

@@ -23,16 +23,18 @@ The default font stack is designed to be simple and highly available on as many
Font sizes use `rem` units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
| Token | Value | Example |
| --------------------- | --------------- | ----------------------------------------------------------- |
| `--wa-font-size-root` | 16px | <span style="font-size: var(--wa-font-size-root)">Aa</span> |
| `--wa-font-size-2xs` | 0.625rem (10px) | <span style="font-size: var(--wa-font-size-2xs)">Aa</span> |
| `--wa-font-size-xs` | 0.75rem (12px) | <span style="font-size: var(--wa-font-size-xs)">Aa</span> |
| `--wa-font-size-s` | 0.875rem (14px) | <span style="font-size: var(--wa-font-size-s)">Aa</span> |
| `--wa-font-size-m` | 1rem (16px) | <span style="font-size: var(--wa-font-size-m)">Aa</span> |
| `--wa-font-size-l` | 1.375rem (22px) | <span style="font-size: var(--wa-font-size-l)">Aa</span> |
| `--wa-font-size-xl` | 1.875rem (30px) | <span style="font-size: var(--wa-font-size-xl)">Aa</span> |
| `--wa-font-size-2xl` | 2.625rem (42px) | <span style="font-size: var(--wa-font-size-2xl)">Aa</span> |
| Token | Value | Example |
| --------------------- | ---------------- | ------------------------------------------------------------- |
| `--wa-font-size-root` | 16px | <span style="font-size: var(--wa-font-size-root)">AaBb</span> |
| `--wa-font-size-2xs` | 0.6875rem (11px) | <span style="font-size: var(--wa-font-size-xs)">AaBb</span> |
| `--wa-font-size-xs` | 0.75rem (12px) | <span style="font-size: var(--wa-font-size-xs)">AaBb</span> |
| `--wa-font-size-s` | 0.875rem (14px) | <span style="font-size: var(--wa-font-size-s)">AaBb</span> |
| `--wa-font-size-m` | 1rem (16px) | <span style="font-size: var(--wa-font-size-m)">AaBb</span> |
| `--wa-font-size-l` | 1.25rem (20px) | <span style="font-size: var(--wa-font-size-l)">AaBb</span> |
| `--wa-font-size-xl` | 1.625rem (26px) | <span style="font-size: var(--wa-font-size-xl)">AaBb</span> |
| `--wa-font-size-2xl` | 2rem (32px) | <span style="font-size: var(--wa-font-size-2xl)">AaBb</span> |
| `--wa-font-size-3xl` | 2.5625rem (41px) | <span style="font-size: var(--wa-font-size-3xl)">AaBb</span> |
| `--wa-font-size-4xl` | 3.25rem (52px) | <span style="font-size: var(--wa-font-size-4xl)">AaBb</span> |
## Font Weight
@@ -47,8 +49,8 @@ Font sizes use `rem` units so they scale with the base font size. The pixel valu
## Line Height
| Token | Value | Example |
| ------------------------------ | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `--wa-line-height-compact` | 1.25 | <div style="line-height: var(--wa-line-height-compact);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--wa-line-height-regular` | 1.625 | <div style="line-height: var(--wa-line-height-regular);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--wa-line-height-comfortable` | 2 | <div style="line-height: var(--wa-line-height-comfortable);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| Token | Value | Example |
| ------------------------------ | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--wa-line-height-compact` | 1.25 | <div style="line-height: var(--wa-font-line-height-compact);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--wa-line-height-regular` | 1.6 | <div style="line-height: var(--wa-font-line-height-regular);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--wa-line-height-comfortable` | 2 | <div style="line-height: var(--wa-font-line-height-comfortable);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |

1
package-lock.json generated
View File

@@ -66,7 +66,6 @@
"markdown-it-mark": "^3.0.1",
"markdown-it-replace-it": "^1.0.0",
"npm-check-updates": "^16.14.6",
"ora": "^7.0.1",
"pascal-case": "^3.1.2",
"plop": "^4.0.0",
"prettier": "^3.0.3",

1
package.json
View File

@@ -119,7 +119,6 @@
"markdown-it-mark": "^3.0.1",
"markdown-it-replace-it": "^1.0.0",
"npm-check-updates": "^16.14.6",
"ora": "^7.0.1",
"pascal-case": "^3.1.2",
"plop": "^4.0.0",
"prettier": "^3.0.3",

151
scripts/build.js
View File

@@ -8,7 +8,6 @@ import copy from 'recursive-copy';
import esbuild from 'esbuild';
import fs from 'fs/promises';
import getPort, { portNumbers } from 'get-port';
import ora from 'ora';
import util from 'util';
import * as path from 'path';
import { readFileSync } from 'fs';
@@ -18,10 +17,8 @@ const { serve } = commandLineArgs([{ name: 'serve', type: Boolean }]);
const outdir = 'dist';
const cdndir = 'cdn';
const sitedir = '_site';
const spinner = ora({ hideCursor: false }).start();
const execPromise = util.promisify(exec);
let childProcess;
let buildResults;
let buildResults = [];
const bundleDirectories = [cdndir, outdir];
let packageData = JSON.parse(readFileSync(path.join(process.cwd(), 'package.json'), 'utf-8'));
@@ -34,11 +31,8 @@ const shoelaceVersion = JSON.stringify(packageData.version.toString());
async function buildTheDocs(watch = false) {
return new Promise(async (resolve, reject) => {
const afterSignal = '[eleventy.after]';
// Totally non-scientific way to handle errors. Perhaps its just better to resolve on stderr? :shrug:
const errorSignal = 'Original error stack trace:';
const args = ['@11ty/eleventy', '--quiet'];
const output = [];
if (watch) {
args.push('--watch');
@@ -51,35 +45,30 @@ async function buildTheDocs(watch = false) {
shell: true // for Windows
});
child.stdout.setEncoding('utf8');
child.stderr.setEncoding('utf8');
child.stdout.on('data', data => {
if (data.includes(afterSignal)) return; // don't log the signal
output.push(data.toString());
});
console.log(data);
child.stderr.on('data', data => {
output.push(data.toString());
});
if (watch) {
// The process doesn't terminate in watch mode so, before resolving, we listen for a known signal in stdout that
// tells us when the first build completes.
child.stdout.on('data', data => {
if (data.includes(afterSignal)) {
resolve({ child, output });
}
});
// tells us when the first build completes so we can start up Browser Sync. The 11ty dev server will keep running
// after this.
if (watch && data.includes(afterSignal)) {
resolve();
return;
}
});
child.stderr.on('data', data => {
console.log(data);
child.stderr.on('data', data => {
if (data.includes(errorSignal)) {
// Resolve to prevent the dev server from closing
resolve(output);
}
});
} else {
child.on('close', () => {
resolve({ child, output });
});
}
// Look for a known error signal
if (data.includes(errorSignal)) {
reject({ stderr: data });
return;
}
});
child.on('error', error => reject(error));
child.on('close', () => resolve());
});
}
@@ -155,32 +144,40 @@ async function buildTheSource() {
//
// Called on SIGINT or SIGTERM to cleanup the build and child processes.
//
function handleCleanup() {
buildResults.forEach(result => result.dispose());
if (childProcess) {
childProcess.kill('SIGINT');
}
function exit() {
buildResults.forEach(result => {
if (result.dispose) {
result.dispose();
}
});
process.exit();
}
//
// Helper function to draw a spinner while tasks run.
// Helper function to cleanly log tasks
//
async function nextTask(label, action) {
spinner.text = label;
spinner.start();
function clearLine() {
if (process.stdout.isTTY) {
process.stdout.clearLine();
process.stdout.cursorTo(0);
} else {
process.stdout.write('\n');
}
}
try {
process.stdout.write(`${chalk.yellow('•')} ${label}`);
await action();
spinner.stop();
console.log(`${chalk.green('✔')} ${label}`);
clearLine();
process.stdout.write(`${chalk.green('✔')} ${label}\n`);
} catch (err) {
spinner.stop();
console.error(`${chalk.red('✘')} ${err}`);
if (err.stdout) console.error(chalk.red(err.stdout));
if (err.stderr) console.error(chalk.red(err.stderr));
clearLine();
process.stdout.write(`${chalk.red('✘')} ${label}\n\n`);
if (err.stdout) process.stdout.write(`${chalk.red(err.stdout)}\n`);
if (err.stderr) process.stdout.write(`${chalk.red(err.stderr)}\n`);
exit();
}
}
@@ -205,16 +202,12 @@ await nextTask('Generating themes', () => {
return execPromise(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
});
await nextTask('Packaging up icons', () => {
return execPromise(`node scripts/make-icons.js --outdir "${outdir}"`, { stdio: 'inherit' });
});
await nextTask('Running the TypeScript compiler', () => {
return execPromise(`tsc --project ./tsconfig.prod.json --outdir "${outdir}"`, { stdio: 'inherit' });
});
// Copy the above steps to the CDN directory directly so we don't need to twice the work for nothing.
await nextTask(`Themes, Icons, and TS Types to "${cdndir}"`, async () => {
// Copy the above steps to the CDN directory directly so we don't need to twice the work for nothing
await nextTask(`Copying CDN files to "${cdndir}"`, async () => {
await deleteAsync(cdndir);
await copy(outdir, cdndir);
});
@@ -223,27 +216,12 @@ await nextTask('Building source files', async () => {
buildResults = await buildTheSource();
});
// Copy the CDN build to the docs (prod only; we use a virtual directory in dev)
if (!serve) {
await nextTask(`Copying the build to "${sitedir}"`, async () => {
await deleteAsync(sitedir);
// We copy the CDN build because that has everything bundled. Yes this looks weird.
// But if we do "/cdn" it requires changes all the docs to do /cdn instead of /dist.
await copy(cdndir, path.join(sitedir, 'dist'));
});
}
// Launch the dev server
if (serve) {
let result;
// Spin up Eleventy and Wait for the search index to appear before proceeding. The search index is generated during
// eleventy.after, so it appears after the docs are fully published. This is kinda hacky, but here we are.
// Kick off the Eleventy dev server with --watch and --incremental
await nextTask('Building docs', async () => {
result = await buildTheDocs(true);
});
await nextTask('Building docs', async () => await buildTheDocs(true));
const bs = browserSync.create();
const port = await getPort({ port: portNumbers(4000, 4999) });
@@ -267,17 +245,7 @@ if (serve) {
// Launch browser sync
bs.init(browserSyncConfig, () => {
const url = `http://localhost:${port}`;
console.log(chalk.cyan(`\n🥾 The dev server is available at ${url}`));
// Log deferred output
if (result.output.length > 0) {
console.log('\n' + result.output.join('\n'));
}
// Log output that comes later on
result.child.stdout.on('data', data => {
console.log(data.toString());
});
console.log(chalk.cyan(`\n🏀 The dev server is available at ${url}\n`));
});
// Rebuild and reload when source files change
@@ -312,7 +280,7 @@ if (serve) {
bs.reload();
} catch (err) {
console.error(chalk.red(err));
console.error(chalk.red(err), '\n');
}
});
@@ -324,18 +292,19 @@ if (serve) {
// Build for production
if (!serve) {
let result;
// Copy the CDN build to the docs (prod only; we use a virtual directory in dev)
await nextTask(`Copying the build to "${sitedir}"`, async () => {
await deleteAsync(sitedir);
await nextTask('Building the docs', async () => {
result = await buildTheDocs();
// We copy the CDN build because that has everything bundled. Yes this looks weird.
// But if we do "/cdn" it requires changes all the docs to do /cdn instead of /dist.
await copy(cdndir, path.join(sitedir, 'dist'));
});
await nextTask('Building the docs', async () => {
await buildTheDocs();
});
// Log deferred output
if (result.output.length > 0) {
console.log('\n' + result.output.join('\n'));
}
}
// Cleanup on exit
process.on('SIGINT', handleCleanup);
process.on('SIGTERM', handleCleanup);
process.on('SIGINT', exit);
process.on('SIGTERM', exit);

55
scripts/make-icons.js
View File

@@ -1,55 +0,0 @@
//
// This script downloads and generates icons and icon metadata.
//
import chalk from 'chalk';
import commandLineArgs from 'command-line-args';
import copy from 'recursive-copy';
import { deleteAsync } from 'del';
import download from 'download';
import fm from 'front-matter';
import fs from 'fs/promises';
import { globby } from 'globby';
import path from 'path';
const { outdir } = commandLineArgs({ name: 'outdir', type: String });
const iconDir = path.join(outdir, '/assets/icons');
const iconPackageData = JSON.parse(await fs.readFile('./node_modules/bootstrap-icons/package.json', 'utf8'));
const version = iconPackageData.version;
const srcPath = `./.cache/icons/icons-${version}`;
const url = `https://github.com/twbs/icons/archive/v${version}.zip`;
try {
await fs.stat(`${srcPath}/LICENSE.md`);
} catch {
// Download the source from GitHub (since not everything is published to npm)
await download(url, './.cache/icons', { extract: true });
}
// Copy icons
await deleteAsync([iconDir]);
await fs.mkdir(iconDir, { recursive: true });
await Promise.all([
copy(`${srcPath}/icons`, iconDir),
copy(`${srcPath}/LICENSE`, path.join(iconDir, 'LICENSE')),
copy(`${srcPath}/bootstrap-icons.svg`, './docs/assets/images/sprite.svg', { overwrite: true })
]);
// Generate metadata
const files = await globby(`${srcPath}/docs/content/icons/**/*.md`);
const metadata = await Promise.all(
files.map(async file => {
const name = path.basename(file, path.extname(file));
const data = fm(await fs.readFile(file, 'utf8')).attributes;
return {
name,
title: data.title,
categories: data.categories,
tags: data.tags
};
})
);
await fs.writeFile(path.join(iconDir, 'icons.json'), JSON.stringify(metadata, null, 2), 'utf8');

4
scripts/make-react.js
View File

@@ -25,10 +25,10 @@ for await (const component of components) {
const componentFile = path.join(componentDir, 'index.ts');
const importPath = component.path.replace(/\.js$/, '.component.js');
const eventImports = (component.events || [])
.map(event => `import type { ${event.eventName} } from '../../events/events';`)
.map(event => `import type { ${event.eventName} } from '../../events/events.js';`)
.join('\n');
const eventExports = (component.events || [])
.map(event => `export type { ${event.eventName} } from '../../events/events';`)
.map(event => `export type { ${event.eventName} } from '../../events/events.js';`)
.join('\n');
const eventNameImport = (component.events || []).length > 0 ? `import { type EventName } from '@lit/react';` : ``;
const events = (component.events || [])

10
scripts/make-themes.js
View File

@@ -47,9 +47,19 @@ files.forEach(async file => {
{ parser: 'babel-ts' }
);
let dTs = await prettier.format(
`
declare const _default: import("lit").CSSResult;
export default _default;
`,
{ parser: 'babel-ts' }
);
const cssFile = path.join(themesDir, path.basename(file));
const jsFile = path.join(themesDir, path.basename(file).replace('.css', '.styles.js'));
const dTsFile = path.join(themesDir, path.basename(file).replace('.css', '.styles.d.ts'));
fs.writeFileSync(cssFile, css, 'utf8');
fs.writeFileSync(jsFile, js, 'utf8');
fs.writeFileSync(dTsFile, dTs, 'utf8');
});

5
src/components/alert/alert.component.ts
View File

@@ -33,7 +33,7 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'wa
* @csspart base - The component's base wrapper.
* @csspart icon - The container that wraps the optional icon.
* @csspart message - The container that wraps the alert's main content.
* @csspart close-button - The close button, an `<wa-icon-button>`.
* @csspart close-button - The close button, a `<wa-icon-button>`.
* @csspart close-button__base - The close button's exported `base` part.
*
* @cssproperty --background - The alert's background styles.
@@ -222,8 +222,9 @@ export default class WaAlert extends WebAwesomeElement {
part="close-button"
exportparts="base:close-button__base"
class="alert__close-button"
name="x-lg"
name="xmark"
library="system"
variant="solid"
label=${this.localize.term('close')}
@click=${this.handleCloseClick}
></wa-icon-button>

4
src/components/animated-image/animated-image.component.ts
View File

@@ -105,8 +105,8 @@ export default class WaAnimatedImage extends WebAwesomeElement {
/>
<div part="control-box" class="animated-image__control-box">
<slot name="play-icon"><wa-icon name="play-fill" library="system"></wa-icon></slot>
<slot name="pause-icon"><wa-icon name="pause-fill" library="system"></wa-icon></slot>
<slot name="play-icon"><wa-icon name="play" library="system" variant="solid"></wa-icon></slot>
<slot name="pause-icon"><wa-icon name="pause" library="system" variant="solid"></wa-icon></slot>
</div>
`
: ''}

4
src/components/animated-image/animated-image.styles.ts
View File

@@ -32,10 +32,10 @@ export default css`
right: calc(50% - var(--control-box-size) / 2);
width: var(--control-box-size);
height: var(--control-box-size);
font-size: var(--icon-size);
font-size: calc(var(--icon-size) * 0.75);
background: none;
border: solid 2px currentColor;
background-color: rgb(0 0 0 /50%);
background-color: rgb(0 0 0 / 50%);
border-radius: var(--wa-corners-circle);
color: white;
pointer-events: none;

3
src/components/animation/animation.test.ts
View File

@@ -1,5 +1,6 @@
import '../../../dist/webawesome.js';
import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
import { aTimeout, expect, fixture, oneEvent } from '@open-wc/testing';
import { html } from 'lit';
import type WaAnimation from './animation.js';
describe('<wa-animation>', () => {

2
src/components/avatar/avatar.component.ts
View File

@@ -73,7 +73,7 @@ export default class WaAvatar extends WebAwesomeElement {
avatarWithoutImage = html`
<div part="icon" class="avatar__icon" aria-hidden="true">
<slot name="icon">
<wa-icon name="person-fill" library="system"></wa-icon>
<wa-icon name="user" library="system" variant="solid"></wa-icon>
</slot>
</div>
`;

6
src/components/breadcrumb-item/breadcrumb-item.styles.ts
View File

@@ -63,12 +63,12 @@ export default css`
.breadcrumb-item--has-prefix .breadcrumb-item__prefix {
display: inline-flex;
margin-inline-end: var(--wa-space-xs);
margin-inline-end: var(--wa-space-s);
}
.breadcrumb-item--has-suffix .breadcrumb-item__suffix {
display: inline-flex;
margin-inline-start: var(--wa-space-xs);
margin-inline-start: var(--wa-space-s);
}
:host(:last-of-type) .breadcrumb-item__separator {
@@ -78,7 +78,7 @@ export default css`
.breadcrumb-item__separator {
display: inline-flex;
align-items: center;
margin: 0 var(--wa-space-xs);
margin: 0 var(--wa-space-s);
user-select: none;
-webkit-user-select: none;
}

6
src/components/breadcrumb/breadcrumb.component.ts
View File

@@ -92,7 +92,11 @@ export default class WaBreadcrumb extends WebAwesomeElement {
<span hidden aria-hidden="true">
<slot name="separator">
<wa-icon name=${this.localize.dir() === 'rtl' ? 'chevron-left' : 'chevron-right'} library="system"></wa-icon>
<wa-icon
name=${this.localize.dir() === 'rtl' ? 'chevron-left' : 'chevron-right'}
library="system"
variant="solid"
></wa-icon>
</slot>
</span>
`;

14
src/components/button/button.component.ts
View File

@@ -34,7 +34,7 @@ import type { WebAwesomeFormControl } from '../../internal/webawesome-element.js
* @csspart prefix - The container that wraps the prefix.
* @csspart label - The button's label.
* @csspart suffix - The container that wraps the suffix.
* @csspart caret - The button's caret icon, an `<wa-icon>` element.
* @csspart caret - The button's caret icon, a `<wa-icon>` element.
* @csspart spinner - The spinner that shows when the button is in the loading state.
*
* @cssproperty --background - The button's background styles.
@@ -313,7 +313,17 @@ export default class WaButton extends WebAwesomeElement implements WebAwesomeFor
<slot part="label" class="button__label"></slot>
<slot name="suffix" part="suffix" class="button__suffix"></slot>
${
this.caret ? html` <wa-icon part="caret" class="button__caret" library="system" name="caret"></wa-icon> ` : ''
this.caret
? html`
<wa-icon
part="caret"
class="button__caret"
library="system"
name="chevron-down"
variant="solid"
></wa-icon>
`
: ''
}
${this.loading ? html`<wa-spinner part="spinner"></wa-spinner>` : ''}
</${tag}>

11
src/components/button/button.styles.ts
View File

@@ -125,7 +125,7 @@ export default css`
--label-color: var(--wa-color-brand-text-on-spot);
}
/*
/*
* Sizes
*/
@@ -298,7 +298,14 @@ export default css`
}
.button--caret .button__caret {
height: auto;
display: flex;
align-self: center;
align-items: center;
}
.button--caret .button__caret::part(svg) {
width: 0.875em;
height: 0.875em;
}
/*

12
src/components/carousel/carousel.component.ts
View File

@@ -453,7 +453,11 @@ export default class WaCarousel extends WebAwesomeElement {
@click=${prevEnabled ? () => this.previous() : null}
>
<slot name="previous-icon">
<wa-icon library="system" name="${isLtr ? 'chevron-left' : 'chevron-right'}"></wa-icon>
<wa-icon
library="system"
variant="solid"
name="${isLtr ? 'chevron-left' : 'chevron-right'}"
></wa-icon>
</slot>
</button>
@@ -470,7 +474,11 @@ export default class WaCarousel extends WebAwesomeElement {
@click=${nextEnabled ? () => this.next() : null}
>
<slot name="next-icon">
<wa-icon library="system" name="${isLtr ? 'chevron-right' : 'chevron-left'}"></wa-icon>
<wa-icon
library="system"
variant="solid"
name="${isLtr ? 'chevron-right' : 'chevron-left'}"
></wa-icon>
</slot>
</button>
</div>

15
src/components/checkbox/checkbox.component.ts
View File

@@ -32,8 +32,8 @@ import type { WebAwesomeFormControl } from '../../internal/webawesome-element.js
* @csspart control - The square container that wraps the checkbox's checked state.
* @csspart control--checked - Matches the control part when the checkbox is checked.
* @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
* @csspart checked-icon - The checked icon, an `<wa-icon>` element.
* @csspart indeterminate-icon - The indeterminate icon, an `<wa-icon>` element.
* @csspart checked-icon - The checked icon, a `<wa-icon>` element.
* @csspart indeterminate-icon - The indeterminate icon, a `<wa-icon>` element.
* @csspart label - The container that wraps the checkbox's label.
*/
export default class WaCheckbox extends WebAwesomeElement implements WebAwesomeFormControl {
@@ -221,7 +221,13 @@ export default class WaCheckbox extends WebAwesomeElement implements WebAwesomeF
>
${this.checked
? html`
<wa-icon part="checked-icon" class="checkbox__checked-icon" library="system" name="check"></wa-icon>
<wa-icon
part="checked-icon"
class="checkbox__checked-icon"
library="system"
name="check"
variant="solid"
></wa-icon>
`
: ''}
${!this.checked && this.indeterminate
@@ -230,7 +236,8 @@ export default class WaCheckbox extends WebAwesomeElement implements WebAwesomeF
part="indeterminate-icon"
class="checkbox__indeterminate-icon"
library="system"
name="indeterminate"
name="minus"
variant="solid"
></wa-icon>
`
: ''}

1
src/components/checkbox/checkbox.styles.ts
View File

@@ -65,6 +65,7 @@ export default css`
display: inline-flex;
width: var(--toggle-size);
height: var(--toggle-size);
scale: 0.75;
}
/* Focus */

3
src/components/color-picker/color-picker.component.ts
View File

@@ -996,7 +996,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
>
<wa-icon
library="system"
name="eyedropper"
name="eye-dropper"
variant="solid"
label=${this.localize.term('selectAColorFromTheScreen')}
></wa-icon>
</wa-button>

8
src/components/copy-button/copy-button.component.ts
View File

@@ -220,13 +220,13 @@ export default class WaCopyButton extends WebAwesomeElement {
@click=${this.handleCopy}
>
<slot part="copy-icon" name="copy-icon">
<wa-icon library="system" name="copy"></wa-icon>
<wa-icon library="system" name="copy" variant="regular"></wa-icon>
</slot>
<slot part="success-icon" name="success-icon" hidden>
<slot part="success-icon" name="success-icon" variant="solid" hidden>
<wa-icon library="system" name="check"></wa-icon>
</slot>
<slot part="error-icon" name="error-icon" hidden>
<wa-icon library="system" name="x-lg"></wa-icon>
<slot part="error-icon" name="error-icon" variant="solid" hidden>
<wa-icon library="system" name="xmark"></wa-icon>
</slot>
</button>
</wa-tooltip>

4
src/components/details/details.component.ts
View File

@@ -214,10 +214,10 @@ export default class WaDetails extends WebAwesomeElement {
<span part="summary-icon" class="details__summary-icon">
<slot name="expand-icon">
<wa-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
<wa-icon library="system" variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
</slot>
<slot name="collapse-icon">
<wa-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
<wa-icon library="system" variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
</slot>
</span>
</summary>

1
src/components/details/details.styles.ts
View File

@@ -60,6 +60,7 @@ export default css`
flex: 0 0 auto;
display: flex;
align-items: center;
color: var(--wa-color-text-quiet);
transition: var(--wa-transition-fast) rotate ease;
}

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

@@ -2,9 +2,9 @@ import '../../../dist/webawesome.js';
// cspell:dictionaries lorem-ipsum
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
import sinon from 'sinon';
import type { WaHideEvent } from '../../events/wa-hide';
import type { WaShowEvent } from '../../events/wa-show';
import type WaDetails from './details';
import type { WaHideEvent } from '../../events/wa-hide.js';
import type { WaShowEvent } from '../../events/wa-show.js';
import type WaDetails from './details.js';
describe('<wa-details>', () => {
describe('accessibility', () => {

9
src/components/dialog/dialog.component.ts
View File

@@ -45,7 +45,7 @@ import type { CSSResultGroup } from 'lit';
* @csspart header - The dialog's header. This element wraps the title and header actions.
* @csspart header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
* @csspart title - The dialog's title.
* @csspart close-button - The close button, an `<wa-icon-button>`.
* @csspart close-button - The close button, a `<wa-icon-button>`.
* @csspart close-button__base - The close button's exported `base` part.
* @csspart body - The dialog's body.
* @csspart footer - The dialog's footer.
@@ -289,9 +289,10 @@ export default class WaDialog extends WebAwesomeElement {
part="close-button"
exportparts="base:close-button__base"
class="dialog__close"
name="x-lg"
name="xmark"
label=${this.localize.term('close')}
library="system"
variant="solid"
@click="${() => this.requestClose('close-button')}"
></wa-icon-button>
</div>
@@ -299,9 +300,9 @@ export default class WaDialog extends WebAwesomeElement {
`
: ''}
${
'' /* The tabindex="-1" is here because the body is technically scrollable if overflowing. However, if there's no focusable elements inside, you won't actually be able to scroll it via keyboard. */
'' /* The tabindex="-1" is here because the body is technically scrollable if overflowing. However, if there's no focusable elements inside, you won't actually be able to scroll it via keyboard. Previously this was just a <slot>, but tabindex="-1" on the slot causes children to not be focusable. https://github.com/shoelace-style/shoelace/issues/1753#issuecomment-1836803277 */
}
<slot part="body" class="dialog__body" tabindex="-1"></slot>
<div part="body" class="dialog__body" tabindex="-1"><slot></slot></div>
<footer part="footer" class="dialog__footer">
<slot name="footer"></slot>

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

@@ -1,10 +1,10 @@
import '../../../dist/webawesome.js';
// cspell:dictionaries lorem-ipsum
import { aTimeout, elementUpdated, expect, fixture, html, waitUntil } from '@open-wc/testing';
import { LitElement } from 'lit';
import { aTimeout, elementUpdated, expect, fixture, waitUntil } from '@open-wc/testing';
import { html, LitElement } from 'lit';
import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon';
import type WaDialog from './dialog';
import type WaDialog from './dialog.js';
describe('<wa-dialog>', () => {
it('should be visible with the open attribute', async () => {

5
src/components/drawer/drawer.component.ts
View File

@@ -46,7 +46,7 @@ import type { CSSResultGroup } from 'lit';
* @csspart header - The drawer's header. This element wraps the title and header actions.
* @csspart header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
* @csspart title - The drawer's title.
* @csspart close-button - The close button, an `<wa-icon-button>`.
* @csspart close-button - The close button, a `<wa-icon-button>`.
* @csspart close-button__base - The close button's exported `base` part.
* @csspart body - The drawer's body.
* @csspart footer - The drawer's footer.
@@ -342,9 +342,10 @@ export default class WaDrawer extends WebAwesomeElement {
part="close-button"
exportparts="base:close-button__base"
class="drawer__close"
name="x-lg"
name="xmark"
label=${this.localize.term('close')}
library="system"
variant="solid"
@click=${() => this.requestClose('close-button')}
></wa-icon-button>
</div>

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

@@ -3,7 +3,7 @@ import '../../../dist/webawesome.js';
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon';
import type WaDrawer from './drawer';
import type WaDrawer from './drawer.js';
describe('<wa-drawer>', () => {
it('should be visible with the open attribute', async () => {

2
src/components/format-bytes/format-bytes.test.ts
View File

@@ -1,6 +1,6 @@
import '../../../dist/webawesome.js';
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
import type WaFormatBytes from './format-bytes';
import type WaFormatBytes from './format-bytes.js';
describe('<wa-format-bytes>', () => {
describe('defaults ', () => {

2
src/components/format-date/format-date.test.ts
View File

@@ -1,7 +1,7 @@
import '../../../dist/webawesome.js';
import { expect, fixture, html } from '@open-wc/testing';
import sinon from 'sinon';
import type WaFormatDate from './format-date';
import type WaFormatDate from './format-date.js';
describe('<wa-format-date>', () => {
describe('defaults ', () => {

2
src/components/format-number/format-number.test.ts
View File

@@ -1,6 +1,6 @@
import '../../../dist/webawesome.js';
import { expect, fixture, html } from '@open-wc/testing';
import type WaFormatNumber from './format-number';
import type WaFormatNumber from './format-number.js';
describe('<wa-format-number>', () => {
describe('defaults ', () => {

14
src/components/icon-button/icon-button.component.ts
View File

@@ -31,6 +31,18 @@ export default class WaIconButton extends WebAwesomeElement {
/** The name of the icon to draw. Available names depend on the icon library being used. */
@property() name?: string;
/**
* The family of icons to choose from. For Font Awesome, valid options include `classic`, `sharp`, `duotone`, and
* `brands`. Custom icon libraries may or may not use this property.
*/
@property({ reflect: true }) 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. Custom icon libraries may or may not use this property.
*/
@property({ reflect: true }) variant: string;
/** The name of a registered custom icon library. */
@property() library?: string;
@@ -120,6 +132,8 @@ export default class WaIconButton extends WebAwesomeElement {
<wa-icon
class="icon-button__icon"
name=${ifDefined(this.name)}
family=${ifDefined(this.family)}
variant=${ifDefined(this.variant)}
library=${ifDefined(this.library)}
src=${ifDefined(this.src)}
aria-hidden="true"

2
src/components/icon-button/icon-button.test.ts
View File

@@ -1,7 +1,7 @@
import '../../../dist/webawesome.js';
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
import sinon from 'sinon';
import type WaIconButton from './icon-button';
import type WaIconButton from './icon-button.js';
type LinkTarget = '_self' | '_blank' | '_parent' | '_top';

14
src/components/icon/icon.component.ts
View File

@@ -79,6 +79,18 @@ export default class WaIcon extends WebAwesomeElement {
/** The name of the icon to draw. Available names depend on the icon library being used. */
@property({ reflect: true }) name?: string;
/**
* The family of icons to choose from. For Font Awesome, valid options include `classic`, `sharp`, `duotone`, and
* `brands`. Custom icon libraries may or may not use this property.
*/
@property({ reflect: true }) 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. Custom icon libraries may or may not use this property.
*/
@property({ reflect: true }) variant: string;
/**
* An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
* can result in XSS attacks.
@@ -113,7 +125,7 @@ export default class WaIcon extends WebAwesomeElement {
const library = getIconLibrary(this.library);
if (this.name && library) {
return {
url: library.resolver(this.name),
url: library.resolver(this.name, this.family, this.variant),
fromLibrary: true
};
}

5
src/components/icon/icon.styles.ts
View File

@@ -6,7 +6,7 @@ export default css`
:host {
display: inline-block;
width: 1em;
width: auto;
height: 1em;
box-sizing: content-box !important;
}
@@ -14,6 +14,7 @@ export default css`
svg {
display: block;
height: 100%;
width: 100%;
width: auto;
fill: currentColor;
}
`;

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

@@ -1,8 +1,8 @@
import { aTimeout, elementUpdated, expect, fixture, html, oneEvent } from '@open-wc/testing';
import { registerIconLibrary } from '../../../dist/webawesome.js';
import type { WaErrorEvent } from '../../events/wa-error';
import type { WaLoadEvent } from '../../events/wa-load';
import type WaIcon from './icon';
import type { WaErrorEvent } from '../../events/wa-error.js';
import type { WaLoadEvent } from '../../events/wa-load.js';
import type WaIcon from './icon.js';
const testLibraryIcons = {
'test-icon1': `

43
src/components/icon/library.default.ts
View File

@@ -1,9 +1,48 @@
import { getBasePath } from '../../utilities/base-path.js';
import { getKitCode } from '../../utilities/base-path.js';
import type { IconLibrary } from './library.js';
function getIconUrl(name: string, family: string, variant: string) {
const kitCode = getKitCode();
const isPro = kitCode.length > 0;
let folder = 'solid';
// Classic
if (family === 'classic') {
if (variant === 'thin') folder = 'thin';
if (variant === 'light') folder = 'light';
if (variant === 'regular') folder = 'regular';
if (variant === 'solid') folder = 'solid';
}
// Sharp
if (family === 'sharp') {
if (variant === 'thin') folder = 'sharp-thin';
if (variant === 'light') folder = 'sharp-light';
if (variant === 'regular') folder = 'sharp-regular';
if (variant === 'solid') folder = 'sharp-solid';
}
// Brands
if (family === 'brands') {
folder = 'brands';
}
// Duotone
if (family === 'duotone') {
folder = 'duotone';
}
// Use the default CDN
return isPro
? `https://ka-p.fontawesome.com/releases/v6.4.0/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
: `https://ka-f.fontawesome.com/releases/v6.4.0/svgs/${folder}/${name}.svg`;
}
const library: IconLibrary = {
name: 'default',
resolver: name => getBasePath(`assets/icons/${name}.svg`)
resolver: (name: string, family = 'classic', variant = 'solid') => {
return getIconUrl(name, family, variant);
}
};
export default library;

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

@@ -1,131 +1,116 @@
import type { IconLibrary } from './library.js';
function dataUri(svg: string) {
return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}
//
// 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.
// configured or if its icons resolve properly. All Web Awesome components must use the system library instead of the
// default library.
//
// All Web Awesome components must use the system library instead of the default library. For visual consistency, system
// icons are a subset of Bootstrap Icons.
//
const icons = {
caret: `
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
`,
check: `
<svg part="checked-icon" class="checkbox__icon" viewBox="0 0 16 16">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<g transform="translate(3.428571, 3.428571)">
<path d="M0,5.71428571 L3.42857143,9.14285714"></path>
<path d="M9.14285714,0 L3.42857143,9.14285714"></path>
</g>
</g>
</g>
</svg>
`,
'chevron-down': `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
`,
'chevron-left': `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
</svg>
`,
'chevron-right': `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
`,
copy: `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2Zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6ZM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2Z"/>
</svg>
`,
eye: `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
</svg>
`,
'eye-slash': `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
</svg>
`,
eyedropper: `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eyedropper" viewBox="0 0 16 16">
<path d="M13.354.646a1.207 1.207 0 0 0-1.708 0L8.5 3.793l-.646-.647a.5.5 0 1 0-.708.708L8.293 5l-7.147 7.146A.5.5 0 0 0 1 12.5v1.793l-.854.853a.5.5 0 1 0 .708.707L1.707 15H3.5a.5.5 0 0 0 .354-.146L11 7.707l1.146 1.147a.5.5 0 0 0 .708-.708l-.647-.646 3.147-3.146a1.207 1.207 0 0 0 0-1.708l-2-2zM2 12.707l7-7L10.293 7l-7 7H2v-1.293z"></path>
</svg>
`,
'grip-vertical': `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grip-vertical" viewBox="0 0 16 16">
<path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
</svg>
`,
indeterminate: `
<svg part="indeterminate-icon" class="checkbox__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>
`,
'person-fill': `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</svg>
`,
'play-fill': `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
<path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path>
</svg>
`,
'pause-fill': `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pause-fill" viewBox="0 0 16 16">
<path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"></path>
</svg>
`,
radio: `
<svg part="checked-icon" class="radio__icon" viewBox="0 0 16 16">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g fill="currentColor">
<circle cx="8" cy="8" r="3.42857143"></circle>
</g>
</g>
</svg>
`,
'star-fill': `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
`,
'x-lg': `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
</svg>
`,
'x-circle-fill': `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
</svg>
`
};
const systemLibrary: IconLibrary = {
name: 'system',
resolver: (name: keyof typeof icons) => {
if (name in icons) {
return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;
resolver: (name: string, family = 'classic', variant = 'solid') => {
//
// Classic + Solid
//
if (family === 'classic' && variant === 'solid') {
switch (name) {
case 'check':
return dataUri(
`<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>`
);
case 'chevron-down':
return dataUri(
`<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>`
);
case 'chevron-left':
return dataUri(
`<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>`
);
case 'chevron-right':
return dataUri(
`<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>`
);
case 'circle':
return dataUri(
`<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>`
);
case 'eye-dropper':
return dataUri(
`<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>`
);
case 'grip-vertical':
return dataUri(
`<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>`
);
case 'minus':
return dataUri(
`<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>`
);
case 'pause':
return dataUri(
`<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>`
);
case 'play':
return dataUri(
`<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>`
);
case 'star':
return dataUri(
`<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>`
);
case 'user':
return dataUri(
`<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>`
);
case 'xmark':
return dataUri(
`<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`
);
}
}
//
// Classic + Regular
//
if (family === 'classic' && variant === 'regular') {
switch (name) {
case 'circle-xmark':
return dataUri(
`<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>`
);
case 'copy':
return dataUri(
`<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>`
);
case 'eye':
return dataUri(
`<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>`
);
case 'eye-slash':
return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>`
);
}
}
return '';
}
};

2
src/components/icon/library.ts
View File

@@ -2,7 +2,7 @@ import defaultLibrary from './library.default.js';
import systemLibrary from './library.system.js';
import type WaIcon from '../icon/icon.js';
export type IconLibraryResolver = (name: string) => string;
export type IconLibraryResolver = (name: string, family: string, variant: string) => string;
export type IconLibraryMutator = (svg: SVGElement) => void;
export interface IconLibrary {
name: string;

2
src/components/image-comparer/image-comparer.component.ts
View File

@@ -143,7 +143,7 @@ export default class WaImageComparer extends WebAwesomeElement {
tabindex="0"
>
<slot name="handle">
<wa-icon library="system" name="grip-vertical"></wa-icon>
<wa-icon library="system" name="grip-vertical" variant="solid"></wa-icon>
</slot>
</div>
</div>

2
src/components/image-comparer/image-comparer.test.ts
View File

@@ -1,7 +1,7 @@
import '../../../dist/webawesome.js';
import { expect, fixture, html } from '@open-wc/testing';
import sinon from 'sinon';
import type WaImageComparer from './image-comparer';
import type WaImageComparer from './image-comparer.js';
describe('<wa-image-comparer>', () => {
it('should render a basic before/after', async () => {

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

@@ -1,7 +1,7 @@
import '../../../dist/webawesome.js';
import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
import sinon from 'sinon';
import type WaInclude from './include';
import type WaInclude from './include.js';
const stubbedFetchResponse: Response = {
headers: new Headers(),

6
src/components/input/input.component.ts
View File

@@ -512,7 +512,7 @@ export default class WaInput extends WebAwesomeElement implements WebAwesomeForm
tabindex="-1"
>
<slot name="clear-icon">
<wa-icon name="x-circle-fill" library="system"></wa-icon>
<wa-icon name="circle-xmark" library="system" variant="regular"></wa-icon>
</slot>
</button>
`
@@ -530,12 +530,12 @@ export default class WaInput extends WebAwesomeElement implements WebAwesomeForm
${this.passwordVisible
? html`
<slot name="show-password-icon">
<wa-icon name="eye-slash" library="system"></wa-icon>
<wa-icon name="eye-slash" library="system" variant="regular"></wa-icon>
</slot>
`
: html`
<slot name="hide-password-icon">
<wa-icon name="eye" library="system"></wa-icon>
<wa-icon name="eye" library="system" variant="regular"></wa-icon>
</slot>
`}
</button>

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

@@ -4,7 +4,7 @@ import { getFormControls, serialize } from '../../../dist/webawesome.js';
import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
import { sendKeys } from '@web/test-runner-commands'; // must come from the same module
import sinon from 'sinon';
import type WaInput from './input';
import type WaInput from './input.js';
describe('<wa-input>', () => {
it('should pass accessibility tests', async () => {

9
src/components/menu-item/menu-item.component.ts
View File

@@ -165,7 +165,7 @@ export default class WaMenuItem extends WebAwesomeElement {
?aria-expanded="${isSubmenuExpanded ? true : false}"
>
<span part="checked-icon" class="menu-item__check">
<wa-icon name="check" library="system" aria-hidden="true"></wa-icon>
<wa-icon name="check" library="system" variant="solid" aria-hidden="true"></wa-icon>
</span>
<slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -175,7 +175,12 @@ export default class WaMenuItem extends WebAwesomeElement {
<slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
<span part="submenu-icon" class="menu-item__chevron">
<wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" aria-hidden="true"></wa-icon>
<wa-icon
name=${isRtl ? 'chevron-left' : 'chevron-right'}
library="system"
variant="solid"
aria-hidden="true"
></wa-icon>
</span>
${this.submenuController.renderSubmenu()}

1
src/components/menu-item/menu-item.styles.ts
View File

@@ -100,6 +100,7 @@ export default css`
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875em;
width: var(--wa-space-xl);
visibility: hidden;
}

4
src/components/menu-item/menu-item.test.ts
View File

@@ -2,8 +2,8 @@ import '../../../dist/webawesome.js';
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon';
import type { WaSelectEvent } from '../../events/wa-select';
import type WaMenuItem from './menu-item';
import type { WaSelectEvent } from '../../events/wa-select.js';
import type WaMenuItem from './menu-item.js';
describe('<wa-menu-item>', () => {
it('should pass accessibility tests', async () => {

2
src/components/menu-label/menu-label.test.ts
View File

@@ -1,6 +1,6 @@
import '../../../dist/webawesome.js';
import { expect, fixture, html } from '@open-wc/testing';
import type WaMenuLabel from './menu-label';
import type WaMenuLabel from './menu-label.js';
describe('<wa-menu-label>', () => {
it('passes accessibility test', async () => {

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

@@ -4,8 +4,8 @@ import { expect, fixture } from '@open-wc/testing';
import { html } from 'lit';
import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon';
import type { WaSelectEvent } from '../../events/wa-select';
import type WaMenu from './menu';
import type { WaSelectEvent } from '../../events/wa-select.js';
import type WaMenu from './menu.js';
describe('<wa-menu>', () => {
it('emits wa-select with the correct event detail when clicking an item', async () => {

11
src/components/option/option.component.ts
View File

@@ -20,7 +20,7 @@ import type { CSSResultGroup } from 'lit';
* @slot prefix - Used to prepend an icon or similar element to the menu item.
* @slot suffix - Used to append an icon or similar element to the menu item.
*
* @csspart checked-icon - The checked icon, an `<wa-icon>` element.
* @csspart checked-icon - The checked icon, a `<wa-icon>` element.
* @csspart base - The component's base wrapper.
* @csspart label - The option's label.
* @csspart prefix - The container that wraps the prefix.
@@ -123,7 +123,14 @@ export default class WaOption extends WebAwesomeElement {
@mouseenter=${this.handleMouseEnter}
@mouseleave=${this.handleMouseLeave}
>
<wa-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></wa-icon>
<wa-icon
part="checked-icon"
class="option__check"
name="check"
library="system"
variant="solid"
aria-hidden="true"
></wa-icon>
<slot part="prefix" name="prefix" class="option__prefix"></slot>
<slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
<slot part="suffix" name="suffix" class="option__suffix"></slot>

5
src/components/option/option.styles.ts
View File

@@ -20,7 +20,7 @@ export default css`
align-items: center;
font: inherit;
color: var(--wa-color-neutral-text-on-surface);
padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-xs);
padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-2xs);
transition: var(--wa-transition-fast) fill;
cursor: pointer;
}
@@ -54,8 +54,9 @@ export default css`
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875em;
visibility: hidden;
padding-inline-end: var(--wa-space-2xs);
width: var(--wa-space-xl);
}
.option--selected .option__check {

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

@@ -1,7 +1,7 @@
import '../../../dist/webawesome.js';
import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
import sinon from 'sinon';
import type WaOption from './option';
import type WaOption from './option.js';
describe('<wa-option>', () => {
it('passes accessibility test', async () => {

2
src/components/progress-bar/progress-bar.styles.ts
View File

@@ -5,7 +5,7 @@ export default css`
${componentStyles}
:host {
--height: 1rem;
--height: 1.25rem;
--track-color: var(--wa-color-neutral-fill-highlight);
--indicator-color: var(--wa-color-brand-spot);
--label-color: var(--wa-color-brand-text-on-spot);

2
src/components/progress-bar/progress-bar.test.ts
View File

@@ -1,6 +1,6 @@
import '../../../dist/webawesome.js';
import { expect, fixture, html } from '@open-wc/testing';
import type WaProgressBar from './progress-bar';
import type WaProgressBar from './progress-bar.js';
describe('<wa-progress-bar>', () => {
let el: WaProgressBar;

2
src/components/progress-ring/progress-ring.test.ts
View File

@@ -1,6 +1,6 @@
import '../../../dist/webawesome.js';
import { expect, fixture, html } from '@open-wc/testing';
import type WaProgressRing from './progress-ring';
import type WaProgressRing from './progress-ring.js';
describe('<wa-progress-ring>', () => {
let el: WaProgressRing;

2
src/components/qr-code/qr-code.component.ts
View File

@@ -51,7 +51,7 @@ export default class WaQrCode extends WebAwesomeElement {
return;
}
QrCreator.render(
(QrCreator as unknown as typeof QrCreator.default).render(
{
text: this.value,
radius: this.radius,

2
src/components/qr-code/qr-code.test.ts
View File

@@ -1,6 +1,6 @@
import '../../../dist/webawesome.js';
import { expect, fixture, html } from '@open-wc/testing';
import type WaQrCode from './qr-code';
import type WaQrCode from './qr-code.js';
const getCanvas = (qrCode: WaQrCode): HTMLCanvasElement => {
const possibleCanvas = qrCode.shadowRoot?.querySelector<HTMLCanvasElement>('.qr-code');

4
src/components/radio-button/radio-button.test.ts
View File

@@ -1,7 +1,7 @@
import '../../../dist/webawesome.js';
import { expect, fixture, html } from '@open-wc/testing';
import type WaRadioButton from './radio-button';
import type WaRadioGroup from '../radio-group/radio-group';
import type WaRadioButton from './radio-button.js';
import type WaRadioGroup from '../radio-group/radio-group.js';
describe('<wa-radio-button>', () => {
it('should not get checked when disabled', async () => {

Some files were not shown because too many files have changed in this diff Show More