@daffodil/design 0.91.0 → 0.92.3-rc.1

package/index.d.ts

@@ -3,7 +3,8 @@ import { OnChanges, OnInit, SimpleChanges, InjectionToken, Type, EventEmitter, C
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
 import { DaffPersistenceService } from '@daffodil/core';
-import { UntypedFormControl } from '@angular/forms';
+import * as i1 from '@angular/cdk/a11y';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
 
 /**
  * @deprecated in favor of the {@link DaffFormFieldLabelDirective}. Deprecated in version 0.86.0. Will be removed in version 1.0.0.
@@ -64,93 +65,34 @@ declare class DaffPrefixSuffixModule {
 
 declare const DAFF_PREFIX_SUFFIX_DIRECTIVES: readonly [typeof DaffPrefixDirective, typeof DaffSuffixDirective];
 
+/**
+ * @deprecated Deprecated in version 0.92.0. Will be removed in version 1.0.0.
+ */
 interface DaffColorable {
-    color: DaffPalette;
+    color: DaffColor;
 }
 /**
- * These are the valid options that can be passed to a DaffColorable component.
+ * The available color options.
+ */
+type DaffColor = 'primary' | 'secondary' | 'tertiary' | 'light' | 'dark' | 'theme' | 'theme-contrast' | 'black' | 'white' | undefined;
+/**
+ * @deprecated Deprecated in version 0.92.0. Will be removed in version 1.0.0.
  */
-type DaffPalette = 'primary' | 'secondary' | 'tertiary' | 'light' | 'dark' | 'theme' | 'theme-contrast' | 'black' | 'white' | undefined;
+type DaffPalette = DaffColor;
 
 /**
- * `DaffColorableDirective` allows a component to conditionally apply color-specific
- * styles by setting CSS classes based on the specified color. This directive is useful
- * for applying different color palettes to a component in an Angular application.
- *
- * Supported colors: `primary | secondary | tertiary | light | dark | theme | theme-contrast`
- *
- * | Color | Class |
- * | -------- | ----- |
- * | `primary` | `.daff-primary`|
- * | `secondary` | `.daff-secondary`|
- * | `tertiary` | `.daff-tertiary`|
- * | `light` | `daff-light` |
- * | `dark` | `daff-dark` |
- * | `theme` | `daff-theme`|
- * | `theme-contrast` | `.daff-theme-contrast`|
- *
- *  `white` and `black` have been deprecated in favor of `light` and `dark`.
- *
- * @example Implementing it as an attribute directive
- *
- * ```html
- * <div daffColorable [color]="primary">Colored content</div>
- * ```
- *
- *  ```scss
- * .div {
- *  &.daff-primary {
- *    color: daff-color($primary);
- *  }
- * }
- * ```
- *
- * In this example, the `daff-primary` class is applied to the `div` element, allowing you to
- * use the color class to style the `div`.
- *
- * @example Implementing it as an Angular host directive
- *
- * ```ts
- * @Component({
- *  selector: 'custom-component',
- *  template: 'custom-component.html',
- *  hostDirectives: [
- *    {
- *      directive: DaffColorableDirective,
- *      inputs: ['color'],
- *    },
- *  ],
- * })
- * export class CustomComponent {
- *  @HostBinding('class.custom-component') class = true;
- * }
- * ```
- *
- * ```scss
- * .custom-component {
- *  &.daff-primary {
- *    background: daff-color($primary, 10);
- *    color: daff-color($primary, 90);
- *  }
- * }
- * ```
+ * Enforces consistent use of {@link DaffColor} on a component by applying
+ * color-specific CSS classes and validating the color in dev mode.
  */
-declare class DaffColorableDirective implements DaffColorable, OnChanges, OnInit {
+declare class DaffColorableDirective implements OnChanges, OnInit {
     /**
-     * Sets the color on a component.
+     * The color of the component.
      */
-    color: DaffPalette;
+    color: DaffColor;
     /**
-     * Sets a default color.
-     *
-     * @example
-     * ```ts
-     * constructor(private colorableDirective: DaffColorableDirective) {
-     *  this.colorableDirective.defaultColor = 'theme';
-     * }
-     * ```
+     * The default color used when no color is set.
      */
-    defaultColor: DaffPalette;
+    defaultColor: DaffColor;
     /**
      * @docs-private
      */
@@ -163,12 +105,21 @@ declare class DaffColorableDirective implements DaffColorable, OnChanges, OnInit
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffColorableDirective, "[daffColorable]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Sensible breakpoints for layouts and interfaces used across `@daffodil/design` components.
+ */
 declare enum DaffBreakpoints {
+    /** `min-width: 1920px` */
     DESKTOP = "(min-width: 1920px)",
+    /** `min-width: 1440px` */
     LAPTOP = "(min-width: 1440px)",
+    /** `min-width: 1200px` */
     SMALL_LAPTOP = "(min-width: 1200px)",
+    /** `min-width: 1024px` */
     BIG_TABLET = "(min-width: 1024px)",
+    /** `min-width: 768px` */
     TABLET = "(min-width: 768px)",
+    /** `min-width: 480px` */
     MOBILE = "(min-width: 480px)"
 }
 
@@ -178,11 +129,22 @@ declare enum DaffBreakpoints {
 declare const SERVER_SAFE_BREAKPOINT_OBSERVER: InjectionToken<Omit<BreakpointObserver, never>>;
 
 /**
- * A stubbed out breakpoint observer service.
+ * A no-op implementation of Angular CDK's `BreakpointObserver` that always reports
+ * no breakpoints as matched. Useful for server-side rendering or testing contexts
+ * where browser layout APIs are unavailable.
  */
 declare class NoopBreakpointObserver implements Omit<BreakpointObserver, never> {
+    /**
+     * @docs-private
+     */
     ngOnDestroy(): void;
+    /**
+     * Always returns `false`, indicating that none of the given media queries are active.
+     */
     isMatched(value: string | readonly string[]): boolean;
+    /**
+     * Returns an observable that never emits a `BreakpointState`, making breakpoint-dependent logic inert.
+     */
     observe(value: string | readonly string[]): Observable<BreakpointState>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NoopBreakpointObserver, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NoopBreakpointObserver>;
@@ -344,23 +306,18 @@ declare class DaffSkeletonableDirective {
 }
 
 /**
- * An interface for giving a component the ability to display a mutating UI.
- * In order to be mutable, our class must implement this property.
- */
-interface DaffMutable {
-    mutating: boolean;
-}
-
-/**
- * Interface for giving a component the ability to customize text alignment for component-specific UI.
+ * @deprecated Deprecated in version 0.92.1. Will be removed in version 1.0.0.
  */
 interface DaffTextAlignable {
     textAlignment: DaffTextAlignment;
 }
 /**
- * The possible types that can be passed to a DaffTextAlignable component
+ *  * The available text alignment options.
  */
 type DaffTextAlignment = 'left' | 'center' | 'right';
+/**
+ * This enum will be removed from the public api in v1.0.0.
+ */
 declare enum DaffTextAlignmentEnum {
     Left = "left",
     Center = "center",
@@ -368,49 +325,7 @@ declare enum DaffTextAlignmentEnum {
 }
 
 /**
- * `DaffTextAlignableDirective` allows for dynamic text alignment of a component by
- * setting CSS classes based on the specified text alignment. This directive is
- * useful when text alignment needs to be managed dynamically in an Angular component.
- *
- * ## Why not just use CSS?
- *
- * While the native CSS `text-align` property can be used for static text alignment,
- * the `DaffTextAlignableDirective` provides a structured and consistent way to handle
- * dynamic text alignment within Angular components in more complex use cases where the
- * application of `text-align: center;` would cause unexpected side effects.
- *
- * @example Implementing it as an attribute directive
- *
- * ```html
- * <div daffTextAlignable textAlignment="center">Aligned text</div>
- * ```
- *
- * In this example, the `daff-center` 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: DaffTextAlignableDirective,
- *      inputs: ['textAlignment'],
- *    },
- *  ],
- * })
- * export class CustomComponent { }
- * ```
- *
- * ```scss
- * .custom-component {
- *  &.daff-left {
- *    text-align: left;
- *  }
- * }
- * ```
+ * `DaffTextAlignableDirective` enforces consistent use of text alignment across components.
  */
 declare class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges, OnInit {
     /**
@@ -418,14 +333,7 @@ declare class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges
      */
     textAlignment: DaffTextAlignment;
     /**
-     * Sets a default alignment.
-     *
-     * @example
-     * ```ts
-     * constructor(private textAligmentDirective: DaffTextAlignableDirective) {
-     *  this.textAligmentDirective.defaultAlignent = 'left';
-     * }
-     * ```
+     * The default used when no text alignment is set.
      */
     defaultAlignment: DaffTextAlignment;
     /**
@@ -441,59 +349,18 @@ declare class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges
 }
 
 /**
- * An interface for giving a component the ability to display a compact UI.
- * In order to be compactable, the class must implement this property.
+ * @deprecated Deprecated in version 0.92.0. Will be removed in version 1.0.0.
  */
 interface DaffCompactable {
     compact: boolean;
 }
 
 /**
- * `DaffCompactableDirective` allows a component to conditionally apply a compact
- * style by toggling a CSS class. This is useful for creating components that can
- * switch between regular and compact styles based on the `compact` property.
- *
- * @example Implementing it as an attribute directive
- *
- * ```html
- * <div daffCompactable [compact]="isCompact">Content goes here</div>
- * ```
- *
- * In this example, the `daff-compact` class is applied to the `div` element when
- * `isCompact` is `true`, making the `div` display its compact state.
- *
- * @example Implementing it as an Angular host directive
- *
- * ```ts
- * @Component({
- *  selector: 'custom-component',
- *  template: 'custom-component.html',
- *  hostDirectives: [
- *    {
- *      directive: DaffCompactableDirective,
- *      inputs: ['compact'],
- *    },
- *  ],
- * })
- * export class CustomComponent { }
- * ```
- *
- * The directive applies the `daff-compact` class to the component and
- * should be defined in your styles to display the compact state as desired.
- *
- * ```scss
- * :host {
- *  padding: 8px 16px;
- *
- *  &.daff-compact {
- *    padding: 4px 8px;
- *  }
- * }
- * ```
+ * Enforces consistent use of the compact property.
  */
 declare class DaffCompactableDirective {
     /**
-     * Controls whether the component is compact.
+     * Whether the component is compact.
      */
     compact: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCompactableDirective, never>;
@@ -563,27 +430,7 @@ declare class DaffManageContainerLayoutDirective {
 }
 
 /**
- * `DaffArticleEncapsulatedDirective` is used to encapsulate custom components within an article,
- * preventing {@link DaffArticleComponent } styles from bleeding into the component.
- *
- * @example Implementing it as an attribute directive
- *
- * ```html
- * <my-custom-component daffArticleEncapsulated></my-custom-component>
- * ```
- *
- * @example Implementing it as an Angular host directive
- *
- * ```ts
- * @Component({
- *  selector: 'custom-component',
- *  template: 'custom-component.html',
- *  hostDirectives: [{ directive: DaffArticleEncapsulatedDirective }],
- * })
- * export class CustomComponent { }
- * ```
- *
- * This directive will apply the `daff-ae` class to the component, ensuring that it is encapsulated from the article's styles.
+ * The `DaffArticleEncapsulatedDirective` prevents {@link DaffArticleComponent } styles from bleeding into custom components nested within an article.
  */
 declare class DaffArticleEncapsulatedDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleEncapsulatedDirective, never>;
@@ -918,6 +765,8 @@ declare class DaffOpenableDirective implements DaffOpenable, OnChanges {
 }
 
 /**
+ * @deprecated Deprecated in version 0.92.1. Will be removed in version 1.0.0.
+ *
  * Interface for giving a component the ability to customize text alignment for component-specific UI.
  */
 interface DaffOrientable {
@@ -927,66 +776,24 @@ interface DaffOrientable {
  * The possible types that can be passed to a DaffOrientable component
  */
 type DaffOrientation = 'horizontal' | 'vertical';
+/**
+ * This enum will be removed from the public api in v1.0.0.
+ */
 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;
- *  }
- * }
- * ```
+ * `DaffOrientableDirective`enforces consistent use of orientation across components.
  */
 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';
-     * }
-     * ```
+     * The default used when no orientation is set.
      */
     defaultOrientation: DaffOrientation;
     /**
@@ -1055,17 +862,36 @@ declare class DaffStickyTrackerDirective implements OnDestroy {
 }
 
 /**
- * `DaffDisableableDirective` allows a component to display a disabled UI
+ * Enforces consistent use of the disabled property.
+ */
+declare class DaffDisableableDirective {
+    /**
+     * Whether the component is disabled.
+     */
+    disabled: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffDisableableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffDisableableDirective, "[daffDisableable]", never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * An interface for any component or directive that can be disabled.
+ */
+interface DaffDisableable {
+    disabled: boolean;
+}
+
+/**
+ * `DaffLoadableDirective` allows a component to display a loading 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
+ * users that a user action is being processed. This directive can be used to
+ * apply a loading UI to any component by toggling the `loading`
+ * input property. When `loading` is `true`, the `daff-loading` 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>
+ * <div daffLoadable [loading]="isLoading">Content</div>
  * ```
  *
  * @example Implementing it as an Angular host directive
@@ -1076,8 +902,8 @@ declare class DaffStickyTrackerDirective implements OnDestroy {
  *  template: 'custom-component.html',
  *  hostDirectives: [
  *    {
- *      directive: DaffDisableableDirective,
- *      inputs: ['disabled'],
+ *      directive: DaffLoadableDirective,
+ *      inputs: ['loading'],
  *    },
  *  ],
  * })
@@ -1086,25 +912,113 @@ declare class DaffStickyTrackerDirective implements OnDestroy {
  *
  * ```scss
  * :host {
- *  .daff-disabled {
- *    cursor: not-allowed;
- *    opacity: 0.5;
+ *  .spinner {
+ *    opacity: 0;
+ *  }
+ *  .daff-loading {
+ *    .spinner {
+ *      opacity: 1;
+ *    }
  *  }
  * }
  * ```
  *
- * The directive applies the `daff-disabled` class to the component. The class should be
+ * The directive applies the `daff-loading` 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 DaffLoadableDirective {
+    loading: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffLoadableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffLoadableDirective, "[daffLoadable]", never, { "loading": { "alias": "loading"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class DaffRovingTabIndexService {
+    private document;
+    private readonly _hierarchy;
+    private readonly _group;
+    readonly group: i0.Signal<string>;
+    constructor(document: Document);
+    enter(group: string): void;
+    leave(): void;
+    next(): void;
+    previous(): void;
+    private _changeFocus;
+    onKeydown(evt: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRovingTabIndexService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DaffRovingTabIndexService>;
+}
+
+/**
+ * Defines the boundary of an RTI group.
+ */
+declare class DaffRovingTabIndexBoundaryDirective {
+    private groupService;
+    private focusTrap;
+    /**
+     * Don't touch this directly. Use `_uniqueId`.
+     */
+    private static _uniqueIdCounter;
+    /**
+     * Don't touch this directly. Use `_uniqueId`.
+     */
+    private _cachedUniqueId;
+    private get _uniqueId();
+    /**
+     * The name of the group for which that this element will act as boundary.
+     * Optional, will be autogenerated to a unique name if omitted.
+     */
+    readonly rtiBoundary: i0.InputSignal<string>;
+    /**
+     * The name of the group defined by this boundary.
+     */
+    readonly effectiveBoundary: i0.Signal<string>;
+    constructor(groupService: DaffRovingTabIndexService, focusTrap: CdkTrapFocus);
+    /**
+     * @docs-private
+     */
+    enterGroup(evt: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRovingTabIndexBoundaryDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffRovingTabIndexBoundaryDirective, "[rtiBoundary]", never, { "rtiBoundary": { "alias": "rtiBoundary"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.CdkTrapFocus; inputs: {}; outputs: {}; }, { directive: typeof DaffRovingTabIndexDirective; inputs: {}; outputs: {}; }]>;
 }
 
-declare class DaffErrorStateMatcher {
-    isErrorState(control: UntypedFormControl, formSubmitted: boolean): boolean;
+/**
+ * Declares that an element is an RTI target.
+ * Automatically applied to `<a>` and `<button>` elements.
+ */
+declare class DaffRovingTabIndexDirective {
+    private service;
+    private parent;
+    /**
+     * Allows the RTI group to be overriden.
+     * By default it will be the nearest ancestor or the default root group if no boundary ancestor exists.
+     * @see {@link DaffRovingTabIndexBoundaryDirective}.
+     */
+    readonly rti: i0.InputSignal<string>;
+    /**
+     * The group in which this RTI target resides.
+     * See {@link DaffRovingTabIndexBoundaryDirective} to make an element act as the boundary of an RTI group.
+     */
+    readonly group: i0.Signal<string>;
+    /**
+     * @docs-private
+     */
+    readonly tabindex: i0.Signal<0 | -1>;
+    constructor(service: DaffRovingTabIndexService, parent: DaffRovingTabIndexBoundaryDirective);
+    /**
+     * @docs-private
+     */
+    leaveGroup(evt: Event): void;
+    /**
+     * @docs-private
+     */
+    next(evt: Event): void;
+    /**
+     * @docs-private
+     */
+    previous(evt: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRovingTabIndexDirective, [null, { optional: true; skipSelf: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffRovingTabIndexDirective, "[rti],a,button", never, { "rti": { "alias": "rti"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-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 };
+export { DAFF_PREFIX_SUFFIX_DIRECTIVES, DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffColorableDirective, DaffCompactableDirective, DaffDisableableDirective, DaffFocusStackService, DaffFormLabelDirective, DaffFormLabelModule, DaffLoadableDirective, DaffManageContainerLayoutDirective, DaffOpenableDirective, DaffOrientableDirective, DaffOrientationEnum, DaffPrefixDirective, DaffPrefixSuffixModule, DaffRovingTabIndexBoundaryDirective, DaffRovingTabIndexDirective, DaffSelectableDirective, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffStickyTrackerDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector };
+export type { AnimationStateWithParams, Constructor, DaffColor, DaffColorable, DaffCompactable, DaffDisableable, DaffLazyComponent, DaffOpenable, DaffOrientable, DaffOrientation, DaffPalette, DaffSelectable, DaffSizable, DaffSizeAllType, DaffSizeLargeType, DaffSizeMediumType, DaffSizeSmallType, DaffSizeXLargeType, DaffSizeXSmallType, DaffStatus, DaffStatusable, DaffTextAlignable, DaffTextAlignment };

package/input/README.md

@@ -4,7 +4,7 @@ Input works alongside the native HTML input element, with additional custom styl
 ## Overview
 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>
+<daff-docs-example-viewer example="input-with-form-field"></daff-docs-example-viewer>
 
 ## Usage
 
@@ -66,19 +66,19 @@ Input must be used inside `<daff-form-field>` to enable proper state management
 ### 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>
+<daff-docs-example-viewer example="input-disabled"></daff-docs-example-viewer>
 
 ### 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>
+<daff-docs-example-viewer example="input-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 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>
+<daff-docs-example-viewer example="input-hint"></daff-docs-example-viewer>
 
 ## Accessibility
 When `<daff-form-label>` is used within `<daff-form-field>`, the label automatically associates with the input using the `for` and `id` attributes.

package/input/index.d.ts

@@ -29,7 +29,7 @@ declare class DaffInputComponent extends DaffFormFieldControl<string> implements
     /**
      * @docs-private
      */
-    get disabledAttribute(): true;
+    get disabledAttribute(): boolean;
     private _required;
     /**
      * @docs-private
@@ -46,10 +46,11 @@ declare class DaffInputComponent extends DaffFormFieldControl<string> implements
      * @docs-private
      */
     get ariaDescribedBy(): string;
-    /** @docs-private */
     focus(): void;
     /** @docs-private */
-    blur(): void;
+    _handleFocus(): void;
+    /** @docs-private */
+    _handleBlur(): void;
     constructor(
     /** @docs-private */
     ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>, formField: DaffFormFieldComponent);