diff --git a/docs/.eleventy.js b/docs/.eleventy.js index 61d8e1662..d55b0fb10 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -51,6 +51,15 @@ export default function (eleventyConfig) { return firstArg; }); + eleventyConfig.addFilter('sort', (arr, key = 'data.title') => { + key = key.split('.'); + return arr.sort((a, b) => { + let aVal = key.reduce((obj, i) => obj?.[i], a); + let bVal = key.reduce((obj, i) => obj?.[i], b); + return aVal.localeCompare(bVal); + }); + }); + // Shortcodes - {% shortCode arg1, arg2 %} eleventyConfig.addShortcode('cdnUrl', location => { return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, ''); diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index 925a64579..65f195244 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -25,207 +25,27 @@ + {# Layout #} diff --git a/docs/docs/components/animated-image.md b/docs/docs/components/animated-image.md index 8966165d7..49e894386 100644 --- a/docs/docs/components/animated-image.md +++ b/docs/docs/components/animated-image.md @@ -1,7 +1,7 @@ --- title: Animated Image description: A component for displaying animated GIFs and WEBPs that play and pause on interaction. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/animation.md b/docs/docs/components/animation.md index 4415a4b67..013e145f1 100644 --- a/docs/docs/components/animation.md +++ b/docs/docs/components/animation.md @@ -1,7 +1,7 @@ --- title: Animation description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. -layout: component +tags: component --- To animate an element, wrap it in `` and set an animation `name`. The animation will not start until you add the `play` attribute. Refer to the [properties table](#properties) for a list of all animation options. @@ -196,4 +196,4 @@ Animations won't play until you apply the `play` attribute. You can omit it init animation.play = true; }); -``` \ No newline at end of file +``` diff --git a/docs/docs/components/avatar.md b/docs/docs/components/avatar.md index 2e9bc9334..cd2b53f68 100644 --- a/docs/docs/components/avatar.md +++ b/docs/docs/components/avatar.md @@ -1,7 +1,7 @@ --- title: Avatar description: Avatars are used to represent a person or object. -layout: component +tags: component --- By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices. diff --git a/docs/docs/components/badge.md b/docs/docs/components/badge.md index ceb70a7db..5f6001210 100644 --- a/docs/docs/components/badge.md +++ b/docs/docs/components/badge.md @@ -1,7 +1,7 @@ --- title: Badge description: Badges are used to draw attention and display statuses or counts. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/breadcrumb-item.md b/docs/docs/components/breadcrumb-item.md index a071cd8be..559b34451 100644 --- a/docs/docs/components/breadcrumb-item.md +++ b/docs/docs/components/breadcrumb-item.md @@ -1,7 +1,8 @@ --- title: Breadcrumb Item description: Breadcrumb Items are used inside breadcrumbs to represent different links. -layout: component +tags: component +parent: breadcrumb --- ```html {.example} diff --git a/docs/docs/components/breadcrumb.md b/docs/docs/components/breadcrumb.md index ac48eb4e2..f38450c56 100644 --- a/docs/docs/components/breadcrumb.md +++ b/docs/docs/components/breadcrumb.md @@ -1,7 +1,7 @@ --- title: Breadcrumb description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy. -layout: component +tags: component --- Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation. diff --git a/docs/docs/components/button-group.md b/docs/docs/components/button-group.md index 8588de96b..f45f06691 100644 --- a/docs/docs/components/button-group.md +++ b/docs/docs/components/button-group.md @@ -1,7 +1,7 @@ --- title: Button Group description: Button groups can be used to group related buttons into sections. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index 6203a127f..e63579b87 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -1,7 +1,7 @@ --- title: Button description: Buttons represent actions that are available to the user. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/callout.md b/docs/docs/components/callout.md index cb6054930..d06e4243e 100644 --- a/docs/docs/components/callout.md +++ b/docs/docs/components/callout.md @@ -1,7 +1,7 @@ --- title: Callout description: Callouts are used to display important messages inline. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md index 40f07f6c0..527c9d028 100644 --- a/docs/docs/components/card.md +++ b/docs/docs/components/card.md @@ -1,7 +1,7 @@ --- title: Card description: Cards can be used to group related subjects in a container. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/carousel-item.md b/docs/docs/components/carousel-item.md index af19d6137..e9049375c 100644 --- a/docs/docs/components/carousel-item.md +++ b/docs/docs/components/carousel-item.md @@ -1,7 +1,8 @@ --- title: Carousel Item description: A carousel item represent a slide within a carousel. -layout: component +tags: component +parent: carousel --- ```html {.example} diff --git a/docs/docs/components/carousel.md b/docs/docs/components/carousel.md index aed47303f..d2af61621 100644 --- a/docs/docs/components/carousel.md +++ b/docs/docs/components/carousel.md @@ -1,7 +1,7 @@ --- title: Carousel description: Carousels display an arbitrary number of content slides along a horizontal or vertical axis. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/checkbox.md b/docs/docs/components/checkbox.md index a1d1f22d8..b34179270 100644 --- a/docs/docs/components/checkbox.md +++ b/docs/docs/components/checkbox.md @@ -1,7 +1,7 @@ --- title: Checkbox description: Checkboxes allow the user to toggle an option on or off. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/code-demo.md b/docs/docs/components/code-demo.md index 6407aef97..99c84640f 100644 --- a/docs/docs/components/code-demo.md +++ b/docs/docs/components/code-demo.md @@ -1,7 +1,8 @@ --- title: Code Demo description: Code demos can be used to render code examples as inline live demos. -layout: component +tags: component +noAlpha: true --- ```html {.example} diff --git a/docs/docs/components/color-picker.md b/docs/docs/components/color-picker.md index d67f254d3..987285e4f 100644 --- a/docs/docs/components/color-picker.md +++ b/docs/docs/components/color-picker.md @@ -1,7 +1,7 @@ --- title: Color Picker description: Color pickers allow the user to select a color. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/components.json b/docs/docs/components/components.json new file mode 100644 index 000000000..09bdf2af9 --- /dev/null +++ b/docs/docs/components/components.json @@ -0,0 +1,3 @@ +{ + "layout": "component.njk" +} diff --git a/docs/docs/components/copy-button.md b/docs/docs/components/copy-button.md index a4cf36054..e9ef88591 100644 --- a/docs/docs/components/copy-button.md +++ b/docs/docs/components/copy-button.md @@ -1,7 +1,7 @@ --- title: Copy Button description: Copies data to the clipboard when the user clicks the button. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/details.md b/docs/docs/components/details.md index 30bf625c2..385876ce3 100644 --- a/docs/docs/components/details.md +++ b/docs/docs/components/details.md @@ -1,7 +1,7 @@ --- title: Details description: Details show a brief summary and expand to show additional content. -layout: component +tags: component --- diff --git a/docs/docs/components/dialog.md b/docs/docs/components/dialog.md index 8eec8fd49..a7289f8b9 100644 --- a/docs/docs/components/dialog.md +++ b/docs/docs/components/dialog.md @@ -1,7 +1,7 @@ --- title: Dialog description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.' -layout: component +tags: component --- @@ -219,4 +219,4 @@ To give focus to a specific element when the dialog opens, use the `autofocus` a openButton.addEventListener('click', () => dialog.open = true); -``` \ No newline at end of file +``` diff --git a/docs/docs/components/divider.md b/docs/docs/components/divider.md index 9fb78d197..9836c9ad3 100644 --- a/docs/docs/components/divider.md +++ b/docs/docs/components/divider.md @@ -1,7 +1,7 @@ --- title: Divider description: Dividers are used to visually separate or group elements. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/drawer.md b/docs/docs/components/drawer.md index 473958041..957b457bf 100644 --- a/docs/docs/components/drawer.md +++ b/docs/docs/components/drawer.md @@ -1,7 +1,7 @@ --- title: Drawer description: Drawers slide in from a container to expose additional options and information. -layout: component +tags: component --- diff --git a/docs/docs/components/dropdown.md b/docs/docs/components/dropdown.md index f74771ee8..0029af991 100644 --- a/docs/docs/components/dropdown.md +++ b/docs/docs/components/dropdown.md @@ -1,7 +1,7 @@ --- title: Dropdown description: 'Dropdowns expose additional content that "drops down" in a panel.' -layout: component +tags: 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. diff --git a/docs/docs/components/format-bytes.md b/docs/docs/components/format-bytes.md index 364fbc756..0d1379f6f 100644 --- a/docs/docs/components/format-bytes.md +++ b/docs/docs/components/format-bytes.md @@ -1,7 +1,7 @@ --- title: Format Bytes description: Formats a number as a human readable bytes value. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/format-date.md b/docs/docs/components/format-date.md index 6078908fa..32be5307e 100644 --- a/docs/docs/components/format-date.md +++ b/docs/docs/components/format-date.md @@ -1,7 +1,7 @@ --- title: Format Date description: Formats a date/time using the specified locale and options. -layout: component +tags: 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. diff --git a/docs/docs/components/format-number.md b/docs/docs/components/format-number.md index d14554b8b..d9e001877 100644 --- a/docs/docs/components/format-number.md +++ b/docs/docs/components/format-number.md @@ -1,7 +1,7 @@ --- title: Format Number description: Formats a number using the specified locale and options. -layout: component +tags: component --- Localization is handled by the browser's [`Intl.NumberFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat). No language packs are required. diff --git a/docs/docs/components/icon-button.md b/docs/docs/components/icon-button.md index abf269f63..4219a7b42 100644 --- a/docs/docs/components/icon-button.md +++ b/docs/docs/components/icon-button.md @@ -1,7 +1,7 @@ --- title: Icon Button description: Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. -layout: component +tags: component --- For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/docs/components/icon). diff --git a/docs/docs/components/icon.md b/docs/docs/components/icon.md index acbb1678e..f16dab8f0 100644 --- a/docs/docs/components/icon.md +++ b/docs/docs/components/icon.md @@ -1,7 +1,7 @@ --- title: Icon description: Icons are symbols that can be used to represent various options within an application. -layout: component +tags: component --- Web Awesome comes bundled with over 2,000 free icons courtesy of [Font Awesome](https://fontawesome.com/). These icons are part of the `default` icon library. Font Awesome Pro users can unlock additional icon families. Or, if you prefer, you can register your own [custom icon library](#icon-library). @@ -146,7 +146,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/tw resolver: (name, family) => { const suffix = family === 'filled' ? '-fill' : ''; return `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/${name}${suffix}.svg` - } + } }); ``` @@ -517,7 +517,7 @@ For example, this will change the default icon library to use [Bootstrap Icons]( resolver: (name, family) => { const suffix = family === 'filled' ? '-fill' : ''; return `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/${name}${suffix}.svg` - } + } }); ``` diff --git a/docs/docs/components/image-comparer.md b/docs/docs/components/image-comparer.md index abbaa1a94..92b4b11fc 100644 --- a/docs/docs/components/image-comparer.md +++ b/docs/docs/components/image-comparer.md @@ -1,7 +1,7 @@ --- title: Image Comparer description: Compare visual differences between similar photos with a sliding panel. -layout: component +tags: component --- For best results, use images that share the same dimensions. The slider can be controlled by dragging or pressing the left and right arrow keys. (Tip: press shift + arrows to move the slider in larger intervals, or home + end to jump to the beginning or end.) diff --git a/docs/docs/components/include.md b/docs/docs/components/include.md index 466521443..0bc70088b 100644 --- a/docs/docs/components/include.md +++ b/docs/docs/components/include.md @@ -1,7 +1,7 @@ --- title: Include description: Includes give you the power to embed external HTML files into the page. -layout: component +tags: component --- Included files are asynchronously requested using `window.fetch()`. Requests are cached, so the same file can be included multiple times, but only one request will be made. diff --git a/docs/docs/components/input.md b/docs/docs/components/input.md index 707838586..2e6442c7a 100644 --- a/docs/docs/components/input.md +++ b/docs/docs/components/input.md @@ -1,7 +1,7 @@ --- title: Input description: Inputs collect data from the user. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/menu-item.md b/docs/docs/components/menu-item.md index 796c15401..7df5c2318 100644 --- a/docs/docs/components/menu-item.md +++ b/docs/docs/components/menu-item.md @@ -1,7 +1,8 @@ --- title: Menu Item description: Menu items provide options for the user to pick from in a menu. -layout: component +tags: component +parent: menu --- ```html {.example} diff --git a/docs/docs/components/menu-label.md b/docs/docs/components/menu-label.md index 619d57d4f..51b847993 100644 --- a/docs/docs/components/menu-label.md +++ b/docs/docs/components/menu-label.md @@ -1,7 +1,8 @@ --- title: Menu Label description: Menu labels are used to describe a group of menu items. -layout: component +tags: component +parent: menu --- ```html {.example} diff --git a/docs/docs/components/menu.md b/docs/docs/components/menu.md index e5e25a9e8..3aee7004a 100644 --- a/docs/docs/components/menu.md +++ b/docs/docs/components/menu.md @@ -1,7 +1,7 @@ --- title: Menu description: Menus provide a list of options for the user to choose from. -layout: component +tags: component --- 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. diff --git a/docs/docs/components/mutation-observer.md b/docs/docs/components/mutation-observer.md index d91788fe5..ac4f874af 100644 --- a/docs/docs/components/mutation-observer.md +++ b/docs/docs/components/mutation-observer.md @@ -1,7 +1,7 @@ --- title: Mutation Observer description: The Mutation Observer component offers a thin, declarative interface to the MutationObserver API. -layout: component +tags: component --- The mutation observer will report changes to the content it wraps through the `wa-mutation` event. When emitted, a collection of [MutationRecord](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects will be attached to `event.detail` that contains information about how it changed. diff --git a/docs/docs/components/option.md b/docs/docs/components/option.md index b8be2a439..878f0125a 100644 --- a/docs/docs/components/option.md +++ b/docs/docs/components/option.md @@ -1,7 +1,8 @@ --- title: Option description: Options define the selectable items within various form controls such as select. -layout: component +tags: component +parent: select --- ```html {.example} diff --git a/docs/docs/components/page.md b/docs/docs/components/page.md index 9c1e1798e..6caaed40e 100644 --- a/docs/docs/components/page.md +++ b/docs/docs/components/page.md @@ -1,7 +1,7 @@ --- title: Page description: Pages offer an easy way to scaffold entire page layouts using minimal markup. -layout: component +tags: component isPro: true --- diff --git a/docs/docs/components/popup.md b/docs/docs/components/popup.md index 1d5a1c932..3c82e0938 100644 --- a/docs/docs/components/popup.md +++ b/docs/docs/components/popup.md @@ -1,7 +1,7 @@ --- title: Popup description: 'Popup is a utility that lets you declaratively anchor "popup" containers to another element.' -layout: component +tags: component --- This component's name is inspired by [``](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md). It uses [Floating UI](https://floating-ui.com/) under the hood to provide a well-tested, lightweight, and fully declarative positioning utility for tooltips, dropdowns, and more. diff --git a/docs/docs/components/progress-bar.md b/docs/docs/components/progress-bar.md index 60a58dbab..27d684223 100644 --- a/docs/docs/components/progress-bar.md +++ b/docs/docs/components/progress-bar.md @@ -1,7 +1,7 @@ --- title: Progress Bar description: Progress bars are used to show the status of an ongoing operation. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/progress-ring.md b/docs/docs/components/progress-ring.md index 9baa9384b..8f646dc2a 100644 --- a/docs/docs/components/progress-ring.md +++ b/docs/docs/components/progress-ring.md @@ -1,7 +1,7 @@ --- title: Progress Ring description: Progress rings are used to show the progress of a determinate operation in a circular fashion. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/qr-code.md b/docs/docs/components/qr-code.md index aaf088676..0894f66f9 100644 --- a/docs/docs/components/qr-code.md +++ b/docs/docs/components/qr-code.md @@ -1,7 +1,7 @@ --- title: QR Code description: Generates a QR code and renders it using the Canvas API. -layout: component +tags: component --- QR codes are useful for providing small pieces of information to users who can quickly scan them with a smartphone. Most smartphones have built-in QR code scanners, so simply pointing the camera at a QR code will decode it and allow the user to visit a website, dial a phone number, read a message, etc. diff --git a/docs/docs/components/radio-button.md b/docs/docs/components/radio-button.md index 48420e5ea..67ed31aef 100644 --- a/docs/docs/components/radio-button.md +++ b/docs/docs/components/radio-button.md @@ -1,7 +1,8 @@ --- title: Radio Button description: Radios buttons allow the user to select a single option from a group using a button-like control. -layout: component +tags: component +parent: radio-group --- 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. diff --git a/docs/docs/components/radio-group.md b/docs/docs/components/radio-group.md index 8dcb732ae..966bc8fe2 100644 --- a/docs/docs/components/radio-group.md +++ b/docs/docs/components/radio-group.md @@ -1,7 +1,7 @@ --- title: Radio Group description: Radio groups are used to group multiple radios or radio buttons so they function as a single form control. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/radio.md b/docs/docs/components/radio.md index 53eee6bdb..cde6ee2b7 100644 --- a/docs/docs/components/radio.md +++ b/docs/docs/components/radio.md @@ -1,7 +1,8 @@ --- title: Radio description: Radios allow the user to select a single option from a group. -layout: component +tags: component +parent: radio-group --- Radios are designed to be used with [radio groups](/docs/components/radio-group). diff --git a/docs/docs/components/range.md b/docs/docs/components/range.md index c18be6ff2..bc7cc25b3 100644 --- a/docs/docs/components/range.md +++ b/docs/docs/components/range.md @@ -1,7 +1,7 @@ --- title: Range description: Ranges allow the user to select a single value within a given range using a slider. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/rating.md b/docs/docs/components/rating.md index 79d1e30f0..944b9b62b 100644 --- a/docs/docs/components/rating.md +++ b/docs/docs/components/rating.md @@ -1,7 +1,7 @@ --- title: Rating description: Ratings give users a way to quickly view and provide feedback. -layout: component +tags: component --- ```html {.example} @@ -138,4 +138,4 @@ You can also use the `getSymbol` property to render different icons based on val return ``; }; -``` \ No newline at end of file +``` diff --git a/docs/docs/components/relative-time.md b/docs/docs/components/relative-time.md index ab5d5a4be..f58846acc 100644 --- a/docs/docs/components/relative-time.md +++ b/docs/docs/components/relative-time.md @@ -1,7 +1,7 @@ --- title: Relative Time description: Outputs a localized time phrase relative to the current date and time. -layout: component +tags: component --- Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). No language packs are required. diff --git a/docs/docs/components/resize-observer.md b/docs/docs/components/resize-observer.md index 2fcd70bda..abeca1853 100644 --- a/docs/docs/components/resize-observer.md +++ b/docs/docs/components/resize-observer.md @@ -1,7 +1,7 @@ --- title: Resize Observer description: The Resize Observer component offers a thin, declarative interface to the ResizeObserver API. -layout: component +tags: component --- The resize observer will report changes to the dimensions of the elements it wraps through the `wa-resize` event. When emitted, a collection of [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) objects will be attached to `event.detail` that contains the target element and information about its dimensions. diff --git a/docs/docs/components/select.md b/docs/docs/components/select.md index 37b57f9d3..3a194ecd6 100644 --- a/docs/docs/components/select.md +++ b/docs/docs/components/select.md @@ -1,7 +1,7 @@ --- title: Select description: Selects allow you to choose items from a menu of predefined options. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/skeleton.md b/docs/docs/components/skeleton.md index 741cb9e74..f5d058c91 100644 --- a/docs/docs/components/skeleton.md +++ b/docs/docs/components/skeleton.md @@ -1,7 +1,7 @@ --- title: Skeleton description: Skeletons are used to provide a visual representation of where content will eventually be drawn. -layout: component +tags: component --- These are simple containers for scaffolding layouts that mimic what users will see when content has finished loading. This prevents large areas of empty space during asynchronous operations. diff --git a/docs/docs/components/spinner.md b/docs/docs/components/spinner.md index 97e432e0d..0a056cc14 100644 --- a/docs/docs/components/spinner.md +++ b/docs/docs/components/spinner.md @@ -1,7 +1,7 @@ --- title: Spinner description: Spinners are used to show the progress of an indeterminate operation. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/split-panel.md b/docs/docs/components/split-panel.md index af5592c0a..4e0b2f0e3 100644 --- a/docs/docs/components/split-panel.md +++ b/docs/docs/components/split-panel.md @@ -1,7 +1,7 @@ --- title: Split Panel description: Split panels display two adjacent panels, allowing the user to reposition them. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/switch.md b/docs/docs/components/switch.md index 44eb52631..b8af9e3f5 100644 --- a/docs/docs/components/switch.md +++ b/docs/docs/components/switch.md @@ -1,7 +1,7 @@ --- title: Switch description: Switches allow the user to toggle an option on or off. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/tab-group.md b/docs/docs/components/tab-group.md index fb2f8ba6d..95cc5f0ec 100644 --- a/docs/docs/components/tab-group.md +++ b/docs/docs/components/tab-group.md @@ -1,7 +1,7 @@ --- title: Tab Group description: Tab groups organize content into a container that shows one section at a time. -layout: component +tags: component --- Tab groups make use of [tabs](/docs/components/tab) and [tab panels](/docs/components/tab-panel). Each panel should have a name that's unique within the tab group, and tabs should have a `panel` attribute that points to the respective panel's name. @@ -125,7 +125,7 @@ You can make a tab closable by adding a close button next to the tab and inside const closableTab = tabGroup.querySelectorAll('wa-tab')[1]; const closeButton = tabGroup.querySelector('wa-icon-button'); const restoreButton = tabGroup.nextElementSibling.nextElementSibling; - + // Remove the tab when the close button is clicked closeButton.addEventListener('click', () => { closableTab.remove(); diff --git a/docs/docs/components/tab-panel.md b/docs/docs/components/tab-panel.md index 420848acc..f734016be 100644 --- a/docs/docs/components/tab-panel.md +++ b/docs/docs/components/tab-panel.md @@ -1,7 +1,8 @@ --- title: Tab Panel description: Tab panels are used inside tab groups to display tabbed content. -layout: component +tags: component +parent: tab-group --- ```html {.example} diff --git a/docs/docs/components/tab.md b/docs/docs/components/tab.md index 08cb67366..849070643 100644 --- a/docs/docs/components/tab.md +++ b/docs/docs/components/tab.md @@ -1,9 +1,10 @@ --- title: Tab description: Tabs are used inside tab groups to represent and activate tab panels. -layout: component +tags: component +parent: tab-group --- :::info Additional demonstrations can be found in the [tab group examples](/docs/components/tab-group). -::: \ No newline at end of file +::: diff --git a/docs/docs/components/tag.md b/docs/docs/components/tag.md index a64f99531..d98b71571 100644 --- a/docs/docs/components/tag.md +++ b/docs/docs/components/tag.md @@ -1,7 +1,7 @@ --- title: Tag description: Tags are used as labels to organize things or to indicate a selection. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md index 4ea1807dc..66c0207c8 100644 --- a/docs/docs/components/textarea.md +++ b/docs/docs/components/textarea.md @@ -1,7 +1,7 @@ --- title: Textarea description: Textareas collect data from the user and allow multiple lines of text. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/tooltip.md b/docs/docs/components/tooltip.md index f009874eb..b502144bb 100644 --- a/docs/docs/components/tooltip.md +++ b/docs/docs/components/tooltip.md @@ -1,7 +1,7 @@ --- title: Tooltip description: Tooltips display additional information based on a specific action. -layout: component +tags: component --- @@ -172,4 +172,4 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto| padding: var(--wa-space-m); } -``` \ No newline at end of file +``` diff --git a/docs/docs/components/tree-item.md b/docs/docs/components/tree-item.md index 22ad3d07e..9673f113f 100644 --- a/docs/docs/components/tree-item.md +++ b/docs/docs/components/tree-item.md @@ -1,7 +1,7 @@ --- title: Tree Item description: A tree item serves as a hierarchical node that lives inside a tree. -layout: component +tags: component --- ```html {.example} diff --git a/docs/docs/components/tree.md b/docs/docs/components/tree.md index 261af841f..a81e811b5 100644 --- a/docs/docs/components/tree.md +++ b/docs/docs/components/tree.md @@ -1,7 +1,7 @@ --- title: Tree description: Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user. -layout: component +tags: component --- ```html {.example} @@ -255,4 +255,4 @@ Decorative icons can be used before labels to provide hints for each node. -``` \ No newline at end of file +``` diff --git a/docs/docs/components/viewport-demo.md b/docs/docs/components/viewport-demo.md index 4f9ec5b1b..bbe013f88 100644 --- a/docs/docs/components/viewport-demo.md +++ b/docs/docs/components/viewport-demo.md @@ -1,7 +1,8 @@ --- title: Viewport Demo description: Viewport demos can be used to display an iframe as a resizable, zoomable preview. -layout: component +tags: component +noAlpha: true --- ```html {.example} diff --git a/docs/docs/components/visually-hidden.md b/docs/docs/components/visually-hidden.md index 799620756..851fd0bd6 100644 --- a/docs/docs/components/visually-hidden.md +++ b/docs/docs/components/visually-hidden.md @@ -1,7 +1,7 @@ --- title: Visually Hidden description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen. -layout: component +tags: component --- According to [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/), "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."