diff --git a/packages/webawesome/docs/docs/components/button-group.md b/packages/webawesome/docs/docs/components/button-group.md index b84debe74..ce4c5ebf4 100644 --- a/packages/webawesome/docs/docs/components/button-group.md +++ b/packages/webawesome/docs/docs/components/button-group.md @@ -141,7 +141,7 @@ Dropdowns can be placed into button groups. ### Split Buttons -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. +Create a split button using a button and a dropdown. Use a [visually hidden](/docs/utilities/visually-hidden) label to ensure the dropdown is accessible to users with assistive devices. ```html {.example} diff --git a/packages/webawesome/docs/docs/components/comparison.md b/packages/webawesome/docs/docs/components/comparison.md index 9dfda62b9..c009ede7d 100644 --- a/packages/webawesome/docs/docs/components/comparison.md +++ b/packages/webawesome/docs/docs/components/comparison.md @@ -5,7 +5,7 @@ layout: component category: Imagery --- -This is especially useful for comparing images, but can be used for comparing any type of content (for an example of using it to compare entire UIs, check out our [theme pages](/docs/themes/default/)). +This is especially useful for comparing images, but can be used for comparing any type of content (for an example of using it to compare entire UIs, check out our [theme page](/docs/themes)). For best results, use content that shares 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/packages/webawesome/docs/docs/components/divider.md b/packages/webawesome/docs/docs/components/divider.md index 05b2f4ea9..37ced5e72 100644 --- a/packages/webawesome/docs/docs/components/divider.md +++ b/packages/webawesome/docs/docs/components/divider.md @@ -53,9 +53,9 @@ The default orientation for dividers is `horizontal`. Set `orientation` attribut ``` -### Menu Dividers +### Dropdown Dividers -Use dividers in [menus](/docs/components/menu) to visually group menu items. +Use dividers in [dropdowns](/docs/components/dropdown) to visually group dropdown items. ```html {.example} diff --git a/packages/webawesome/docs/docs/components/radio-group.md b/packages/webawesome/docs/docs/components/radio-group.md index 57528e6e3..f5d6cfde8 100644 --- a/packages/webawesome/docs/docs/components/radio-group.md +++ b/packages/webawesome/docs/docs/components/radio-group.md @@ -102,7 +102,7 @@ The default orientation for radio items is `vertical`. Set the `orientation` to ### Sizing Options -The size of [Radios](/docs/components/radio) will be determined by the Radio Group's `size` attribute. +The size of radios will be determined by the Radio Group's `size` attribute. ```html {.example} @@ -113,7 +113,7 @@ The size of [Radios](/docs/components/radio) will be determined by the Radio Gro ``` :::info -[Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) also have a `size` attribute, +[Radios](/docs/components/radio) also have a `size` attribute, which will override the inherited size when used. ::: diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index e4e2c3847..42210b8a9 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -249,7 +249,7 @@ Many of these changes and improvements were the direct result of feedback from u - 🚨 BREAKING: Renamed `` to `` and improved compatibility for non-image content - 🚨 BREAKING: Added slot detection to `` and `` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off - 🚨 BREAKING: Renamed the `image` slot to `media` for a more appropriate naming convention -- Added [a theme builder](/docs/themes/edit/) to create your own themes +- Added Theme Builder to create your own themes - Added a new Blog & News pattern category - Added a new free component: `` (#1 of 14 per stretch goals) - Added support for Duotone Thin, Light, and Regular styles and the Sharp Duotone family of styles to `` @@ -266,7 +266,7 @@ Many of these changes and improvements were the direct result of feedback from u ### Enhancements {data-no-outline} -- Added `appearance` to [``](/docs/components/details) and [``](/docs/components/card) and support for the [appearance utilities](/docs/utilities/appearance/) in the [`
` native styles](/docs/utilities/native/details). +- Added `appearance` to [``](/docs/components/details) and [``](/docs/components/card) and support for the appearance utilities in the [`
` native styles](/docs/utilities/native/#details). - Added an `orange` scale to all color palettes - Added the [`.wa-cloak` utility](/docs/utilities/fouce) to prevent FOUCE - Added the [`allDefined()` utility](/docs/usage/#all-defined) for awaiting component registration @@ -291,7 +291,7 @@ Many of these changes and improvements were the direct result of feedback from u - Revert `` structure and CSS to fix clipped content in dialogs (WA-A #123) and light dismiss in iOS Safari (WA-A #201) - Fixed a bug in `` that prevented light dismiss from working when clicking immediately above the color picker dropdown - Fixed a bug in `` that prevented Safari from animation progress changes -- Fixed the missing indeterminate icon in [native checkbox styles](/docs/utilities/native/checkbox) +- Fixed the missing indeterminate icon in [native checkbox styles](/docs/utilities/native/#form-controls) - Fixed a bug in `` where elements would stack instead of display inline - Docs fixes: - Fixed the search dialog's styles so it doesn't jump around as you search @@ -438,13 +438,13 @@ Many of these changes and improvements were the direct result of feedback from u ### Native styles {data-no-outline} - Added native styles for - [buttons](/docs/utilities/native/button), - [input fields](/docs/utilities/native/input), - [dialogs](/docs/utilities/native/dialog), - [details](/docs/utilities/native/details), - [tables](/docs/utilities/native/table), - [lists](/docs/utilities/native/lists), - and most [content elements](/docs/utilities/native/content). + [buttons](/docs/utilities/native/#buttons), + [input fields](/docs/utilities/native/#form-controls), + [dialogs](/docs/utilities/native/#dialog), + [details](/docs/utilities/native/#details), + [tables](/docs/utilities/native/#tables), + [lists](/docs/utilities/native/#lists), + and most [content elements](/docs/utilities/native/#typography). ### Style utilities {data-no-outline} @@ -452,7 +452,7 @@ Many of these changes and improvements were the direct result of feedback from u - Added [appearance utilities](/docs/utilities/appearance/) - Added [size utilities](/docs/utilities/size/) - Added [layout utilities](/docs/layout/#utilities) -- Added [`.wa-visually hidden`](/docs/utilities/a11y/#visually-hidden) utility +- Added [`.wa-visually hidden`](/docs/utilities/visually-hidden) utility - Added [``](/docs/components/page/#styles) native styles and utilities ### Components {data-no-outline} diff --git a/packages/webawesome/docs/docs/resources/contributing.md b/packages/webawesome/docs/docs/resources/contributing.md index 9af29f930..14434d585 100644 --- a/packages/webawesome/docs/docs/resources/contributing.md +++ b/packages/webawesome/docs/docs/resources/contributing.md @@ -164,7 +164,7 @@ This section can be a lot to digest in one sitting, so don't feel like you need Web Awesome is built with accessibility in mind. Creating generic components that are fully accessible to users with varying capabilities across a multitude of circumstances is a daunting challenge. Oftentimes, the solution to an a11y problem is not written in black and white and, therefore, we may not get it right the first time around. There are, however, guidelines we can follow in our effort to make Web Awesome an accessible foundation from which applications and websites can be built. -We take this commitment seriously, so please ensure your contributions have this goal in mind. If you need help with anything a11y-related, please [reach out to the community](/resources/community) for assistance. If you discover an accessibility concern within the library, please file a bug on the [issue tracker](https://github.com/shoelace-style/webawesome/issues). +We take this commitment seriously, so please ensure your contributions have this goal in mind. If you need help with anything a11y-related, please reach out on the [community chat](https://discord.gg/mg8f26C) for assistance. If you discover an accessibility concern within the library, please file a bug on the [issue tracker](https://github.com/shoelace-style/webawesome/issues). It's important to remember that, although accessibility starts with foundational components, it doesn't end with them. It everyone's responsibility to encourage best practices and ensure we're providing an optimal experience for all of our users. @@ -364,7 +364,7 @@ Form controls should support submission and validation through the following con ### System Icons -Avoid inlining SVG icons inside of templates. If a component requires an icon, make sure `` is a dependency of the component and use the [system library](/components/icon#customizing-the-system-library): +Avoid inlining SVG icons inside of templates. If a component requires an icon, make sure `` is a dependency of the component and use the [system library](/docs/components/icon#customizing-the-system-library): ```html diff --git a/packages/webawesome/docs/docs/utilities/frame.md b/packages/webawesome/docs/docs/utilities/frame.md index 0473d32f8..d93ec763c 100644 --- a/packages/webawesome/docs/docs/utilities/frame.md +++ b/packages/webawesome/docs/docs/utilities/frame.md @@ -139,7 +139,7 @@ Frames have a square aspect ratio by default. You can append `:square` (1 / 1), ## Border Radius -Frames have a square border radius by default. You can add any of the following [`wa-border-radius-*`](/docs/utilities/border-radius) classes to an element with `wa-frame` to specify the border radius: +Frames have a square border radius by default. You can add any of the following [`wa-border-radius-*`](/docs/utilities/rounding) classes to an element with `wa-frame` to specify the border radius: - `wa-border-radius-s` - `wa-border-radius-m` diff --git a/packages/webawesome/docs/docs/utilities/gap.md b/packages/webawesome/docs/docs/utilities/gap.md index 061930786..332348ed9 100644 --- a/packages/webawesome/docs/docs/utilities/gap.md +++ b/packages/webawesome/docs/docs/utilities/gap.md @@ -14,7 +14,7 @@ tags: layoutUtilities } -Web Awesome includes classes to set the `gap` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to change the space between items. +Web Awesome includes classes to set the `gap` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/utilities/cluster) and [stack](/docs/utilities/stack), to change the space between items. Or even by themselves — all gap properties also set `display: flex` with a specificity of 0 so that it can be trivially overridden. Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/tokens/space) tokens in your theme. diff --git a/packages/webawesome/docs/docs/utilities/rounding.md b/packages/webawesome/docs/docs/utilities/rounding.md index b0637d501..2495f4141 100644 --- a/packages/webawesome/docs/docs/utilities/rounding.md +++ b/packages/webawesome/docs/docs/utilities/rounding.md @@ -12,7 +12,7 @@ tags: styleUtilities } -Web Awesome includes classes to set an element's `border-radius` property. They can be used alongside Web Awesome layout utilities, like [frame](/docs/layout/frame), to round all corners of an element. +Web Awesome includes classes to set an element's `border-radius` property. They can be used alongside Web Awesome layout utilities, like [frame](/docs/utilities/frame), to round all corners of an element. Each class corresponds to one of the [`--wa-border-radius-*`](/docs/tokens/borders/#radius) tokens in your theme.