@uni-design-system/uni-angular 7.2.0 → 8.0.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, booleanAttribute, viewChildren } 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 { injectGlobal, css, keyframes } from '@emotion/css';
-import { UniThemes, LightTheme, toTypefaces, createThemeFromPalette, Z_INDEX, fadeIn, fadeOut, expandFadeIn, collapseFadeOut, removeInputPlatformStyling, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
+import { UniThemes, LightTheme, toTypefaces, parseTheme, formatThemeIssues, hydrateTheme, createThemeFromPalette, Z_INDEX, fadeIn, fadeOut, EXPAND_DEFAULT_SPEED, expandDuration, expandFadeIn, collapseFadeOut, removeInputPlatformStyling, HOVER_OR_KEYBOARD_FOCUS, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
 import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 
 let nextUniqueId = 0;
@@ -50,6 +50,112 @@ function motionSafe(styles) {
     return { '@media (prefers-reduced-motion: no-preference)': styles };
 }
 
+/**
+ * The keyboard and ARIA bookkeeping shared by every combobox-style popup:
+ * open state, the active option index, and the `aria-activedescendant` id
+ * wiring. Deliberately owns no markup and no filtering — each control renders
+ * its own options and decides what a suggestion *is*.
+ *
+ * Extracted because three controls need the identical contract
+ * (`uni-search-input`, `uni-tag-input`, and the multi-select upgrade), and the
+ * parts that silently drift between hand-rolled copies all live here: the
+ * wrap-around arithmetic, Home/End, and keeping the active id in sync with the
+ * option list.
+ *
+ * `Enter` and `Escape` are deliberately *not* handled: what they mean depends
+ * on the control (submit a search, commit a typed token, clear the field), and
+ * `activeIndex()` is all a caller needs to decide.
+ */
+class ListboxNavigation {
+    config;
+    /** Id for the `role="listbox"` element; wire as `aria-controls`. */
+    listboxId;
+    _open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
+    _activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_activeIndex" }] : /* istanbul ignore next */ []));
+    wrap;
+    /** 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. */
+    activeIndex = computed(() => {
+        const index = this._activeIndex();
+        // A shrinking option list must never leave the active id dangling.
+        return index < this.config.count() ? index : -1;
+    }, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** Value for `aria-activedescendant`, or null when nothing is active. */
+    activeDescendantId = computed(() => {
+        const index = this.activeIndex();
+        return this.open() && index >= 0 ? this.optionId(index) : null;
+    }, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
+    constructor(config) {
+        this.config = config;
+        this.listboxId = uniqueId(config.idPrefix ?? 'uni-listbox');
+        this.wrap = config.wrap ?? true;
+    }
+    /** Stable per-option id, for `role="option"` elements. */
+    optionId(index) {
+        return `${this.listboxId}-option-${index}`;
+    }
+    show() {
+        this._open.set(true);
+    }
+    /** Close and drop the active option, so reopening starts clean. */
+    hide() {
+        this._open.set(false);
+        this._activeIndex.set(-1);
+    }
+    setActive(index) {
+        this._activeIndex.set(index);
+    }
+    /**
+     * Handle ArrowDown / ArrowUp / Home / End, opening the popup if needed.
+     * Returns true when the key was consumed, so a caller can fall through to
+     * its own handling for everything else.
+     */
+    navigate(event) {
+        const count = this.config.count();
+        if (count === 0)
+            return false;
+        const target = this.nextIndex(event.key, count);
+        if (target === null)
+            return false;
+        event.preventDefault();
+        this._open.set(true);
+        this._activeIndex.set(target);
+        return true;
+    }
+    nextIndex(key, count) {
+        const current = this.activeIndex();
+        switch (key) {
+            case 'ArrowDown':
+                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);
+            case 'Home':
+                return 0;
+            case 'End':
+                return count - 1;
+            default:
+                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);
+    }
+    /** Close when focus leaves the control entirely (not on internal moves). */
+    closeOnFocusOut(event) {
+        const next = event.relatedTarget;
+        const container = event.currentTarget;
+        if (!next || !container?.contains(next))
+            this.hide();
+    }
+}
+/** Factory mirroring the signal-API style used elsewhere in the CDK. */
+const createListboxNavigation = (config) => new ListboxNavigation(config);
+
 /** Returns a document-unique dashed-ident usable as a CSS `anchor-name`. */
 function newAnchorName() {
     return `--${uniqueId('uni-anchor')}`;
@@ -648,10 +754,19 @@ class ThemeService {
     static CUSTOM_KEY = 'CustomTheme';
     /** localStorage key holding the serialized brand palette config. */
     static PALETTE_KEY = 'uni-custom-palette';
-    themes = inject(UNI_THEMES);
     localStorage = inject(LocalStorageService);
-    theme = signal(LightTheme, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
-    themeOptions = signal([], ...(ngDevMode ? [{ debugName: "themeOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * The live theme registry: the injected {@link UNI_THEMES} map (validated
+     * at construction) plus anything added via {@link registerTheme} — including
+     * the custom brand theme, which registers under {@link CUSTOM_KEY} so it is
+     * an ordinary, selectable entry.
+     */
+    registry = signal({}, ...(ngDevMode ? [{ debugName: "registry" }] : /* istanbul ignore next */ []));
+    _theme = signal(LightTheme, ...(ngDevMode ? [{ debugName: "_theme" }] : /* istanbul ignore next */ []));
+    /** The active theme. Write via {@link setTheme}/{@link selectTheme} — every write is validated. */
+    theme = this._theme.asReadonly();
+    /** Selectable themes, derived from the registry — reactive to registration. */
+    themeOptions = computed(() => Object.entries(this.registry()).map(([value, theme]) => ({ label: theme.name, value })), ...(ngDevMode ? [{ debugName: "themeOptions" }] : /* istanbul ignore next */ []));
     components = computed(() => this.theme().components, ...(ngDevMode ? [{ debugName: "components" }] : /* istanbul ignore next */ []));
     component = (componentName) => computed(() => this.components()[componentName] || {});
     colors = computed(() => this.theme().colors, ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
@@ -677,9 +792,21 @@ class ThemeService {
         }
       }
     `;
-        this.themeOptions.set(Object.keys(this.themes).map((key) => {
-            return { label: this.themes[key].name, value: key };
-        }));
+        // Seed the registry from the injected map, excluding (with reasons) any
+        // theme that fails the structural contract — a malformed theme would
+        // otherwise render as silent `undefined` CSS.
+        const injected = inject(UNI_THEMES);
+        const registry = {};
+        for (const [key, candidate] of Object.entries(injected)) {
+            const result = parseTheme(candidate);
+            if (result.success) {
+                registry[key] = result.theme;
+            }
+            else {
+                console.warn(`Uni theme '${key}' rejected: ${formatThemeIssues(result.issues)}`);
+            }
+        }
+        this.registry.set(registry);
         // Rehydrate a custom brand theme if one is active — this is what lets a
         // palette built in one story reskin every other story: each story spins up
         // a fresh ThemeService, and it reads the persisted config here on init.
@@ -689,14 +816,75 @@ class ThemeService {
             this.applyPalette(savedPalette, false);
         }
         else {
-            this.selectTheme(savedTheme || Object.keys(this.themes)[0] || 'base');
+            this.selectTheme(savedTheme || Object.keys(registry)[0] || 'base');
         }
     }
+    /**
+     * Activate a registered theme. Returns false — touching nothing, persisting
+     * nothing — when the name is unknown (previously this silently kept the old
+     * theme while still recording the bad key).
+     */
     selectTheme(themeName) {
+        const theme = this.registry()[themeName];
+        if (!theme)
+            return false;
+        // Registered themes were validated at registration; set directly.
+        this._theme.set(theme);
         this.selectedThemeKey.set(themeName);
-        if (this.themes[themeName])
-            this.theme.set(this.themes[themeName]);
         this.localStorage.setItem('theme', themeName);
+        return true;
+    }
+    /**
+     * Validate and activate a theme without registering it. The result carries
+     * acceptance or the complete list of rejection reasons; on rejection the
+     * active theme is unchanged.
+     */
+    setTheme(input) {
+        const result = this.accept(input);
+        if (result.success) {
+            this._theme.set(result.theme);
+            this.selectedThemeKey.set(result.theme.id);
+        }
+        return result;
+    }
+    /**
+     * Validate and add a theme to the registry (keyed by its `id`), making it
+     * selectable and listed in {@link themeOptions}. On rejection the registry
+     * is unchanged and the result lists every reason.
+     */
+    registerTheme(input, opts) {
+        const result = this.accept(input);
+        if (result.success) {
+            const theme = result.theme;
+            this.registry.update((themes) => ({ ...themes, [theme.id]: theme }));
+            if (opts?.select)
+                this.selectTheme(theme.id);
+        }
+        return result;
+    }
+    /**
+     * The gate every externally-supplied theme passes: validate, then restore
+     * any built-in icons the payload left out. Themes that travel as JSON (the
+     * MCP theme tools, a theme registry) omit the built-in icon set — it is
+     * ~71% of the bytes and every consumer already ships it — so hydration
+     * applies the same `{...BaseIcons, ...icons}` contract `createTheme` uses:
+     * the theme's own icons win, built-ins fill the rest.
+     */
+    accept(input) {
+        const result = parseTheme(input);
+        return result.success ? { ...result, theme: hydrateTheme(result.theme) } : result;
+    }
+    /** Remove a registered theme; falls back to the first remaining theme if it was active. */
+    unregisterTheme(id) {
+        if (!(id in this.registry()))
+            return;
+        this.registry.update((themes) => {
+            const { [id]: _removed, ...rest } = themes;
+            return rest;
+        });
+        if (this.selectedThemeKey() === id) {
+            this.selectTheme(Object.keys(this.registry())[0] || 'base');
+        }
     }
     /** The live brand palette config, when a custom theme is active. */
     customPalette = signal(null, ...(ngDevMode ? [{ debugName: "customPalette" }] : /* istanbul ignore next */ []));
@@ -708,18 +896,24 @@ class ThemeService {
      */
     applyPalette(config, persist = true) {
         this.customPalette.set(config);
-        this.theme.set(createThemeFromPalette({ ...config, id: ThemeService.CUSTOM_KEY, name: 'Your Brand' }));
+        // Registering (rather than only setting) makes 'Your Brand' an ordinary
+        // registry entry: it appears in themeOptions/uni-theme-switch and can be
+        // switched away from and back to.
+        const result = this.registerTheme(createThemeFromPalette({ ...config, id: ThemeService.CUSTOM_KEY, name: 'Your Brand' }));
+        if (!result.success)
+            return;
+        this._theme.set(result.theme);
         this.selectedThemeKey.set(ThemeService.CUSTOM_KEY);
         if (persist) {
             this.localStorage.setItem(ThemeService.PALETTE_KEY, config);
             this.localStorage.setItem('theme', ThemeService.CUSTOM_KEY);
         }
     }
-    /** Drop the custom brand theme and fall back to the first built-in theme. */
+    /** Drop the custom brand theme and fall back to the first registered theme. */
     clearCustomPalette() {
         this.customPalette.set(null);
         this.localStorage.removeItem(ThemeService.PALETTE_KEY);
-        this.selectTheme(Object.keys(this.themes)[0] || 'base');
+        this.unregisterTheme(ThemeService.CUSTOM_KEY);
     }
     selectedThemeName = computed(() => this.theme().name, ...(ngDevMode ? [{ debugName: "selectedThemeName" }] : /* istanbul ignore next */ []));
     selectedThemeKey = signal('', ...(ngDevMode ? [{ debugName: "selectedThemeKey" }] : /* istanbul ignore next */ []));
@@ -3308,6 +3502,13 @@ class UniDropdownComponent extends BaseComponent {
     popoverId = uniqueId('uni-dropdown');
     paddingVertical = input(...(ngDevMode ? [undefined, { debugName: "paddingVertical" }] : /* istanbul ignore next */ []));
     paddingHorizontal = input(...(ngDevMode ? [undefined, { debugName: "paddingHorizontal" }] : /* istanbul ignore next */ []));
+    // Per-instance panel-chrome overrides; undefined falls back to the theme's
+    // `dropdown` options, so hosts like uni-menu can restyle their panel
+    // without forking the shared dropdown entry.
+    border = input(...(ngDevMode ? [undefined, { debugName: "border" }] : /* istanbul ignore next */ []));
+    borderRadius = input(...(ngDevMode ? [undefined, { debugName: "borderRadius" }] : /* istanbul ignore next */ []));
+    shadow = input(...(ngDevMode ? [undefined, { debugName: "shadow" }] : /* istanbul ignore next */ []));
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
     dropdownShowing = output();
     dropdownHiding = output();
     dropdownRef;
@@ -3432,17 +3633,17 @@ class UniDropdownComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDropdownComponent, isStandalone: true, selector: "uni-dropdown", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "ariaHasPopup", isSignal: true, isRequired: false, transformFunction: null }, paddingVertical: { classPropertyName: "paddingVertical", publicName: "paddingVertical", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownShowing: "dropdownShowing", dropdownHiding: "dropdownHiding" }, providers: [{ provide: COMPONENT_NAME, useValue: 'dropdown' }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDropdownComponent, isStandalone: true, selector: "uni-dropdown", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "ariaHasPopup", isSignal: true, isRequired: false, transformFunction: null }, paddingVertical: { classPropertyName: "paddingVertical", publicName: "paddingVertical", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownShowing: "dropdownShowing", dropdownHiding: "dropdownHiding" }, providers: [{ provide: COMPONENT_NAME, useValue: 'dropdown' }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <!-- 1. The native 'popover' attribute brings it to the top layer with native light-dismiss -->
     <div #dropdown popover="auto" [id]="popoverId" [class]="dropdownClass()">
       <div
         box-layout
-        [border]="componentOptions().border"
-        [borderRadius]="componentOptions().borderRadius"
+        [border]="border() ?? componentOptions().border"
+        [borderRadius]="borderRadius() ?? componentOptions().borderRadius"
         [paddingVertical]="paddingVertical()"
         [paddingHorizontal]="paddingHorizontal()"
-        [color]="componentOptions().color"
-        [shadow]="componentOptions().shadow"
+        [color]="color() ?? componentOptions().color"
+        [shadow]="shadow() ?? componentOptions().shadow"
       >
         <ng-content></ng-content>
       </div>
@@ -3460,12 +3661,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
     <div #dropdown popover="auto" [id]="popoverId" [class]="dropdownClass()">
       <div
         box-layout
-        [border]="componentOptions().border"
-        [borderRadius]="componentOptions().borderRadius"
+        [border]="border() ?? componentOptions().border"
+        [borderRadius]="borderRadius() ?? componentOptions().borderRadius"
         [paddingVertical]="paddingVertical()"
         [paddingHorizontal]="paddingHorizontal()"
-        [color]="componentOptions().color"
-        [shadow]="componentOptions().shadow"
+        [color]="color() ?? componentOptions().color"
+        [shadow]="shadow() ?? componentOptions().shadow"
       >
         <ng-content></ng-content>
       </div>
@@ -3473,13 +3674,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
   `,
                     providers: [{ provide: COMPONENT_NAME, useValue: 'dropdown' }],
                 }]
-        }], propDecorators: { trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHasPopup", required: false }] }], paddingVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingVertical", required: false }] }], paddingHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingHorizontal", required: false }] }], dropdownShowing: [{ type: i0.Output, args: ["dropdownShowing"] }], dropdownHiding: [{ type: i0.Output, args: ["dropdownHiding"] }], dropdownRef: [{
+        }], propDecorators: { trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHasPopup", required: false }] }], paddingVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingVertical", required: false }] }], paddingHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingHorizontal", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], dropdownShowing: [{ type: i0.Output, args: ["dropdownShowing"] }], dropdownHiding: [{ type: i0.Output, args: ["dropdownHiding"] }], dropdownRef: [{
                 type: ViewChild,
                 args: ['dropdown', { static: true }]
             }] } });
 
-class UniExpandComponent {
+class UniExpandComponent extends BaseComponent {
     collapsed = model(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /**
+     * Exact per-instance duration in seconds. Bypasses size-aware scaling —
+     * an explicit number means the consumer wants that number. Omitted, the
+     * duration derives from the `expand` theme options' `transitionSpeed`
+     * scaled by content height (see `duration`).
+     */
+    transitionSpeed = input(...(ngDevMode ? [undefined, { debugName: "transitionSpeed" }] : /* istanbul ignore next */ []));
     /** Referenced by the controlling toggle's aria-controls. */
     regionId = uniqueId('uni-expand');
     /**
@@ -3488,12 +3696,49 @@ class UniExpandComponent {
      * animations only after the first render, i.e. on real state changes.
      */
     ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    contentRef = viewChild('content', ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
+    /**
+     * Last observed content height. Retained after collapse (the observer
+     * disconnects but the signal keeps its value) so the leave animation and
+     * the next reveal are timed to the real size. Until the first measurement
+     * lands — one frame into the very first reveal — the duration falls back
+     * to the unscaled token; CSS remaps animation progress when
+     * `animation-duration` updates, so the retime is imperceptible that early.
+     */
+    contentHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "contentHeight" }] : /* istanbul ignore next */ []));
     constructor() {
+        super();
         afterNextRender(() => this.ready.set(true));
+        afterRenderEffect((onCleanup) => {
+            const content = this.contentRef()?.nativeElement;
+            if (!content)
+                return;
+            const observer = new ResizeObserver(() => this.contentHeight.set(content.scrollHeight));
+            observer.observe(content);
+            onCleanup(() => observer.disconnect());
+        });
     }
     toggle() {
         this.collapsed.update((collapsed) => !collapsed);
     }
+    /**
+     * The resolved duration in seconds: the `transitionSpeed` input verbatim,
+     * or the `expand` theme options' `transitionSpeed` scaled by content height
+     * (`expandDuration` — √-of-height, clamped) so short regions stay snappy
+     * and tall ones aren't rushed. The public sync hook: Expand Area binds this
+     * to its toggle so the chevron rotates on the region's clock, and consumers
+     * can bind adjacent styling the same way
+     * (`[style.transition-duration]="expand.duration() + 's'"`).
+     */
+    duration = computed(() => {
+        const override = this.transitionSpeed();
+        if (override !== undefined)
+            return override;
+        const speed = this.componentOptions().transitionSpeed ?? EXPAND_DEFAULT_SPEED;
+        const height = this.contentHeight();
+        return height === undefined ? speed : expandDuration(height, speed);
+    }, ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+    cssDuration = computed(() => `${this.duration()}s`, ...(ngDevMode ? [{ debugName: "cssDuration" }] : /* istanbul ignore next */ []));
     /**
      * A custom element is `display: inline` by default, which would lay the
      * animated grid out as a block-in-inline box and distort the revealed
@@ -3519,23 +3764,29 @@ class UniExpandComponent {
      * decorations that legitimately paint outside the region (focus rings,
      * offset outlines). Angular removes a leaving node on the next frame when it
      * detects no animation, so nothing hangs when the guard strips them.
+     *
+     * The classes carry the default duration; the animated div's
+     * `[style.animation-duration]` binding overrides it with the resolved
+     * `duration`, so the classes stay static while timing tracks the theme and
+     * the content's size through signals alone.
      */
     expandAnimation = css(motionSafe({
         overflow: 'hidden',
-        animation: `${this.expand} ease-in 350ms`,
+        animation: `${this.expand} ease-in-out ${EXPAND_DEFAULT_SPEED}s`,
     }));
     collapseAnimation = css(motionSafe({
         overflow: 'hidden',
-        animation: `${this.collapse} ease-in 350ms`,
+        animation: `${this.collapse} ease-in-out ${EXPAND_DEFAULT_SPEED}s`,
     }));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniExpandComponent, isStandalone: true, selector: "uni-expand", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "attr.id": "regionId", "class": "hostClassName" } }, ngImport: i0, template: `@if (!collapsed()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniExpandComponent, isStandalone: true, selector: "uni-expand", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, transitionSpeed: { classPropertyName: "transitionSpeed", publicName: "transitionSpeed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "attr.id": "regionId", "class": "hostClassName" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'expand' }], viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `@if (!collapsed()) {
     <div
       [animate.enter]="ready() ? expandAnimation : ''"
       [animate.leave]="collapseAnimation"
       [class]="expandClassName"
+      [style.animation-duration]="cssDuration()"
     >
-      <div [class]="contentClassName">
+      <div #content [class]="contentClassName">
         <ng-content></ng-content>
       </div>
     </div>
@@ -3547,13 +3798,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'uni-expand',
                     imports: [],
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'expand' }],
                     template: `@if (!collapsed()) {
     <div
       [animate.enter]="ready() ? expandAnimation : ''"
       [animate.leave]="collapseAnimation"
       [class]="expandClassName"
+      [style.animation-duration]="cssDuration()"
     >
-      <div [class]="contentClassName">
+      <div #content [class]="contentClassName">
         <ng-content></ng-content>
       </div>
     </div>
@@ -3563,7 +3816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         '[class]': 'hostClassName',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], transitionSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionSpeed", required: false }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
 
 /**
  * UniExpandComponent Barrel File
@@ -3571,182 +3824,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * This file exports all public-facing elements of the expand component.
  */
 
-class UniTooltipComponent extends BaseComponent {
-    elRef = inject(ElementRef);
-    renderer = inject(Renderer2);
-    timer = useTimer();
-    isMouseInside = signal(false, ...(ngDevMode ? [{ debugName: "isMouseInside" }] : /* istanbul ignore next */ []));
-    /** Whether the bubble is currently shown (or fading out). */
-    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    tooltipId = uniqueId('uni-tooltip');
-    anchorName = newAnchorName();
-    hoverDelay = input(500, ...(ngDevMode ? [{ debugName: "hoverDelay" }] : /* istanbul ignore next */ []));
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    placement = input('top', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
-    inlineText = input(false, ...(ngDevMode ? [{ debugName: "inlineText" }] : /* istanbul ignore next */ []));
-    /** @deprecated The tooltip renders in the native top layer; ignored. */
-    appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : /* istanbul ignore next */ []));
-    tipRef = viewChild.required('tip');
-    constructor() {
-        super();
-        effect(() => {
-            const timerActive = this.timer.isActive();
-            const mouseInside = this.isMouseInside();
-            // If the timer finished and the mouse is still inside, show tooltip
-            if (!timerActive && mouseInside) {
-                this.showTooltip();
-            }
-            // If the mouse left and the timer is not running, hide tooltip
-            else if (!mouseInside) {
-                this.hideTooltip();
-            }
-        });
-        // A tooltip must be reachable by keyboard (WCAG 1.4.13): when the
-        // projected content has no focusable element, the host itself joins
-        // the tab sequence. The bubble is always in the DOM, so the describedby
-        // relationship is wired once, on the element that receives focus.
-        afterNextRender(() => {
-            const host = this.elRef.nativeElement;
-            if (!host.querySelector(FOCUSABLE_SELECTOR) && !host.matches(FOCUSABLE_SELECTOR)) {
-                this.renderer.setAttribute(host, 'tabindex', '0');
-            }
-            this.renderer.setAttribute(resolveFocusTarget(host), 'aria-describedby', this.tooltipId);
-        });
-    }
-    onFocusIn(event) {
-        // Only keyboard-driven focus shows the tooltip immediately; mouse
-        // interaction keeps the hover-delay behavior.
-        if (event.target.matches(':focus-visible')) {
-            this.showTooltip();
-        }
-    }
-    onFocusOut() {
-        if (!this.isMouseInside()) {
-            this.hideTooltip();
-        }
-    }
-    onEscape(event) {
-        if (this.visible()) {
-            // Dismiss only the tooltip, not an enclosing dialog/popover
-            event.stopPropagation();
-            this.hideTooltip();
-        }
-    }
-    toggleTooltip() {
-        if (this.visible()) {
-            this.hideTooltip();
-        }
-        else {
-            this.showTooltip();
-        }
-    }
-    mouseenter() {
-        this.isMouseInside.set(true);
-        this.timer.start(this.hoverDelay());
-    }
-    mouseleave() {
-        this.isMouseInside.set(false);
-        this.timer.stop();
-    }
-    showTooltip() {
-        if (this.visible())
-            return;
-        const tip = this.tipRef().nativeElement;
-        tip.showPopover();
-        this.renderer.setAttribute(tip, 'fade', 'in');
-        this.visible.set(true);
-    }
-    hideTooltip() {
-        if (!this.visible())
-            return;
-        this.renderer.setAttribute(this.tipRef().nativeElement, 'fade', 'out');
-    }
-    onAnimationEnd(event) {
-        if (event.animationName.includes(this.tooltipFadeOut)) {
-            this.tipRef().nativeElement.hidePopover();
-            this.visible.set(false);
-        }
-    }
-    className = computed(() => css({
-        display: 'inline-flex',
-        anchorName: this.anchorName,
-    }, this.inlineText() && {
-        cursor: 'help',
-        textDecoration: 'underline',
-        textDecorationStyle: 'dotted',
-    }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tooltipFadeIn = keyframes({ ...fadeIn });
-    tooltipFadeOut = keyframes({ ...fadeOut });
-    tooltipClassName = computed(() => css([
-        {
-            ...this.theme.colorPair(this.componentOptions().color),
-            ...this.theme.radius(this.componentOptions().borderRadius),
-            ...this.theme.boxShadow(this.componentOptions().shadow),
-            ...this.theme.typeface(this.componentOptions().typeface),
-            border: 'none',
-            padding: 5,
-            width: 'max-content',
-            ...anchorStyles(this.anchorName, this.placement(), { mainAxis: 6 }),
-            '&[fade="in"]': {
-                animation: `${this.tooltipFadeIn} ease-in 350ms`,
-            },
-            '&[fade="out"]': {
-                animation: `${this.tooltipFadeOut} ease-in 350ms`,
-            },
-        },
-    ]), ...(ngDevMode ? [{ debugName: "tooltipClassName" }] : /* istanbul ignore next */ []));
-    arrowClassName = computed(() => css({
-        ...this.theme.colorPair(this.componentOptions().color),
-        ...anchorArrowStyles(this.placement()),
-    }), ...(ngDevMode ? [{ debugName: "arrowClassName" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniTooltipComponent, isStandalone: true, selector: "uni-tooltip", inputs: { hoverDelay: { classPropertyName: "hoverDelay", publicName: "hoverDelay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, inlineText: { classPropertyName: "inlineText", publicName: "inlineText", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggleTooltip()", "mouseenter": "mouseenter()", "mouseleave": "mouseleave()", "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape($event)" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'tooltip' }], viewQueries: [{ propertyName: "tipRef", first: true, predicate: ["tip"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content
-    ><span
-      #tip
-      popover="manual"
-      role="tooltip"
-      [id]="tooltipId"
-      [class]="tooltipClassName()"
-      (mouseenter)="isMouseInside.set(true)"
-      (mouseleave)="isMouseInside.set(false)"
-      (animationend)="onAnimationEnd($event)"
-      >{{ label() }}<span [class]="arrowClassName()"></span
-    ></span>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTooltipComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'uni-tooltip',
-                    imports: [],
-                    // The bubble lives declaratively in the template as a manual popover: the
-                    // top layer escapes any overflow context (which made appendToBody obsolete)
-                    // and native CSS anchor positioning keeps it attached to the host.
-                    template: `<ng-content></ng-content
-    ><span
-      #tip
-      popover="manual"
-      role="tooltip"
-      [id]="tooltipId"
-      [class]="tooltipClassName()"
-      (mouseenter)="isMouseInside.set(true)"
-      (mouseleave)="isMouseInside.set(false)"
-      (animationend)="onAnimationEnd($event)"
-      >{{ label() }}<span [class]="arrowClassName()"></span
-    ></span>`,
-                    providers: [{ provide: COMPONENT_NAME, useValue: 'tooltip' }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': 'className()',
-                        '(click)': 'toggleTooltip()',
-                        '(mouseenter)': 'mouseenter()',
-                        '(mouseleave)': 'mouseleave()',
-                        '(focusin)': 'onFocusIn($event)',
-                        '(focusout)': 'onFocusOut()',
-                        '(keydown.escape)': 'onEscape($event)',
-                    },
-                }]
-        }], 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 }] }] } });
-
 /**
  * Trigger for a {@link UniExpandComponent} region.
  *
@@ -3765,13 +3842,19 @@ class UniExpandToggleComponent {
     label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     /** Muted qualifier beside the label ("for POs & custom orders"). Needs `label`. */
     sublabel = input(...(ngDevMode ? [undefined, { debugName: "sublabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Rotation duration in seconds. Expand Area binds the region's resolved
+     * `duration` here so chevron and reveal share one clock even when the
+     * region is size-scaled or overridden per instance.
+     */
+    transitionSpeed = input(...(ngDevMode ? [undefined, { debugName: "transitionSpeed" }] : /* istanbul ignore next */ []));
+    /** Fallback clock when no `transitionSpeed` is bound: the `expand` theme options' `transitionSpeed`. */
+    expandOptions = inject(ThemeService).getComponentOptions('expand');
+    speed = computed(() => this.transitionSpeed() ?? this.expandOptions().transitionSpeed ?? EXPAND_DEFAULT_SPEED, ...(ngDevMode ? [{ debugName: "speed" }] : /* istanbul ignore next */ []));
     /**
      * The glyph rotates, never the host.
      *
-     * The host is the tooltip's positioning box — `uni-tooltip` puts its
-     * `anchor-name` on its own element, nested inside ours — so rotating the
-     * host swings the anchor through the turn and the bubble visibly bobs. The
-     * host is also taller than the glyph (an inline-level box reserves baseline
+     * The host is taller than the glyph (an inline-level box reserves baseline
      * descender space), so spinning it about its own centre walks the glyph
      * off-centre. `uni-icon` is a centred square sized to the glyph, which makes
      * it the only box here that rotates symmetrically. It also keeps a label
@@ -3780,7 +3863,9 @@ class UniExpandToggleComponent {
     glyphStyles = computed(() => ({
         '& uni-icon': {
             flexShrink: 0,
-            ...motionSafe({ transition: 'transform 350ms ease-in-out' }),
+            ...motionSafe({
+                transition: `transform ${this.speed()}s ease-in-out`,
+            }),
             transform: this.collapsed() ? 'rotate(-180deg)' : 'rotate(0)',
         },
     }), ...(ngDevMode ? [{ debugName: "glyphStyles" }] : /* istanbul ignore next */ []));
@@ -3817,7 +3902,7 @@ class UniExpandToggleComponent {
         this.collapsed.update((collapsed) => !collapsed);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniExpandToggleComponent, isStandalone: true, selector: "uni-expand-toggle", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class": "className()", "attr.toggled": "collapsed() || null" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniExpandToggleComponent, isStandalone: true, selector: "uni-expand-toggle", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, transitionSpeed: { classPropertyName: "transitionSpeed", publicName: "transitionSpeed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class": "className()", "attr.toggled": "collapsed() || null" } }, ngImport: i0, template: `
     @if (label()) {
       <button
         type="button"
@@ -3835,25 +3920,23 @@ class UniExpandToggleComponent {
         </span>
       </button>
     } @else {
-      <uni-tooltip [label]="collapsed() ? 'Expand' : 'Collapse'" placement="right">
-        <button
-          icon-button
-          iconName="chevronUp"
-          (click)="toggle()"
-          [attr.aria-expanded]="!collapsed()"
-          [attr.aria-controls]="ariaControls() || null"
-        >
-          {{ collapsed() ? 'Expand' : 'Collapse' }}
-        </button>
-      </uni-tooltip>
+      <button
+        icon-button
+        iconName="chevronUp"
+        (click)="toggle()"
+        [attr.aria-expanded]="!collapsed()"
+        [attr.aria-controls]="ariaControls() || null"
+      >
+        {{ collapsed() ? 'Expand' : 'Collapse' }}
+      </button>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniTooltipComponent, selector: "uni-tooltip", inputs: ["hoverDelay", "label", "placement", "inlineText", "appendToBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandToggleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'uni-expand-toggle',
-                    imports: [UniIconComponent, UniIconButtonComponent, UniTextComponent, UniTooltipComponent],
+                    imports: [UniIconComponent, UniIconButtonComponent, UniTextComponent],
                     template: `
     @if (label()) {
       <button
@@ -3872,17 +3955,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         </span>
       </button>
     } @else {
-      <uni-tooltip [label]="collapsed() ? 'Expand' : 'Collapse'" placement="right">
-        <button
-          icon-button
-          iconName="chevronUp"
-          (click)="toggle()"
-          [attr.aria-expanded]="!collapsed()"
-          [attr.aria-controls]="ariaControls() || null"
-        >
-          {{ collapsed() ? 'Expand' : 'Collapse' }}
-        </button>
-      </uni-tooltip>
+      <button
+        icon-button
+        iconName="chevronUp"
+        (click)="toggle()"
+        [attr.aria-expanded]="!collapsed()"
+        [attr.aria-controls]="ariaControls() || null"
+      >
+        {{ collapsed() ? 'Expand' : 'Collapse' }}
+      </button>
     }
   `,
                     host: {
@@ -3891,7 +3972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }] } });
+        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], transitionSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionSpeed", required: false }] }] } });
 
 class UniExpandAreaComponent {
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -3927,6 +4008,7 @@ class UniExpandAreaComponent {
           style="display: inline-flex; margin: -2px"
           [collapsed]="initCollapsed()"
           [ariaControls]="expand.regionId"
+          [transitionSpeed]="expand.duration()"
         />
       </div>
 
@@ -3936,7 +4018,7 @@ class UniExpandAreaComponent {
         </div>
       </uni-expand>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniExpandToggleComponent, selector: "uni-expand-toggle", inputs: ["collapsed", "ariaControls", "label", "sublabel"], outputs: ["collapsedChange"] }, { kind: "component", type: UniExpandComponent, selector: "uni-expand", inputs: ["collapsed"], outputs: ["collapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniExpandToggleComponent, selector: "uni-expand-toggle", inputs: ["collapsed", "ariaControls", "label", "sublabel", "transitionSpeed"], outputs: ["collapsedChange"] }, { kind: "component", type: UniExpandComponent, selector: "uni-expand", inputs: ["collapsed", "transitionSpeed"], outputs: ["collapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandAreaComponent, decorators: [{
             type: Component,
@@ -3968,6 +4050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
           style="display: inline-flex; margin: -2px"
           [collapsed]="initCollapsed()"
           [ariaControls]="expand.regionId"
+          [transitionSpeed]="expand.duration()"
         />
       </div>
 
@@ -4274,32 +4357,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * This file exports all public-facing elements of the json-view component.
  */
 
-class UniMenuItemComponent extends UniBoxComponent {
+const isDivider = (item) => 'divider' in item;
+
+class UniMenuItemComponent {
+    theme = inject(ThemeService);
     _elementRef = inject(ElementRef);
-    display = input('flex', ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
-    flexDirection = input('row', ...(ngDevMode ? [{ debugName: "flexDirection" }] : /* istanbul ignore next */ []));
-    alignItems = input('center', ...(ngDevMode ? [{ debugName: "alignItems" }] : /* istanbul ignore next */ []));
-    paddingHorizontal = input('md', ...(ngDevMode ? [{ debugName: "paddingHorizontal" }] : /* istanbul ignore next */ []));
-    gap = input('md', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
     label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : /* istanbul ignore next */ []));
     context = input(...(ngDevMode ? [undefined, { debugName: "context" }] : /* istanbul ignore next */ []));
     symbolName = input(...(ngDevMode ? [undefined, { debugName: "symbolName" }] : /* istanbul ignore next */ []));
     active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
-    hoverColor = input('primary-container', ...(ngDevMode ? [{ debugName: "hoverColor" }] : /* istanbul ignore next */ []));
+    /** Tone routed through the theme's `menuItem` variants (e.g. 'warn'). */
+    variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Per-instance override of the theme's `menuItem.hoverColor`. */
+    hoverColor = input(...(ngDevMode ? [undefined, { debugName: "hoverColor" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    menuItemClassName = computed(() => css([
-        {
-            cursor: 'pointer',
-            transition: 'all 0.35s ease',
-            height: 38,
-            // Roving focus highlights items the same way hover does
-            '&:hover, &:focus': {
-                ...this.theme.colorPair(this.hoverColor()),
-                outline: 'none',
+    options = computed(() => this.theme.getComponentOptions('menuItem')(), ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    activeSymbol = computed(() => this.options().activeSymbol, ...(ngDevMode ? [{ debugName: "activeSymbol" }] : /* istanbul ignore next */ []));
+    /** Typography comes from the host's themed typeface; the span only lays out. */
+    LabelClassName = css({ display: 'block', whiteSpace: 'nowrap' });
+    menuItemClassName = computed(() => {
+        const options = this.options();
+        const variant = this.variant();
+        const variantStyle = variant
+            ? this.theme.component('menuItem')().variants?.[variant]
+            : undefined;
+        const transitionSpeed = options.transitionSpeed ?? 0;
+        return css([
+            {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                boxSizing: 'border-box',
+                cursor: 'pointer',
+                height: options.height,
+                ...this.theme.horizontalPadding(options.paddingHorizontal),
+                ...this.theme.gap(options.gap),
+                ...this.theme.radius(options.borderRadius),
+                ...this.theme.typeface(options.typeface),
+                ...this.theme.color(options.textColor),
+                // Roving focus highlights items the same way hover does — but only
+                // when focus is keyboard-driven. `onOpened()` focuses an item on every
+                // open, including pointer opens, and plain `:focus` would paint that
+                // as a highlight the mouse user never asked for, reading as a
+                // preselected item. `:focus-visible` excludes programmatic focus that
+                // follows a click while still matching keyboard navigation.
+                [HOVER_OR_KEYBOARD_FOCUS]: {
+                    ...this.theme.colorPair(this.hoverColor() ?? options.hoverColor),
+                    outline: 'none',
+                },
+                '&[aria-disabled="true"]': {
+                    color: this.theme.colors()['on-disabled-surface'],
+                    pointerEvents: 'none',
+                },
             },
-        },
-    ]), ...(ngDevMode ? [{ debugName: "menuItemClassName" }] : /* istanbul ignore next */ []));
+            transitionSpeed > 0 && { transition: `all ${transitionSpeed}s ease` },
+            // Variant tones override the base look. A variant that restyles the
+            // highlight must key it with HOVER_OR_KEYBOARD_FOCUS — Emotion merges by
+            // exact selector text, so a variant spelling it `&:hover, &:focus`
+            // would both miss the override and reintroduce the phantom highlight.
+            { ...variantStyle },
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "menuItemClassName" }] : /* istanbul ignore next */ []));
     /** Host element, used by Menu for roving-focus bookkeeping. */
     get host() {
         return this._elementRef.nativeElement;
@@ -4307,21 +4426,22 @@ class UniMenuItemComponent extends UniBoxComponent {
     focus() {
         this._elementRef.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMenuItemComponent, isStandalone: true, selector: "[uni-menu-item], [menu-item]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, hoverColor: { classPropertyName: "hoverColor", publicName: "hoverColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, properties: { "attr.aria-disabled": "disabled() ? 'true' : null", "attr.aria-current": "active() ? 'true' : null", "class": "menuItemClassName()" } }, usesInheritance: true, ngImport: i0, template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n  <uni-symbol [name]=\"symbol\"></uni-symbol>\n}\n<div box-layout [grow]=\"1\">\n  @if (tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"context()\"></ng-container>\n  } @else {\n    <span uni-text=\"label\" display=\"block\" [nowrap]=\"true\">\n      {{ label() }}\n    </span>\n  }\n</div>\n@if (active()) {\n  <uni-symbol name=\"check\"></uni-symbol>\n}\n", styles: [":host.disabled{color:#ddd;pointer-events:none}\n"], dependencies: [{ kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMenuItemComponent, isStandalone: true, selector: "[uni-menu-item], [menu-item]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hoverColor: { classPropertyName: "hoverColor", publicName: "hoverColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, properties: { "attr.aria-disabled": "disabled() ? 'true' : null", "attr.aria-current": "active() ? 'true' : null", "class": "menuItemClassName()" } }, ngImport: i0, template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n  <uni-symbol [name]=\"symbol\"></uni-symbol>\n}\n<div box-layout [grow]=\"1\">\n  @if (tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"context()\"></ng-container>\n  } @else {\n    <span [class]=\"LabelClassName\">{{ label() }}</span>\n  }\n</div>\n@let activeSym = activeSymbol();\n@if (active() && activeSym) {\n  <uni-symbol [name]=\"activeSym\"></uni-symbol>\n}\n", dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[uni-menu-item], [menu-item]', imports: [UniTextComponent, UniSymbolComponent, UniBoxComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: '[uni-menu-item], [menu-item]', imports: [UniSymbolComponent, UniBoxComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'menuitem',
                         tabindex: '-1',
                         '[attr.aria-disabled]': "disabled() ? 'true' : null",
                         '[attr.aria-current]': "active() ? 'true' : null",
                         '[class]': 'menuItemClassName()',
-                    }, template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n  <uni-symbol [name]=\"symbol\"></uni-symbol>\n}\n<div box-layout [grow]=\"1\">\n  @if (tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"context()\"></ng-container>\n  } @else {\n    <span uni-text=\"label\" display=\"block\" [nowrap]=\"true\">\n      {{ label() }}\n    </span>\n  }\n</div>\n@if (active()) {\n  <uni-symbol name=\"check\"></uni-symbol>\n}\n", styles: [":host.disabled{color:#ddd;pointer-events:none}\n"] }]
-        }], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], flexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexDirection", required: false }] }], alignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignItems", required: false }] }], paddingHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingHorizontal", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], hoverColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+                    }, template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n  <uni-symbol [name]=\"symbol\"></uni-symbol>\n}\n<div box-layout [grow]=\"1\">\n  @if (tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"context()\"></ng-container>\n  } @else {\n    <span [class]=\"LabelClassName\">{{ label() }}</span>\n  }\n</div>\n@let activeSym = activeSymbol();\n@if (active() && activeSym) {\n  <uni-symbol [name]=\"activeSym\"></uni-symbol>\n}\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], hoverColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class UniMenuComponent {
+    theme = inject(ThemeService);
     // Modern Signal Inputs for perfect Zoneless tracking
     menuItems = input.required(...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
     activeItem = input(...(ngDevMode ? [undefined, { debugName: "activeItem" }] : /* istanbul ignore next */ []));
@@ -4329,6 +4449,21 @@ class UniMenuComponent {
     // Modern Signal Output
     menuItemClicked = output();
     TriggerClassName = css({ display: 'inline-block' });
+    /** Type guard for the template: dividers render as separators, not items. */
+    isDivider = isDivider;
+    menuOptions = computed(() => this.theme.getComponentOptions('menu')(), ...(ngDevMode ? [{ debugName: "menuOptions" }] : /* istanbul ignore next */ []));
+    menuClassName = computed(() => css({ minWidth: this.menuOptions().minWidth }), ...(ngDevMode ? [{ debugName: "menuClassName" }] : /* istanbul ignore next */ []));
+    dividerClassName = computed(() => {
+        const { dividerBorder, dividerSpacing } = this.menuOptions();
+        // Read spacing directly: getSpacing('none') yields the string 'none',
+        // which is invalid as a margin and must resolve to 0 instead.
+        const spacing = this.theme.spacing()[dividerSpacing ?? 'none'];
+        return css({
+            ...this.theme.borderTop(dividerBorder),
+            marginBlock: spacing,
+            marginInline: spacing,
+        });
+    }, ...(ngDevMode ? [{ debugName: "dividerClassName" }] : /* istanbul ignore next */ []));
     itemComponents = viewChildren(UniMenuItemComponent, ...(ngDevMode ? [{ debugName: "itemComponents" }] : /* istanbul ignore next */ []));
     dropdownComponent = viewChild(UniDropdownComponent, ...(ngDevMode ? [{ debugName: "dropdownComponent" }] : /* istanbul ignore next */ []));
     /** Which item receives focus when the menu opens (ArrowUp opens onto the last item). */
@@ -4340,7 +4475,7 @@ class UniMenuComponent {
         });
     }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
     handleMenuItemClick(item, dropdown) {
-        if (item.action) {
+        if (!isDivider(item) && item.action) {
             item.action();
         }
         this.menuItemClicked.emit(item);
@@ -4437,7 +4572,12 @@ class UniMenuComponent {
         [trigger]="trigger"
         [placement]="placement()"
         ariaHasPopup="menu"
-        paddingVertical="xs"
+        [color]="menuOptions().color"
+        [border]="menuOptions().border"
+        [borderRadius]="menuOptions().borderRadius"
+        [shadow]="menuOptions().shadow"
+        [paddingVertical]="menuOptions().paddingVertical"
+        [paddingHorizontal]="menuOptions().paddingHorizontal"
         #dropdown
         (dropdownShowing)="onOpened()"
       >
@@ -4445,23 +4585,29 @@ class UniMenuComponent {
              the focused item (menu-item hosts carry tabindex="-1"), and
              Enter/Space activation is dispatched from onMenuKeydown. -->
         <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
-        <div role="menu" (keydown)="onMenuKeydown($event, dropdown)">
+        <div role="menu" [class]="menuClassName()" (keydown)="onMenuKeydown($event, dropdown)">
           @for (item of menuItems(); track item) {
-            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
-            <div
-              menu-item
-              [label]="item.label"
-              [symbolName]="item.symbolName"
-              [active]="activeItem() === item"
-              [template]="item.template"
-              [context]="item.context"
-              (click)="handleMenuItemClick(item, dropdown)"
-            ></div>
+            @if (isDivider(item)) {
+              <div role="separator" [class]="dividerClassName()"></div>
+            } @else {
+              <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->
+              <div
+                menu-item
+                [label]="item.label"
+                [symbolName]="item.symbolName"
+                [active]="activeItem() === item"
+                [template]="item.template"
+                [context]="item.context"
+                [variant]="item.variant"
+                [disabled]="item.disabled ?? false"
+                (click)="handleMenuItemClick(item, dropdown)"
+              ></div>
+            }
           }
         </div>
       </uni-dropdown>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: UniMenuItemComponent, selector: "[uni-menu-item], [menu-item]", inputs: ["display", "flexDirection", "alignItems", "paddingHorizontal", "gap", "label", "template", "context", "symbolName", "active", "hoverColor", "disabled"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal"], outputs: ["dropdownShowing", "dropdownHiding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: UniMenuItemComponent, selector: "[uni-menu-item], [menu-item]", inputs: ["label", "template", "context", "symbolName", "active", "variant", "hoverColor", "disabled"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "color"], outputs: ["dropdownShowing", "dropdownHiding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuComponent, decorators: [{
             type: Component,
@@ -4482,7 +4628,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         [trigger]="trigger"
         [placement]="placement()"
         ariaHasPopup="menu"
-        paddingVertical="xs"
+        [color]="menuOptions().color"
+        [border]="menuOptions().border"
+        [borderRadius]="menuOptions().borderRadius"
+        [shadow]="menuOptions().shadow"
+        [paddingVertical]="menuOptions().paddingVertical"
+        [paddingHorizontal]="menuOptions().paddingHorizontal"
         #dropdown
         (dropdownShowing)="onOpened()"
       >
@@ -4490,18 +4641,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
              the focused item (menu-item hosts carry tabindex="-1"), and
              Enter/Space activation is dispatched from onMenuKeydown. -->
         <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
-        <div role="menu" (keydown)="onMenuKeydown($event, dropdown)">
+        <div role="menu" [class]="menuClassName()" (keydown)="onMenuKeydown($event, dropdown)">
           @for (item of menuItems(); track item) {
-            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
-            <div
-              menu-item
-              [label]="item.label"
-              [symbolName]="item.symbolName"
-              [active]="activeItem() === item"
-              [template]="item.template"
-              [context]="item.context"
-              (click)="handleMenuItemClick(item, dropdown)"
-            ></div>
+            @if (isDivider(item)) {
+              <div role="separator" [class]="dividerClassName()"></div>
+            } @else {
+              <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->
+              <div
+                menu-item
+                [label]="item.label"
+                [symbolName]="item.symbolName"
+                [active]="activeItem() === item"
+                [template]="item.template"
+                [context]="item.context"
+                [variant]="item.variant"
+                [disabled]="item.disabled ?? false"
+                (click)="handleMenuItemClick(item, dropdown)"
+              ></div>
+            }
           }
         </div>
       </uni-dropdown>
@@ -4578,11 +4735,38 @@ class UniMultiSelectDropdownComponent extends BaseComponent {
     // --- CONFIGURATION ---
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * What the field is for, e.g. "Fruits". Rendered visually hidden inside the
+     * trigger so its accessible name reads "Fruits, Apple, Pear" — without it a
+     * screen reader announces only the current selection, with no clue which
+     * field it belongs to.
+     */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Debounce for the filter box, matching the library's input debounce. */
+    debounceTime = input(200, ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ []));
+    srOnly = css(visuallyHidden);
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    queryTimer;
     filteredOptions = computed(() => {
         const filterText = this.query().toLowerCase();
         return this.options().filter((opt) => opt.label.toLowerCase().includes(filterText));
     }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    optionRefs = viewChildren('optionRow', ...(ngDevMode ? [{ debugName: "optionRefs" }] : /* istanbul ignore next */ []));
+    /**
+     * Roving focus over the options. The shared helper owns the index
+     * arithmetic — wrapping, Home/End, and never pointing past a list the
+     * filter has narrowed — the same contract `uni-search-input` and
+     * `uni-tag-input` use, so the keys behave identically across all three.
+     */
+    list = createListboxNavigation({
+        count: () => this.filteredOptions().length,
+        idPrefix: 'uni-multi-select',
+    });
+    /** Announced with the selection so the count is not left to guesswork. */
+    selectionSummary = computed(() => {
+        const count = this.value().length;
+        return count === 0 ? 'none selected' : `${count} selected`;
+    }, ...(ngDevMode ? [{ debugName: "selectionSummary" }] : /* istanbul ignore next */ []));
     // Derived display string
     selectedLabelsText = computed(() => {
         const selections = this.value();
@@ -4622,7 +4806,26 @@ class UniMultiSelectDropdownComponent extends BaseComponent {
         },
     }), ...(ngDevMode ? [{ debugName: "searchInputClass" }] : /* istanbul ignore next */ []));
     handleQueryInput(event) {
-        this.query.set(event.target.value);
+        const text = event.target.value;
+        // Debounced so a long option list is not re-filtered on every keystroke.
+        clearTimeout(this.queryTimer);
+        this.queryTimer = setTimeout(() => this.query.set(text), this.debounceTime());
+    }
+    /**
+     * Arrow keys walk the options from anywhere in the panel, including the
+     * filter box — previously the only way in was to Tab through every
+     * checkbox.
+     */
+    onPanelKeydown(event) {
+        if (!this.list.navigate(event))
+            return;
+        const row = this.optionRefs()[this.list.activeIndex()]?.nativeElement;
+        row?.querySelector('input, [tabindex]')?.focus();
+    }
+    /** Keeps the active index in step when focus lands on a row by pointer. */
+    onOptionFocus(index) {
+        this.list.show();
+        this.list.setActive(index);
     }
     selectAll() {
         if (this.disabled())
@@ -4657,7 +4860,7 @@ class UniMultiSelectDropdownComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectDropdownComponent, isStandalone: true, selector: "uni-multi-select-dropdown", 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 }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], usesInheritance: true, ngImport: i0, template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <span uni-text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</span>\n      <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  ariaHasPopup=\"dialog\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass()\"\n      [value]=\"query()\"\n      (input)=\"handleQueryInput($event)\"\n      placeholder=\"Search...\"\n      aria-label=\"Filter options\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div stack-layout gap=\"xs\" padding=\"xs\">\n    @for (option of filteredOptions(); track option.value) {\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"isOptionSelected(option)()\"\n        (checkedChange)=\"toggleOption(option, $event)\"\n        variant=\"primary\"\n        [disabled]=\"disabled()\"\n      >\n      </uni-checkbox>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n  </div>\n</uni-dropdown>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "component", type: UniStackComponent, selector: "[uni-stack-layout], [stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectDropdownComponent, isStandalone: true, selector: "uni-multi-select-dropdown", 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 }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRow"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  @if (label(); as fieldLabel) {\n    <span [class]=\"srOnly\">{{ fieldLabel }},</span>\n  }\n  <span [class]=\"srOnly\">{{ selectionSummary() }}</span>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <span uni-text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</span>\n      <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  ariaHasPopup=\"dialog\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n  <div (keydown)=\"onPanelKeydown($event)\">\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass()\"\n      [value]=\"query()\"\n      (input)=\"handleQueryInput($event)\"\n      placeholder=\"Search...\"\n      aria-label=\"Filter options\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div\n    stack-layout\n    gap=\"xs\"\n    padding=\"xs\"\n    role=\"group\"\n    [attr.aria-label]=\"label() ? label() + ' options' : 'Options'\"\n  >\n    @for (option of filteredOptions(); track option.value; let i = $index) {\n      <div #optionRow (focusin)=\"onOptionFocus(i)\">\n        <uni-checkbox\n          [label]=\"option.label\"\n          [checked]=\"isOptionSelected(option)()\"\n          (checkedChange)=\"toggleOption(option, $event)\"\n          variant=\"primary\"\n          [disabled]=\"disabled()\"\n        >\n        </uni-checkbox>\n      </div>\n    }\n    @if (filteredOptions().length === 0) {\n      <span uni-text=\"label\" role=\"status\">No options match.</span>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n  </div>\n  </div>\n</uni-dropdown>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "color"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "component", type: UniStackComponent, selector: "[uni-stack-layout], [stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { 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: UniMultiSelectDropdownComponent, decorators: [{
             type: Component,
@@ -4672,8 +4875,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         UniSymbolComponent,
                         UniRowComponent,
                         UniInputBoxComponent,
-                    ], providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <span uni-text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</span>\n      <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  ariaHasPopup=\"dialog\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass()\"\n      [value]=\"query()\"\n      (input)=\"handleQueryInput($event)\"\n      placeholder=\"Search...\"\n      aria-label=\"Filter options\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div stack-layout gap=\"xs\" padding=\"xs\">\n    @for (option of filteredOptions(); track option.value) {\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"isOptionSelected(option)()\"\n        (checkedChange)=\"toggleOption(option, $event)\"\n        variant=\"primary\"\n        [disabled]=\"disabled()\"\n      >\n      </uni-checkbox>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n  </div>\n</uni-dropdown>\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 }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+                    ], providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  @if (label(); as fieldLabel) {\n    <span [class]=\"srOnly\">{{ fieldLabel }},</span>\n  }\n  <span [class]=\"srOnly\">{{ selectionSummary() }}</span>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <span uni-text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</span>\n      <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  ariaHasPopup=\"dialog\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n  <div (keydown)=\"onPanelKeydown($event)\">\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass()\"\n      [value]=\"query()\"\n      (input)=\"handleQueryInput($event)\"\n      placeholder=\"Search...\"\n      aria-label=\"Filter options\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div\n    stack-layout\n    gap=\"xs\"\n    padding=\"xs\"\n    role=\"group\"\n    [attr.aria-label]=\"label() ? label() + ' options' : 'Options'\"\n  >\n    @for (option of filteredOptions(); track option.value; let i = $index) {\n      <div #optionRow (focusin)=\"onOptionFocus(i)\">\n        <uni-checkbox\n          [label]=\"option.label\"\n          [checked]=\"isOptionSelected(option)()\"\n          (checkedChange)=\"toggleOption(option, $event)\"\n          variant=\"primary\"\n          [disabled]=\"disabled()\"\n        >\n        </uni-checkbox>\n      </div>\n    }\n    @if (filteredOptions().length === 0) {\n      <span uni-text=\"label\" role=\"status\">No options match.</span>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n  </div>\n  </div>\n</uni-dropdown>\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 }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], optionRefs: [{ type: i0.ViewChildren, args: ['optionRow', { isSignal: true }] }] } });
 
 class UniNotificationBadgeComponent extends BaseComponent {
     count = input(undefined, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
@@ -5438,71 +5641,59 @@ class UniSearchInputComponent extends BaseComponent {
     search = output();
     suggestionSelected = output();
     field = viewChild.required(UniDebounceInputComponent);
-    listboxId = uniqueId('uni-search-listbox');
-    listOpen = signal(false, ...(ngDevMode ? [{ debugName: "listOpen" }] : /* istanbul ignore next */ []));
-    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     visibleSuggestions = computed(() => this.suggestions().slice(0, this.componentOptions().maxSuggestions ?? 8), ...(ngDevMode ? [{ debugName: "visibleSuggestions" }] : /* istanbul ignore next */ []));
-    showList = computed(() => this.listOpen() && this.visibleSuggestions().length > 0, ...(ngDevMode ? [{ debugName: "showList" }] : /* istanbul ignore next */ []));
-    activeOptionId = computed(() => this.activeIndex() >= 0 ? `${this.listboxId}-${this.activeIndex()}` : undefined, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
+    /** Shared combobox bookkeeping: open state, active option, ARIA ids. */
+    list = createListboxNavigation({
+        count: () => this.visibleSuggestions().length,
+        idPrefix: 'uni-search-listbox',
+    });
+    listboxId = this.list.listboxId;
     hasQuery = computed(() => !!this.field()?.value(), ...(ngDevMode ? [{ debugName: "hasQuery" }] : /* istanbul ignore next */ []));
     handleChange(value) {
-        this.listOpen.set(true);
-        this.activeIndex.set(-1);
+        this.list.show();
+        this.list.setActive(-1);
         this.change.emit(value);
     }
     submit() {
-        const active = this.activeIndex();
-        if (this.showList() && active >= 0) {
+        const active = this.list.activeIndex();
+        if (this.list.open() && active >= 0) {
             this.select(this.visibleSuggestions()[active]);
             return;
         }
-        this.listOpen.set(false);
+        this.list.hide();
         this.search.emit(this.field().value() ?? '');
     }
     select(suggestion) {
         this.field().value.set(suggestion);
-        this.listOpen.set(false);
-        this.activeIndex.set(-1);
+        this.list.hide();
         this.suggestionSelected.emit(suggestion);
         this.search.emit(suggestion);
     }
     clear() {
         this.field().clear();
-        this.listOpen.set(false);
-        this.activeIndex.set(-1);
+        this.list.hide();
         this.field().focus();
     }
     onKeydown(event) {
+        // Arrows and Home/End belong to the shared listbox contract.
+        if (this.list.navigate(event))
+            return;
         switch (event.key) {
             case 'Enter':
                 event.preventDefault();
                 this.submit();
                 break;
-            case 'ArrowDown':
-            case 'ArrowUp': {
-                const count = this.visibleSuggestions().length;
-                if (count === 0)
-                    return;
-                event.preventDefault();
-                this.listOpen.set(true);
-                const delta = event.key === 'ArrowDown' ? 1 : -1;
-                this.activeIndex.set((this.activeIndex() + delta + count) % count);
-                break;
-            }
             case 'Escape':
-                if (this.showList())
-                    this.listOpen.set(false);
+                // Escape backs out one layer at a time: close the list, then clear.
+                if (this.list.open())
+                    this.list.hide();
                 else if (this.hasQuery())
                     this.clear();
                 break;
         }
     }
     onFocusOut(event) {
-        // Close unless focus moved somewhere inside the component.
-        const next = event.relatedTarget;
-        if (!next || !event.currentTarget.contains(next)) {
-            this.listOpen.set(false);
-        }
+        this.list.closeOnFocusOut(event);
     }
     className = computed(() => css({
         display: 'block',
@@ -5544,11 +5735,11 @@ class UniSearchInputComponent extends BaseComponent {
         });
     }, ...(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]=\"showList()\"\n    [ariaControls]=\"listboxId\"\n    [ariaActivedescendant]=\"activeOptionId()\"\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 (showList()) {\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]=\"listboxId + '-' + i\"\n          [class.active]=\"i === activeIndex()\"\n          [attr.aria-selected]=\"i === 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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSearchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uni-search-input', imports: [UniDebounceInputComponent, UniIconButtonComponent, UniSymbolComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'searchInput' }], host: { '[class]': 'className()' }, changeDetection: ChangeDetectionStrategy.OnPush, 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]=\"showList()\"\n    [ariaControls]=\"listboxId\"\n    [ariaActivedescendant]=\"activeOptionId()\"\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 (showList()) {\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]=\"listboxId + '-' + i\"\n          [class.active]=\"i === activeIndex()\"\n          [attr.aria-selected]=\"i === activeIndex()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"select(suggestion)\"\n        >\n          {{ suggestion }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n" }]
+            args: [{ selector: 'uni-search-input', imports: [UniDebounceInputComponent, UniIconButtonComponent, UniSymbolComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'searchInput' }], host: { '[class]': 'className()' }, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], search: [{ type: i0.Output, args: ["search"] }], suggestionSelected: [{ type: i0.Output, args: ["suggestionSelected"] }], field: [{ type: i0.ViewChild, args: [i0.forwardRef(() => UniDebounceInputComponent), { isSignal: true }] }] } });
 
 /**
@@ -5618,11 +5809,11 @@ class UniSelectComponent {
         pointerEvents: 'none' /* Crucial for clicking through */,
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSelectComponent, isStandalone: true, selector: "uni-select", 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 }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" [class]=\"selectClass\">\n  <select\n    [disabled]=\"disabled()\"\n    [value]=\"currentSelectedIndex()\"\n    (change)=\"handleSelectChange($event)\"\n    (blur)=\"touched.set(true)\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  >\n    @if (placeholder()) {\n      <option [value]=\"UNSELECTED\" disabled selected>\n        {{ placeholder() }}\n      </option>\n    }\n\n    @for (opt of options(); track opt.label; let i = $index) {\n      <option [value]=\"i\">\n        {{ opt.label }}\n      </option>\n    }\n  </select>\n  <uni-symbol name=\"keyboard_arrow_down\" [class]=\"arrowClass\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSelectComponent, isStandalone: true, selector: "uni-select", 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 }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" [class]=\"selectClass\">\n  <select\n    [disabled]=\"disabled()\"\n    [value]=\"currentSelectedIndex()\"\n    (change)=\"handleSelectChange($event)\"\n    (blur)=\"touched.set(true)\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  >\n    @if (placeholder()) {\n      <option [value]=\"UNSELECTED\" disabled selected>\n        {{ placeholder() }}\n      </option>\n    }\n\n    @for (opt of options(); track opt.label; let i = $index) {\n      <!-- [selected] evaluates during the option's own render, so a selection\n           pointing at an option added in the same change-detection pass still\n           applies (the select-level [value] write lands before new options\n           exist and is ignored by the browser). -->\n      <option [value]=\"i\" [selected]=\"currentSelectedIndex() === i.toString()\">\n        {{ opt.label }}\n      </option>\n    }\n  </select>\n  <uni-symbol name=\"keyboard_arrow_down\" [class]=\"arrowClass\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSelectComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-select', imports: [UniInputBoxComponent, UniSymbolComponent], template: "<uni-input-box [error]=\"showError()\" [class]=\"selectClass\">\n  <select\n    [disabled]=\"disabled()\"\n    [value]=\"currentSelectedIndex()\"\n    (change)=\"handleSelectChange($event)\"\n    (blur)=\"touched.set(true)\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  >\n    @if (placeholder()) {\n      <option [value]=\"UNSELECTED\" disabled selected>\n        {{ placeholder() }}\n      </option>\n    }\n\n    @for (opt of options(); track opt.label; let i = $index) {\n      <option [value]=\"i\">\n        {{ opt.label }}\n      </option>\n    }\n  </select>\n  <uni-symbol name=\"keyboard_arrow_down\" [class]=\"arrowClass\" />\n</uni-input-box>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-select', imports: [UniInputBoxComponent, UniSymbolComponent], template: "<uni-input-box [error]=\"showError()\" [class]=\"selectClass\">\n  <select\n    [disabled]=\"disabled()\"\n    [value]=\"currentSelectedIndex()\"\n    (change)=\"handleSelectChange($event)\"\n    (blur)=\"touched.set(true)\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  >\n    @if (placeholder()) {\n      <option [value]=\"UNSELECTED\" disabled selected>\n        {{ placeholder() }}\n      </option>\n    }\n\n    @for (opt of options(); track opt.label; let i = $index) {\n      <!-- [selected] evaluates during the option's own render, so a selection\n           pointing at an option added in the same change-detection pass still\n           applies (the select-level [value] write lands before new options\n           exist and is ignored by the browser). -->\n      <option [value]=\"i\" [selected]=\"currentSelectedIndex() === i.toString()\">\n        {{ opt.label }}\n      </option>\n    }\n  </select>\n  <uni-symbol name=\"keyboard_arrow_down\" [class]=\"arrowClass\" />\n</uni-input-box>\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 }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**
@@ -6279,24 +6470,180 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * This file exports all public-facing elements of the sort-header component.
  */
 
-class UniTagComponent {
+/**
+ * Compact chip for categories, states, filters and tokens.
+ *
+ * Two orthogonal style axes: `variant` picks the colour role and `tone` picks
+ * the archetype (soft / solid / outline). Both live in the theme's `tag` entry,
+ * so a theme restyles every chip in the app without touching markup.
+ *
+ * Structurally a chip is **body + trailing action as siblings**, never nested
+ * buttons: an interactive chip whose body is a `<button>` cannot contain the
+ * remove `<button>` (invalid HTML, and the inner control becomes unreachable
+ * for keyboard users). Both stay independently operable.
+ */
+class UniTagComponent extends BaseComponent {
+    // Presentation. `variant` comes from BaseComponent; chips default to `md`
+    // rather than the library-wide `lg`, since they sit inside dense content.
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    tone = input('soft', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
     label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    // TODO(v4): rename to closed — renaming is breaking
-    // eslint-disable-next-line @angular-eslint/no-output-native
-    close = output();
-    handleClose() {
-        const v = this.value();
-        if (v)
-            this.close.emit(v);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniTagComponent, isStandalone: true, selector: "uni-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div box-layout color=\"primary\" borderRadius=\"max\" display=\"inline-block\">\n  <div row-layout paddingLeft=\"sm\" gap=\"xs\">\n    <span uni-text display=\"block\" typeface=\"tag\">{{ label() }}</span>\n    <button icon-button symbolName=\"close\" size=\"sm\" (click)=\"handleClose()\">\n      Remove {{ label() }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    /** Truncation budget, e.g. `'14ch'`. A number is treated as px. */
+    maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    // Lead convenience inputs. Anything richer goes in the `[tag-lead]` slot.
+    avatarSrc = input(...(ngDevMode ? [undefined, { debugName: "avatarSrc" }] : /* istanbul ignore next */ []));
+    /** Initials fallback when `avatarSrc` is absent or fails to load. */
+    avatarName = input(...(ngDevMode ? [undefined, { debugName: "avatarName" }] : /* istanbul ignore next */ []));
+    /** Theme icon primitive — the preferred glyph path. */
+    iconName = input(...(ngDevMode ? [undefined, { debugName: "iconName" }] : /* istanbul ignore next */ []));
+    /** Material Symbols ligature, for glyphs the theme's icon set doesn't carry. */
+    symbolName = input(...(ngDevMode ? [undefined, { debugName: "symbolName" }] : /* istanbul ignore next */ []));
+    /** Status dot in the current colour. */
+    dot = input(false, ...(ngDevMode ? [{ debugName: "dot" }] : /* istanbul ignore next */ []));
+    // Behaviour
+    removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+    interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /**
+     * Toggle state. Left undefined the chip carries no `aria-pressed` at all —
+     * an interactive chip is not always a toggle (inside a tag input it is
+     * focusable so it can be removed), and announcing "not pressed" on a
+     * recipient chip is worse than announcing nothing.
+     */
+    selected = input(undefined, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Accessible-name override for the remove button. */
+    removeLabel = input(...(ngDevMode ? [undefined, { debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Tab position of the chip's controls. A composite that owns its own
+     * roving focus — `uni-tag-input`, where the whole field is one tab stop —
+     * passes `-1` so Tab does not walk through every chip to reach the next
+     * control.
+     */
+    controlTabIndex = input(0, ...(ngDevMode ? [{ debugName: "controlTabIndex" }] : /* istanbul ignore next */ []));
+    removed = output();
+    activated = output();
+    /** A disabled chip wears the theme's `disabled` role, whatever its variant. */
+    resolvedVariant = computed(() => this.disabled() ? 'disabled' : this.variant(), ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    themeStyle = computed(() => this.theme.componentStyle('tag', this.resolvedVariant(), this.size())(), ...(ngDevMode ? [{ debugName: "themeStyle" }] : /* istanbul ignore next */ []));
+    /** Lead elements derive from the chip height, so no second size token. */
+    leadSize = computed(() => {
+        const height = Number(this.themeStyle()['height'] ?? 24);
+        return Number.isFinite(height) ? Math.max(height - 6, 0) : 18;
+    }, ...(ngDevMode ? [{ debugName: "leadSize" }] : /* istanbul ignore next */ []));
+    /** Remove glyph, proportional to the chip rather than to the icon-button. */
+    removeGlyphSize = computed(() => Math.max(Math.round(this.leadSize() * 0.8), 10), ...(ngDevMode ? [{ debugName: "removeGlyphSize" }] : /* istanbul ignore next */ []));
+    initials = computed(() => (this.avatarName() ?? '')
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part[0]?.toUpperCase() ?? '')
+        .join(''), ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    hostClass = computed(() => {
+        const options = this.componentOptions();
+        return `${css([
+            this.theme.radius(options.borderRadius),
+            { ...this.theme.typeface(options.typeface) },
+            // Theme `fixed` + variant (incl. its nested `&.tone-*` rules) + size.
+            { ...this.themeStyle() },
+            { ...this.theme.gap(options.gap) },
+            {
+                boxSizing: 'border-box',
+                maxWidth: this.maxWidth(),
+                // The chip is not a widget; only its sub-controls take focus.
+                '& > button': this.theme.focusRing(),
+                // The remove control is the trailing counterpart of the lead, so it
+                // sizes from the chip too. Left at the icon-button's own `sm` size it
+                // is 22px inside a 24px chip — and taller than an `sm` chip entirely.
+                '& > button[uni-icon-button]': {
+                    flex: 'none',
+                    width: this.leadSize(),
+                    minWidth: this.leadSize(),
+                    height: this.leadSize(),
+                    minHeight: this.leadSize(),
+                    padding: 0,
+                    fontSize: this.removeGlyphSize(),
+                    // uni-icon writes width/height as *inline* styles, sized from the
+                    // icon-button's own `sm` token (18px — wider than an `sm` chip).
+                    // Only !important can reach past an inline style to keep the glyph
+                    // proportional to the chip.
+                    '& uni-icon': {
+                        width: `${this.removeGlyphSize()}px !important`,
+                        height: `${this.removeGlyphSize()}px !important`,
+                    },
+                },
+            },
+            this.invalid() && {
+                // Colour alone cannot carry "this entry is malformed" (WCAG 1.4.1).
+                textDecoration: 'underline dashed',
+                textUnderlineOffset: 3,
+            },
+            this.disabled() && { pointerEvents: 'none' },
+        ])} tone-${this.tone()}`;
+    }, ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    /** Truncating label; `title` exposes the full text when a budget is set. */
+    labelClass = css({
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    });
+    bodyClass = computed(() => css([
+        {
+            display: 'inline-flex',
+            alignItems: 'center',
+            minWidth: 0,
+            // The body inherits the chip's own colours in every case.
+            font: 'inherit',
+            color: 'inherit',
+            background: 'none',
+            border: 0,
+            padding: 0,
+            ...this.theme.gap(this.componentOptions().gap),
+        },
+        this.interactive() && { cursor: 'pointer' },
+    ]), ...(ngDevMode ? [{ debugName: "bodyClass" }] : /* istanbul ignore next */ []));
+    leadClass = computed(() => css({
+        flex: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        width: this.leadSize(),
+        height: this.leadSize(),
+        borderRadius: '50%',
+        fontSize: Math.max(Math.round(this.leadSize() * 0.5), 8),
+        // Initials sit on a wash of the current ink so they read on any tone.
+        backgroundColor: this.avatarSrc() ? undefined : 'rgba(0, 0, 0, 0.12)',
+        '& img': { width: '100%', height: '100%', objectFit: 'cover' },
+    }), ...(ngDevMode ? [{ debugName: "leadClass" }] : /* istanbul ignore next */ []));
+    dotClass = computed(() => css({
+        flex: 'none',
+        width: Math.max(Math.round(this.leadSize() / 3), 6),
+        height: Math.max(Math.round(this.leadSize() / 3), 6),
+        borderRadius: '50%',
+        backgroundColor: 'currentColor',
+    }), ...(ngDevMode ? [{ debugName: "dotClass" }] : /* istanbul ignore next */ []));
+    remove() {
+        if (this.disabled())
+            return;
+        this.removed.emit(this.value());
+    }
+    activate() {
+        if (this.disabled())
+            return;
+        this.activated.emit(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTagComponent, isStandalone: true, selector: "uni-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarName: { classPropertyName: "avatarName", publicName: "avatarName", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, controlTabIndex: { classPropertyName: "controlTabIndex", publicName: "controlTabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", activated: "activated" }, host: { properties: { "class": "hostClass()", "attr.aria-invalid": "invalid() ? 'true' : null" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'tag' }], usesInheritance: true, ngImport: i0, template: "<!-- Lead + label. Shared so the static and interactive bodies stay identical. -->\n<ng-template #body>\n  <ng-content select=\"[tag-lead]\"></ng-content>\n\n  @if (selected() && componentOptions().selectedIcon; as selectedIcon) {\n    <uni-icon [name]=\"selectedIcon\" [size]=\"leadSize()\" />\n  } @else if (avatarSrc(); as src) {\n    <span [class]=\"leadClass()\" aria-hidden=\"true\">\n      <img [src]=\"src\" alt=\"\" />\n    </span>\n  } @else if (initials(); as text) {\n    <span [class]=\"leadClass()\" aria-hidden=\"true\">{{ text }}</span>\n  } @else if (iconName(); as icon) {\n    <uni-icon [name]=\"icon\" [size]=\"leadSize()\" />\n  } @else if (symbolName(); as symbol) {\n    <uni-symbol [name]=\"symbol\" [style.font-size.px]=\"leadSize()\" />\n  } @else if (dot()) {\n    <span [class]=\"dotClass()\" aria-hidden=\"true\"></span>\n  }\n\n  @if (label(); as text) {\n    <span [class]=\"labelClass\" [attr.title]=\"maxWidth() ? text : null\">{{ text }}</span>\n  } @else {\n    <span [class]=\"labelClass\"><ng-content></ng-content></span>\n  }\n</ng-template>\n\n<!-- An interactive chip's body is the button; a static chip is plain text with\n     no role and no tab stop, so screen readers read it as content. -->\n@if (interactive()) {\n  <button\n    type=\"button\"\n    [class]=\"bodyClass()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-pressed]=\"selected() ?? null\"\n    [attr.tabindex]=\"controlTabIndex()\"\n    (click)=\"activate()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"body\"></ng-container>\n  </button>\n} @else {\n  <span [class]=\"bodyClass()\">\n    <ng-container [ngTemplateOutlet]=\"body\"></ng-container>\n  </span>\n}\n\n@if (removable()) {\n  <button\n    uni-icon-button\n    variant=\"ghost\"\n    size=\"sm\"\n    [iconName]=\"componentOptions().removeIcon ?? 'close'\"\n    [disable]=\"disabled()\"\n    [attr.tabindex]=\"controlTabIndex()\"\n    (click)=\"remove()\"\n  >\n    {{ removeLabel() ?? 'Remove ' + (label() ?? '') }}\n  </button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTagComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-tag', imports: [UniBoxComponent, UniIconButtonComponent, UniTextComponent, UniRowComponent], template: "<div box-layout color=\"primary\" borderRadius=\"max\" display=\"inline-block\">\n  <div row-layout paddingLeft=\"sm\" gap=\"xs\">\n    <span uni-text display=\"block\" typeface=\"tag\">{{ label() }}</span>\n    <button icon-button symbolName=\"close\" size=\"sm\" (click)=\"handleClose()\">\n      Remove {{ label() }}\n    </button>\n  </div>\n</div>\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-tag', imports: [NgTemplateOutlet, UniIconComponent, UniIconButtonComponent, UniSymbolComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'tag' }], host: {
+                        '[class]': 'hostClass()',
+                        '[attr.aria-invalid]': "invalid() ? 'true' : null",
+                    }, template: "<!-- Lead + label. Shared so the static and interactive bodies stay identical. -->\n<ng-template #body>\n  <ng-content select=\"[tag-lead]\"></ng-content>\n\n  @if (selected() && componentOptions().selectedIcon; as selectedIcon) {\n    <uni-icon [name]=\"selectedIcon\" [size]=\"leadSize()\" />\n  } @else if (avatarSrc(); as src) {\n    <span [class]=\"leadClass()\" aria-hidden=\"true\">\n      <img [src]=\"src\" alt=\"\" />\n    </span>\n  } @else if (initials(); as text) {\n    <span [class]=\"leadClass()\" aria-hidden=\"true\">{{ text }}</span>\n  } @else if (iconName(); as icon) {\n    <uni-icon [name]=\"icon\" [size]=\"leadSize()\" />\n  } @else if (symbolName(); as symbol) {\n    <uni-symbol [name]=\"symbol\" [style.font-size.px]=\"leadSize()\" />\n  } @else if (dot()) {\n    <span [class]=\"dotClass()\" aria-hidden=\"true\"></span>\n  }\n\n  @if (label(); as text) {\n    <span [class]=\"labelClass\" [attr.title]=\"maxWidth() ? text : null\">{{ text }}</span>\n  } @else {\n    <span [class]=\"labelClass\"><ng-content></ng-content></span>\n  }\n</ng-template>\n\n<!-- An interactive chip's body is the button; a static chip is plain text with\n     no role and no tab stop, so screen readers read it as content. -->\n@if (interactive()) {\n  <button\n    type=\"button\"\n    [class]=\"bodyClass()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-pressed]=\"selected() ?? null\"\n    [attr.tabindex]=\"controlTabIndex()\"\n    (click)=\"activate()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"body\"></ng-container>\n  </button>\n} @else {\n  <span [class]=\"bodyClass()\">\n    <ng-container [ngTemplateOutlet]=\"body\"></ng-container>\n  </span>\n}\n\n@if (removable()) {\n  <button\n    uni-icon-button\n    variant=\"ghost\"\n    size=\"sm\"\n    [iconName]=\"componentOptions().removeIcon ?? 'close'\"\n    [disable]=\"disabled()\"\n    [attr.tabindex]=\"controlTabIndex()\"\n    (click)=\"remove()\"\n  >\n    {{ removeLabel() ?? 'Remove ' + (label() ?? '') }}\n  </button>\n}\n" }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarName: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarName", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], controlTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlTabIndex", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 
 /**
  * UniTagComponent Barrel File
@@ -6304,6 +6651,392 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * This file exports all public-facing elements of the tag component.
  */
 
+/** Loose address check — deliberately permissive, matching what mail clients accept. */
+const EMAIL = /^[^\s@,;]+@[^\s@,;.]+\.[^\s@,;]+$/;
+/** `Name <a@b.com>` / `"Name" <a@b.com>` → the address, plus the display name. */
+const unwrapAddress = (raw) => {
+    const match = raw.match(/^\s*"?([^"<]*?)"?\s*<([^>]+)>\s*$/);
+    if (!match)
+        return { value: raw.trim() };
+    const label = match[1].trim();
+    return { value: match[2].trim(), ...(label ? { label } : {}) };
+};
+class UniTagInputComponent extends BaseComponent {
+    // --- Signal Forms block (explicit per AGENTS.md, not a base class) --------
+    value = model([], ...(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. "To". */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** `email` wires an address validator, paste parser and space separator. */
+    preset = input('text', ...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
+    separators = input([',', ';'], ...(ngDevMode ? [{ debugName: "separators" }] : /* istanbul ignore next */ []));
+    commitOnBlur = input(true, ...(ngDevMode ? [{ debugName: "commitOnBlur" }] : /* istanbul ignore next */ []));
+    allowDuplicates = input(false, ...(ngDevMode ? [{ debugName: "allowDuplicates" }] : /* istanbul ignore next */ []));
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+    validate = input(...(ngDevMode ? [undefined, { debugName: "validate" }] : /* istanbul ignore next */ []));
+    parse = input(...(ngDevMode ? [undefined, { debugName: "parse" }] : /* istanbul ignore next */ []));
+    // Chip presentation, forwarded to uni-tag.
+    tagVariant = input('primary', ...(ngDevMode ? [{ debugName: "tagVariant" }] : /* istanbul ignore next */ []));
+    tagTone = input('soft', ...(ngDevMode ? [{ debugName: "tagTone" }] : /* istanbul ignore next */ []));
+    tagSize = input(...(ngDevMode ? [undefined, { debugName: "tagSize" }] : /* istanbul ignore next */ []));
+    // --- Autocomplete (same contract as uni-search-input: the app filters) ----
+    suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    /** Debounced text the app should filter `suggestions` from. */
+    query = output();
+    debounceTime = input(250, ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ []));
+    // --- Events --------------------------------------------------------------
+    added = output();
+    removed = output();
+    rejected = output();
+    inputRef = viewChild.required('field');
+    chipRefs = viewChildren('chip', ...(ngDevMode ? [{ debugName: "chipRefs" }] : /* istanbul ignore next */ []));
+    /** Uncommitted text in the field. */
+    draft = signal('', ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    /** Index of the focused chip, or -1 when focus is in the text input. */
+    focusedChip = signal(-1, ...(ngDevMode ? [{ debugName: "focusedChip" }] : /* istanbul ignore next */ []));
+    /** Announcement for the status region; add/remove are otherwise silent. */
+    announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    hintId = uniqueId('uni-tag-input-hint');
+    srOnly = css(visuallyHidden);
+    queryTimer;
+    visibleSuggestions = computed(() => {
+        const taken = new Set(this.value().map((item) => item.value));
+        return this.suggestions()
+            .filter((suggestion) => this.allowDuplicates() || !taken.has(suggestion.value))
+            .slice(0, this.componentOptions().maxSuggestions ?? 8);
+    }, ...(ngDevMode ? [{ debugName: "visibleSuggestions" }] : /* istanbul ignore next */ []));
+    /** Shared combobox bookkeeping — identical contract to uni-search-input. */
+    list = createListboxNavigation({
+        count: () => this.visibleSuggestions().length,
+        idPrefix: 'uni-tag-listbox',
+    });
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    separatorKeys = computed(() => this.preset() === 'email' ? [...this.separators(), ' '] : this.separators(), ...(ngDevMode ? [{ debugName: "separatorKeys" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => [this.ariaDescribedBy(), this.hintId].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    labelOf(item) {
+        return item.label ?? item.value;
+    }
+    // --- Committing ----------------------------------------------------------
+    /** Split pasted text into candidate tokens. */
+    parseRaw(raw) {
+        const custom = this.parse();
+        if (custom)
+            return custom(raw);
+        const pattern = this.preset() === 'email' ? /[,;\n\t]+/ : new RegExp(`[${this.separators().map((s) => `\\${s}`).join('')}\n\t]+`);
+        return raw.split(pattern);
+    }
+    isValid(candidate) {
+        const custom = this.validate();
+        if (custom)
+            return custom(candidate);
+        return this.preset() === 'email' ? EMAIL.test(candidate) : true;
+    }
+    /**
+     * Turn typed text into a chip. Invalid entries are kept and flagged rather
+     * than dropped; duplicates and over-max are refused with a reason.
+     */
+    commit(raw) {
+        const trimmed = raw.trim();
+        if (!trimmed)
+            return false;
+        const { value: candidate, label } = this.preset() === 'email' ? unwrapAddress(trimmed) : { value: trimmed, label: undefined };
+        if (!candidate)
+            return false;
+        const current = this.value();
+        if (!this.allowDuplicates() && current.some((item) => item.value === candidate)) {
+            this.reject(candidate, 'duplicate');
+            return false;
+        }
+        const max = this.max();
+        if (max !== undefined && current.length >= max) {
+            this.reject(candidate, 'max');
+            return false;
+        }
+        const match = this.suggestions().find((suggestion) => suggestion.value === candidate);
+        const item = {
+            value: candidate,
+            ...(label || match?.label ? { label: label ?? match?.label } : {}),
+            ...(match?.avatarSrc ? { avatarSrc: match.avatarSrc } : {}),
+            ...(this.isValid(candidate) ? {} : { invalid: true }),
+        };
+        this.value.update((items) => [...items, item]);
+        this.added.emit(item);
+        this.announce(`${this.labelOf(item)} added. ${this.value().length} ${this.countNoun()}.`);
+        return true;
+    }
+    reject(raw, reason) {
+        this.rejected.emit({ raw, reason });
+        // The visual cue is a brief pulse a screen reader cannot see.
+        this.announce(reason === 'duplicate' ? `${raw} is already added.` : `${raw} was not added: limit reached.`);
+    }
+    removeAt(index, focus = 'input') {
+        const item = this.value()[index];
+        if (!item || item.disabled)
+            return;
+        this.value.update((items) => items.filter((_, i) => i !== index));
+        this.removed.emit(item);
+        this.announce(`${this.labelOf(item)} removed. ${this.value().length} ${this.countNoun()}.`);
+        const remaining = this.value().length;
+        if (focus === 'left' && index > 0)
+            this.focusChip(index - 1);
+        else if (focus === 'right' && index < remaining)
+            this.focusChip(index);
+        else
+            this.focusInput();
+    }
+    countNoun() {
+        return this.value().length === 1 ? 'item' : 'items';
+    }
+    announce(message) {
+        // Re-announce identical text by breaking the string equality.
+        this.announcement.set(this.announcement() === message ? `${message} ` : message);
+    }
+    // --- Focus ---------------------------------------------------------------
+    focusInput() {
+        this.focusedChip.set(-1);
+        queueMicrotask(() => this.inputRef().nativeElement.focus());
+    }
+    focusChip(index) {
+        const clamped = Math.max(0, Math.min(index, this.value().length - 1));
+        this.focusedChip.set(clamped);
+        queueMicrotask(() => {
+            const chip = this.chipRefs()[clamped]?.nativeElement;
+            chip?.querySelector('button')?.focus();
+        });
+    }
+    // --- Keyboard: focus in the text input -----------------------------------
+    onInputKeydown(event) {
+        if (this.list.navigate(event))
+            return;
+        const input = this.inputRef().nativeElement;
+        const empty = input.value === '';
+        if (this.separatorKeys().includes(event.key) && !empty) {
+            event.preventDefault();
+            this.commitDraft();
+            return;
+        }
+        switch (event.key) {
+            case 'Enter': {
+                event.preventDefault();
+                const active = this.list.activeIndex();
+                if (this.list.open() && active >= 0)
+                    this.selectSuggestion(this.visibleSuggestions()[active]);
+                else
+                    this.commitDraft();
+                break;
+            }
+            case 'Tab':
+                // Never trap: commit what is typed, then let focus move on.
+                if (!empty)
+                    this.commitDraft();
+                break;
+            case 'Backspace':
+                if (empty && this.value().length) {
+                    // Focus the last chip rather than deleting blind — a second
+                    // Backspace, now on the chip, removes it.
+                    event.preventDefault();
+                    this.focusChip(this.value().length - 1);
+                }
+                break;
+            case 'ArrowLeft':
+                if (input.selectionStart === 0 && this.value().length) {
+                    event.preventDefault();
+                    this.focusChip(this.value().length - 1);
+                }
+                break;
+            case 'Escape':
+                if (this.list.open())
+                    this.list.hide();
+                else
+                    this.setDraft('');
+                break;
+        }
+    }
+    onInput(value) {
+        this.setDraft(value);
+        this.list.show();
+        this.list.setActive(-1);
+        clearTimeout(this.queryTimer);
+        this.queryTimer = setTimeout(() => this.query.emit(value), this.debounceTime());
+    }
+    onPaste(event) {
+        const text = event.clipboardData?.getData('text') ?? '';
+        if (!text)
+            return;
+        event.preventDefault();
+        const tokens = this.parseRaw(text);
+        // A trailing fragment with no separator after it is still being typed, so
+        // it stays in the field rather than committing as a half-address. With a
+        // custom `parse` the app owns tokenization and every token is complete.
+        const separators = [...this.separatorKeys(), '\n', '\t'].map((key) => key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+        const endsWithSeparator = new RegExp(`[${separators.join('')}]\\s*$`).test(text);
+        const tail = this.parse() || endsWithSeparator ? '' : (tokens.pop() ?? '');
+        tokens.forEach((token) => this.commit(token));
+        this.setDraft(tail.trim());
+    }
+    onBlur() {
+        this.touched.set(true);
+        if (this.commitOnBlur())
+            this.commitDraft();
+    }
+    onFocusOut(event) {
+        this.list.closeOnFocusOut(event);
+    }
+    // --- Keyboard: focus on a chip -------------------------------------------
+    onChipKeydown(event, index) {
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (index > 0)
+                    this.focusChip(index - 1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (index < this.value().length - 1)
+                    this.focusChip(index + 1);
+                else
+                    this.focusInput();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusChip(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusChip(this.value().length - 1);
+                break;
+            case 'Backspace':
+                // Two deletion keys with different focus outcomes: hold Backspace to
+                // eat backwards, Delete to eat forwards, without the cursor jumping.
+                event.preventDefault();
+                this.removeAt(index, 'left');
+                break;
+            case 'Delete':
+                event.preventDefault();
+                this.removeAt(index, 'right');
+                break;
+            case 'Enter':
+            case 'F2':
+                event.preventDefault();
+                this.editChip(index);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.focusInput();
+                break;
+            default:
+                // A printable key means the user wants to type, not navigate chips.
+                if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+                    this.setDraft(this.draft() + event.key);
+                    this.focusInput();
+                }
+        }
+    }
+    /** Lift a chip back into the input for correction. */
+    editChip(index) {
+        const item = this.value()[index];
+        if (!item || item.disabled)
+            return;
+        this.value.update((items) => items.filter((_, i) => i !== index));
+        this.removed.emit(item);
+        const text = item.label && item.label !== item.value ? `${item.label} <${item.value}>` : item.value;
+        this.setDraft(text);
+        this.focusInput();
+    }
+    selectSuggestion(suggestion) {
+        this.commit(suggestion.value);
+        this.setDraft('');
+        this.list.hide();
+        this.focusInput();
+    }
+    commitDraft() {
+        if (this.commit(this.draft()))
+            this.setDraft('');
+        else
+            this.setDraft('');
+        this.list.hide();
+    }
+    setDraft(text) {
+        this.draft.set(text);
+        const input = this.inputRef?.().nativeElement;
+        if (input)
+            input.value = text;
+    }
+    // --- Styling -------------------------------------------------------------
+    className = computed(() => css({ display: 'block' }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    fieldClass = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            width: '100%',
+            listStyle: 'none',
+            margin: 0,
+            padding: 0,
+            ...this.theme.gap(options.chipGap),
+        });
+    }, ...(ngDevMode ? [{ debugName: "fieldClass" }] : /* istanbul ignore next */ []));
+    inputClass = computed(() => css({
+        flex: 1,
+        minWidth: this.componentOptions().minInputWidth ?? '12ch',
+        border: 0,
+        outline: 'none',
+        background: 'transparent',
+        color: 'inherit',
+        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 */ []));
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTagInputComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-tag-input', imports: [UniInputBoxComponent, UniTagComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'tagInput' }], host: { '[class]': 'className()' }, 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" }]
+        }], 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 }] }], preset: [{ type: i0.Input, args: [{ isSignal: true, alias: "preset", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], commitOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitOnBlur", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], parse: [{ type: i0.Input, args: [{ isSignal: true, alias: "parse", required: false }] }], tagVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagVariant", required: false }] }], tagTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagTone", required: false }] }], tagSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagSize", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], query: [{ type: i0.Output, args: ["query"] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], inputRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], chipRefs: [{ type: i0.ViewChildren, args: ['chip', { isSignal: true }] }] } });
+
+/**
+ * UniTagInputComponent Barrel File
+ *
+ * This file exports all public-facing elements of the tag-input component.
+ */
+
 const SCHEMES = [
     'monochromatic',
     'analogous',
@@ -7359,9 +8092,211 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ selector: 'uni-toggle', imports: [UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'toggle' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [class]=\"toggleLabel()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    [class]=\"toggleInput()\"\n    [checked]=\"checked()\"\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=\"toggle-switch\">\n    <div class=\"toggle-slider\"></div>\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 }] }] } });
 
+class UniTooltipComponent extends BaseComponent {
+    elRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    timer = useTimer();
+    isMouseInside = signal(false, ...(ngDevMode ? [{ debugName: "isMouseInside" }] : /* istanbul ignore next */ []));
+    /** Whether the bubble is currently shown (or fading out). */
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /**
+     * Set when the wrapped control is activated: clicking a button is not a
+     * request to toggle the bubble, and re-showing it right away makes a
+     * state-flipping label ("Expand" → "Collapse") blink back mid-interaction.
+     * Re-arms when the pointer leaves or focus moves away.
+     */
+    suppressed = signal(false, ...(ngDevMode ? [{ debugName: "suppressed" }] : /* istanbul ignore next */ []));
+    tooltipId = uniqueId('uni-tooltip');
+    anchorName = newAnchorName();
+    hoverDelay = input(500, ...(ngDevMode ? [{ debugName: "hoverDelay" }] : /* istanbul ignore next */ []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placement = input('top', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    inlineText = input(false, ...(ngDevMode ? [{ debugName: "inlineText" }] : /* istanbul ignore next */ []));
+    /** @deprecated The tooltip renders in the native top layer; ignored. */
+    appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : /* istanbul ignore next */ []));
+    tipRef = viewChild.required('tip');
+    constructor() {
+        super();
+        effect(() => {
+            const timerActive = this.timer.isActive();
+            const mouseInside = this.isMouseInside();
+            // If the timer finished and the mouse is still inside, show tooltip
+            if (!timerActive && mouseInside && !this.suppressed()) {
+                this.showTooltip();
+            }
+            // If the mouse left and the timer is not running, hide tooltip
+            else if (!mouseInside) {
+                this.hideTooltip();
+            }
+        });
+        // A tooltip must be reachable by keyboard (WCAG 1.4.13): when the
+        // projected content has no focusable element, the host itself joins
+        // the tab sequence. The bubble is always in the DOM, so the describedby
+        // relationship is wired once, on the element that receives focus.
+        afterNextRender(() => {
+            const host = this.elRef.nativeElement;
+            if (!host.querySelector(FOCUSABLE_SELECTOR) && !host.matches(FOCUSABLE_SELECTOR)) {
+                this.renderer.setAttribute(host, 'tabindex', '0');
+            }
+            this.renderer.setAttribute(resolveFocusTarget(host), 'aria-describedby', this.tooltipId);
+        });
+    }
+    onFocusIn(event) {
+        // Only keyboard-driven focus shows the tooltip immediately; mouse
+        // interaction keeps the hover-delay behavior.
+        if (event.target.matches(':focus-visible')) {
+            this.showTooltip();
+        }
+    }
+    onFocusOut() {
+        this.suppressed.set(false);
+        if (!this.isMouseInside()) {
+            this.hideTooltip();
+        }
+    }
+    onEscape(event) {
+        if (this.visible()) {
+            // Dismiss only the tooltip, not an enclosing dialog/popover
+            event.stopPropagation();
+            this.hideTooltip();
+        }
+    }
+    /**
+     * A click on an interactive element inside the host is an activation of
+     * that control — hide the bubble and stay suppressed until re-arm. A click
+     * anywhere else (inline-text tooltips, tap on a non-interactive host)
+     * keeps the tap-to-toggle behavior.
+     */
+    onClick(event) {
+        const host = this.elRef.nativeElement;
+        const control = event.target.closest(FOCUSABLE_SELECTOR);
+        if (control && control !== host && host.contains(control)) {
+            this.suppressed.set(true);
+            this.hideTooltip();
+        }
+        else {
+            this.toggleTooltip();
+        }
+    }
+    toggleTooltip() {
+        if (this.visible()) {
+            this.hideTooltip();
+        }
+        else {
+            this.showTooltip();
+        }
+    }
+    mouseenter() {
+        this.isMouseInside.set(true);
+        this.timer.start(this.hoverDelay());
+    }
+    mouseleave() {
+        this.isMouseInside.set(false);
+        this.suppressed.set(false);
+        this.timer.stop();
+    }
+    showTooltip() {
+        if (this.visible())
+            return;
+        const tip = this.tipRef().nativeElement;
+        tip.showPopover();
+        this.renderer.setAttribute(tip, 'fade', 'in');
+        this.visible.set(true);
+    }
+    hideTooltip() {
+        if (!this.visible())
+            return;
+        this.renderer.setAttribute(this.tipRef().nativeElement, 'fade', 'out');
+    }
+    onAnimationEnd(event) {
+        if (event.animationName.includes(this.tooltipFadeOut)) {
+            this.tipRef().nativeElement.hidePopover();
+            this.visible.set(false);
+        }
+    }
+    className = computed(() => css({
+        display: 'inline-flex',
+        anchorName: this.anchorName,
+    }, this.inlineText() && {
+        cursor: 'help',
+        textDecoration: 'underline',
+        textDecorationStyle: 'dotted',
+    }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tooltipFadeIn = keyframes({ ...fadeIn });
+    tooltipFadeOut = keyframes({ ...fadeOut });
+    tooltipClassName = computed(() => css([
+        {
+            ...this.theme.colorPair(this.componentOptions().color),
+            ...this.theme.radius(this.componentOptions().borderRadius),
+            ...this.theme.boxShadow(this.componentOptions().shadow),
+            ...this.theme.typeface(this.componentOptions().typeface),
+            border: 'none',
+            padding: 5,
+            width: 'max-content',
+            ...anchorStyles(this.anchorName, this.placement(), { mainAxis: 6 }),
+            '&[fade="in"]': {
+                animation: `${this.tooltipFadeIn} ease-in 350ms`,
+            },
+            '&[fade="out"]': {
+                animation: `${this.tooltipFadeOut} ease-in 350ms`,
+            },
+        },
+    ]), ...(ngDevMode ? [{ debugName: "tooltipClassName" }] : /* istanbul ignore next */ []));
+    arrowClassName = computed(() => css({
+        ...this.theme.colorPair(this.componentOptions().color),
+        ...anchorArrowStyles(this.placement()),
+    }), ...(ngDevMode ? [{ debugName: "arrowClassName" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniTooltipComponent, isStandalone: true, selector: "uni-tooltip", inputs: { hoverDelay: { classPropertyName: "hoverDelay", publicName: "hoverDelay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, inlineText: { classPropertyName: "inlineText", publicName: "inlineText", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "mouseenter": "mouseenter()", "mouseleave": "mouseleave()", "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape($event)" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'tooltip' }], viewQueries: [{ propertyName: "tipRef", first: true, predicate: ["tip"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content
+    ><span
+      #tip
+      popover="manual"
+      role="tooltip"
+      [id]="tooltipId"
+      [class]="tooltipClassName()"
+      (mouseenter)="isMouseInside.set(true)"
+      (mouseleave)="isMouseInside.set(false)"
+      (animationend)="onAnimationEnd($event)"
+      >{{ label() }}<span [class]="arrowClassName()"></span
+    ></span>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'uni-tooltip',
+                    imports: [],
+                    // The bubble lives declaratively in the template as a manual popover: the
+                    // top layer escapes any overflow context (which made appendToBody obsolete)
+                    // and native CSS anchor positioning keeps it attached to the host.
+                    template: `<ng-content></ng-content
+    ><span
+      #tip
+      popover="manual"
+      role="tooltip"
+      [id]="tooltipId"
+      [class]="tooltipClassName()"
+      (mouseenter)="isMouseInside.set(true)"
+      (mouseleave)="isMouseInside.set(false)"
+      (animationend)="onAnimationEnd($event)"
+      >{{ label() }}<span [class]="arrowClassName()"></span
+    ></span>`,
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'tooltip' }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'className()',
+                        '(click)': 'onClick($event)',
+                        '(mouseenter)': 'mouseenter()',
+                        '(mouseleave)': 'mouseleave()',
+                        '(focusin)': 'onFocusIn($event)',
+                        '(focusout)': 'onFocusOut()',
+                        '(keydown.escape)': 'onEscape($event)',
+                    },
+                }]
+        }], 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 }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, ThemeService, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniDataSearchComponent, UniDataTableComponent, 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, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniToggleComponent, UniTooltipComponent, UniWrapComponent, acceptableFile, anchorArrowStyles, anchorStyles, getFileExtension, motionSafe, newAnchorName, resolveFocusTarget, uniqueId, useTimer, visuallyHidden };
+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, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniDataSearchComponent, UniDataTableComponent, 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, UniToggleComponent, UniTooltipComponent, UniWrapComponent, acceptableFile, anchorArrowStyles, anchorStyles, createListboxNavigation, getFileExtension, isDivider, motionSafe, newAnchorName, resolveFocusTarget, uniqueId, useTimer, visuallyHidden };
 //# sourceMappingURL=uni-design-system-uni-angular.mjs.map