@daffodil/design 0.92.3 → 0.93.0

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

@@ -7,7 +7,8 @@ Tag supports flexible content projection to allow for various combinations of ic
 <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,54 @@ 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 dismiss 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
+### Disabled tags
 Set `disabled` to `true` to disable the tag. Disabled tags cannot be dismissed.
 
-```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`.
 
 <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.
+- Dismissible 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.
+- Use the `status` property to communicate semantic meaning, rather than relying on color alone.

package/textarea/README.md

@@ -2,12 +2,12 @@
 Textarea works alongside the HTML textarea element, with additional custom styling and functionality.
 
 ## Overview
-Textarea has the same functionality as a native HTML textarea element, with additional custom styling and functionality. It **cannot** be used by itself and must be contained within a [form field](/libs/design/src/atoms/form/form-field/README.md).
+Textarea has the same functionality as a native HTML textarea element, with additional custom styling and functionality. It **cannot** be used by itself and must be contained within a [form field](/libs/design/form-field/README.md).
 
 <daff-docs-example-viewer example="basic-textarea"></daff-docs-example-viewer>
 
 ## Usage
-To use textarea, import `DaffTextareaComponent` directly into your custom component:
+Import `DaffTextareaComponent` into your component:
 
 ```ts
 import { DaffTextareaComponent } from '@daffodil/design/textarea';
@@ -25,7 +25,6 @@ export class CustomComponent {}
 ## Anatomy
 Textarea 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
 ```html
 <daff-form-field>
   <daff-form-label>Comments</daff-form-label>
@@ -33,7 +32,7 @@ Textarea must be used inside `<daff-form-field>` to enable proper state manageme
 </daff-form-field>
 ```
 
-## States
+## Features
 
 ### Disabled
 Textarea can be disabled in two ways: using Angular's reactive forms with `FormControl` or with the native HTML `disabled` attribute.
@@ -47,12 +46,15 @@ Textarea supports validation and error messages through Angular's form validatio
 
 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
 Hints provide additional context or instructions to help users complete the textarea 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.
 
 <daff-docs-example-viewer example="textarea-hint"></daff-docs-example-viewer>
 
 ## Accessibility
-When `<daff-form-label>` is used within `<daff-form-field>`, the label automatically associates with the textarea using the `for` and `id` attributes.
 
-If a `<daff-form-label>` is not specified, use the `<label>` element to associate text with form elements explicitly. The `for` attribute of the label must exactly match the `id` of the form control.
+### Built-in behavior
+- When `<daff-form-label>` is used within `<daff-form-field>`, the label automatically associates with the textarea using the `for` and `id` attributes.
+
+### Developer responsibilities
+- If a `<daff-form-label>` is not specified, use the `<label>` element to associate text with form elements explicitly. The `for` attribute of the label must exactly match the `id` of the form control.

package/toast/README.md

@@ -4,81 +4,79 @@ Toasts are notifications that provide application-level information. They are de
 ## Overview
 Toasts communicate updates about actions or events that require attention but are not directly tied to specific page content.
 
-For short messages tied to page-level content or actions, use the [Notification](/libs/design/notification/README.md) component.
+For short messages tied to page-level content or actions, use the [notification](/libs/design/notification/README.md) component.
 
 <daff-docs-example-viewer example="default-toast"></daff-docs-example-viewer>
 
 ## Usage
-Add `provideDaffToast()` to the root provider of your application to enable toast functionality:
+Add `provideDaffToast()` to your application's root providers:
 
 ```ts
+import { ApplicationConfig } from '@angular/core';
 import { provideDaffToast } from '@daffodil/design/toast';
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
     provideDaffToast(),
-  ]
-)}
-
-export class AppModule {}
+  ],
+};
 ```
 
-## Anatomy
-When opening a toast with the `DaffToastService`, you can provide a `title`, `message`, and `actions` to define its content.
-
-**Title**\
-The primary text that summarizes the purpose of the toast.
-
-**Message**\
-Provides additional details or context about the toast. Keep this brief—ideally one to two short sentences.
-
-**Actions**\
-Include actionable buttons related to the toast. **A maximum of two buttons is recommended** to keep the toast concise.
+Then inject `DaffToastService` to open toasts from your component:
 
 ```ts
-open() {
-  this.toast = this.toastService.open({
-    title: 'Update Available' + ' ' + this.count++,
-    message: 'A new version of this page is available.',
-    actions: [
-      { content: 'Update', color: 'theme-contrast', size: 'sm', eventEmitter: this.update },
-      { content: 'Remind me later', type: 'flat', size: 'sm', eventEmitter: this.closeToast },
-    ],
-  });
+import { DaffToastService } from '@daffodil/design/toast';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+})
+export class CustomComponent {
+  constructor(private toastService: DaffToastService) {}
 }
 ```
 
-## Dismissal
-Toasts can be dismissed automatically via a timed duration or manually with a close button.
+## Anatomy
+A toast is composed of a title, message, and optional actions:
 
-`duration` and `dismissible` can be configured when opening a toast with the `DaffToastService`.
+```ts
+this.toastService.open({
+  title: 'Update available',
+  message: 'A new version of this page is available.',
+  actions: [
+    { content: 'Update', color: 'theme-contrast', size: 'sm' },
+    { content: 'Remind me later', type: 'flat', size: 'sm' },
+  ],
+});
+```
 
-### Timed duration
-By default, toasts without actions dismiss automatically after `5000ms`. Toasts with actions remain visible until dismissed manually or until an action is taken.
+- **`title`**: The primary text that summarizes the purpose of the toast.
+- **`message`**: Additional details or context about the toast. Keep this brief — ideally one to two short sentences.
+- **`actions`**: Actionable buttons related to the toast. A maximum of two buttons is recommended to keep the toast concise.
+
+## Features
 
-> Actionable toasts should remain persistent. If a duration is required, make sure it is long enough for users to engage with the actions.
+### Dismissal
+Toasts can be dismissed automatically via a timed duration or manually with a close button. Both `duration` and `dismissible` can be configured when opening a toast with the `DaffToastService`.
 
-<daff-docs-example-viewer example="toast-with-custom-duration"></daff-docs-example-viewer>
+By default, toasts without actions dismiss automatically after `5000ms`. Toasts with actions remain visible until dismissed manually or until an action is taken.
 
-### Close button
-The close button is hidden by default. When a toast contains actions, the `dismissible` property is ignored.
+<daff-docs-example-viewer example="custom-duration-toast"></daff-docs-example-viewer>
 
-For non-actionable toasts, the close button can be displayed by setting `dismissible: true`.
+For non-actionable toasts, set `dismissible: true` to display a close button. When a toast contains actions, the `dismissible` property is ignored.
 
 <daff-docs-example-viewer example="dismissible-toast"></daff-docs-example-viewer>
 
-## Stacking
+### Stack limit
 A maximum of three toasts can be displayed at once. Toasts stack vertically with the most recent toast at the top.
 
-## Statuses
+### Statuses
 Toast status can be set when opening a toast through the `DaffToastService` by using a `DaffStatus` value.
 
 <daff-docs-example-viewer example="toast-status"></daff-docs-example-viewer>
 
-## Positions
-On desktop, toasts appear in the top-right corner by default.
-
-You can customize their position using the `position` property in `provideDaffToast()`:
+### Positions
+On desktop, toasts appear in the top-right corner by default. Customize their position using the `position` property in `provideDaffToast()`:
 
 ```ts
 providers: [
@@ -91,16 +89,21 @@ providers: [
 ],
 ```
 
-> Note: On mobile, toasts always appear in the bottom-center position, regardless of configuration settings.
+> **Note**
+>
+> On mobile, toasts always appear in the bottom-center position, regardless of configuration settings.
+
+## Best practices
+- Keep messages brief — toasts are temporary and easy to miss.
+- Limit actions to two buttons so the toast stays scannable.
+- Avoid setting a duration on actionable toasts, as they may disappear before the user can interact with them.
 
 ## Accessibility
-Toasts announce their messages using appropriate ARIA roles:
-- `role="status"` (default): Equivalent to `aria-live="polite"`, announcing messages without interrupting the user.
-- role="alertdialog": Used when a toast contains actions. The toast will be focus trapped, and focus immediately moves to the actions.
 
-Avoid setting a duration on actionable toasts, as they may disappear before the user can interact with them.
+### Built-in behavior
+- Toasts without actions use `role="status"` (equivalent to `aria-live="polite"`), announcing messages without interrupting the user.
+- Toasts with actions use `role="alertdialog"`, are focus trapped, and focus moves immediately to the actions.
+- `ESC` dismisses a focus trapped actionable toast.
 
-### Keyboard Interactions
-| Key   | Action |
-| ----- | ------ |
-| `ESC` |  Dismisses a toast if it has actions and is focus trapped. |
+### Developer responsibilities
+- Avoid setting a duration on actionable toasts so users have time to interact with them.

package/tree/README.md

@@ -2,14 +2,13 @@
 Trees display hierarchical information in a nested, expandable format.
 
 ## Overview
-Trees help users navigate complex structures by organizing content into parent and child relationships. They're commonly used for navigation menus, file browsers, and category lists. For flat lists without nested content, use the [navigation list](/libs/design/list/README.md) instead.
+Trees help users navigate complex structures by organizing content into parent and child relationships. They're commonly used for navigation menus, file browsers, and category lists. For flat lists without nested content, use the [Navigation List](/libs/design/list/README.md) instead.
 
 <daff-docs-example-viewer example="basic-tree"></daff-docs-example-viewer>
 
 ## Usage
 
-### Within a standalone component
-To use tree in a standalone component, import `DAFF_TREE_COMPONENTS` directly into your custom component:
+Import `DAFF_TREE_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_TREE_COMPONENTS } from '@daffodil/design/tree';
@@ -24,48 +23,13 @@ import { DAFF_TREE_COMPONENTS } from '@daffodil/design/tree';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use tree in a module, import `DaffTreeModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffTreeModule } from '@daffodil/design/tree';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-  declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffTreeModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> **Warning**
->
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Deprecation notice:**
+> 
+> `DaffTreeModule` is deprecated. Use the standalone component imports instead.
 
 ## Anatomy
-A tree consists of the following parts:
-
-### Container
-`<daff-tree>`: The main wrapper that holds the tree and accepts your data.
-
-### Node templates
-Define how each tree item looks:
+A tree is composed of a container, node templates, and tree items:
 
-- `#daffTreeItemWithChildrenTpl`: For items that can expand to show children. Click handling and icons are added automatically.
-- `#daffTreeItemTpl`: For items at the end of a branch with no children.
-
-### Tree item
-`[daffTreeItem]`: Added to links or buttons inside your templates to connect them to the tree.
-
-### Basic structure
 ```html
 <daff-tree [tree]="treeData">
   <ng-template #daffTreeItemWithChildrenTpl let-node>
@@ -78,10 +42,15 @@ Define how each tree item looks:
 </daff-tree>
 ```
 
+- **`<daff-tree>`**: The main wrapper that holds the tree and accepts your data.
+- **`#daffTreeItemWithChildrenTpl`**: The template for items that can expand to show children. Click handling and icons are added automatically.
+- **`#daffTreeItemTpl`**: The template for items at the end of a branch with no children.
+- **`[daffTreeItem]`**: Added to links or buttons inside your templates to connect them to the tree.
+
 ## Accessibility
 The tree follows the [disclosure navigation menu](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/) pattern rather than the [tree view](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) pattern.
 
-### Daffodil provides
+### Built-in behavior
 - Unique `id` automatically assigned to each tree item
 - `aria-expanded` indicating whether a parent item is open or closed