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' of https://github.com/shoelace-style/webawesome into next

Browse Source
This commit is contained in:
Cory LaViska
2024-06-20 12:00:29 -04:00
parent 89c3651580 df7da2e5ef
commit 2544f2e163
80 changed files with 104 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_layouts/component.njk
View File

@@ -19,7 +19,7 @@
</wa-badge>
</div>
<p class="component-summary">
{{ component.summary }}
{{ component.summary | inlineMarkdown | safe }}
</p>
{% endblock %}

14
docs/assets/styles/docs.css
View File

@@ -105,10 +105,6 @@ wa-page[view='desktop'] > #sidebar {
max-height: 100%;
}
wa-page[view='desktop'] > #outline {
max-width: 240px;
}
#sidebar,
#outline {
h2 {
@@ -165,10 +161,18 @@ wa-page::part(menu) {
/* Main content */
wa-page > main {
max-width: 80ch;
padding: 2rem;
padding: var(--wa-space-xl);
margin-inline: auto;
}
wa-page[view='desktop'] > main {
padding: var(--wa-space-3xl);
}
.component-info {
margin-block-end: var(--wa-flow-spacing);
}
/* Current link */
#sidebar,
#outline {

6
docs/assets/styles/outline.css
View File

@@ -1,6 +1,5 @@
#outline {
order: 2;
padding-inline-end: 2rem;
margin-block: 2rem;
}
@@ -12,6 +11,9 @@
#outline > nav {
position: sticky;
top: calc(var(--docs-header-height) + 3.5rem);
padding-inline-end: 2rem;
max-width: 240px;
min-width: 240px;
}
#outline-expandable {
@@ -28,7 +30,7 @@
margin-inline-start: 1rem;
}
@media screen and (max-width: 1299px) {
@media screen and (max-width: 1199px) {
#outline {
padding-block: 0.25rem;
margin-block-end: -1rem;

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

@@ -16,5 +16,5 @@ layout: component
```
:::info
Additional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb).
Additional demonstrations can be found in the [breadcrumb examples](/docs/components/breadcrumb).
:::

2
docs/docs/components/button-group.md
View File

@@ -135,7 +135,7 @@ Dropdowns can be placed inside button groups as long as the trigger is an `<wa-b
### Split Buttons
Create a split button using a button and a dropdown. Use a [visually hidden](/components/visually-hidden) label to ensure the dropdown is accessible to users with assistive devices.
Create a split button using a button and a dropdown. Use a [visually hidden](/docs/components/visually-hidden) label to ensure the dropdown is accessible to users with assistive devices.
```html {.example}
<wa-button-group label="Example Button Group">

2
docs/docs/components/carousel-item.md
View File

@@ -40,5 +40,5 @@ layout: component
```
:::info
Additional demonstrations can be found in the [carousel examples](/components/carousel).
Additional demonstrations can be found in the [carousel examples](/docs/components/carousel).
:::

2
docs/docs/components/copy-button.md
View File

@@ -25,7 +25,7 @@ Copy Buttons display feedback in a tooltip. You can customize the labels using t
### Custom Icons
Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the icons that get displayed for each state. You can use [`<wa-icon>`](/components/icon) or your own images.
Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the icons that get displayed for each state. You can use [`<wa-icon>`](/docs/components/icon) or your own images.
```html {.example}
<wa-copy-button value="Copied from a custom button">

2
docs/docs/components/dialog.md
View File

@@ -127,7 +127,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
### Header Actions
The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed.
The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/docs/components/icon-button) if needed.
```html {.example}
<wa-dialog label="Dialog" with-header with-footer class="dialog-header-actions">

2
docs/docs/components/divider.md
View File

@@ -54,7 +54,7 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The
### Menu Dividers
Use dividers in [menus](/components/menu) to visually group menu items.
Use dividers in [menus](/docs/components/menu) to visually group menu items.
```html {.example}
<wa-menu style="max-width: 200px;">

2
docs/docs/components/drawer.md
View File

@@ -187,7 +187,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
### Header Actions
The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed.
The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/docs/components/icon-button) if needed.
```html {.example}
<wa-drawer label="Drawer" with-header with-footer class="drawer-header-actions">

6
docs/docs/components/dropdown.md
View File

@@ -6,7 +6,7 @@ layout: component
Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.
Dropdowns are designed to work well with [menus](/components/menu) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/components/color-picker)). The API gives you complete control over showing, hiding, and positioning the panel.
Dropdowns are designed to work well with [menus](/docs/components/menu) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/docs/components/color-picker)). The API gives you complete control over showing, hiding, and positioning the panel.
```html {.example}
<wa-dropdown>
@@ -35,7 +35,7 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a
### Getting the Selected Item
When dropdowns are used with [menus](/components/menu), you can listen for the [`wa-select`](/components/menu#events) event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands.
When dropdowns are used with [menus](/docs/components/menu), you can listen for the [`wa-select`](/docs/components/menu#events) event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands.
```html {.example}
<div class="dropdown-selection">
@@ -142,7 +142,7 @@ The offset of the panel along the trigger can be customized using the `skidding`
### Submenus
To create a submenu, nest an `<wa-menu slot="submenu">` element in a [menu item](/components/menu-item).
To create a submenu, nest an `<wa-menu slot="submenu">` element in a [menu item](/docs/components/menu-item).
```html {.example}
<wa-dropdown>

2
docs/docs/components/icon-button.md
View File

@@ -4,7 +4,7 @@ description: Icons buttons are simple, icon-only buttons that can be used for ac
layout: component
---
For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/components/icon).
For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/docs/components/icon).
```html {.example}
<wa-icon-button name="gear" label="Settings"></wa-icon-button>

6
docs/docs/components/menu.md
View File

@@ -4,7 +4,7 @@ description: Menus provide a list of options for the user to choose from.
layout: component
---
You can use [menu items](/components/menu-item), [menu labels](/components/menu-label), and [dividers](/components/divider) to compose a menu. Menus support keyboard interactions, including type-to-select an option.
You can use [menu items](/docs/components/menu-item), [menu labels](/docs/components/menu-label), and [dividers](/docs/components/divider) to compose a menu. Menus support keyboard interactions, including type-to-select an option.
```html {.example}
<wa-menu style="max-width: 200px;">
@@ -26,7 +26,7 @@ Menus are intended for system menus (dropdown menus, select menus, context menus
### In Dropdowns
Menus work really well when used inside [dropdowns](/components/dropdown).
Menus work really well when used inside [dropdowns](/docs/components/dropdown).
```html {.example}
<wa-dropdown>
@@ -41,7 +41,7 @@ Menus work really well when used inside [dropdowns](/components/dropdown).
### Submenus
To create a submenu, nest an `<wa-menu slot="submenu">` in any [menu item](/components/menu-item).
To create a submenu, nest an `<wa-menu slot="submenu">` in any [menu item](/docs/components/menu-item).
```html {.example}
<wa-menu style="max-width: 200px;">

2
docs/docs/components/popup.md
View File

@@ -9,7 +9,7 @@ This component's name is inspired by [`<popup>`](https://github.com/MicrosoftEdg
Popup doesn't provide any styles — just positioning! The popup's preferred placement, distance, and skidding (offset) can be configured using attributes. An arrow that points to the anchor can be shown and customized to your liking. Additional positioning options are available and described in more detail below.
:::warning
Popup is a low-level utility built specifically for positioning elements. Do not mistake it for a [tooltip](/components/tooltip) or similar because _it does not facilitate an accessible experience!_ Almost every correct usage of `<wa-popup>` will involve building other components. It should rarely, if ever, occur directly in your HTML.
Popup is a low-level utility built specifically for positioning elements. Do not mistake it for a [tooltip](/docs/components/tooltip) or similar because _it does not facilitate an accessible experience!_ Almost every correct usage of `<wa-popup>` will involve building other components. It should rarely, if ever, occur directly in your HTML.
:::
```html {.example}

2
docs/docs/components/radio-button.md
View File

@@ -4,7 +4,7 @@ description: Radios buttons allow the user to select a single option from a grou
layout: component
---
Radio buttons are designed to be used with [radio groups](/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
Radio buttons are designed to be used with [radio groups](/docs/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
```html {.example}
<wa-radio-group label="Select an option" name="a" value="1">

6
docs/docs/components/radio-group.md
View File

@@ -28,7 +28,7 @@ Add descriptive help text to a radio group with the `help-text` attribute. For h
### Radio Buttons
[Radio buttons](/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/components/button-group) is used to group the buttons into a single, cohesive control.
[Radio buttons](/docs/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/docs/components/button-group) is used to group the buttons into a single, cohesive control.
```html {.example}
<wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
@@ -52,7 +52,7 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t
### Sizing Options
The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-buttons) will be determined by the Radio Group's `size` attribute.
The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-buttons) will be determined by the Radio Group's `size` attribute.
```html preview
<wa-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
@@ -71,7 +71,7 @@ The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-bu
```
:::info
[Radios](/components/radio) and [Radio Buttons](/components/radio-button) also have a `size` attribute. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group.
[Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) also have a `size` attribute. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group.
:::
### Validation

4
docs/docs/components/radio.md
View File

@@ -4,7 +4,7 @@ description: Radios allow the user to select a single option from a group.
layout: component
---
Radios are designed to be used with [radio groups](/components/radio-group).
Radios are designed to be used with [radio groups](/docs/components/radio-group).
```html {.example}
<wa-radio-group label="Select an option" name="a" value="1">
@@ -46,7 +46,7 @@ Use the `disabled` attribute to disable a radio.
## Sizes
Add the `size` attribute to the [Radio Group](/components/radio-group) to change the radios' size.
Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to change the radios' size.
```html {.example}
<wa-radio-group size="small" value="1">

2
docs/docs/components/tab-group.md
View File

@@ -4,7 +4,7 @@ description: Tab groups organize content into a container that shows one section
layout: component
---
Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab-panel). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
Tab groups make use of [tabs](/docs/components/tab) and [tab panels](/docs/components/tab-panel). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
```html {.example}
<wa-tab-group>

2
docs/docs/components/tab-panel.md
View File

@@ -19,5 +19,5 @@ layout: component
```
:::info
Additional demonstrations can be found in the [tab group examples](/components/tab-group).
Additional demonstrations can be found in the [tab group examples](/docs/components/tab-group).
:::

2
docs/docs/components/tab.md
View File

@@ -5,5 +5,5 @@ layout: component
---
:::info
Additional demonstrations can be found in the [tab group examples](/components/tab-group).
Additional demonstrations can be found in the [tab group examples](/docs/components/tab-group).
:::

2
docs/index.md
View File

@@ -15,7 +15,7 @@ layout: page
--content-padding-inline: 2rem;
--content-flow-spacing: 4rem;
max-width: 100%;
padding: 0;
padding: 0 !important;
& p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}

2
scripts/plop/templates/component/component.hbs
View File

@@ -8,7 +8,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Short summary of the component's intended use.
* @documentation https://shoelace.style/components/{{ tagWithoutPrefix tag }}
* @documentation https://backers.webawesome.com/docs/components/{{ tagWithoutPrefix tag }}
* @status experimental
* @since 2.0
*

2
src/components/animated-image/animated-image.ts
View File

@@ -11,7 +11,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.
* @documentation https://shoelace.style/components/animated-image
* @documentation https://backers.webawesome.com/docs/components/animated-image
* @status stable
* @since 2.0
*

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

@@ -12,7 +12,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
* @documentation https://shoelace.style/components/animation
* @documentation https://backers.webawesome.com/docs/components/animation
* @status stable
* @since 2.0
*

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

@@ -10,7 +10,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Avatars are used to represent a person or object.
* @documentation https://shoelace.style/components/avatar
* @documentation https://backers.webawesome.com/docs/components/avatar
* @status stable
* @since 2.0
*

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

@@ -8,7 +8,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Badges are used to draw attention and display statuses or counts.
* @documentation https://shoelace.style/components/badge
* @documentation https://backers.webawesome.com/docs/components/badge
* @status stable
* @since 2.0
*

4
src/components/breadcrumb-item/breadcrumb-item.ts
View File

@@ -7,8 +7,8 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
import type { CSSResultGroup } from 'lit';
/**
* @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
* @documentation https://shoelace.style/components/breadcrumb-item
* @summary Breadcrumb Items are used inside [breadcrumbs](/docs/components/breadcrumb) to represent different links.
* @documentation https://backers.webawesome.com/docs/components/breadcrumb-item
* @status stable
* @since 2.0
*

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

@@ -10,7 +10,7 @@ import type WaBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js';
/**
* @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
* @documentation https://shoelace.style/components/breadcrumb
* @documentation https://backers.webawesome.com/docs/components/breadcrumb
* @status stable
* @since 2.0
*

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

@@ -7,7 +7,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Button groups can be used to group related buttons into sections.
* @documentation https://shoelace.style/components/button-group
* @documentation https://backers.webawesome.com/docs/components/button-group
* @status stable
* @since 2.0
*

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

@@ -17,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Buttons represent actions that are available to the user.
* @documentation https://shoelace.style/components/button
* @documentation https://backers.webawesome.com/docs/components/button
* @status stable
* @since 2.0
*

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

@@ -8,7 +8,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Callouts are used to display important messages inline.
* @documentation https://shoelace.style/components/callout
* @documentation https://backers.webawesome.com/docs/components/callout
* @status stable
* @since 2.0
*

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

@@ -8,7 +8,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Cards can be used to group related subjects in a container.
* @documentation https://shoelace.style/components/card
* @documentation https://backers.webawesome.com/docs/components/card
* @status stable
* @since 2.0
*

2
src/components/carousel-item/carousel-item.ts
View File

@@ -6,7 +6,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
import type { CSSResultGroup } from 'lit';
/**
* @summary A carousel item represent a slide within a [carousel](/components/carousel).
* @summary A carousel item represent a slide within a [carousel](/docs/components/carousel).
*
* @since 2.0
* @status experimental

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

@@ -19,7 +19,7 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
/**
* @summary Checkboxes allow the user to toggle an option on or off.
* @documentation https://shoelace.style/components/checkbox
* @documentation https://backers.webawesome.com/docs/components/checkbox
* @status stable
* @since 2.0
*

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

@@ -43,7 +43,7 @@ declare const EyeDropper: EyeDropperConstructor;
/**
* @summary Color pickers allow the user to select a color.
* @documentation https://shoelace.style/components/color-picker
* @documentation https://backers.webawesome.com/docs/components/color-picker
* @status stable
* @since 2.0
*

2
src/components/copy-button/copy-button.ts
View File

@@ -15,7 +15,7 @@ import type WaTooltip from '../tooltip/tooltip.js';
/**
* @summary Copies text data to the clipboard when the user clicks the trigger.
* @documentation https://shoelace.style/components/copy
* @documentation https://backers.webawesome.com/docs/components/copy
* @status experimental
* @since 2.7
*

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

@@ -16,7 +16,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Details show a brief summary and expand to show additional content.
* @documentation https://shoelace.style/components/details
* @documentation https://backers.webawesome.com/docs/components/details
* @status stable
* @since 2.0
*

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

@@ -17,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
* @documentation https://shoelace.style/components/dialog
* @documentation https://backers.webawesome.com/docs/components/dialog
* @status stable
* @since 2.0
*

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

@@ -7,7 +7,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Dividers are used to visually separate or group elements.
* @documentation https://shoelace.style/components/divider
* @documentation https://backers.webawesome.com/docs/components/divider
* @status stable
* @since 2.0
*

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

@@ -17,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Drawers slide in from a container to expose additional options and information.
* @documentation https://shoelace.style/components/drawer
* @documentation https://backers.webawesome.com/docs/components/drawer
* @status stable
* @since 2.0
*

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

@@ -22,7 +22,7 @@ import type WaPopup from '../popup/popup.js';
/**
* @summary Dropdowns expose additional content that "drops down" in a panel.
* @documentation https://shoelace.style/components/dropdown
* @documentation https://backers.webawesome.com/docs/components/dropdown
* @status stable
* @since 2.0
*

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

@@ -4,7 +4,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
/**
* @summary Formats a number as a human readable bytes value.
* @documentation https://shoelace.style/components/format-bytes
* @documentation https://backers.webawesome.com/docs/components/format-bytes
* @status stable
* @since 2.0
*/

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

@@ -5,7 +5,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
/**
* @summary Formats a date/time using the specified locale and options.
* @documentation https://shoelace.style/components/format-date
* @documentation https://backers.webawesome.com/docs/components/format-date
* @status stable
* @since 2.0
*/

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

@@ -4,7 +4,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
/**
* @summary Formats a number using the specified locale and options.
* @documentation https://shoelace.style/components/format-number
* @documentation https://backers.webawesome.com/docs/components/format-number
* @status stable
* @since 2.0
*/

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

@@ -12,7 +12,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
* @documentation https://shoelace.style/components/icon-button
* @documentation https://backers.webawesome.com/docs/components/icon-button
* @status stable
* @since 2.0
*

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

@@ -25,7 +25,7 @@ interface IconSource {
/**
* @summary Icons are symbols that can be used to represent various options within an application.
* @documentation https://shoelace.style/components/icon
* @documentation https://backers.webawesome.com/docs/components/icon
* @status stable
* @since 2.0
*

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

@@ -14,7 +14,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Compare visual differences between similar photos with a sliding panel.
* @documentation https://shoelace.style/components/image-comparer
* @documentation https://backers.webawesome.com/docs/components/image-comparer
* @status stable
* @since 2.0
*

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

@@ -11,7 +11,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Includes give you the power to embed external HTML files into the page.
* @documentation https://shoelace.style/components/include
* @documentation https://backers.webawesome.com/docs/components/include
* @status stable
* @since 2.0
*

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

@@ -22,7 +22,7 @@ import type WaButton from '../button/button.js';
/**
* @summary Inputs collect data from the user.
* @documentation https://shoelace.style/components/input
* @documentation https://backers.webawesome.com/docs/components/input
* @status stable
* @since 2.0
*

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

@@ -14,7 +14,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Menu items provide options for the user to pick from in a menu.
* @documentation https://shoelace.style/components/menu-item
* @documentation https://backers.webawesome.com/docs/components/menu-item
* @status stable
* @since 2.0
*

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

@@ -7,7 +7,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Menu labels are used to describe a group of menu items.
* @documentation https://shoelace.style/components/menu-label
* @documentation https://backers.webawesome.com/docs/components/menu-label
* @status stable
* @since 2.0
*

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

@@ -14,7 +14,7 @@ export interface MenuSelectEventDetail {
/**
* @summary Menus provide a list of options for the user to choose from.
* @documentation https://shoelace.style/components/menu
* @documentation https://backers.webawesome.com/docs/components/menu
* @status stable
* @since 2.0
*

2
src/components/mutation-observer/mutation-observer.ts
View File

@@ -9,7 +9,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
* @documentation https://shoelace.style/components/mutation-observer
* @documentation https://backers.webawesome.com/docs/components/mutation-observer
* @status stable
* @since 2.0
*

4
src/components/option/option.ts
View File

@@ -10,8 +10,8 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
import type { CSSResultGroup } from 'lit';
/**
* @summary Options define the selectable items within various form controls such as [select](/components/select).
* @documentation https://shoelace.style/components/option
* @summary Options define the selectable items within various form controls such as [select](/docs/components/select).
* @documentation https://backers.webawesome.com/docs/components/option
* @status stable
* @since 2.0
*

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

@@ -9,7 +9,7 @@ import type WaDrawer from '../drawer/drawer.js';
/**
* @summary Pages offer an easy way to scaffold pages using minimal markup.
* @documentation https://shoelace.style/components/page
* @documentation https://backers.webawesome.com/docs/components/page
* @status experimental
* @since 3.0
*

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

@@ -25,7 +25,7 @@ function isVirtualElement(e: unknown): e is VirtualElement {
/**
* @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
* @documentation https://shoelace.style/components/popup
* @documentation https://backers.webawesome.com/docs/components/popup
* @status stable
* @since 2.0
*

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

@@ -11,7 +11,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Progress bars are used to show the status of an ongoing operation.
* @documentation https://shoelace.style/components/progress-bar
* @documentation https://backers.webawesome.com/docs/components/progress-bar
* @status stable
* @since 2.0
*

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

@@ -8,7 +8,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
* @documentation https://shoelace.style/components/progress-ring
* @documentation https://backers.webawesome.com/docs/components/progress-ring
* @status stable
* @since 2.0
*

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

@@ -10,7 +10,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
* @documentation https://shoelace.style/components/qr-code
* @documentation https://backers.webawesome.com/docs/components/qr-code
* @status stable
* @since 2.0
*

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

@@ -13,7 +13,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Radios buttons allow the user to select a single option from a group using a button-like control.
* @documentation https://shoelace.style/components/radio-button
* @documentation https://backers.webawesome.com/docs/components/radio-button
* @status stable
* @since 2.0
*

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

@@ -18,8 +18,8 @@ import type WaRadio from '../radio/radio.js';
import type WaRadioButton from '../radio-button/radio-button.js';
/**
* @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
* @documentation https://shoelace.style/components/radio-group
* @summary Radio groups are used to group multiple [radios](/docs/components/radio) or [radio buttons](/docs/components/radio-button) so they function as a single form control.
* @documentation https://backers.webawesome.com/docs/components/radio-group
* @status stable
* @since 2.0
*

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

@@ -12,7 +12,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Radios allow the user to select a single option from a group.
* @documentation https://shoelace.style/components/radio
* @documentation https://backers.webawesome.com/docs/components/radio
* @status stable
* @since 2.0
*

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

@@ -19,7 +19,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Ranges allow the user to select a single value within a given range using a slider.
* @documentation https://shoelace.style/components/range
* @documentation https://backers.webawesome.com/docs/components/range
* @status stable
* @since 2.0
*

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

@@ -15,7 +15,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Ratings give users a way to quickly view and provide feedback.
* @documentation https://shoelace.style/components/rating
* @documentation https://backers.webawesome.com/docs/components/rating
* @status stable
* @since 2.0
*

2
src/components/relative-time/relative-time.ts
View File

@@ -20,7 +20,7 @@ const availableUnits: UnitConfig[] = [
/**
* @summary Outputs a localized time phrase relative to the current date and time.
* @documentation https://shoelace.style/components/relative-time
* @documentation https://backers.webawesome.com/docs/components/relative-time
* @status stable
* @since 2.0
*/

2
src/components/resize-observer/resize-observer.ts
View File

@@ -9,7 +9,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
* @documentation https://shoelace.style/components/resize-observer
* @documentation https://backers.webawesome.com/docs/components/resize-observer
* @status stable
* @since 2.0
*

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

@@ -32,7 +32,7 @@ import type WaPopup from '../popup/popup.js';
/**
* @summary Selects allow you to choose items from a menu of predefined options.
* @documentation https://shoelace.style/components/select
* @documentation https://backers.webawesome.com/docs/components/select
* @status stable
* @since 2.0
*

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

@@ -8,7 +8,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Skeletons are used to provide a visual representation of where content will eventually be drawn.
* @documentation https://shoelace.style/components/skeleton
* @documentation https://backers.webawesome.com/docs/components/skeleton
* @status stable
* @since 2.0
*

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

@@ -8,7 +8,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Spinners are used to show the progress of an indeterminate operation.
* @documentation https://shoelace.style/components/spinner
* @documentation https://backers.webawesome.com/docs/components/spinner
* @status stable
* @since 2.0
*

2
src/components/split-panel/split-panel.ts
View File

@@ -13,7 +13,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Split panels display two adjacent panels, allowing the user to reposition them.
* @documentation https://shoelace.style/components/split-panel
* @documentation https://backers.webawesome.com/docs/components/split-panel
* @status stable
* @since 2.0
*

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

@@ -18,7 +18,7 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
/**
* @summary Switches allow the user to toggle an option on or off.
* @documentation https://shoelace.style/components/switch
* @documentation https://backers.webawesome.com/docs/components/switch
* @status stable
* @since 2.0
*

2
src/components/tab-group/tab-group.ts
View File

@@ -18,7 +18,7 @@ import type WaTabPanel from '../tab-panel/tab-panel.js';
/**
* @summary Tab groups organize content into a container that shows one section at a time.
* @documentation https://shoelace.style/components/tab-group
* @documentation https://backers.webawesome.com/docs/components/tab-group
* @status stable
* @since 2.0
*

4
src/components/tab-panel/tab-panel.ts
View File

@@ -10,8 +10,8 @@ import type { CSSResultGroup } from 'lit';
let id = 0;
/**
* @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
* @documentation https://shoelace.style/components/tab-panel
* @summary Tab panels are used inside [tab groups](/docs/components/tab-group) to display tabbed content.
* @documentation https://backers.webawesome.com/docs/components/tab-panel
* @status stable
* @since 2.0
*

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

@@ -11,7 +11,7 @@ let id = 0;
/**
* @summary Tabs are used inside [tab groups](/docs/components/tab-group) to represent and activate [tab panels](/docs/components/tab-panel).
* @documentation https://shoelace.style/components/tab
* @documentation https://backers.webawesome.com/docs/components/tab
* @status stable
* @since 2.0
*

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

@@ -11,7 +11,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Tags are used as labels to organize things or to indicate a selection.
* @documentation https://shoelace.style/components/tag
* @documentation https://backers.webawesome.com/docs/components/tag
* @status stable
* @since 2.0
*

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

@@ -18,7 +18,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Textareas collect data from the user and allow multiple lines of text.
* @documentation https://shoelace.style/components/textarea
* @documentation https://backers.webawesome.com/docs/components/textarea
* @status stable
* @since 2.0
*

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

@@ -17,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary Tooltips display additional information based on a specific action.
* @documentation https://shoelace.style/components/tooltip
* @documentation https://backers.webawesome.com/docs/components/tooltip
* @status stable
* @since 2.0
*

4
src/components/tree-item/tree-item.ts
View File

@@ -21,8 +21,8 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
import type { CSSResultGroup, PropertyValueMap } from 'lit';
/**
* @summary A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
* @documentation https://shoelace.style/components/tree-item
* @summary A tree item serves as a hierarchical node that lives inside a [tree](/docs/components/tree).
* @documentation https://backers.webawesome.com/docs/components/tree-item
* @status stable
* @since 2.0
*

4
src/components/tree/tree.ts
View File

@@ -50,8 +50,8 @@ function syncCheckboxes(changedTreeItem: WaTreeItem, initialSync = false) {
}
/**
* @summary Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
* @documentation https://shoelace.style/components/tree
* @summary Trees allow you to display a hierarchical list of selectable [tree items](/docs/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
* @documentation https://backers.webawesome.com/docs/components/tree
* @status stable
* @since 2.0
*

2
src/components/visually-hidden/visually-hidden.ts
View File

@@ -7,7 +7,7 @@ import type { CSSResultGroup } from 'lit';
/**
* @summary The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
* @documentation https://shoelace.style/components/visually-hidden
* @documentation https://backers.webawesome.com/docs/components/visually-hidden
* @status stable
* @since 2.0
*