@daffodil/design 0.90.0 → 0.92.3-rc.0

package/scss/theming/get-font-colors/_get-font-colors.spec.scss

@@ -0,0 +1,72 @@
+@use 'true' as *;
+@use 'sass:list';
+@use 'sass:map';
+@use '../create-theme' as *;
+@use '../color-palettes' as palette;
+@use '../configure-palette';
+@use '../get-color';
+@use '../get-base-color' as *;
+@use './get-font-colors' as *;
+@use '../configure-theme' as ct;
+
+@include describe('daff-get-font-colors') {
+	$primary: configure-palette.daff-configure-palette(palette.$daff-blue, 60);
+	$secondary: configure-palette.daff-configure-palette(palette.$daff-purple, 60);
+	$tertiary: configure-palette.daff-configure-palette(palette.$daff-turquoise, 60);
+	$font-light: get-color.daff-color(palette.$daff-neutral, 10);
+	$font-dark: get-color.daff-color(palette.$daff-neutral, 100);
+	$default-dark: palette.$black;
+	$default-light: palette.$white;
+	$white: palette.$white;
+	$black: palette.$black;
+
+	@include it('returns theme text colors when provided') {
+		$config: (
+			'primary': $primary,
+			'secondary': $secondary,
+			'tertiary': $tertiary,
+			'text-color-default': $font-dark,
+			'text-color-inverse': $font-light
+		);
+		$theme: daff-create-theme($config);
+
+		$colors: daff-get-font-colors($theme);
+		@include assert-equal(list.nth($colors, 1), $font-dark);
+		@include assert-equal(list.nth($colors, 2), $font-light);
+	}
+
+	@include it('falls back to default text colors when no explicit text colors') {
+		$config: (
+			'primary': $primary,
+			'secondary': $secondary,
+			'tertiary': $tertiary
+		);
+		$theme: daff-create-theme($config);
+
+		$colors: daff-get-font-colors($theme);
+		@include assert-equal(list.nth($colors, 1), $default-dark);
+		@include assert-equal(list.nth($colors, 2), $default-light);
+	}
+
+	@include it('works when theme provides only one of the text colors') {
+		$config: (
+			'mode': 'dark',
+			'primary': $primary,
+			'secondary': $secondary,
+			'tertiary': $tertiary,
+			'text-color-default': $font-light
+		);
+		$theme: daff-create-theme($config);
+
+		$colors: daff-get-font-colors($theme);
+		@include assert-equal(list.nth($colors, 1), $font-light);
+		@include assert-equal(list.nth($colors, 2), $default-dark);
+	}
+
+	@include it('returns base colors when theme map is created with daff-configure-theme instead of daff-create-theme') {
+		$theme: ct.daff-configure-theme($primary, $secondary, $tertiary, 'light');
+		$colors: daff-get-font-colors($theme);
+		@include assert-equal(list.nth($colors, 1), $white);
+		@include assert-equal(list.nth($colors, 2), $black);
+	}
+}

package/scss/typography/mixins/_font-weight.scss

@@ -1,19 +1,13 @@
 @use '../utilities/variables';
 
-//
-// @deprecated
-//
-// @docs
-//
-// Changes the weight of text to bold
-//
-// @usage
-// ```scss
-// @use '@daffodil/design/scss/typography;
-//
-// @include typography.embolden;
-// ```
-//
+/// @group Typography
+/// @deprecated
+/// @example scss
+///   @use '@daffodil/design/scss/typography';
+///
+///   .title {
+/// 		@include typography.embolden;
+///   }
 
 @mixin embolden() {
 	font-weight: variables.$bold-font-weight;

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).
+
+<daff-docs-example-viewer example="basic-select"></daff-docs-example-viewer>
 
 ## 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`.
+
+<daff-docs-example-viewer example="disabled-select"></daff-docs-example-viewer>
+
+### 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.
+
+<daff-docs-example-viewer example="select-with-error"></daff-docs-example-viewer>
+
+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.
+
+<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
+- 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

@@ -4,7 +4,7 @@ A sidebar is a component used to display additional information alongside a page
 ## Overview
 Sidebars provide a flexible way to display additional content alongside the main page content. While commonly used for navigation, they can accommodate any type of content. Sidebars support multiple display modes, positions, and include optional header and footer components with minimal styling.
 
-<design-land-example-viewer-container example="basic-sidebar"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-sidebar"></daff-docs-example-viewer>
 
 ## Best practices
 
@@ -162,16 +162,16 @@ Use the `mode` property to control how the sidebar is displayed:
 | `under` | Sits beneath the main content, which slides over the sidebar when closed. |
 
 **Over and under sidebars**
-<design-land-example-viewer-container example="over-and-under-sidebars"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="over-and-under-sidebars"></daff-docs-example-viewer>
 
 **Side fixed sidebar**
-<design-land-example-viewer-container example="side-fixed-sidebar"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="side-fixed-sidebar"></daff-docs-example-viewer>
 
 **Two fixed sidebars on either side**
-<design-land-example-viewer-container example="two-fixed-sidebars-either-side"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="two-fixed-sidebars-either-side"></daff-docs-example-viewer>
 
 **Fixed and over sidebar**
-<design-land-example-viewer-container example="fixed-and-over-sidebar"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="fixed-and-over-sidebar"></daff-docs-example-viewer>
 
 ### Sides
 Use the `side` property to control the placement of the sidebar:
@@ -181,7 +181,7 @@ Use the `side` property to control the placement of the sidebar:
 | `left` (default) | Places the sidebar on the left side of the screen.  |
 | `right` | Places the sidebar on the right side of the screen. |
 
-<design-land-example-viewer-container example="sidebar-sides"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="sidebar-sides"></daff-docs-example-viewer>
 
 ## Customizations
 
@@ -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/spinner/README.md

@@ -0,0 +1,57 @@
+# Spinner
+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.
+
+## Usage
+To use spinner, import `DAFF_SPINNER_COMPONENTS` directly into your custom component:
+
+```ts
+import { DAFF_SPINNER_COMPONENTS } from '@daffodil/design/spinner';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DAFF_SPINNER_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+## Anatomy
+
+### Label
+Labels are used to describe the loading state and provide context for users. They are optional.
+
+```html
+<daff-spinner>
+  <daff-spinner-label>Loading products...</daff-spinner-label>
+</daff-spinner>
+```
+
+<daff-docs-example-viewer example="spinner-with-label"></daff-docs-example-viewer>
+
+## Features
+
+### Colors
+Use the `color` property to change the color of a spinner.
+
+> Note: `dark`, `light`, and `theme` should be used on appropriate backgrounds for sufficient contrast.
+
+<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`.
+
+<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:
+
+```html
+<daff-spinner aria-label="Saving changes"></daff-spinner>
+```

package/spinner/index.d.ts

@@ -0,0 +1,53 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@daffodil/design';
+import { DaffSizableDirective, DaffSizeAllType } from '@daffodil/design';
+
+/**
+ * Labels are used to describe the loading state and provide context for users.
+ * They are optional.
+ *
+ * @usage
+ * ```html
+ * <daff-spinner-label>Loading</daff-spinner-label>
+ * ```
+ */
+declare class DaffSpinnerLabelDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSpinnerLabelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSpinnerLabelDirective, "daff-spinner-label", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * DaffSpinnerComponent is an animated indicator that lets users know content or action is being loaded.
+ */
+declare class DaffSpinnerComponent {
+    private sizable;
+    /**
+     * @docs-private
+     */
+    _label: DaffSpinnerLabelDirective;
+    private static readonly SIZE_MAP;
+    /**
+     * The `aria-label` for the spinner. Defaults to "loading".
+     */
+    ariaLabel: i0.InputSignal<string>;
+    /**
+     * @docs-private
+     */
+    get _ariaLabel(): string;
+    /**
+     * @docs-private
+     *
+     * The dimension (width/height) based on the size.
+     */
+    get dimension(): number;
+    constructor(sizable: DaffSizableDirective<DaffSizeAllType>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSpinnerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSpinnerComponent, "daff-spinner", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, ["_label"], ["daff-spinner-label"], true, [{ directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffSizableDirective; inputs: { "size": "size"; }; outputs: {}; }]>;
+}
+
+/**
+ * @docs-private
+ */
+declare const DAFF_SPINNER_COMPONENTS: readonly [typeof DaffSpinnerComponent, typeof DaffSpinnerLabelDirective];
+
+export { DAFF_SPINNER_COMPONENTS, DaffSpinnerComponent, DaffSpinnerLabelDirective };

package/spinner/src/spinner-theme.scss

@@ -0,0 +1,62 @@
+@use '../../scss/theming' as *;
+
+@mixin daff-spinner-light-variant($loader-color) {
+	.daff-spinner__track,
+	.daff-spinner__path {
+		stroke: $loader-color;
+	}
+
+	.daff-spinner__path {
+		stroke: $loader-color;
+	}
+}
+
+@mixin daff-spinner-dark-variant($loader-color) {
+	.daff-spinner__track {
+		stroke: $loader-color;
+	}
+
+	.daff-spinner__path {
+		stroke: $loader-color;
+	}
+}
+
+@mixin daff-spinner-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');
+
+	.daff-spinner {
+		&.daff-primary {
+			@include daff-spinner-light-variant(daff-color($primary));
+		}
+
+		&.daff-secondary {
+			@include daff-spinner-light-variant(daff-color($secondary));
+		}
+
+		&.daff-tertiary {
+			@include daff-spinner-light-variant(daff-color($tertiary));
+		}
+
+		&.daff-theme {
+			@include daff-spinner-light-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-spinner-light-variant($base-contrast);
+		}
+
+		&.daff-dark {
+			@include daff-spinner-light-variant($black);
+		}
+
+		&.daff-light {
+			@include daff-spinner-light-variant($white);
+		}
+	}
+}

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.
 
+<daff-docs-example-viewer example="basic-switch"></daff-docs-example-viewer>
+
 ## 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`.
-
-<design-land-example-viewer-container example="basic-switch"></design-land-example-viewer-container>
-
-### Disabled Switch
-A switch with the `disabled` property will be non-interactive.
-
-<design-land-example-viewer-container example="disabled-switch"></design-land-example-viewer-container>
+## Sizes
+A small switch variant is available for dense layouts. Use the `size="sm"` property to render a more compact version of a switch.
 
-### Loading Switch
-A switch can display a loading state by setting `loading` to `true`. This will also disable the switch.
+<daff-docs-example-viewer example="switch-sizes"></daff-docs-example-viewer>
 
-<design-land-example-viewer-container example="loading-switch"></design-land-example-viewer-container>
+## Disable a switch
+Use the `disabled` property on switch to make it non-interactive.
 
-### 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.
+<daff-docs-example-viewer example="disabled-switch"></daff-docs-example-viewer>
 
-<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`
-
-<design-land-example-viewer-container example="switch-label-positions"></design-land-example-viewer-container>
+## 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>
 
 ## 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, DaffDisableable, 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> implements DaffDisableable {
+    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: {}; }]>;
 }
 
 /**