@daffodil/design 0.92.3 → 0.93.1

package/select/README.md

@@ -7,7 +7,7 @@ Use select when you need users to pick one option from a list. It works like a s
 <daff-docs-example-viewer example="basic-select"></daff-docs-example-viewer>
 
 ## Usage
-To use select, import the components directly into your custom component:
+Import `DAFF_SELECT_COMPONENTS` and `DAFF_FORM_FIELD_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_SELECT_COMPONENTS } from '@daffodil/design/select';
@@ -27,7 +27,6 @@ export class CustomComponent {}
 ## Anatomy
 Select must be used inside `<daff-form-field>` to enable proper state management and provide enhanced UI features such as hints, error messages, prefixes, and suffixes. The form field component also ensures accessibility compliance. For more details, see the [form field documentation](/libs/design/form-field/README.md).
 
-### Basic structure
 Use `daffSelectOption` to render a list of options in the select panel:
 
 ```html
@@ -43,7 +42,7 @@ Use `daffSelectOption` to render a list of options in the select panel:
 </daff-form-field>
 ```
 
-## States
+## Features
 
 ### Disabled
 Select can be disabled using Angular's reactive forms with `FormControl`.
@@ -57,15 +56,15 @@ Select supports validation and error messages through Angular's form validation
 
 Multiple error messages can be displayed conditionally based on the type of validation error. The form field component handles the styling and positioning of error messages.
 
-## Hints
-Hints provide additional context or instructions to help users complete the select field correctly. Use `<daff-hint>` within the form field to display helpful information below the textarea. Unlike error messages, hints are always visible and provide guidance rather than validation feedback.
+### Hints
+Hints provide additional context or instructions to help users complete the select field correctly. Use `<daff-hint>` within the form field to display helpful information below the select. Unlike error messages, hints are always visible and provide guidance rather than validation feedback.
 
 <daff-docs-example-viewer example="select-with-hint"></daff-docs-example-viewer>
 
 ## Accessibility
 Select follows the [Combobox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/). The combobox activator is combined with an inner `role="listbox"` element opened in a popup.
 
-### Daffodil provides
+### Built-in behavior
 - Automatic focus trapping when select panel is open
 - `aria-labelledby` associated with the `<daff-form-label>`
 - `aria-expanded` state management

package/select/src/select-theme.scss

@@ -32,7 +32,12 @@
 					border-top: 1px solid $border-color-light;
 				}
 
-				&:hover,
+				@media (hover: hover) {
+					&:hover {
+						background-color: daff-color($neutral, 10);
+					}
+				}
+
 				&.highlighted {
 					background-color: daff-color($neutral, 10);
 				}
@@ -57,7 +62,10 @@
 					border-top: 1px solid $border-color-dark;
 				}
 
-				&:hover,
+				@media (hover: hover) {
+					background-color: daff-color($neutral, 90);
+				}
+
 				&.highlighted {
 					background-color: daff-color($neutral, 90);
 				}

package/sidebar/README.md

@@ -206,7 +206,7 @@ body {
 
 ## Accessibility
 
-### Daffodil provides
+### Built-in
 - Automatic focus trapping for `over` and `under` modes (disabled for `side` and `side-fixed` modes)
 - Focus moves to the first tabbable element when sidebar opens
 - Focus returns to the previously focused element when sidebar closes

package/spinner/README.md

@@ -2,10 +2,13 @@
 A spinner is an animated indicator that lets users know content or action is being loaded.
 
 ## Overview
-Use a spinner to indicate a short, indeterminate loading state. It can appear on its own or paired with a loading message. For longer processes with measurable progress, use the [progress bar](/libs/design/progress-bar/README.md) component.
+Use a spinner to indicate a short, indeterminate loading state. It can appear on its own or paired with a loading message. For longer processes with measurable progress, use the [Progress Bar](/libs/design/progress-bar/README.md) component.
+
+<daff-docs-example-viewer example="basic-spinner"></daff-docs-example-viewer>
 
 ## Usage
-To use spinner, import `DAFF_SPINNER_COMPONENTS` directly into your custom component:
+
+Import `DAFF_SPINNER_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_SPINNER_COMPONENTS } from '@daffodil/design/spinner';
@@ -21,9 +24,7 @@ export class CustomComponent {}
 ```
 
 ## Anatomy
-
-### Label
-Labels are used to describe the loading state and provide context for users. They are optional.
+A spinner is composed of an animated indicator with an optional label:
 
 ```html
 <daff-spinner>
@@ -31,7 +32,8 @@ Labels are used to describe the loading state and provide context for users. The
 </daff-spinner>
 ```
 
-<daff-docs-example-viewer example="spinner-with-label"></daff-docs-example-viewer>
+- **`<daff-spinner>`**: The animated loading indicator.
+- **`<daff-spinner-label>`**: An optional label that describes the loading state and provides context for users.
 
 ## Features
 
@@ -43,14 +45,18 @@ Use the `color` property to change the color of a spinner.
 <daff-docs-example-viewer example="spinner-colors"></daff-docs-example-viewer>
 
 ### Sizes
-Use the `size` proeprty to change the size of a spinner. The default size is `md`.
+Use the `size` property to change the size of a spinner. The default size is `md`.
 
 <daff-docs-example-viewer example="spinner-sizes"></daff-docs-example-viewer>
 
 ## Accessibility
-The spinner has `role="status"` which announces content changes to assistive technologies.
 
-When using `<daff-spinner-label>`, the visible text serves as the accessible name. When no label is provided, the spinner defaults to `aria-label="loading"`. You can customize this with the `aria-label` input:
+### Built-in behavior
+- `role="status"` on the spinner announces content changes to assistive technologies.
+- When `<daff-spinner-label>` is used, its visible text serves as the accessible name. When no label is provided, the spinner defaults to `aria-label="loading"`.
+
+### Developer responsibilities
+- When no label is shown, customize the accessible name with the `aria-label` input to describe the loading state:
 
 ```html
 <daff-spinner aria-label="Saving changes"></daff-spinner>

package/switch/README.md

@@ -2,14 +2,13 @@
 A switch allows users to toggle the state of a single setting.
 
 ## Overview
-Switches provide a way to toggle between two states with a visual indicator of the current state. A label can be positioned on the left, right, top, or bottom of the switch. The switch can be set to a disabled state, display a loading indicator, or show a custom error message.
+Switches provide a way to toggle between two states with a visual indicator of the current state. A label can be positioned on the left, right, top, or bottom of the switch.
 
 <daff-docs-example-viewer example="basic-switch"></daff-docs-example-viewer>
 
 ## Usage
 
-### Within a standalone component
-To use switch, import `DAFF_SWITCH_COMPONENTS` directly into your custom component:
+Import `DAFF_SWITCH_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_SWITCH_COMPONENTS } from '@daffodil/design/switch';
@@ -24,17 +23,28 @@ import { DAFF_SWITCH_COMPONENTS } from '@daffodil/design/switch';
 export class CustomComponent {}
 ```
 
-## Sizes
+## Anatomy
+A switch consists of a toggle control with a label projected as content:
+
+```html
+<daff-switch>Wi-Fi</daff-switch>
+```
+
+- **`<daff-switch>`**: The switch control. The label is provided as projected content and is automatically associated with the toggle.
+
+## Features
+
+### Sizes
 A small switch variant is available for dense layouts. Use the `size="sm"` property to render a more compact version of a switch.
 
 <daff-docs-example-viewer example="switch-sizes"></daff-docs-example-viewer>
 
-## Disable a switch
+### Disabled switch
 Use the `disabled` property on switch to make it non-interactive.
 
 <daff-docs-example-viewer example="disabled-switch"></daff-docs-example-viewer>
 
-## Label positions
+### Label positions
 Use the `labelPosition` property to control the visual relationship between the switch and its label. By default, labels appear to the left of the switch control.
 
 <daff-docs-example-viewer example="switch-label-positions"></daff-docs-example-viewer>
@@ -42,6 +52,7 @@ Use the `labelPosition` property to control the visual relationship between the
 ## Accessibility
 Switch follows the [ARIA Switch design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
 
+### Built-in behavior
 - The switch control is implemented as a `<button>` element with a role of `switch`.
 - `aria-checked` is used to indicate the switch's on/off state.
 - Links the switch to its label `id` using `aria-labelledby`.

package/tabs/README.md

@@ -13,15 +13,13 @@ Tabs help organize related content into manageable sections, making it easier fo
 - Working within limited screen space
 - Allowing users to switch between content views without page navigation
 
-## When not to use
-Avoid tabs when:
+**When not to use**
 - Content needs to be compared or viewed simultaneously
-- Users need to see all content in a sequential sequence
+- Users need to see all content in a sequential order
 
 ## Usage
 
-### Within a standalone component
-To use tabs in a standalone component, import `DAFF_TABS_COMPONENTS` directly into your custom component:
+Import `DAFF_TABS_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
@@ -37,24 +35,8 @@ export class CustomComponent {}
 ```
 
 ## Anatomy
-A tabs component consists of the following components:
+A tabs component is composed of a container, tabs, labels, and panels:
 
-### Container
-**`<daff-tabs>`**: The wrapper component that contains all tabs.
-
-### Tab
-**`<daff-tab>`**: Represents a single tab that groups a label and its corresponding panel together.
-
-### Tab Label
-**`<daff-tab-label>`**: The clickable label that activates its corresponding tab panel. Labels can contain text, icons, or both.
-
-### Icon
-Use the `[daffPrefix]` or `[daffSuffix]` element to add a decorative icon before or after the label text. This provides quick visual cues about the tab's purpose.
-
-### Tab Panel
-**`<daff-tab-panel>`**: The content area displayed when a tab is active.
-
-### Basic structure
 ```html
 <daff-tabs>
   <daff-tab>
@@ -70,35 +52,45 @@ Use the `[daffPrefix]` or `[daffSuffix]` element to add a decorative icon before
 </daff-tabs>
 ```
 
+- **`<daff-tabs>`**: The wrapper component that contains all tabs.
+- **`<daff-tab>`**: A single tab that groups a label and its corresponding panel together.
+- **`<daff-tab-label>`**: The clickable label that activates its corresponding tab panel. Labels can contain text, icons, or both.
+- **`<daff-tab-panel>`**: The content area displayed when a tab is active.
+- Add the `[daffPrefix]` or `[daffSuffix]` directive to an icon to place it before or after the label text. This provides a quick visual cue about the tab's purpose.
+
 ## Features
 
 ### Link mode
-Tabs in link mode replace the tab buttons with anchors, allowing the selected tab to be connected to a URL.
+Set `linkMode` to `true` to replace the tab buttons with anchors, connecting the selected tab to a URL.
 
-By default, the current URL and `tab` query param will be used. These can be overriden with the `url` and `queryParam` inputs, respectively.
+By default, the current URL and `tab` query param are used. Override these with the `url` and `queryParam` inputs, respectively.
 
-```html
-<daff-tabs [linkMode]="true">
-</daff-tabs>
-```
+<daff-docs-example-viewer example="link-tabs"></daff-docs-example-viewer>
+
+### Initially selected tab
+Set the `initiallySelected` input to a tab's `id` to select that tab on load. Without it, the first tab is selected by default.
+
+<daff-docs-example-viewer example="initially-select-tab"></daff-docs-example-viewer>
+
+### Disabled tab
+Set the `disabled` property on a `<daff-tab>` to make it non-interactive.
+
+<daff-docs-example-viewer example="disabled-tabs"></daff-docs-example-viewer>
+
+### Programmatic selection
+Call the `select` method with a tab's `id` to change the active tab from your own code.
+
+<daff-docs-example-viewer example="custom-select-tabs"></daff-docs-example-viewer>
 
 ## Accessibility
 Tabs follow the [Tabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
 
-### Daffodil provides
-- `role="tablist"`, `role="tab"`, and `role="tabpanel"` on appropriate elements
-- Unique IDs automatically assigned to each tab (customizable via `id` attribute)
+### Built-in behavior
+- `role="tablist"`, `role="tab"`, and `role="tabpanel"` on the appropriate elements
+- Unique IDs automatically assigned to each tab (customizable via the `id` attribute)
 - `aria-labelledby` linking tab panels to their corresponding tab labels
 - `aria-selected` indicating the active tab
 
-#### Keyboard interactions
-| Key | Action |
-| --- | ------ |
-| `Left Arrow` |  Moves focus and activates the previous tab. If focus is on the first tab, focus moves to the last tab. |
-| `Right Arrow` |  Moves focus and activates the next tab. If focus is on the last tab, focus moves to the first tab. |
-| `Home` |  Moves focus and activates the first tab. |
-| `End` |  Moves focus and activates the last tab. |
-
 ### Developer responsibilities
 - Provide a meaningful `aria-label` on `<daff-tabs>` to describe the tab group
 - Keep tab labels concise and descriptive
@@ -111,3 +103,11 @@ Tabs follow the [Tabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/p
   </daff-tab>
 </daff-tabs>
 ```
+
+### Keyboard interactions
+| Key | Action |
+| --- | ------ |
+| `Left Arrow` |  Moves focus and activates the previous tab. If focus is on the first tab, focus moves to the last tab. |
+| `Right Arrow` |  Moves focus and activates the next tab. If focus is on the last tab, focus moves to the first tab. |
+| `Home` |  Moves focus and activates the first tab. |
+| `End` |  Moves focus and activates the last tab. |

package/tag/README.md

@@ -1,13 +1,14 @@
 # Tag
-Tags are compact visual indicators used to display short pieces of information such as status, categories, or labels.
+Tags are interactive indicators and filters that can be edited or removed, used to represent selections, categories, or applied filters.
 
 ## Overview
-Tag supports flexible content projection to allow for various combinations of icons, labels, and interactive elements within a consistent container.
+Tag supports flexible content projection to allow for various combinations of icons, labels, and interactive elements within a consistent container. Tags can be dismissed to remove a selection or filter, making them well suited for filter chips, applied search criteria, and editable selections.
 
 <daff-docs-example-viewer example="basic-tag"></daff-docs-example-viewer>
 
 ## Usage
-To use tag in a standalone component, import `DAFF_TAG_COMPONENTS` directly into your custom component.
+
+Import `DAFF_TAG_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_TAG_COMPONENTS } from '@daffodil/design/tag';
@@ -23,59 +24,58 @@ export class CustomComponent {}
 ```
 
 ## Anatomy
-Tags should always include a text label unless the icon is universally understood and accessible.
-
-### Icon
-Use the `[daffPrefix]` element to display a leading visual icon for a tag.
+A tag is composed of a wrapper, an optional prefix, a label, and an optional close button:
 
 ```html
-<daff-tag>
+<daff-tag [dismissible]="true" (closeTag)="onCloseTag()">
   <fa-icon [icon]="faCircleCheck" daffPrefix></fa-icon>
-  <div>Tag label</div>
+  Tag label
 </daff-tag>
 ```
 
+- **`<daff-tag>`**: The wrapper component that holds all tag content.
+- **`[daffPrefix]`**: A leading visual, typically an icon, displayed before the label.
+- **Label**: The text content of the tag, projected as a child element.
+- **Close button**: A trailing remove button, displayed when `dismissible` is `true`.
+
 ## Features
 
-### Dismissible tag
+### Dismissible tags
 Set `dismissible` to `true` to display a close button. The button emits a `closeTag` event when clicked.
 
-```html
-<daff-tag [dismissible]="true" (closeTag)="onCloseTag()">
-  <fa-icon [icon]="faCircleCheck" daffPrefix></fa-icon>
-  <div>Tag label</div>
-</daff-tag>
-```
+<daff-docs-example-viewer example="dismissible-tag"></daff-docs-example-viewer>
 
-### Disabled
-Set `disabled` to `true` to disable the tag. Disabled tags cannot be dismissed.
+### Disabled tags
+Set `disabled` to `true` to disable the tag. Disabled tags cannot be removed.
 
-```html
-<daff-tag [disabled]="true">
-  <fa-icon [icon]="faCircleCheck" daffPrefix></fa-icon>
-  <div>Disabled tag</div>
-</daff-tag>
-```
+<daff-docs-example-viewer example="disabled-tag"></daff-docs-example-viewer>
 
-## Sizes
+### Sizes
 Use the `size` property to control tag dimensions. Supported sizes: `sm`, `md` (default), `lg`.
 
 <daff-docs-example-viewer example="sizable-tag"></daff-docs-example-viewer>
 
-## Colors
+### Colors
 Use the `color` property to change the color of a tag. Supported colors: `primary`, `secondary`, `tertiary`, `dark`, `light`, `theme`, `theme-contrast`.
 
 <daff-docs-example-viewer example="colorable-tag"></daff-docs-example-viewer>
 
-## Status
+### Statuses
 Use the `status` property to convey semantic meaning. Supported statuses: `warn`, `critical`, `info`, `success`.
 
+> **Deprecation notice:**
+>
+> The `status` property is deprecated. Tags are intended for selections, categories, and applied filters, so use the `color` property instead.
+
 <daff-docs-example-viewer example="statusable-tag"></daff-docs-example-viewer>
 
 ## Accessibility
-No additional accessibility annotations are needed.
 
-### Keyboard interactions
-Default tags are not interactive and do not receive focus.
+### Built-in behavior
+- Default tags are not interactive and do not receive focus.
+- Removable tags include a focusable close button that can be activated with `Enter` or `Space`.
+- Disabled tags expose `aria-disabled="true"` and ignore close button activation.
 
-Dismissible tags include a focusable close button that can be activated with `Enter` or `Space`.
+### Developer responsibilities
+- Always provide a text label unless the icon is universally understood and accessible.
+- Communicate meaning through the tag's label or an accessible icon, rather than relying on color alone.

package/tag/src/tag-theme.scss

@@ -1,3 +1,4 @@
+// stylelint-disable selector-class-pattern
 @use '../../scss/theming' as *;
 
 @mixin daff-tag-theme($theme) {
@@ -18,119 +19,215 @@
 			background: daff-color($neutral, 20);
 			color: $black;
 
+			&::after {
+				background: daff-color($neutral, 30);
+			}
+
 			&.daff-primary {
 				background: daff-color($primary, 10);
 				color: daff-color($primary, 70);
+
+				&::after {
+					background: daff-color($primary, 20);
+				}
 			}
 
 			&.daff-secondary {
 				background: daff-color($secondary, 10);
 				color: daff-color($secondary, 70);
+
+				&::after {
+					background: daff-color($secondary, 20);
+				}
 			}
 
 			&.daff-tertiary {
 				background: daff-color($tertiary, 10);
 				color: daff-color($tertiary, 70);
+
+				&::after {
+					background: daff-color($tertiary, 20);
+				}
 			}
 
 			&.daff-dark {
 				background: daff-color($neutral, 90);
 				color: daff-color($neutral, 10);
+
+				&::after {
+					background: daff-color($neutral, 100);
+				}
 			}
 
 			&.daff-light {
 				background: daff-color($neutral, 10);
 				color: daff-color($neutral, 90);
+
+				&::after {
+					background: daff-color($neutral, 20);
+				}
 			}
 
 			&.daff-theme {
 				background: $white;
 				color: $black;
+
+				&::after {
+					background: daff-color($neutral, 20);
+				}
 			}
 
 			&.daff-theme-contrast {
 				background: $black;
 				color: $white;
+
+				&::after {
+					background: daff-color($neutral, 90);
+				}
 			}
 
 			&.daff-warn {
 				background: daff-color($warn, 10);
 				color: daff-color($warn, 70);
+
+				&::after {
+					background: daff-color($warn, 20);
+				}
 			}
 
 			&.daff-success {
 				background: daff-color($success, 10);
 				color: daff-color($success, 70);
+
+				&::after {
+					background: daff-color($success, 20);
+				}
 			}
 
 			&.daff-critical {
 				background: daff-color($critical, 10);
 				color: daff-color($critical, 70);
+
+				&::after {
+					background: daff-color($critical, 20);
+				}
 			}
 
 			&.daff-info {
 				background: daff-color($info, 10);
-				color: daff-color($info, 70);
+				color: daff-color($info, 90);
+
+				&::after {
+					background: daff-color($info, 20);
+				}
 			}
 		}
 
 		@include dark($mode) {
-			background: daff-color($neutral, 90);
+			background: daff-color($neutral, 80);
 			color: daff-color($neutral, 20);
 
+			&::after {
+				background: daff-color($neutral, 90);
+			}
+
 			&.daff-primary {
 				background: daff-color($primary, 90);
 				color: daff-color($primary, 10);
+
+				&::after {
+					background: daff-color($primary, 100);
+				}
 			}
 
 			&.daff-secondary {
 				background: daff-color($secondary, 90);
 				color: daff-color($secondary, 10);
+
+				&::after {
+					background: daff-color($secondary, 100);
+				}
 			}
 
 			&.daff-tertiary {
 				background: daff-color($tertiary, 90);
 				color: daff-color($tertiary, 10);
+
+				&::after {
+					background: daff-color($tertiary, 100);
+				}
 			}
 
 			&.daff-dark {
 				background: daff-color($neutral, 90);
 				color: daff-color($neutral, 10);
+
+				&::after {
+					background: daff-color($neutral, 100);
+				}
 			}
 
 			&.daff-light {
 				background: daff-color($neutral, 10);
 				color: daff-color($neutral, 90);
+
+				&::after {
+					background: daff-color($neutral, 30);
+				}
 			}
 
 			&.daff-theme {
 				background: $black;
 				color: $white;
+
+				&::after {
+					background: daff-color($neutral, 100);
+				}
 			}
 
 			&.daff-theme-contrast {
 				background: $white;
 				color: $black;
+
+				&::after {
+					background: daff-color($neutral, 20);
+				}
 			}
 
 			&.daff-warn {
 				background: daff-color($warn, 90);
 				color: daff-color($warn, 10);
+
+				&::after {
+					background: daff-color($warn, 100);
+				}
 			}
 
 			&.daff-success {
 				background: daff-color($success, 90);
 				color: daff-color($success, 10);
+
+				&::after {
+					background: daff-color($success, 100);
+				}
 			}
 
 			&.daff-critical {
 				background: daff-color($critical, 90);
 				color: daff-color($critical, 10);
+
+				&::after {
+					background: daff-color($critical, 100);
+				}
 			}
 
 			&.daff-info {
-				background: daff-color($info, 70);
+				background: daff-color($info, 80);
 				color: daff-color($info, 10);
+
+				&::after {
+					background: daff-color($neutral, 80);
+				}
 			}
 		}
 	}