@koobiq/components 20.3.1 → 20.3.3

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));
             }
         }
     }

package/core/index.d.ts

@@ -830,6 +830,11 @@ type KbqTimeRangeLocaleConfig = {
         apply: string;
         cancel: string;
         rangeLabel: string;
+        /**
+         * Reported when both ends of the range leave `minDate`/`maxDate`. Supports the `{{ value }}` placeholder.
+         * Optional, so a configuration written before it existed still compiles and gets the default wording.
+         */
+        outOfBoundsError?: string;
         allTime: string;
         currentQuarter: string;
         currentYear: string;
@@ -1032,6 +1037,7 @@ declare const enUSLocaleData: {
             apply: string;
             cancel: string;
             rangeLabel: string;
+            outOfBoundsError: string;
             allTime: string;
             currentQuarter: string;
             currentYear: string;
@@ -1234,6 +1240,7 @@ declare const esLALocaleData: {
             apply: string;
             cancel: string;
             rangeLabel: string;
+            outOfBoundsError: string;
             allTime: string;
             currentQuarter: string;
             currentYear: string;
@@ -1436,6 +1443,7 @@ declare const ptBRLocaleData: {
             apply: string;
             cancel: string;
             rangeLabel: string;
+            outOfBoundsError: string;
             allTime: string;
             currentQuarter: string;
             currentYear: string;
@@ -1639,6 +1647,7 @@ declare const ruRULocaleData: {
             apply: string;
             cancel: string;
             rangeLabel: string;
+            outOfBoundsError: string;
             allTime: string;
             currentQuarter: string;
             currentYear: string;
@@ -1842,6 +1851,7 @@ declare const tkTMLocaleData: {
             apply: string;
             cancel: string;
             rangeLabel: string;
+            outOfBoundsError: string;
             allTime: string;
             currentQuarter: string;
             currentYear: string;
@@ -2277,6 +2287,7 @@ declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 apply: string;
                 cancel: string;
                 rangeLabel: string;
+                outOfBoundsError: string;
                 allTime: string;
                 currentQuarter: string;
                 currentYear: string;
@@ -2516,6 +2527,7 @@ declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 apply: string;
                 cancel: string;
                 rangeLabel: string;
+                outOfBoundsError: string;
                 allTime: string;
                 currentQuarter: string;
                 currentYear: string;
@@ -2751,6 +2763,7 @@ declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 apply: string;
                 cancel: string;
                 rangeLabel: string;
+                outOfBoundsError: string;
                 allTime: string;
                 currentQuarter: string;
                 currentYear: string;
@@ -2992,6 +3005,7 @@ declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 apply: string;
                 cancel: string;
                 rangeLabel: string;
+                outOfBoundsError: string;
                 allTime: string;
                 currentQuarter: string;
                 currentYear: string;
@@ -3229,6 +3243,7 @@ declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 apply: string;
                 cancel: string;
                 rangeLabel: string;
+                outOfBoundsError: string;
                 allTime: string;
                 currentQuarter: string;
                 currentYear: string;
@@ -4911,6 +4926,15 @@ declare const kbqInjectNativeElement: <T extends Element = HTMLElement>() => T;
  * revealing it would shift the list out from under it.
  */
 declare const kbqFocusAndReveal: (element: HTMLElement, skipReveal?: boolean) => void;
+/**
+ * Rendered height of an element, or `0` when it has no box.
+ *
+ * `getClientRects()` returns an empty list for elements that are not laid out and is missing entirely
+ * from the server DOM, so both the method and the first rect are read defensively rather than going
+ * through `getBoundingClientRect()`, whose zeroes are indistinguishable from a genuinely collapsed
+ * element.
+ */
+declare const kbqGetElementHeight: (element: Element) => number;
 
 declare function isBoolean(value: unknown): value is boolean;
 /** Whether the value is undefined. */
@@ -5396,6 +5420,14 @@ declare class KbqSelectFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooter, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectFooter, "kbq-select-footer, [kbq-select-footer]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Action inside a `kbq-select-footer`, drawn as a row of the drop-down menu rather than as a form
+ * button. Apply it to a native `button` or `a` so activation and semantics stay native.
+ */
+declare class KbqSelectFooterItem {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooterItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectFooterItem, "[kbq-select-footer-item]", never, {}, {}, never, never, true, never>;
+}
 declare class KbqSelectSearch implements AfterContentInit, OnDestroy {
     protected formField: KbqFormFieldRef;
     readonly changes: EventEmitter<string>;
@@ -5821,5 +5853,5 @@ declare const validationTooltipHideDelay = 3000;
 
 declare const VERSION: Version;
 
-export { A, ALT, APOSTROPHE, ARROW_BOTTOM_MARGIN_AND_HALF_HEIGHT, AT_SIGN, AbsoluteDateFormatterImpurePipe, AbsoluteDateFormatterPipe, AbsoluteDateShortFormatterImpurePipe, AbsoluteDateShortFormatterPipe, AbsoluteDateTimeFormatterImpurePipe, AbsoluteDateTimeFormatterPipe, AbsoluteShortDateTimeFormatterImpurePipe, AbsoluteShortDateTimeFormatterPipe, ActiveDescendantKeyManager, B, BACKSLASH, BACKSPACE, BOTTOM_LEFT_POSITION_PRIORITY, BOTTOM_POSITION_PRIORITY, BOTTOM_RIGHT_POSITION_PRIORITY, BaseFormatterPipe, BaseLocaleAwareFormatterPipe, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, D, DASH, DELETE, DOWN_ARROW, DateAdapter, DateFormatter, DurationLongFormatterImpurePipe, DurationLongFormatterPipe, DurationShortFormatterImpurePipe, DurationShortFormatterPipe, DurationShortestFormatterImpurePipe, DurationShortestFormatterPipe, E, EIGHT, END, ENTER, EQUALS, ESCAPE, EXTENDED_OVERLAY_POSITIONS, EmptyFocusTrapStrategy, ErrorStateMatcher, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FOUR, FileValidators, FocusKeyManager, G, H, HOME, I, INSERT, J, K, KBQ_A11Y_LOCALE_CONFIGURATION, KBQ_CHECKABLE_CLICK_ACTION, KBQ_CHECKABLE_CONTROL_VALUE_ACCESSOR, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ORIGIN, KBQ_CONNECTED_OVERLAY_OVERLAP_CLASS, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_DATE_FORMATS, KBQ_DATE_LOCALE, KBQ_DATE_LOCALE_FACTORY, KBQ_DATE_TIMEZONE, KBQ_DEFAULT_LOCALE_DATA_FACTORY, KBQ_DEFAULT_LOCALE_ID, KBQ_DEFAULT_PRECISION_SEPARATOR, KBQ_FORM_FIELD_REF, KBQ_INVALID_VALUE_ERROR, KBQ_LOCALE_DATA, KBQ_LOCALE_ID, KBQ_LOCALE_SERVICE, KBQ_LOCALE_SERVICE_LANG_ATTR_NAME, KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS, KBQ_NUMBER_FORMATTER_OPTIONS, KBQ_OPTION_ACTION_PARENT, KBQ_OPTION_PARENT_COMPONENT, KBQ_OVERFLOW_SHADOW_SOURCE, KBQ_PANEL_DEFAULT_MIN_WIDTH, KBQ_PARENT_ANIMATION_COMPONENT, KBQ_PARENT_POPUP, KBQ_SELECT_SCROLL_STRATEGY, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER, KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD, KBQ_SHADOW_DOM_OVERLAY_HOST, KBQ_SIBLING_POPUP, KBQ_SIZE_UNITS_CONFIG, KBQ_SIZE_UNITS_DEFAULT_CONFIG, KBQ_TITLE_TEXT_REF, KBQ_WINDOW, KbqAbsoluteLongDatePipe, KbqAbsoluteLongDateTimePipe, KbqAbsoluteShortDatePipe, KbqAbsoluteShortDateTimePipe, KbqAbstractSelect, KbqActionContainer, KbqAnimationCurves, KbqAnimationDurations, KbqAutoHideScrollStrategy, KbqCheckable, KbqColorDirective, KbqComponentColors, KbqDataSizePipe, KbqDateTimezoneService, KbqDecimalPipe, KbqDefaultThemes, KbqDurationLongPipe, KbqDurationShortPipe, KbqDurationShortestPipe, KbqErrorStateTracker, KbqFieldSizingContent, KbqForm, KbqFormElement, KbqFormattersModule, KbqFormsModule, KbqHighlightBackgroundPipe, KbqHighlightModule, KbqHighlightPipe, KbqHover, KbqLine, KbqLineSetter, KbqLocaleService, KbqLocaleServiceModule, KbqMeasureScrollbarService, KbqMeasurementSystem, KbqNormalizeWhitespace, KbqOptgroup, KbqOption, KbqOptionActionComponent, KbqOptionBase, KbqOptionModule, KbqOptionSelectionChange, KbqOverflowShadowBottom, KbqOverflowShadowContainer, KbqOverflowShadowTop, KbqPopUp, KbqPopUpTrigger, KbqPseudoCheckbox, KbqPseudoCheckboxModule, KbqRangeLongDatePipe, KbqRangeLongDateTimePipe, KbqRangeMiddleDateTimePipe, KbqRangeShortDatePipe, KbqRangeShortDateTimePipe, KbqReadStateDirective, KbqRectangleItem, KbqRelativeLongDatePipe, KbqRelativeLongDateTimePipe, KbqRelativeShortDatePipe, KbqRelativeShortDateTimePipe, KbqRoundDecimalPipe, KbqSelectAllEvent, KbqSelectFooter, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger, KbqShadowDomOverlayContainer, KbqTableNumberPipe, KbqThemeSelector, KbqVirtualOption, L, LAST_MEDIA, LEFT_ARROW, LEFT_BOTTOM_POSITION_PRIORITY, LEFT_POSITION_PRIORITY, LEFT_TOP_POSITION_PRIORITY, ListKeyManager, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, META, MUTE, MockNgZone, MultipleMode, N, NINE, NUMBER_FORMAT_REGEXP, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PAUSE, PERIOD, PLUS_SIGN, POSITION_MAP, POSITION_PRIORITY_STRATEGY, POSITION_TO_CSS_MAP, PRINT_SCREEN, PasswordValidators, PopUpPlacements, PopUpSizes, PopUpTriggers, PopUpVisibility, Q, QUESTION_MARK, R, RIGHT_ARROW, RIGHT_BOTTOM_POSITION_PRIORITY, RIGHT_POSITION_PRIORITY, RIGHT_TOP_POSITION_PRIORITY, RangeDateFormatterImpurePipe, RangeDateFormatterPipe, RangeDateTimeFormatterImpurePipe, RangeDateTimeFormatterPipe, RangeMiddleDateTimeFormatterImpurePipe, RangeMiddleDateTimeFormatterPipe, RangeShortDateFormatterImpurePipe, RangeShortDateFormatterPipe, RangeShortDateTimeFormatterImpurePipe, RangeShortDateTimeFormatterPipe, RelativeDateFormatterImpurePipe, RelativeDateFormatterPipe, RelativeDateTimeFormatterImpurePipe, RelativeDateTimeFormatterPipe, RelativeShortDateFormatterImpurePipe, RelativeShortDateFormatterPipe, RelativeShortDateTimeFormatterImpurePipe, RelativeShortDateTimeFormatterPipe, S, SCROLL_LOCK, SELECT_PANEL_VIEWPORT_PADDING, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, ShowOnControlDirtyErrorStateMatcher, ShowOnFormSubmitErrorStateMatcher, ShowRequiredOnSubmitErrorStateMatcher, T, TAB, THREE, TILDE, TOP_LEFT_POSITION_PRIORITY, TOP_POSITION_PRIORITY, TOP_RIGHT_POSITION_PRIORITY, TWO, ThemePalette, ThemeService, TransitionCheckState, U, UP_ARROW, V, VERSION, VOLUME_DOWN, VOLUME_UP, W, X, Y, Z, ZERO, applyPopupMargins, checkAndNormalizeLocalizedNumber, countGroupLabelsBeforeOption, createFakeEvent, createKeyboardEvent, createMouseEvent, createSearchPredicate, createTouchEvent, defaultOffsetY, dispatchEvent, dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent, dispatchTouchEvent, enUSFormattersData, enUSLocaleData, esLAFormattersData, esLALocaleData, escapeRegExp, fadeAnimation, findSearchMatchRanges, formatNumberWithLocale, getFormattedSizeParts, getHumanizedBytes, getKbqSelectDynamicMultipleError, getKbqSelectNonArrayValueError, getKbqSelectNonFunctionValueError, getNodesWithoutComments, getOptionScrollPosition, getSafeTriangleVertices, getSelectAllState, hasModifierKey, isBoolean, isControl, isCopy, isDigit, isElement, isFunctionKey, isHorizontalMovement, isHtmlElement, isHtmlElementOrNull, isInput, isLeftBracket, isLetterKey, isMac, isNull, isNumberKey, isNumpadKey, isPointInRect, isPointInTriangle, isRightBracket, isSelectAll, isUndefined, isVerticalMovement, isWithin, kbqA11yLocaleConfigurationProvider, kbqAutoHideScrollStrategyFactory, kbqDateTimezoneProvider, kbqErrorStateMatcherProvider, kbqFilesizeFormatterConfigurationProvider, kbqFocusAndReveal, kbqFocusOptionActionOnTab, kbqGetPanelWidthOrigin, kbqHighlightBackgroundMark, kbqHighlightMark, kbqInjectA11yLocaleConfiguration, kbqInjectAutofilled, kbqInjectNativeElement, kbqLocaleServiceLangAttrNameProvider, kbqResolvePanelMaxHeightToken, kbqResolvePanelWidth, kbqResolveTimezoneOffset, kbqRevealSelection, kbqSelectAnimations, kbqSelectScrollStrategyProviderFactory, kbqSetSelectionRange, kbqShadowDomOverlayProvider, kbqSiblingPopupProvider, leftIconClassName, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, normalizeNumber, normalizeSearchValue, numberByParts, patchElementFocus, ptBRFormattersData, ptBRLocaleData, rightIconClassName, ruRUFormattersData, ruRULocaleData, runCompareWith, selectEvents, shouldSelectSearchText, tkTMFormattersData, tkTMLocaleData, toggleSelectAll, tokenizeSearchQuery, typeInElement, validationTooltipHideDelay, validationTooltipShowDelay, wrappedErrorMessage };
+export { A, ALT, APOSTROPHE, ARROW_BOTTOM_MARGIN_AND_HALF_HEIGHT, AT_SIGN, AbsoluteDateFormatterImpurePipe, AbsoluteDateFormatterPipe, AbsoluteDateShortFormatterImpurePipe, AbsoluteDateShortFormatterPipe, AbsoluteDateTimeFormatterImpurePipe, AbsoluteDateTimeFormatterPipe, AbsoluteShortDateTimeFormatterImpurePipe, AbsoluteShortDateTimeFormatterPipe, ActiveDescendantKeyManager, B, BACKSLASH, BACKSPACE, BOTTOM_LEFT_POSITION_PRIORITY, BOTTOM_POSITION_PRIORITY, BOTTOM_RIGHT_POSITION_PRIORITY, BaseFormatterPipe, BaseLocaleAwareFormatterPipe, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, D, DASH, DELETE, DOWN_ARROW, DateAdapter, DateFormatter, DurationLongFormatterImpurePipe, DurationLongFormatterPipe, DurationShortFormatterImpurePipe, DurationShortFormatterPipe, DurationShortestFormatterImpurePipe, DurationShortestFormatterPipe, E, EIGHT, END, ENTER, EQUALS, ESCAPE, EXTENDED_OVERLAY_POSITIONS, EmptyFocusTrapStrategy, ErrorStateMatcher, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FOUR, FileValidators, FocusKeyManager, G, H, HOME, I, INSERT, J, K, KBQ_A11Y_LOCALE_CONFIGURATION, KBQ_CHECKABLE_CLICK_ACTION, KBQ_CHECKABLE_CONTROL_VALUE_ACCESSOR, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ORIGIN, KBQ_CONNECTED_OVERLAY_OVERLAP_CLASS, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_DATE_FORMATS, KBQ_DATE_LOCALE, KBQ_DATE_LOCALE_FACTORY, KBQ_DATE_TIMEZONE, KBQ_DEFAULT_LOCALE_DATA_FACTORY, KBQ_DEFAULT_LOCALE_ID, KBQ_DEFAULT_PRECISION_SEPARATOR, KBQ_FORM_FIELD_REF, KBQ_INVALID_VALUE_ERROR, KBQ_LOCALE_DATA, KBQ_LOCALE_ID, KBQ_LOCALE_SERVICE, KBQ_LOCALE_SERVICE_LANG_ATTR_NAME, KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS, KBQ_NUMBER_FORMATTER_OPTIONS, KBQ_OPTION_ACTION_PARENT, KBQ_OPTION_PARENT_COMPONENT, KBQ_OVERFLOW_SHADOW_SOURCE, KBQ_PANEL_DEFAULT_MIN_WIDTH, KBQ_PARENT_ANIMATION_COMPONENT, KBQ_PARENT_POPUP, KBQ_SELECT_SCROLL_STRATEGY, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER, KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD, KBQ_SHADOW_DOM_OVERLAY_HOST, KBQ_SIBLING_POPUP, KBQ_SIZE_UNITS_CONFIG, KBQ_SIZE_UNITS_DEFAULT_CONFIG, KBQ_TITLE_TEXT_REF, KBQ_WINDOW, KbqAbsoluteLongDatePipe, KbqAbsoluteLongDateTimePipe, KbqAbsoluteShortDatePipe, KbqAbsoluteShortDateTimePipe, KbqAbstractSelect, KbqActionContainer, KbqAnimationCurves, KbqAnimationDurations, KbqAutoHideScrollStrategy, KbqCheckable, KbqColorDirective, KbqComponentColors, KbqDataSizePipe, KbqDateTimezoneService, KbqDecimalPipe, KbqDefaultThemes, KbqDurationLongPipe, KbqDurationShortPipe, KbqDurationShortestPipe, KbqErrorStateTracker, KbqFieldSizingContent, KbqForm, KbqFormElement, KbqFormattersModule, KbqFormsModule, KbqHighlightBackgroundPipe, KbqHighlightModule, KbqHighlightPipe, KbqHover, KbqLine, KbqLineSetter, KbqLocaleService, KbqLocaleServiceModule, KbqMeasureScrollbarService, KbqMeasurementSystem, KbqNormalizeWhitespace, KbqOptgroup, KbqOption, KbqOptionActionComponent, KbqOptionBase, KbqOptionModule, KbqOptionSelectionChange, KbqOverflowShadowBottom, KbqOverflowShadowContainer, KbqOverflowShadowTop, KbqPopUp, KbqPopUpTrigger, KbqPseudoCheckbox, KbqPseudoCheckboxModule, KbqRangeLongDatePipe, KbqRangeLongDateTimePipe, KbqRangeMiddleDateTimePipe, KbqRangeShortDatePipe, KbqRangeShortDateTimePipe, KbqReadStateDirective, KbqRectangleItem, KbqRelativeLongDatePipe, KbqRelativeLongDateTimePipe, KbqRelativeShortDatePipe, KbqRelativeShortDateTimePipe, KbqRoundDecimalPipe, KbqSelectAllEvent, KbqSelectFooter, KbqSelectFooterItem, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger, KbqShadowDomOverlayContainer, KbqTableNumberPipe, KbqThemeSelector, KbqVirtualOption, L, LAST_MEDIA, LEFT_ARROW, LEFT_BOTTOM_POSITION_PRIORITY, LEFT_POSITION_PRIORITY, LEFT_TOP_POSITION_PRIORITY, ListKeyManager, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, META, MUTE, MockNgZone, MultipleMode, N, NINE, NUMBER_FORMAT_REGEXP, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PAUSE, PERIOD, PLUS_SIGN, POSITION_MAP, POSITION_PRIORITY_STRATEGY, POSITION_TO_CSS_MAP, PRINT_SCREEN, PasswordValidators, PopUpPlacements, PopUpSizes, PopUpTriggers, PopUpVisibility, Q, QUESTION_MARK, R, RIGHT_ARROW, RIGHT_BOTTOM_POSITION_PRIORITY, RIGHT_POSITION_PRIORITY, RIGHT_TOP_POSITION_PRIORITY, RangeDateFormatterImpurePipe, RangeDateFormatterPipe, RangeDateTimeFormatterImpurePipe, RangeDateTimeFormatterPipe, RangeMiddleDateTimeFormatterImpurePipe, RangeMiddleDateTimeFormatterPipe, RangeShortDateFormatterImpurePipe, RangeShortDateFormatterPipe, RangeShortDateTimeFormatterImpurePipe, RangeShortDateTimeFormatterPipe, RelativeDateFormatterImpurePipe, RelativeDateFormatterPipe, RelativeDateTimeFormatterImpurePipe, RelativeDateTimeFormatterPipe, RelativeShortDateFormatterImpurePipe, RelativeShortDateFormatterPipe, RelativeShortDateTimeFormatterImpurePipe, RelativeShortDateTimeFormatterPipe, S, SCROLL_LOCK, SELECT_PANEL_VIEWPORT_PADDING, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, ShowOnControlDirtyErrorStateMatcher, ShowOnFormSubmitErrorStateMatcher, ShowRequiredOnSubmitErrorStateMatcher, T, TAB, THREE, TILDE, TOP_LEFT_POSITION_PRIORITY, TOP_POSITION_PRIORITY, TOP_RIGHT_POSITION_PRIORITY, TWO, ThemePalette, ThemeService, TransitionCheckState, U, UP_ARROW, V, VERSION, VOLUME_DOWN, VOLUME_UP, W, X, Y, Z, ZERO, applyPopupMargins, checkAndNormalizeLocalizedNumber, countGroupLabelsBeforeOption, createFakeEvent, createKeyboardEvent, createMouseEvent, createSearchPredicate, createTouchEvent, defaultOffsetY, dispatchEvent, dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent, dispatchTouchEvent, enUSFormattersData, enUSLocaleData, esLAFormattersData, esLALocaleData, escapeRegExp, fadeAnimation, findSearchMatchRanges, formatNumberWithLocale, getFormattedSizeParts, getHumanizedBytes, getKbqSelectDynamicMultipleError, getKbqSelectNonArrayValueError, getKbqSelectNonFunctionValueError, getNodesWithoutComments, getOptionScrollPosition, getSafeTriangleVertices, getSelectAllState, hasModifierKey, isBoolean, isControl, isCopy, isDigit, isElement, isFunctionKey, isHorizontalMovement, isHtmlElement, isHtmlElementOrNull, isInput, isLeftBracket, isLetterKey, isMac, isNull, isNumberKey, isNumpadKey, isPointInRect, isPointInTriangle, isRightBracket, isSelectAll, isUndefined, isVerticalMovement, isWithin, kbqA11yLocaleConfigurationProvider, kbqAutoHideScrollStrategyFactory, kbqDateTimezoneProvider, kbqErrorStateMatcherProvider, kbqFilesizeFormatterConfigurationProvider, kbqFocusAndReveal, kbqFocusOptionActionOnTab, kbqGetElementHeight, kbqGetPanelWidthOrigin, kbqHighlightBackgroundMark, kbqHighlightMark, kbqInjectA11yLocaleConfiguration, kbqInjectAutofilled, kbqInjectNativeElement, kbqLocaleServiceLangAttrNameProvider, kbqResolvePanelMaxHeightToken, kbqResolvePanelWidth, kbqResolveTimezoneOffset, kbqRevealSelection, kbqSelectAnimations, kbqSelectScrollStrategyProviderFactory, kbqSetSelectionRange, kbqShadowDomOverlayProvider, kbqSiblingPopupProvider, leftIconClassName, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, normalizeNumber, normalizeSearchValue, numberByParts, patchElementFocus, ptBRFormattersData, ptBRLocaleData, rightIconClassName, ruRUFormattersData, ruRULocaleData, runCompareWith, selectEvents, shouldSelectSearchText, tkTMFormattersData, tkTMLocaleData, toggleSelectAll, tokenizeSearchQuery, typeInElement, validationTooltipHideDelay, validationTooltipShowDelay, wrappedErrorMessage };
 export type { CanColor, CanColorCtor, CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, HasTabIndex, HasTabIndexCtor, Highlightable, IFocusableOption, KbqA11yLocaleConfiguration, KbqActionsPanelLocaleConfiguration, KbqAutoHideScrollStrategyConfig, KbqAutoHideScrollStrategyHooks, KbqBaseFileUploadLocaleConfig, KbqCheckableClickAction, KbqCheckableClickResult, KbqCheckedState, KbqClampedTextLocaleConfig, KbqCodeBlockLocaleConfiguration, KbqConnectedOverlayOriginProvider, KbqDateFormats, KbqDefaultSizes, KbqEnumValues, KbqFileTypeSpecifier, KbqFileUploadLocaleConfig, KbqFlexDirection, KbqFlexWrap, KbqFormFieldRef, KbqMeasurementSystemType, KbqMultipleFileUploadLocaleConfig, KbqNumberFormatOptions, KbqNumberInputLocaleConfig, KbqNumberRoundingLocaleConfig, KbqNumericPipe, KbqOptionActionParent, KbqOptionParentComponent, KbqOrientation, KbqOverflowShadowSource, KbqOverflowShadowState, KbqPanelMaxHeight, KbqPanelMaxWidth, KbqPanelMinWidth, KbqPanelWidth, KbqPanelWidthOrigin, KbqParentPopup, KbqPoint, KbqPopUpPlacementValues, KbqPopUpSizeValues, KbqPseudoCheckboxState, KbqResolvedPanelWidth, KbqSelectAllAdapter, KbqSelectLocaleConfiguration, KbqShadowDomOverlayHost, KbqSiblingPopup, KbqSizeUnitsConfig, KbqStickToWindowPlacementValues, KbqTheme, KbqTimeRangeLocaleConfig, KbqTimezoneLike, KbqTitleTextRef, KbqToggleSelectAllOptions, KbqTriangle, KbqUnitSystem, KeyboardNavigationHandler, ListKeyManagerModifierKey, ListKeyManagerOption };

package/core/styles/common/_select.scss

@@ -19,7 +19,10 @@
 
         min-height: calc(var(--kbq-form-field-size-height) - calc(var(--kbq-size-border-width) * 2));
 
-        &:not(.kbq-select__trigger_multiline) {
+        // An empty multiline trigger has no tags to grow for, so it keeps the single-line height:
+        // otherwise the placeholder's padding makes it 2px taller than the first row of tags.
+        &:not(.kbq-select__trigger_multiline),
+        &.kbq-select__trigger_empty {
             height: calc(var(--kbq-form-field-size-height) - calc(var(--kbq-size-border-width) * 2));
 
             & .kbq-select__matcher {
@@ -234,6 +237,9 @@
     overflow: hidden auto;
 }
 
+// The tokens are left undeclared: the value lives in the fallback, so one override reaches every panel
+// that extends this placeholder — the dropdown and the autocomplete included. Declaring them in
+// `select-tokens.scss` would scope them to `.kbq-select__panel` and put those two out of reach.
 %kbq-select-footer {
     @include vendor-prefixes.user-select(none);
 
@@ -241,14 +247,61 @@
     align-items: center;
     box-sizing: border-box;
 
-    min-height: 40px;
+    min-height: var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));
 
-    border-top-width: 1px;
+    border-top-width: var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));
     border-top-style: solid;
 
-    padding: var(--kbq-size-xxs) var(--kbq-size-l);
+    padding: var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs))
+        var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l));
 }
 
+// The footer's action is drawn as a row of the drop-down menu rather than as a form button: full
+// panel width, the option's own box and hover fill, so it reads as the last entry of the list
+// instead of a control parked underneath it.
+%kbq-select-footer-item {
+    @include vendor-prefixes.user-select(none);
+
+    // A native `button`/`a` flashes on tap without this; `kbq-list-item-base()`, which the option rows
+    // above use, is not included because the row zeroes the vertical padding that mixin sets.
+    -webkit-tap-highlight-color: transparent;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+    outline: none;
+
+    // `flex-grow` rather than `width: 100%`: alone in the footer it fills the content box just the same,
+    // but it shares the row instead of squeezing a caption or a second action out of it. The basis stays
+    // `auto` — `flex: 1` would expand to a `0%` basis and hand two actions the same width whatever they
+    // say.
+    flex: 1 1 auto;
+    min-height: var(--kbq-select-footer-item-size-height, var(--kbq-size-3xl));
+    gap: var(--kbq-size-s);
+
+    // Transparent border, as on an option, so the row keeps the same content inset — and so the focus
+    // ring below can recolour it without shifting anything.
+    border: var(--kbq-size-3xs) solid transparent;
+    border-radius: var(--kbq-select-footer-item-size-border-radius, var(--kbq-size-xxs));
+
+    padding: 0 kbq-difference-series-css-variables([size-m, size-3xs]);
+
+    background: transparent;
+    cursor: pointer;
+
+    text-align: left;
+    text-decoration: none;
+}
+
+// Extends an item's hit area past the box it paints, with a transparent pseudo-element on the element
+// that owns the click handler — a pseudo-element is hit-tested as part of that element, so hover and
+// click both reach the gutter with no TS and no `z-index`. This one claims a fixed strip either side of
+// a plain vertical list. The same technique, sized differently, is hand-rolled where the geometry does
+// not fit: `.kbq-navbar-item`'s `:before` cancels the item's own margin (DS-2558), and
+// `--kbq-button-toggle-size-item-hit-area-*` tiles a group's `gap` between two neighbours and hands the
+// group's padding to the outermost items, per orientation (DS-4164). Any clipping ancestor eats all of
+// them — see the note on `.kbq-button-toggle`'s `overflow`.
 @mixin item-active-area($outline) {
     position: relative;
 
@@ -268,3 +321,48 @@
         left: calc(100% + $outline); // outline size
     }
 }
+
+// A mixin of its own: the row's structure is only extended under `.kbq-select__panel`, and emitting its
+// colours anywhere else would paint a half-styled control.
+@mixin kbq-select-footer-item-theme() {
+    .kbq-select__footer-item {
+        color: var(--kbq-foreground-contrast);
+
+        // The row is reachable with TAB, so it needs a focus indicator of its own; `outline: none` in
+        // the structural rule would otherwise leave it with none at all. Recolouring the 2px layout
+        // border is the whole ring — adding an outline on top of it would render 3px, half again as
+        // thick as every other focused control (a button pairs a 1px border with a 1px outline).
+        &:focus-visible {
+            border-color: var(--kbq-states-line-focus-theme);
+        }
+
+        // `:disabled` alone would miss an `a`, which the directive also supports and which cannot carry
+        // the attribute — those are marked with `.kbq-disabled`, as `.kbq-option` and `.kbq-dropdown-item` are.
+        &:hover:not(:disabled, .kbq-disabled) {
+            background: var(--kbq-states-background-transparent-hover);
+        }
+
+        &:active:not(:disabled, .kbq-disabled) {
+            background: var(--kbq-states-background-transparent-active);
+        }
+
+        &:disabled,
+        &.kbq-disabled {
+            color: var(--kbq-states-foreground-disabled);
+            cursor: default;
+
+            // A native `button` ignores the pointer once it carries `disabled`, but an `a` cannot carry the
+            // attribute, so the class has to do it — otherwise a greyed-out link still navigates on a click
+            // and closes the panel on the way. Same pair `kbq-link` uses for its own disabled state.
+            pointer-events: none;
+
+            // `.kbq-icon` is coloured from an absolute token rather than `currentColor`, so a projected
+            // icon would stay at full contrast beside a greyed label. Only the ones left at the default
+            // colour: `.kbq-empty` is what `KbqColorDirective` leaves behind when the consumer set none,
+            // and an icon button carries its own disabled state.
+            & .kbq-icon.kbq-empty:not(.kbq-icon-button, .kbq-icon-item) {
+                color: var(--kbq-states-foreground-disabled);
+            }
+        }
+    }
+}

package/core/styles/typography/_typography.scss

@@ -239,6 +239,10 @@
         @include kbq-typography-level-to-styles-css-variables(typography, mono-normal-strong);
     }
 
+    .kbq-mono-normal-medium {
+        @include kbq-typography-level-to-styles-css-variables(typography, mono-normal-medium);
+    }
+
     .kbq-mono-compact {
         @include kbq-typography-level-to-styles-css-variables(typography, mono-compact);
     }
@@ -247,6 +251,10 @@
         @include kbq-typography-level-to-styles-css-variables(typography, mono-compact-strong);
     }
 
+    .kbq-mono-codeblock {
+        @include kbq-typography-level-to-styles-css-variables(typography, mono-codeblock);
+    }
+
     .kbq-tabular-big {
         @include kbq-typography-level-to-styles-css-variables(typography, tabular-big);
     }