@daffodil/design 0.90.0 → 0.91.0

package/select/README.md

@@ -1,8 +1,111 @@
 # Select
+Select allows users to choose from a dropdown panel with a list of options, similar to a native `<select>` element but with an enhanced UI.
+
+## Overview
+Use select when you need users to pick one option from a list. It works like a standard dropdown menu but gives you more control over how options look and behave. It **cannot** be used by itself and must be contained within a [form field](/libs/design/form-field/README.md).
+
+<design-land-example-viewer-container example="basic-select"></design-land-example-viewer-container>
 
 ## Usage
-The consuming component should pass a list of option values and a form control into `daff-select` as props. The consumer is fully in charge of rendering the options and selected option. This is accomplished by passing templates into two content projection slots.
+To use select, import the components directly into your custom component:
+
+```ts
+import { DAFF_SELECT_COMPONENTS } from '@daffodil/design/select';
+import { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design/form-field';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DAFF_SELECT_COMPONENTS,
+    DAFF_FORM_FIELD_COMPONENTS,
+  ],
+})
+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
+<daff-form-field>
+  <daff-form-label>Select an address</daff-form-label>
+  <daff-select [options]="options" [formControl]="selectControl">
+    <ng-template daffSelectOption let-option="option">
+      <div>{{option.name}}</div>
+      <div>{{option.street}}</div>
+      <div>{{option.city}}, {{option.state}} {{option.postcode}}</div>
+    </ng-template>
+  </daff-select>
+</daff-form-field>
+```
+
+## States
+
+### Disabled
+Select can be disabled using Angular's reactive forms with `FormControl`.
+
+<design-land-example-viewer-container example="disabled-select"></design-land-example-viewer-container>
+
+### Error
+Select supports validation and error messages through Angular's form validation system. Use `<daff-error-message>` within the form field to display context-specific error messages. Error messages automatically appear when the select is invalid and has been touched or submitted.
+
+<design-land-example-viewer-container example="select-with-error"></design-land-example-viewer-container>
+
+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.
+
+<design-land-example-viewer-container example="select-with-hint"></design-land-example-viewer-container>
+
+## 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
+- Automatic focus trapping when select panel is open
+- `aria-labelledby` associated with the `<daff-form-label>`
+- `aria-expanded` state management
+
+### Developer responsibilities
+- Always provide labels for accessibility. Use `<daff-form-label>` within `<daff-form-field>` for the best experience with auto-labelling controls.
+
+### Keyboard interactions
+**When select panel is closed:**
+
+| Key | Action |
+| --- | ------ |
+| `Enter` / `Space` | Open the select panel |
+| `Down Arrow` | Open the select panel |
+| `Alt` + `Down Arrow` | Open the select panel |
+| `Up Arrow` | Open the select panel |
+| `Alt` + `Up Arrow` | Open the select panel |
+
+**When select panel is opened:**
+| Key | Action |
+| --- | ------ |
+| `Enter` / `Space` | Select the active option |
+| `Escape` | Close the select panel and return focus to select |
+| `Down Arrow` | Move focus to next option |
+| `Up Arrow` | Move focus to previous option |
+
+## Troubleshooting
+
+### Error: DaffSelectComponent needs to be used with the DaffFormFieldComponent
+This error is thrown when a select component is not used with a form field. Make sure your template looks like this:
 
-## Slots
-### `daffSelectOption`
-`daffSelectOption` provides the template for the list of options inside the select dropdown. Two values are bound to this slot context: `option` and `isSelected`. See `DaffSelectOptionDirectiveContext` for more info.
+```html
+<daff-form-field>
+  <daff-form-label>Select an address</daff-form-label>
+  <daff-select [options]="options" [formControl]="selectControl">
+    <ng-template daffSelectOption let-option="option">
+      <div>{{option.name}}</div>
+      <div>{{option.street}}</div>
+      <div>{{option.city}}, {{option.state}} {{option.postcode}}</div>
+    </ng-template>
+  </daff-select>
+</daff-form-field>
+```

package/sidebar/README.md

@@ -214,11 +214,3 @@ body {
 ### Developer responsibilities
 - Apply a meaningful `role` attribute (e.g., `role="navigation"`) to describe the sidebar's purpose
 - Provide an `aria-label` when no title or header is present
-
-## Deprecations
-`[daffSidebarHeaderAction]` has been deprecated in favor of the `dismissible` property. Replace `[daffSidebarHeaderAction]` with `<daff-sidebar-header [dismissible]="true">`
-
-```html
-<daff-sidebar-header [dismissible]="true">
-</daff-sidebar-header>
-```

package/sidebar/index.d.ts

@@ -308,24 +308,12 @@ declare class DaffSidebarHeaderTitleDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSidebarHeaderTitleDirective, "[daffSidebarHeaderTitle]", never, {}, {}, never, never, true, never>;
 }
 
-/**
- * @deprecated in favor of the `dismissible` property on `DaffSidebarHeaderComponent`. Deprecated in version 0.88.0. Will be removed in version 0.91.0.
- */
-declare class DaffSidebarHeaderActionDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarHeaderActionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSidebarHeaderActionDirective, "[daffSidebarHeaderAction]", never, {}, {}, never, never, true, never>;
-}
-
 /**
  * @deprecated in favor of {@link DAFF_SIDEBAR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 declare class DaffSidebarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffSidebarModule, never, [typeof i1$1.CommonModule, typeof i2.A11yModule, typeof DaffSidebarComponent, typeof DaffSidebarViewportComponent, typeof DaffSidebarHeaderComponent, typeof DaffSidebarFooterComponent, typeof DaffSidebarHeaderTitleDirective, typeof DaffSidebarHeaderActionDirective], [typeof DaffSidebarComponent, typeof DaffSidebarViewportComponent, typeof DaffSidebarHeaderComponent, typeof DaffSidebarFooterComponent, typeof DaffSidebarHeaderTitleDirective, typeof DaffSidebarHeaderActionDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffSidebarModule, never, [typeof i1$1.CommonModule, typeof i2.A11yModule, typeof DaffSidebarComponent, typeof DaffSidebarViewportComponent, typeof DaffSidebarHeaderComponent, typeof DaffSidebarFooterComponent, typeof DaffSidebarHeaderTitleDirective], [typeof DaffSidebarComponent, typeof DaffSidebarViewportComponent, typeof DaffSidebarHeaderComponent, typeof DaffSidebarFooterComponent, typeof DaffSidebarHeaderTitleDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffSidebarModule>;
 }
 
@@ -376,7 +364,7 @@ declare const daffSidebarIsFloatingMode: (mode: DaffSidebarModeEnum) => boolean;
 /**
  * @docs-private
  */
-declare const DAFF_SIDEBAR_COMPONENTS: readonly [typeof DaffSidebarComponent, typeof DaffSidebarViewportComponent, typeof DaffSidebarHeaderComponent, typeof DaffSidebarFooterComponent, typeof DaffSidebarHeaderTitleDirective, typeof DaffSidebarHeaderActionDirective];
+declare const DAFF_SIDEBAR_COMPONENTS: readonly [typeof DaffSidebarComponent, typeof DaffSidebarViewportComponent, typeof DaffSidebarHeaderComponent, typeof DaffSidebarFooterComponent, typeof DaffSidebarHeaderTitleDirective];
 
-export { DAFF_SIDEBAR_COMPONENTS, DaffSidebarComponent, DaffSidebarFooterComponent, DaffSidebarHeaderActionDirective, DaffSidebarHeaderComponent, DaffSidebarHeaderTitleDirective, DaffSidebarModeEnum, DaffSidebarModule, DaffSidebarService, DaffSidebarSideEnum, DaffSidebarViewportComponent, daffSidebarIsDockedMode, daffSidebarIsFloatingMode };
+export { DAFF_SIDEBAR_COMPONENTS, DaffSidebarComponent, DaffSidebarFooterComponent, DaffSidebarHeaderComponent, DaffSidebarHeaderTitleDirective, DaffSidebarModeEnum, DaffSidebarModule, DaffSidebarService, DaffSidebarSideEnum, DaffSidebarViewportComponent, daffSidebarIsDockedMode, daffSidebarIsFloatingMode };
 export type { DaffSidebarMode, DaffSidebarRegistration, DaffSidebarSide };

package/switch/README.md

@@ -4,10 +4,12 @@ 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.
 
+<design-land-example-viewer-container example="basic-switch"></design-land-example-viewer-container>
+
 ## Usage
 
 ### Within a standalone component
-To use a switch in a standalone component, import `DAFF_SWITCH_COMPONENTS` directly into your custom component:
+To use switch, import `DAFF_SWITCH_COMPONENTS` directly into your custom component:
 
 ```ts
 import { DAFF_SWITCH_COMPONENTS } from '@daffodil/design/switch';
@@ -22,41 +24,31 @@ import { DAFF_SWITCH_COMPONENTS } from '@daffodil/design/switch';
 export class CustomComponent {}
 ```
 
-## Examples
-
-### Basic Switch
-A basic switch can be toggled by setting the `checked` property to `true` or `false`. By default, this is set to `false`.
+## Sizes
+A small switch variant is available for dense layouts. Use the `size="sm"` property to render a more compact version of a switch.
 
-<design-land-example-viewer-container example="basic-switch"></design-land-example-viewer-container>
+<design-land-example-viewer-container example="switch-sizes"></design-land-example-viewer-container>
 
-### Disabled Switch
-A switch with the `disabled` property will be non-interactive.
+## Disable a switch
+Use the `disabled` property on switch to make it non-interactive.
 
 <design-land-example-viewer-container example="disabled-switch"></design-land-example-viewer-container>
 
-### Loading Switch
-A switch can display a loading state by setting `loading` to `true`. This will also disable the switch.
-
-<design-land-example-viewer-container example="loading-switch"></design-land-example-viewer-container>
-
-### Switch with Error
-An error message can be displayed by setting `error` to `true` and including a `daff-error-message` to show the message text.
-
-<design-land-example-viewer-container example="switch-error"></design-land-example-viewer-container>
-
-### Changing Label Position
-The label position can be changed by setting the `labelPosition` property. The default position is `left`.
-
-Supported positions: `left | right | top | bottom`
+## 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.
 
 <design-land-example-viewer-container example="switch-label-positions"></design-land-example-viewer-container>
 
-
 ## Accessibility
-Switches follow the [ARIA Switch design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
+Switch follows the [ARIA Switch design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
+
+- 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`.
 
-### Keyboard Interactions
+### Keyboard interactions
 | Key | Action |
 | --- | ------ |
-| Space |  Toggles the switch to the opposite state. |
-| Tab |  Moves to next component on the page. |
+| Tab |  Moves focus to or away from the switch control. |
+| Space |  Changes the switch's state between on and off. |
+| Enter |  Changes the switch's state between on and off. |

package/switch/index.d.ts

@@ -1,73 +1,43 @@
 import * as i0 from '@angular/core';
 import { EventEmitter } from '@angular/core';
+import * as i1 from '@daffodil/design';
+import { DaffSizableDirective, DaffSizeSmallType, DaffDisableableDirective } from '@daffodil/design';
 
-type DaffLabelPosition = 'daff-left' | 'daff-right' | 'daff-top' | 'daff-bottom';
+type DaffSwitchLabelPosition = 'left' | 'right' | 'top' | 'bottom';
 
+type DaffSwitchSize = DaffSizeSmallType;
 /**
  * The switch component provides a way to toggle between two settings.
  *
  * ```html
- * <daff-switch>
- *  Label
- * </daff-switch>
+ * <daff-switch>Label</daff-switch>
  * ```
  */
-declare class DaffSwitchComponent {
+declare class DaffSwitchComponent extends DaffSizableDirective<DaffSwitchSize> {
+    private disabledDirective;
     /**
-     * Whether the switch is disabled and/or loading.
-     */
-    get disabled(): any;
-    set disabled(value: any);
-    /**
-     * @docs-private
-     */
-    get disabledAttribute(): boolean;
-    /**
-     * @docs-private
-     */
-    get ariaDisabled(): boolean;
-    /**
-     * @docs-private
+     * The position of the label relative to the switch.
      */
-    get classes(): string;
+    labelPosition: DaffSwitchLabelPosition;
+    constructor(disabledDirective: DaffDisableableDirective);
     /**
-     * Whether the switch is loading.
+     * Whether the switch is disabled.
      */
-    loading: boolean;
+    get disabled(): any;
+    set disabled(value: any);
     /**
      * Current state of switch (on/off).
      */
     checked: boolean;
-    /**
-     * The position of the label relative to the switch.
-     */
-    labelPosition: DaffLabelPosition;
-    /**
-     * Whether the switch shows an error.
-     */
-    error: boolean;
     /**
      * @docs-private
      */
-    _disabled: boolean;
-    handleKeydown(event: KeyboardEvent): void;
+    labelId: string;
     /**
-     * @docs-private
-     */
-    private externalAriaLabel;
-    /**
-     * aria-label for the switch.
-     */
-    ariaLabel: string;
-    /**
-     * A unique id for the switch.
-     *
-     * The `id` is automatically generated by linking the prefix 'daff-switch-' with an incrementing number. This value can be customized by passing a different `id` value via the component's `id` input.
+     * The unique id of the switch. Defaults to an autogenerated value. When using this,
+     * it's your responsibility to ensure that the id for each switch is unique.
      *
-     * @example Using the `id` property
-     * ```html
-     * <daff-switch [id]="'custom-id'"></daff-switch>
-     * ```
+     * It gets assigned to the `for` attribute on the `<label>` inside of the switch.
      */
     id: string;
     /**
@@ -79,7 +49,7 @@ declare class DaffSwitchComponent {
      */
     onToggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSwitchComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSwitchComponent, "daff-switch", never, { "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "error": { "alias": "error"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "toggled": "toggled"; }, never, ["*", "daff-error-message"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSwitchComponent, "daff-switch", never, { "labelPosition": { "alias": "labelPosition"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "toggled": "toggled"; }, never, ["*"], true, [{ directive: typeof i1.DaffSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
 }
 
 /**

package/switch/src/switch-theme.scss

@@ -1,45 +1,53 @@
 @use '../../scss/theming' as *;
 
+// stylelint-disable selector-class-pattern
 @mixin daff-switch-theme($theme) {
 	$primary: daff-get-palette($theme, primary);
 	$white: daff-get-base-color($theme, 'white');
 	$neutral: daff-get-palette($theme, neutral);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
 	$mode: daff-get-theme-mode($theme);
 
 	.daff-switch {
-		&__toggle {
-			border: 2px solid transparent;
+		$root: '.daff-switch';
 
-			&.daff-checked {
+		&__label {
+			color: $base-contrast;
+		}
+
+		&.checked {
+			#{$root}__toggle {
 				background-color: daff-color($primary);
 			}
+		}
 
-			@include light($mode) {
+		@include light($mode) {
+			&__toggle {
 				background-color: daff-color($neutral, 30);
 
-				&:focus-within {
-					border: 2px solid daff-color($neutral, 20);
-				}
-
 				&::before {
 					background-color: $white;
 				}
-			}
 
-			@include dark($mode) {
-				background-color: daff-color($neutral, 80);
-
-				&:focus-within {
-					border: 2px solid daff-color($neutral, 90);
+				&:focus {
+					&::after {
+						outline: 2px solid rgba($base-contrast, 0.08);
+					}
 				}
+			}
+		}
+
+		@include dark($mode) {
+			&__toggle {
+				background-color: daff-color($neutral, 70);
 
 				&::before {
-					background-color: daff-color($neutral, 40);
+					background-color: $white;
 				}
 
-				&.daff-checked {
-					&::before {
-						background-color: $white;
+				&:focus {
+					&::after {
+						outline: 2px solid rgba($base-contrast, 0.15);
 					}
 				}
 			}

package/tabs/index.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { TemplateRef, ElementRef, AfterContentInit, OnInit, EventEmitter, QueryList, ChangeDetectorRef } from '@angular/core';
 import * as i1 from '@daffodil/design';
-import { DaffPrefixDirective, DaffSuffixDirective, DaffSelectableDirective } from '@daffodil/design';
+import { DaffDisableableDirective, DaffPrefixDirective, DaffSuffixDirective, DaffSelectableDirective } from '@daffodil/design';
 import { Location } from '@angular/common';
 import { Params } from '@angular/router';
 
@@ -24,10 +24,13 @@ import { Params } from '@angular/router';
  * ```
  */
 declare class DaffTabComponent {
+    private disabledDirective;
     /**
+     * @docs-private
+     *
      * Whether the tab is disabled.
      */
-    disabled: boolean;
+    get disabled(): boolean;
     /**
      * @docs-private
      */
@@ -45,9 +48,9 @@ declare class DaffTabComponent {
      * @docs-private
      */
     panelId: string;
-    constructor();
+    constructor(disabledDirective: DaffDisableableDirective);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabComponent, "daff-tab", never, { "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, ["daff-tab-label", "daff-tab-panel"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabComponent, "daff-tab", never, { "id": { "alias": "id"; "required": false; }; }, {}, never, ["daff-tab-label", "daff-tab-panel"], true, [{ directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
 }
 
 /**

package/tag/src/tag-theme.scss

@@ -9,12 +9,14 @@
 	$critical: daff-get-palette($theme, critical);
 	$success: daff-get-palette($theme, success);
 	$neutral: daff-get-palette($theme, neutral);
+	$black: daff-get-base-color($theme, 'black');
+	$white: daff-get-base-color($theme, 'white');
 	$mode: daff-get-theme-mode($theme);
 
 	.daff-tag {
 		@include light($mode) {
 			background: daff-color($neutral, 20);
-			color: daff-color($neutral, 110);
+			color: $black;
 
 			&.daff-primary {
 				background: daff-color($primary, 10);
@@ -42,13 +44,13 @@
 			}
 
 			&.daff-theme {
-				background: daff-color($neutral, 0);
-				color: daff-color($neutral, 110);
+				background: $white;
+				color: $black;
 			}
 
 			&.daff-theme-contrast {
-				background: daff-color($neutral, 110);
-				color: daff-color($neutral, 0);
+				background: $black;
+				color: $white;
 			}
 
 			&.daff-warn {
@@ -102,13 +104,13 @@
 			}
 
 			&.daff-theme {
-				background: daff-color($neutral, 110);
-				color: daff-color($neutral, 0);
+				background: $black;
+				color: $white;
 			}
 
 			&.daff-theme-contrast {
-				background: daff-color($neutral, 0);
-				color: daff-color($neutral, 110);
+				background: $white;
+				color: $black;
 			}
 
 			&.daff-warn {

package/textarea/README.md

@@ -1,8 +1,8 @@
 # Textarea
-Textarea allows a native HTML `<textarea>` element to work with the [Form Field](/libs/design/src/atoms/form/form-field/README.md) component.
+Textarea works alongside the HTML textarea element, with additional custom styling and functionality.
 
 ## Overview
-The textarea component 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 [DaffFormFieldComponent](/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/src/atoms/form/form-field/README.md).
 
 <design-land-example-viewer-container example="basic-textarea"></design-land-example-viewer-container>
 
@@ -22,7 +22,37 @@ import { DaffTextareaComponent } from '@daffodil/design/textarea';
 export class CustomComponent {}
 ```
 
-## Examples
+## 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).
 
-### Disabled textarea
-<design-land-example-viewer-container example="basic-textarea"></design-land-example-viewer-container>
+### Basic structure
+```html
+<daff-form-field>
+  <daff-form-label>Comments</daff-form-label>
+  <textarea daff-textarea name="comments"></textarea>
+</daff-form-field>
+```
+
+## States
+
+### Disabled
+Textarea can be disabled in two ways: using Angular's reactive forms with `FormControl` or with the native HTML `disabled` attribute.
+
+<design-land-example-viewer-container example="textarea-disabled"></design-land-example-viewer-container>
+
+### Error
+Textarea supports validation and error messages through Angular's form validation system. Use `<daff-error-message>` within the form field to display context-specific error messages. Error messages automatically appear when the textarea is invalid and has been touched or submitted.
+
+<design-land-example-viewer-container example="textarea-error"></design-land-example-viewer-container>
+
+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 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.
+
+<design-land-example-viewer-container example="textarea-hint"></design-land-example-viewer-container>
+
+## 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.

package/tree/index.d.ts

@@ -164,12 +164,6 @@ declare class DaffTreeComponent implements OnInit, OnChanges {
      * @docs-private
      */
     ngOnChanges(changes: SimpleChanges): void;
-    /**
-     * @docs-private
-     *
-     * The track-by function used to reduce tree-item re-renders
-     */
-    trackByTreeElement(index: number, el: any): any;
     /**
      * @docs-private
      */

package/tree/src/tree-theme.scss

@@ -2,12 +2,8 @@
 
 @mixin daff-tree-theme($theme) {
 	$primary: daff-get-palette($theme, primary);
-	$secondary: daff-get-palette($theme, secondary);
-	$tertiary: daff-get-palette($theme, tertiary);
 	$base: daff-get-base-color($theme, base);
 	$base-contrast: daff-get-base-color($theme, base-contrast);
-	$white: daff-get-base-color($theme, 'white');
-	$black: daff-get-base-color($theme, 'black');
 	$neutral: daff-get-palette($theme, neutral);
 	$mode: daff-get-theme-mode($theme);
 

package/accordion/examples/index.d.ts

@@ -1,20 +0,0 @@
-import * as i0 from '@angular/core';
-
-declare class BasicAccordionComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<BasicAccordionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BasicAccordionComponent, "basic-accordion", never, {}, {}, never, never, true, never>;
-}
-
-declare class InitiallyExpandedAccordionComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<InitiallyExpandedAccordionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InitiallyExpandedAccordionComponent, "initially-expanded-accordion", never, {}, {}, never, never, true, never>;
-}
-
-declare class DisabledAccordionComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DisabledAccordionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DisabledAccordionComponent, "disabled-accordion", never, {}, {}, never, never, true, never>;
-}
-
-declare const ACCORDION_EXAMPLES: (typeof BasicAccordionComponent)[];
-
-export { ACCORDION_EXAMPLES, BasicAccordionComponent, DisabledAccordionComponent, InitiallyExpandedAccordionComponent };

package/article/examples/index.d.ts

@@ -1,50 +0,0 @@
-import * as i0 from '@angular/core';
-
-declare class ArticleHeadingsComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ArticleHeadingsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleHeadingsComponent, "article-headings", never, {}, {}, never, never, true, never>;
-}
-
-declare class ArticleCodeInlineComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ArticleCodeInlineComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleCodeInlineComponent, "article-code-inline", never, {}, {}, never, never, true, never>;
-}
-
-declare class ArticleHrComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ArticleHrComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleHrComponent, "article-hr", never, {}, {}, never, never, true, never>;
-}
-
-declare class ArticleOlComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ArticleOlComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleOlComponent, "article-ol", never, {}, {}, never, never, true, never>;
-}
-
-declare class ArticleUlComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ArticleUlComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleUlComponent, "article-ul", never, {}, {}, never, never, true, never>;
-}
-
-declare class ArticleMetaComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ArticleMetaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleMetaComponent, "article-meta", never, {}, {}, never, never, true, never>;
-}
-
-declare class ArticleLinkComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ArticleLinkComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleLinkComponent, "article-link", never, {}, {}, never, never, true, never>;
-}
-
-declare class ArticleBlockquoteComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ArticleBlockquoteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleBlockquoteComponent, "article-blockquote", never, {}, {}, never, never, true, never>;
-}
-
-declare class ArticleTableComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ArticleTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleTableComponent, "article-table", never, {}, {}, never, never, true, never>;
-}
-
-declare const ARTICLE_EXAMPLES: (typeof ArticleHeadingsComponent)[];
-
-export { ARTICLE_EXAMPLES, ArticleBlockquoteComponent, ArticleCodeInlineComponent, ArticleHeadingsComponent, ArticleHrComponent, ArticleLinkComponent, ArticleMetaComponent, ArticleOlComponent, ArticleTableComponent, ArticleUlComponent };