@daffodil/design 0.90.0 → 0.92.3-rc.0

package/index.d.ts

@@ -1,180 +1,10 @@
-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 * 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.
@@ -207,136 +37,62 @@ 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];
+
+/**
+ * @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 DaffPalette = 'primary' | 'secondary' | 'tertiary' | 'light' | 'dark' | 'theme' | 'theme-contrast' | 'black' | 'white' | undefined;
+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 = 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 {
     /**
-     * Dynamically sets the CSS classes based on the color.
-     * @docs-private
+     * The color of the component.
      */
-    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;
-    };
+    color: DaffColor;
     /**
-     * Sets the color on a component.
-     *
-     * Default options are: `primary`, `secondary`, `tertiary`, `light`, `dark`, `theme`, and `theme-contrast`.
+     * The default color used when no color is set.
      */
-    color: DaffPalette;
-    /**
-     * Sets a default color.
-     */
-    defaultColor: DaffPalette;
+    defaultColor: DaffColor;
     /**
      * @docs-private
      */
@@ -349,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)"
 }
 
@@ -364,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>;
@@ -393,7 +169,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 +200,6 @@ declare enum DaffStatusEnum {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -453,20 +228,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 +273,6 @@ declare class DaffStatusableDirective implements DaffStatusable, OnChanges, OnIn
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -544,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",
@@ -568,68 +325,15 @@ 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({
- *  standalone: true,
- *  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 {
-    /**
-     * @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.
+     * The default used when no text alignment is set.
      */
     defaultAlignment: DaffTextAlignment;
     /**
@@ -645,60 +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({
- *  standalone: true,
- *  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>;
@@ -747,7 +409,6 @@ declare class DaffCompactableDirective {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'my-custom-component',
  *  template: 'my-custom-component.html',
  *  hostDirectives: [{ directive: DaffManageContainerLayoutDirective }],
@@ -764,43 +425,14 @@ 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>;
 }
 
 /**
- * `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({
- *  standalone: true,
- *  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 {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleEncapsulatedDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffArticleEncapsulatedDirective, "[daffArticleEncapsulated]", never, {}, {}, never, never, true, never>;
 }
@@ -1008,25 +640,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 +764,50 @@ declare class DaffOpenableDirective implements DaffOpenable, OnChanges {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffOpenableDirective, "[daffOpenable]", never, { "open": { "alias": "open"; "required": false; }; }, { "toggled": "toggled"; }, never, never, true, never>;
 }
 
+/**
+ * @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 {
+    orientation: DaffOrientation;
+}
+/**
+ * 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`enforces consistent use of orientation across components.
+ */
+declare class DaffOrientableDirective implements DaffOrientable, OnChanges, OnInit {
+    /**
+     * The orientation of the component.
+     */
+    orientation: DaffOrientation;
+    /**
+     * The default used when no orientation is set.
+     */
+    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 +823,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 +861,164 @@ 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 };
+/**
+ * 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 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 daffLoadable [loading]="isLoading">Content</div>
+ * ```
+ *
+ * @example Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffLoadableDirective,
+ *      inputs: ['loading'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * :host {
+ *  .spinner {
+ *    opacity: 0;
+ *  }
+ *  .daff-loading {
+ *    .spinner {
+ *      opacity: 1;
+ *    }
+ *  }
+ * }
+ * ```
+ *
+ * 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 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: {}; }]>;
+}
+
+/**
+ * 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, 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 };