@koobiq/components 20.4.1 → 21.0.0

package/fesm2022/koobiq-components-dl.mjs

@@ -1,121 +1,479 @@
-import { Platform, PlatformModule } from '@angular/cdk/platform';
+import { FocusMonitor, CdkMonitorFocus } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import * as i0 from '@angular/core';
-import { input, inject, ElementRef, ChangeDetectorRef, Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import { Subject, Subscription } from 'rxjs';
-import { startWith, debounceTime } from 'rxjs/operators';
-import { A11yModule } from '@angular/cdk/a11y';
+import { InjectionToken, inject, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, input, numberAttribute, linkedSignal, output, computed, signal, DestroyRef, viewChild, contentChildren, ElementRef, afterNextRender, afterRenderEffect, untracked, effect, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@koobiq/components/core';
+import { kbqOptionalNumberAttribute, kbqInjectNativeElement, KBQ_WINDOW, KbqLocaleOverridesDirective, KBQ_A11Y_LOCALE_CONFIGURATION } from '@koobiq/components/core';
+import { KbqResizable, KbqResizer } from '@koobiq/components/resizer';
 
-class KbqDlComponent {
-    constructor() {
-        this.minWidth = input(400, ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
-        this.wide = input(false, ...(ngDevMode ? [{ debugName: "wide" }] : []));
-        /** Vertical alignment of `kbq-dt` and `kbq-dd` items. */
-        this.verticalAlign = input('start', ...(ngDevMode ? [{ debugName: "verticalAlign" }] : []));
-        /** Horizontal alignment of `kbq-dt` and `kbq-dd` items. */
-        this.horizontalAlign = input('start', ...(ngDevMode ? [{ debugName: "horizontalAlign" }] : []));
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.vertical = null;
-        this.resizeStream = new Subject();
-        this.resizeDebounceInterval = 100;
-        this.resizeSubscription = Subscription.EMPTY;
-        this.elementRef = inject(ElementRef);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.platform = inject(Platform);
-        this.updateState = () => {
-            const domRect = this.elementRef.nativeElement.getClientRects()[0];
-            const width = domRect?.width || 0;
-            this.vertical = width <= this.minWidth();
-            this.changeDetectorRef.markForCheck();
-        };
-    }
-    ngAfterContentInit() {
-        if (this.vertical !== null || !this.platform.isBrowser) {
-            return;
-        }
-        this.resizeSubscription = this.resizeStream
-            .pipe(startWith(null), debounceTime(this.resizeDebounceInterval))
-            .subscribe(this.updateState);
-    }
-    ngOnDestroy() {
-        this.resizeSubscription.unsubscribe();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqDlComponent, isStandalone: true, selector: "kbq-dl", inputs: { minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, wide: { classPropertyName: "wide", publicName: "wide", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, properties: { "class.kbq-dl_vertical": "vertical", "class.kbq-dl_wide": "wide()", "class.kbq-dl_vertical-align-center": "verticalAlign() === 'center'", "class.kbq-dl_vertical-align-end": "verticalAlign() === 'end'", "class.kbq-dl_horizontal-align-center": "horizontalAlign() === 'center'", "class.kbq-dl_horizontal-align-end": "horizontalAlign() === 'end'" }, classAttribute: "kbq-dl" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-dl{display:grid;column-gap:var(--kbq-description-list-size-horizontal-content-gap-horizontal);row-gap:var(--kbq-description-list-size-horizontal-gap-vertical);grid-template-columns:repeat(4,1fr)}.kbq-dl.kbq-dl_vertical-align-center{align-items:center}.kbq-dl.kbq-dl_vertical-align-end{align-items:end}.kbq-dl.kbq-dl_horizontal-align-center{justify-items:center}.kbq-dl.kbq-dl_horizontal-align-end{justify-items:end}.kbq-dl .kbq-dt,.kbq-dl .kbq-dd{min-width:0;overflow-wrap:break-word}.kbq-dl .kbq-dt{grid-column:1}.kbq-dl .kbq-dd{grid-column:2/span 3}.kbq-dl.kbq-dl_wide{grid-template-columns:repeat(2,1fr)}.kbq-dl.kbq-dl_wide .kbq-dt{grid-column:1}.kbq-dl.kbq-dl_wide .kbq-dd{grid-column:2}.kbq-dl.kbq-dl_vertical{grid-template-columns:repeat(1,1fr);row-gap:var(--kbq-description-list-size-vertical-content-gap-vertical)}.kbq-dl.kbq-dl_vertical .kbq-dt,.kbq-dl.kbq-dl_vertical .kbq-dd{grid-column:1}.kbq-dl.kbq-dl_vertical .kbq-dd:not(:last-child){margin-bottom:var(--kbq-description-list-size-vertical-gap-vertical)}.kbq-dt{color:var(--kbq-description-list-term-color)}.kbq-dd{color:var(--kbq-description-list-description-color)}.kbq-dl .kbq-dt,.kbq-dl .kbq-dd{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-dl{--kbq-description-list-size-horizontal-content-gap-horizontal: var(--kbq-size-l);--kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);--kbq-description-list-size-vertical-content-gap-vertical: var(--kbq-size-3xs);--kbq-description-list-size-vertical-gap-vertical: var(--kbq-size-m);--kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);--kbq-description-list-description-color: var(--kbq-foreground-contrast)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+const KBQ_DL_DEFAULT_OPTIONS = {
+    verticalBreakpoint: 400,
+    vertical: null,
+    wide: false,
+    resizable: false,
+    dtWidth: null,
+    verticalAlign: 'start',
+    horizontalAlign: 'start'
+};
+/** Injection token holding the current {@link KbqDlOptions}. */
+const KBQ_DL_OPTIONS = new InjectionToken('KBQ_DL_OPTIONS', {
+    factory: () => KBQ_DL_DEFAULT_OPTIONS
+});
+/**
+ * Overrides the default description list options within the given injector scope. The options it leaves out keep the
+ * values of the parent injector.
+ */
+function kbqDlOptionsProvider(options) {
+    // An option passed as `undefined` keeps the inherited value instead of replacing it.
+    const defined = Object.fromEntries(Object.entries(options).filter(([, value]) => value !== undefined));
+    return {
+        provide: KBQ_DL_OPTIONS,
+        useFactory: () => ({
+            ...(inject(KBQ_DL_OPTIONS, { skipSelf: true, optional: true }) ?? KBQ_DL_DEFAULT_OPTIONS),
+            ...defined
+        })
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDlComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-dl', template: '<ng-content />', encapsulation: ViewEncapsulation.None, host: {
-                        class: 'kbq-dl',
-                        '[class.kbq-dl_vertical]': 'vertical',
-                        '[class.kbq-dl_wide]': 'wide()',
-                        '[class.kbq-dl_vertical-align-center]': "verticalAlign() === 'center'",
-                        '[class.kbq-dl_vertical-align-end]': "verticalAlign() === 'end'",
-                        '[class.kbq-dl_horizontal-align-center]': "horizontalAlign() === 'center'",
-                        '[class.kbq-dl_horizontal-align-end]': "horizontalAlign() === 'end'",
-                        '(window:resize)': 'resizeStream.next($event)'
-                    }, styles: [".kbq-dl{display:grid;column-gap:var(--kbq-description-list-size-horizontal-content-gap-horizontal);row-gap:var(--kbq-description-list-size-horizontal-gap-vertical);grid-template-columns:repeat(4,1fr)}.kbq-dl.kbq-dl_vertical-align-center{align-items:center}.kbq-dl.kbq-dl_vertical-align-end{align-items:end}.kbq-dl.kbq-dl_horizontal-align-center{justify-items:center}.kbq-dl.kbq-dl_horizontal-align-end{justify-items:end}.kbq-dl .kbq-dt,.kbq-dl .kbq-dd{min-width:0;overflow-wrap:break-word}.kbq-dl .kbq-dt{grid-column:1}.kbq-dl .kbq-dd{grid-column:2/span 3}.kbq-dl.kbq-dl_wide{grid-template-columns:repeat(2,1fr)}.kbq-dl.kbq-dl_wide .kbq-dt{grid-column:1}.kbq-dl.kbq-dl_wide .kbq-dd{grid-column:2}.kbq-dl.kbq-dl_vertical{grid-template-columns:repeat(1,1fr);row-gap:var(--kbq-description-list-size-vertical-content-gap-vertical)}.kbq-dl.kbq-dl_vertical .kbq-dt,.kbq-dl.kbq-dl_vertical .kbq-dd{grid-column:1}.kbq-dl.kbq-dl_vertical .kbq-dd:not(:last-child){margin-bottom:var(--kbq-description-list-size-vertical-gap-vertical)}.kbq-dt{color:var(--kbq-description-list-term-color)}.kbq-dd{color:var(--kbq-description-list-description-color)}.kbq-dl .kbq-dt,.kbq-dl .kbq-dd{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-dl{--kbq-description-list-size-horizontal-content-gap-horizontal: var(--kbq-size-l);--kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);--kbq-description-list-size-vertical-content-gap-vertical: var(--kbq-size-3xs);--kbq-description-list-size-vertical-gap-vertical: var(--kbq-size-m);--kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);--kbq-description-list-description-color: var(--kbq-foreground-contrast)}\n"] }]
-        }], propDecorators: { minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], wide: [{ type: i0.Input, args: [{ isSignal: true, alias: "wide", required: false }] }], verticalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalAlign", required: false }] }], horizontalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlign", required: false }] }], vertical: [{
-                type: Input
-            }] } });
-class KbqDtComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDtComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqDtComponent, isStandalone: true, selector: "kbq-dt", host: { classAttribute: "kbq-dt" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+/**
+ * Coerces an attribute value to a boolean while keeping nullish apart from `false`.
+ *
+ * `booleanAttribute` folds both nullish values into `false`, which erases the "decide from
+ * `verticalBreakpoint`" state `vertical` needs.
+ */
+const optionalBooleanAttribute = (value) => value == null ? value : booleanAttribute(value);
+/** Term of a description list. */
+class KbqDt {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDt, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqDt, isStandalone: true, selector: "kbq-dt", host: { classAttribute: "kbq-dt" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDtComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDt, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-dt',
                     template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         class: 'kbq-dt'
                     }
                 }]
         }] });
-class KbqDdComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqDdComponent, isStandalone: true, selector: "kbq-dd", host: { classAttribute: "kbq-dd" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+/** Description of the term before it. */
+class KbqDd {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqDd, isStandalone: true, selector: "kbq-dd", host: { classAttribute: "kbq-dd" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDdComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDd, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-dd',
                     template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         class: 'kbq-dd'
                     }
                 }]
         }] });
+/** Description list: `kbq-dt` terms paired with `kbq-dd` descriptions in an adaptive, horizontal or vertical layout. */
+class KbqDl {
+    constructor() {
+        // Read by the input defaults below, so it is declared first.
+        this.options = inject(KBQ_DL_OPTIONS);
+        /**
+         * Host width in pixels at or below which the list auto-switches to the vertical layout.
+         * Defaults to the app-wide {@link KBQ_DL_OPTIONS}.
+         */
+        this.verticalBreakpoint = input(this.options.verticalBreakpoint, { ...(ngDevMode ? { debugName: "verticalBreakpoint" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Whether the list uses the wide two-column layout. Defaults to the app-wide {@link KBQ_DL_OPTIONS}. */
+        this.wide = input(this.options.wide, { ...(ngDevMode ? { debugName: "wide" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether the `kbq-dt` area can be resized by dragging the separator.
+         * Defaults to the app-wide {@link KBQ_DL_OPTIONS}.
+         */
+        this.resizable = input(this.options.resizable, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Backing input of `dtWidth`. Public because a signal input cannot be `protected` without breaking
+         * the binding for a `strictTemplates` consumer.
+         *
+         * @docs-private
+         */
+        this.dtWidthInput = input(this.options.dtWidth, { ...(ngDevMode ? { debugName: "dtWidthInput" } : /* istanbul ignore next */ {}), alias: 'dtWidth',
+            transform: (value) => kbqOptionalNumberAttribute(value) ?? null });
+        /**
+         * Width of the `kbq-dt` area in pixels; `null` restores the default column ratio.
+         * Defaults to the app-wide {@link KBQ_DL_OPTIONS}.
+         *
+         * Writable: a drag or a double-click on the separator sets it, and `dtWidthChange` reports that back.
+         * `model()` would have been the shorter form, but it takes no `transform`, so an uncoerced attribute
+         * reached the layout arithmetic as a string and skipped the clamp against `dtMinWidth`.
+         */
+        this.dtWidth = linkedSignal(() => this.dtWidthInput(), ...(ngDevMode ? [{ debugName: "dtWidth" }] : /* istanbul ignore next */ []));
+        /** Emits when the component itself changes `dtWidth`; completes the `[(dtWidth)]` two-way binding. */
+        this.dtWidthChange = output();
+        /**
+         * Minimum width of the `kbq-dt` area in pixels; defaults to the app-wide {@link KBQ_DL_OPTIONS}, then to the
+         * rendered term width.
+         */
+        this.dtMinWidth = input(this.options.dtMinWidth, { ...(ngDevMode ? { debugName: "dtMinWidth" } : /* istanbul ignore next */ {}), transform: kbqOptionalNumberAttribute });
+        /**
+         * Minimum width retained for the `kbq-dd` area in pixels; defaults to the app-wide {@link KBQ_DL_OPTIONS}, then
+         * to the rendered term width.
+         */
+        this.ddMinWidth = input(this.options.ddMinWidth, { ...(ngDevMode ? { debugName: "ddMinWidth" } : /* istanbul ignore next */ {}), transform: kbqOptionalNumberAttribute });
+        /** Accessible name of the column resize separator; falls back to the localized default when omitted. */
+        this.resizerAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "resizerAriaLabel" }] : /* istanbul ignore next */ []));
+        /** Vertical alignment of `kbq-dt` and `kbq-dd` items. Defaults to the app-wide {@link KBQ_DL_OPTIONS}. */
+        this.verticalAlign = input(this.options.verticalAlign, ...(ngDevMode ? [{ debugName: "verticalAlign" }] : /* istanbul ignore next */ []));
+        /** Horizontal alignment of `kbq-dt` and `kbq-dd` items. Defaults to the app-wide {@link KBQ_DL_OPTIONS}. */
+        this.horizontalAlign = input(this.options.horizontalAlign, ...(ngDevMode ? [{ debugName: "horizontalAlign" }] : /* istanbul ignore next */ []));
+        /**
+         * Forces the vertical layout; `null` lets the list decide based on `verticalBreakpoint`.
+         * Defaults to the app-wide {@link KBQ_DL_OPTIONS}.
+         */
+        this.vertical = input(this.options.vertical, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), 
+            // Not `booleanAttribute`: it would fold `null` — the "decide for me" state — into `false`.
+            transform: (value) => optionalBooleanAttribute(value) ?? null });
+        /** @docs-private */
+        this.resizeDirection = computed(() => this.directionality?.valueSignal() === 'rtl' ? [-1, 0] : [1, 0], ...(ngDevMode ? [{ debugName: "resizeDirection" }] : /* istanbul ignore next */ []));
+        /** Host width as last measured; `null` until the list first has a box to measure. */
+        this.hostWidth = signal(null, ...(ngDevMode ? [{ debugName: "hostWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * Auto-detected vertical layout. Derived from the measurement rather than written alongside it, so it
+         * cannot go stale when `verticalBreakpoint` changes, and `null` means "not measured yet" rather than
+         * doubling as "skipped the write".
+         */
+        this.autoVertical = computed(() => {
+            const width = this.hostWidth();
+            return width === null ? null : width <= this.verticalBreakpoint();
+        }, ...(ngDevMode ? [{ debugName: "autoVertical" }] : /* istanbul ignore next */ []));
+        /** Effective vertical layout, combining the explicit `vertical` input and the auto-detection. @docs-private */
+        this.isVertical = computed(() => this.vertical() ?? this.autoVertical() ?? false, ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
+        /** Whether the column resize separator is currently rendered. @docs-private */
+        this.resizerVisible = computed(() => this.resizable() && !this.isVertical(), ...(ngDevMode ? [{ debugName: "resizerVisible" }] : /* istanbul ignore next */ []));
+        /** Whether `dtWidth` overrides the default column ratio. @docs-private */
+        this.resized = computed(() => this.dtWidth() !== null, ...(ngDevMode ? [{ debugName: "resized" }] : /* istanbul ignore next */ []));
+        /** Rendered term width used as the default minimum for both areas. */
+        this.measuredDtWidth = signal(0, ...(ngDevMode ? [{ debugName: "measuredDtWidth" }] : /* istanbul ignore next */ []));
+        /** Effective minimum width of the `kbq-dt` area. */
+        this.resolvedDtMinWidth = computed(() => this.dtMinWidth() ?? this.measuredDtWidth(), ...(ngDevMode ? [{ debugName: "resolvedDtMinWidth" }] : /* istanbul ignore next */ []));
+        /** Effective minimum width of the `kbq-dd` area. */
+        this.resolvedDdMinWidth = computed(() => this.ddMinWidth() ?? this.measuredDtWidth(), ...(ngDevMode ? [{ debugName: "resolvedDdMinWidth" }] : /* istanbul ignore next */ []));
+        /** Minimum `kbq-dt` width, clamped to a non-negative value. @docs-private */
+        this.normalizedDtMinWidth = computed(() => Math.max(0, this.resolvedDtMinWidth()), ...(ngDevMode ? [{ debugName: "normalizedDtMinWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * Host width the two areas share, without the gap between them; `null` until measured. The geometry is read at
+         * the moments it can change, so change detection never forces a layout.
+         */
+        this.availableWidth = signal(null, ...(ngDevMode ? [{ debugName: "availableWidth" }] : /* istanbul ignore next */ []));
+        /** Rendered width of the resize track, which spans the `kbq-dt` area. */
+        this.trackWidth = signal(0, ...(ngDevMode ? [{ debugName: "trackWidth" }] : /* istanbul ignore next */ []));
+        /** Largest `kbq-dt` width that still leaves the `kbq-dd` area its minimum. @docs-private */
+        this.maxDtWidth = computed(() => Math.max(this.normalizedDtMinWidth(), (this.availableWidth() ?? 0) - Math.max(0, this.resolvedDdMinWidth())), ...(ngDevMode ? [{ debugName: "maxDtWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * Current `kbq-dt` width, as the separator reports it: within `aria-valuemin` and `aria-valuemax`
+         * even before the host is measured and the effect below clamps a bound `dtWidth`.
+         *
+         * @docs-private
+         */
+        this.currentDtWidth = computed(() => {
+            const width = this.dtWidth();
+            return Math.round(width === null ? this.trackWidth() || this.normalizedDtMinWidth() : this.constrainDtWidth(width));
+        }, ...(ngDevMode ? [{ debugName: "currentDtWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * Cursor shown over the separator: it advertises not just that the column is resizable but the
+         * direction still available — grow-only at the minimum width, shrink-only at the maximum, `default` when there is
+         * no room to move the border at all.
+         *
+         * @docs-private
+         */
+        this.resizeCursor = computed(() => {
+            // The bounds are unknown until the host is measured.
+            if (this.availableWidth() === null)
+                return 'col-resize';
+            const min = this.normalizedDtMinWidth();
+            const max = this.maxDtWidth();
+            // No room to move the border in either direction.
+            if (max <= min)
+                return 'default';
+            const width = this.currentDtWidth();
+            // `resizeDirection` is `[1, 0]` in LTR and `[-1, 0]` in RTL, so growing the column moves the pointer east in
+            // LTR and west in RTL; the cursor mirrors accordingly.
+            const ltr = this.resizeDirection()[0] > 0;
+            if (width <= min)
+                return ltr ? 'e-resize' : 'w-resize';
+            if (width >= max)
+                return ltr ? 'w-resize' : 'e-resize';
+            return 'col-resize';
+        }, ...(ngDevMode ? [{ debugName: "resizeCursor" }] : /* istanbul ignore next */ []));
+        this.keyboardResizeStep = 8;
+        this.nativeElement = kbqInjectNativeElement();
+        this.window = inject(KBQ_WINDOW);
+        this.destroyRef = inject(DestroyRef);
+        this.resizeObserver = inject(SharedResizeObserver);
+        this.directionality = inject(Directionality, { optional: true });
+        this.focusMonitor = inject(FocusMonitor);
+        this.a11yLocaleConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('a11y', KBQ_A11Y_LOCALE_CONFIGURATION);
+        this.resizeTrack = viewChild('resizeTrack', ...(ngDevMode ? [{ debugName: "resizeTrack" }] : /* istanbul ignore next */ []));
+        this.resizeHandle = viewChild('resizeHandle', ...(ngDevMode ? [{ debugName: "resizeHandle" }] : /* istanbul ignore next */ []));
+        this.terms = contentChildren(KbqDt, { ...(ngDevMode ? { debugName: "terms" } : /* istanbul ignore next */ {}), read: ElementRef });
+        /** Resolved accessible name of the resize separator. @docs-private */
+        this.resolvedResizerAriaLabel = computed(() => this.resizerAriaLabel() || this.a11yLocaleConfiguration().resizeColumns, ...(ngDevMode ? [{ debugName: "resolvedResizerAriaLabel" }] : /* istanbul ignore next */ []));
+        // `afterNextRender` runs in the browser only, so no explicit platform guard is needed here.
+        afterNextRender(() => {
+            // Decided before the first paint rather than on the first observation, which only arrives after it: a
+            // list too narrow for the horizontal layout would show it for a frame and then jump.
+            this.updateLayout();
+            // Everything the layout decides is derived from this measurement, so nothing here has to re-run when an
+            // input changes.
+            this.resizeObserver
+                .observe(this.nativeElement)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.updateLayout());
+        });
+        // The track can change width while the host keeps its size: when the separator appears, when `dtWidth`
+        // returns to the default ratio, with `dtMinWidth`, which bounds the column at rest, and with `wide`, which
+        // changes the number of columns.
+        afterRenderEffect({
+            read: () => {
+                if (!this.resizeTrack())
+                    return;
+                this.resized();
+                this.normalizedDtMinWidth();
+                this.wide();
+                untracked(() => this.measureResizeBounds());
+            }
+        });
+        // The clamp is the one part that is not derived: `dtWidth` is writable by the consumer too, and its bounds
+        // move with the inputs and the host. Written back, so the CSS variable, the track and `aria-valuenow` agree.
+        effect(() => {
+            const width = this.dtWidth();
+            // Not before the layout is decided, which waits for the list to have a box: it renders horizontally until
+            // then, so a list about to turn vertical would lose the bound width to the bounds of a layout it never shows.
+            if (width === null || this.hostWidth() === null || this.availableWidth() === null || this.isVertical()) {
+                return;
+            }
+            const constrainedWidth = this.constrainDtWidth(width);
+            if (constrainedWidth !== width)
+                untracked(() => this.writeDtWidth(constrainedWidth));
+        });
+    }
+    /** Captures the rendered width of the term column, used as the default minimum when no widths are provided. */
+    measureDtWidth() {
+        const term = this.terms()[0]?.nativeElement;
+        // In the vertical layout a term spans the whole list, which is no measure of the term column.
+        if (term && !this.isVertical())
+            this.measuredDtWidth.set(Math.round(term.getBoundingClientRect().width));
+    }
+    /** Reads the geometry the separator is bounded by. Browser-only: called after a render or on user interaction. */
+    measureResizeBounds() {
+        const hostWidth = this.nativeElement.clientWidth;
+        // A hidden list measures zero, and bounds of zero would clamp `dtWidth` to its minimum.
+        if (!hostWidth)
+            return;
+        const columnGap = parseFloat(this.window.getComputedStyle(this.nativeElement).columnGap) || 0;
+        this.availableWidth.set(hostWidth - columnGap);
+        this.trackWidth.set(this.resizeTrack()?.nativeElement.clientWidth ?? 0);
+    }
+    /** @docs-private */
+    handleDtResize({ width }) {
+        this.setDtWidth(width);
+    }
+    /**
+     * Demotes the separator's focus origin to the pointer when a mouse drag starts, so the keyboard-focus frame
+     * hides for the whole drag and does not linger afterwards. Keyboard focus keeps the frame as usual.
+     *
+     * @docs-private
+     */
+    handleResizeStart() {
+        // The host keeps its size for the length of a drag, so the bounds are read once, not on every move.
+        this.measureResizeBounds();
+        const handle = this.resizeHandle()?.nativeElement;
+        if (handle)
+            this.focusMonitor.focusVia(handle, 'mouse');
+    }
+    /** @docs-private */
+    handleResizeKeydown(event) {
+        const { key } = event;
+        if (key !== 'Home' && key !== 'End' && key !== 'ArrowLeft' && key !== 'ArrowRight')
+            return;
+        event.preventDefault();
+        this.measureResizeBounds();
+        const step = this.resizeDirection()[0] * this.keyboardResizeStep;
+        if (key === 'Home')
+            return this.setDtWidth(this.normalizedDtMinWidth());
+        if (key === 'End')
+            return this.setDtWidth(this.maxDtWidth());
+        this.setDtWidth(this.currentDtWidth() + (key === 'ArrowRight' ? step : -step));
+    }
+    /** @docs-private */
+    handleResizeDblClick(event) {
+        event.preventDefault();
+        this.measureResizeBounds();
+        // First double-click collapses the first column to its minimum width; a second one restores the default ratio.
+        if (this.dtWidth() === this.normalizedDtMinWidth()) {
+            this.writeDtWidth(null);
+        }
+        else {
+            this.setDtWidth(this.normalizedDtMinWidth());
+        }
+    }
+    updateLayout() {
+        const domRect = this.nativeElement.getClientRects()[0];
+        // A hidden list has no box. It keeps its last layout, so it does not jump when shown again at the same size.
+        if (!domRect)
+            return;
+        // Taken before the new width can switch the layout. A list created hidden or vertical had no term column to
+        // measure yet; the layout switch that gives it one changes the host height, which the observer reports.
+        if (!this.measuredDtWidth())
+            this.measureDtWidth();
+        this.hostWidth.set(domRect.width);
+        this.measureResizeBounds();
+    }
+    setDtWidth(width) {
+        if (!Number.isFinite(width))
+            return;
+        const constrainedWidth = this.constrainDtWidth(width);
+        if (constrainedWidth !== this.dtWidth())
+            this.writeDtWidth(constrainedWidth);
+    }
+    constrainDtWidth(width) {
+        return Math.min(this.maxDtWidth(), Math.max(this.normalizedDtMinWidth(), width));
+    }
+    /**
+     * The only way the component writes `dtWidth`. `linkedSignal` does not emit on its own the way
+     * `model()` did, so the write and the notification are kept together rather than at each call site.
+     */
+    writeDtWidth(width) {
+        this.dtWidth.set(width);
+        this.dtWidthChange.emit(width);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqDl, isStandalone: true, selector: "kbq-dl", inputs: { verticalBreakpoint: { classPropertyName: "verticalBreakpoint", publicName: "verticalBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, wide: { classPropertyName: "wide", publicName: "wide", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, dtWidthInput: { classPropertyName: "dtWidthInput", publicName: "dtWidth", isSignal: true, isRequired: false, transformFunction: null }, dtMinWidth: { classPropertyName: "dtMinWidth", publicName: "dtMinWidth", isSignal: true, isRequired: false, transformFunction: null }, ddMinWidth: { classPropertyName: "ddMinWidth", publicName: "ddMinWidth", isSignal: true, isRequired: false, transformFunction: null }, resizerAriaLabel: { classPropertyName: "resizerAriaLabel", publicName: "resizerAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dtWidthChange: "dtWidthChange" }, host: { properties: { "class.kbq-dl_vertical": "isVertical()", "class.kbq-dl_wide": "wide()", "class.kbq-dl_resizable": "resizerVisible()", "class.kbq-dl_resized": "resized()", "class.kbq-dl_vertical-align-center": "verticalAlign() === 'center'", "class.kbq-dl_vertical-align-end": "verticalAlign() === 'end'", "class.kbq-dl_horizontal-align-center": "horizontalAlign() === 'center'", "class.kbq-dl_horizontal-align-end": "horizontalAlign() === 'end'", "style.--kbq-description-list-dt-width.px": "dtWidth()", "style.--kbq-description-list-dt-min-width.px": "normalizedDtMinWidth()" }, classAttribute: "kbq-dl" }, queries: [{ propertyName: "terms", predicate: KbqDt, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "resizeTrack", first: true, predicate: ["resizeTrack"], descendants: true, isSignal: true }, { propertyName: "resizeHandle", first: true, predicate: ["resizeHandle"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: `
+        <ng-content />
+
+        @if (resizerVisible()) {
+            <div
+                #resizeTrack
+                class="kbq-dl__resize-track"
+                kbqResizable
+                [style.max-width.px]="resized() ? maxDtWidth() : null"
+                [style.min-width.px]="resized() ? normalizedDtMinWidth() : null"
+                [style.width.px]="dtWidth()"
+            >
+                <div
+                    #resizeHandle
+                    class="kbq-dl__resize-handle"
+                    role="separator"
+                    aria-orientation="vertical"
+                    tabindex="0"
+                    cdkMonitorElementFocus
+                    [cursor]="resizeCursor()"
+                    [attr.aria-label]="resolvedResizerAriaLabel()"
+                    [attr.aria-valuemax]="maxDtWidth()"
+                    [attr.aria-valuemin]="normalizedDtMinWidth()"
+                    [attr.aria-valuenow]="currentDtWidth()"
+                    [kbqResizer]="resizeDirection()"
+                    (dblclick)="handleResizeDblClick($event)"
+                    (keydown)="handleResizeKeydown($event)"
+                    (resizeStart)="handleResizeStart()"
+                    (sizeChange)="handleDtResize($event)"
+                ></div>
+            </div>
+        }
+    `, isInline: true, styles: [".kbq-dl{display:grid;position:relative;column-gap:var(--kbq-description-list-size-horizontal-content-gap-horizontal);row-gap:var(--kbq-description-list-size-horizontal-gap-vertical);grid-template-columns:repeat(4,1fr)}.kbq-dl.kbq-dl_vertical-align-center{align-items:center}.kbq-dl.kbq-dl_vertical-align-end{align-items:end}.kbq-dl.kbq-dl_horizontal-align-center{justify-items:center}.kbq-dl.kbq-dl_horizontal-align-end{justify-items:end}.kbq-dl>.kbq-dt,.kbq-dl>.kbq-dd{min-width:0;overflow-wrap:break-word}.kbq-dl>.kbq-dt{grid-column:1}.kbq-dl>.kbq-dd{grid-column:2/span 3}.kbq-dl.kbq-dl_resizable:not(.kbq-dl_resized):not(.kbq-dl_vertical){grid-template-columns:minmax(var(--kbq-description-list-dt-min-width),1fr) repeat(3,minmax(0,1fr))}.kbq-dl.kbq-dl_resized:not(.kbq-dl_vertical){grid-template-columns:var(--kbq-description-list-dt-width) repeat(3,minmax(0,1fr))}.kbq-dl .kbq-dl__resize-track{position:absolute;inset-block:0;inset-inline-start:0;grid-column:1/2;width:100%;pointer-events:none;z-index:1}.kbq-dl .kbq-dl__resize-handle{position:absolute;inset-block:0;inset-inline-end:calc((var(--kbq-description-list-size-horizontal-content-gap-horizontal) + var(--kbq-description-list-resizer-hit-area-width)) / -2);width:var(--kbq-description-list-resizer-hit-area-width);pointer-events:auto;touch-action:none;outline:none}.kbq-dl .kbq-dl__resize-handle:after{position:absolute;inset-block:var(--kbq-description-list-resizer-focus-outline-width);inset-inline:0;width:var(--kbq-description-list-resizer-line-width);margin-inline:auto;background-color:var(--kbq-description-list-resizer-color);content:\"\";opacity:0}.kbq-dl .kbq-dl__resize-handle:is(:hover,.kbq-hover):after{background-color:var(--kbq-description-list-resizer-state-hover-color)}.kbq-dl .kbq-dl__resize-handle.cdk-keyboard-focused:after,.kbq-dl .kbq-dl__resize-handle:is(:active,.kbq-active):after{opacity:1}.kbq-dl .kbq-dl__resize-handle:is(:active,.kbq-active):after{width:var(--kbq-description-list-resizer-active-line-width);background-color:var(--kbq-description-list-resizer-state-active-color)}.kbq-dl .kbq-dl__resize-handle.cdk-keyboard-focused{outline:var(--kbq-description-list-resizer-focus-outline-width) solid var(--kbq-description-list-resizer-focus-outline-color);outline-offset:calc(-1 * var(--kbq-description-list-resizer-focus-outline-width))}@media(hover:hover)and (pointer:fine){.kbq-dl:is(:hover,.kbq-hover)>.kbq-dl__resize-track>.kbq-dl__resize-handle:after{opacity:1}}.kbq-dl.kbq-dl_wide{grid-template-columns:repeat(2,1fr)}.kbq-dl.kbq-dl_wide.kbq-dl_resizable:not(.kbq-dl_resized):not(.kbq-dl_vertical){grid-template-columns:minmax(var(--kbq-description-list-dt-min-width),1fr) minmax(0,1fr)}.kbq-dl.kbq-dl_wide.kbq-dl_resized:not(.kbq-dl_vertical){grid-template-columns:var(--kbq-description-list-dt-width) minmax(0,1fr)}.kbq-dl.kbq-dl_wide>.kbq-dt{grid-column:1}.kbq-dl.kbq-dl_wide>.kbq-dd{grid-column:2}.kbq-dl.kbq-dl_vertical{grid-template-columns:repeat(1,1fr);row-gap:var(--kbq-description-list-size-vertical-content-gap-vertical)}.kbq-dl.kbq-dl_vertical>.kbq-dt,.kbq-dl.kbq-dl_vertical>.kbq-dd{grid-column:1}.kbq-dl.kbq-dl_vertical>.kbq-dd:not(:last-child){margin-bottom:var(--kbq-description-list-size-vertical-gap-vertical)}.kbq-dt{color:var(--kbq-description-list-term-color)}.kbq-dd{color:var(--kbq-description-list-description-color)}.kbq-dl .kbq-dt,.kbq-dl .kbq-dd{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-dl{--kbq-description-list-size-horizontal-content-gap-horizontal: var(--kbq-size-l);--kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);--kbq-description-list-size-vertical-content-gap-vertical: var(--kbq-size-3xs);--kbq-description-list-size-vertical-gap-vertical: var(--kbq-size-m);--kbq-description-list-resizer-line-width: 1px;--kbq-description-list-resizer-active-line-width: 3px;--kbq-description-list-resizer-focus-outline-width: 2px;--kbq-description-list-resizer-hit-area-width: calc( 2 * var(--kbq-size-s) + var(--kbq-description-list-resizer-line-width) );--kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);--kbq-description-list-description-color: var(--kbq-foreground-contrast);--kbq-description-list-resizer-color: var(--kbq-line-contrast-less);--kbq-description-list-resizer-state-hover-color: var(--kbq-line-contrast-fade);--kbq-description-list-resizer-state-active-color: var(--kbq-states-line-focus-theme);--kbq-description-list-resizer-focus-outline-color: var(--kbq-states-line-focus-theme)}\n"], dependencies: [{ kind: "directive", type: KbqResizable, selector: "[kbqResizable]", exportAs: ["kbqResizable"] }, { kind: "directive", type: KbqResizer, selector: "[kbqResizer]", inputs: ["kbqResizer", "cursor", "disableSizeUpdate"], outputs: ["resizeStart", "sizeChange"], exportAs: ["kbqResizer"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDl, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-dl', imports: [KbqResizable, KbqResizer, CdkMonitorFocus], template: `
+        <ng-content />
+
+        @if (resizerVisible()) {
+            <div
+                #resizeTrack
+                class="kbq-dl__resize-track"
+                kbqResizable
+                [style.max-width.px]="resized() ? maxDtWidth() : null"
+                [style.min-width.px]="resized() ? normalizedDtMinWidth() : null"
+                [style.width.px]="dtWidth()"
+            >
+                <div
+                    #resizeHandle
+                    class="kbq-dl__resize-handle"
+                    role="separator"
+                    aria-orientation="vertical"
+                    tabindex="0"
+                    cdkMonitorElementFocus
+                    [cursor]="resizeCursor()"
+                    [attr.aria-label]="resolvedResizerAriaLabel()"
+                    [attr.aria-valuemax]="maxDtWidth()"
+                    [attr.aria-valuemin]="normalizedDtMinWidth()"
+                    [attr.aria-valuenow]="currentDtWidth()"
+                    [kbqResizer]="resizeDirection()"
+                    (dblclick)="handleResizeDblClick($event)"
+                    (keydown)="handleResizeKeydown($event)"
+                    (resizeStart)="handleResizeStart()"
+                    (sizeChange)="handleDtResize($event)"
+                ></div>
+            </div>
+        }
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kbq-dl',
+                        '[class.kbq-dl_vertical]': 'isVertical()',
+                        '[class.kbq-dl_wide]': 'wide()',
+                        '[class.kbq-dl_resizable]': 'resizerVisible()',
+                        '[class.kbq-dl_resized]': 'resized()',
+                        '[class.kbq-dl_vertical-align-center]': "verticalAlign() === 'center'",
+                        '[class.kbq-dl_vertical-align-end]': "verticalAlign() === 'end'",
+                        '[class.kbq-dl_horizontal-align-center]': "horizontalAlign() === 'center'",
+                        '[class.kbq-dl_horizontal-align-end]': "horizontalAlign() === 'end'",
+                        '[style.--kbq-description-list-dt-width.px]': 'dtWidth()',
+                        '[style.--kbq-description-list-dt-min-width.px]': 'normalizedDtMinWidth()'
+                    }, hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ], styles: [".kbq-dl{display:grid;position:relative;column-gap:var(--kbq-description-list-size-horizontal-content-gap-horizontal);row-gap:var(--kbq-description-list-size-horizontal-gap-vertical);grid-template-columns:repeat(4,1fr)}.kbq-dl.kbq-dl_vertical-align-center{align-items:center}.kbq-dl.kbq-dl_vertical-align-end{align-items:end}.kbq-dl.kbq-dl_horizontal-align-center{justify-items:center}.kbq-dl.kbq-dl_horizontal-align-end{justify-items:end}.kbq-dl>.kbq-dt,.kbq-dl>.kbq-dd{min-width:0;overflow-wrap:break-word}.kbq-dl>.kbq-dt{grid-column:1}.kbq-dl>.kbq-dd{grid-column:2/span 3}.kbq-dl.kbq-dl_resizable:not(.kbq-dl_resized):not(.kbq-dl_vertical){grid-template-columns:minmax(var(--kbq-description-list-dt-min-width),1fr) repeat(3,minmax(0,1fr))}.kbq-dl.kbq-dl_resized:not(.kbq-dl_vertical){grid-template-columns:var(--kbq-description-list-dt-width) repeat(3,minmax(0,1fr))}.kbq-dl .kbq-dl__resize-track{position:absolute;inset-block:0;inset-inline-start:0;grid-column:1/2;width:100%;pointer-events:none;z-index:1}.kbq-dl .kbq-dl__resize-handle{position:absolute;inset-block:0;inset-inline-end:calc((var(--kbq-description-list-size-horizontal-content-gap-horizontal) + var(--kbq-description-list-resizer-hit-area-width)) / -2);width:var(--kbq-description-list-resizer-hit-area-width);pointer-events:auto;touch-action:none;outline:none}.kbq-dl .kbq-dl__resize-handle:after{position:absolute;inset-block:var(--kbq-description-list-resizer-focus-outline-width);inset-inline:0;width:var(--kbq-description-list-resizer-line-width);margin-inline:auto;background-color:var(--kbq-description-list-resizer-color);content:\"\";opacity:0}.kbq-dl .kbq-dl__resize-handle:is(:hover,.kbq-hover):after{background-color:var(--kbq-description-list-resizer-state-hover-color)}.kbq-dl .kbq-dl__resize-handle.cdk-keyboard-focused:after,.kbq-dl .kbq-dl__resize-handle:is(:active,.kbq-active):after{opacity:1}.kbq-dl .kbq-dl__resize-handle:is(:active,.kbq-active):after{width:var(--kbq-description-list-resizer-active-line-width);background-color:var(--kbq-description-list-resizer-state-active-color)}.kbq-dl .kbq-dl__resize-handle.cdk-keyboard-focused{outline:var(--kbq-description-list-resizer-focus-outline-width) solid var(--kbq-description-list-resizer-focus-outline-color);outline-offset:calc(-1 * var(--kbq-description-list-resizer-focus-outline-width))}@media(hover:hover)and (pointer:fine){.kbq-dl:is(:hover,.kbq-hover)>.kbq-dl__resize-track>.kbq-dl__resize-handle:after{opacity:1}}.kbq-dl.kbq-dl_wide{grid-template-columns:repeat(2,1fr)}.kbq-dl.kbq-dl_wide.kbq-dl_resizable:not(.kbq-dl_resized):not(.kbq-dl_vertical){grid-template-columns:minmax(var(--kbq-description-list-dt-min-width),1fr) minmax(0,1fr)}.kbq-dl.kbq-dl_wide.kbq-dl_resized:not(.kbq-dl_vertical){grid-template-columns:var(--kbq-description-list-dt-width) minmax(0,1fr)}.kbq-dl.kbq-dl_wide>.kbq-dt{grid-column:1}.kbq-dl.kbq-dl_wide>.kbq-dd{grid-column:2}.kbq-dl.kbq-dl_vertical{grid-template-columns:repeat(1,1fr);row-gap:var(--kbq-description-list-size-vertical-content-gap-vertical)}.kbq-dl.kbq-dl_vertical>.kbq-dt,.kbq-dl.kbq-dl_vertical>.kbq-dd{grid-column:1}.kbq-dl.kbq-dl_vertical>.kbq-dd:not(:last-child){margin-bottom:var(--kbq-description-list-size-vertical-gap-vertical)}.kbq-dt{color:var(--kbq-description-list-term-color)}.kbq-dd{color:var(--kbq-description-list-description-color)}.kbq-dl .kbq-dt,.kbq-dl .kbq-dd{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-dl{--kbq-description-list-size-horizontal-content-gap-horizontal: var(--kbq-size-l);--kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);--kbq-description-list-size-vertical-content-gap-vertical: var(--kbq-size-3xs);--kbq-description-list-size-vertical-gap-vertical: var(--kbq-size-m);--kbq-description-list-resizer-line-width: 1px;--kbq-description-list-resizer-active-line-width: 3px;--kbq-description-list-resizer-focus-outline-width: 2px;--kbq-description-list-resizer-hit-area-width: calc( 2 * var(--kbq-size-s) + var(--kbq-description-list-resizer-line-width) );--kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);--kbq-description-list-description-color: var(--kbq-foreground-contrast);--kbq-description-list-resizer-color: var(--kbq-line-contrast-less);--kbq-description-list-resizer-state-hover-color: var(--kbq-line-contrast-fade);--kbq-description-list-resizer-state-active-color: var(--kbq-states-line-focus-theme);--kbq-description-list-resizer-focus-outline-color: var(--kbq-states-line-focus-theme)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { verticalBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBreakpoint", required: false }] }], wide: [{ type: i0.Input, args: [{ isSignal: true, alias: "wide", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], dtWidthInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dtWidth", required: false }] }], dtWidthChange: [{ type: i0.Output, args: ["dtWidthChange"] }], dtMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dtMinWidth", required: false }] }], ddMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "ddMinWidth", required: false }] }], resizerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizerAriaLabel", required: false }] }], verticalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalAlign", required: false }] }], horizontalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlign", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], resizeTrack: [{ type: i0.ViewChild, args: ['resizeTrack', { isSignal: true }] }], resizeHandle: [{ type: i0.ViewChild, args: ['resizeHandle', { isSignal: true }] }], terms: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqDt), { ...{ read: ElementRef }, isSignal: true }] }] } });
+/**
+ * @deprecated Use `KbqDl` instead. Will be removed in 22.0.0.
+ *
+ * @docs-private
+ */
+const KbqDlComponent = KbqDl;
+/**
+ * @deprecated Use `KbqDt` instead. Will be removed in 22.0.0.
+ *
+ * @docs-private
+ */
+const KbqDtComponent = KbqDt;
+/**
+ * @deprecated Use `KbqDd` instead. Will be removed in 22.0.0.
+ *
+ * @docs-private
+ */
+const KbqDdComponent = KbqDd;
 
+const COMPONENTS = [
+    KbqDl,
+    KbqDt,
+    KbqDd
+];
+/** @docs-private */
 class KbqDlModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqDlModule, imports: [A11yModule,
-            PlatformModule,
-            KbqDlComponent,
-            KbqDtComponent,
-            KbqDdComponent], exports: [KbqDlComponent,
-            KbqDtComponent,
-            KbqDdComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDlModule, imports: [A11yModule,
-            PlatformModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqDlModule, imports: [KbqDl,
+            KbqDt,
+            KbqDd], exports: [KbqDl,
+            KbqDt,
+            KbqDd] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDlModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDlModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDlModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        A11yModule,
-                        PlatformModule,
-                        KbqDlComponent,
-                        KbqDtComponent,
-                        KbqDdComponent
-                    ],
-                    exports: [
-                        KbqDlComponent,
-                        KbqDtComponent,
-                        KbqDdComponent
-                    ]
+                    imports: COMPONENTS,
+                    exports: COMPONENTS
                 }]
         }] });
 
@@ -123,5 +481,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KbqDdComponent, KbqDlComponent, KbqDlModule, KbqDtComponent };
+export { KBQ_DL_OPTIONS, KbqDd, KbqDdComponent, KbqDl, KbqDlComponent, KbqDlModule, KbqDt, KbqDtComponent, kbqDlOptionsProvider };
 //# sourceMappingURL=koobiq-components-dl.mjs.map