diff --git a/docs/_layouts/component.njk b/docs/_layouts/component.njk index bee60ba6a..18685ca69 100644 --- a/docs/_layouts/component.njk +++ b/docs/_layouts/component.njk @@ -19,7 +19,7 @@

- {{ component.summary }} + {{ component.summary | inlineMarkdown | safe }}

{% endblock %} diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 67b3775d9..3860c2cb2 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -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 { diff --git a/docs/assets/styles/outline.css b/docs/assets/styles/outline.css index 6f9b7afce..26ee6c274 100644 --- a/docs/assets/styles/outline.css +++ b/docs/assets/styles/outline.css @@ -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; diff --git a/docs/docs/components/breadcrumb-item.md b/docs/docs/components/breadcrumb-item.md index 2b8dfcced..a071cd8be 100644 --- a/docs/docs/components/breadcrumb-item.md +++ b/docs/docs/components/breadcrumb-item.md @@ -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). ::: diff --git a/docs/docs/components/button-group.md b/docs/docs/components/button-group.md index de7f10069..2e09c930e 100644 --- a/docs/docs/components/button-group.md +++ b/docs/docs/components/button-group.md @@ -135,7 +135,7 @@ Dropdowns can be placed inside button groups as long as the trigger is an ` diff --git a/docs/docs/components/carousel-item.md b/docs/docs/components/carousel-item.md index 34379d947..af19d6137 100644 --- a/docs/docs/components/carousel-item.md +++ b/docs/docs/components/carousel-item.md @@ -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). ::: diff --git a/docs/docs/components/copy-button.md b/docs/docs/components/copy-button.md index bf305965b..a4cf36054 100644 --- a/docs/docs/components/copy-button.md +++ b/docs/docs/components/copy-button.md @@ -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 [``](/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 [``](/docs/components/icon) or your own images. ```html {.example} diff --git a/docs/docs/components/dialog.md b/docs/docs/components/dialog.md index 0ae560e9b..129ffa6c8 100644 --- a/docs/docs/components/dialog.md +++ b/docs/docs/components/dialog.md @@ -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} diff --git a/docs/docs/components/divider.md b/docs/docs/components/divider.md index 62c7026aa..9fb78d197 100644 --- a/docs/docs/components/divider.md +++ b/docs/docs/components/divider.md @@ -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} diff --git a/docs/docs/components/drawer.md b/docs/docs/components/drawer.md index d8d041655..473958041 100644 --- a/docs/docs/components/drawer.md +++ b/docs/docs/components/drawer.md @@ -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} diff --git a/docs/docs/components/dropdown.md b/docs/docs/components/dropdown.md index c5c970920..f74771ee8 100644 --- a/docs/docs/components/dropdown.md +++ b/docs/docs/components/dropdown.md @@ -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} @@ -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}
@@ -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 `` element in a [menu item](/components/menu-item). +To create a submenu, nest an `` element in a [menu item](/docs/components/menu-item). ```html {.example} diff --git a/docs/docs/components/icon-button.md b/docs/docs/components/icon-button.md index be3ffa302..e80e35dce 100644 --- a/docs/docs/components/icon-button.md +++ b/docs/docs/components/icon-button.md @@ -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} diff --git a/docs/docs/components/menu.md b/docs/docs/components/menu.md index f11a8169d..e5e25a9e8 100644 --- a/docs/docs/components/menu.md +++ b/docs/docs/components/menu.md @@ -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} @@ -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} @@ -41,7 +41,7 @@ Menus work really well when used inside [dropdowns](/components/dropdown). ### Submenus -To create a submenu, nest an `` in any [menu item](/components/menu-item). +To create a submenu, nest an `` in any [menu item](/docs/components/menu-item). ```html {.example} diff --git a/docs/docs/components/popup.md b/docs/docs/components/popup.md index 2cedeb87b..1d5a1c932 100644 --- a/docs/docs/components/popup.md +++ b/docs/docs/components/popup.md @@ -9,7 +9,7 @@ This component's name is inspired by [``](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 `` 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 `` will involve building other components. It should rarely, if ever, occur directly in your HTML. ::: ```html {.example} diff --git a/docs/docs/components/radio-button.md b/docs/docs/components/radio-button.md index 15da7b7ef..48420e5ea 100644 --- a/docs/docs/components/radio-button.md +++ b/docs/docs/components/radio-button.md @@ -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} diff --git a/docs/docs/components/radio-group.md b/docs/docs/components/radio-group.md index 7021d9b47..e07ad0bcd 100644 --- a/docs/docs/components/radio-group.md +++ b/docs/docs/components/radio-group.md @@ -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} @@ -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 @@ -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 diff --git a/docs/docs/components/radio.md b/docs/docs/components/radio.md index 3bb0ffa65..9b72f1c7d 100644 --- a/docs/docs/components/radio.md +++ b/docs/docs/components/radio.md @@ -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} @@ -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} diff --git a/docs/docs/components/tab-group.md b/docs/docs/components/tab-group.md index b9c5fa0b1..35939b078 100644 --- a/docs/docs/components/tab-group.md +++ b/docs/docs/components/tab-group.md @@ -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} diff --git a/docs/docs/components/tab-panel.md b/docs/docs/components/tab-panel.md index 89560812d..c5255fce2 100644 --- a/docs/docs/components/tab-panel.md +++ b/docs/docs/components/tab-panel.md @@ -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). ::: diff --git a/docs/docs/components/tab.md b/docs/docs/components/tab.md index befc249b5..08cb67366 100644 --- a/docs/docs/components/tab.md +++ b/docs/docs/components/tab.md @@ -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). ::: \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 17bd176cf..a17c270da 100644 --- a/docs/index.md +++ b/docs/index.md @@ -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; } diff --git a/scripts/plop/templates/component/component.hbs b/scripts/plop/templates/component/component.hbs index 5bf202cb1..29f67b46c 100644 --- a/scripts/plop/templates/component/component.hbs +++ b/scripts/plop/templates/component/component.hbs @@ -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 * diff --git a/src/components/animated-image/animated-image.ts b/src/components/animated-image/animated-image.ts index f6531e876..f7607f99c 100644 --- a/src/components/animated-image/animated-image.ts +++ b/src/components/animated-image/animated-image.ts @@ -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 * diff --git a/src/components/animation/animation.ts b/src/components/animation/animation.ts index eb63fdb84..82f540ab1 100644 --- a/src/components/animation/animation.ts +++ b/src/components/animation/animation.ts @@ -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 * diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index bb9a44224..b6500a58b 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -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 * diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts index d2f4b8663..450e32dc7 100644 --- a/src/components/badge/badge.ts +++ b/src/components/badge/badge.ts @@ -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 * diff --git a/src/components/breadcrumb-item/breadcrumb-item.ts b/src/components/breadcrumb-item/breadcrumb-item.ts index b4d74445f..a562c5ef1 100644 --- a/src/components/breadcrumb-item/breadcrumb-item.ts +++ b/src/components/breadcrumb-item/breadcrumb-item.ts @@ -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 * diff --git a/src/components/breadcrumb/breadcrumb.ts b/src/components/breadcrumb/breadcrumb.ts index 631fd9477..91ee30ab0 100644 --- a/src/components/breadcrumb/breadcrumb.ts +++ b/src/components/breadcrumb/breadcrumb.ts @@ -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 * diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts index f6282fab4..c4ebfc0ea 100644 --- a/src/components/button-group/button-group.ts +++ b/src/components/button-group/button-group.ts @@ -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 * diff --git a/src/components/button/button.ts b/src/components/button/button.ts index ac63ab74c..3a8cfd0c0 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -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 * diff --git a/src/components/callout/callout.ts b/src/components/callout/callout.ts index da5653ace..6eca286bf 100644 --- a/src/components/callout/callout.ts +++ b/src/components/callout/callout.ts @@ -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 * diff --git a/src/components/card/card.ts b/src/components/card/card.ts index 52678c058..6219249d7 100644 --- a/src/components/card/card.ts +++ b/src/components/card/card.ts @@ -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 * diff --git a/src/components/carousel-item/carousel-item.ts b/src/components/carousel-item/carousel-item.ts index 49237142a..9d0243b85 100644 --- a/src/components/carousel-item/carousel-item.ts +++ b/src/components/carousel-item/carousel-item.ts @@ -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 diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index ee7bf77ab..6cc50fd7c 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -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 * diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index 199ba8806..336bd3499 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -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 * diff --git a/src/components/copy-button/copy-button.ts b/src/components/copy-button/copy-button.ts index 617b53c7c..10ca2cede 100644 --- a/src/components/copy-button/copy-button.ts +++ b/src/components/copy-button/copy-button.ts @@ -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 * diff --git a/src/components/details/details.ts b/src/components/details/details.ts index 67d0ba0b4..afdb65789 100644 --- a/src/components/details/details.ts +++ b/src/components/details/details.ts @@ -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 * diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 2dbefdcc7..639b3c543 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -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 * diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts index d6a9b3522..a66c89856 100644 --- a/src/components/divider/divider.ts +++ b/src/components/divider/divider.ts @@ -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 * diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts index 7702f324c..dcc9807cb 100644 --- a/src/components/drawer/drawer.ts +++ b/src/components/drawer/drawer.ts @@ -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 * diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index cfe2bc4c9..ad850c74a 100644 --- a/src/components/dropdown/dropdown.ts +++ b/src/components/dropdown/dropdown.ts @@ -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 * diff --git a/src/components/format-bytes/format-bytes.ts b/src/components/format-bytes/format-bytes.ts index 6c3627616..f900d3bce 100644 --- a/src/components/format-bytes/format-bytes.ts +++ b/src/components/format-bytes/format-bytes.ts @@ -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 */ diff --git a/src/components/format-date/format-date.ts b/src/components/format-date/format-date.ts index 477f4e0ca..a135061ac 100644 --- a/src/components/format-date/format-date.ts +++ b/src/components/format-date/format-date.ts @@ -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 */ diff --git a/src/components/format-number/format-number.ts b/src/components/format-number/format-number.ts index 53c1591dc..ed03dd24b 100644 --- a/src/components/format-number/format-number.ts +++ b/src/components/format-number/format-number.ts @@ -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 */ diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts index 8b13ed2f6..35e8cd973 100644 --- a/src/components/icon-button/icon-button.ts +++ b/src/components/icon-button/icon-button.ts @@ -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 * diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts index 2df51e9ef..863456dbe 100644 --- a/src/components/icon/icon.ts +++ b/src/components/icon/icon.ts @@ -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 * diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts index a392ad4ef..4d68cb738 100644 --- a/src/components/image-comparer/image-comparer.ts +++ b/src/components/image-comparer/image-comparer.ts @@ -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 * diff --git a/src/components/include/include.ts b/src/components/include/include.ts index fe789a3f6..a0727fe42 100644 --- a/src/components/include/include.ts +++ b/src/components/include/include.ts @@ -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 * diff --git a/src/components/input/input.ts b/src/components/input/input.ts index d472fb0f2..522e3c4ee 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -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 * diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts index 5d6afd1df..b31a97315 100644 --- a/src/components/menu-item/menu-item.ts +++ b/src/components/menu-item/menu-item.ts @@ -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 * diff --git a/src/components/menu-label/menu-label.ts b/src/components/menu-label/menu-label.ts index fe24fbdeb..41d1b24ed 100644 --- a/src/components/menu-label/menu-label.ts +++ b/src/components/menu-label/menu-label.ts @@ -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 * diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index 922e1f9ca..af6678532 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -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 * diff --git a/src/components/mutation-observer/mutation-observer.ts b/src/components/mutation-observer/mutation-observer.ts index 485741acd..715d3f0c8 100644 --- a/src/components/mutation-observer/mutation-observer.ts +++ b/src/components/mutation-observer/mutation-observer.ts @@ -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 * diff --git a/src/components/option/option.ts b/src/components/option/option.ts index be3689f04..97610bf0c 100644 --- a/src/components/option/option.ts +++ b/src/components/option/option.ts @@ -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 * diff --git a/src/components/page/page.ts b/src/components/page/page.ts index c901756b6..da607038a 100644 --- a/src/components/page/page.ts +++ b/src/components/page/page.ts @@ -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 * diff --git a/src/components/popup/popup.ts b/src/components/popup/popup.ts index ba6adb52e..08a482cfd 100644 --- a/src/components/popup/popup.ts +++ b/src/components/popup/popup.ts @@ -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 * diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts index a63a189cc..3d22d1a8e 100644 --- a/src/components/progress-bar/progress-bar.ts +++ b/src/components/progress-bar/progress-bar.ts @@ -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 * diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts index c673cf5ea..5105153a9 100644 --- a/src/components/progress-ring/progress-ring.ts +++ b/src/components/progress-ring/progress-ring.ts @@ -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 * diff --git a/src/components/qr-code/qr-code.ts b/src/components/qr-code/qr-code.ts index 280330c02..c76be8f48 100644 --- a/src/components/qr-code/qr-code.ts +++ b/src/components/qr-code/qr-code.ts @@ -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 * diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts index a8200958a..d421f4f88 100644 --- a/src/components/radio-button/radio-button.ts +++ b/src/components/radio-button/radio-button.ts @@ -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 * diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index 27b914546..81c0837a9 100644 --- a/src/components/radio-group/radio-group.ts +++ b/src/components/radio-group/radio-group.ts @@ -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 * diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index 4000015ed..90d2be141 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -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 * diff --git a/src/components/range/range.ts b/src/components/range/range.ts index ad228b339..018238622 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -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 * diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts index 1ad897c85..398f8f5c0 100644 --- a/src/components/rating/rating.ts +++ b/src/components/rating/rating.ts @@ -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 * diff --git a/src/components/relative-time/relative-time.ts b/src/components/relative-time/relative-time.ts index dfe81ce1f..8820636f6 100644 --- a/src/components/relative-time/relative-time.ts +++ b/src/components/relative-time/relative-time.ts @@ -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 */ diff --git a/src/components/resize-observer/resize-observer.ts b/src/components/resize-observer/resize-observer.ts index 219d45e9c..31fc89fa1 100644 --- a/src/components/resize-observer/resize-observer.ts +++ b/src/components/resize-observer/resize-observer.ts @@ -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 * diff --git a/src/components/select/select.ts b/src/components/select/select.ts index d3c968b42..8e40fc2c1 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -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 * diff --git a/src/components/skeleton/skeleton.ts b/src/components/skeleton/skeleton.ts index 8aa555b84..a8d0c0c8c 100644 --- a/src/components/skeleton/skeleton.ts +++ b/src/components/skeleton/skeleton.ts @@ -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 * diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts index 9dff54e72..59b2aba72 100644 --- a/src/components/spinner/spinner.ts +++ b/src/components/spinner/spinner.ts @@ -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 * diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts index 83675be51..04cde55e3 100644 --- a/src/components/split-panel/split-panel.ts +++ b/src/components/split-panel/split-panel.ts @@ -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 * diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 3622409c9..73b660a82 100644 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -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 * diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts index 46f8094d9..009697368 100644 --- a/src/components/tab-group/tab-group.ts +++ b/src/components/tab-group/tab-group.ts @@ -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 * diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts index 548b6dc3d..dfa035e1a 100644 --- a/src/components/tab-panel/tab-panel.ts +++ b/src/components/tab-panel/tab-panel.ts @@ -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 * diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts index 6f7f54ba3..be51513f5 100644 --- a/src/components/tab/tab.ts +++ b/src/components/tab/tab.ts @@ -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 * diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts index 7b720e762..38d7386b7 100644 --- a/src/components/tag/tag.ts +++ b/src/components/tag/tag.ts @@ -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 * diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index ab7eeec32..b4e11c84c 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -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 * diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index 231b7b2ad..f792cd944 100644 --- a/src/components/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip.ts @@ -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 * diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts index 5fd410fba..a3cfcab19 100644 --- a/src/components/tree-item/tree-item.ts +++ b/src/components/tree-item/tree-item.ts @@ -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 * diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts index e7b8bc4a7..4dff840cc 100644 --- a/src/components/tree/tree.ts +++ b/src/components/tree/tree.ts @@ -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 * diff --git a/src/components/visually-hidden/visually-hidden.ts b/src/components/visually-hidden/visually-hidden.ts index 7ad43d2e9..0804781a2 100644 --- a/src/components/visually-hidden/visually-hidden.ts +++ b/src/components/visually-hidden/visually-hidden.ts @@ -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 *