@daffodil/design 0.91.0 → 0.92.3-rc.1

package/fesm2022/daffodil-design.mjs

@@ -1,10 +1,12 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, NgModule, isDevMode, Input, Injectable, InjectionToken, inject, PLATFORM_ID, DOCUMENT, Inject, makeEnvironmentProviders, provideAppInitializer, EventEmitter, Output, afterNextRender } from '@angular/core';
+import { HostBinding, Directive, NgModule, isDevMode, Input, Injectable, InjectionToken, inject, PLATFORM_ID, DOCUMENT, Inject, makeEnvironmentProviders, provideAppInitializer, EventEmitter, Output, afterNextRender, signal, input, computed, effect, forwardRef, Optional, SkipSelf } from '@angular/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { isPlatformBrowser } from '@angular/common';
 import { of, fromEventPattern, Subject, merge, fromEvent, EMPTY, combineLatest } from 'rxjs';
 import { startWith, map, catchError, filter, shareReplay } from 'rxjs/operators';
 import { DaffServerSafePersistenceServiceToken } from '@daffodil/core';
+import * as i2 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.
@@ -16,10 +18,10 @@ class DaffFormLabelDirective {
          */
         this.class = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffFormLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffFormLabelDirective, isStandalone: true, selector: "[daffFormLabel]", host: { properties: { "class.daff-form-label": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFormLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffFormLabelDirective, isStandalone: true, selector: "[daffFormLabel]", host: { properties: { "class.daff-form-label": "this.class" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffFormLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFormLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffFormLabel]',
@@ -33,11 +35,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
  */
 class DaffFormLabelModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffFormLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: DaffFormLabelModule, imports: [DaffFormLabelDirective], exports: [DaffFormLabelDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffFormLabelModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFormLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: DaffFormLabelModule, imports: [DaffFormLabelDirective], exports: [DaffFormLabelDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFormLabelModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffFormLabelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFormLabelModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -54,10 +56,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * in components like `DaffFormFieldComponent` or `DaffListComponent`.
  */
 class DaffPrefixDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffPrefixDirective, isStandalone: true, selector: "[daffPrefix]", host: { classAttribute: "daff-prefix" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffPrefixDirective, isStandalone: true, selector: "[daffPrefix]", host: { classAttribute: "daff-prefix" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffPrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffPrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffPrefix]',
@@ -72,10 +74,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * in components like `DaffFormFieldComponent` or `DaffListComponent`.
  */
 class DaffSuffixDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffSuffixDirective, isStandalone: true, selector: "[daffSuffix]", host: { classAttribute: "daff-suffix" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffSuffixDirective, isStandalone: true, selector: "[daffSuffix]", host: { classAttribute: "daff-suffix" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSuffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSuffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSuffix]',
@@ -89,13 +91,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * @deprecated in favor of standalone components. Deprecated in version 0.91.0. Will be removed in version 1.0.0.
  */
 class DaffPrefixSuffixModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffPrefixSuffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: DaffPrefixSuffixModule, imports: [DaffPrefixDirective,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffPrefixSuffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: DaffPrefixSuffixModule, imports: [DaffPrefixDirective,
             DaffSuffixDirective], exports: [DaffPrefixDirective,
             DaffSuffixDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffPrefixSuffixModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffPrefixSuffixModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffPrefixSuffixModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffPrefixSuffixModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -115,121 +117,59 @@ const DAFF_PREFIX_SUFFIX_DIRECTIVES = [
 ];
 
 /**
- * Enumerates the available color palette options for a component.
- * These values can be used to apply specific color styles to components within the application.
+ * The available color options.
  */
-var DaffPaletteEnum;
-(function (DaffPaletteEnum) {
+var DaffColorEnum;
+(function (DaffColorEnum) {
     /**
-     * Your primary color.
+     * The primary color.
      */
-    DaffPaletteEnum["Primary"] = "primary";
+    DaffColorEnum["Primary"] = "primary";
     /**
-     * Your secondary color.
+     * The secondary color.
      */
-    DaffPaletteEnum["Secondary"] = "secondary";
+    DaffColorEnum["Secondary"] = "secondary";
     /**
-     * Your tertiary color.
+     * The tertiary color.
      */
-    DaffPaletteEnum["Tertiary"] = "tertiary";
+    DaffColorEnum["Tertiary"] = "tertiary";
     /**
-     * A light color that does not change based on the defined theme.
+     * A light color that does not change based on the theme.
      */
-    DaffPaletteEnum["Light"] = "light";
+    DaffColorEnum["Light"] = "light";
     /**
-     * A dark color that does not change based on the defined theme.
+     * A dark color that does not change based on the theme.
      */
-    DaffPaletteEnum["Dark"] = "dark";
+    DaffColorEnum["Dark"] = "dark";
     /**
-     * A color that matches the defined theme.
+     * A color that matches the theme.
      */
-    DaffPaletteEnum["Theme"] = "theme";
+    DaffColorEnum["Theme"] = "theme";
     /**
-     * A color that contrasts against the defined theme.
+     * A color that contrasts against the theme.
      */
-    DaffPaletteEnum["ThemeContrast"] = "theme-contrast";
+    DaffColorEnum["ThemeContrast"] = "theme-contrast";
     /**
      * @deprecated Deprecated in version 0.82.0. Will be removed in version 1.0.0.
-     * Black. It's dark.
      */
-    DaffPaletteEnum["Black"] = "black";
+    DaffColorEnum["Black"] = "black";
     /**
      * @deprecated Deprecated in version 0.82.0. Will be removed in version 1.0.0.
-     * White. It's bright.
      */
-    DaffPaletteEnum["White"] = "white";
-})(DaffPaletteEnum || (DaffPaletteEnum = {}));
+    DaffColorEnum["White"] = "white";
+})(DaffColorEnum || (DaffColorEnum = {}));
 
-const colorInPalette = (color) => Object.values(DaffPaletteEnum).includes(color);
+const isDaffColor = (color) => Object.values(DaffColorEnum).includes(color);
 const validateColor = (color) => {
     if (isDevMode()) {
-        if (color !== undefined && !colorInPalette(color)) {
-            console.warn(color + ' is not a valid color in DaffPalette');
+        if (color !== undefined && !isDaffColor(color)) {
+            console.warn(color + ' is not a valid color in 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.
  */
 class DaffColorableDirective {
     /**
@@ -249,10 +189,10 @@ class DaffColorableDirective {
             this.color = this.defaultColor;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffColorableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffColorableDirective, isStandalone: true, selector: "[daffColorable]", inputs: { color: "color" }, host: { properties: { "class.daff-primary": "color === \"primary\"", "class.daff-secondary": "color === \"secondary\"", "class.daff-tertiary": "color === \"tertiary\"", "class.daff-light": "color === \"light\"", "class.daff-dark": "color === \"dark\"", "class.daff-theme": "color === \"theme\"", "class.daff-theme-contrast": "color === \"theme-contrast\"", "class.daff-black": "color === \"black\"", "class.daff-white": "color === \"white\"" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffColorableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffColorableDirective, isStandalone: true, selector: "[daffColorable]", inputs: { color: "color" }, host: { properties: { "class.daff-primary": "color === \"primary\"", "class.daff-secondary": "color === \"secondary\"", "class.daff-tertiary": "color === \"tertiary\"", "class.daff-light": "color === \"light\"", "class.daff-dark": "color === \"dark\"", "class.daff-theme": "color === \"theme\"", "class.daff-theme-contrast": "color === \"theme-contrast\"", "class.daff-black": "color === \"black\"", "class.daff-white": "color === \"white\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffColorableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffColorableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffColorable]',
@@ -272,32 +212,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Sensible breakpoints for layouts and interfaces used across `@daffodil/design` components.
+ */
 var DaffBreakpoints;
 (function (DaffBreakpoints) {
+    /** `min-width: 1920px` */
     DaffBreakpoints["DESKTOP"] = "(min-width: 1920px)";
+    /** `min-width: 1440px` */
     DaffBreakpoints["LAPTOP"] = "(min-width: 1440px)";
+    /** `min-width: 1200px` */
     DaffBreakpoints["SMALL_LAPTOP"] = "(min-width: 1200px)";
+    /** `min-width: 1024px` */
     DaffBreakpoints["BIG_TABLET"] = "(min-width: 1024px)";
+    /** `min-width: 768px` */
     DaffBreakpoints["TABLET"] = "(min-width: 768px)";
+    /** `min-width: 480px` */
     DaffBreakpoints["MOBILE"] = "(min-width: 480px)";
 })(DaffBreakpoints || (DaffBreakpoints = {}));
 
 /**
- * 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.
  */
 class NoopBreakpointObserver {
+    /**
+     * @docs-private
+     */
     // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method, @angular-eslint/use-lifecycle-interface
     ngOnDestroy() { }
+    /**
+     * Always returns `false`, indicating that none of the given media queries are active.
+     */
     isMatched(value) {
         return false;
     }
+    /**
+     * Returns an observable that never emits a `BreakpointState`, making breakpoint-dependent logic inert.
+     */
     observe(value) {
         return of();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NoopBreakpointObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NoopBreakpointObserver, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NoopBreakpointObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NoopBreakpointObserver, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NoopBreakpointObserver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NoopBreakpointObserver, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -399,10 +359,10 @@ class DaffStatusableDirective {
             this.status = this.defaultStatus;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffStatusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffStatusableDirective, isStandalone: true, selector: "[daffStatusable]", inputs: { status: "status" }, host: { properties: { "class.daff-info": "status === \"info\"", "class.daff-warn": "status === \"warn\"", "class.daff-critical": "status === \"critical\"", "class.daff-success": "status === \"success\"" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffStatusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffStatusableDirective, isStandalone: true, selector: "[daffStatusable]", inputs: { status: "status" }, host: { properties: { "class.daff-info": "status === \"info\"", "class.daff-warn": "status === \"warn\"", "class.daff-critical": "status === \"critical\"", "class.daff-success": "status === \"success\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffStatusableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffStatusableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffStatusable]',
@@ -465,10 +425,10 @@ class DaffSkeletonableDirective {
          */
         this.skeleton = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSkeletonableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffSkeletonableDirective, isStandalone: true, selector: "[daffSkeletonable]", inputs: { skeleton: "skeleton" }, host: { properties: { "class.daff-skeleton": "skeleton" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSkeletonableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffSkeletonableDirective, isStandalone: true, selector: "[daffSkeletonable]", inputs: { skeleton: "skeleton" }, host: { properties: { "class.daff-skeleton": "skeleton" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSkeletonableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSkeletonableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSkeletonable]',
@@ -480,6 +440,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 type: Input
             }] } });
 
+/**
+ * This enum will be removed from the public api in v1.0.0.
+ */
 var DaffTextAlignmentEnum;
 (function (DaffTextAlignmentEnum) {
     DaffTextAlignmentEnum["Left"] = "left";
@@ -496,49 +459,7 @@ const validateTextAlignment = (textAlignment) => {
     }
 };
 /**
- * `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.
  */
 class DaffTextAlignableDirective {
     /**
@@ -558,10 +479,10 @@ class DaffTextAlignableDirective {
             this.textAlignment = this.defaultAlignment;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTextAlignableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffTextAlignableDirective, isStandalone: true, selector: "[daffTextAlignable]", inputs: { textAlignment: "textAlignment" }, host: { properties: { "class.daff-left": "textAlignment === \"left\"", "class.daff-center": "textAlignment === \"center\"", "class.daff-right": "textAlignment === \"right\"" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTextAlignableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffTextAlignableDirective, isStandalone: true, selector: "[daffTextAlignable]", inputs: { textAlignment: "textAlignment" }, host: { properties: { "class.daff-left": "textAlignment === \"left\"", "class.daff-center": "textAlignment === \"center\"", "class.daff-right": "textAlignment === \"right\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTextAlignableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTextAlignableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffTextAlignable]',
@@ -576,59 +497,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
             }] } });
 
 /**
- * `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.
  */
 class DaffCompactableDirective {
     constructor() {
         /**
-         * Controls whether the component is compact.
+         * Whether the component is compact.
          */
         this.compact = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCompactableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffCompactableDirective, isStandalone: true, selector: "[daffCompactable]", inputs: { compact: "compact" }, host: { properties: { "class.daff-compact": "compact" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffCompactableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffCompactableDirective, isStandalone: true, selector: "[daffCompactable]", inputs: { compact: "compact" }, host: { properties: { "class.daff-compact": "compact" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCompactableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffCompactableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffCompactable]',
@@ -698,10 +579,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * 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.
  */
 class DaffManageContainerLayoutDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffManageContainerLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffManageContainerLayoutDirective, isStandalone: true, selector: "[daffManageContainerLayout]", host: { classAttribute: "daff-manage-container-layout" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffManageContainerLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffManageContainerLayoutDirective, isStandalone: true, selector: "[daffManageContainerLayout]", host: { classAttribute: "daff-manage-container-layout" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffManageContainerLayoutDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffManageContainerLayoutDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffManageContainerLayout]',
@@ -712,33 +593,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
         }] });
 
 /**
- * `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.
  */
 class DaffArticleEncapsulatedDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffArticleEncapsulatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffArticleEncapsulatedDirective, isStandalone: true, selector: "[daffArticleEncapsulated]", host: { classAttribute: "daff-ae" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffArticleEncapsulatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffArticleEncapsulatedDirective, isStandalone: true, selector: "[daffArticleEncapsulated]", host: { classAttribute: "daff-ae" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffArticleEncapsulatedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffArticleEncapsulatedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffArticleEncapsulated]',
@@ -788,10 +649,10 @@ class DaffOsThemeService {
     getThemePreference() {
         return this.preference$;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffOsThemeService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffOsThemeService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOsThemeService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOsThemeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffOsThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOsThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -845,10 +706,10 @@ class DaffThemeStorageService {
         this.progressStorageEvent(DaffTheme.None);
         this.storage.removeItem(THEME_STORAGE_KEY);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffThemeStorageService, deps: [{ token: DaffServerSafePersistenceServiceToken }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffThemeStorageService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemeStorageService, deps: [{ token: DaffServerSafePersistenceServiceToken }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemeStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffThemeStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemeStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -919,10 +780,10 @@ class DaffThemingService {
             ? this.lightMode()
             : this.darkMode();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffThemingService, deps: [{ token: DaffOsThemeService }, { token: DaffThemeStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffThemingService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemingService, deps: [{ token: DaffOsThemeService }, { token: DaffThemeStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffThemingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -965,10 +826,10 @@ class DaffThemeClassSetterService {
         this.renderer.removeClass(this.doc.body, DAFF_THEME_LIGHT_CSS_CLASS);
         this.renderer.removeClass(this.doc.body, DAFF_THEME_DARK_CSS_CLASS);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffThemeClassSetterService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }, { token: DaffThemingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffThemeClassSetterService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemeClassSetterService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }, { token: DaffThemingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemeClassSetterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffThemeClassSetterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemeClassSetterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -1049,10 +910,10 @@ class DaffFocusStackService {
         this.document.activeElement.blur();
         return this.document.activeElement;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffFocusStackService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffFocusStackService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFocusStackService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFocusStackService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffFocusStackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFocusStackService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -1138,10 +999,10 @@ class DaffSizableDirective {
             this.size = this.defaultSize;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffSizableDirective, isStandalone: true, selector: "[daffSizable]", inputs: { size: "size" }, host: { properties: { "class.daff-xs": "size === \"xs\"", "class.daff-sm": "size === \"sm\"", "class.daff-md": "size === \"md\"", "class.daff-lg": "size === \"lg\"", "class.daff-xl": "size === \"xl\"" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffSizableDirective, isStandalone: true, selector: "[daffSizable]", inputs: { size: "size" }, host: { properties: { "class.daff-xs": "size === \"xs\"", "class.daff-sm": "size === \"sm\"", "class.daff-md": "size === \"md\"", "class.daff-lg": "size === \"lg\"", "class.daff-xl": "size === \"xl\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSizableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSizableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSizable]',
@@ -1264,10 +1125,10 @@ class DaffOpenableDirective {
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffOpenableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffOpenableDirective, isStandalone: true, selector: "[daffOpenable]", inputs: { open: "open" }, outputs: { toggled: "toggled" }, host: { properties: { "class.daff-open": "open" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOpenableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffOpenableDirective, isStandalone: true, selector: "[daffOpenable]", inputs: { open: "open" }, outputs: { toggled: "toggled" }, host: { properties: { "class.daff-open": "open" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffOpenableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOpenableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffOpenable]',
@@ -1281,6 +1142,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 type: Output
             }] } });
 
+/**
+ * This enum will be removed from the public api in v1.0.0.
+ */
 var DaffOrientationEnum;
 (function (DaffOrientationEnum) {
     DaffOrientationEnum["Horizontal"] = "horizontal";
@@ -1296,43 +1160,7 @@ const validateOrientation = (orientation) => {
     }
 };
 /**
- * `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.
  */
 class DaffOrientableDirective {
     /**
@@ -1352,10 +1180,10 @@ class DaffOrientableDirective {
             this.orientation = this.defaultOrientation;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffOrientableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffOrientableDirective, isStandalone: true, selector: "[daffOrientable]", inputs: { orientation: "orientation" }, host: { properties: { "class.daff-horizontal": "orientation === \"horizontal\"", "class.daff-vertical": "orientation === \"vertical\"" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOrientableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffOrientableDirective, isStandalone: true, selector: "[daffOrientable]", inputs: { orientation: "orientation" }, host: { properties: { "class.daff-horizontal": "orientation === \"horizontal\"", "class.daff-vertical": "orientation === \"vertical\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffOrientableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOrientableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffOrientable]',
@@ -1397,10 +1225,10 @@ class DaffSelectableDirective {
         this.cd.markForCheck();
         return this;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSelectableDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffSelectableDirective, isStandalone: true, selector: "[daffSelected]", inputs: { selected: "selected" }, outputs: { becameSelected: "becameSelected" }, host: { properties: { "class.daff-selected": "selected" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSelectableDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffSelectableDirective, isStandalone: true, selector: "[daffSelected]", inputs: { selected: "selected" }, outputs: { becameSelected: "becameSelected" }, host: { properties: { "class.daff-selected": "selected" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSelectableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSelected]',
@@ -1534,10 +1362,10 @@ class DaffStickyTrackerDirective {
             this.renderer.removeChild(this.sentinelElement.parentElement, this.sentinelElement);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffStickyTrackerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffStickyTrackerDirective, isStandalone: true, selector: "[daffStickyTracker]", inputs: { sticky: "sticky" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffStickyTrackerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffStickyTrackerDirective, isStandalone: true, selector: "[daffStickyTracker]", inputs: { sticky: "sticky" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffStickyTrackerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffStickyTrackerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffStickyTracker]',
@@ -1550,17 +1378,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
             }] } });
 
 /**
- * `DaffDisableableDirective` allows a component to display a disabled UI
+ * Enforces consistent use of the disabled property.
+ */
+class DaffDisableableDirective {
+    constructor() {
+        /**
+         * Whether the component is disabled.
+         */
+        this.disabled = false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffDisableableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffDisableableDirective, isStandalone: true, selector: "[daffDisableable]", inputs: { disabled: "disabled" }, host: { properties: { "class.daff-disabled": "disabled" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffDisableableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffDisableable]',
+                    host: {
+                        '[class.daff-disabled]': 'disabled',
+                    },
+                }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }] } });
+
+/**
+ * `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
@@ -1571,8 +1424,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  *  template: 'custom-component.html',
  *  hostDirectives: [
  *    {
- *      directive: DaffDisableableDirective,
- *      inputs: ['disabled'],
+ *      directive: DaffLoadableDirective,
+ *      inputs: ['loading'],
  *    },
  *  ],
  * })
@@ -1581,40 +1434,246 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  *
  * ```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.
  */
-class DaffDisableableDirective {
+class DaffLoadableDirective {
     constructor() {
-        this.disabled = false;
+        this.loading = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffDisableableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffDisableableDirective, isStandalone: true, selector: "[daffDisableable]", inputs: { disabled: "disabled" }, host: { properties: { "class.daff-disabled": "disabled" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffLoadableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffLoadableDirective, isStandalone: true, selector: "[daffLoadable]", inputs: { loading: "loading" }, host: { properties: { "class.daff-loading": "loading" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffDisableableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffLoadableDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[daffDisableable]',
+                    selector: '[daffLoadable]',
                     host: {
-                        '[class.daff-disabled]': 'disabled',
+                        '[class.daff-loading]': 'loading',
                     },
                 }]
-        }], propDecorators: { disabled: [{
+        }], propDecorators: { loading: [{
                 type: Input
             }] } });
 
-class DaffErrorStateMatcher {
-    isErrorState(control, formSubmitted) {
-        return control.errors && (control.touched || formSubmitted);
+class DaffRovingTabIndexService {
+    constructor(document) {
+        this.document = document;
+        this._hierarchy = [];
+        this._group = signal('', ...(ngDevMode ? [{ debugName: "_group" }] : []));
+        this.group = this._group.asReadonly();
     }
+    enter(group) {
+        if (this._group() !== group) {
+            this._hierarchy.push(group);
+            this._group.set(group);
+            const el = this.document.querySelector(`[data-rti="${group}"]`);
+            if (el) {
+                this.document.activeElement.blur();
+                el.focus();
+            }
+        }
+    }
+    leave() {
+        const prev = this._hierarchy.pop();
+        if (prev) {
+            const group = this._hierarchy[this._hierarchy.length - 1] || '';
+            this._group.set(group);
+            this.document.activeElement.blur();
+            const boundary = this.document.querySelector(`[data-rti-boundary="${prev}"][data-rti="${group}"]`);
+            if (boundary) {
+                boundary.focus();
+            }
+            else {
+                console.warn(`The boundary for RTI group ${prev} does not have a reference to the parent group ${group}`);
+            }
+        }
+    }
+    next() {
+        this._changeFocus();
+    }
+    previous() {
+        this._changeFocus(true);
+    }
+    _changeFocus(up = false) {
+        if (this._group()) {
+            const ary = Array.from(this.document.querySelectorAll(`[data-rti="${this._group()}"]`));
+            const index = ary.findIndex((el) => el === this.document.activeElement);
+            this.document.activeElement.blur();
+            (up
+                ? ary[index === 0 ? ary.length - 1 : index - 1]
+                : ary[index === ary.length - 1 ? 0 : index + 1]).focus();
+        }
+    }
+    onKeydown(evt) {
+        if ('key' in evt) {
+            switch (evt.key) {
+                case 'ArrowUp':
+                case 'ArrowDown':
+                    if (this._group()) {
+                        evt.preventDefault();
+                        const ary = Array.from(this.document.querySelectorAll(`[data-rti="${this._group()}"]`));
+                        const index = ary.findIndex((el) => el === this.document.activeElement);
+                        this.document.activeElement.blur();
+                        (evt.key === 'ArrowUp'
+                            ? ary[index === 0 ? ary.length - 1 : index - 1]
+                            : ary[index === ary.length - 1 ? 0 : index + 1]).focus();
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+/**
+ * Defines the boundary of an RTI group.
+ */
+class DaffRovingTabIndexBoundaryDirective {
+    /**
+     * Don't touch this directly. Use `_uniqueId`.
+     */
+    static { this._uniqueIdCounter = 0; }
+    get _uniqueId() {
+        if (!this._cachedUniqueId) {
+            this._cachedUniqueId = `ε-rtiBoundary-${DaffRovingTabIndexBoundaryDirective._uniqueIdCounter++}`;
+        }
+        return this._cachedUniqueId;
+    }
+    constructor(groupService, focusTrap) {
+        this.groupService = groupService;
+        this.focusTrap = focusTrap;
+        /**
+         * The name of the group for which that this element will act as boundary.
+         * Optional, will be autogenerated to a unique name if omitted.
+         */
+        this.rtiBoundary = input(null, ...(ngDevMode ? [{ debugName: "rtiBoundary" }] : []));
+        /**
+         * The name of the group defined by this boundary.
+         */
+        this.effectiveBoundary = computed(() => this.rtiBoundary() || this._uniqueId, ...(ngDevMode ? [{ debugName: "effectiveBoundary" }] : []));
+        effect(() => {
+            this.focusTrap.enabled = this.effectiveBoundary() === this.groupService.group();
+        });
+    }
+    /**
+     * @docs-private
+     */
+    enterGroup(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.groupService.enter(this.effectiveBoundary());
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexBoundaryDirective, deps: [{ token: DaffRovingTabIndexService }, { token: i2.CdkTrapFocus }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: DaffRovingTabIndexBoundaryDirective, isStandalone: true, selector: "[rtiBoundary]", inputs: { rtiBoundary: { classPropertyName: "rtiBoundary", publicName: "rtiBoundary", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.space": "enterGroup($event)" }, properties: { "attr.data-rti-boundary": "effectiveBoundary()" } }, hostDirectives: [{ directive: i2.CdkTrapFocus }, { directive: i0.forwardRef(() => DaffRovingTabIndexDirective) }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexBoundaryDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[rtiBoundary]',
+                    host: {
+                        '[attr.data-rti-boundary]': 'effectiveBoundary()',
+                        '(keydown.space)': 'enterGroup($event)',
+                    },
+                    hostDirectives: [
+                        CdkTrapFocus,
+                        forwardRef((() => DaffRovingTabIndexDirective)),
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: DaffRovingTabIndexService }, { type: i2.CdkTrapFocus }], propDecorators: { rtiBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtiBoundary", required: false }] }] } });
+
+/**
+ * Declares that an element is an RTI target.
+ * Automatically applied to `<a>` and `<button>` elements.
+ */
+class DaffRovingTabIndexDirective {
+    constructor(service, parent) {
+        this.service = service;
+        this.parent = 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}.
+         */
+        this.rti = input('', ...(ngDevMode ? [{ debugName: "rti" }] : []));
+        /**
+         * The group in which this RTI target resides.
+         * See {@link DaffRovingTabIndexBoundaryDirective} to make an element act as the boundary of an RTI group.
+         */
+        this.group = computed(() => this.rti() || this.parent?.effectiveBoundary() || '', ...(ngDevMode ? [{ debugName: "group" }] : []));
+        /**
+         * @docs-private
+         */
+        this.tabindex = computed(() => this.service.group() === this.group()
+            ? 0
+            : -1, ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+    }
+    /**
+     * @docs-private
+     */
+    leaveGroup(evt) {
+        evt.stopPropagation();
+        this.service.leave();
+    }
+    /**
+     * @docs-private
+     */
+    next(evt) {
+        evt.stopPropagation();
+        this.service.next();
+    }
+    /**
+     * @docs-private
+     */
+    previous(evt) {
+        evt.stopPropagation();
+        this.service.previous();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexDirective, deps: [{ token: DaffRovingTabIndexService }, { token: DaffRovingTabIndexBoundaryDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: DaffRovingTabIndexDirective, isStandalone: true, selector: "[rti],a,button", inputs: { rti: { classPropertyName: "rti", publicName: "rti", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "leaveGroup($event)", "keydown.arrowup": "previous($event)", "keydown.arrowdown": "next($event)" }, properties: { "attr.tabindex": "tabindex()", "attr.data-rti": "group()" } }, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[rti],a,button',
+                    host: {
+                        '[attr.tabindex]': 'tabindex()',
+                        '[attr.data-rti]': 'group()',
+                        '(keydown.escape)': 'leaveGroup($event)',
+                        '(keydown.arrowup)': 'previous($event)',
+                        '(keydown.arrowdown)': 'next($event)',
+                    },
+                }]
+        }], ctorParameters: () => [{ type: DaffRovingTabIndexService }, { type: DaffRovingTabIndexBoundaryDirective, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }], propDecorators: { rti: [{ type: i0.Input, args: [{ isSignal: true, alias: "rti", required: false }] }] } });
 
 // Core
 
@@ -1632,5 +1691,5 @@ class DaffErrorStateMatcher {
  * Generated bundle index. Do not edit.
  */
 
-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 { 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 };
 //# sourceMappingURL=daffodil-design.mjs.map