@daffodil/design 0.90.0 → 0.92.3-rc.0

package/fesm2022/daffodil-design.mjs

@@ -1,316 +1,12 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, ElementRef, HostBinding, Output, Input, ViewChild, ChangeDetectionStrategy, Component, Optional, Self, Directive, ContentChildren, NgModule, isDevMode, Injectable, InjectionToken, inject, PLATFORM_ID, DOCUMENT, Inject, makeEnvironmentProviders, provideAppInitializer, afterNextRender } from '@angular/core';
-import * as i1 from '@angular/forms';
+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';
-
-class DaffErrorStateMatcher {
-    isErrorState(control, formSubmitted) {
-        return control.errors && (control.touched || formSubmitted);
-    }
-}
-
-let checkboxIdNum = 0;
-class DaffCheckboxComponent {
-    get checked() {
-        return this._checked;
-    }
-    set checked(value) {
-        if (this._checked === value) {
-            return;
-        }
-        if (value === true) {
-            this.nativeCheckbox.nativeElement.checked = true;
-            this.becameChecked.emit(this._checked);
-        }
-        else {
-            this.nativeCheckbox.nativeElement.checked = false;
-            this.becameUnchecked.emit();
-        }
-        this._checked = value;
-    }
-    /**
-     * @docs-private
-     */
-    _onChange(val) {
-        if (val.target.checked) {
-            this.select();
-        }
-        else {
-            this.deselect();
-        }
-    }
-    ;
-    /**
-     * @docs-private
-     */
-    get focusClass() {
-        return this.focused === true;
-    }
-    ;
-    /**
-     * @docs-private
-     */
-    get disabledClass() {
-        return this.disabled === true;
-    }
-    ;
-    /**
-     * Sets focused to false.
-     */
-    onBlur() {
-        this.focused = false;
-    }
-    /**
-     * Sets focused to true.
-     */
-    onFocus() {
-        this.focused = true;
-    }
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
-        /**
-         * Boolean value to determine whether or not the checkbox is checked.
-         */
-        this._checked = false;
-        /**
-         * The id of the checkbox. Must be unique. If not entered by a user then it is generated.
-         */
-        this.id = 'daff-checkbox-' + checkboxIdNum;
-        /**
-         * The aria-label of the checkbox.
-         */
-        // eslint-disable-next-line @angular-eslint/no-input-rename
-        this.label = '';
-        /**
-         * Event on whether or not the selection has changed.
-         */
-        this.becameChecked = new EventEmitter();
-        this.becameUnchecked = new EventEmitter();
-        /**
-         * The role of the component. Set to "checkbox".
-         *
-         * @docs-private
-         */
-        this.role = 'checkbox';
-        /**
-         * Increments id number on new checkbox. Gurantees unique ID on generation.
-         */
-        checkboxIdNum++;
-    }
-    /**
-     * Sets checked to true.
-     */
-    select() {
-        this.checked = true;
-        this._cdRef.markForCheck();
-    }
-    /**
-     * Sets checked to false
-     */
-    deselect() {
-        this.checked = false;
-        this._cdRef.markForCheck();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DaffCheckboxComponent, isStandalone: false, selector: "daff-checkbox", inputs: { name: "name", value: "value", checked: "checked", id: "id", label: ["aria-label", "label"], labeledBy: ["aria-labelledby", "labeledBy"] }, outputs: { becameChecked: "becameChecked", becameUnchecked: "becameUnchecked" }, host: { properties: { "attr.role": "this.role", "class.focused": "this.focusClass", "class.disabled": "this.disabledClass" } }, viewQueries: [{ propertyName: "nativeCheckbox", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<input #inputElement\ntype=\"checkbox\"\n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labeledBy\"\n[attr.checked]=\"checked ? '' : null\"\n[attr.id] = \"id\"\n[attr.value]=\"value\"\n[attr.name]=\"name\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"_onChange($event)\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"\n/>\n<label [attr.for]=\"id\"><ng-content></ng-content></label>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<input #inputElement\ntype=\"checkbox\"\n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labeledBy\"\n[attr.checked]=\"checked ? '' : null\"\n[attr.id] = \"id\"\n[attr.value]=\"value\"\n[attr.name]=\"name\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"_onChange($event)\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"\n/>\n<label [attr.for]=\"id\"><ng-content></ng-content></label>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { nativeCheckbox: [{
-                type: ViewChild,
-                args: ['inputElement', { static: true, read: ElementRef }]
-            }], name: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], label: [{
-                type: Input,
-                args: ['aria-label']
-            }], labeledBy: [{
-                type: Input,
-                args: ['aria-labelledby']
-            }], becameChecked: [{
-                type: Output
-            }], becameUnchecked: [{
-                type: Output
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], focusClass: [{
-                type: HostBinding,
-                args: ['class.focused']
-            }], disabledClass: [{
-                type: HostBinding,
-                args: ['class.disabled']
-            }] } });
-
-/**
- * A directive for binding the DaffCheckboxComponent and the Control Value Accessor.
- */
-class DaffCheckboxControlValueAccessorDirective {
-    constructor(_control, _checkbox) {
-        this._control = _control;
-        this._checkbox = _checkbox;
-        if (this._control != null) {
-            this._control.valueAccessor = this;
-        }
-    }
-    /**
-     * A lifecycle method called when the directive is initialized.
-     */
-    /**
-     * @docs-private
-     */
-    ngOnInit() {
-        // See the note about `writeValue` usage.
-        this.writeValue(this._control.value);
-        // Watch for user events on the component to update the state
-        this._checkbox.becameChecked.subscribe(() => {
-            this._onChange(true);
-        });
-        this._checkbox.becameUnchecked.subscribe(() => {
-            this._onChange(false);
-        });
-    }
-    /**
-     * writes a new value down into the component.
-     */
-    writeValue(value) {
-        value = !!value;
-        if (value === true) {
-            this.fireSelect();
-        }
-        else {
-            this.fireDeselect();
-        }
-    }
-    /**
-     * Registers the change handler
-     */
-    registerOnChange(fn) {
-        this._onChange = (val) => {
-            fn(val);
-        };
-    }
-    /**
-     * Registers the touched handler
-     */
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    /**
-     * Sets the disabled state.
-     */
-    setDisabledState(isDisabled) {
-        this._checkbox.disabled = isDisabled;
-    }
-    /**
-     * calls the child checkbox's select function
-     */
-    fireSelect() {
-        this._checkbox.select();
-    }
-    /**
-     * calls the child checkbox's deselect function
-     */
-    fireDeselect() {
-        this._checkbox.deselect();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxControlValueAccessorDirective, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DaffCheckboxComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffCheckboxControlValueAccessorDirective, isStandalone: false, selector: "daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]", inputs: { value: "value", name: "name" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxControlValueAccessorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]',
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: DaffCheckboxComponent }], propDecorators: { value: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }] } });
-
-class DaffCheckboxSetComponent {
-    constructor() {
-        /**
-         * The role of the component. Set to "checkbox".
-         *
-         * @docs-private
-         */
-        this.role = 'group';
-        this.valueList = new EventEmitter();
-    }
-    getValues() {
-        const checkboxes = this.checkboxes.toArray();
-        return this.formArray.value.map((element, index) => element === true ? checkboxes[index].value : false).filter(element => element !== false);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DaffCheckboxSetComponent, isStandalone: false, selector: "daff-checkbox-set", inputs: { formArray: "formArray", name: "name" }, outputs: { valueList: "valueList" }, host: { properties: { "attr.role": "this.role" } }, queries: [{ propertyName: "checkboxes", predicate: DaffCheckboxComponent }], ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxSetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-checkbox-set', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>" }]
-        }], propDecorators: { formArray: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], checkboxes: [{
-                type: ContentChildren,
-                args: [DaffCheckboxComponent]
-            }], valueList: [{
-                type: Output
-            }] } });
-
-class DaffCheckboxModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxModule, declarations: [DaffCheckboxComponent,
-            DaffCheckboxSetComponent,
-            DaffCheckboxControlValueAccessorDirective], imports: [CommonModule], exports: [DaffCheckboxComponent,
-            DaffCheckboxSetComponent,
-            DaffCheckboxControlValueAccessorDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxModule, providers: [
-            DaffCheckboxSetComponent,
-        ], imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [
-                        DaffCheckboxComponent,
-                        DaffCheckboxSetComponent,
-                        DaffCheckboxControlValueAccessorDirective,
-                    ],
-                    declarations: [
-                        DaffCheckboxComponent,
-                        DaffCheckboxSetComponent,
-                        DaffCheckboxControlValueAccessorDirective,
-                    ],
-                    imports: [
-                        CommonModule,
-                    ],
-                    providers: [
-                        DaffCheckboxSetComponent,
-                    ],
-                }]
-        }] });
+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.
@@ -322,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]',
@@ -339,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: [
@@ -356,63 +52,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
         }] });
 
 /**
- *
- * 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`.
  */
 class DaffPrefixDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
-    /** @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: { properties: { "class.daff-prefix": "this.class" } }, 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]',
+                    host: {
+                        class: 'daff-prefix',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-prefix']
-            }] } });
+        }] });
 
 /**
- *
- * 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`.
  */
 class DaffSuffixDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
-    /** @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: { properties: { "class.daff-suffix": "this.class" } }, 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]',
+                    host: {
+                        class: 'daff-suffix',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-suffix']
-            }] } });
+        }] });
 
+/**
+ * @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: [
@@ -426,141 +111,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 }]
         }] });
 
+const DAFF_PREFIX_SUFFIX_DIRECTIVES = [
+    DaffPrefixDirective,
+    DaffSuffixDirective,
+];
+
 /**
- * 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 {
-    /**
-     * Dynamically sets the CSS classes based on the color.
-     * @docs-private
-     */
-    get class() {
-        return {
-            'daff-primary': this.color === DaffPaletteEnum.Primary,
-            'daff-secondary': this.color === DaffPaletteEnum.Secondary,
-            'daff-tertiary': this.color === DaffPaletteEnum.Tertiary,
-            'daff-light': this.color === DaffPaletteEnum.Light,
-            'daff-dark': this.color === DaffPaletteEnum.Dark,
-            'daff-theme': this.color === DaffPaletteEnum.Theme,
-            'daff-theme-contrast': this.color === DaffPaletteEnum.ThemeContrast,
-            'daff-black': this.color === DaffPaletteEnum.Black,
-            'daff-white': this.color === DaffPaletteEnum.White,
-        };
-    }
     /**
      * @docs-private
      */
@@ -578,47 +189,75 @@ 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": "this.class" } }, 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]',
+                    host: {
+                        '[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"',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], color: [{
+        }], propDecorators: { color: [{
                 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',
@@ -675,7 +314,6 @@ const validateStatus = (status) => {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -704,18 +342,6 @@ const validateStatus = (status) => {
  * - `daff-success`: Applied when the status is `success`.
  */
 class DaffStatusableDirective {
-    /**
-     * Dynamically sets the CSS classes based on the status.
-     * @docs-private
-     */
-    get class() {
-        return {
-            'daff-info': this.status === DaffStatusEnum.Info,
-            'daff-warn': this.status === DaffStatusEnum.Warn,
-            'daff-critical': this.status === DaffStatusEnum.Critical,
-            'daff-success': this.status === DaffStatusEnum.Success,
-        };
-    }
     /**
      * @docs-private
      */
@@ -729,22 +355,25 @@ class DaffStatusableDirective {
      */
     ngOnInit() {
         validateStatus(this.status);
-        if (this.status !== this.defaultStatus && this.defaultStatus) {
+        if (this.defaultStatus && !this.status) {
             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": "this.class" } }, 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]',
+                    host: {
+                        '[class.daff-info]': 'status === "info"',
+                        '[class.daff-warn]': 'status === "warn"',
+                        '[class.daff-critical]': 'status === "critical"',
+                        '[class.daff-success]': 'status === "success"',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], status: [{
+        }], propDecorators: { status: [{
                 type: Input
             }] } });
 
@@ -766,7 +395,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -797,21 +425,24 @@ 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": "this.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]',
+                    host: {
+                        '[class.daff-skeleton]': 'skeleton',
+                    },
                 }]
         }], propDecorators: { skeleton: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.daff-skeleton']
             }] } });
 
+/**
+ * This enum will be removed from the public api in v1.0.0.
+ */
 var DaffTextAlignmentEnum;
 (function (DaffTextAlignmentEnum) {
     DaffTextAlignmentEnum["Left"] = "left";
@@ -828,62 +459,9 @@ 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({
- *  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.
  */
 class DaffTextAlignableDirective {
-    /**
-     * @docs-private
-     */
-    get class() {
-        return {
-            'daff-left': this.textAlignment === DaffTextAlignmentEnum.Left,
-            'daff-center': this.textAlignment === DaffTextAlignmentEnum.Center,
-            'daff-right': this.textAlignment === DaffTextAlignmentEnum.Right,
-        };
-    }
     /**
      * @docs-private
      */
@@ -901,86 +479,46 @@ 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": "this.class" } }, 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]',
+                    host: {
+                        '[class.daff-left]': 'textAlignment === "left"',
+                        '[class.daff-center]': 'textAlignment === "center"',
+                        '[class.daff-right]': 'textAlignment === "right"',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], textAlignment: [{
+        }], propDecorators: { textAlignment: [{
                 type: Input
             }] } });
 
 /**
- * `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.
  */
 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": "this.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]',
-                    standalone: true,
+                    host: {
+                        '[class.daff-compact]': 'compact',
+                    },
                 }]
         }], propDecorators: { compact: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.daff-compact']
             }] } });
 
 /**
@@ -1025,7 +563,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'my-custom-component',
  *  template: 'my-custom-component.html',
  *  hostDirectives: [{ directive: DaffManageContainerLayoutDirective }],
@@ -1042,70 +579,35 @@ 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 {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
-    /** @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: { properties: { "class.daff-manage-container-layout": "this.class" } }, 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]',
-                    standalone: true,
+                    host: {
+                        class: 'daff-manage-container-layout',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-manage-container-layout']
-            }] } });
+        }] });
 
 /**
- * `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.
  */
 class DaffArticleEncapsulatedDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
-    /** @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: { properties: { "class.daff-ae": "this.class" } }, 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]',
-                    standalone: true,
+                    host: {
+                        class: 'daff-ae',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-ae']
-            }] } });
+        }] });
 
 /**
  * The possible states of a theme.
@@ -1147,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',
@@ -1204,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',
@@ -1278,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',
@@ -1324,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,
@@ -1408,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: [{
@@ -1481,19 +983,6 @@ var DaffSizableEnum;
  * - `daff-xl`: Applied when the size is `xl`.
  */
 class DaffSizableDirective {
-    /**
-     * Dynamically sets the CSS classes based on the size.
-     * @docs-private
-     */
-    get class() {
-        return {
-            'daff-xs': this.size === DaffSizableEnum.XSmall,
-            'daff-sm': this.size === DaffSizableEnum.Small,
-            'daff-md': this.size === DaffSizableEnum.Medium,
-            'daff-lg': this.size === DaffSizableEnum.Large,
-            'daff-xl': this.size === DaffSizableEnum.XLarge,
-        };
-    }
     /**
      * @docs-private
      */
@@ -1510,19 +999,22 @@ 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": "this.class" } }, 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]',
-                    standalone: true,
+                    host: {
+                        '[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"',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], size: [{
+        }], propDecorators: { size: [{
                 type: Input
             }] } });
 
@@ -1633,24 +1125,77 @@ 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": "this.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]',
-                    standalone: true,
+                    host: {
+                        '[class.daff-open]': 'open',
+                    },
                 }]
         }], propDecorators: { open: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.daff-open']
             }], toggled: [{
                 type: Output
             }] } });
 
+/**
+ * This enum will be removed from the public api in v1.0.0.
+ */
+var DaffOrientationEnum;
+(function (DaffOrientationEnum) {
+    DaffOrientationEnum["Horizontal"] = "horizontal";
+    DaffOrientationEnum["Vertical"] = "vertical";
+})(DaffOrientationEnum || (DaffOrientationEnum = {}));
+
+const orientationValues = (orientation) => Object.values(DaffOrientationEnum).includes(orientation);
+const validateOrientation = (orientation) => {
+    if (isDevMode()) {
+        if (orientation !== undefined && !orientationValues(orientation)) {
+            console.warn(`'${orientation}' is not a valid value of the orientation property. The available values are: left, center, or right.`);
+        }
+    }
+};
+/**
+ * `DaffOrientableDirective`enforces consistent use of orientation across components.
+ */
+class DaffOrientableDirective {
+    /**
+     * @docs-private
+     */
+    ngOnInit() {
+        if (this.defaultOrientation && !this.orientation) {
+            this.orientation = this.defaultOrientation;
+        }
+        validateOrientation(this.orientation);
+    }
+    /**
+     * @docs-private
+     */
+    ngOnChanges(changes) {
+        if (!changes.orientation?.currentValue) {
+            this.orientation = this.defaultOrientation;
+        }
+    }
+    /** @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.18", ngImport: i0, type: DaffOrientableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffOrientable]',
+                    host: {
+                        '[class.daff-horizontal]': 'orientation === "horizontal"',
+                        '[class.daff-vertical]': 'orientation === "vertical"',
+                    },
+                }]
+        }], propDecorators: { orientation: [{
+                type: Input
+            }] } });
+
 class DaffSelectableDirective {
     constructor(cd) {
         this.cd = cd;
@@ -1659,35 +1204,40 @@ class DaffSelectableDirective {
          */
         this.selected = false;
         /**
-         * An event that fires after the media element becomes selected.
+         * An event that fires after the component becomes selected.
          */
         this.becameSelected = new EventEmitter();
     }
+    /**
+     * Selects the component and emits the `becameSelected` event.
+     */
     select() {
         this.selected = true;
         this.becameSelected.emit();
         this.cd.markForCheck();
         return this;
     }
+    /**
+     * Deselects the component.
+     */
     deselect() {
         this.selected = false;
         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": "this.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]',
-                    standalone: true,
+                    host: {
+                        '[class.daff-selected]': 'selected',
+                    },
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selected: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.daff-selected']
             }], becameSelected: [{
                 type: Output
             }] } });
@@ -1812,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]',
@@ -1827,6 +1377,304 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 type: Input
             }] } });
 
+/**
+ * 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 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.
+ */
+class DaffLoadableDirective {
+    constructor() {
+        this.loading = false;
+    }
+    /** @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.18", ngImport: i0, type: DaffLoadableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffLoadable]',
+                    host: {
+                        '[class.daff-loading]': 'loading',
+                    },
+                }]
+        }], propDecorators: { loading: [{
+                type: Input
+            }] } });
+
+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
 
 /*
@@ -1843,5 +1691,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 { 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