diff --git a/.github/SECURITY.md b/.github/SECURITY.md
index 564538742..3e8f91ebb 100644
--- a/.github/SECURITY.md
+++ b/.github/SECURITY.md
@@ -1,7 +1,7 @@
# Reporting Security Issues
-We take security issues in Shoelace very seriously and appreciate your efforts to disclose your findings responsibly.
+We take security issues in Web Awesome very seriously and appreciate your efforts to disclose your findings responsibly.
-To report a security issue, email [cory@abeautifulsite.net](mailto:cory@abeautifulsite.net) and include "SHOELACE SECURITY" in the subject line.
+To report a security issue, email [cory@fontawesome.com](mailto:cory@abeautifulsite.net) and include "WEB AWESOME SECURITY" in the subject line.
We'll respond as soon as possible and keep you updated throughout the process.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index c1c554ca6..eb0332d1a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,4 +1,4 @@
-# Contributing to Shoelace
+# Contributing to Web Awesome
Before contributing, please review the contributions guidelines at:
diff --git a/README.md b/README.md
index ef7dcf34f..6d142e026 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Shoelace
+# Web Awesome
A forward-thinking library of web components.
@@ -23,13 +23,13 @@ Twitter: [@shoelace_style](https://twitter.com/shoelace_style)
## Shoemakers 🥾
-Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 14.17 to build and run the project locally.
+Shoemakers, or "Web Awesome developers," can use this documentation to learn how to build Web Awesome from source. You will need Node >= 14.17 to build and run the project locally.
-**You don't need to do any of this to use Shoelace!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Shoelace.
+**You don't need to do any of this to use Web Awesome!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Web Awesome.
If that's not what you're trying to do, the [documentation website](https://shoelace.style) is where you want to be.
-### What are you using to build Shoelace?
+### What are you using to build Web Awesome?
Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).
@@ -38,8 +38,8 @@ Components are built with [LitElement](https://lit-element.polymer-project.org/)
Start by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies.
```bash
-git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
-cd shoelace
+git clone https://github.com/YOUR_GITHUB_USERNAME/webawesome
+cd webawesome
npm install
```
@@ -63,18 +63,18 @@ npm run build
### Creating New Components
-To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name.
+To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
```bash
-npm run create sl-tag-name
+npm run create wa-tag-name
```
This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
### Contributing
-Shoelace is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
+Web Awesome is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
## License
-Shoelace is available under the terms of the MIT license.
+Web Awesome is available under the terms of the MIT license.
diff --git a/cspell.json b/cspell.json
index 5604aab40..2172b208f 100644
--- a/cspell.json
+++ b/cspell.json
@@ -166,6 +166,7 @@
"valpha",
"valuenow",
"valuetext",
+ "webawesome",
"WEBP",
"Webpacker",
"wordmark"
diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js
index 453627028..a9282a5ef 100644
--- a/custom-elements-manifest.config.js
+++ b/custom-elements-manifest.config.js
@@ -33,14 +33,14 @@ export default {
plugins: [
// Append package data
{
- name: 'shoelace-package-data',
+ name: 'wa-package-data',
packageLinkPhase({ customElementsManifest }) {
customElementsManifest.package = { name, description, version, author, homepage, license };
}
},
// Infer tag names because we no longer use @customElement decorators.
{
- name: 'shoelace-infer-tag-names',
+ name: 'wa-infer-tag-names',
analyzePhase({ ts, node, moduleDoc }) {
switch (node.kind) {
case ts.SyntaxKind.ClassDeclaration: {
@@ -68,7 +68,7 @@ export default {
},
// Parse custom jsDoc tags
{
- name: 'shoelace-custom-tags',
+ name: 'wa-custom-tags',
analyzePhase({ ts, node, moduleDoc }) {
switch (node.kind) {
case ts.SyntaxKind.ClassDeclaration: {
@@ -138,7 +138,7 @@ export default {
}
},
{
- name: 'shoelace-react-event-names',
+ name: 'wa-react-event-names',
analyzePhase({ ts, node, moduleDoc }) {
switch (node.kind) {
case ts.SyntaxKind.ClassDeclaration: {
@@ -156,7 +156,7 @@ export default {
}
},
{
- name: 'shoelace-translate-module-paths',
+ name: 'wa-translate-module-paths',
packageLinkPhase({ customElementsManifest }) {
customElementsManifest?.modules?.forEach(mod => {
//
diff --git a/docs/_includes/component.njk b/docs/_includes/component.njk
index 249f9b77e..d2153d54a 100644
--- a/docs/_includes/component.njk
+++ b/docs/_includes/component.njk
@@ -1,7 +1,7 @@
{% extends "default.njk" %}
{# Find the component based on the `tag` front matter #}
-{% set component = getComponent('sl-' + page.fileSlug) %}
+{% set component = getComponent('wa-' + page.fileSlug) %}
{% block content %}
{# Determine the badge variant #}
@@ -26,12 +26,12 @@
-
+
Since {{component.since or '?' }}
-
-
+
+
{{ component.status }}
-
+
@@ -51,42 +51,42 @@
any of the following snippets to cherry pick this component.
-
- Script
- Import
- Bundler
- React
+
+ Script
+ Import
+ Bundler
+ React
-
+
To import this component from the CDN
using a script tag:
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 543f155d7..c1ccdc61f 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -1094,15 +1094,15 @@ html.sidebar-open #menu-toggle {
flex: 1 1 auto;
}
-.repo-button--github sl-icon {
+.repo-button--github wa-icon {
color: var(--wa-color-white);
}
-.repo-button--star sl-icon {
+.repo-button--star wa-icon {
color: var(--wa-color-yellow-80);
}
-.repo-button--twitter sl-icon {
+.repo-button--twitter wa-icon {
color: var(--wa-color-blue-70);
}
diff --git a/docs/assets/styles/search.css b/docs/assets/styles/search.css
index 5c6aa4f07..512065838 100644
--- a/docs/assets/styles/search.css
+++ b/docs/assets/styles/search.css
@@ -147,7 +147,7 @@ body.search-visible {
align-items: center;
}
-.search__input-wrapper sl-icon {
+.search__input-wrapper wa-icon {
width: 1.5rem;
height: 1.5rem;
flex: 0 0 auto;
@@ -169,7 +169,7 @@ body.search-visible {
display: none;
}
-.search__clear-button:active sl-icon {
+.search__clear-button:active wa-icon {
color: var(--docs-search-icon-color-active);
}
@@ -273,7 +273,7 @@ body.search-visible {
color: var(--docs-search-text-color-muted);
}
-.search__result-icon sl-icon {
+.search__result-icon wa-icon {
font-size: 1.5rem;
}
diff --git a/docs/eleventy.config.cjs b/docs/eleventy.config.cjs
index 2377943fe..3c93aa502 100644
--- a/docs/eleventy.config.cjs
+++ b/docs/eleventy.config.cjs
@@ -5,7 +5,7 @@ const lunr = require('lunr');
const { capitalCase } = require('change-case');
const { JSDOM } = require('jsdom');
const { customElementsManifest, getAllComponents } = require('./_utilities/cem.cjs');
-const shoelaceFlavoredMarkdown = require('./_utilities/markdown.cjs');
+const webAwesomeFlavoredMarkdown = require('./_utilities/markdown.cjs');
const activeLinks = require('./_utilities/active-links.cjs');
const anchorHeadings = require('./_utilities/anchor-headings.cjs');
const codePreviews = require('./_utilities/code-previews.cjs');
@@ -32,7 +32,7 @@ module.exports = function (eleventyConfig) {
eleventyConfig.addGlobalData('layout', 'default'); // make 'default' the default layout
eleventyConfig.addGlobalData('toc', true); // enable the table of contents
eleventyConfig.addGlobalData('meta', {
- title: 'Shoelace',
+ title: 'Web Awesome',
description: 'A forward-thinking library of web components.',
image: 'images/og-image.png',
version: customElementsManifest.package.version,
@@ -74,7 +74,7 @@ module.exports = function (eleventyConfig) {
if (!component) {
throw new Error(
`Unable to find a component called "${tagName}". Make sure the file name is the same as the component's tag ` +
- `name (minus the sl- prefix).`
+ `name (minus the wa- prefix).`
);
}
return component;
@@ -83,27 +83,27 @@ module.exports = function (eleventyConfig) {
//
// Custom markdown syntaxes
//
- eleventyConfig.setLibrary('md', shoelaceFlavoredMarkdown);
+ eleventyConfig.setLibrary('md', webAwesomeFlavoredMarkdown);
//
// Filters
//
eleventyConfig.addFilter('markdown', content => {
- return shoelaceFlavoredMarkdown.render(content);
+ return webAwesomeFlavoredMarkdown.render(content);
});
eleventyConfig.addFilter('markdownInline', content => {
- return shoelaceFlavoredMarkdown.renderInline(content);
+ return webAwesomeFlavoredMarkdown.renderInline(content);
});
eleventyConfig.addFilter('classNameToComponentName', className => {
- let name = capitalCase(className.replace(/^Sl/, ''));
+ let name = capitalCase(className.replace(/^Wa/, ''));
if (name === 'Qr Code') name = 'QR Code'; // manual override
return name;
});
- eleventyConfig.addFilter('removeSlPrefix', tagName => {
- return tagName.replace(/^sl-/, '');
+ eleventyConfig.addFilter('removeWaPrefix', tagName => {
+ return tagName.replace(/^wa-/, '');
});
//
diff --git a/docs/pages/components/alert.md b/docs/pages/components/alert.md
index 63a25ae5e..58aad6011 100644
--- a/docs/pages/components/alert.md
+++ b/docs/pages/components/alert.md
@@ -6,21 +6,21 @@ layout: component
---
```html:preview
-
-
+
+
This is a standard alert. You can customize its content and even the icon.
-
+
```
```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaAlert from '@shoelace-style/shoelace/dist/react/alert';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
-
-
+
+
This is a standard alert. You can customize its content and even the icon.
-
+
);
```
@@ -35,93 +35,93 @@ Alerts will not be visible if the `open` attribute is not present.
Set the `variant` attribute to change the alert's variant.
```html:preview
-
-
+
+ This is super informative
You can tell by how pretty the alert is.
-
+
-
-
+
+ Your changes have been saved
You can safely exit the app now.
-
+
-
-
+
+ Your settings have been updated
Settings will take affect on next login.
-
+
-
-
+
+ Your session has ended
Please login again to continue.
-
+
-
-
+
+ Your account has been deleted
We're very sorry to see you go!
-
+
```
```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaAlert from '@shoelace-style/shoelace/dist/react/alert';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<>
-
-
+
+ This is super informative
You can tell by how pretty the alert is.
-
+
-
-
+
+ Your changes have been saved
You can safely exit the app now.
-
+
-
-
+
+ Your settings have been updated
Settings will take affect on next login.
-
+
-
-
+
+ Your session has ended
Please login again to continue.
-
+
-
-
+
+ Your account has been deleted
We're very sorry to see you go!
-
+
>
);
```
@@ -131,14 +131,14 @@ const App = () => (
Add the `closable` attribute to show a close button that will hide the alert.
```html:preview
-
-
+
+
You can close this alert any time!
-
+
@@ -146,8 +146,8 @@ Add the `closable` attribute to show a close button that will hide the alert.
```jsx:react
import { useState } from 'react';
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaAlert from '@shoelace-style/shoelace/dist/react/alert';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => {
const [open, setOpen] = useState(true);
@@ -158,10 +158,10 @@ const App = () => {
}
return (
-
-
+
+
You can close this alert any time!
-
+
);
};
```
@@ -171,16 +171,16 @@ const App = () => {
Icons are optional. Simply omit the `icon` slot if you don't want them.
```html:preview
- Nothing fancy here, just a simple alert.
+ Nothing fancy here, just a simple alert.
```
```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import WaAlert from '@shoelace-style/shoelace/dist/react/alert';
const App = () => (
-
+
Nothing fancy here, just a simple alert.
-
+
);
```
@@ -190,24 +190,24 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
```html:preview
- Show Alert
+ Show Alert
-
-
+
+
This alert will automatically hide itself after three seconds, unless you interact with it.
-
+
@@ -215,12 +215,12 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
```jsx:react
import { useState } from 'react';
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaAlert from '@shoelace-style/shoelace/dist/react/alert';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const css = `
- .alert-duration sl-alert {
+ .alert-duration wa-alert {
margin-top: var(--wa-space-m);
}
`;
@@ -231,14 +231,14 @@ const App = () => {
return (
<>
- setOpen(true)}>
+ setOpen(true)}>
Show Alert
-
+
- setOpen(false)}>
-
+ setOpen(false)}>
+
This alert will automatically hide itself after three seconds, unless you interact with it.
-
+
@@ -255,49 +255,49 @@ You should always use the `closable` attribute so users can dismiss the notifica
```html:preview
- Brand
- Success
- Neutral
- Warning
- Danger
+ Brand
+ Success
+ Neutral
+ Warning
+ Danger
-
-
+
+ This is super informative
You can tell by how pretty the alert is.
-
+
-
-
+
+ Your changes have been saved
You can safely exit the app now.
-
+
-
-
+
+ Your settings have been updated
Settings will take affect on next login.
-
+
-
-
+
+ Your session has ended
Please login again to continue.
-
+
-
-
+
+ Your account has been deleted
We're very sorry to see you go!
-
+
@@ -140,12 +140,12 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
```html:preview
-
+
@@ -459,54 +459,54 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s
```jsx:react
import { useState } from 'react';
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
const App = () => {
const [isEnabled, setIsEnabled] = useState(false);
return (
<>
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
+
- setIsEnabled(!isEnabled)}>
+ setIsEnabled(!isEnabled)}>
Enable mouse dragging
-
+
>
);
};
@@ -517,31 +517,31 @@ const App = () => {
The `slides-per-page` attribute makes it possible to display multiple slides at a time. You can also use the `slides-per-move` attribute to advance more than once slide at a time, if desired.
```html:preview
-
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
-
+
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+ Slide 5
+ Slide 6
+
```
{% raw %}
```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
const App = () => (
-
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
-
+
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+ Slide 5
+ Slide 6
+
);
```
@@ -552,15 +552,15 @@ const App = () => (
The content of the carousel can be changed by adding or removing carousel items. The carousel will update itself automatically.
```html:preview
-
- Slide 1
- Slide 2
- Slide 3
-
+
+ Slide 1
+ Slide 2
+ Slide 3
+
@@ -687,38 +687,38 @@ const App = () => {
Setting the `orientation` attribute to `vertical` will render the carousel in a vertical layout. If the content of your slides vary in height, you will need to set amn explicit `height` or `max-height` on the carousel using CSS.
```html:preview
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
>
);
@@ -806,53 +806,53 @@ const App = () => (
Use the `--aspect-ratio` custom property to customize the size of the carousel's viewport.
```html:preview
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
+
-
- 1/1
- 3/2
- 16/9
-
+
+ 1/1
+ 3/2
+ 16/9
+
diff --git a/docs/pages/components/dialog.md b/docs/pages/components/dialog.md
index fafc53627..9b1db6cf8 100644
--- a/docs/pages/components/dialog.md
+++ b/docs/pages/components/dialog.md
@@ -8,17 +8,17 @@ layout: component
```html:preview
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Close
-
+ Close
+
-Open Dialog
+Open Dialog
```
@@ -24,24 +24,24 @@ layout: component
```jsx:react
import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';
const App = () => {
const [value, setValue] = useState(1000);
return (
<>
- The file is in size.
+ The file is in size.
- setValue(event.target.value)}
+ onWaInput={event => setValue(event.target.value)}
/>
>
);
@@ -57,24 +57,24 @@ const App = () => {
Set the `value` attribute to a number to get the value in bytes.
```html:preview
-
-
-
-
+
+
+
+
```
```jsx:react
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
const App = () => (
<>
-
+
-
+
-
+
-
+
>
);
```
@@ -84,24 +84,24 @@ const App = () => (
To get the value in bits, set the `unit` attribute to `bit`.
```html:preview
-
-
-
-
+
+
+
+
```
```jsx:react
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
const App = () => (
<>
-
+
-
+
-
+
-
+
>
);
```
@@ -111,24 +111,24 @@ const App = () => (
Use the `lang` attribute to set the number formatting locale.
```html:preview
-
-
-
-
+
+
+
+
```
```jsx:react
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
const App = () => (
<>
-
+
-
+
-
+
-
+
>
);
```
diff --git a/docs/pages/components/format-date.md b/docs/pages/components/format-date.md
index 10e39a820..fa701de87 100644
--- a/docs/pages/components/format-date.md
+++ b/docs/pages/components/format-date.md
@@ -8,14 +8,14 @@ layout: component
Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). No language packs are required.
```html:preview
-
-
+
+
```
```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
-const App = () => ;
+const App = () => ;
```
The `date` attribute determines the date/time to use when formatting. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. If omitted, the current date/time will be assumed.
@@ -32,51 +32,51 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h
```html:preview
-
+
-
+
-
+
-
+
-
+
-
+
```
```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
const App = () => (
<>
{/* Human-readable date */}
-
+
{/* Time */}
-
+
{/* Weekday */}
-
+
{/* Month */}
-
+
{/* Year */}
-
+
{/* No formatting options */}
-
+
>
);
```
@@ -86,18 +86,18 @@ const App = () => (
By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hour-format` attribute to `12` or `24`.
```html:preview
-
-
+
+
```
```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
const App = () => (
<>
-
+
-
+
>
);
```
@@ -107,21 +107,21 @@ const App = () => (
Use the `lang` attribute to set the date/time formatting locale.
```html:preview
-English:
-French:
-Russian:
+English:
+French:
+Russian:
```
```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
const App = () => (
<>
- English:
+ English:
- French:
+ French:
- Russian:
+ Russian:
>
);
```
diff --git a/docs/pages/components/format-number.md b/docs/pages/components/format-number.md
index d54187db1..570c003f4 100644
--- a/docs/pages/components/format-number.md
+++ b/docs/pages/components/format-number.md
@@ -9,17 +9,17 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
```html:preview
-
+
-
+
```
@@ -27,23 +27,23 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
```jsx:react
import { useState } from 'react';
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';
const App = () => {
const [value, setValue] = useState(1000);
return (
<>
-
+
- setValue(event.target.value)}
+ onWaInput={event => setValue(event.target.value)}
/>
>
);
@@ -59,27 +59,27 @@ const App = () => {
To get the value as a percent, set the `type` attribute to `percent`.
```html:preview
-
-
-
-
-
+
+
+
+
+
```
```jsx:react
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
const App = () => (
<>
-
+
-
+
-
+
-
+
-
+
>
);
```
@@ -89,21 +89,21 @@ const App = () => (
Use the `lang` attribute to set the number formatting locale.
```html:preview
-English:
-German:
-Russian:
+English:
+German:
+Russian:
```
```jsx:react
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
const App = () => (
<>
- English:
+ English:
- German:
+ German:
- Russian:
+ Russian:
>
);
```
@@ -113,27 +113,27 @@ const App = () => (
To format a number as a monetary value, set the `type` attribute to `currency` and set the `currency` attribute to the desired ISO 4217 currency code. You should also specify `lang` to ensure the the number is formatted correctly for the target locale.
```html:preview
-
-
-
-
-
+
+
+
+
+
```
```jsx:react
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
const App = () => (
<>
-
+
-
+
-
+
-
+
-
+
>
);
```
diff --git a/docs/pages/components/icon-button.md b/docs/pages/components/icon-button.md
index 2606e1d77..d778736e8 100644
--- a/docs/pages/components/icon-button.md
+++ b/docs/pages/components/icon-button.md
@@ -5,16 +5,16 @@ meta:
layout: component
---
-For a full list of icons that come bundled with Shoelace, refer to the [icon component](/components/icon).
+For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/components/icon).
```html:preview
-
+
```
```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-const App = () => ;
+const App = () => ;
```
## Examples
@@ -24,21 +24,21 @@ const App = () => ;
Icon buttons inherit their parent element's `font-size`.
```html:preview
-
-
-
+
+
+
```
{% raw %}
```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
const App = () => (
<>
-
-
-
+
+
+
>
);
```
@@ -51,41 +51,41 @@ Icon buttons are designed to have a uniform appearance, so their color is not in
```html:preview
@@ -108,13 +108,13 @@ const App = () => (
Use the `href` attribute to convert the button to a link.
```html:preview
-
+
```
```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-const App = () => ;
+const App = () => ;
```
### Icon Button with Tooltip
@@ -122,19 +122,19 @@ const App = () =>
-
-
+
+
+
```
```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
const App = () => (
-
-
-
+
+
+
);
```
@@ -143,11 +143,11 @@ const App = () => (
Use the `disabled` attribute to disable the icon button.
```html:preview
-
+
```
```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-const App = () => ;
+const App = () => ;
```
diff --git a/docs/pages/components/icon.md b/docs/pages/components/icon.md
index f8a5e240a..924f5924b 100644
--- a/docs/pages/components/icon.md
+++ b/docs/pages/components/icon.md
@@ -5,10 +5,10 @@ meta:
layout: component
---
-Shoelace comes bundled with over 1,500 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These icons are part of the `default` icon library. If you prefer, you can register [custom icon libraries](#icon-libraries) as well.
+Web Awesome comes bundled with over 1,500 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These icons are part of the `default` icon library. If you prefer, you can register [custom icon libraries](#icon-libraries) as well.
:::tip
-Depending on how you're loading Shoelace, you may need to copy icon assets and/or [set the base path](/getting-started/installation/#setting-the-base-path) so Shoelace knows where to load them from. Otherwise, icons may not appear and you'll see 404 Not Found errors in the dev console.
+Depending on how you're loading Web Awesome, you may need to copy icon assets and/or [set the base path](/getting-started/installation/#setting-the-base-path) so Web Awesome knows where to load them from. Otherwise, icons may not appear and you'll see 404 Not Found errors in the dev console.
:::
## Default Icons
@@ -16,19 +16,19 @@ Depending on how you're loading Shoelace, you may need to copy icon assets and/o
All available icons in the `default` icon library are shown below. Click or tap on any icon to copy its name, then you can use it in your HTML like this.
```html
-
+
```
@@ -38,65 +38,65 @@ All available icons in the `default` icon library are shown below. Click or tap
### Colors
-Icons inherit their color from the current text color. Thus, you can set the `color` property on the `` element or an ancestor to change the color.
+Icons inherit their color from the current text color. Thus, you can set the `color` property on the `` element or an ancestor to change the color.
```html:preview
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
```
{% raw %}
```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<>
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
>
);
@@ -110,48 +110,48 @@ Icons are sized relative to the current font size. To change their size, set the
```html:preview
);
```
@@ -163,13 +163,13 @@ const App = () => (
For non-decorative icons, use the `label` attribute to announce it to assistive devices.
```html:preview
-
+
```
```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-const App = () => ;
+const App = () => ;
```
### Custom Icons
@@ -177,24 +177,24 @@ const App = () => ;
Custom icons can be loaded individually with the `src` attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a [custom icon library](#icon-libraries).
```html:preview
-
+
```
{% raw %}
```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-const App = () => ;
+const App = () => ;
```
{% endraw %}
## Icon Libraries
-You can register additional icons to use with the `` component through icon libraries. Icon files can exist locally or on a CORS-enabled endpoint (e.g. a CDN). There is no limit to how many icon libraries you can register and there is no cost associated with registering them, as individual icons are only requested when they're used.
+You can register additional icons to use with the `` component through icon libraries. Icon files can exist locally or on a CORS-enabled endpoint (e.g. a CDN). There is no limit to how many icon libraries you can register and there is no cost associated with registering them, as individual icons are only requested when they're used.
-Shoelace ships with two built-in icon libraries, `default` and `system`. The [default icon library](#customizing-the-default-library) contains all of the icons in the Bootstrap Icons project. The [system icon library](#customizing-the-system-library) contains only a small subset of icons that are used internally by Shoelace components.
+Web Awesome ships with two built-in icon libraries, `default` and `system`. The [default icon library](#customizing-the-default-library) contains all of the icons in the Bootstrap Icons project. The [system icon library](#customizing-the-system-library) contains only a small subset of icons that are used internally by Web Awesome components.
To register an additional icon library, use the `registerIconLibrary()` function that's exported from `utilities/icon-library.js`. At a minimum, you must provide a name and a resolver function. The resolver function translates an icon name to a URL where the corresponding SVG file exists. Refer to the examples below to better understand how it works.
@@ -213,11 +213,11 @@ Here's an example that registers an icon library located in the `/assets/icons`
```
-To display an icon, set the `library` and `name` attributes of an `` element.
+To display an icon, set the `library` and `name` attributes of an `` element.
```html
-
+
```
If an icon is used before registration occurs, it will be empty initially but shown when registered.
@@ -246,26 +246,26 @@ Icons in this library are licensed under the [Creative Commons 4.0 License](http
```
@@ -532,19 +532,19 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
```
@@ -564,19 +564,19 @@ Icons in this library are licensed under the [MIT License](https://github.com/ta
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
```
@@ -602,25 +602,25 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
```
### Customizing the Default Library
-The default icon library contains over 1,300 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These are the icons that display when you use `` without the `library` attribute. If you prefer to have these icons resolve elsewhere or to a different icon library, register an icon library using the `default` name and a custom resolver.
+The default icon library contains over 1,300 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These are the icons that display when you use `` without the `library` attribute. If you prefer to have these icons resolve elsewhere or to a different icon library, register an icon library using the `default` name and a custom resolver.
This example will load the same set of icons from the jsDelivr CDN instead of your local assets folder.
@@ -641,11 +641,11 @@ To improve performance you can use a SVG sprites to avoid multiple trips for eac
As always, make sure to benchmark these changes. When using HTTP/2, it may in fact be more bandwidth-friendly to use multiple small requests instead of 1 large sprite sheet.
:::danger
-When using sprite sheets, the `sl-load` and `sl-error` events will not fire.
+When using sprite sheets, the `wa-load` and `wa-error` events will not fire.
:::
:::danger
-For security reasons, browsers may apply the same-origin policy on `