@koobiq/components 20.3.1 → 20.4.0

package/accordion/accordion.scss

@@ -45,13 +45,16 @@
     overflow: hidden;
 
     & > .kbq-accordion-content__body {
+        // Nested contents must not inherit this host's pinned height.
+        --kbq-accordion-content-height: initial;
+
         margin: unset;
         padding: var(--kbq-accordion-size-item-content-padding);
     }
 
     &[data-state='open'] {
         transition: height 300ms ease-out;
-        height: var(--kbq-accordion-content-height);
+        height: var(--kbq-accordion-content-height, auto);
     }
 
     &[data-state='closed'] {

package/accordion/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, AfterViewInit, OnDestroy, ChangeDetectorRef, AfterContentInit, ElementRef, Signal } from '@angular/core';
+import { InjectionToken, AfterViewInit, OnDestroy, OnInit, ChangeDetectorRef, AfterContentInit, ElementRef, Signal, DoCheck } from '@angular/core';
 import { FocusMonitor, FocusKeyManager } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
@@ -86,6 +86,7 @@ declare class KbqAccordionTriggerDirective {
 }
 
 declare class KbqAccordionTrigger implements AfterViewInit, OnDestroy {
+    private readonly platform;
     /** @docs-private */
     protected readonly nativeElement: HTMLElement;
     /** @docs-private */
@@ -108,7 +109,7 @@ declare class KbqAccordionTrigger implements AfterViewInit, OnDestroy {
 }
 
 type KbqAccordionItemState = 'open' | 'closed';
-declare class KbqAccordionItem implements OnDestroy {
+declare class KbqAccordionItem implements OnInit, OnDestroy {
     /**
      * The accordion this item belongs to — always the nearest one, because it is injected.
      * The accordion reads it back to tell its own items apart from a nested accordion's.
@@ -131,10 +132,14 @@ declare class KbqAccordionItem implements OnDestroy {
     get dataState(): KbqAccordionItemState;
     /** The layout orientation inherited from the parent accordion. @docs-private */
     get orientation(): KbqAccordionOrientation;
-    /** 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.
+     */
     get expanded(): boolean;
     set expanded(expanded: boolean);
     private _expanded;
+    private initialized;
     /**
      * 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).
@@ -162,6 +167,7 @@ declare class KbqAccordionItem implements OnDestroy {
     /** Subscription to openAll/closeAll events. */
     private openCloseAllSubscription;
     constructor();
+    ngOnInit(): void;
     ngOnDestroy(): void;
     /** Moves focus to the item's trigger. */
     focus(): void;
@@ -177,6 +183,8 @@ declare class KbqAccordionItem implements OnDestroy {
     disableAnimation(): void;
     /** Restores the open/close animation of the item's content and chevron. @docs-private */
     enableAnimation(): void;
+    /** Emits the expanded state and propagates it to the siblings, the content and the saved state. */
+    private reportExpanded;
     private subscribeToOpenCloseAllActions;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordionItem, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAccordionItem, "kbq-accordion-item, [kbq-accordion-item]", never, { "expanded": { "alias": "expanded"; "required": false; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "closed": "closed"; "opened": "opened"; "expandedChange": "expandedChange"; }, ["trigger", "triggerComponent", "content"], never, true, never>;
@@ -279,6 +287,11 @@ declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit
     private readonly defaultValueArray;
     private _id;
     private state;
+    /**
+     * 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.
+     */
+    private stateRestored;
     constructor();
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
@@ -312,8 +325,10 @@ declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqAccordion, "kbq-accordion, [kbq-accordion]", never, { "useStateSaving": { "alias": "useStateSaving"; "required": false; "isSignal": true; }; "stateSavingKey": { "alias": "stateSavingKey"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["allItems"], ["*"], true, never>;
 }
 
-declare class KbqAccordionContentDirective implements AfterViewInit {
+declare class KbqAccordionContentDirective implements OnInit, DoCheck, AfterViewInit {
     private readonly renderer;
+    private readonly platform;
+    private readonly injector;
     /** @docs-private */
     protected readonly nativeElement: HTMLElement;
     /** @docs-private */
@@ -325,23 +340,32 @@ declare class KbqAccordionContentDirective implements AfterViewInit {
     /** @docs-private */
     protected readonly hidden: _angular_core.WritableSignal<boolean>;
     private savedTransition;
-    private readonly afterRenderRef?;
-    /** 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. */
     private rendered;
     constructor();
+    ngOnInit(): void;
+    ngDoCheck(): void;
     ngAfterViewInit(): void;
     toggle(): void;
+    /** @docs-private */
+    protected onTransitionEnd(event: TransitionEvent): void;
     disableAnimation(): void;
     enableAnimation(): void;
     /**
-     * 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.
      */
-    private updateHeight;
+    private pinHeight;
+    /** Checks the pin once `data-state` has flipped. */
+    private settleHeight;
+    /** Whether a height transition runs on the host; `undefined` without the Web Animations API. */
+    private isHeightTransitionRunning;
+    private setHeight;
+    private releaseHeight;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordionContentDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAccordionContentDirective, "[kbqAccordionContent]", ["kbqAccordionContent"], {}, {}, never, never, true, never>;
 }

package/alert/index.d.ts

@@ -42,6 +42,7 @@ declare class KbqAlertControl {
  * technology announces it — see the component guide.
  */
 declare class KbqAlert {
+    private readonly elementRef;
     /** @docs-private */
     protected readonly iconItem: _angular_core.Signal<KbqIconItem | undefined>;
     /** @docs-private */
@@ -74,7 +75,14 @@ declare class KbqAlert {
     protected readonly projectedIcon: _angular_core.Signal<KbqIcon | undefined>;
     /** Last color this component auto-assigned to the icon; lets us correct color on change without ignoring consumer's color. */
     private lastAutoColor;
+    /** Guards the dev-mode double-icon warning so it fires once per instance. */
+    private multipleIconsWarned;
     constructor();
+    /**
+     * The icon slot projects `[kbq-icon]` and `[kbq-icon-item]` alike, and the two register under separate DI
+     * tokens, so projecting both renders two icons side by side while only the `KbqIcon` is auto-tinted.
+     */
+    private warnOnMultipleProjectedIcons;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAlert, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqAlert, "kbq-alert", ["kbqAlert"], { "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "alertStyle": { "alias": "alertStyle"; "required": false; "isSignal": true; }; "alertColor": { "alias": "alertColor"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, ["iconItem", "icon", "button", "title", "control", "closeButton"], ["[kbq-icon-item],[kbq-icon]", "[kbq-alert-title]", "*", "[kbq-alert-control]", "[kbq-alert-close-button]"], true, never>;
 }

package/breadcrumbs/index.d.ts

@@ -133,9 +133,11 @@ declare class KbqBreadcrumbsSeparator {
  * Directive to style and configure buttons used as breadcrumb items.
  * - Inherits focus management behavior from `RdxRovingFocusItemDirective`.
  * - Optionally injects `KbqButton` to customize its style for breadcrumb usage.
+ * - Sets `type="button"` on a `<button>` host, so a breadcrumb never submits a surrounding form.
  */
 declare class KbqBreadcrumbButton implements OnInit {
     private readonly button;
+    protected readonly element: HTMLElement;
     ngOnInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqBreadcrumbButton, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqBreadcrumbButton, "[kbq-button][kbqBreadcrumb]", never, {}, {}, never, never, true, [{ directive: typeof RdxRovingFocusItemDirective; inputs: { "focusable": "focusable"; }; outputs: {}; }]>;

package/button-toggle/button-toggle-tokens.scss

@@ -11,6 +11,20 @@
     --kbq-button-toggle-size-item-padding-vertical: var(--kbq-size-3xs);
     --kbq-button-toggle-size-item-content-gap-horizontal: var(--kbq-size-xxs);
     --kbq-button-toggle-size-item-focus-outline-width: var(--kbq-size-3xs);
+    // How far an item's hit area reaches past the pill it paints. Measured from the inner button's
+    // border box, one item border inside the item's own — hence the border-width term in each. `-gap` is
+    // the half of the inter-item gap an item claims; the other two cover the group's padding. The
+    // pseudo-element they offset is in button-toggle.scss, next to the note on the two other places
+    // this repo extends a hit area the same way.
+    --kbq-button-toggle-size-item-hit-area-gap: calc(
+        var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-content-gap-horizontal) / 2
+    );
+    --kbq-button-toggle-size-item-hit-area-horizontal: calc(
+        var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-padding-horizontal)
+    );
+    --kbq-button-toggle-size-item-hit-area-vertical: calc(
+        var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-padding-vertical)
+    );
     /* THEME TOKENS */
     --kbq-button-toggle-container-background: var(--kbq-background-contrast-fade);
     --kbq-button-toggle-item-default-background: var(--kbq-background-transparent);

package/button-toggle/button-toggle.scss

@@ -17,17 +17,31 @@
 
     .kbq-button-toggle {
         display: flex;
-        overflow: hidden;
         justify-content: flex-start;
         align-items: center;
 
+        // Must not clip: the button's hit area below reaches outside this box. Not `overflow: clip` with
+        // an `overflow-clip-margin` — Chromium rejects math functions there, so the margin cannot follow
+        // the tokens the offsets come from and computes to `0px`, clipping the hit area away.
+
+        // What the item stops containing, and why nothing here takes it back: a toggle projects its
+        // content into the button's own `.kbq-button-text`, which keeps the `overflow: hidden` of
+        // `kbq-truncate-line()`, so content still cannot spill sideways past the button's content box.
+        // Content *taller* than the fixed item height no longer is — and cannot be re-clipped from
+        // inside the button, since the only boxes there with a definite height are the button itself,
+        // whose `::before` this exists for, and the label box, which would clip its own descenders.
+        overflow: visible;
+
+        // What that clip used to give for free: a flex item's automatic minimum size is zero only while
+        // its `overflow` is non-`visible`, and that is what lets the label truncate.
+        min-width: 0;
+
         // Content-box on purpose, and load-bearing. `--kbq-button-toggle-size-item-height` is 22px,
         // not the 24px of the design's `--kbq-size-xxl`: DS-3136 subtracted the border it added here
         // from the token rather than from the rendered box, so the item only reaches its designed
         // 24px while the border sits outside the declared height. A global `border-box` reset in a
         // consuming application would pull the border back inside and leave the item 2px short —
-        // and the inner button, which is sized from the same token, would overflow the shrunken
-        // content box and be clipped by `overflow: hidden` above.
+        // and the inner button, which is sized from the same token, would then spill past it.
         box-sizing: content-box;
 
         height: var(--kbq-button-toggle-size-item-height);
@@ -57,6 +71,21 @@
                     button-toggle-size-item-focus-outline-width]
                 );
 
+            // Hit area over the gutters the group's `gap` and `padding` leave around the pill this button
+            // paints, so the highlight does not drop out between segments. On the button, not the item
+            // host, so pointer events resolve to it and the gutter is clickable too. `::before` because
+            // `::after` is the `.kbq-progress` shimmer. Offsets are per orientation, below.
+
+            // The third place this repo extends a hit area with a transparent pseudo-element, after
+            // `.kbq-navbar-item`'s `:before` (DS-2558) and `select.item-active-area()`. Neither is
+            // reusable here: the mixin claims a fixed strip on one side of a plain vertical list, with
+            // no gap to tile between two neighbours, no group padding at the ends, and no orientation
+            // to swap the axes for.
+            &:before {
+                content: '';
+                position: absolute;
+            }
+
             & .kbq-button-wrapper {
                 width: 100%;
             }
@@ -81,6 +110,16 @@
         }
     }
 
+    // Hit-area offsets, one orientation each — the vertical block below is this one with the axes
+    // swapped. The gap is split at its midline so two neighbours tile it rather than overlap, which would
+    // hand the whole gutter to whichever paints last; the outermost sides have no neighbour to share with
+    // and take the group's padding instead, leaving no point inside the group unclaimed.
+
+    // `:first-of-type`/`:last-of-type`, not `:first-child`/`:last-child`: the group is a bare directive
+    // with no template, so a consumer's own element — a divider, a leading icon — is rendered as a real
+    // child among the toggles and would take the positional match away from the toggle that actually sits
+    // at the edge, putting the dead zone back. The class only ever lands on a `kbq-button-toggle` element,
+    // so matching by type reads the toggles alone.
     &:not(.kbq-button-toggle_vertical) {
         .kbq-button-toggle {
             > .kbq-button,
@@ -88,6 +127,39 @@
                 max-width: 100%;
 
                 height: var(--kbq-button-toggle-size-item-height);
+
+                &:before {
+                    inset-block: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical));
+                    inset-inline: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-gap));
+                }
+            }
+
+            &:first-of-type > :is(.kbq-button, .kbq-button-icon):before {
+                inset-inline-start: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal));
+            }
+
+            &:last-of-type > :is(.kbq-button, .kbq-button-icon):before {
+                inset-inline-end: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal));
+            }
+        }
+    }
+
+    &.kbq-button-toggle_vertical {
+        .kbq-button-toggle {
+            > .kbq-button,
+            > .kbq-button-icon {
+                &:before {
+                    inset-inline: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal));
+                    inset-block: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-gap));
+                }
+            }
+
+            &:first-of-type > :is(.kbq-button, .kbq-button-icon):before {
+                inset-block-start: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical));
+            }
+
+            &:last-of-type > :is(.kbq-button, .kbq-button-icon):before {
+                inset-block-end: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical));
             }
         }
     }