@daffodil/design 0.89.0 → 0.91.0

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).
+
+<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/README.md

@@ -0,0 +1,87 @@
+# Tag
+Tags are compact visual indicators used to display short pieces of information, such as status, categories, or labels. They typically contain an icon, text label, and optionally a delete button for removable items.
+
+## Overview
+Tag supports flexible content projection to allow for various combinations of icons, labels, and interactive elements within a consistent container.
+
+| Attribute | Description |
+| --------- | ----------- |
+| `daff-tag` | Flexible tag container that can contain an icon, a label, and a dismiss button |
+
+
+**Basic tag**
+<design-land-example-viewer-container example="basic-tag"></design-land-example-viewer-container>
+
+## Usage
+
+### Within a standalone component
+To use tag in a standalone component, import `DAFF_TAG_COMPONENTS` directly into your custom component.
+
+```ts
+import { DAFF_TAG_COMPONENTS } from '@daffodil/design/tag';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DAFF_TAG_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+## Anatomy
+Tags should always have a label, unless you are only using an icon that is universally understood and accessible.
+
+### Icon support
+An icon can be rendered within the tag using the `daffPrefix` directive.
+
+```html
+<daff-tag>
+  <fa-icon [icon]="faCircleCheck" daffPrefix></fa-icon>
+  <div>Tag label</div>
+</daff-tag>
+```
+
+### Dismissible support
+A tag can be made dismissible by setting the `dismissible` property to `true`. This displays a close button that emits a `closeTag` event when clicked.
+
+```html
+<daff-tag dismissible (closeTag)="onCloseTag()">
+  <fa-icon [icon]="faCircleCheck" daffPrefix></fa-icon>
+  <div>Tag label</div>
+</daff-tag>
+```
+
+### Disabled state
+Tags can be disabled by setting the `disabled` property to `true`. Disabled tags cannot be dismissed.
+
+```html
+<daff-tag dismissible disabled>
+  <fa-icon [icon]="faCircleCheck" daffPrefix></fa-icon>
+  <div>Disabled tag</div>
+</daff-tag>
+```
+
+## Sizes
+Use the `size` property to control tag dimensions. The default size is `md`. Supported sizes: `sm`, `md`, `lg`.
+
+<design-land-example-viewer-container example="sizeable-tag"></design-land-example-viewer-container>
+
+## Colors
+Use the `color` property to change the color of a tag. Supported colors: `primary`, `secondary`, `tertiary`, `dark`, `light`, `theme`, `theme-contrast`.
+
+> Note: `dark`, `light`, and `theme` should be used on appropriate backgrounds for sufficient contrast.
+
+<design-land-example-viewer-container example="colorable-tag"></design-land-example-viewer-container>
+
+## Status indicators
+Status indicators help users understand the type of information a tag represents and its importance relative to other tags in the same context. Use the `status` property to convey different semantic meanings. Supported status: `warn`, `critical`, `info`, `success`.
+
+<design-land-example-viewer-container example="statusable-tag"></design-land-example-viewer-container>
+
+## Accessibility
+Daffodil uses semantic HTML elements and proper ARIA attributes to ensure an accessible experience by default.
+
+- The close button supports the `disabled` state with appropriate `aria-disabled` attributes
+- Use appropriate contrast ratios for text and background colors

package/tag/index.d.ts

@@ -0,0 +1,71 @@
+import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
+import * as i0 from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import * as i1 from '@daffodil/design';
+import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffPrefixDirective } from '@daffodil/design';
+
+/**
+ * The size types that the DaffTagComponent can implement.
+ */
+type DaffTagSize = DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType;
+declare class DaffTagSizableDirective extends DaffSizableDirective<DaffTagSize> {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffTagSizableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffTagSizableDirective, never, never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Contains the tag content: checkmark icon, label, and delete button.
+ *
+ * @example
+ * ```html
+ *  <daff-tag dismissible (closeTag)="onCloseTag()">
+ *    <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
+ *    <div>Label</div>
+ *  </daff-tag>
+ * ```
+ */
+declare class DaffTagComponent {
+    private size;
+    /**
+     * @docs-private
+     */
+    faTimes: _fortawesome_fontawesome_common_types.IconDefinition;
+    /**
+     * @docs-private
+     */
+    _prefix: DaffPrefixDirective;
+    private _disabled;
+    /**
+     * The disabled state of the tag.
+     */
+    get disabled(): any;
+    set disabled(value: any);
+    private _dismissible;
+    /** Whether the tag can be dismissed by the user.
+     * Displays a close icon if `true`.
+     */
+    get dismissible(): any;
+    set dismissible(value: any);
+    /**
+     * Emits when the tag is closed.
+     */
+    closeTag: EventEmitter<void>;
+    /**
+     * @docs-private
+     *
+     * Internal handler for the close icon click.
+     */
+    onCloseTag(event: Event): void;
+    constructor(size: DaffTagSizableDirective);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffTagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTagComponent, "daff-tag", never, { "disabled": { "alias": "disabled"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; }, { "closeTag": "closeTag"; }, ["_prefix"], ["[daffPrefix]", "*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffTagSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }]>;
+}
+
+/**
+ * @docs-private
+ *
+ * `DAFF_TAG_COMPONENTS` imports all the available components and directives.
+ */
+declare const DAFF_TAG_COMPONENTS: readonly [typeof DaffTagComponent, typeof DaffTagSizableDirective, typeof DaffPrefixDirective];
+
+export { DAFF_TAG_COMPONENTS, DaffTagComponent, DaffTagSizableDirective };