@uni-design-system/uni-angular 8.2.0 → 8.3.0

package/fesm2022/uni-design-system-uni-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, ChangeDetectionStrategy, Component, contentChildren, output, Renderer2, ElementRef, Directive, model, effect, viewChild, afterNextRender, ViewChild, afterRenderEffect, booleanAttribute, viewChildren } from '@angular/core';
+import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, ChangeDetectionStrategy, Component, contentChildren, output, Renderer2, ElementRef, Directive, model, viewChild, effect, untracked, afterNextRender, ViewChild, afterRenderEffect, booleanAttribute, viewChildren } from '@angular/core';
 import { injectGlobal, css, keyframes } from '@emotion/css';
-import { UniThemes, LightTheme, toTypefaces, parseTheme, formatThemeIssues, hydrateTheme, createThemeFromPalette, Z_INDEX, fadeIn, removeInputPlatformStyling, fadeOut, EXPAND_DEFAULT_SPEED, expandDuration, expandFadeIn, collapseFadeOut, HOVER_OR_KEYBOARD_FOCUS, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
+import { UniThemes, LightTheme, toTypefaces, parseTheme, formatThemeIssues, hydrateTheme, createThemeFromPalette, Z_INDEX, removeInputPlatformStyling, fadeIn, fadeOut, EXPAND_DEFAULT_SPEED, expandDuration, expandFadeIn, collapseFadeOut, HOVER_OR_KEYBOARD_FOCUS, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
 import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 
 let nextUniqueId = 0;
@@ -361,6 +361,7 @@ class ListboxNavigation {
     _open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
     _activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_activeIndex" }] : /* istanbul ignore next */ []));
     wrap;
+    isDisabled;
     /** Whether the popup is showing. Also false when there is nothing to show. */
     open = computed(() => this._open() && this.config.count() > 0, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     /** Index of the highlighted option, or -1 when none is active. */
@@ -378,6 +379,7 @@ class ListboxNavigation {
         this.config = config;
         this.listboxId = uniqueId(config.idPrefix ?? 'uni-listbox');
         this.wrap = config.wrap ?? true;
+        this.isDisabled = config.disabled ?? (() => false);
     }
     /** Stable per-option id, for `role="option"` elements. */
     optionId(index) {
@@ -418,20 +420,35 @@ class ListboxNavigation {
                 return this.step(current, 1, count);
             case 'ArrowUp':
                 // Opening with ArrowUp lands on the last option, matching menus.
-                return current < 0 ? count - 1 : this.step(current, -1, count);
+                return current < 0 ? this.seek(count - 1, -1, count) : this.step(current, -1, count);
             case 'Home':
-                return 0;
+                return this.seek(0, 1, count);
             case 'End':
-                return count - 1;
+                return this.seek(count - 1, -1, count);
             default:
                 return null;
         }
     }
+    /** Nearest enabled index at or after `start`, walking by `delta` with wrap;
+        null when every option is disabled. */
+    seek(start, delta, count) {
+        for (let i = start, n = 0; n < count; n++, i += delta) {
+            const index = (i + count) % count;
+            if (!this.isDisabled(index))
+                return index;
+        }
+        return null;
+    }
     step(current, delta, count) {
-        const next = current + delta;
         if (this.wrap)
-            return (next + count) % count;
-        return Math.min(Math.max(next, 0), count - 1);
+            return this.seek((current + delta + count) % count, delta, count);
+        // Clamped: walk toward the boundary only; no enabled candidate → hold position.
+        const from = Math.min(Math.max(current + delta, 0), count - 1);
+        for (let i = from; i >= 0 && i < count; i += delta) {
+            if (!this.isDisabled(i))
+                return i;
+        }
+        return current >= 0 && !this.isDisabled(current) ? current : null;
     }
     /** Close when focus leaves the control entirely (not on internal moves). */
     closeOnFocusOut(event) {
@@ -499,29 +516,59 @@ function anchorStyles(anchor, placement, offset = {}) {
     }
     return styles;
 }
+/**
+ * The half of the arrow square kept by `clip-path`, in the square's local
+ * (pre-rotation) coordinates: the outer triangle, cut exactly on the
+ * panel-edge diagonal. Without the clip, the two bordered edges run the full
+ * square and their strokes visibly cut into the panel surface. The diagonal
+ * cut ends the strokes precisely at the panel edge, and the panel's own
+ * border line — which sits just *outside* that edge — falls inside the kept
+ * half, so the arrow background covers it and the base reads as an opening.
+ * Keyed by the side of the anchor the panel sits on.
+ *
+ * A positive `overlap` extends the kept half past the diagonal INTO the
+ * panel — only for borderless arrows that want anti-aliasing insurance along
+ * the base; on a bordered arrow it turns the stroke ends into visible stubs
+ * inside the panel body.
+ */
+const ARROW_CLIP = {
+    // Arrow at the panel's top edge, borders top + left → keep the top-left half.
+    bottom: (d) => `polygon(0 0, ${past(d)} 0, 0 ${past(d)})`,
+    // Arrow at the panel's bottom edge, borders right + bottom.
+    top: (d) => `polygon(${before(d)} 100%, 100% ${before(d)}, 100% 100%)`,
+    // Arrow at the panel's right edge, borders right + top.
+    left: (d) => `polygon(${before(d)} 0, 100% 0, 100% ${past(d)})`,
+    // Arrow at the panel's left edge, borders left + bottom.
+    right: (d) => `polygon(0 ${before(d)}, ${past(d)} 100%, 0 100%)`,
+};
+const past = (d) => (d ? `calc(100% + ${d}px)` : '100%');
+const before = (d) => (d ? `calc(0% - ${d}px)` : '0');
 /**
  * Absolute positioning for a rotated-square arrow sitting on the panel edge
  * that faces the anchor. Static per placement: if the browser flips the panel
  * via position-try, the arrow stays on the configured side (cosmetic-only
  * degradation, matching the flip-support caveat above).
+ *
+ * `overlap` (default 0 — cut exactly on the panel edge) extends the kept half
+ * into the panel; see {@link ARROW_CLIP} for when that is ever wanted.
  */
-function anchorArrowStyles(placement, size = 8) {
+function anchorArrowStyles(placement, size = 8, overlap = 0) {
     const [side, align] = placement.split('-');
-    const overlap = -(size / 2);
     const styles = {
         position: 'absolute',
         width: size,
         height: size,
         transform: 'rotate(45deg)',
+        clipPath: ARROW_CLIP[side](overlap),
     };
-    // Edge facing the anchor
+    // Edge facing the anchor: half the square pokes out past the panel edge
     const facing = {
         top: 'bottom',
         bottom: 'top',
         left: 'right',
         right: 'left',
     };
-    styles[facing[side]] = overlap;
+    styles[facing[side]] = -(size / 2);
     // Cross-axis position along that edge
     const horizontal = side === 'top' || side === 'bottom';
     const crossProp = horizontal ? 'left' : 'top';
@@ -537,6 +584,147 @@ function anchorArrowStyles(placement, size = 8) {
     }
     return styles;
 }
+/**
+ * Scrim pieces that cut a spotlight hole around the element carrying
+ * `anchor-name: <anchor>`. Every inset is `calc(anchor(<side>) ± px)`, so the
+ * browser tracks the target through scroll/resize/layout with zero listeners.
+ *
+ * The window paints everything: its `border` is the focus ring and its huge
+ * spread shadow is the scrim (an outer shadow of a rounded rect covers the
+ * whole viewport except the rect, rounded corners included). It is
+ * click-through; the four strips do the click-blocking, and the optional
+ * cover blocks the hole itself. Callers append these to a fixed, transparent,
+ * `pointer-events: none` full-viewport container (each piece is
+ * `position: fixed`).
+ */
+function spotlightStyles(anchor, options = {}) {
+    const pad = options.pad ?? 6;
+    const ringWidth = options.ringWidth ?? 2;
+    const scrimColor = options.scrimColor ?? 'rgba(0, 0, 0, 0.45)';
+    const holeInset = (extra) => Object.fromEntries(['top', 'left', 'right', 'bottom'].map((side) => [
+        side,
+        `calc(anchor(${side}) - ${pad + extra}px)`,
+    ]));
+    const piece = { position: 'fixed', positionAnchor: anchor };
+    const blocker = { ...piece, pointerEvents: 'auto', background: 'transparent' };
+    return {
+        window: {
+            ...piece,
+            ...holeInset(ringWidth), // the ring sits outside the padded hole
+            pointerEvents: 'none',
+            borderWidth: ringWidth,
+            borderStyle: 'solid',
+            boxShadow: `0 0 0 200vmax ${scrimColor}`,
+        },
+        strips: {
+            top: { ...blocker, top: 0, left: 0, right: 0, bottom: `calc(anchor(top) + ${pad}px)` },
+            bottom: { ...blocker, bottom: 0, left: 0, right: 0, top: `calc(anchor(bottom) + ${pad}px)` },
+            left: {
+                ...blocker,
+                left: 0,
+                right: `calc(anchor(left) + ${pad}px)`,
+                top: `calc(anchor(top) - ${pad}px)`,
+                bottom: `calc(anchor(bottom) - ${pad}px)`,
+            },
+            right: {
+                ...blocker,
+                right: 0,
+                left: `calc(anchor(right) + ${pad}px)`,
+                top: `calc(anchor(top) - ${pad}px)`,
+                bottom: `calc(anchor(bottom) - ${pad}px)`,
+            },
+        },
+        cover: { ...blocker, ...holeInset(0) },
+    };
+}
+
+/**
+ * Shared plumbing for top-layer overlays built on the native `popover`
+ * attribute (dropdown, popover, callout). Pure functions and data — no DOM
+ * ownership — so each component keeps its own template while the anchor
+ * bookkeeping, discrete-transition block, and focus-restore rule stay single-
+ * sourced.
+ */
+/** Placement → `transform-origin`, so scale animations grow from the anchor. */
+const TRANSFORM_ORIGINS = {
+    top: 'bottom center',
+    right: 'center left',
+    bottom: 'top center',
+    left: 'center right',
+    'top-start': 'bottom left',
+    'top-end': 'bottom right',
+    'right-start': 'top left',
+    'right-end': 'bottom left',
+    'bottom-start': 'top left',
+    'bottom-end': 'top right',
+    'left-start': 'top right',
+    'left-end': 'bottom right',
+};
+/** Write a CSS `anchor-name` onto an element (detached anchors and targets). */
+function setAnchorName(el, name) {
+    el.style.setProperty('anchor-name', name);
+}
+function clearAnchorName(el) {
+    el.style.removeProperty('anchor-name');
+}
+/**
+ * Resolve an element-or-id reference. Id strings are looked up at call time —
+ * never cache the result across opens, the element may have been re-rendered.
+ * `''` and null-ish mean "unset" (falsy guard: an empty string is the only
+ * typeable empty for a string-typed input).
+ */
+function resolveElement(ref) {
+    if (!ref)
+        return null;
+    return typeof ref === 'string' ? document.getElementById(ref) : ref;
+}
+/** True when a native `toggle` event reports the overlay opening. */
+function isToggleOpen(event) {
+    return event.newState === 'open';
+}
+/**
+ * The discrete-transition block that animates an element into and out of the
+ * top layer: `transition-behavior: allow-discrete` over the `hidden` keys plus
+ * `display`/`overlay`, the shown state under `:popover-open`, and
+ * `@starting-style` so entry transitions run from the hidden state.
+ */
+function discreteOverlayTransition(durationMs, hidden, shown) {
+    return {
+        transitionProperty: [...Object.keys(hidden), 'display', 'overlay']
+            .map((key) => key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`))
+            .join(', '),
+        transitionDuration: `${durationMs}ms`,
+        transitionBehavior: 'allow-discrete',
+        ...hidden,
+        '&:popover-open': shown,
+        '@starting-style': {
+            '&:popover-open': hidden,
+        },
+    };
+}
+/**
+ * Returns focus to `target` when an overlay closes while focus was inside its
+ * panel (or was dropped on `<body>` by the top layer closing), so keyboard
+ * users are never stranded (WCAG 2.4.3). Focus resting anywhere else is left
+ * alone.
+ */
+function restoreOverlayFocus(panel, target) {
+    const active = document.activeElement;
+    if (active === document.body || (active && panel.contains(active))) {
+        target?.focus();
+    }
+}
+/**
+ * The focusable elements inside `root`, in DOM order. Filters disabled
+ * controls, and hidden ones where the environment can tell: jsdom reports
+ * `offsetParent` as null for every element, so the visibility filter applies
+ * only when the document actually lays out (some element has an offsetParent).
+ */
+function focusableElements(root) {
+    const all = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => !el.disabled);
+    const laidOut = all.some((el) => el.offsetParent !== null);
+    return laidOut ? all.filter((el) => el.offsetParent !== null) : all;
+}
 
 class UniBaseDatasource {
     selections = signal([], ...(ngDevMode ? [{ debugName: "selections" }] : /* istanbul ignore next */ []));
@@ -3079,6 +3267,389 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-calendar, Calendar', imports: [UniIconButtonComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'calendar' }], host: { '[class]': 'className()', '(focusout)': 'onHostFocusOut($event)' }, template: "<div [class]=\"navClass()\">\n  <button\n    icon-button\n    type=\"button\"\n    size=\"sm\"\n    [symbolName]=\"componentOptions().navPrevSymbol ?? 'chevron_left'\"\n    [disable]=\"disabled()\"\n    (click)=\"onNav(-1)\"\n  >\n    Previous month\n  </button>\n  <!-- aria-live so PageUp/Down narrates the new month without refocusing. -->\n  <div [class]=\"headingClass()\" [id]=\"headingId\" aria-live=\"polite\">{{ heading() }}</div>\n  <button\n    icon-button\n    type=\"button\"\n    size=\"sm\"\n    [symbolName]=\"componentOptions().navNextSymbol ?? 'chevron_right'\"\n    [disable]=\"disabled()\"\n    (click)=\"onNav(1)\"\n  >\n    Next month\n  </button>\n</div>\n\n<!-- One tab stop: the roving tabindex lives on the day buttons, and the grid\n     itself only relays their bubbling keys (same delegation as tag-input). -->\n<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n<div\n  role=\"grid\"\n  [class]=\"gridClass()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabel() ? null : headingId\"\n  [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-required]=\"required() ? true : null\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <div role=\"row\" [class]=\"rowClass()\">\n    @for (weekday of weekdays(); track weekday.full) {\n      <div role=\"columnheader\" [class]=\"weekdayClass()\">\n        <abbr [attr.title]=\"weekday.full\">{{ weekday.label }}</abbr>\n      </div>\n    }\n  </div>\n\n  @for (week of gridWeeks(); track week[0].date) {\n    <div role=\"row\" [class]=\"rowClass()\">\n      @for (cell of week; track cell.date) {\n        @if (cell.outside) {\n          <!-- Outside days: hidden placeholders by default (geometry kept),\n               muted and non-interactive under the showOutsideDays option. -->\n          <div role=\"gridcell\" aria-hidden=\"true\" [class]=\"cell.cellClass\">\n            @if (showOutside()) {\n              <span [class]=\"outsideDayClass()\">{{ cell.day }}</span>\n            }\n          </div>\n        } @else {\n          <div\n            role=\"gridcell\"\n            [class]=\"cell.cellClass\"\n            [attr.aria-selected]=\"cell.selected || cell.inBand ? true : null\"\n          >\n            <button\n              type=\"button\"\n              [class]=\"cell.dayClass\"\n              [attr.data-date]=\"cell.date\"\n              [tabindex]=\"cell.tabIndex\"\n              [attr.aria-label]=\"cell.ariaLabel\"\n              [attr.aria-current]=\"cell.today ? 'date' : null\"\n              [disabled]=\"cell.disabled || disabled()\"\n              (click)=\"select(cell.date)\"\n              (mouseenter)=\"onDayHover(cell.date)\"\n            >\n              {{ cell.day }}\n              @if (cell.markers.length) {\n                <span [class]=\"dotsClass()\">\n                  @for (marker of cell.markers; track $index) {\n                    <span data-dot [class]=\"dotClassFor(marker.variant)\"></span>\n                  }\n                </span>\n              }\n            </button>\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n\n<!-- Selections and range progress are otherwise silent for a screen reader. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }, { type: i0.Output, args: ["monthChange"] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
+/**
+ * Anchored coach-mark panel that dims the page and cuts a spotlight hole
+ * around its target. Both the scrim and the panel are `popover="manual"`
+ * elements shown in order, so they stack deterministically in the top layer
+ * above every app z-index, and every scrim piece is CSS-anchor-positioned to
+ * the target — the hole tracks scroll/resize/layout with zero listeners.
+ *
+ * The panel is a non-modal `role="dialog"` (deliberately no `aria-modal`):
+ * focus moves into it on open, Tab runs a "duet loop" over the panel's
+ * focusables plus the spotlit target while it stays interactive, and on close
+ * focus returns to the pre-open element — unless the user moved into the
+ * target, where it stays.
+ *
+ * Storage-free by rule: `key` and the `dismissed` output are the "don't show
+ * again" hooks; persistence is the app's business (e.g. cdk local-storage).
+ */
+class UniCalloutComponent extends BaseComponent {
+    destroyRef = inject(DestroyRef);
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Identifies this callout in `dismissed` payloads. Empty string = unset. */
+    key = input(...(ngDevMode ? [undefined, { debugName: "key" }] : /* istanbul ignore next */ []));
+    /** Element (or id, resolved at open time) to spotlight. '' = unset. */
+    target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : /* istanbul ignore next */ []));
+    placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** Defaults to `spotlight` when a target resolves, else `dim`. */
+    backdrop = input(...(ngDevMode ? [undefined, { debugName: "backdrop" }] : /* istanbul ignore next */ []));
+    /** When false, a transparent cover blocks the spotlit target. */
+    targetInteractive = input(true, ...(ngDevMode ? [{ debugName: "targetInteractive" }] : /* istanbul ignore next */ []));
+    /** Gates Escape and the close button. */
+    dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    /** When true, scrim clicks close (reason `backdrop`); else the panel pulses. */
+    dismissOnBackdrop = input(false, ...(ngDevMode ? [{ debugName: "dismissOnBackdrop" }] : /* istanbul ignore next */ []));
+    header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
+    arrow = input(true, ...(ngDevMode ? [{ debugName: "arrow" }] : /* istanbul ignore next */ []));
+    /** Wins over the header/body labelling; the tour sets "{title}, step n of N". */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the dismiss button (the tour passes its skip label). */
+    closeLabel = input('Close', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    opened = output();
+    closed = output();
+    dismissed = output();
+    /** Keys pressed while focus is inside the panel (the tour's arrow-key hook). */
+    panelKeydown = output();
+    panelId = uniqueId('uni-callout');
+    headerId = uniqueId('uni-callout-header');
+    bodyId = uniqueId('uni-callout-body');
+    anchorName = newAnchorName();
+    showing = signal(false, ...(ngDevMode ? [{ debugName: "showing" }] : /* istanbul ignore next */ []));
+    activeTarget = signal(null, ...(ngDevMode ? [{ debugName: "activeTarget" }] : /* istanbul ignore next */ []));
+    scrimShown = signal(false, ...(ngDevMode ? [{ debugName: "scrimShown" }] : /* istanbul ignore next */ []));
+    /**
+     * Keeps the spotlight pieces rendered and the panel anchored through the
+     * close fade — tearing the anchor down at close time made the panel jump
+     * and the scrim vanish mid-transition.
+     */
+    scrimContent = signal(false, ...(ngDevMode ? [{ debugName: "scrimContent" }] : /* istanbul ignore next */ []));
+    pendingTeardown = null;
+    prevFocus = null;
+    detachKeydown = null;
+    stripSides = ['top', 'bottom', 'left', 'right'];
+    scrimRef = viewChild.required('scrim');
+    panelRef = viewChild.required('panel');
+    actionsRef = viewChild.required('actions');
+    constructor() {
+        super();
+        effect(() => {
+            const want = this.open();
+            if (want === untracked(this.showing))
+                return;
+            if (want)
+                this.show();
+            else
+                this.close('programmatic');
+        });
+        // Re-seat an open callout when its target or backdrop changes (a tour
+        // stepping) instead of closing and reopening — the panel stays up, the
+        // original pre-open focus is preserved for the eventual close, and the
+        // duet loop re-seats onto the new step's content.
+        effect(() => {
+            const ref = this.target();
+            this.backdrop();
+            if (!untracked(this.showing))
+                return;
+            untracked(() => this.retarget(resolveElement(ref)));
+        });
+        this.destroyRef.onDestroy(() => {
+            this.detachKeydown?.();
+            if (this.pendingTeardown)
+                clearTimeout(this.pendingTeardown);
+            const target = untracked(this.activeTarget);
+            if (target)
+                clearAnchorName(target);
+            for (const ref of [this.panelRef, this.scrimRef]) {
+                try {
+                    ref().nativeElement.hidePopover();
+                }
+                catch {
+                    // popover was already closed or detached
+                }
+            }
+        });
+    }
+    effectiveBackdrop = computed(() => this.backdrop() ?? (this.activeTarget() ? 'spotlight' : 'dim'), ...(ngDevMode ? [{ debugName: "effectiveBackdrop" }] : /* istanbul ignore next */ []));
+    show() {
+        if (this.showing())
+            return;
+        if (this.pendingTeardown) {
+            clearTimeout(this.pendingTeardown);
+            this.pendingTeardown = null;
+        }
+        const target = resolveElement(this.target());
+        const stale = this.activeTarget();
+        if (stale && stale !== target)
+            clearAnchorName(stale); // a close was mid-fade
+        this.activeTarget.set(target);
+        this.scrimContent.set(true);
+        this.prevFocus = document.activeElement;
+        // Anchor insets need the target on screen before the scrim paints; the
+        // hole then tracks any further movement natively.
+        target?.scrollIntoView?.({ block: 'center', behavior: 'instant' });
+        if (target)
+            setAnchorName(target, this.anchorName);
+        // Scrim first, panel second: top-layer order is stacking order.
+        if ((this.backdrop() ?? (target ? 'spotlight' : 'dim')) !== 'none') {
+            this.scrimRef().nativeElement.showPopover();
+            this.scrimShown.set(true);
+        }
+        this.panelRef().nativeElement.showPopover();
+        const onKeydown = (event) => this.onKeydown(event);
+        document.addEventListener('keydown', onKeydown, true);
+        this.detachKeydown = () => {
+            document.removeEventListener('keydown', onKeydown, true);
+            this.detachKeydown = null;
+        };
+        this.showing.set(true);
+        this.open.set(true);
+        this.focusInitial();
+        this.opened.emit();
+    }
+    close(reason) {
+        if (!this.showing())
+            return;
+        this.detachKeydown?.();
+        const target = this.activeTarget();
+        const active = document.activeElement;
+        const focusInTarget = !!target && (target === active || target.contains(active));
+        for (const ref of [this.panelRef, this.scrimRef]) {
+            try {
+                ref().nativeElement.hidePopover();
+            }
+            catch {
+                // scrim may not have been shown (backdrop="none")
+            }
+        }
+        this.showing.set(false);
+        this.scrimShown.set(false);
+        this.open.set(false);
+        // The close fade is still running: the panel must stay anchored and the
+        // spotlight pieces rendered until it finishes, or everything jumps.
+        this.pendingTeardown = setTimeout(() => {
+            this.pendingTeardown = null;
+            if (target)
+                clearAnchorName(target);
+            this.activeTarget.set(null);
+            this.scrimContent.set(false);
+        }, this.componentOptions().transitionMs);
+        // The duet loop may have sent the user into the target on purpose — don't
+        // yank them back out of it.
+        if (!focusInTarget && this.prevFocus && document.contains(this.prevFocus)) {
+            this.prevFocus.focus();
+        }
+        this.dismissed.emit({ key: this.key() || undefined, reason });
+        this.closed.emit();
+    }
+    /** Move an open callout to a new target without a close/open round trip. */
+    retarget(target) {
+        const prev = this.activeTarget();
+        if (prev && prev !== target)
+            clearAnchorName(prev);
+        target?.scrollIntoView?.({ block: 'center', behavior: 'instant' });
+        if (target)
+            setAnchorName(target, this.anchorName);
+        this.activeTarget.set(target);
+        const wantScrim = (this.backdrop() ?? (target ? 'spotlight' : 'dim')) !== 'none';
+        if (wantScrim !== this.scrimShown()) {
+            const scrim = this.scrimRef().nativeElement;
+            const panel = this.panelRef().nativeElement;
+            try {
+                if (wantScrim) {
+                    // Top-layer order is stacking order: re-show the panel above the
+                    // late-arriving scrim.
+                    scrim.showPopover();
+                    panel.hidePopover();
+                    panel.showPopover();
+                }
+                else {
+                    scrim.hidePopover();
+                }
+            }
+            catch {
+                // a piece was already in the requested state
+            }
+            this.scrimShown.set(wantScrim);
+        }
+        this.focusInitial();
+    }
+    /** `[autofocus]` → first action → first panel focusable → the panel itself. */
+    focusInitial() {
+        const panel = this.panelRef().nativeElement;
+        const first = panel.querySelector('[autofocus]') ??
+            focusableElements(this.actionsRef().nativeElement)[0] ??
+            focusableElements(panel)[0] ??
+            panel;
+        first.focus({ preventScroll: true });
+    }
+    /**
+     * Capture phase so Escape works from inside the spotlit target and the tab
+     * loop preempts the page. Non-Tab keys surface through `panelKeydown`.
+     */
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            if (this.dismissible()) {
+                event.preventDefault();
+                this.close('escape');
+            }
+            return;
+        }
+        if (event.key !== 'Tab') {
+            if (this.panelRef().nativeElement.contains(document.activeElement)) {
+                this.panelKeydown.emit(event);
+            }
+            return;
+        }
+        if (this.effectiveBackdrop() === 'none')
+            return; // nothing is blocked — tab naturally
+        // Duet loop: panel focusables plus the interactive target.
+        const loop = focusableElements(this.panelRef().nativeElement);
+        const target = this.activeTarget();
+        if (target && this.targetInteractive())
+            loop.push(target);
+        if (!loop.length)
+            return;
+        const index = loop.indexOf(document.activeElement);
+        event.preventDefault();
+        const next = event.shiftKey
+            ? loop[(index <= 0 ? loop.length : index) - 1]
+            : loop[(index + 1) % loop.length];
+        next.focus();
+    }
+    /** A stray click shouldn't kill onboarding: nudge the panel instead. */
+    onBackdropClick() {
+        if (this.dismissOnBackdrop()) {
+            this.close('backdrop');
+            return;
+        }
+        try {
+            if (matchMedia('(prefers-reduced-motion: reduce)').matches)
+                return;
+            this.panelRef().nativeElement.animate?.([
+                { translate: '0 0' },
+                { translate: '0 -3px', offset: 0.3 },
+                { translate: '0 2px', offset: 0.6 },
+                { translate: '0 0' },
+            ], { duration: 400, easing: 'ease' });
+        }
+        catch {
+            // animation is decoration; environments without WAAPI just skip it
+        }
+    }
+    // --- styling --------------------------------------------------------------
+    spotlight = computed(() => {
+        const options = this.componentOptions();
+        return spotlightStyles(this.anchorName, {
+            pad: options.spotlightPadding,
+            ringWidth: options.ringWidth,
+            scrimColor: options.scrimColor,
+        });
+    }, ...(ngDevMode ? [{ debugName: "spotlight" }] : /* istanbul ignore next */ []));
+    scrimClassName = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            position: 'fixed',
+            inset: 0,
+            width: '100%',
+            height: '100%',
+            margin: 0,
+            border: 0,
+            padding: 0,
+            background: 'transparent',
+            overflow: 'visible',
+            pointerEvents: 'none',
+            '& > *': { position: 'fixed' },
+            ...discreteOverlayTransition(options.transitionMs, { opacity: 0 }, { opacity: 1 }),
+        });
+    }, ...(ngDevMode ? [{ debugName: "scrimClassName" }] : /* istanbul ignore next */ []));
+    windowClassName = computed(() => {
+        const ring = this.theme.colorPalette()[this.variant()] ?? this.theme.colorPalette()['primary'];
+        return css({
+            ...this.spotlight().window,
+            ...this.theme.radius(this.componentOptions().spotlightRadius),
+            borderColor: ring,
+        });
+    }, ...(ngDevMode ? [{ debugName: "windowClassName" }] : /* istanbul ignore next */ []));
+    stripClassName(side) {
+        return css(this.spotlight().strips[side]);
+    }
+    coverClassName = computed(() => css(this.spotlight().cover), ...(ngDevMode ? [{ debugName: "coverClassName" }] : /* istanbul ignore next */ []));
+    fullCoverClassName = computed(() => css({
+        inset: 0,
+        background: this.componentOptions().scrimColor,
+        pointerEvents: 'auto',
+    }), ...(ngDevMode ? [{ debugName: "fullCoverClassName" }] : /* istanbul ignore next */ []));
+    panelClassName = computed(() => {
+        const options = this.componentOptions();
+        const anchored = this.activeTarget() !== null;
+        return css({
+            ...this.theme.colorPair(options.color),
+            ...this.theme.radius(options.borderRadius),
+            ...this.theme.boxShadow(options.shadow),
+            ...this.theme.typeface(options.typeface),
+            width: options.width,
+            maxWidth: 'calc(100vw - 32px)',
+            padding: 0,
+            border: 0,
+            overflow: 'visible',
+            // A target-less panel keeps the popover UA styles (inset:0 + margin:auto)
+            // and centers in the viewport; anchorStyles resets them for anchoring.
+            ...(anchored
+                ? anchorStyles(this.anchorName, this.placement(), {
+                    mainAxis: options.offset + options.spotlightPadding,
+                })
+                : {}),
+            ...discreteOverlayTransition(options.transitionMs, { opacity: 0, translate: '0 6px' }, { opacity: 1, translate: '0 0' }),
+        });
+    }, ...(ngDevMode ? [{ debugName: "panelClassName" }] : /* istanbul ignore next */ []));
+    headRowClassName = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: options.padding,
+            paddingBottom: 0,
+            '&:not(:has(*))': { display: 'none' },
+        });
+    }, ...(ngDevMode ? [{ debugName: "headRowClassName" }] : /* istanbul ignore next */ []));
+    titleClassName = computed(() => css({ ...this.theme.typeface(this.componentOptions().headerTypeface), marginRight: 'auto' }), ...(ngDevMode ? [{ debugName: "titleClassName" }] : /* istanbul ignore next */ []));
+    bodyClassName = computed(() => {
+        const options = this.componentOptions();
+        return css({ padding: options.padding, paddingTop: 6, paddingBottom: 12, '&:empty': { display: 'none' } });
+    }, ...(ngDevMode ? [{ debugName: "bodyClassName" }] : /* istanbul ignore next */ []));
+    actionsRowClassName = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: options.padding,
+            paddingTop: 0,
+            '&:not(:has(*))': { display: 'none' },
+        });
+    }, ...(ngDevMode ? [{ debugName: "actionsRowClassName" }] : /* istanbul ignore next */ []));
+    arrowClassName = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            ...this.theme.colorPair(options.color),
+            ...anchorArrowStyles(this.placement(), options.arrowSize),
+        });
+    }, ...(ngDevMode ? [{ debugName: "arrowClassName" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniCalloutComponent, isStandalone: true, selector: "uni-callout", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, targetInteractive: { classPropertyName: "targetInteractive", publicName: "targetInteractive", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissOnBackdrop: { classPropertyName: "dismissOnBackdrop", publicName: "dismissOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed", dismissed: "dismissed", panelKeydown: "panelKeydown" }, providers: [{ provide: COMPONENT_NAME, useValue: 'callout' }], viewQueries: [{ propertyName: "scrimRef", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "actionsRef", first: true, predicate: ["actions"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Scrim first: top-layer order is stacking order, so the panel always sits\n     above it. Strips and cover are pointer-blockers only; the keyboard path\n     is the duet loop on the document keydown handler. -->\n<div #scrim popover=\"manual\" [class]=\"scrimClassName()\">\n  @if (scrimContent()) {\n    @if (effectiveBackdrop() === 'spotlight' && activeTarget()) {\n      <div [class]=\"windowClassName()\"></div>\n      @for (side of stripSides; track side) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <div [class]=\"stripClassName(side)\" (click)=\"onBackdropClick()\"></div>\n      }\n      @if (!targetInteractive()) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <div [class]=\"coverClassName()\" (click)=\"onBackdropClick()\"></div>\n      }\n    } @else if (effectiveBackdrop() === 'dim') {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n      <div [class]=\"fullCoverClassName()\" (click)=\"onBackdropClick()\"></div>\n    }\n  }\n</div>\n<div\n  #panel\n  popover=\"manual\"\n  role=\"dialog\"\n  tabindex=\"-1\"\n  [id]=\"panelId\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-labelledby]=\"ariaLabel() ? null : header() ? headerId : bodyId\"\n  [class]=\"panelClassName()\"\n>\n  <ng-content select=\"[callout-media]\"></ng-content>\n  <div [class]=\"headRowClassName()\">\n    <ng-content select=\"[callout-header]\"></ng-content>\n    @if (header()) {\n      <span [id]=\"headerId\" [class]=\"titleClassName()\">{{ header() }}</span>\n    }\n    @if (dismissible()) {\n      <button\n        icon-button\n        [iconName]=\"componentOptions().closeSymbol\"\n        variant=\"ghost\"\n        size=\"sm\"\n        (click)=\"close('close-button')\"\n      >\n        {{ closeLabel() }}\n      </button>\n    }\n  </div>\n  <div [id]=\"bodyId\" [class]=\"bodyClassName()\"><ng-content></ng-content></div>\n  <div #actions [class]=\"actionsRowClassName()\"><ng-content select=\"[callout-actions]\"></ng-content></div>\n  @if (arrow() && activeTarget()) {\n    <span [class]=\"arrowClassName()\"></span>\n  }\n</div>\n", dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCalloutComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-callout', imports: [UniIconButtonComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'callout' }], template: "<!-- Scrim first: top-layer order is stacking order, so the panel always sits\n     above it. Strips and cover are pointer-blockers only; the keyboard path\n     is the duet loop on the document keydown handler. -->\n<div #scrim popover=\"manual\" [class]=\"scrimClassName()\">\n  @if (scrimContent()) {\n    @if (effectiveBackdrop() === 'spotlight' && activeTarget()) {\n      <div [class]=\"windowClassName()\"></div>\n      @for (side of stripSides; track side) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <div [class]=\"stripClassName(side)\" (click)=\"onBackdropClick()\"></div>\n      }\n      @if (!targetInteractive()) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <div [class]=\"coverClassName()\" (click)=\"onBackdropClick()\"></div>\n      }\n    } @else if (effectiveBackdrop() === 'dim') {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n      <div [class]=\"fullCoverClassName()\" (click)=\"onBackdropClick()\"></div>\n    }\n  }\n</div>\n<div\n  #panel\n  popover=\"manual\"\n  role=\"dialog\"\n  tabindex=\"-1\"\n  [id]=\"panelId\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-labelledby]=\"ariaLabel() ? null : header() ? headerId : bodyId\"\n  [class]=\"panelClassName()\"\n>\n  <ng-content select=\"[callout-media]\"></ng-content>\n  <div [class]=\"headRowClassName()\">\n    <ng-content select=\"[callout-header]\"></ng-content>\n    @if (header()) {\n      <span [id]=\"headerId\" [class]=\"titleClassName()\">{{ header() }}</span>\n    }\n    @if (dismissible()) {\n      <button\n        icon-button\n        [iconName]=\"componentOptions().closeSymbol\"\n        variant=\"ghost\"\n        size=\"sm\"\n        (click)=\"close('close-button')\"\n      >\n        {{ closeLabel() }}\n      </button>\n    }\n  </div>\n  <div [id]=\"bodyId\" [class]=\"bodyClassName()\"><ng-content></ng-content></div>\n  <div #actions [class]=\"actionsRowClassName()\"><ng-content select=\"[callout-actions]\"></ng-content></div>\n  @if (arrow() && activeTarget()) {\n    <span [class]=\"arrowClassName()\"></span>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], targetInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetInteractive", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissOnBackdrop", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], panelKeydown: [{ type: i0.Output, args: ["panelKeydown"] }], scrimRef: [{ type: i0.ViewChild, args: ['scrim', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], actionsRef: [{ type: i0.ViewChild, args: ['actions', { isSignal: true }] }] } });
+
+/**
+ * UniCalloutComponent Barrel File
+ *
+ * This file exports all public-facing elements of the callout component.
+ */
+
 class UniCardContentComponent extends BaseComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniCardContentComponent, isStandalone: true, selector: "uni-card-content", providers: [{ provide: COMPONENT_NAME, useValue: 'cardContent' }], usesInheritance: true, ngImport: i0, template: "<div [style]=\"style()\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -3342,6 +3913,525 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ selector: 'uni-checkbox', imports: [UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'checkbox' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [class]=\"checkboxLabel()\">\n  <input\n    type=\"checkbox\"\n    [class]=\"checkboxInput()\"\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"checkbox\">\n    <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <rect class=\"checkbox-box\" x=\"1\" y=\"1\" width=\"18\" height=\"18\"></rect>\n      <polyline class=\"checkbox-check\" points=\"4 11 8 15 16 6\"></polyline>\n      <line class=\"checkbox-dash\" x1=\"5\" y1=\"10\" x2=\"15\" y2=\"10\"></line>\n    </svg>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n" }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }] } });
 
+/**
+ * Style block for the popup behind every `ListboxNavigation` consumer: an
+ * absolutely-positioned `ul[role="listbox"]` under a `position: relative`
+ * field wrapper, with the shared option chrome and active/hover highlight.
+ *
+ * Extracted because four components (`uni-search-input`, `uni-tag-input`,
+ * `uni-time-input`, `uni-combobox`) carried hand-rolled copies, and the parts
+ * that silently drift between copies all live here: the surface/elevation
+ * trio, and the `activeColor` pair that themes re-point when their container
+ * tokens don't contrast (see the Wellsourced overrides).
+ *
+ * Compose extras with the array form — `css([listboxPopupStyles(…), {…}])` —
+ * so a component's own `& [role="option"]` block cascades after this one
+ * instead of replacing it (an object spread would overwrite the key).
+ */
+const listboxPopupStyles = (theme, options, { maxHeight = 280 } = {}) => ({
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    right: 0,
+    zIndex: 20,
+    margin: '4px 0 0',
+    padding: 4,
+    listStyle: 'none',
+    maxHeight,
+    overflowY: 'auto',
+    ...theme.colorPair((options.listColor ?? 'primary-surface')),
+    ...theme.boxShadow(options.listShadow ?? 'menu'),
+    ...theme.radius(options.listBorderRadius ?? 'xs'),
+    '& [role="option"]': {
+        padding: '8px 12px',
+        cursor: 'pointer',
+        ...theme.typeface('label'),
+        ...theme.radius('xxs'),
+        '&.active, &:not([aria-disabled="true"]):hover': {
+            ...theme.colorPair((options.activeColor ?? 'primary-container')),
+        },
+    },
+});
+
+class UniInputBoxComponent extends BaseComponent {
+    className = css({ display: 'contents' });
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    minWidth = input('0', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    /** Override the themed field height, e.g. `'auto'` for multi-line fields. */
+    height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    color = computed(() => this.error() ? this.componentOptions().errorColor : this.componentOptions().color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    border = computed(() => this.error() ? this.componentOptions().errorBorder : this.componentOptions().border, ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
+    shadow = computed(() => this.error() ? this.componentOptions().errorShadow : this.componentOptions().shadow, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
+    inputBoxClass = computed(() => css([
+        this.disabled() && {
+            ...this.theme.color(this.componentOptions().disabledTextColor),
+            ...this.theme.backgroundColor(this.componentOptions().disabledColor),
+            cursor: 'not-allowed !important',
+        },
+        {
+            '& input, select, textarea': {
+                ...removeInputPlatformStyling,
+                height: '100%',
+                ...this.theme.paddingLeft(this.componentOptions().paddingLeft),
+                ...this.theme.color(this.componentOptions().textColor),
+                // `typeFace` is the deprecated casing; themes that still set it win
+                // only when the canonical key is absent.
+                ...this.theme.typeface(this.componentOptions().typeface ?? this.componentOptions().typeFace),
+            },
+            // Multi-line fields size themselves (rows/resize), not from the box.
+            '& textarea': {
+                height: 'auto',
+                ...this.theme.paddingTop('xs'),
+                ...this.theme.paddingBottom('xs'),
+            },
+            '&:has(input:disabled, select:disabled, textarea:disabled)': {
+                ...this.theme.color(this.componentOptions().disabledTextColor),
+                ...this.theme.backgroundColor(this.componentOptions().disabledColor),
+            },
+            '& input:disabled, select:disabled, textarea:disabled': {
+                cursor: 'not-allowed !important',
+            },
+            '&:has(input:focus, select:focus, textarea:focus)': {
+                outline: this.componentOptions().focusOutline,
+                outlineOffset: this.componentOptions().focusOutlineOffset,
+                // Optional focus chrome (border/ring/background). It yields to the
+                // error state, so a flagged field stays visibly flagged while the
+                // user is in it correcting the value.
+                ...(this.error()
+                    ? {}
+                    : {
+                        ...this.theme.border(this.componentOptions().focusBorder),
+                        ...this.theme.boxShadow(this.componentOptions().focusShadow),
+                        ...this.theme.backgroundColor(this.componentOptions().focusColor),
+                    }),
+            },
+        },
+    ]), ...(ngDevMode ? [{ debugName: "inputBoxClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputBoxComponent, isStandalone: true, selector: "uni-input-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"height() ?? componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-input-box', imports: [UniRowComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"height() ?? componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+/**
+ * Form-bound, closed-set, single-select autocomplete: `FormValueControl<T | null>`
+ * over object `Options<T>`, type-to-filter, commit-on-select. Typing produces a
+ * draft — a filter, never a value; the value changes only when an option
+ * commits, `clear()` runs, or the model is written from outside. Select
+ * semantics, not search: a real label, a chevron, no magnifier, nothing
+ * submits. For short lists with no need to type, prefer `uni-select` — the
+ * value contract is identical, so swapping is a template-only change.
+ */
+class UniComboboxComponent extends BaseComponent {
+    // --- Signal Forms block (explicit per AGENTS.md, not a base class) --------
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    // --- Configuration -------------------------------------------------------
+    /** Accessible name for the field, e.g. "State"; echoed on the listbox. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * Equality used to match `value` against option values, called as
+     * `compareWith(optionValue, value)`. Defaults to reference equality, which
+     * never matches an object value rebuilt from elsewhere (e.g. a saved record
+     * against options from a fresh fetch) — pass a key comparison like
+     * `(a, b) => a?.id === b?.id` for object values.
+     */
+    compareWith = input((a, b) => a === b, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Show a ✕ while a value is set; an emptied field on blur also clears. */
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    /** Blur commits an exact-match draft; a non-matching draft reverts. */
+    commitOnBlur = input(true, ...(ngDevMode ? [{ debugName: "commitOnBlur" }] : /* istanbul ignore next */ []));
+    /** i18n-able empty row, also announced when a filter matches nothing. */
+    emptyText = input('No matches', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    // --- Filtering (local by default — the closed set is already in memory) ---
+    /** `false` renders `options` verbatim; narrow them app-side from `query`. */
+    filterLocally = input(true, ...(ngDevMode ? [{ debugName: "filterLocally" }] : /* istanbul ignore next */ []));
+    /** Filter predicate; default is locale-lowercased label-contains. */
+    filterWith = input(...(ngDevMode ? [undefined, { debugName: "filterWith" }] : /* istanbul ignore next */ []));
+    debounceTime = input(250, ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ []));
+    // --- Events ---------------------------------------------------------------
+    /** Debounced draft text, for async option lists. */
+    query = output();
+    /** An option committed. */
+    selected = output();
+    cleared = output();
+    /** A commit was refused (no match); the field reverted. */
+    rejected = output();
+    host = inject(ElementRef);
+    inputRef = viewChild.required('field');
+    listRef = viewChild('listbox', ...(ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []));
+    /** Cancelled on destroy — a late tick would emit on a destroyed OutputRef. */
+    queryTimer;
+    constructor() {
+        super();
+        inject(DestroyRef).onDestroy(() => clearTimeout(this.queryTimer));
+    }
+    srOnly = css(visuallyHidden);
+    announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    /** null → the field shows the committed label; a string is an uncommitted draft. */
+    draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    /**
+     * Popup visibility. Component-owned rather than `list.open()` — the shared
+     * signal gates on `count() > 0`, which would hide the "No matches" row and
+     * misreport `aria-expanded` over an empty filter.
+     */
+    popupOpen = signal(false, ...(ngDevMode ? [{ debugName: "popupOpen" }] : /* istanbul ignore next */ []));
+    /** Index in options() of the option matching value(), else -1. */
+    committedIndex = computed(() => {
+        const value = this.value();
+        if (value === null || value === undefined)
+            return -1;
+        return this.options().findIndex((option) => this.compareWith()(option.value, value));
+    }, ...(ngDevMode ? [{ debugName: "committedIndex" }] : /* istanbul ignore next */ []));
+    /** A value with no matching option renders '' but is preserved — options may
+        still be loading; the field self-heals when they arrive. */
+    committedLabel = computed(() => {
+        const index = this.committedIndex();
+        return index >= 0 ? this.options()[index].label : '';
+    }, ...(ngDevMode ? [{ debugName: "committedLabel" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => this.draft() ?? this.committedLabel(), ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    /** Indices into options() surviving the filter. The draft filters; the
+        committed label does not — reopening always shows the full set. */
+    filteredIndices = computed(() => {
+        const query = this.draft();
+        const all = this.options().map((_, index) => index);
+        if (!this.filterLocally() || query === null || query === '')
+            return all;
+        const filter = this.filterWith() ??
+            ((option, q) => option.label.toLocaleLowerCase().includes(q.toLocaleLowerCase()));
+        return all.filter((index) => filter(this.options()[index], query));
+    }, ...(ngDevMode ? [{ debugName: "filteredIndices" }] : /* istanbul ignore next */ []));
+    /** Shared combobox bookkeeping, in filtered-list positions — the fourth
+        consumer of the contract behind search-input, tag-input and time-input. */
+    list = createListboxNavigation({
+        count: () => this.filteredIndices().length,
+        idPrefix: 'uni-combobox-listbox',
+        disabled: (position) => !!this.options()[this.filteredIndices()[position]]?.disabled,
+    });
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    // --- Committing ------------------------------------------------------------
+    commit(optIndex) {
+        const option = this.options()[optIndex];
+        if (!option || option.disabled)
+            return false;
+        this.value.set(option.value);
+        this.draft.set(null);
+        this.closeList();
+        this.setFieldText(this.displayValue());
+        this.announce(`${option.label} selected.`);
+        this.selected.emit(option);
+        return true;
+    }
+    clear() {
+        this.value.set(null);
+        this.draft.set(null);
+        this.closeList();
+        this.setFieldText('');
+        this.announce('Selection cleared.');
+        this.cleared.emit();
+        this.inputRef().nativeElement.focus();
+    }
+    /**
+     * Draft resolution, used by Enter, Tab and blur:
+     * 1. an active option in the list → commit it;
+     * 2. else a unique exact label match (locale-case-insensitive) → commit it;
+     * 3. Enter only: the filter narrowed to exactly one enabled option → commit it
+     *    (on Enter the user can see the single candidate; on blur they're gone,
+     *    and committing a value they never saw confirmed is how forms grow
+     *    mystery data);
+     * 4. else the caller keeps the list open (Enter) or reverts (Tab/blur).
+     */
+    resolveDraft(enterOnly) {
+        const filtered = this.filteredIndices();
+        const active = this.list.activeIndex();
+        if (this.popupOpen() && active >= 0 && active < filtered.length) {
+            return this.commit(filtered[active]);
+        }
+        const draft = this.draft();
+        if (draft === null)
+            return true;
+        if (draft === '') {
+            // An emptied field on Tab/blur is a deliberate "no value" — but only
+            // clearable fields may null the model this way.
+            if (this.clearable() && this.value() !== null && !enterOnly) {
+                this.value.set(null);
+                this.announce('Selection cleared.');
+                this.cleared.emit();
+            }
+            this.draft.set(null);
+            this.setFieldText(this.displayValue());
+            return true;
+        }
+        const normalize = (text) => text.toLocaleLowerCase();
+        const exact = this.options()
+            .map((option, index) => ({ option, index }))
+            .filter(({ option }) => !option.disabled && normalize(option.label) === normalize(draft));
+        if (exact.length === 1)
+            return this.commit(exact[0].index);
+        if (enterOnly) {
+            const enabled = filtered.filter((index) => !this.options()[index].disabled);
+            if (enabled.length === 1)
+                return this.commit(enabled[0]);
+        }
+        return false;
+    }
+    revertDraft() {
+        const draft = this.draft();
+        if (draft === null)
+            return null;
+        this.draft.set(null);
+        this.setFieldText(this.displayValue());
+        return draft;
+    }
+    reject() {
+        const query = this.revertDraft();
+        if (query) {
+            this.announce(`No match for “${query}”.`);
+            this.rejected.emit({ query });
+        }
+    }
+    // --- Keyboard --------------------------------------------------------------
+    onKeydown(event) {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (event.altKey) {
+                // Alt+Down opens without activating; Alt+Up closes keeping the draft.
+                if (event.key === 'ArrowDown') {
+                    if (!this.popupOpen())
+                        this.openList(-1);
+                }
+                else {
+                    this.closeList();
+                }
+                return;
+            }
+            if (!this.popupOpen()) {
+                this.popupOpen.set(true);
+                this.list.show();
+                if (event.key === 'ArrowDown') {
+                    const committed = this.committedFilteredPos();
+                    if (committed >= 0) {
+                        this.list.setActive(committed);
+                        this.scrollToActive();
+                        return;
+                    }
+                }
+                // Fall through: Down lands on the first enabled option, Up on the last.
+            }
+            if (this.list.navigate(event))
+                this.scrollToActive();
+            return;
+        }
+        if (event.key === 'Home' || event.key === 'End') {
+            // Only while the list is open — closed, they belong to the caret.
+            if (this.popupOpen() && this.list.navigate(event))
+                this.scrollToActive();
+            return;
+        }
+        switch (event.key) {
+            case 'Enter':
+                // Never submits a form while the list is open.
+                if (this.popupOpen())
+                    event.preventDefault();
+                if (!this.resolveDraft(true)) {
+                    const count = this.filteredIndices().length;
+                    this.announce(count === 0 ? `${this.emptyText()}.` : `${count} results. Use the arrow keys.`);
+                }
+                return;
+            case 'Escape':
+                // One layer at a time: close the list, then revert the draft.
+                // Never clears the committed value — Escape on a form control must
+                // not be destructive.
+                if (this.popupOpen())
+                    this.closeList();
+                else if (this.draft() !== null)
+                    this.revertDraft();
+                return;
+            case 'Tab':
+                // Resolve rules 1–2 (never rule 3), then let focus move on.
+                if (this.commitOnBlur() && !this.resolveDraft(false))
+                    this.reject();
+                this.closeList();
+        }
+    }
+    onInput() {
+        const text = this.inputRef().nativeElement.value;
+        this.draft.set(text);
+        this.popupOpen.set(true);
+        this.list.show();
+        // Typing never selects — rules 2/3 make Enter still work without arrowing.
+        this.list.setActive(-1);
+        clearTimeout(this.queryTimer);
+        this.queryTimer = setTimeout(() => {
+            this.query.emit(text);
+            // Filtering is otherwise silent to a screen reader.
+            if (this.filterLocally() && text !== '') {
+                const count = this.filteredIndices().length;
+                this.announce(count === 0 ? `${this.emptyText()}.` : `${count} result${count === 1 ? '' : 's'}.`);
+            }
+        }, this.debounceTime());
+    }
+    // --- Pointer ---------------------------------------------------------------
+    /** Click-to-browse: pointer users get the select affordance. Focus alone
+        never opens — Tab-through forms must not spray popups. */
+    onFieldClick() {
+        if (this.disabled() || this.popupOpen())
+            return;
+        this.openList(this.committedFilteredPos());
+    }
+    onToggleMousedown(event) {
+        event.preventDefault();
+        if (this.disabled())
+            return;
+        this.inputRef().nativeElement.focus();
+        if (this.popupOpen())
+            this.closeList();
+        else
+            this.openList(this.committedFilteredPos());
+    }
+    onOptionClick(optIndex) {
+        if (this.options()[optIndex]?.disabled)
+            return;
+        this.commit(optIndex);
+        this.inputRef().nativeElement.focus();
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next && this.host.nativeElement.contains(next))
+            return;
+        this.touched.set(true);
+        if (this.commitOnBlur() && !this.resolveDraft(false))
+            this.reject();
+        else
+            this.draft.set(null);
+        this.closeList();
+    }
+    // --- Internals -------------------------------------------------------------
+    /** Filtered position of the committed option when visible and enabled, else -1. */
+    committedFilteredPos() {
+        const committed = this.committedIndex();
+        if (committed < 0 || this.options()[committed].disabled)
+            return -1;
+        return this.filteredIndices().indexOf(committed);
+    }
+    openList(activeFilteredPos) {
+        this.popupOpen.set(true);
+        this.list.show();
+        this.list.setActive(activeFilteredPos);
+        this.scrollToActive();
+    }
+    closeList() {
+        this.popupOpen.set(false);
+        this.list.hide();
+    }
+    scrollToActive() {
+        const position = this.list.activeIndex();
+        if (position < 0)
+            return;
+        queueMicrotask(() => this.listRef()?.nativeElement.children[position]?.scrollIntoView?.({ block: 'nearest' }));
+    }
+    setFieldText(text) {
+        const element = this.inputRef()?.nativeElement;
+        if (element)
+            element.value = text;
+    }
+    announce(message) {
+        // Re-announce identical text by breaking the string equality.
+        this.announcement.set(this.announcement() === message ? `${message} ` : message);
+    }
+    // --- Styling ----------------------------------------------------------------
+    className = computed(() => css({ display: 'block', position: 'relative', width: this.width() }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    rowClass = computed(() => css({ display: 'flex', alignItems: 'center', flex: 1, width: '100%', minWidth: 0 }), ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+    inputClass = computed(() => css({
+        flex: 1,
+        minWidth: 0,
+        border: 0,
+        outline: 'none',
+        background: 'transparent',
+        color: 'inherit',
+        font: 'inherit',
+    }), ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    /** Pointer-only affordance: keyboard already has ArrowDown, and the input
+        itself announces expanded state. */
+    toggleClass = computed(() => css({
+        flex: 'none',
+        width: 28,
+        height: 28,
+        display: 'grid',
+        placeItems: 'center',
+        border: 0,
+        padding: 0,
+        background: 'transparent',
+        cursor: this.disabled() ? 'not-allowed' : 'pointer',
+        ...this.theme.color('on-background-variant'),
+        '& uni-icon': {
+            ...motionSafe({ transition: 'transform 0.15s ease' }),
+            transform: this.popupOpen() ? 'rotate(180deg)' : 'none',
+        },
+    }), ...(ngDevMode ? [{ debugName: "toggleClass" }] : /* istanbul ignore next */ []));
+    listClass = computed(() => {
+        const options = this.componentOptions();
+        return css([
+            listboxPopupStyles(this.theme, options, {
+                // A scroll height, never a cap: a closed-set control must not render a
+                // reachable-by-keyboard-only subset (contrast searchInput.maxSuggestions).
+                maxHeight: (options.maxVisibleOptions ?? 8) * 36 + 8,
+            }),
+            {
+                '& [role="option"]': {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 10,
+                    minHeight: 36,
+                    boxSizing: 'border-box',
+                    padding: '5px 10px',
+                    '&.active, &:not([aria-disabled="true"]):hover': {
+                        '& .check': { color: 'inherit' },
+                        '& .desc': { color: 'inherit', opacity: 0.8 },
+                    },
+                    '&[aria-disabled="true"]': {
+                        ...this.theme.color('on-disabled'),
+                        cursor: 'not-allowed',
+                        '& .desc': { color: 'inherit' },
+                    },
+                },
+                // Fixed-width check column so labels align with or without the icon.
+                '& .check': { flex: 'none', width: 18, ...this.theme.color('primary') },
+                '& .text': { minWidth: 0, flex: 1, display: 'flex', alignItems: 'baseline', gap: 8 },
+                '& .option-label': { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
+                '& .desc': {
+                    marginLeft: 'auto',
+                    whiteSpace: 'nowrap',
+                    fontSize: '0.85em',
+                    ...this.theme.color(options.descriptionColor ?? 'on-primary-surface-variant'),
+                },
+                '& .empty': {
+                    padding: 10,
+                    ...this.theme.typeface('label'),
+                    ...this.theme.color(options.descriptionColor ?? 'on-primary-surface-variant'),
+                },
+            },
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniComboboxComponent, isStandalone: true, selector: "uni-combobox, Combobox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filterLocally: { classPropertyName: "filterLocally", publicName: "filterLocally", isSignal: true, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", query: "query", selected: "selected", cleared: "cleared", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'combobox' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     resolves only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div [class]=\"rowClass()\">\n      <input\n        #field\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        aria-autocomplete=\"list\"\n        [class]=\"inputClass()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [value]=\"displayValue()\"\n        [attr.aria-label]=\"label()\"\n        [attr.aria-expanded]=\"popupOpen()\"\n        [attr.aria-controls]=\"list.listboxId\"\n        [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n        [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n        [attr.aria-invalid]=\"showError() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        (keydown)=\"onKeydown($event)\"\n        (input)=\"onInput()\"\n        (click)=\"onFieldClick()\"\n      />\n      @if (clearable() && value() !== null && !disabled()) {\n        <button\n          icon-button\n          type=\"button\"\n          size=\"sm\"\n          [iconName]=\"componentOptions().clearIcon ?? 'close'\"\n          (click)=\"clear()\"\n        >\n          Clear {{ label() }}\n        </button>\n      }\n      <!-- Pointer-only: keyboard has ArrowDown, the input announces expanded. -->\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [class]=\"toggleClass()\"\n        [disabled]=\"disabled()\"\n        (mousedown)=\"onToggleMousedown($event)\"\n      >\n        <uni-icon [name]=\"componentOptions().toggleIcon ?? 'chevronDown'\" size=\"20\" />\n      </button>\n    </div>\n  </uni-input-box>\n\n  @if (popupOpen()) {\n    <ul #listbox [id]=\"list.listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n      @if (filteredIndices().length === 0) {\n        <!-- Non-interactive: not an option, not navigable, no id. -->\n        <li class=\"empty\">{{ emptyText() }}</li>\n      } @else {\n        @for (optIndex of filteredIndices(); track optIndex; let i = $index) {\n          <!-- aria-selected marks the *committed* option; the active one is\n               carried by aria-activedescendant \u2014 they are different facts. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <li\n            role=\"option\"\n            [id]=\"list.optionId(i)\"\n            [class.active]=\"i === list.activeIndex()\"\n            [attr.aria-selected]=\"optIndex === committedIndex()\"\n            [attr.aria-disabled]=\"options()[optIndex].disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(optIndex)\"\n          >\n            <span class=\"check\" aria-hidden=\"true\">\n              @if (optIndex === committedIndex()) {\n                <uni-icon [name]=\"componentOptions().selectedIcon ?? 'check'\" size=\"18\" />\n              }\n            </span>\n            <span class=\"text\">\n              <span class=\"option-label\">{{ options()[optIndex].label }}</span>\n              @if (options()[optIndex].description) {\n                <span class=\"desc\">{{ options()[optIndex].description }}</span>\n              }\n            </span>\n          </li>\n        }\n      }\n    </ul>\n  }\n\n  <!-- Commits, clears, refusals and result counts are otherwise silent. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n</div>\n", dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniComboboxComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-combobox, Combobox', imports: [UniIconButtonComponent, UniIconComponent, UniInputBoxComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'combobox' }], host: { '[class]': 'className()' }, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     resolves only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div [class]=\"rowClass()\">\n      <input\n        #field\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        aria-autocomplete=\"list\"\n        [class]=\"inputClass()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [value]=\"displayValue()\"\n        [attr.aria-label]=\"label()\"\n        [attr.aria-expanded]=\"popupOpen()\"\n        [attr.aria-controls]=\"list.listboxId\"\n        [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n        [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n        [attr.aria-invalid]=\"showError() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        (keydown)=\"onKeydown($event)\"\n        (input)=\"onInput()\"\n        (click)=\"onFieldClick()\"\n      />\n      @if (clearable() && value() !== null && !disabled()) {\n        <button\n          icon-button\n          type=\"button\"\n          size=\"sm\"\n          [iconName]=\"componentOptions().clearIcon ?? 'close'\"\n          (click)=\"clear()\"\n        >\n          Clear {{ label() }}\n        </button>\n      }\n      <!-- Pointer-only: keyboard has ArrowDown, the input announces expanded. -->\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [class]=\"toggleClass()\"\n        [disabled]=\"disabled()\"\n        (mousedown)=\"onToggleMousedown($event)\"\n      >\n        <uni-icon [name]=\"componentOptions().toggleIcon ?? 'chevronDown'\" size=\"20\" />\n      </button>\n    </div>\n  </uni-input-box>\n\n  @if (popupOpen()) {\n    <ul #listbox [id]=\"list.listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n      @if (filteredIndices().length === 0) {\n        <!-- Non-interactive: not an option, not navigable, no id. -->\n        <li class=\"empty\">{{ emptyText() }}</li>\n      } @else {\n        @for (optIndex of filteredIndices(); track optIndex; let i = $index) {\n          <!-- aria-selected marks the *committed* option; the active one is\n               carried by aria-activedescendant \u2014 they are different facts. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <li\n            role=\"option\"\n            [id]=\"list.optionId(i)\"\n            [class.active]=\"i === list.activeIndex()\"\n            [attr.aria-selected]=\"optIndex === committedIndex()\"\n            [attr.aria-disabled]=\"options()[optIndex].disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(optIndex)\"\n          >\n            <span class=\"check\" aria-hidden=\"true\">\n              @if (optIndex === committedIndex()) {\n                <uni-icon [name]=\"componentOptions().selectedIcon ?? 'check'\" size=\"18\" />\n              }\n            </span>\n            <span class=\"text\">\n              <span class=\"option-label\">{{ options()[optIndex].label }}</span>\n              @if (options()[optIndex].description) {\n                <span class=\"desc\">{{ options()[optIndex].description }}</span>\n              }\n            </span>\n          </li>\n        }\n      }\n    </ul>\n  }\n\n  <!-- Commits, clears, refusals and result counts are otherwise silent. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], commitOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitOnBlur", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], filterLocally: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocally", required: false }] }], filterWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterWith", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], query: [{ type: i0.Output, args: ["query"] }], selected: [{ type: i0.Output, args: ["selected"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], inputRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['listbox', { isSignal: true }] }] } });
+
 class UniDataSearchComponent extends BaseComponent {
     datasource = input(...(ngDevMode ? [undefined, { debugName: "datasource" }] : /* istanbul ignore next */ []));
     placeholder = input('Search', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -4018,69 +5108,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 args: ['dropdown', { static: true }]
             }] } });
 
-class UniInputBoxComponent extends BaseComponent {
-    className = css({ display: 'contents' });
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-    minWidth = input('0', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
-    /** Override the themed field height, e.g. `'auto'` for multi-line fields. */
-    height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-    color = computed(() => this.error() ? this.componentOptions().errorColor : this.componentOptions().color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    border = computed(() => this.error() ? this.componentOptions().errorBorder : this.componentOptions().border, ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
-    shadow = computed(() => this.error() ? this.componentOptions().errorShadow : this.componentOptions().shadow, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
-    inputBoxClass = computed(() => css([
-        this.disabled() && {
-            ...this.theme.color(this.componentOptions().disabledTextColor),
-            ...this.theme.backgroundColor(this.componentOptions().disabledColor),
-            cursor: 'not-allowed !important',
-        },
-        {
-            '& input, select, textarea': {
-                ...removeInputPlatformStyling,
-                height: '100%',
-                ...this.theme.paddingLeft(this.componentOptions().paddingLeft),
-                ...this.theme.color(this.componentOptions().textColor),
-                // `typeFace` is the deprecated casing; themes that still set it win
-                // only when the canonical key is absent.
-                ...this.theme.typeface(this.componentOptions().typeface ?? this.componentOptions().typeFace),
-            },
-            // Multi-line fields size themselves (rows/resize), not from the box.
-            '& textarea': {
-                height: 'auto',
-                ...this.theme.paddingTop('xs'),
-                ...this.theme.paddingBottom('xs'),
-            },
-            '&:has(input:disabled, select:disabled, textarea:disabled)': {
-                ...this.theme.color(this.componentOptions().disabledTextColor),
-                ...this.theme.backgroundColor(this.componentOptions().disabledColor),
-            },
-            '& input:disabled, select:disabled, textarea:disabled': {
-                cursor: 'not-allowed !important',
-            },
-            '&:has(input:focus, select:focus, textarea:focus)': {
-                outline: this.componentOptions().focusOutline,
-                outlineOffset: this.componentOptions().focusOutlineOffset,
-                // Optional focus chrome (border/ring/background). It yields to the
-                // error state, so a flagged field stays visibly flagged while the
-                // user is in it correcting the value.
-                ...(this.error()
-                    ? {}
-                    : {
-                        ...this.theme.border(this.componentOptions().focusBorder),
-                        ...this.theme.boxShadow(this.componentOptions().focusShadow),
-                        ...this.theme.backgroundColor(this.componentOptions().focusColor),
-                    }),
-            },
-        },
-    ]), ...(ngDevMode ? [{ debugName: "inputBoxClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputBoxComponent, isStandalone: true, selector: "uni-input-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"height() ?? componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'uni-input-box', imports: [UniRowComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"height() ?? componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
-
 /**
  * Date field with free-typed parsing and a popup calendar. Type `aug 20`,
  * `8/20/2026` or `2026-08-20`, or pick from the grid — the form gets the
@@ -4671,32 +5698,9 @@ class UniTimeInputComponent extends BaseComponent {
     embeddedClass = computed(() => css({ display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }), ...(ngDevMode ? [{ debugName: "embeddedClass" }] : /* istanbul ignore next */ []));
     listClass = computed(() => {
         const options = this.componentOptions();
-        return css({
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            right: 0,
-            zIndex: 20,
-            margin: '4px 0 0',
-            padding: 4,
-            listStyle: 'none',
+        return css(listboxPopupStyles(this.theme, options, {
             maxHeight: (options.maxVisibleOptions ?? 7) * 36,
-            overflowY: 'auto',
-            ...this.theme.backgroundColor(options.listColor ?? 'primary-surface'),
-            ...this.theme.boxShadow(options.listShadow ?? 'menu'),
-            ...this.theme.radius(options.listBorderRadius ?? 'xs'),
-            '& [role="option"]': {
-                padding: '8px 12px',
-                cursor: 'pointer',
-                ...this.theme.typeface('label'),
-                ...this.theme.color('on-primary-surface'),
-                ...this.theme.radius('xxs'),
-                '&.active, &:hover': {
-                    ...this.theme.backgroundColor('primary-container'),
-                    ...this.theme.color('on-primary-container'),
-                },
-            },
-        });
+        }));
     }, ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTimeInputComponent, isStandalone: true, selector: "uni-time-input, TimeInput", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'timeInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     commits only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      aria-autocomplete=\"list\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-expanded]=\"list.open()\"\n      [attr.aria-controls]=\"list.listboxId\"\n      [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <button\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        aria-haspopup=\"listbox\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'schedule'\"\n        [attr.aria-expanded]=\"list.open()\"\n        [disable]=\"disabled()\"\n        (click)=\"onToggle()\"\n      >\n        Choose time\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (list.open()) {\n    <ul #listbox [id]=\"list.listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n      @for (time of options(); track time; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"time === value()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectOption(time)\"\n        >\n          {{ optionLabels()[i] }}\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Commits and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -6829,34 +7833,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * This file exports all public-facing elements of the paginator component.
  */
 
-class UniPopoverComponent {
+/**
+ * Anchored, top-layer panel on the native `popover` element — the browser owns
+ * positioning (CSS anchor positioning), stacking, and, in rich mode, light
+ * dismissal. Two modes share one implementation:
+ *
+ * - `rich` (default): a click-toggled disclosure. The projected `[trigger]`
+ *   carries `aria-expanded`/`aria-controls`; with no trigger content the app
+ *   drives `open` and no element claims controller ARIA. Focus stays on the
+ *   trigger (APG disclosure) unless the panel marks an `[autofocus]` field,
+ *   and returns to the trigger on close.
+ * - `tooltip`: hover/focus-triggered, `role="tooltip"` + `aria-describedby`,
+ *   WCAG 1.4.13 dismissable/hoverable/persistent. Content must not contain
+ *   focusable elements.
+ *
+ * Anchoring and control are separate: `anchor` re-anchors the panel to any
+ * element (or id) while the trigger keeps the disclosure semantics.
+ */
+class UniPopoverComponent extends BaseComponent {
     renderer = inject(Renderer2);
-    theme = inject(ThemeService);
+    destroyRef = inject(DestroyRef);
     placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
     /** Light-dismiss on outside click / Escape (native popover="auto"). */
     autoClose = input(true, ...(ngDevMode ? [{ debugName: "autoClose" }] : /* istanbul ignore next */ []));
+    /** Two-way open state; light dismissal and hover timers sync back into it. */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** `rich` = click-toggled disclosure; `tooltip` = hover/focus description. */
+    mode = input('rich', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /**
+     * Anchor the panel to another element (or element id, resolved each time
+     * the panel opens) while the projected trigger keeps the disclosure ARIA.
+     * Empty string means unset.
+     */
+    anchor = input(...(ngDevMode ? [undefined, { debugName: "anchor" }] : /* istanbul ignore next */ []));
+    /** Title rendered in the header row and used as the accessible name. */
+    header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
+    /** Renders a "Close" icon button in the header row. */
+    closable = input(false, ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+    arrow = input(true, ...(ngDevMode ? [{ debugName: "arrow" }] : /* istanbul ignore next */ []));
+    /** Panel max-width; numbers are px. Defaults to the theme's `maxWidth`. */
+    maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    /** Tooltip-mode hover-open delay, ms; defaults to the theme option. */
+    openDelay = input(...(ngDevMode ? [undefined, { debugName: "openDelay" }] : /* istanbul ignore next */ []));
+    /** Tooltip-mode pointer-leave close delay, ms; defaults to the theme option. */
+    closeDelay = input(...(ngDevMode ? [undefined, { debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    opened = output();
+    closed = output();
     panelId = uniqueId('uni-popover');
+    headerId = uniqueId('uni-popover-header');
     anchorName = newAnchorName();
     showing = signal(false, ...(ngDevMode ? [{ debugName: "showing" }] : /* istanbul ignore next */ []));
+    /** Whether the `[trigger]` slot projected any element content. */
+    hasTrigger = signal(false, ...(ngDevMode ? [{ debugName: "hasTrigger" }] : /* istanbul ignore next */ []));
     triggerRef = viewChild.required('trigger');
     panelRef = viewChild.required('panel');
+    openTimer = useTimer();
+    closeTimer = useTimer();
+    /** The element currently carrying our anchor-name. */
+    anchoredEl = null;
+    detachEscape = null;
     constructor() {
-        // Wire the ARIA disclosure contract onto the focusable trigger element
+        super();
         afterNextRender(() => {
+            this.hasTrigger.set(this.triggerRef().nativeElement.childElementCount > 0);
+            this.applyAnchor();
+        });
+        // Controller ARIA follows mode/open state; each branch removes the other
+        // mode's attributes so a runtime mode flip never leaves stale semantics.
+        effect(() => {
+            if (!this.hasTrigger())
+                return;
             const target = resolveFocusTarget(this.triggerRef().nativeElement);
-            this.renderer.setAttribute(target, 'aria-expanded', 'false');
-            this.renderer.setAttribute(target, 'aria-controls', this.panelId);
+            if (this.mode() === 'tooltip') {
+                this.renderer.removeAttribute(target, 'aria-expanded');
+                this.renderer.removeAttribute(target, 'aria-controls');
+                this.renderer.setAttribute(target, 'aria-describedby', this.panelId);
+            }
+            else {
+                this.renderer.removeAttribute(target, 'aria-describedby');
+                this.renderer.setAttribute(target, 'aria-expanded', `${this.showing()}`);
+                this.renderer.setAttribute(target, 'aria-controls', this.panelId);
+            }
+        });
+        // Two-way `open`: drive the native popover when the model changes hands.
+        effect(() => {
+            const want = this.open();
+            if (want === untracked(this.showing))
+                return;
+            if (want)
+                this.showPopover();
+            else
+                this.hidePopover();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.detachEscape?.();
+            if (this.anchoredEl)
+                clearAnchorName(this.anchoredEl);
+            try {
+                this.panelRef().nativeElement.hidePopover();
+            }
+            catch {
+                // popover was already closed or detached
+            }
         });
     }
-    onToggle(event) {
-        const open = event.newState === 'open';
-        this.showing.set(open);
-        this.renderer.setAttribute(resolveFocusTarget(this.triggerRef().nativeElement), 'aria-expanded', `${open}`);
-    }
+    /** Tooltip mode is always `manual` — its lifecycle belongs to the timers. */
+    popoverKind = computed(() => this.mode() === 'tooltip' ? 'manual' : this.autoClose() ? 'auto' : 'manual', ...(ngDevMode ? [{ debugName: "popoverKind" }] : /* istanbul ignore next */ []));
     showPopover() {
+        if (this.showing())
+            return;
+        this.applyAnchor();
         this.panelRef().nativeElement.showPopover();
     }
     hidePopover() {
+        if (!this.showing())
+            return;
         this.panelRef().nativeElement.hidePopover();
     }
     togglePopover(event) {
@@ -6866,60 +7957,198 @@ class UniPopoverComponent {
         else {
             this.showPopover();
         }
-        event.stopPropagation();
+        event?.stopPropagation();
     }
-    triggerClassName = css({
-        display: 'inline-block',
-        anchorName: this.anchorName,
-    });
-    popoverClassName = computed(() => css([
-        {
-            ...this.theme.colorPair('primary-surface'),
-            ...this.theme.radius('xs'),
-            ...this.theme.boxShadow('raised'),
-            ...this.theme.typeface('label'),
-            ...this.theme.border('quaternary'),
-            padding: '6px 12px',
+    /**
+     * The panel anchors to the detached `anchor` when one resolves (id strings
+     * are looked up now, at open time), else to the trigger span.
+     */
+    applyAnchor() {
+        const el = resolveElement(this.anchor()) ?? this.triggerRef().nativeElement;
+        if (this.anchoredEl === el)
+            return;
+        if (this.anchoredEl)
+            clearAnchorName(this.anchoredEl);
+        setAnchorName(el, this.anchorName);
+        this.anchoredEl = el;
+    }
+    onToggle(event) {
+        const isOpen = isToggleOpen(event);
+        this.showing.set(isOpen);
+        this.open.set(isOpen);
+        const panel = this.panelRef().nativeElement;
+        if (isOpen) {
+            if (this.mode() === 'rich') {
+                panel.querySelector('[autofocus]')?.focus();
+            }
+            else {
+                this.attachTooltipEscape();
+                if (typeof ngDevMode !== 'undefined' && ngDevMode && panel.querySelector(FOCUSABLE_SELECTOR)) {
+                    console.warn('[uni-popover] tooltip-mode content must not contain focusable elements — ' +
+                        'a tooltip is a description, not a surface. Use mode="rich" instead.');
+                }
+            }
+            this.opened.emit();
+        }
+        else {
+            this.detachEscape?.();
+            if (this.mode() === 'rich' && this.hasTrigger()) {
+                restoreOverlayFocus(panel, resolveFocusTarget(this.triggerRef().nativeElement));
+            }
+            this.closed.emit();
+        }
+    }
+    closeFromButton() {
+        this.hidePopover();
+        if (this.hasTrigger())
+            resolveFocusTarget(this.triggerRef().nativeElement).focus();
+    }
+    // --- rich-mode gesture ----------------------------------------------------
+    onTriggerClick(event) {
+        if (this.mode() !== 'rich')
+            return;
+        this.togglePopover(event);
+    }
+    // --- tooltip-mode gestures (WCAG 1.4.13) ----------------------------------
+    openDelayMs = computed(() => this.openDelay() ?? this.componentOptions().tooltipOpenDelay, ...(ngDevMode ? [{ debugName: "openDelayMs" }] : /* istanbul ignore next */ []));
+    closeDelayMs = computed(() => this.closeDelay() ?? this.componentOptions().tooltipCloseDelay, ...(ngDevMode ? [{ debugName: "closeDelayMs" }] : /* istanbul ignore next */ []));
+    onTriggerEnter() {
+        if (this.mode() !== 'tooltip')
+            return;
+        this.closeTimer.stop();
+        this.openTimer.start(this.openDelayMs(), () => this.showPopover());
+    }
+    onTriggerLeave() {
+        if (this.mode() !== 'tooltip')
+            return;
+        this.openTimer.stop();
+        if (this.showing())
+            this.closeTimer.start(this.closeDelayMs(), () => this.hidePopover());
+    }
+    onTriggerFocusIn() {
+        if (this.mode() !== 'tooltip')
+            return;
+        this.closeTimer.stop();
+        this.showPopover();
+    }
+    onTriggerFocusOut() {
+        if (this.mode() !== 'tooltip')
+            return;
+        this.openTimer.stop();
+        this.closeTimer.stop();
+        this.hidePopover();
+    }
+    /** Resting the pointer inside the panel must not dismiss it (hoverable). */
+    onPanelEnter() {
+        if (this.mode() !== 'tooltip')
+            return;
+        this.closeTimer.stop();
+    }
+    onPanelLeave() {
+        if (this.mode() !== 'tooltip')
+            return;
+        if (this.showing())
+            this.closeTimer.start(this.closeDelayMs(), () => this.hidePopover());
+    }
+    /**
+     * Tooltip panels are `manual`, so Escape is ours: dismiss without moving
+     * focus, and stop propagation so an enclosing dialog stays open. Capture
+     * phase, document-level — the pointer may be nowhere near the trigger.
+     */
+    attachTooltipEscape() {
+        const onKeydown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            event.stopPropagation();
+            this.openTimer.stop();
+            this.closeTimer.stop();
+            this.hidePopover();
+        };
+        document.addEventListener('keydown', onKeydown, true);
+        this.detachEscape = () => {
+            document.removeEventListener('keydown', onKeydown, true);
+            this.detachEscape = null;
+        };
+    }
+    // --- styling --------------------------------------------------------------
+    triggerClassName = css({ display: 'inline-block' });
+    resolvedMaxWidth = computed(() => {
+        const width = this.maxWidth();
+        if (width === undefined || width === '')
+            return this.componentOptions().maxWidth;
+        return typeof width === 'number' ? `${width}px` : width;
+    }, ...(ngDevMode ? [{ debugName: "resolvedMaxWidth" }] : /* istanbul ignore next */ []));
+    popoverClassName = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            ...this.theme.colorPair(options.color),
+            ...this.theme.radius(options.borderRadius),
+            ...this.theme.boxShadow(options.shadow),
+            ...this.theme.typeface(options.typeface),
+            ...this.theme.border(options.border),
+            padding: 0,
             width: 'max-content',
+            maxWidth: this.resolvedMaxWidth(),
             overflow: 'visible',
-            ...anchorStyles(this.anchorName, this.placement(), { mainAxis: 7 }),
-            // Fade via discrete transitions across the top layer
-            transitionProperty: 'opacity, display, overlay',
-            transitionDuration: '250ms',
-            transitionBehavior: 'allow-discrete',
-            opacity: 0,
-            '&:popover-open': {
-                opacity: 1,
-            },
-            '@starting-style': {
-                '&:popover-open': {
-                    opacity: 0,
-                },
-            },
-        },
-    ]), ...(ngDevMode ? [{ debugName: "popoverClassName" }] : /* istanbul ignore next */ []));
+            ...anchorStyles(this.anchorName, this.placement(), { mainAxis: options.offset }),
+            ...discreteOverlayTransition(250, { opacity: 0 }, { opacity: 1 }),
+        });
+    }, ...(ngDevMode ? [{ debugName: "popoverClassName" }] : /* istanbul ignore next */ []));
+    /** Empty regions collapse, so bare content renders v1's single-region look. */
+    headerRowClassName = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: options.padding,
+            paddingBottom: 0,
+            '&:not(:has(*))': { display: 'none' },
+        });
+    }, ...(ngDevMode ? [{ debugName: "headerRowClassName" }] : /* istanbul ignore next */ []));
+    titleClassName = computed(() => css({ ...this.theme.typeface(this.componentOptions().headerTypeface), marginRight: 'auto' }), ...(ngDevMode ? [{ debugName: "titleClassName" }] : /* istanbul ignore next */ []));
+    bodyClassName = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            padding: this.mode() === 'tooltip' ? options.tooltipPadding : options.padding,
+            '&:empty': { display: 'none' },
+        });
+    }, ...(ngDevMode ? [{ debugName: "bodyClassName" }] : /* istanbul ignore next */ []));
+    footerRowClassName = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            gap: 8,
+            padding: options.padding,
+            paddingTop: 0,
+            '&:not(:has(*))': { display: 'none' },
+        });
+    }, ...(ngDevMode ? [{ debugName: "footerRowClassName" }] : /* istanbul ignore next */ []));
     arrowClassName = computed(() => {
+        const options = this.componentOptions();
         const side = this.placement().split('-')[0];
-        // Border on the two edges of the rotated square that face outward
+        // Border on the two edges of the clipped half that face outward
         const borders = {
-            top: { ...this.theme.borderRight('quaternary'), ...this.theme.borderBottom('quaternary') },
-            bottom: { ...this.theme.borderLeft('quaternary'), ...this.theme.borderTop('quaternary') },
-            left: { ...this.theme.borderRight('quaternary'), ...this.theme.borderTop('quaternary') },
-            right: { ...this.theme.borderLeft('quaternary'), ...this.theme.borderBottom('quaternary') },
+            top: { ...this.theme.borderRight(options.border), ...this.theme.borderBottom(options.border) },
+            bottom: { ...this.theme.borderLeft(options.border), ...this.theme.borderTop(options.border) },
+            left: { ...this.theme.borderRight(options.border), ...this.theme.borderTop(options.border) },
+            right: { ...this.theme.borderLeft(options.border), ...this.theme.borderBottom(options.border) },
         };
         return css({
-            ...this.theme.colorPair('primary-surface'),
-            ...anchorArrowStyles(this.placement()),
+            ...this.theme.colorPair(options.color),
+            ...anchorArrowStyles(this.placement(), options.arrowSize),
             ...borders[side],
         });
     }, ...(ngDevMode ? [{ debugName: "arrowClassName" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniPopoverComponent, isStandalone: true, selector: "uni-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Click bubbles up from the projected [trigger] content, which is expected\n     to be focusable (a button); keyboard activation arrives as a click. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<span #trigger (click)=\"togglePopover($event)\" [class]=\"triggerClassName\">\n  <ng-content select=\"[trigger]\"></ng-content>\n</span>\n<div\n  #panel\n  [id]=\"panelId\"\n  [attr.popover]=\"autoClose() ? 'auto' : 'manual'\"\n  [class]=\"popoverClassName()\"\n  (toggle)=\"onToggle($event)\"\n>\n  <ng-content></ng-content>\n  <span [class]=\"arrowClassName()\"></span>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniPopoverComponent, isStandalone: true, selector: "uni-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, providers: [{ provide: COMPONENT_NAME, useValue: 'popover' }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Click bubbles up from the projected [trigger] content, which is expected\n     to be focusable (a button); keyboard activation arrives as a click. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<span\n  #trigger\n  [class]=\"triggerClassName\"\n  (click)=\"onTriggerClick($event)\"\n  (mouseenter)=\"onTriggerEnter()\"\n  (mouseleave)=\"onTriggerLeave()\"\n  (focusin)=\"onTriggerFocusIn()\"\n  (focusout)=\"onTriggerFocusOut()\"\n>\n  <ng-content select=\"[trigger]\"></ng-content>\n</span>\n<div\n  #panel\n  [id]=\"panelId\"\n  [attr.popover]=\"popoverKind()\"\n  [attr.role]=\"mode() === 'tooltip' ? 'tooltip' : null\"\n  [attr.aria-labelledby]=\"header() ? headerId : null\"\n  [class]=\"popoverClassName()\"\n  (toggle)=\"onToggle($event)\"\n  (mouseenter)=\"onPanelEnter()\"\n  (mouseleave)=\"onPanelLeave()\"\n>\n  <div [class]=\"headerRowClassName()\">\n    <ng-content select=\"[popover-header]\"></ng-content>\n    @if (header()) {\n      <span [id]=\"headerId\" [class]=\"titleClassName()\">{{ header() }}</span>\n    }\n    @if (closable()) {\n      <button\n        icon-button\n        [iconName]=\"componentOptions().closeSymbol\"\n        variant=\"ghost\"\n        size=\"sm\"\n        (click)=\"closeFromButton()\"\n      >\n        Close\n      </button>\n    }\n  </div>\n  <div [class]=\"bodyClassName()\"><ng-content></ng-content></div>\n  <div [class]=\"footerRowClassName()\"><ng-content select=\"[popover-footer]\"></ng-content></div>\n  @if (arrow()) {\n    <span [class]=\"arrowClassName()\"></span>\n  }\n</div>\n", dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniPopoverComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-popover', imports: [], template: "<!-- Click bubbles up from the projected [trigger] content, which is expected\n     to be focusable (a button); keyboard activation arrives as a click. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<span #trigger (click)=\"togglePopover($event)\" [class]=\"triggerClassName\">\n  <ng-content select=\"[trigger]\"></ng-content>\n</span>\n<div\n  #panel\n  [id]=\"panelId\"\n  [attr.popover]=\"autoClose() ? 'auto' : 'manual'\"\n  [class]=\"popoverClassName()\"\n  (toggle)=\"onToggle($event)\"\n>\n  <ng-content></ng-content>\n  <span [class]=\"arrowClassName()\"></span>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-popover', imports: [UniIconButtonComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'popover' }], template: "<!-- Click bubbles up from the projected [trigger] content, which is expected\n     to be focusable (a button); keyboard activation arrives as a click. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<span\n  #trigger\n  [class]=\"triggerClassName\"\n  (click)=\"onTriggerClick($event)\"\n  (mouseenter)=\"onTriggerEnter()\"\n  (mouseleave)=\"onTriggerLeave()\"\n  (focusin)=\"onTriggerFocusIn()\"\n  (focusout)=\"onTriggerFocusOut()\"\n>\n  <ng-content select=\"[trigger]\"></ng-content>\n</span>\n<div\n  #panel\n  [id]=\"panelId\"\n  [attr.popover]=\"popoverKind()\"\n  [attr.role]=\"mode() === 'tooltip' ? 'tooltip' : null\"\n  [attr.aria-labelledby]=\"header() ? headerId : null\"\n  [class]=\"popoverClassName()\"\n  (toggle)=\"onToggle($event)\"\n  (mouseenter)=\"onPanelEnter()\"\n  (mouseleave)=\"onPanelLeave()\"\n>\n  <div [class]=\"headerRowClassName()\">\n    <ng-content select=\"[popover-header]\"></ng-content>\n    @if (header()) {\n      <span [id]=\"headerId\" [class]=\"titleClassName()\">{{ header() }}</span>\n    }\n    @if (closable()) {\n      <button\n        icon-button\n        [iconName]=\"componentOptions().closeSymbol\"\n        variant=\"ghost\"\n        size=\"sm\"\n        (click)=\"closeFromButton()\"\n      >\n        Close\n      </button>\n    }\n  </div>\n  <div [class]=\"bodyClassName()\"><ng-content></ng-content></div>\n  <div [class]=\"footerRowClassName()\"><ng-content select=\"[popover-footer]\"></ng-content></div>\n  @if (arrow()) {\n    <span [class]=\"arrowClassName()\"></span>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 /**
  * UniPopoverComponent Barrel File
@@ -7236,35 +8465,7 @@ class UniSearchInputComponent extends BaseComponent {
             ...this.theme.paddingLeft('sm'),
         },
     }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    listClass = computed(() => {
-        const options = this.componentOptions();
-        return css({
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            right: 0,
-            zIndex: 20,
-            margin: '4px 0 0',
-            padding: 4,
-            listStyle: 'none',
-            maxHeight: 280,
-            overflowY: 'auto',
-            ...this.theme.backgroundColor(options.listColor ?? 'primary-surface'),
-            ...this.theme.boxShadow(options.listShadow ?? 'menu'),
-            ...this.theme.radius(options.listBorderRadius ?? 'xs'),
-            '& [role="option"]': {
-                padding: '8px 12px',
-                cursor: 'pointer',
-                ...this.theme.typeface('label'),
-                ...this.theme.color('on-primary-surface'),
-                ...this.theme.radius('xxs'),
-                '&.active, &:hover': {
-                    ...this.theme.backgroundColor('primary-container'),
-                    ...this.theme.color('on-primary-container'),
-                },
-            },
-        });
-    }, ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+    listClass = computed(() => css(listboxPopupStyles(this.theme, this.componentOptions())), ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSearchInputComponent, isStandalone: true, selector: "uni-search-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", search: "search", suggestionSelected: "suggestionSelected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'searchInput' }], viewQueries: [{ propertyName: "field", first: true, predicate: UniDebounceInputComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Keydown/focusout ride the bubbling events from the inner input; the\n     wrapper itself stays out of the tab order. -->\n<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n<div (keydown)=\"onKeydown($event)\" (focusout)=\"onFocusOut($event)\">\n  <uni-debounce-input\n    #searchField\n    [label]=\"label()\"\n    [placeholder]=\"placeholder() ?? label()\"\n    [debounceTime]=\"debounceTime()\"\n    role=\"combobox\"\n    [ariaExpanded]=\"list.open()\"\n    [ariaControls]=\"listboxId\"\n    [ariaActivedescendant]=\"list.activeDescendantId() ?? undefined\"\n    (change)=\"handleChange($event)\"\n  >\n    <uni-symbol pre-input class=\"uni-search-lead\" name=\"{{ componentOptions().searchSymbol ?? 'search' }}\" aria-hidden=\"true\" />\n    @if (hasQuery()) {\n      <button\n        post-input\n        icon-button\n        [iconName]=\"componentOptions().clearSymbol ?? 'close'\"\n        variant=\"ghost\"\n        size=\"sm\"\n        (click)=\"clear()\"\n      >\n        Clear search\n      </button>\n    }\n  </uni-debounce-input>\n\n  @if (list.open()) {\n    <ul [id]=\"listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n      @for (suggestion of visibleSuggestions(); track suggestion; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"i === list.activeIndex()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"select(suggestion)\"\n        >\n          {{ suggestion }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n", dependencies: [{ kind: "component", type: UniDebounceInputComponent, selector: "uni-debounce-input", inputs: ["inputName", "inputId", "debounceTime", "label", "placeholder", "disabled", "role", "ariaExpanded", "ariaControls", "ariaActivedescendant"], outputs: ["change"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -8534,35 +9735,7 @@ class UniTagInputComponent extends BaseComponent {
         font: 'inherit',
         padding: 0,
     }), ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
-    listClass = computed(() => {
-        const options = this.componentOptions();
-        return css({
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            right: 0,
-            zIndex: 20,
-            margin: '4px 0 0',
-            padding: 4,
-            listStyle: 'none',
-            maxHeight: 280,
-            overflowY: 'auto',
-            ...this.theme.backgroundColor(options.listColor ?? 'primary-surface'),
-            ...this.theme.boxShadow(options.listShadow ?? 'menu'),
-            ...this.theme.radius(options.listBorderRadius ?? 'xs'),
-            '& [role="option"]': {
-                padding: '8px 12px',
-                cursor: 'pointer',
-                ...this.theme.typeface('label'),
-                ...this.theme.color('on-primary-surface'),
-                ...this.theme.radius('xxs'),
-                '&.active, &:hover': {
-                    ...this.theme.backgroundColor('primary-container'),
-                    ...this.theme.color('on-primary-container'),
-                },
-            },
-        });
-    }, ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+    listClass = computed(() => css(listboxPopupStyles(this.theme, this.componentOptions())), ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTagInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTagInputComponent, isStandalone: true, selector: "uni-tag-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, parse: { classPropertyName: "parse", publicName: "parse", isSignal: true, isRequired: false, transformFunction: null }, tagVariant: { classPropertyName: "tagVariant", publicName: "tagVariant", isSignal: true, isRequired: false, transformFunction: null }, tagTone: { classPropertyName: "tagTone", publicName: "tagTone", isSignal: true, isRequired: false, transformFunction: null }, tagSize: { classPropertyName: "tagSize", publicName: "tagSize", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", query: "query", added: "added", removed: "removed", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'tagInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "chipRefs", predicate: ["chip"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes only when focus\n     leaves the whole field, not while moving between chips and the input. -->\n<div style=\"position: relative\" (focusout)=\"onFocusOut($event)\">\n  <uni-input-box [error]=\"showError()\" height=\"auto\">\n    <ul [class]=\"fieldClass()\">\n      @for (item of value(); track item.value; let i = $index) {\n        <!-- The focusable element is the chip's own button; this <li> only\n             receives keys bubbling up from it, so it must stay out of the tab\n             order (same delegation the menu uses for its roving focus). -->\n        <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n        <li #chip (keydown)=\"onChipKeydown($event, i)\" (dblclick)=\"editChip(i)\">\n          <uni-tag\n            [label]=\"labelOf(item)\"\n            [value]=\"item.value\"\n            [avatarSrc]=\"item.avatarSrc\"\n            [variant]=\"item.invalid ? 'warn' : tagVariant()\"\n            [tone]=\"tagTone()\"\n            [size]=\"tagSize() ?? componentOptions().chipSize ?? 'md'\"\n            [invalid]=\"!!item.invalid\"\n            [disabled]=\"!!item.disabled || disabled()\"\n            [interactive]=\"true\"\n            [removable]=\"!item.disabled && !disabled()\"\n            [controlTabIndex]=\"-1\"\n            (removed)=\"removeAt(i)\"\n          />\n        </li>\n      }\n\n      <li [class]=\"inputClass()\">\n        <!-- The field is one tab stop: chips carry tabindex=\"-1\" and are\n             entered with Backspace/ArrowLeft, so Tab never walks through\n             eight recipients to reach the next control. -->\n        <input\n          #field\n          type=\"text\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          [class]=\"inputClass()\"\n          [disabled]=\"disabled()\"\n          [placeholder]=\"placeholder() ?? ''\"\n          [attr.aria-label]=\"label()\"\n          [attr.aria-expanded]=\"list.open()\"\n          [attr.aria-controls]=\"list.listboxId\"\n          [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          [attr.aria-invalid]=\"showError() ? true : null\"\n          [attr.aria-required]=\"required() ? true : null\"\n          (keydown)=\"onInputKeydown($event)\"\n          (input)=\"onInput($any($event.target).value)\"\n          (paste)=\"onPaste($event)\"\n          (blur)=\"onBlur()\"\n        />\n      </li>\n    </ul>\n  </uni-input-box>\n\n  @if (list.open()) {\n    <ul [id]=\"list.listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n      @for (suggestion of visibleSuggestions(); track suggestion.value; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"i === list.activeIndex()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectSuggestion(suggestion)\"\n        >\n          {{ labelOf(suggestion) }}\n          @if (suggestion.description) {\n            <span [class]=\"srOnly\">{{ suggestion.description }}</span>\n          }\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Said once for the whole field, rather than every chip advertising it. -->\n  <span [id]=\"hintId\" [class]=\"srOnly\">\n    Press Backspace to reach the last entry, then Backspace again to remove it.\n  </span>\n\n  <!-- Adds and removes are otherwise silent for a screen reader. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n</div>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }, { kind: "component", type: UniTagComponent, selector: "uni-tag", inputs: ["size", "tone", "label", "value", "maxWidth", "avatarSrc", "avatarName", "iconName", "symbolName", "dot", "removable", "interactive", "selected", "invalid", "disabled", "removeLabel", "controlTabIndex"], outputs: ["removed", "activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -9836,9 +11009,221 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { hoverDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverDelay", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], inlineText: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineText", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], tipRef: [{ type: i0.ViewChild, args: ['tip', { isSignal: true }] }] } });
 
+/**
+ * A thin sequencer over one `uni-callout`: steps spotlight their targets, a
+ * footer walks Next/Back with dots-or-fraction progress, and `advanceOn`
+ * gates a step behind an interaction with its target (auto-advancing for
+ * clicks, unlocking Next otherwise — announced through one `role="status"`
+ * region). Escape or the close button skips the tour and reports the step.
+ *
+ * `active` is a two-way model, so a tour is deep-linkable and inspectable;
+ * steps whose declared target cannot be resolved are skipped (with a dev
+ * warning) in the direction of travel rather than erroring.
+ */
+class UniTourComponent extends BaseComponent {
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    /** The presented step index, or null when the tour is not running. */
+    active = model(null, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    nextLabel = input('Next', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
+    backLabel = input('Back', ...(ngDevMode ? [{ debugName: "backLabel" }] : /* istanbul ignore next */ []));
+    skipLabel = input('Skip', ...(ngDevMode ? [{ debugName: "skipLabel" }] : /* istanbul ignore next */ []));
+    doneLabel = input('Done', ...(ngDevMode ? [{ debugName: "doneLabel" }] : /* istanbul ignore next */ []));
+    started = output();
+    stepChanged = output();
+    finished = output();
+    skipped = output();
+    calloutOpen = signal(false, ...(ngDevMode ? [{ debugName: "calloutOpen" }] : /* istanbul ignore next */ []));
+    satisfied = signal(true, ...(ngDevMode ? [{ debugName: "satisfied" }] : /* istanbul ignore next */ []));
+    announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    resolvedTarget = signal(undefined, ...(ngDevMode ? [{ debugName: "resolvedTarget" }] : /* istanbul ignore next */ []));
+    presentedIndex = signal(null, ...(ngDevMode ? [{ debugName: "presentedIndex" }] : /* istanbul ignore next */ []));
+    gateCleanup = null;
+    index = computed(() => this.presentedIndex() ?? 0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    currentStep = computed(() => {
+        const index = this.presentedIndex();
+        return index === null ? undefined : this.steps()[index];
+    }, ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
+    isLast = computed(() => this.index() >= this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+    clickGate = computed(() => this.currentStep()?.advanceOn?.event === 'click', ...(ngDevMode ? [{ debugName: "clickGate" }] : /* istanbul ignore next */ []));
+    /** Gated steps force an interactive target — the gate needs the gesture. */
+    targetInteractive = computed(() => {
+        const step = this.currentStep();
+        return step?.advanceOn ? true : (step?.targetInteractive ?? true);
+    }, ...(ngDevMode ? [{ debugName: "targetInteractive" }] : /* istanbul ignore next */ []));
+    stepAriaLabel = computed(() => {
+        const step = this.currentStep();
+        return step ? `${step.title}, step ${this.index() + 1} of ${this.steps().length}` : '';
+    }, ...(ngDevMode ? [{ debugName: "stepAriaLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // External writes to `active` (deep links) route into the sequencer.
+        effect(() => {
+            const index = this.active();
+            if (index === untracked(this.presentedIndex))
+                return;
+            untracked(() => (index === null ? this.stopTour() : this.present(index, 1)));
+        });
+        this.destroyRef.onDestroy(() => this.gateCleanup?.());
+    }
+    start(at = 0) {
+        this.started.emit();
+        this.present(at, 1);
+    }
+    next() {
+        this.advance();
+    }
+    back() {
+        const index = this.presentedIndex();
+        if (index !== null && index > 0)
+            this.present(index - 1, -1);
+    }
+    skip() {
+        const step = this.currentStep();
+        const index = this.presentedIndex();
+        this.stopTour();
+        if (step && index !== null)
+            this.skipped.emit({ key: step.key, index });
+    }
+    advance() {
+        const index = this.presentedIndex();
+        if (index === null)
+            return;
+        if (index >= this.steps().length - 1)
+            this.finishTour();
+        else
+            this.present(index + 1, 1);
+    }
+    /**
+     * Present step `index`, skipping (in the direction of travel) steps whose
+     * declared target cannot be resolved right now.
+     */
+    present(index, dir) {
+        this.gateCleanup?.();
+        const steps = this.steps();
+        if (index < 0 || index >= steps.length) {
+            this.finishTour();
+            return;
+        }
+        const step = steps[index];
+        let target = null;
+        if (step.target !== undefined && step.target !== '') {
+            target = resolveElement(step.target);
+            if (!target) {
+                if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                    console.warn(`[uni-tour] step "${step.key}" target missing — skipped`);
+                }
+                this.present(index + dir, dir);
+                return;
+            }
+        }
+        this.presentedIndex.set(index);
+        this.active.set(index);
+        this.resolvedTarget.set(target ?? undefined);
+        this.setupGate(step, target);
+        this.calloutOpen.set(true);
+        this.stepChanged.emit({ key: step.key, index });
+    }
+    setupGate(step, target) {
+        const gate = step.advanceOn;
+        this.satisfied.set(!gate);
+        if (!gate || !target)
+            return;
+        const auto = gate.auto ?? gate.event === 'click';
+        const unlisten = this.renderer.listen(target, gate.event, () => {
+            if (untracked(this.satisfied) && !auto)
+                return;
+            this.satisfied.set(true);
+            if (auto) {
+                this.gateCleanup?.();
+                this.advance();
+            }
+            else {
+                this.announcement.set('Next available');
+            }
+        });
+        this.gateCleanup = () => {
+            unlisten();
+            this.gateCleanup = null;
+        };
+    }
+    onDismissed(dismissal) {
+        if (dismissal.reason === 'programmatic')
+            return; // that's us, stepping or stopping
+        const step = this.currentStep();
+        const index = this.presentedIndex();
+        this.stopTour();
+        if (step && index !== null)
+            this.skipped.emit({ key: step.key, index });
+    }
+    /** Arrow keys navigate only while focus is inside the panel. */
+    onPanelKeydown(event) {
+        if (event.key === 'ArrowRight' && this.satisfied() && !this.clickGate()) {
+            event.preventDefault();
+            this.advance();
+        }
+        else if (event.key === 'ArrowLeft' && this.index() > 0) {
+            event.preventDefault();
+            this.back();
+        }
+    }
+    finishTour() {
+        this.gateCleanup?.();
+        this.calloutOpen.set(false);
+        this.presentedIndex.set(null);
+        this.active.set(null);
+        this.finished.emit();
+    }
+    stopTour() {
+        this.gateCleanup?.();
+        this.calloutOpen.set(false);
+        this.presentedIndex.set(null);
+        this.active.set(null);
+    }
+    // --- styling --------------------------------------------------------------
+    statusClassName = css(visuallyHidden);
+    footerClassName = computed(() => css({
+        display: 'flex',
+        alignItems: 'center',
+        flex: 1,
+        gap: this.theme.spacing()[this.componentOptions().footerGap],
+    }), ...(ngDevMode ? [{ debugName: "footerClassName" }] : /* istanbul ignore next */ []));
+    dotsClassName = computed(() => {
+        const colors = this.theme.colorPalette();
+        const on = colors[this.variant()] ?? colors['primary'];
+        return css({
+            display: 'inline-flex',
+            gap: 5,
+            margin: '0 auto',
+            '& i': {
+                width: 6,
+                height: 6,
+                borderRadius: 999,
+                background: colors['surface-variant'],
+                border: `1px solid ${colors['outline'] ?? colors['surface-variant']}`,
+            },
+            '& i.on': { background: on, borderColor: on },
+        });
+    }, ...(ngDevMode ? [{ debugName: "dotsClassName" }] : /* istanbul ignore next */ []));
+    fractionClassName = css({ margin: '0 auto' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTourComponent, isStandalone: true, selector: "uni-tour", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLabel: { classPropertyName: "skipLabel", publicName: "skipLabel", isSignal: true, isRequired: false, transformFunction: null }, doneLabel: { classPropertyName: "doneLabel", publicName: "doneLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", started: "started", stepChanged: "stepChanged", finished: "finished", skipped: "skipped" }, providers: [{ provide: COMPONENT_NAME, useValue: 'tour' }], usesInheritance: true, ngImport: i0, template: "<uni-callout\n  [(open)]=\"calloutOpen\"\n  [key]=\"currentStep()?.key ?? ''\"\n  [target]=\"resolvedTarget()\"\n  [placement]=\"currentStep()?.placement ?? 'bottom'\"\n  [backdrop]=\"currentStep()?.backdrop\"\n  [targetInteractive]=\"targetInteractive()\"\n  [header]=\"currentStep()?.title ?? ''\"\n  [ariaLabel]=\"stepAriaLabel()\"\n  [closeLabel]=\"skipLabel()\"\n  (dismissed)=\"onDismissed($event)\"\n  (panelKeydown)=\"onPanelKeydown($event)\"\n>\n  <p>{{ currentStep()?.body }}</p>\n  <div callout-actions [class]=\"footerClassName()\">\n    @if (index() > 0) {\n      <button text-button variant=\"ghost\" (click)=\"back()\">{{ backLabel() }}</button>\n    }\n    @if (componentOptions().progressStyle === 'fraction') {\n      <span aria-hidden=\"true\" [class]=\"fractionClassName\">{{ index() + 1 }} of {{ steps().length }}</span>\n    } @else {\n      <span aria-hidden=\"true\" [class]=\"dotsClassName()\">\n        @for (step of steps(); track $index) {\n          <i [class.on]=\"$index === index()\"></i>\n        }\n      </span>\n    }\n    <!-- A click-gate advances by using the target itself \u2014 a Next button\n         would be a lie, so none renders. -->\n    @if (!clickGate()) {\n      <button text-button [disable]=\"!satisfied()\" (click)=\"advance()\">\n        {{ isLast() ? doneLabel() : nextLabel() }}\n      </button>\n    }\n  </div>\n</uni-callout>\n<!-- One live region per tour: gate unlocks are announced here. -->\n<span role=\"status\" [class]=\"statusClassName\">{{ announcement() }}</span>\n", dependencies: [{ kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "component", type: UniCalloutComponent, selector: "uni-callout", inputs: ["open", "key", "target", "placement", "backdrop", "targetInteractive", "dismissible", "dismissOnBackdrop", "header", "arrow", "ariaLabel", "closeLabel"], outputs: ["openChange", "opened", "closed", "dismissed", "panelKeydown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTourComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-tour', imports: [UniButtonComponent, UniCalloutComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'tour' }], template: "<uni-callout\n  [(open)]=\"calloutOpen\"\n  [key]=\"currentStep()?.key ?? ''\"\n  [target]=\"resolvedTarget()\"\n  [placement]=\"currentStep()?.placement ?? 'bottom'\"\n  [backdrop]=\"currentStep()?.backdrop\"\n  [targetInteractive]=\"targetInteractive()\"\n  [header]=\"currentStep()?.title ?? ''\"\n  [ariaLabel]=\"stepAriaLabel()\"\n  [closeLabel]=\"skipLabel()\"\n  (dismissed)=\"onDismissed($event)\"\n  (panelKeydown)=\"onPanelKeydown($event)\"\n>\n  <p>{{ currentStep()?.body }}</p>\n  <div callout-actions [class]=\"footerClassName()\">\n    @if (index() > 0) {\n      <button text-button variant=\"ghost\" (click)=\"back()\">{{ backLabel() }}</button>\n    }\n    @if (componentOptions().progressStyle === 'fraction') {\n      <span aria-hidden=\"true\" [class]=\"fractionClassName\">{{ index() + 1 }} of {{ steps().length }}</span>\n    } @else {\n      <span aria-hidden=\"true\" [class]=\"dotsClassName()\">\n        @for (step of steps(); track $index) {\n          <i [class.on]=\"$index === index()\"></i>\n        }\n      </span>\n    }\n    <!-- A click-gate advances by using the target itself \u2014 a Next button\n         would be a lie, so none renders. -->\n    @if (!clickGate()) {\n      <button text-button [disable]=\"!satisfied()\" (click)=\"advance()\">\n        {{ isLast() ? doneLabel() : nextLabel() }}\n      </button>\n    }\n  </div>\n</uni-callout>\n<!-- One live region per tour: gate unlocks are announced here. -->\n<span role=\"status\" [class]=\"statusClassName\">{{ announcement() }}</span>\n" }]
+        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], skipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], started: [{ type: i0.Output, args: ["started"] }], stepChanged: [{ type: i0.Output, args: ["stepChanged"] }], finished: [{ type: i0.Output, args: ["finished"] }], skipped: [{ type: i0.Output, args: ["skipped"] }] } });
+
+/**
+ * UniTourComponent Barrel File
+ *
+ * This file exports all public-facing elements of the tour component.
+ */
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, ListboxNavigation, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, ThemeService, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCalendarComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDateInputComponent, UniDateTimeInputComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniRadioComponent, UniRecordDatasource, UniRowComponent, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTagInputComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniTimeInputComponent, UniToggleComponent, UniTooltipComponent, UniWrapComponent, acceptableFile, addDays, addMonths, anchorArrowStyles, anchorStyles, buildMonthGrid, createListboxNavigation, dayOfWeek, daysInMonth, formatDate, formatMonthHeading, formatTime, getFileExtension, inclusiveDayCount, isDivider, isValidDate, isoDate, joinDateTime, localeDatePlaceholder, localeDefaultHour12, localeFieldOrder, localeMonthNames, localeWeekStart, monthOf, motionSafe, newAnchorName, parseDateText, parseTimeText, resolveFocusTarget, splitDateTime, timeSlots, todayIso, uniqueId, useTimer, visuallyHidden, weekdayNames };
+export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, ListboxNavigation, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, TRANSFORM_ORIGINS, ThemeService, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCalendarComponent, UniCalloutComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniComboboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDateInputComponent, UniDateTimeInputComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniRadioComponent, UniRecordDatasource, UniRowComponent, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTagInputComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniTimeInputComponent, UniToggleComponent, UniTooltipComponent, UniTourComponent, UniWrapComponent, acceptableFile, addDays, addMonths, anchorArrowStyles, anchorStyles, buildMonthGrid, clearAnchorName, createListboxNavigation, dayOfWeek, daysInMonth, discreteOverlayTransition, focusableElements, formatDate, formatMonthHeading, formatTime, getFileExtension, inclusiveDayCount, isDivider, isToggleOpen, isValidDate, isoDate, joinDateTime, listboxPopupStyles, localeDatePlaceholder, localeDefaultHour12, localeFieldOrder, localeMonthNames, localeWeekStart, monthOf, motionSafe, newAnchorName, parseDateText, parseTimeText, resolveElement, resolveFocusTarget, restoreOverlayFocus, setAnchorName, splitDateTime, spotlightStyles, timeSlots, todayIso, uniqueId, useTimer, visuallyHidden, weekdayNames };
 //# sourceMappingURL=uni-design-system-uni-angular.mjs.map