@koobiq/components 20.3.1 → 20.3.2

package/ellipsis-center/index.d.ts

@@ -3,20 +3,53 @@ import { OnInit, AfterViewInit, OnDestroy } from '@angular/core';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
 
+/**
+ * Renders text as two spans and moves the ellipsis into the middle, so the tail — a file extension, the
+ * digits that tell two reports apart — stays readable when the host is too narrow for the whole string. A
+ * tooltip spells out the full text, and is enabled only while something is actually hidden.
+ *
+ * The host needs the layout contract the consuming component ships (see `.kbq-ellipsis-center` in
+ * `file-upload.scss`): the two spans have no styles of their own.
+ */
 declare class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnInit, AfterViewInit, OnDestroy {
     private cdr;
+    /**
+     * Application-wide `ResizeObserver` shared by every consumer, as `KbqTitleDirective` uses. Unlike the
+     * `window:resize` listener this directive used to carry, it also reacts to container-only resizes — a
+     * splitter drag, a sidebar collapse, or the vertical scrollbar that appears once a file list fills up —
+     * none of which resize the window, all of which change where the text has to be split.
+     */
+    private readonly resizeObserver;
     set kbqEllipsisCenter(value: string);
+    /**
+     * Shortest text worth splitting in the middle. Anything below it keeps its natural order and is cut off
+     * at the end by the host's own `text-overflow`.
+     *
+     * Defaults to `0` — every overflowing text is split — because that is what the directive has always
+     * done: the input was declared but never read, so any other default would silently end-truncate labels
+     * that consumers expect to see split.
+     */
     readonly minVisibleLength: i0.InputSignal<number>;
+    /**
+     * Lower bound, in pixels, for the average glyph width used to decide how many characters fit in the
+     * tail. The rendered text is measured as well and the wider of the two wins, so an underestimate here
+     * can no longer push the extension out of the tail — raising it only shortens the tail further.
+     */
     readonly charWidth: i0.InputSignal<number>;
     /**
      * Debounce time (ms) for resize events before recalculating ellipsis position.
      * @default 50
      */
     readonly debounceInterval: i0.InputSignalWithTransform<number, unknown>;
-    /** @docs-private */
+    /**
+     * @deprecated No longer read. Resizes now come from the shared `ResizeObserver`, which also catches the
+     * container-only ones a `window:resize` listener cannot see; the host listener that used to feed this
+     * subject is gone, and nothing subscribes to it. Kept as a no-op and removed in the next major version.
+     * @docs-private */
     readonly resizeStream: Subject<Event>;
     private _kbqEllipsisCenter;
-    private resizeSubscription;
+    private lastMeasuredWidth;
+    private refreshTimeoutId;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/fesm2022/koobiq-components-accordion.mjs

@@ -3,12 +3,13 @@ import { Directionality } from '@angular/cdk/bidi';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
 import { ENTER, SPACE } from '@angular/cdk/keycodes';
 import * as i0 from '@angular/core';
-import { inject, Renderer2, signal, afterNextRender, RendererStyleFlags2, Directive, viewChild, ViewEncapsulation, Component, ChangeDetectorRef, contentChild, forwardRef, input, computed, output, booleanAttribute, Input, Injectable, InjectionToken, ElementRef, Injector, contentChildren, numberAttribute, effect, untracked, isDevMode, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { inject, Renderer2, Injector, signal, afterNextRender, RendererStyleFlags2, Directive, viewChild, ViewEncapsulation, Component, ChangeDetectorRef, contentChild, forwardRef, input, computed, output, booleanAttribute, Input, Injectable, InjectionToken, ElementRef, contentChildren, numberAttribute, effect, untracked, isDevMode, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { Subscription, Subject } from 'rxjs';
+import { Platform } from '@angular/cdk/platform';
 import { kbqInjectNativeElement, KBQ_WINDOW } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
-import { Platform } from '@angular/cdk/platform';
 
+const CONTENT_HEIGHT = '--kbq-accordion-content-height';
 class KbqAccordionContentDirective {
     /** @docs-private */
     get contentId() {
@@ -20,34 +21,57 @@ class KbqAccordionContentDirective {
     }
     constructor() {
         this.renderer = inject(Renderer2);
+        this.platform = inject(Platform);
+        this.injector = inject(Injector);
         /** @docs-private */
         this.nativeElement = kbqInjectNativeElement();
         /** @docs-private */
         this.item = inject(KbqAccordionItem);
         /** @docs-private */
         this.hidden = signal(true, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
-        /** Whether the first browser render has happened, i.e. whether the content can be measured. */
+        /** Whether the first browser render has happened; until then a toggle only sets the initial state. */
         this.rendered = false;
         // `afterNextRender` never runs on the server, so no platform check is needed here.
-        this.afterRenderRef = afterNextRender(() => {
+        afterNextRender(() => {
             this.rendered = true;
-            this.updateHeight();
             this.enableAnimation();
-            this.afterRenderRef?.destroy();
         });
     }
+    ngOnInit() {
+        // Content the item's `toggle()` cannot have reached yet: created after the item initialized (inside
+        // `@if` or `@defer`), or outside the item's own template.
+        this.toggle();
+    }
+    ngDoCheck() {
+        // The item cannot reach content declared in a child component's template to toggle it.
+        if (this.hidden() === this.item.expanded) {
+            this.toggle();
+        }
+    }
     ngAfterViewInit() {
+        // Skipped on the server: the write would reach the prerendered `style` attribute, and hydration
+        // reuses that node, so the client would read `none` back as the transition worth restoring and
+        // `enableAnimation()` would make it permanent. There is nothing to suppress without a paint.
+        if (!this.platform.isBrowser)
+            return;
         this.disableAnimation();
     }
     toggle() {
-        // Re-measure while the content is still collapsed. Its natural height depends on the width
-        // it is finally laid out at, and that width is not known at first render when the accordion
-        // lives in a container sized afterwards (sidepanel, overlay, responsive layout).
-        if (this.rendered && this.item.expanded && this.hidden()) {
-            this.updateHeight();
+        if (this.rendered) {
+            this.pinHeight();
         }
         this.hidden.set(!this.item.expanded);
     }
+    /** @docs-private */
+    onTransitionEnd(event) {
+        // Transitions of the projected content and of pseudo-elements bubble up here as well.
+        if (event.target !== this.nativeElement || event.propertyName !== 'height' || event.pseudoElement)
+            return;
+        // The transition that ended or was cancelled may already be replaced by one that still needs the pin.
+        if (!this.isHeightTransitionRunning()) {
+            this.releaseHeight();
+        }
+    }
     disableAnimation() {
         this.savedTransition = this.nativeElement.style.transition;
         this.nativeElement.style.transition = 'none';
@@ -56,18 +80,62 @@ class KbqAccordionContentDirective {
         this.nativeElement.style.transition = this.savedTransition;
     }
     /**
-     * Publishes the natural height of the projected content as `--kbq-accordion-content-height`,
-     * which the open state animates towards.
+     * Pins the height the transition runs between: the natural height of the content when expanding,
+     * the current one when collapsing. The pin is released once the transition ends, so expanded
+     * content keeps `height: auto` and follows its own size — its container can be laid out later
+     * (a content panel, an overlay) or resized, and nested items can toggle.
      *
-     * `scrollHeight` is used rather than `getBoundingClientRect()`: the host is `overflow: hidden`
-     * and collapsed to `height: 0` while closed, so its box reports `0`, whereas `scrollHeight`
-     * still reports the height of the content it clips.
+     * `scrollHeight` reports the natural height even while the `overflow: hidden` host is collapsed.
      */
-    updateHeight() {
-        this.renderer.setStyle(this.nativeElement, '--kbq-accordion-content-height', `${this.nativeElement.scrollHeight}px`, RendererStyleFlags2.DashCase);
+    pinHeight() {
+        const element = this.nativeElement;
+        // No transition would release the pin.
+        if (element.style.transition === 'none') {
+            this.releaseHeight();
+            return;
+        }
+        const expanded = this.item.expanded;
+        const current = element.offsetHeight;
+        const target = expanded ? element.scrollHeight : 0;
+        // Nothing to animate: no box yet (e.g. in a closed content panel), or already there.
+        if (current === target) {
+            this.releaseHeight();
+            return;
+        }
+        this.setHeight(expanded ? target : current);
+        // A collapse starts from `auto`, which does not transition: commit the pinned height before
+        // `data-state` flips.
+        if (!expanded) {
+            element.getBoundingClientRect();
+        }
+        afterNextRender(() => this.settleHeight(), { injector: this.injector });
+    }
+    /** Checks the pin once `data-state` has flipped. */
+    settleHeight() {
+        const running = this.isHeightTransitionRunning();
+        if (running === false) {
+            // Transitions are off (a stylesheet, reduced motion), so no `transitionend` will release the pin.
+            this.releaseHeight();
+        }
+        else if (this.item.expanded) {
+            // Content rendered by the flip itself (`@if`, `@defer`) was not there to measure: retarget.
+            this.setHeight(this.nativeElement.scrollHeight);
+        }
+    }
+    /** Whether a height transition runs on the host; `undefined` without the Web Animations API. */
+    isHeightTransitionRunning() {
+        return this.nativeElement
+            .getAnimations?.()
+            .some((animation) => animation.transitionProperty === 'height');
+    }
+    setHeight(height) {
+        this.renderer.setStyle(this.nativeElement, CONTENT_HEIGHT, `${height}px`, RendererStyleFlags2.DashCase);
+    }
+    releaseHeight() {
+        this.renderer.removeStyle(this.nativeElement, CONTENT_HEIGHT, RendererStyleFlags2.DashCase);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqAccordionContentDirective, isStandalone: true, selector: "[kbqAccordionContent]", host: { listeners: { "transitionend": "toggle()" }, properties: { "attr.id": "contentId", "attr.role": "\"region\"", "attr.hidden": "hidden() ? \"\" : null", "attr.inert": "hidden() ? \"\" : null", "attr.aria-labelledby": "triggerId", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, exportAs: ["kbqAccordionContent"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqAccordionContentDirective, isStandalone: true, selector: "[kbqAccordionContent]", host: { listeners: { "transitionend": "onTransitionEnd($event)", "transitioncancel": "onTransitionEnd($event)" }, properties: { "attr.id": "contentId", "attr.role": "\"region\"", "attr.hidden": "hidden() ? \"\" : null", "attr.inert": "hidden() ? \"\" : null", "attr.aria-labelledby": "triggerId", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, exportAs: ["kbqAccordionContent"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionContentDirective, decorators: [{
             type: Directive,
@@ -86,7 +154,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[attr.data-state]': 'item.dataState',
                         '[attr.data-disabled]': 'item.disabled',
                         '[attr.data-orientation]': 'item.orientation',
-                        '(transitionend)': 'toggle()'
+                        '(transitionend)': 'onTransitionEnd($event)',
+                        '(transitioncancel)': 'onTransitionEnd($event)'
                     },
                     exportAs: 'kbqAccordionContent'
                 }]
@@ -178,6 +247,7 @@ class KbqAccordionTrigger {
         return this.accordion.variant() === 'hugSpaceBetween';
     }
     constructor() {
+        this.platform = inject(Platform);
         /** @docs-private */
         this.nativeElement = kbqInjectNativeElement();
         /** @docs-private */
@@ -190,6 +260,11 @@ class KbqAccordionTrigger {
         });
     }
     ngAfterViewInit() {
+        // Skipped on the server: the write would reach the prerendered `style` attribute, and hydration
+        // reuses that node, so the client would read `none` back as the transition worth restoring and
+        // `enableAnimation()` would make it permanent. There is nothing to suppress without a paint.
+        if (!this.platform.isBrowser)
+            return;
         this.disableAnimation();
     }
     ngOnDestroy() {
@@ -243,7 +318,10 @@ class KbqAccordionItem {
     get orientation() {
         return this.accordion.orientation();
     }
-    /** Whether the AccordionItem is expanded. */
+    /**
+     * Whether the AccordionItem is expanded. When the accordion initializes, its controlled `value`, the saved
+     * state and `defaultValue` take precedence over it.
+     */
     // Kept as an `@Input` accessor (not `model()`): the setter runs a synchronous side-effect
     // cascade (emits opened/closed/expandedChange, notifies the selection dispatcher, toggles the
     // content and persists state) that sibling items rely on within the same change-detection tick.
@@ -254,25 +332,10 @@ class KbqAccordionItem {
         // Only emit events and update the internal value if the value changes.
         if (this._expanded !== expanded) {
             this._expanded = expanded;
-            this.expandedChange.emit(expanded);
-            if (expanded) {
-                // TODO: The 'emit' function requires a mandatory void argument
-                this.opened.emit();
-                /**
-                 * In the unique selection dispatcher, the id parameter is the id of the KbqAccordionItem,
-                 * the name value is the id of the accordion.
-                 */
-                this.expansionDispatcher.notify(this.value(), this.accordion.id);
-            }
-            else {
-                // TODO: The 'emit' function requires a mandatory void argument
-                this.closed.emit();
-            }
-            this.content()?.toggle();
-            this.accordion.saveItemState(this);
-            // Ensures that the animation will run when the value is set outside of an `@Input`.
-            // This includes cases like the open, close and toggle methods.
-            this.changeDetectorRef.markForCheck();
+            // Before `ngOnInit` the accordion's inputs may still be unbound, this item may not be in its `items()`
+            // and nothing listens to the outputs yet — the static attribute is applied while the view is created.
+            if (this.initialized)
+                this.reportExpanded();
         }
     }
     /** Whether the AccordionItem is disabled. */
@@ -304,6 +367,7 @@ class KbqAccordionItem {
         this.content = contentChild(forwardRef(() => KbqAccordionContentDirective), ...(ngDevMode ? [{ debugName: "content" }] : []));
         this._id = `kbq-accordion-item-${uniqueIdCounter$1++}`;
         this._expanded = false;
+        this.initialized = false;
         /**
          * The item's own `value` input. Must stay `public`: a `protected` input cannot be bound from a
          * consumer template (TS2445 under full AOT template type-checking).
@@ -351,6 +415,11 @@ class KbqAccordionItem {
         // When an accordion item is hosted in an accordion, subscribe to open/close events.
         this.openCloseAllSubscription = this.subscribeToOpenCloseAllActions();
     }
+    ngOnInit() {
+        this.initialized = true;
+        if (this._expanded)
+            this.reportExpanded();
+    }
     ngOnDestroy() {
         this.removeUniqueSelectionListener();
         this.openCloseAllSubscription.unsubscribe();
@@ -394,6 +463,29 @@ class KbqAccordionItem {
         this.content()?.enableAnimation();
         this.triggerComponent()?.enableAnimation();
     }
+    /** Emits the expanded state and propagates it to the siblings, the content and the saved state. */
+    reportExpanded() {
+        // First: a handler below may run change detection, and the content pins its height before `data-state` flips.
+        this.content()?.toggle();
+        this.expandedChange.emit(this._expanded);
+        if (this._expanded) {
+            // TODO: The 'emit' function requires a mandatory void argument
+            this.opened.emit();
+            /**
+             * In the unique selection dispatcher, the id parameter is the id of the KbqAccordionItem,
+             * the name value is the id of the accordion.
+             */
+            this.expansionDispatcher.notify(this.value(), this.accordion.id);
+        }
+        else {
+            // TODO: The 'emit' function requires a mandatory void argument
+            this.closed.emit();
+        }
+        this.accordion.saveItemState(this);
+        // Ensures that the animation will run when the value is set outside of an `@Input`.
+        // This includes cases like the open, close and toggle methods.
+        this.changeDetectorRef.markForCheck();
+    }
     subscribeToOpenCloseAllActions() {
         return this.accordion.openCloseAllActions.subscribe((expanded) => {
             // Only change expanded state if item is enabled
@@ -577,6 +669,11 @@ class KbqAccordion {
         }, ...(ngDevMode ? [{ debugName: "defaultValueArray" }] : []));
         this._id = `kbq-accordion-${uniqueIdCounter++}`;
         this.state = null;
+        /**
+         * Whether the saved state has been read. An item reports a static `[expanded]` from its own `ngOnInit`,
+         * which runs before `ngAfterContentInit`, and writing then would replace the saved state before it is read.
+         */
+        this.stateRestored = false;
         // Re-emit `valueChange` whenever any (current or future) item toggles its expanded state.
         // Reading `items()` inside the effect keeps the subscriptions in sync with dynamically
         // added/removed items.
@@ -604,6 +701,7 @@ class KbqAccordion {
             }
             this.state = this.stateStore.getState(this.stateStorageKey);
         }
+        this.stateRestored = true;
         if (this.valueInput() !== undefined) {
             this.selectionDispatcher.notify(this.value(), this.id);
         }
@@ -615,7 +713,8 @@ class KbqAccordion {
                 this.selectionDispatcher.notify((this.isMultiple ? expandedValues : expandedValues[0]), this.id);
             }
         }
-        else {
+        else if (this.defaultValueArray().length) {
+            // Without a `defaultValue` the items keep their own `[expanded]`: an empty payload would close them all.
             this.selectionDispatcher.notify(this.defaultValueArray(), this.id);
         }
         // Seed initial state for any items missing from the store (without overwriting existing entries).
@@ -681,7 +780,7 @@ class KbqAccordion {
      * @docs-private
      */
     saveItemState(item, force = true) {
-        if (!this.useStateSaving())
+        if (!this.useStateSaving() || !this.stateRestored)
             return;
         if (!force && this.state?.[item.id])
             return;
@@ -703,7 +802,7 @@ class KbqAccordion {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqAccordion, isStandalone: true, selector: "kbq-accordion, [kbq-accordion]", inputs: { useStateSaving: { classPropertyName: "useStateSaving", publicName: "useStateSaving", isSignal: true, isRequired: false, transformFunction: null }, stateSavingKey: { classPropertyName: "stateSavingKey", publicName: "stateSavingKey", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-orientation": "orientation()" }, classAttribute: "kbq-accordion" }, providers: [
             { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
-        ], queries: [{ propertyName: "allItems", predicate: i0.forwardRef(() => KbqAccordionItem), descendants: true, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:var(--kbq-accordion-size-item-border-width);border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height);overflow:hidden}.kbq-accordion-header>.kbq-accordion-header__actions{display:flex;align-items:center;gap:var(--kbq-accordion-size-item-header-actions-gap);flex-shrink:0;padding-right:var(--kbq-accordion-size-item-header-actions-padding-right)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>.kbq-accordion-content__body{margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:height .3s ease-out;height:var(--kbq-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open],.kbq-accordion-content[data-state=closed]{transition:none}}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-trigger:focus),.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-header .kbq-accordion-trigger:focus){border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{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-accordion{--kbq-accordion-size-item-border-width: 2px;--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "allItems", predicate: i0.forwardRef(() => KbqAccordionItem), descendants: true, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:var(--kbq-accordion-size-item-border-width);border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height);overflow:hidden}.kbq-accordion-header>.kbq-accordion-header__actions{display:flex;align-items:center;gap:var(--kbq-accordion-size-item-header-actions-gap);flex-shrink:0;padding-right:var(--kbq-accordion-size-item-header-actions-padding-right)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>.kbq-accordion-content__body{--kbq-accordion-content-height: initial;margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:height .3s ease-out;height:var(--kbq-accordion-content-height, auto)}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open],.kbq-accordion-content[data-state=closed]{transition:none}}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-trigger:focus),.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-header .kbq-accordion-trigger:focus){border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{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-accordion{--kbq-accordion-size-item-border-width: 2px;--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordion, decorators: [{
             type: Component,
@@ -712,7 +811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-accordion',
                         '[attr.data-orientation]': 'orientation()'
-                    }, styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:var(--kbq-accordion-size-item-border-width);border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height);overflow:hidden}.kbq-accordion-header>.kbq-accordion-header__actions{display:flex;align-items:center;gap:var(--kbq-accordion-size-item-header-actions-gap);flex-shrink:0;padding-right:var(--kbq-accordion-size-item-header-actions-padding-right)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>.kbq-accordion-content__body{margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:height .3s ease-out;height:var(--kbq-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open],.kbq-accordion-content[data-state=closed]{transition:none}}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-trigger:focus),.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-header .kbq-accordion-trigger:focus){border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{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-accordion{--kbq-accordion-size-item-border-width: 2px;--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"] }]
+                    }, styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:var(--kbq-accordion-size-item-border-width);border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height);overflow:hidden}.kbq-accordion-header>.kbq-accordion-header__actions{display:flex;align-items:center;gap:var(--kbq-accordion-size-item-header-actions-gap);flex-shrink:0;padding-right:var(--kbq-accordion-size-item-header-actions-padding-right)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>.kbq-accordion-content__body{--kbq-accordion-content-height: initial;margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:height .3s ease-out;height:var(--kbq-accordion-content-height, auto)}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open],.kbq-accordion-content[data-state=closed]{transition:none}}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-trigger:focus),.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-header .kbq-accordion-trigger:focus){border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{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-accordion{--kbq-accordion-size-item-border-width: 2px;--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { allItems: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqAccordionItem), { ...{ descendants: true }, isSignal: true }] }], useStateSaving: [{ type: i0.Input, args: [{ isSignal: true, alias: "useStateSaving", required: false }] }], stateSavingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateSavingKey", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class KbqAccordionContent {