@daffodil/design 0.90.0 → 0.91.0

package/index.d.ts

@@ -1,180 +1,9 @@
-import { UntypedFormControl, UntypedFormArray, ControlValueAccessor, NgControl } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { ElementRef, EventEmitter, ChangeDetectorRef, QueryList, OnInit, OnChanges, SimpleChanges, InjectionToken, Type, OnDestroy, Renderer2 } from '@angular/core';
-import * as i4 from '@angular/common';
+import { OnChanges, OnInit, SimpleChanges, InjectionToken, Type, EventEmitter, ChangeDetectorRef, OnDestroy, ElementRef, Renderer2 } from '@angular/core';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
 import { DaffPersistenceService } from '@daffodil/core';
-
-declare class DaffErrorStateMatcher {
-    isErrorState(control: UntypedFormControl, formSubmitted: boolean): boolean;
-}
-
-declare class DaffCheckboxComponent {
-    private _cdRef;
-    /**
-     * @docs-private
-     */
-    nativeCheckbox: ElementRef<HTMLInputElement>;
-    /**
-     * The name of the checkbox.
-     */
-    name: string;
-    /**
-     * The value of the checkbox.
-     */
-    value: any;
-    /**
-     * Boolean value to determine whether or not the checkbox is checked.
-     */
-    private _checked;
-    get checked(): boolean;
-    set checked(value: boolean);
-    /**
-     * The id of the checkbox. Must be unique. If not entered by a user then it is generated.
-     */
-    id: string;
-    /**
-     * The aria-label of the checkbox.
-     */
-    label: string;
-    /**
-     * The aria-labeledby of the checkbox.
-     */
-    labeledBy: string;
-    /**
-     * Event on whether or not the selection has changed.
-     */
-    becameChecked: EventEmitter<boolean>;
-    becameUnchecked: EventEmitter<void>;
-    /**
-     * Whether the checkbox is focused
-     */
-    focused: boolean;
-    /**
-     * Whether the checkbox is disabled.
-     */
-    disabled: boolean;
-    /**
-     * The role of the component. Set to "checkbox".
-     *
-     * @docs-private
-     */
-    role: string;
-    /**
-     * @docs-private
-     */
-    _onChange(val: Event): void;
-    /**
-     * @docs-private
-     */
-    get focusClass(): boolean;
-    /**
-     * @docs-private
-     */
-    get disabledClass(): boolean;
-    /**
-     * Sets focused to false.
-     */
-    onBlur(): void;
-    /**
-     * Sets focused to true.
-     */
-    onFocus(): void;
-    constructor(_cdRef: ChangeDetectorRef);
-    /**
-     * Sets checked to true.
-     */
-    select(): void;
-    /**
-     * Sets checked to false
-     */
-    deselect(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCheckboxComponent, "daff-checkbox", never, { "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "aria-label"; "required": false; }; "labeledBy": { "alias": "aria-labelledby"; "required": false; }; }, { "becameChecked": "becameChecked"; "becameUnchecked": "becameUnchecked"; }, never, ["*"], false, never>;
-}
-
-declare class DaffCheckboxSetComponent {
-    formArray: UntypedFormArray;
-    /**
-     * The name of the checkbox-set
-     */
-    name: string;
-    /**
-     * The role of the component. Set to "checkbox".
-     *
-     * @docs-private
-     */
-    role: string;
-    /**
-     * The list of checkboxes in the set.
-     *
-     * @docs-private
-     */
-    checkboxes: QueryList<DaffCheckboxComponent>;
-    valueList: EventEmitter<any[]>;
-    getValues(): any[];
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxSetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCheckboxSetComponent, "daff-checkbox-set", never, { "formArray": { "alias": "formArray"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "valueList": "valueList"; }, ["checkboxes"], ["*"], false, never>;
-}
-
-/**
- * A directive for binding the DaffCheckboxComponent and the Control Value Accessor.
- */
-declare class DaffCheckboxControlValueAccessorDirective implements OnInit, ControlValueAccessor {
-    _control: NgControl;
-    private _checkbox;
-    _onChange: (val: any) => void;
-    _onTouched: () => void;
-    /**
-     * The value of the ControlValueAccessor
-     */
-    value: any;
-    /**
-     * The name of the ControlValueAccessor
-     */
-    name: string;
-    constructor(_control: NgControl, _checkbox: DaffCheckboxComponent);
-    /**
-     * A lifecycle method called when the directive is initialized.
-     */
-    /**
-     * @docs-private
-     */
-    ngOnInit(): void;
-    /**
-     * writes a new value down into the component.
-     */
-    writeValue(value: any): void;
-    /**
-     * Registers the change handler
-     */
-    registerOnChange(fn: any): void;
-    /**
-     * Registers the touched handler
-     */
-    registerOnTouched(fn: any): void;
-    /**
-     * Sets the disabled state.
-     */
-    setDisabledState?(isDisabled: boolean): void;
-    /**
-     * calls the child checkbox's select function
-     */
-    fireSelect(): void;
-    /**
-     * calls the child checkbox's deselect function
-     */
-    fireDeselect(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxControlValueAccessorDirective, [{ optional: true; self: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCheckboxControlValueAccessorDirective, "daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]", never, { "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never>;
-}
-
-declare class DaffCheckboxModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCheckboxModule, [typeof DaffCheckboxComponent, typeof DaffCheckboxSetComponent, typeof DaffCheckboxControlValueAccessorDirective], [typeof i4.CommonModule], [typeof DaffCheckboxComponent, typeof DaffCheckboxSetComponent, typeof DaffCheckboxControlValueAccessorDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DaffCheckboxModule>;
-}
+import { UntypedFormControl } from '@angular/forms';
 
 /**
  * @deprecated in favor of the {@link DaffFormFieldLabelDirective}. Deprecated in version 0.86.0. Will be removed in version 1.0.0.
@@ -207,39 +36,34 @@ interface AnimationStateWithParams<T = unknown, V = Record<string | number, unkn
 }
 
 /**
- *
- * Prefix can be used to place content before another piece of content in components like
- * `daff-form-field`, `daff-solo-field`, and `daff-list`.
+ * DaffPrefixDirective can be used to place content before another piece of content
+ * in components like `DaffFormFieldComponent` or `DaffListComponent`.
  */
 declare class DaffPrefixDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffPrefixDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffPrefixDirective, "[daffPrefix]", never, {}, {}, never, never, true, never>;
 }
 
 /**
- *
- * Prefix can be used to place content after another piece of content in components like
- * `daff-form-field`, `daff-solo-field`, and `daff-list`.
+ * DaffSuffixDirective can be used to place content after another piece of content
+ * in components like `DaffFormFieldComponent` or `DaffListComponent`.
  */
 declare class DaffSuffixDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSuffixDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSuffixDirective, "[daffSuffix]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * @deprecated in favor of standalone components. Deprecated in version 0.91.0. Will be removed in version 1.0.0.
+ */
 declare class DaffPrefixSuffixModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffPrefixSuffixModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<DaffPrefixSuffixModule, never, [typeof DaffPrefixDirective, typeof DaffSuffixDirective], [typeof DaffPrefixDirective, typeof DaffSuffixDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffPrefixSuffixModule>;
 }
 
+declare const DAFF_PREFIX_SUFFIX_DIRECTIVES: readonly [typeof DaffPrefixDirective, typeof DaffSuffixDirective];
+
 interface DaffColorable {
     color: DaffPalette;
 }
@@ -312,29 +136,19 @@ type DaffPalette = 'primary' | 'secondary' | 'tertiary' | 'light' | 'dark' | 'th
  * ```
  */
 declare class DaffColorableDirective implements DaffColorable, OnChanges, OnInit {
-    /**
-     * Dynamically sets the CSS classes based on the color.
-     * @docs-private
-     */
-    get class(): {
-        'daff-primary': boolean;
-        'daff-secondary': boolean;
-        'daff-tertiary': boolean;
-        'daff-light': boolean;
-        'daff-dark': boolean;
-        'daff-theme': boolean;
-        'daff-theme-contrast': boolean;
-        'daff-black': boolean;
-        'daff-white': boolean;
-    };
     /**
      * Sets the color on a component.
-     *
-     * Default options are: `primary`, `secondary`, `tertiary`, `light`, `dark`, `theme`, and `theme-contrast`.
      */
     color: DaffPalette;
     /**
      * Sets a default color.
+     *
+     * @example
+     * ```ts
+     * constructor(private colorableDirective: DaffColorableDirective) {
+     *  this.colorableDirective.defaultColor = 'theme';
+     * }
+     * ```
      */
     defaultColor: DaffPalette;
     /**
@@ -393,7 +207,7 @@ interface DaffStatusable {
 }
 /**
  * The `DaffStatus` type defines the possible status values that a component can have.
- * - 'info': Indicatea an informational status.
+ * - 'info': Indicates an informational status.
  * - 'warn': Indicates a warning status.
  * - 'critical': Indicates a critical or error status.
  * - 'success': Indicates a success status.
@@ -424,7 +238,6 @@ declare enum DaffStatusEnum {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -453,20 +266,8 @@ declare enum DaffStatusEnum {
  * - `daff-success`: Applied when the status is `success`.
  */
 declare class DaffStatusableDirective implements DaffStatusable, OnChanges, OnInit {
-    /**
-     * Dynamically sets the CSS classes based on the status.
-     * @docs-private
-     */
-    get class(): {
-        'daff-info': boolean;
-        'daff-warn': boolean;
-        'daff-critical': boolean;
-        'daff-success': boolean;
-    };
     /**
      * Sets the status on a component.
-     *
-     * Options are: `info`, `warn`, `critical`, and `success`.
      */
     status: DaffStatus;
     /**
@@ -510,7 +311,6 @@ declare class DaffStatusableDirective implements DaffStatusable, OnChanges, OnIn
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -592,7 +392,6 @@ declare enum DaffTextAlignmentEnum {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -614,22 +413,19 @@ declare enum DaffTextAlignmentEnum {
  * ```
  */
 declare class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges, OnInit {
-    /**
-     * @docs-private
-     */
-    get class(): {
-        'daff-left': boolean;
-        'daff-center': boolean;
-        'daff-right': boolean;
-    };
     /**
      * The text alignment of the component.
-     *
-     * Options are: `left`, `center`, and `right`.
      */
     textAlignment: DaffTextAlignment;
     /**
-     * Sets a default alignment when no text alignment is provided.
+     * Sets a default alignment.
+     *
+     * @example
+     * ```ts
+     * constructor(private textAligmentDirective: DaffTextAlignableDirective) {
+     *  this.textAligmentDirective.defaultAlignent = 'left';
+     * }
+     * ```
      */
     defaultAlignment: DaffTextAlignment;
     /**
@@ -670,7 +466,6 @@ interface DaffCompactable {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -747,7 +542,6 @@ declare class DaffCompactableDirective {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'my-custom-component',
  *  template: 'my-custom-component.html',
  *  hostDirectives: [{ directive: DaffManageContainerLayoutDirective }],
@@ -764,10 +558,6 @@ declare class DaffCompactableDirective {
  * This directive will apply the `daff-manage-container-layout` class to your component, ensuring that the styles set on `:host` are passed down to the container.
  */
 declare class DaffManageContainerLayoutDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffManageContainerLayoutDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffManageContainerLayoutDirective, "[daffManageContainerLayout]", never, {}, {}, never, never, true, never>;
 }
@@ -786,7 +576,6 @@ declare class DaffManageContainerLayoutDirective {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [{ directive: DaffArticleEncapsulatedDirective }],
@@ -797,10 +586,6 @@ declare class DaffManageContainerLayoutDirective {
  * This directive will apply the `daff-ae` class to the component, ensuring that it is encapsulated from the article's styles.
  */
 declare class DaffArticleEncapsulatedDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleEncapsulatedDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffArticleEncapsulatedDirective, "[daffArticleEncapsulated]", never, {}, {}, never, never, true, never>;
 }
@@ -1008,25 +793,19 @@ declare enum DaffSizableEnum {
  * - `daff-xl`: Applied when the size is `xl`.
  */
 declare class DaffSizableDirective<T extends DaffSizeAllType> implements DaffSizable<T>, OnChanges, OnInit {
-    /**
-     * Dynamically sets the CSS classes based on the size.
-     * @docs-private
-     */
-    get class(): {
-        'daff-xs': boolean;
-        'daff-sm': boolean;
-        'daff-md': boolean;
-        'daff-lg': boolean;
-        'daff-xl': boolean;
-    };
     /**
      * The size of the component.
-     *
-     * Options are: `xs`, `sm`, `md`, `lg`, and `xl`.
      */
     size: T;
     /**
-     * Sets a default size when no size is provided.
+     * Sets a default size.
+     *
+     * @example
+     * ```ts
+     * constructor(private sizableDirective: DaffSizableDirective) {
+     *  this.sizableDirective.defaultSize = 'md';
+     * }
+     * ```
      */
     defaultSize: T;
     /**
@@ -1138,6 +917,90 @@ declare class DaffOpenableDirective implements DaffOpenable, OnChanges {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffOpenableDirective, "[daffOpenable]", never, { "open": { "alias": "open"; "required": false; }; }, { "toggled": "toggled"; }, never, never, true, never>;
 }
 
+/**
+ * Interface for giving a component the ability to customize text alignment for component-specific UI.
+ */
+interface DaffOrientable {
+    orientation: DaffOrientation;
+}
+/**
+ * The possible types that can be passed to a DaffOrientable component
+ */
+type DaffOrientation = 'horizontal' | 'vertical';
+declare enum DaffOrientationEnum {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+
+/**
+ * `DaffOrientableDirective` allows for dynamic orientation of a component by
+ * setting CSS classes based on the specified orientation. This directive is
+ * useful when orientation needs to be managed dynamically in an Angular component.
+ *
+ * @example Implementing it as an attribute directive
+ *
+ * ```html
+ * <div daffOrientable [orientation]="horizontal"></div>
+ * ```
+ *
+ * In this example, the `daff-horizontal` class is added to the `div` element, allowing
+ * you to style the `div` as you wish using the class.
+ *
+ * @example Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffOrientableDirective,
+ *      inputs: ['orientation'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * .custom-component {
+ *   &.daff-vertical {
+ *     display: flex;
+ *     flex-direction: column;
+ *  }
+ * }
+ * ```
+ */
+declare class DaffOrientableDirective implements DaffOrientable, OnChanges, OnInit {
+    /**
+     * The orientation of the component.
+     *
+     * Options are: `horizontal` and `vertical`.
+     */
+    orientation: DaffOrientation;
+    /**
+     * Sets a default orientation.
+     *
+     * @example
+     * ```ts
+     * constructor(private orientableDirective: DaffOrientableDirective) {
+     *  this.orientableDirective.defaultOrientation = 'horizontal';
+     * }
+     * ```
+     */
+    defaultOrientation: DaffOrientation;
+    /**
+     * @docs-private
+     */
+    ngOnInit(): void;
+    /**
+     * @docs-private
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffOrientableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffOrientableDirective, "[daffOrientable]", never, { "orientation": { "alias": "orientation"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 /**
  * An interface for giving a component the ability to display a selected UI.
  * In order to be selectable, the class must implement this property.
@@ -1153,11 +1016,17 @@ declare class DaffSelectableDirective implements DaffSelectable {
      */
     selected: boolean;
     /**
-     * An event that fires after the media element becomes selected.
+     * An event that fires after the component becomes selected.
      */
     becameSelected: EventEmitter<void>;
     constructor(cd: ChangeDetectorRef);
+    /**
+     * Selects the component and emits the `becameSelected` event.
+     */
     select(): this;
+    /**
+     * Deselects the component.
+     */
     deselect(): this;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSelectableDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSelectableDirective, "[daffSelected]", never, { "selected": { "alias": "selected"; "required": false; }; }, { "becameSelected": "becameSelected"; }, never, never, true, never>;
@@ -1185,5 +1054,57 @@ declare class DaffStickyTrackerDirective implements OnDestroy {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffStickyTrackerDirective, "[daffStickyTracker]", never, { "sticky": { "alias": "sticky"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-export { DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffColorableDirective, DaffCompactableDirective, DaffErrorStateMatcher, DaffFocusStackService, DaffFormLabelDirective, DaffFormLabelModule, DaffManageContainerLayoutDirective, DaffOpenableDirective, DaffPrefixDirective, DaffPrefixSuffixModule, DaffSelectableDirective, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffStickyTrackerDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector };
-export type { AnimationStateWithParams, Constructor, DaffColorable, DaffCompactable, DaffLazyComponent, DaffMutable, DaffOpenable, DaffPalette, DaffSelectable, DaffSizable, DaffSizeAllType, DaffSizeLargeType, DaffSizeMediumType, DaffSizeSmallType, DaffSizeXLargeType, DaffSizeXSmallType, DaffStatus, DaffStatusable, DaffTextAlignable, DaffTextAlignment };
+/**
+ * `DaffDisableableDirective` allows a component to display a disabled UI
+ * by conditionally applying a CSS class. This is useful for indicating to
+ * users that content is loading or being processed. This directive can be used to
+ * apply a disabled UI to any component by toggling the `disabled`
+ * input property. When `disabled` is `true`, the `daff-disabled` CSS class
+ * is applied, which should style the component to look like it's not interactable.
+ *
+ * @example Implementing it as an attribute directive
+ *
+ * ```html
+ * <div daffDisableable [disabled]="isDisabled">Content</div>
+ * ```
+ *
+ * @example Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffDisableableDirective,
+ *      inputs: ['disabled'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * :host {
+ *  .daff-disabled {
+ *    cursor: not-allowed;
+ *    opacity: 0.5;
+ *  }
+ * }
+ * ```
+ *
+ * The directive applies the `daff-disabled` class to the component. The class should be
+ * defined in your styles to display the loading state as desired.
+ */
+declare class DaffDisableableDirective {
+    disabled: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffDisableableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffDisableableDirective, "[daffDisableable]", never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class DaffErrorStateMatcher {
+    isErrorState(control: UntypedFormControl, formSubmitted: boolean): boolean;
+}
+
+export { DAFF_PREFIX_SUFFIX_DIRECTIVES, DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffColorableDirective, DaffCompactableDirective, DaffDisableableDirective, DaffErrorStateMatcher, DaffFocusStackService, DaffFormLabelDirective, DaffFormLabelModule, DaffManageContainerLayoutDirective, DaffOpenableDirective, DaffOrientableDirective, DaffOrientationEnum, DaffPrefixDirective, DaffPrefixSuffixModule, DaffSelectableDirective, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffStickyTrackerDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector };
+export type { AnimationStateWithParams, Constructor, DaffColorable, DaffCompactable, DaffLazyComponent, DaffMutable, DaffOpenable, DaffOrientable, DaffOrientation, DaffPalette, DaffSelectable, DaffSizable, DaffSizeAllType, DaffSizeLargeType, DaffSizeMediumType, DaffSizeSmallType, DaffSizeXLargeType, DaffSizeXSmallType, DaffStatus, DaffStatusable, DaffTextAlignable, DaffTextAlignment };

package/input/README.md

@@ -1,15 +1,15 @@
 # Input
-The input component allows a native HTML input element to work with the form field component.
+Input works alongside the native HTML input element, with additional custom styling and functionality.
 
 ## Overview
-The input component has the same functionality as a native HTML `<input>` 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).
+Input has the same functionality as a native HTML input 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).
 
 <design-land-example-viewer-container example="input-with-form-field"></design-land-example-viewer-container>
 
 ## Usage
 
 ### Within a standalone component
-To use form field in a standalone component, import `DaffInputComponent` directly into your custom component:
+To use input in a standalone component, import `DaffInputComponent` directly into your custom component:
 
 ```ts
 import { DaffInputComponent } from '@daffodil/design/input';
@@ -25,7 +25,7 @@ export class CustomComponent {}
 ```
 
 ### Within a module (deprecated)
-To use form field in a module, import `DaffInputModule` into your custom module:
+To use input in a module, import `DaffInputModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
@@ -33,7 +33,7 @@ import { DaffInputModule } from '@daffodil/design/input';
 import { CustomComponent } from './custom.component';
 
 @NgModule({
-	declarations: [
+  declarations: [
     CustomComponent,
   ],
   exports: [
@@ -46,21 +46,41 @@ import { CustomComponent } from './custom.component';
 export class CustomComponentModule { }
 ```
 
+> **Warning**
+> 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
-## Examples
+## Anatomy
+Input 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 input
-The input in this example is disabled using the native HTML disabled attribute.
+### Basic structure
+```html
+<daff-form-field>
+  <daff-form-label>First Name</daff-form-label>
+  <input daff-input type="text" name="first-name" />
+</daff-form-field>
+```
+
+## States
+
+### Disabled
+Input 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="input-disabled"></design-land-example-viewer-container>
 
-### Input with error messages
-The input in this example uses the `ReactiveFormsModule` to display errors.
+### Error
+Input 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 input is invalid and has been touched or submitted.
 
 <design-land-example-viewer-container example="input-error"></design-land-example-viewer-container>
 
-### Input with hint
-The input in this example has a hint.
+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 input field correctly. Use `<daff-hint>` within the form field to display helpful information below the input. Unlike error messages, hints are always visible and provide guidance rather than validation feedback.
 
 <design-land-example-viewer-container example="input-hint"></design-land-example-viewer-container>
+
+## Accessibility
+When `<daff-form-label>` is used within `<daff-form-field>`, the label automatically associates with the input 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.