@uni-design-system/uni-angular 8.3.1 → 8.4.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, viewChild, effect, untracked, afterNextRender, ViewChild, afterRenderEffect, booleanAttribute, viewChildren } from '@angular/core';
+import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, ChangeDetectionStrategy, Component, contentChildren, output, Renderer2, ElementRef, Directive, model, viewChild, effect, untracked, afterRenderEffect, afterNextRender, ViewChild, booleanAttribute, viewChildren } from '@angular/core';
 import { injectGlobal, css, keyframes } from '@emotion/css';
-import { UniThemes, LightTheme, toTypefaces, parseTheme, formatThemeIssues, hydrateTheme, createThemeFromPalette, Z_INDEX, removeInputPlatformStyling, fadeIn, fadeOut, EXPAND_DEFAULT_SPEED, expandDuration, expandFadeIn, collapseFadeOut, HOVER_OR_KEYBOARD_FOCUS, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
+import { UniThemes, LightTheme, toTypefaces, parseTheme, formatThemeIssues, hydrateTheme, createThemeFromPalette, Z_INDEX, removeInputPlatformStyling, fadeIn, fadeOut, expandDuration, expandFadeIn, collapseFadeOut, HOVER_OR_KEYBOARD_FOCUS, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
 import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 
 let nextUniqueId = 0;
@@ -49,6 +49,35 @@ const visuallyHidden = {
 function motionSafe(styles) {
     return { '@media (prefers-reduced-motion: no-preference)': styles };
 }
+/**
+ * A polite live region's text, for the running commentary a form control owes
+ * a screen reader: commits, clears, refused entries, result counts — changes
+ * a sighted user sees but that are otherwise silent.
+ *
+ * Extracted because five controls (`uni-combobox`, `uni-tag-input`,
+ * `uni-time-input`, `uni-date-input`, `uni-calendar`) carried byte-identical
+ * copies, including the repeat trick below — the kind of subtlety that is
+ * quietly dropped when the sixth control hand-rolls its own.
+ *
+ * Announcing the same text twice must still be heard: assistive tech reads a
+ * live region when its content *changes*, so setting an identical string is a
+ * no-op and the second "No match." would be silent. A trailing space breaks
+ * the equality without changing a word of what is read. Successive repeats
+ * alternate between the padded and unpadded form, so nothing accumulates.
+ *
+ * Deliberately holds no DOM and no styling: the region belongs to the
+ * component's own template, where its placement and visually-hidden class are
+ * already the component's business.
+ */
+function createAnnouncer() {
+    const message = signal('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    return {
+        message: message.asReadonly(),
+        announce(text) {
+            message.set(message() === text ? `${text} ` : text);
+        },
+    };
+}
 
 /**
  * Canonical date/time value shapes shared by `uni-calendar`,
@@ -347,8 +376,9 @@ const joinDateTime = (date, time) => date && time ? `${date}T${time}` : undefine
  * 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.
+ * wrap-around arithmetic and keeping the active id in sync with the option
+ * list. Home/End are opt-in (`homeEndNavigates`) because a text field's caret
+ * has the better claim on them.
  *
  * `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
@@ -362,6 +392,7 @@ class ListboxNavigation {
     _activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_activeIndex" }] : /* istanbul ignore next */ []));
     wrap;
     isDisabled;
+    homeEndNavigates;
     /** 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. */
@@ -380,6 +411,7 @@ class ListboxNavigation {
         this.listboxId = uniqueId(config.idPrefix ?? 'uni-listbox');
         this.wrap = config.wrap ?? true;
         this.isDisabled = config.disabled ?? (() => false);
+        this.homeEndNavigates = config.homeEndNavigates ?? false;
     }
     /** Stable per-option id, for `role="option"` elements. */
     optionId(index) {
@@ -397,9 +429,9 @@ class ListboxNavigation {
         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.
+     * Handle ArrowDown / ArrowUp — and Home / End where `homeEndNavigates` is
+     * on. Opens 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();
@@ -421,10 +453,11 @@ class ListboxNavigation {
             case 'ArrowUp':
                 // Opening with ArrowUp lands on the last option, matching menus.
                 return current < 0 ? this.seek(count - 1, -1, count) : this.step(current, -1, count);
+            // Left to the caret unless a consumer opts in — see `homeEndNavigates`.
             case 'Home':
-                return this.seek(0, 1, count);
+                return this.homeEndNavigates ? this.seek(0, 1, count) : null;
             case 'End':
-                return this.seek(count - 1, -1, count);
+                return this.homeEndNavigates ? this.seek(count - 1, -1, count) : null;
             default:
                 return null;
         }
@@ -674,10 +707,31 @@ function transformOriginFor(panel, trigger) {
 
 /**
  * Shared plumbing for top-layer overlays built on the native `popover`
- * attribute (dropdown, popover, callout). Pure functions and data — no DOM
- * ownership — so each component keeps its own template while the anchor
- * bookkeeping, discrete-transition block, and focus-restore rule stay single-
- * sourced.
+ * attribute (dropdown, popover, callout, tooltip, the listbox popups,
+ * snackbar). Pure functions and data — no DOM ownership — so each component
+ * keeps its own template while the anchor bookkeeping, discrete-transition
+ * block, and focus-restore rule stay single-sourced.
+ *
+ * These are deliberately à-la-carte rather than one factory: the overlays
+ * share *mechanics* but not *lifecycles*. A dropdown toggles from a trigger
+ * click and restores focus; a tooltip follows hover and never takes focus; a
+ * callout traps focus behind a scrim; a listbox popup is rendered by `@if`
+ * with focus staying in the field; a snackbar has no anchor at all and closes
+ * on a timer. Take what a component needs and leave the rest.
+ *
+ * **Choosing `popover="auto"` vs `"manual"`** — the one decision worth making
+ * deliberately. `auto` brings native light-dismiss: an outside pointerdown or
+ * Escape closes it. That is right for a panel the user opened and can dismiss
+ * by looking away — dropdown, popover, callout, tooltip.
+ *
+ * `manual` is right when the control already owns dismissal, and light-dismiss
+ * would fight it. Two cases in this library:
+ *   - the listbox popups, whose own field is *outside* the popup, so `auto`
+ *     would close the list on every click into the input;
+ *   - the snackbar, which would be torn away from someone still reading it by
+ *     a click anywhere on the page.
+ *
+ * `manual` means the component must close it — nothing else will.
  */
 /** Placement → `transform-origin`, so scale animations grow from the anchor. */
 const TRANSFORM_ORIGINS = {
@@ -721,13 +775,20 @@ function isToggleOpen(event) {
  * top layer: `transition-behavior: allow-discrete` over the `hidden` keys plus
  * `display`/`overlay`, the shown state under `:popover-open`, and
  * `@starting-style` so entry transitions run from the hidden state.
+ *
+ * `display` and `overlay` must ride along or the element cannot animate into
+ * and out of the top layer at all — it would simply appear and vanish.
+ *
+ * `timingFunction` is omitted from the output when not given, leaving the CSS
+ * initial value (`ease`), so callers that never asked for one are unaffected.
  */
-function discreteOverlayTransition(durationMs, hidden, shown) {
+function discreteOverlayTransition(durationMs, hidden, shown, timingFunction) {
     return {
         transitionProperty: [...Object.keys(hidden), 'display', 'overlay']
             .map((key) => key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`))
             .join(', '),
         transitionDuration: `${durationMs}ms`,
+        ...(timingFunction ? { transitionTimingFunction: timingFunction } : {}),
         transitionBehavior: 'allow-discrete',
         ...hidden,
         '&:popover-open': shown,
@@ -1276,6 +1337,9 @@ class ThemeService {
     borders = computed(() => this.theme().borders, ...(ngDevMode ? [{ debugName: "borders" }] : /* istanbul ignore next */ []));
     shadows = computed(() => this.theme().shadows, ...(ngDevMode ? [{ debugName: "shadows" }] : /* istanbul ignore next */ []));
     icons = computed(() => this.theme().icons, ...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
+    // `?? {}` for themes registered as JSON that predate the motion scale —
+    // the validator does not require it, so they must not crash on read.
+    motions = computed(() => this.theme().motion ?? {}, ...(ngDevMode ? [{ debugName: "motions" }] : /* istanbul ignore next */ []));
     constructor() {
         // Honor the user's reduced-motion preference across every component
         // (WCAG 2.3.3): collapse all animations/transitions to a single frame.
@@ -1513,6 +1577,16 @@ class ThemeService {
             borderRadius,
         };
     }
+    /**
+     * Resolves a named motion primitive. Falls back to `popup` and then to a
+     * hard default, so a theme that predates the motion scale — or names a
+     * token that isn't there — still animates rather than snapping.
+     */
+    motion(token) {
+        const motions = this.motions();
+        return ((token ? motions[token] : undefined) ??
+            motions['popup'] ?? { duration: 100, easing: 'linear', scale: 0.8 });
+    }
     radius(size) {
         return !size ? undefined : { borderRadius: this.radii()[size] };
     }
@@ -2904,7 +2978,8 @@ class UniCalendarComponent extends BaseComponent {
     /** Hover/focus candidate painting the preview band while a range is pending. */
     previewDate = signal(null, ...(ngDevMode ? [{ debugName: "previewDate" }] : /* istanbul ignore next */ []));
     /** Live-region text; selections are otherwise silent for a screen reader. */
-    announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    /** Commits, clears and refusals are otherwise silent to a screen reader. */
+    announcer = createAnnouncer();
     resolvedLocale = computed(() => this.locale() ?? (document.documentElement.lang || navigator.language || 'en-US'), ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
     resolvedWeekStart = computed(() => this.weekStart() ?? localeWeekStart(this.resolvedLocale()), ...(ngDevMode ? [{ debugName: "resolvedWeekStart" }] : /* istanbul ignore next */ []));
     /**
@@ -3036,12 +3111,12 @@ class UniCalendarComponent extends BaseComponent {
         const full = (d) => formatDate(d, locale, { dateStyle: 'full' });
         if (this.mode() === 'single') {
             this.value.set(date);
-            this.announce(`${full(date)} selected.`);
+            this.announcer.announce(`${full(date)} selected.`);
         }
         else if (!this.pendingStart()) {
             this.pendingStart.set(date);
             this.previewDate.set(date);
-            this.announce(`Start date ${full(date)}. Choose an end date.`);
+            this.announcer.announce(`Start date ${full(date)}. Choose an end date.`);
         }
         else {
             let [start, end] = [this.pendingStart(), date];
@@ -3051,14 +3126,14 @@ class UniCalendarComponent extends BaseComponent {
             this.previewDate.set(null);
             this.value.set({ start, end });
             const days = inclusiveDayCount(start, end);
-            this.announce(`Range selected, ${full(start)} to ${full(end)}. ${days} ${days === 1 ? 'day' : 'days'}.`);
+            this.announcer.announce(`Range selected, ${full(start)} to ${full(end)}. ${days} ${days === 1 ? 'day' : 'days'}.`);
         }
         this.selected.emit(date);
     }
     cancelPending() {
         this.pendingStart.set(null);
         this.previewDate.set(null);
-        this.announce('Range selection cancelled.');
+        this.announcer.announce('Range selection cancelled.');
     }
     // --- Navigation ------------------------------------------------------------
     onNav(direction) {
@@ -3158,10 +3233,6 @@ class UniCalendarComponent extends BaseComponent {
         }
         return first;
     }
-    announce(message) {
-        // Re-announce identical text by breaking the string equality.
-        this.announcement.set(this.announcement() === message ? `${message} ` : message);
-    }
     // --- Styling ---------------------------------------------------------------
     daySize = computed(() => (this.componentTheme().sizes?.[this.size()] ?? {}), ...(ngDevMode ? [{ debugName: "daySize" }] : /* istanbul ignore next */ []));
     className = computed(() => css([(this.componentTheme().fixed ?? { display: 'inline-block' })]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
@@ -3294,11 +3365,11 @@ class UniCalendarComponent extends BaseComponent {
     }
     showOutside = computed(() => this.componentOptions().showOutsideDays ?? false, ...(ngDevMode ? [{ debugName: "showOutside" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniCalendarComponent, isStandalone: true, selector: "uni-calendar, Calendar", 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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", month: "monthChange", selected: "selected" }, host: { listeners: { "focusout": "onHostFocusOut($event)" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'calendar' }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"navClass()\">\n  <button\n    icon-button\n    type=\"button\"\n    size=\"sm\"\n    [symbolName]=\"componentOptions().navPrevSymbol ?? 'chevron_left'\"\n    [disable]=\"disabled()\"\n    (click)=\"onNav(-1)\"\n  >\n    Previous month\n  </button>\n  <!-- aria-live so PageUp/Down narrates the new month without refocusing. -->\n  <div [class]=\"headingClass()\" [id]=\"headingId\" aria-live=\"polite\">{{ heading() }}</div>\n  <button\n    icon-button\n    type=\"button\"\n    size=\"sm\"\n    [symbolName]=\"componentOptions().navNextSymbol ?? 'chevron_right'\"\n    [disable]=\"disabled()\"\n    (click)=\"onNav(1)\"\n  >\n    Next month\n  </button>\n</div>\n\n<!-- One tab stop: the roving tabindex lives on the day buttons, and the grid\n     itself only relays their bubbling keys (same delegation as tag-input). -->\n<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n<div\n  role=\"grid\"\n  [class]=\"gridClass()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabel() ? null : headingId\"\n  [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-required]=\"required() ? true : null\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <div role=\"row\" [class]=\"rowClass()\">\n    @for (weekday of weekdays(); track weekday.full) {\n      <div role=\"columnheader\" [class]=\"weekdayClass()\">\n        <abbr [attr.title]=\"weekday.full\">{{ weekday.label }}</abbr>\n      </div>\n    }\n  </div>\n\n  @for (week of gridWeeks(); track week[0].date) {\n    <div role=\"row\" [class]=\"rowClass()\">\n      @for (cell of week; track cell.date) {\n        @if (cell.outside) {\n          <!-- Outside days: hidden placeholders by default (geometry kept),\n               muted and non-interactive under the showOutsideDays option. -->\n          <div role=\"gridcell\" aria-hidden=\"true\" [class]=\"cell.cellClass\">\n            @if (showOutside()) {\n              <span [class]=\"outsideDayClass()\">{{ cell.day }}</span>\n            }\n          </div>\n        } @else {\n          <div\n            role=\"gridcell\"\n            [class]=\"cell.cellClass\"\n            [attr.aria-selected]=\"cell.selected || cell.inBand ? true : null\"\n          >\n            <button\n              type=\"button\"\n              [class]=\"cell.dayClass\"\n              [attr.data-date]=\"cell.date\"\n              [tabindex]=\"cell.tabIndex\"\n              [attr.aria-label]=\"cell.ariaLabel\"\n              [attr.aria-current]=\"cell.today ? 'date' : null\"\n              [disabled]=\"cell.disabled || disabled()\"\n              (click)=\"select(cell.date)\"\n              (mouseenter)=\"onDayHover(cell.date)\"\n            >\n              {{ cell.day }}\n              @if (cell.markers.length) {\n                <span [class]=\"dotsClass()\">\n                  @for (marker of cell.markers; track $index) {\n                    <span data-dot [class]=\"dotClassFor(marker.variant)\"></span>\n                  }\n                </span>\n              }\n            </button>\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n\n<!-- Selections and range progress are otherwise silent for a screen reader. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n", dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniCalendarComponent, isStandalone: true, selector: "uni-calendar, Calendar", 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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", month: "monthChange", selected: "selected" }, host: { listeners: { "focusout": "onHostFocusOut($event)" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'calendar' }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"navClass()\">\n  <button\n    icon-button\n    type=\"button\"\n    size=\"sm\"\n    [symbolName]=\"componentOptions().navPrevSymbol ?? 'chevron_left'\"\n    [disable]=\"disabled()\"\n    (click)=\"onNav(-1)\"\n  >\n    Previous month\n  </button>\n  <!-- aria-live so PageUp/Down narrates the new month without refocusing. -->\n  <div [class]=\"headingClass()\" [id]=\"headingId\" aria-live=\"polite\">{{ heading() }}</div>\n  <button\n    icon-button\n    type=\"button\"\n    size=\"sm\"\n    [symbolName]=\"componentOptions().navNextSymbol ?? 'chevron_right'\"\n    [disable]=\"disabled()\"\n    (click)=\"onNav(1)\"\n  >\n    Next month\n  </button>\n</div>\n\n<!-- One tab stop: the roving tabindex lives on the day buttons, and the grid\n     itself only relays their bubbling keys (same delegation as tag-input). -->\n<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n<div\n  role=\"grid\"\n  [class]=\"gridClass()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabel() ? null : headingId\"\n  [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-required]=\"required() ? true : null\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <div role=\"row\" [class]=\"rowClass()\">\n    @for (weekday of weekdays(); track weekday.full) {\n      <div role=\"columnheader\" [class]=\"weekdayClass()\">\n        <abbr [attr.title]=\"weekday.full\">{{ weekday.label }}</abbr>\n      </div>\n    }\n  </div>\n\n  @for (week of gridWeeks(); track week[0].date) {\n    <div role=\"row\" [class]=\"rowClass()\">\n      @for (cell of week; track cell.date) {\n        @if (cell.outside) {\n          <!-- Outside days: hidden placeholders by default (geometry kept),\n               muted and non-interactive under the showOutsideDays option. -->\n          <div role=\"gridcell\" aria-hidden=\"true\" [class]=\"cell.cellClass\">\n            @if (showOutside()) {\n              <span [class]=\"outsideDayClass()\">{{ cell.day }}</span>\n            }\n          </div>\n        } @else {\n          <div\n            role=\"gridcell\"\n            [class]=\"cell.cellClass\"\n            [attr.aria-selected]=\"cell.selected || cell.inBand ? true : null\"\n          >\n            <button\n              type=\"button\"\n              [class]=\"cell.dayClass\"\n              [attr.data-date]=\"cell.date\"\n              [tabindex]=\"cell.tabIndex\"\n              [attr.aria-label]=\"cell.ariaLabel\"\n              [attr.aria-current]=\"cell.today ? 'date' : null\"\n              [disabled]=\"cell.disabled || disabled()\"\n              (click)=\"select(cell.date)\"\n              (mouseenter)=\"onDayHover(cell.date)\"\n            >\n              {{ cell.day }}\n              @if (cell.markers.length) {\n                <span [class]=\"dotsClass()\">\n                  @for (marker of cell.markers; track $index) {\n                    <span data-dot [class]=\"dotClassFor(marker.variant)\"></span>\n                  }\n                </span>\n              }\n            </button>\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n\n<!-- Selections and range progress are otherwise silent for a screen reader. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n", dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCalendarComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-calendar, Calendar', imports: [UniIconButtonComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'calendar' }], host: { '[class]': 'className()', '(focusout)': 'onHostFocusOut($event)' }, template: "<div [class]=\"navClass()\">\n  <button\n    icon-button\n    type=\"button\"\n    size=\"sm\"\n    [symbolName]=\"componentOptions().navPrevSymbol ?? 'chevron_left'\"\n    [disable]=\"disabled()\"\n    (click)=\"onNav(-1)\"\n  >\n    Previous month\n  </button>\n  <!-- aria-live so PageUp/Down narrates the new month without refocusing. -->\n  <div [class]=\"headingClass()\" [id]=\"headingId\" aria-live=\"polite\">{{ heading() }}</div>\n  <button\n    icon-button\n    type=\"button\"\n    size=\"sm\"\n    [symbolName]=\"componentOptions().navNextSymbol ?? 'chevron_right'\"\n    [disable]=\"disabled()\"\n    (click)=\"onNav(1)\"\n  >\n    Next month\n  </button>\n</div>\n\n<!-- One tab stop: the roving tabindex lives on the day buttons, and the grid\n     itself only relays their bubbling keys (same delegation as tag-input). -->\n<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n<div\n  role=\"grid\"\n  [class]=\"gridClass()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabel() ? null : headingId\"\n  [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-required]=\"required() ? true : null\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <div role=\"row\" [class]=\"rowClass()\">\n    @for (weekday of weekdays(); track weekday.full) {\n      <div role=\"columnheader\" [class]=\"weekdayClass()\">\n        <abbr [attr.title]=\"weekday.full\">{{ weekday.label }}</abbr>\n      </div>\n    }\n  </div>\n\n  @for (week of gridWeeks(); track week[0].date) {\n    <div role=\"row\" [class]=\"rowClass()\">\n      @for (cell of week; track cell.date) {\n        @if (cell.outside) {\n          <!-- Outside days: hidden placeholders by default (geometry kept),\n               muted and non-interactive under the showOutsideDays option. -->\n          <div role=\"gridcell\" aria-hidden=\"true\" [class]=\"cell.cellClass\">\n            @if (showOutside()) {\n              <span [class]=\"outsideDayClass()\">{{ cell.day }}</span>\n            }\n          </div>\n        } @else {\n          <div\n            role=\"gridcell\"\n            [class]=\"cell.cellClass\"\n            [attr.aria-selected]=\"cell.selected || cell.inBand ? true : null\"\n          >\n            <button\n              type=\"button\"\n              [class]=\"cell.dayClass\"\n              [attr.data-date]=\"cell.date\"\n              [tabindex]=\"cell.tabIndex\"\n              [attr.aria-label]=\"cell.ariaLabel\"\n              [attr.aria-current]=\"cell.today ? 'date' : null\"\n              [disabled]=\"cell.disabled || disabled()\"\n              (click)=\"select(cell.date)\"\n              (mouseenter)=\"onDayHover(cell.date)\"\n            >\n              {{ cell.day }}\n              @if (cell.markers.length) {\n                <span [class]=\"dotsClass()\">\n                  @for (marker of cell.markers; track $index) {\n                    <span data-dot [class]=\"dotClassFor(marker.variant)\"></span>\n                  }\n                </span>\n              }\n            </button>\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n\n<!-- Selections and range progress are otherwise silent for a screen reader. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-calendar, Calendar', imports: [UniIconButtonComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'calendar' }], host: { '[class]': 'className()', '(focusout)': 'onHostFocusOut($event)' }, template: "<div [class]=\"navClass()\">\n  <button\n    icon-button\n    type=\"button\"\n    size=\"sm\"\n    [symbolName]=\"componentOptions().navPrevSymbol ?? 'chevron_left'\"\n    [disable]=\"disabled()\"\n    (click)=\"onNav(-1)\"\n  >\n    Previous month\n  </button>\n  <!-- aria-live so PageUp/Down narrates the new month without refocusing. -->\n  <div [class]=\"headingClass()\" [id]=\"headingId\" aria-live=\"polite\">{{ heading() }}</div>\n  <button\n    icon-button\n    type=\"button\"\n    size=\"sm\"\n    [symbolName]=\"componentOptions().navNextSymbol ?? 'chevron_right'\"\n    [disable]=\"disabled()\"\n    (click)=\"onNav(1)\"\n  >\n    Next month\n  </button>\n</div>\n\n<!-- One tab stop: the roving tabindex lives on the day buttons, and the grid\n     itself only relays their bubbling keys (same delegation as tag-input). -->\n<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n<div\n  role=\"grid\"\n  [class]=\"gridClass()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabel() ? null : headingId\"\n  [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-required]=\"required() ? true : null\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <div role=\"row\" [class]=\"rowClass()\">\n    @for (weekday of weekdays(); track weekday.full) {\n      <div role=\"columnheader\" [class]=\"weekdayClass()\">\n        <abbr [attr.title]=\"weekday.full\">{{ weekday.label }}</abbr>\n      </div>\n    }\n  </div>\n\n  @for (week of gridWeeks(); track week[0].date) {\n    <div role=\"row\" [class]=\"rowClass()\">\n      @for (cell of week; track cell.date) {\n        @if (cell.outside) {\n          <!-- Outside days: hidden placeholders by default (geometry kept),\n               muted and non-interactive under the showOutsideDays option. -->\n          <div role=\"gridcell\" aria-hidden=\"true\" [class]=\"cell.cellClass\">\n            @if (showOutside()) {\n              <span [class]=\"outsideDayClass()\">{{ cell.day }}</span>\n            }\n          </div>\n        } @else {\n          <div\n            role=\"gridcell\"\n            [class]=\"cell.cellClass\"\n            [attr.aria-selected]=\"cell.selected || cell.inBand ? true : null\"\n          >\n            <button\n              type=\"button\"\n              [class]=\"cell.dayClass\"\n              [attr.data-date]=\"cell.date\"\n              [tabindex]=\"cell.tabIndex\"\n              [attr.aria-label]=\"cell.ariaLabel\"\n              [attr.aria-current]=\"cell.today ? 'date' : null\"\n              [disabled]=\"cell.disabled || disabled()\"\n              (click)=\"select(cell.date)\"\n              (mouseenter)=\"onDayHover(cell.date)\"\n            >\n              {{ cell.day }}\n              @if (cell.markers.length) {\n                <span [class]=\"dotsClass()\">\n                  @for (marker of cell.markers; track $index) {\n                    <span data-dot [class]=\"dotClassFor(marker.variant)\"></span>\n                  }\n                </span>\n              }\n            </button>\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n\n<!-- Selections and range progress are otherwise silent for a screen reader. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }, { type: i0.Output, args: ["monthChange"] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 /**
@@ -3466,7 +3537,7 @@ class UniCalloutComponent extends BaseComponent {
                 clearAnchorName(target);
             this.activeTarget.set(null);
             this.scrimContent.set(false);
-        }, this.componentOptions().transitionMs);
+        }, this.motion().duration);
         // The duet loop may have sent the user into the target on purpose — don't
         // yank them back out of it.
         if (!focusInTarget && this.prevFocus && document.contains(this.prevFocus)) {
@@ -3579,8 +3650,20 @@ class UniCalloutComponent extends BaseComponent {
             scrimColor: options.scrimColor,
         });
     }, ...(ngDevMode ? [{ debugName: "spotlight" }] : /* istanbul ignore next */ []));
-    scrimClassName = computed(() => {
+    /**
+     * Timing for the open/close fade and the teardown that follows it. The
+     * deprecated `transitionMs` wins when a theme still sets it, so existing
+     * themes keep their timing; otherwise the `motion` token decides.
+     */
+    motion = computed(() => {
         const options = this.componentOptions();
+        const token = this.theme.motion(options.motion ?? 'panel');
+        return options.transitionMs === undefined
+            ? token
+            : { ...token, duration: options.transitionMs };
+    }, ...(ngDevMode ? [{ debugName: "motion" }] : /* istanbul ignore next */ []));
+    scrimClassName = computed(() => {
+        const motion = this.motion();
         return css({
             position: 'fixed',
             inset: 0,
@@ -3593,7 +3676,7 @@ class UniCalloutComponent extends BaseComponent {
             overflow: 'visible',
             pointerEvents: 'none',
             '& > *': { position: 'fixed' },
-            ...discreteOverlayTransition(options.transitionMs, { opacity: 0 }, { opacity: 1 }),
+            ...discreteOverlayTransition(motion.duration, { opacity: 0 }, { opacity: 1 }, motion.easing),
         });
     }, ...(ngDevMode ? [{ debugName: "scrimClassName" }] : /* istanbul ignore next */ []));
     windowClassName = computed(() => {
@@ -3615,6 +3698,7 @@ class UniCalloutComponent extends BaseComponent {
     }), ...(ngDevMode ? [{ debugName: "fullCoverClassName" }] : /* istanbul ignore next */ []));
     panelClassName = computed(() => {
         const options = this.componentOptions();
+        const motion = this.motion();
         const anchored = this.activeTarget() !== null;
         return css({
             ...this.theme.colorPair(options.color),
@@ -3633,7 +3717,7 @@ class UniCalloutComponent extends BaseComponent {
                     mainAxis: options.offset + options.spotlightPadding,
                 })
                 : {}),
-            ...discreteOverlayTransition(options.transitionMs, { opacity: 0, translate: '0 6px' }, { opacity: 1, translate: '0 0' }),
+            ...discreteOverlayTransition(motion.duration, { opacity: 0, translate: '0 6px' }, { opacity: 1, translate: '0 0' }, motion.easing),
         });
     }, ...(ngDevMode ? [{ debugName: "panelClassName" }] : /* istanbul ignore next */ []));
     headRowClassName = computed(() => {
@@ -3948,9 +4032,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }] } });
 
 /**
- * Style block for the popup behind every `ListboxNavigation` consumer: an
- * absolutely-positioned `ul[role="listbox"]` under a `position: relative`
- * field wrapper, with the shared option chrome and active/hover highlight.
+ * Whether the browser can keep a top-layer popup attached to its field.
+ *
+ * The top layer and anchor positioning must be adopted together, and support
+ * for them does not arrive together: Safari shipped `popover` in 17 but
+ * `position-anchor` only in 26. Promoting the popup without anchor support
+ * would strand it — a top-layer element has no positioned ancestor, so the
+ * fallback's `position: absolute; top: 100%` would resolve against the
+ * viewport and drop the list a full screen height down the page. So the
+ * `popover` attribute is gated on this too, not just the anchored CSS.
+ *
+ * Undefined `CSS` (jsdom) reads as unsupported, which is also what keeps the
+ * popup in the normal flow — and the component specs unchanged — under test.
+ */
+const supportsAnchoredPopup = () => typeof CSS !== 'undefined' && CSS.supports?.('position-anchor: --a') === true;
+/** `popover` attribute value for a listbox popup, or null where unsupported.
+    Always `manual`: these controls already own dismissal (focusout, Escape,
+    commit), and `auto`'s light-dismiss fires on pointerdown outside the
+    popup — which includes their own field, closing the list behind the
+    component's back on every click into the input. */
+const listboxPopupAttr = () => supportsAnchoredPopup() ? 'manual' : null;
+/**
+ * A document-unique `anchor-name`, plus the style fragment that puts it on the
+ * field wrapper. Spread `style` into the wrapper's `css()` and pass `name` to
+ * {@link listboxPopupStyles}.
+ */
+function newListboxAnchor() {
+    const name = newAnchorName();
+    return { name, style: { anchorName: name } };
+}
+/**
+ * Shows the popup in the top layer as soon as it renders, and scales its
+ * entry animation out of the edge it actually opened from.
+ *
+ * The popups are `@if`-rendered, and a `popover` element is `display: none`
+ * until `showPopover()` runs — so appearing in the DOM is not enough. Runs on
+ * every render pass; `showPopover()` on an already-open popup throws, which is
+ * the cheapest way to ask "is it open?".
+ *
+ * The origin is measured rather than assumed: `position-try-fallbacks` may
+ * have flipped the popup above its field near the bottom of the viewport, and
+ * the static `top center` would then grow it from the wrong edge. Measuring
+ * forces layout, so it lands before the first frame of the transition.
+ *
+ * Call from an injection context (a field initializer or the constructor);
+ * the component's host element is the anchor.
+ */
+function promoteListboxPopup(ref) {
+    const anchor = inject(ElementRef).nativeElement;
+    afterRenderEffect(() => {
+        const element = ref()?.nativeElement;
+        // The attribute, not the `popover` IDL property: the property is what the
+        // gate already decided, and jsdom does not reflect it.
+        if (!element?.isConnected || !element.hasAttribute('popover'))
+            return;
+        try {
+            element.showPopover();
+        }
+        catch {
+            return; // Already open — its origin was set when it opened.
+        }
+        const origin = transformOriginFor(element.getBoundingClientRect(), anchor.getBoundingClientRect());
+        if (origin)
+            element.style.transformOrigin = origin;
+    });
+}
+/**
+ * The anchored half: the popup in the top layer, tracked to its field by the
+ * browser with no scroll or resize listeners. This is what lets the list
+ * escape an `overflow: hidden` ancestor, which the in-flow fallback below
+ * cannot do.
+ *
+ * `anchor-size(width)` matches the field's width the way `left: 0; right: 0`
+ * did in flow. Only the block flip is offered: the popup is as wide as its
+ * own field, so flipping it inline would only slide it off that field.
+ *
+ * `border: none` drops the UA's `[popover]` border. Its `background-color:
+ * Canvas` needs no reset — the base rules' `colorPair` beats it on origin
+ * alone — and must not get one: `background` is a shorthand, so resetting it
+ * here would erase that painted surface and leave the list transparent.
+ *
+ * `border-box` keeps the popup exactly as wide as its field: `anchor-size`
+ * yields the anchor's border-box width, which the base rules' padding would
+ * otherwise widen by 8px.
+ */
+const anchoredPopupStyles = (anchor, motion) => ({
+    ...anchorStyles(anchor, 'bottom-start', { mainAxis: 4 }),
+    positionTryFallbacks: 'flip-block',
+    width: 'anchor-size(width)',
+    boxSizing: 'border-box',
+    border: 'none',
+    // Grows out of the field's bottom edge; corrected after measuring when the
+    // browser flips the popup above instead (see promoteListboxPopup).
+    transformOrigin: 'top center',
+    ...motionSafe(discreteOverlayTransition(motion.duration, { opacity: 0, transform: `scale(${motion.scale ?? 1})` }, { opacity: 1, transform: 'scale(1)' }, motion.easing)),
+});
+/**
+ * Style block for the popup behind every `ListboxNavigation` consumer: a
+ * `ul[role="listbox"]` under its field wrapper, with the shared option chrome
+ * and active/hover highlight.
  *
  * Extracted because four components (`uni-search-input`, `uni-tag-input`,
  * `uni-time-input`, `uni-combobox`) carried hand-rolled copies, and the parts
@@ -3958,11 +4138,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * trio, and the `activeColor` pair that themes re-point when their container
  * tokens don't contrast (see the Wellsourced overrides).
  *
+ * Pass `anchor` (from {@link newListboxAnchor}) to get the top-layer
+ * positioning where the browser supports it. Without it — or on a browser that
+ * lacks anchor positioning — the popup stays absolutely positioned under a
+ * `position: relative` wrapper, which clips inside `overflow: hidden`
+ * ancestors but at least stays on its field.
+ *
  * Compose extras with the array form — `css([listboxPopupStyles(…), {…}])` —
  * so a component's own `& [role="option"]` block cascades after this one
  * instead of replacing it (an object spread would overwrite the key).
  */
-const listboxPopupStyles = (theme, options, { maxHeight = 280 } = {}) => ({
+const listboxPopupStyles = (theme, options, { maxHeight = 280, anchor } = {}) => ({
     position: 'absolute',
     top: '100%',
     left: 0,
@@ -3985,6 +4171,10 @@ const listboxPopupStyles = (theme, options, { maxHeight = 280 } = {}) => ({
             ...theme.colorPair((options.activeColor ?? 'primary-container')),
         },
     },
+    // Last, so the anchored rules win over the in-flow ones they replace.
+    ...(anchor
+        ? { '@supports (position-anchor: --a)': anchoredPopupStyles(anchor, theme.motion(options.motion)) }
+        : {}),
 });
 
 class UniInputBoxComponent extends BaseComponent {
@@ -4107,12 +4297,18 @@ class UniComboboxComponent extends BaseComponent {
     listRef = viewChild('listbox', ...(ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []));
     /** Cancelled on destroy — a late tick would emit on a destroyed OutputRef. */
     queryTimer;
+    /** Ties the popup to the field so the browser tracks it in the top layer. */
+    anchor = newListboxAnchor();
+    /** `manual` where the top layer is usable, else null — see the popup helper. */
+    popupAttr = listboxPopupAttr();
     constructor() {
         super();
         inject(DestroyRef).onDestroy(() => clearTimeout(this.queryTimer));
+        promoteListboxPopup(this.listRef);
     }
     srOnly = css(visuallyHidden);
-    announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    /** Commits, clears and refusals are otherwise silent to a screen reader. */
+    announcer = createAnnouncer();
     /** null → the field shows the committed label; a string is an uncommitted draft. */
     draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
     /**
@@ -4163,7 +4359,7 @@ class UniComboboxComponent extends BaseComponent {
         this.draft.set(null);
         this.closeList();
         this.setFieldText(this.displayValue());
-        this.announce(`${option.label} selected.`);
+        this.announcer.announce(`${option.label} selected.`);
         this.selected.emit(option);
         return true;
     }
@@ -4172,7 +4368,7 @@ class UniComboboxComponent extends BaseComponent {
         this.draft.set(null);
         this.closeList();
         this.setFieldText('');
-        this.announce('Selection cleared.');
+        this.announcer.announce('Selection cleared.');
         this.cleared.emit();
         this.inputRef().nativeElement.focus();
     }
@@ -4200,7 +4396,7 @@ class UniComboboxComponent extends BaseComponent {
             // clearable fields may null the model this way.
             if (this.clearable() && this.value() !== null && !enterOnly) {
                 this.value.set(null);
-                this.announce('Selection cleared.');
+                this.announcer.announce('Selection cleared.');
                 this.cleared.emit();
             }
             this.draft.set(null);
@@ -4231,7 +4427,7 @@ class UniComboboxComponent extends BaseComponent {
     reject() {
         const query = this.revertDraft();
         if (query) {
-            this.announce(`No match for “${query}”.`);
+            this.announcer.announce(`No match for “${query}”.`);
             this.rejected.emit({ query });
         }
     }
@@ -4267,12 +4463,9 @@ class UniComboboxComponent extends BaseComponent {
                 this.scrollToActive();
             return;
         }
-        if (event.key === 'Home' || event.key === 'End') {
-            // Only while the list is open — closed, they belong to the caret.
-            if (this.popupOpen() && this.list.navigate(event))
-                this.scrollToActive();
-            return;
-        }
+        // Home/End are deliberately absent: they belong to the caret, even with
+        // the list open (APG's editable-combobox pattern). ArrowUp on a closed
+        // list already lands on the last option, so nothing is lost.
         switch (event.key) {
             case 'Enter':
                 // Never submits a form while the list is open.
@@ -4280,7 +4473,7 @@ class UniComboboxComponent extends BaseComponent {
                     event.preventDefault();
                 if (!this.resolveDraft(true)) {
                     const count = this.filteredIndices().length;
-                    this.announce(count === 0 ? `${this.emptyText()}.` : `${count} results. Use the arrow keys.`);
+                    this.announcer.announce(count === 0 ? `${this.emptyText()}.` : `${count} results. Use the arrow keys.`);
                 }
                 return;
             case 'Escape':
@@ -4312,7 +4505,7 @@ class UniComboboxComponent extends BaseComponent {
             // Filtering is otherwise silent to a screen reader.
             if (this.filterLocally() && text !== '') {
                 const count = this.filteredIndices().length;
-                this.announce(count === 0 ? `${this.emptyText()}.` : `${count} result${count === 1 ? '' : 's'}.`);
+                this.announcer.announce(count === 0 ? `${this.emptyText()}.` : `${count} result${count === 1 ? '' : 's'}.`);
             }
         }, this.debounceTime());
     }
@@ -4380,12 +4573,8 @@ class UniComboboxComponent extends BaseComponent {
         if (element)
             element.value = text;
     }
-    announce(message) {
-        // Re-announce identical text by breaking the string equality.
-        this.announcement.set(this.announcement() === message ? `${message} ` : message);
-    }
     // --- Styling ----------------------------------------------------------------
-    className = computed(() => css({ display: 'block', position: 'relative', width: this.width() }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    className = computed(() => css({ display: 'block', position: 'relative', width: this.width(), ...this.anchor.style }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
     rowClass = computed(() => css({ display: 'flex', alignItems: 'center', flex: 1, width: '100%', minWidth: 0 }), ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
     inputClass = computed(() => css({
         flex: 1,
@@ -4421,6 +4610,7 @@ class UniComboboxComponent extends BaseComponent {
                 // A scroll height, never a cap: a closed-set control must not render a
                 // reachable-by-keyboard-only subset (contrast searchInput.maxSuggestions).
                 maxHeight: (options.maxVisibleOptions ?? 8) * 36 + 8,
+                anchor: this.anchor.name,
             }),
             {
                 '& [role="option"]': {
@@ -4459,11 +4649,11 @@ class UniComboboxComponent extends BaseComponent {
         ]);
     }, ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniComboboxComponent, isStandalone: true, selector: "uni-combobox, Combobox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filterLocally: { classPropertyName: "filterLocally", publicName: "filterLocally", isSignal: true, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", query: "query", selected: "selected", cleared: "cleared", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'combobox' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     resolves only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div [class]=\"rowClass()\">\n      <input\n        #field\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        aria-autocomplete=\"list\"\n        [class]=\"inputClass()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [value]=\"displayValue()\"\n        [attr.aria-label]=\"label()\"\n        [attr.aria-expanded]=\"popupOpen()\"\n        [attr.aria-controls]=\"list.listboxId\"\n        [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n        [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n        [attr.aria-invalid]=\"showError() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        (keydown)=\"onKeydown($event)\"\n        (input)=\"onInput()\"\n        (click)=\"onFieldClick()\"\n      />\n      @if (clearable() && value() !== null && !disabled()) {\n        <button\n          icon-button\n          type=\"button\"\n          size=\"sm\"\n          [iconName]=\"componentOptions().clearIcon ?? 'close'\"\n          (click)=\"clear()\"\n        >\n          Clear {{ label() }}\n        </button>\n      }\n      <!-- Pointer-only: keyboard has ArrowDown, the input announces expanded. -->\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [class]=\"toggleClass()\"\n        [disabled]=\"disabled()\"\n        (mousedown)=\"onToggleMousedown($event)\"\n      >\n        <uni-icon [name]=\"componentOptions().toggleIcon ?? 'chevronDown'\" size=\"20\" />\n      </button>\n    </div>\n  </uni-input-box>\n\n  @if (popupOpen()) {\n    <ul #listbox [id]=\"list.listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n      @if (filteredIndices().length === 0) {\n        <!-- Non-interactive: not an option, not navigable, no id. -->\n        <li class=\"empty\">{{ emptyText() }}</li>\n      } @else {\n        @for (optIndex of filteredIndices(); track optIndex; let i = $index) {\n          <!-- aria-selected marks the *committed* option; the active one is\n               carried by aria-activedescendant \u2014 they are different facts. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <li\n            role=\"option\"\n            [id]=\"list.optionId(i)\"\n            [class.active]=\"i === list.activeIndex()\"\n            [attr.aria-selected]=\"optIndex === committedIndex()\"\n            [attr.aria-disabled]=\"options()[optIndex].disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(optIndex)\"\n          >\n            <span class=\"check\" aria-hidden=\"true\">\n              @if (optIndex === committedIndex()) {\n                <uni-icon [name]=\"componentOptions().selectedIcon ?? 'check'\" size=\"18\" />\n              }\n            </span>\n            <span class=\"text\">\n              <span class=\"option-label\">{{ options()[optIndex].label }}</span>\n              @if (options()[optIndex].description) {\n                <span class=\"desc\">{{ options()[optIndex].description }}</span>\n              }\n            </span>\n          </li>\n        }\n      }\n    </ul>\n  }\n\n  <!-- Commits, clears, refusals and result counts are otherwise silent. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n</div>\n", dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniComboboxComponent, isStandalone: true, selector: "uni-combobox, Combobox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filterLocally: { classPropertyName: "filterLocally", publicName: "filterLocally", isSignal: true, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", query: "query", selected: "selected", cleared: "cleared", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'combobox' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     resolves only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div [class]=\"rowClass()\">\n      <input\n        #field\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        aria-autocomplete=\"list\"\n        [class]=\"inputClass()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [value]=\"displayValue()\"\n        [attr.aria-label]=\"label()\"\n        [attr.aria-expanded]=\"popupOpen()\"\n        [attr.aria-controls]=\"list.listboxId\"\n        [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n        [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n        [attr.aria-invalid]=\"showError() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        (keydown)=\"onKeydown($event)\"\n        (input)=\"onInput()\"\n        (click)=\"onFieldClick()\"\n      />\n      @if (clearable() && value() !== null && !disabled()) {\n        <button\n          icon-button\n          type=\"button\"\n          size=\"sm\"\n          [iconName]=\"componentOptions().clearIcon ?? 'close'\"\n          (click)=\"clear()\"\n        >\n          Clear {{ label() }}\n        </button>\n      }\n      <!-- Pointer-only: keyboard has ArrowDown, the input announces expanded. -->\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [class]=\"toggleClass()\"\n        [disabled]=\"disabled()\"\n        (mousedown)=\"onToggleMousedown($event)\"\n      >\n        <uni-icon [name]=\"componentOptions().toggleIcon ?? 'chevronDown'\" size=\"20\" />\n      </button>\n    </div>\n  </uni-input-box>\n\n  @if (popupOpen()) {\n    <ul\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\n      @if (filteredIndices().length === 0) {\n        <!-- Non-interactive: not an option, not navigable, no id. -->\n        <li class=\"empty\">{{ emptyText() }}</li>\n      } @else {\n        @for (optIndex of filteredIndices(); track optIndex; let i = $index) {\n          <!-- aria-selected marks the *committed* option; the active one is\n               carried by aria-activedescendant \u2014 they are different facts. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <li\n            role=\"option\"\n            [id]=\"list.optionId(i)\"\n            [class.active]=\"i === list.activeIndex()\"\n            [attr.aria-selected]=\"optIndex === committedIndex()\"\n            [attr.aria-disabled]=\"options()[optIndex].disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(optIndex)\"\n          >\n            <span class=\"check\" aria-hidden=\"true\">\n              @if (optIndex === committedIndex()) {\n                <uni-icon [name]=\"componentOptions().selectedIcon ?? 'check'\" size=\"18\" />\n              }\n            </span>\n            <span class=\"text\">\n              <span class=\"option-label\">{{ options()[optIndex].label }}</span>\n              @if (options()[optIndex].description) {\n                <span class=\"desc\">{{ options()[optIndex].description }}</span>\n              }\n            </span>\n          </li>\n        }\n      }\n    </ul>\n  }\n\n  <!-- Commits, clears, refusals and result counts are otherwise silent. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n", dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniComboboxComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-combobox, Combobox', imports: [UniIconButtonComponent, UniIconComponent, UniInputBoxComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'combobox' }], host: { '[class]': 'className()' }, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     resolves only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div [class]=\"rowClass()\">\n      <input\n        #field\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        aria-autocomplete=\"list\"\n        [class]=\"inputClass()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [value]=\"displayValue()\"\n        [attr.aria-label]=\"label()\"\n        [attr.aria-expanded]=\"popupOpen()\"\n        [attr.aria-controls]=\"list.listboxId\"\n        [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n        [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n        [attr.aria-invalid]=\"showError() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        (keydown)=\"onKeydown($event)\"\n        (input)=\"onInput()\"\n        (click)=\"onFieldClick()\"\n      />\n      @if (clearable() && value() !== null && !disabled()) {\n        <button\n          icon-button\n          type=\"button\"\n          size=\"sm\"\n          [iconName]=\"componentOptions().clearIcon ?? 'close'\"\n          (click)=\"clear()\"\n        >\n          Clear {{ label() }}\n        </button>\n      }\n      <!-- Pointer-only: keyboard has ArrowDown, the input announces expanded. -->\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [class]=\"toggleClass()\"\n        [disabled]=\"disabled()\"\n        (mousedown)=\"onToggleMousedown($event)\"\n      >\n        <uni-icon [name]=\"componentOptions().toggleIcon ?? 'chevronDown'\" size=\"20\" />\n      </button>\n    </div>\n  </uni-input-box>\n\n  @if (popupOpen()) {\n    <ul #listbox [id]=\"list.listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n      @if (filteredIndices().length === 0) {\n        <!-- Non-interactive: not an option, not navigable, no id. -->\n        <li class=\"empty\">{{ emptyText() }}</li>\n      } @else {\n        @for (optIndex of filteredIndices(); track optIndex; let i = $index) {\n          <!-- aria-selected marks the *committed* option; the active one is\n               carried by aria-activedescendant \u2014 they are different facts. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <li\n            role=\"option\"\n            [id]=\"list.optionId(i)\"\n            [class.active]=\"i === list.activeIndex()\"\n            [attr.aria-selected]=\"optIndex === committedIndex()\"\n            [attr.aria-disabled]=\"options()[optIndex].disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(optIndex)\"\n          >\n            <span class=\"check\" aria-hidden=\"true\">\n              @if (optIndex === committedIndex()) {\n                <uni-icon [name]=\"componentOptions().selectedIcon ?? 'check'\" size=\"18\" />\n              }\n            </span>\n            <span class=\"text\">\n              <span class=\"option-label\">{{ options()[optIndex].label }}</span>\n              @if (options()[optIndex].description) {\n                <span class=\"desc\">{{ options()[optIndex].description }}</span>\n              }\n            </span>\n          </li>\n        }\n      }\n    </ul>\n  }\n\n  <!-- Commits, clears, refusals and result counts are otherwise silent. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n</div>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-combobox, Combobox', imports: [UniIconButtonComponent, UniIconComponent, UniInputBoxComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'combobox' }], host: { '[class]': 'className()' }, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     resolves only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div [class]=\"rowClass()\">\n      <input\n        #field\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        aria-autocomplete=\"list\"\n        [class]=\"inputClass()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [value]=\"displayValue()\"\n        [attr.aria-label]=\"label()\"\n        [attr.aria-expanded]=\"popupOpen()\"\n        [attr.aria-controls]=\"list.listboxId\"\n        [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n        [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n        [attr.aria-invalid]=\"showError() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        (keydown)=\"onKeydown($event)\"\n        (input)=\"onInput()\"\n        (click)=\"onFieldClick()\"\n      />\n      @if (clearable() && value() !== null && !disabled()) {\n        <button\n          icon-button\n          type=\"button\"\n          size=\"sm\"\n          [iconName]=\"componentOptions().clearIcon ?? 'close'\"\n          (click)=\"clear()\"\n        >\n          Clear {{ label() }}\n        </button>\n      }\n      <!-- Pointer-only: keyboard has ArrowDown, the input announces expanded. -->\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [class]=\"toggleClass()\"\n        [disabled]=\"disabled()\"\n        (mousedown)=\"onToggleMousedown($event)\"\n      >\n        <uni-icon [name]=\"componentOptions().toggleIcon ?? 'chevronDown'\" size=\"20\" />\n      </button>\n    </div>\n  </uni-input-box>\n\n  @if (popupOpen()) {\n    <ul\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\n      @if (filteredIndices().length === 0) {\n        <!-- Non-interactive: not an option, not navigable, no id. -->\n        <li class=\"empty\">{{ emptyText() }}</li>\n      } @else {\n        @for (optIndex of filteredIndices(); track optIndex; let i = $index) {\n          <!-- aria-selected marks the *committed* option; the active one is\n               carried by aria-activedescendant \u2014 they are different facts. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <li\n            role=\"option\"\n            [id]=\"list.optionId(i)\"\n            [class.active]=\"i === list.activeIndex()\"\n            [attr.aria-selected]=\"optIndex === committedIndex()\"\n            [attr.aria-disabled]=\"options()[optIndex].disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(optIndex)\"\n          >\n            <span class=\"check\" aria-hidden=\"true\">\n              @if (optIndex === committedIndex()) {\n                <uni-icon [name]=\"componentOptions().selectedIcon ?? 'check'\" size=\"18\" />\n              }\n            </span>\n            <span class=\"text\">\n              <span class=\"option-label\">{{ options()[optIndex].label }}</span>\n              @if (options()[optIndex].description) {\n                <span class=\"desc\">{{ options()[optIndex].description }}</span>\n              }\n            </span>\n          </li>\n        }\n      }\n    </ul>\n  }\n\n  <!-- Commits, clears, refusals and result counts are otherwise silent. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], commitOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitOnBlur", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], filterLocally: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocally", required: false }] }], filterWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterWith", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], query: [{ type: i0.Output, args: ["query"] }], selected: [{ type: i0.Output, args: ["selected"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], inputRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['listbox', { isSignal: true }] }] } });
 
 class UniDataSearchComponent extends BaseComponent {
@@ -4947,7 +5137,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 
 class UniDropdownComponent extends BaseComponent {
     renderer = inject(Renderer2);
-    delay = 100;
     // Reactively track visibility status using Signals
     showing = signal(false, ...(ngDevMode ? [{ debugName: "showing" }] : /* istanbul ignore next */ []));
     trigger = input.required(...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
@@ -4981,25 +5170,9 @@ class UniDropdownComponent extends BaseComponent {
     get _dropdown() {
         return this.dropdownRef.nativeElement;
     }
-    // Pre-measure default only: the requested placement's corner. The real
-    // origin is measured per toggle (syncTransformOrigin), because
-    // position-try fallbacks may have flipped the panel.
-    transformOriginMap = {
-        top: 'bottom center',
-        right: 'center left',
-        bottom: 'top center',
-        left: 'center right',
-        'top-start': 'bottom left',
-        'top-end': 'bottom right',
-        'right-start': 'top left',
-        'right-end': 'bottom left',
-        'bottom-start': 'top left',
-        'bottom-end': 'top right',
-        'left-start': 'top right',
-        'left-end': 'bottom right',
-    };
     dropdownClass = computed(() => {
         const currentPlacement = this.placement();
+        const motion = this.theme.motion(this.componentOptions().motion);
         return css([
             {
                 // Reset browser agent default popover styles
@@ -5011,27 +5184,14 @@ class UniDropdownComponent extends BaseComponent {
                 // Native anchor positioning: the browser keeps the panel attached to
                 // the trigger (no scroll/resize listeners needed)
                 ...anchorStyles(this.anchorName, currentPlacement, this.offset()),
-                // 2. Animate discrete properties across top layer layout contexts
-                transitionProperty: 'transform, opacity, display, overlay',
-                transitionDuration: `${this.delay}ms`,
-                transitionTimingFunction: 'linear',
-                transitionBehavior: 'allow-discrete',
-                // Hidden State (Closed)
-                opacity: 0,
-                transform: 'scale(0.8)',
-                transformOrigin: this.transformOriginMap[currentPlacement],
-                // 3. Active state styling controlled via the native browser pseudo-class
-                ['&:popover-open']: {
-                    opacity: 1,
-                    transform: 'scale(1)',
-                },
-                // 4. Starting-style rules what properties animate *from* when transitioning in
-                ['@starting-style']: {
-                    ['&:popover-open']: {
-                        opacity: 0,
-                        transform: 'scale(0.8)',
-                    },
-                },
+                // Grows out of the corner touching the trigger. A pre-measure default
+                // only: the real origin is measured per toggle (syncTransformOrigin),
+                // because position-try fallbacks may have flipped the panel.
+                transformOrigin: TRANSFORM_ORIGINS[currentPlacement],
+                // Scale-and-fade into and out of the top layer, including the
+                // `@starting-style` the entry transition runs from. Timing comes from
+                // the theme's motion scale, so retiming every overlay is one edit.
+                ...discreteOverlayTransition(motion.duration, { opacity: 0, transform: `scale(${motion.scale ?? 1})` }, { opacity: 1, transform: 'scale(1)' }, motion.easing),
             },
         ]);
     }, ...(ngDevMode ? [{ debugName: "dropdownClass" }] : /* istanbul ignore next */ []));
@@ -5046,7 +5206,7 @@ class UniDropdownComponent extends BaseComponent {
             this.toggleDropdown();
         });
         // Anchor the popover panel to the trigger element
-        this.renderer.setStyle(this._trigger, 'anchor-name', this.anchorName);
+        setAnchorName(this._trigger, this.anchorName);
         // Wire the ARIA popup contract onto the focusable trigger element
         const focusTarget = this._focusTarget;
         this.renderer.setAttribute(focusTarget, 'aria-expanded', 'false');
@@ -5056,7 +5216,7 @@ class UniDropdownComponent extends BaseComponent {
         }
         // Sync state if user invokes light-dismiss via outside click or Escape key
         this.renderer.listen(this._dropdown, 'toggle', (event) => {
-            const isOpened = event.newState === 'open';
+            const isOpened = isToggleOpen(event);
             // Both edges: on open so the entry scale grows out of the trigger, and
             // on close-start so a panel the browser flipped while open (scroll near
             // a viewport edge) still collapses back toward the trigger.
@@ -5068,14 +5228,15 @@ class UniDropdownComponent extends BaseComponent {
             }
             else {
                 this.dropdownHiding.emit(true);
-                this.restoreFocus();
+                // Keyboard users are never stranded when the top layer closes (WCAG 2.4.3).
+                restoreOverlayFocus(this._dropdown, this._focusTarget);
             }
         });
     }
     /**
      * Scale the open/close animation from the corner touching the trigger,
      * wherever the browser actually placed the panel. The static
-     * `transformOriginMap` covers only the *requested* placement; with
+     * `TRANSFORM_ORIGINS` entry covers only the *requested* placement; with
      * `position-try-fallbacks` the panel may have flipped at a viewport edge,
      * and a `bottom-end` picker rendered above its field would otherwise still
      * animate from the top-right corner.
@@ -5085,17 +5246,6 @@ class UniDropdownComponent extends BaseComponent {
         if (origin)
             this.renderer.setStyle(this._dropdown, 'transform-origin', origin);
     }
-    /**
-     * Returns focus to the trigger when the popover closes while focus was
-     * inside it (or was dropped on <body> by the top layer closing), so
-     * keyboard users are never stranded (WCAG 2.4.3).
-     */
-    restoreFocus() {
-        const active = document.activeElement;
-        if (active === document.body || (active && this._dropdown.contains(active))) {
-            this._focusTarget.focus();
-        }
-    }
     toggleDropdown() {
         if (this.showing()) {
             this._dropdown.hidePopover();
@@ -5216,7 +5366,8 @@ class UniDateInputComponent extends BaseComponent {
     srOnly = css(visuallyHidden);
     /** A refused commit — styles the field and sets aria-invalid until edited. */
     draftInvalid = signal(false, ...(ngDevMode ? [{ debugName: "draftInvalid" }] : /* istanbul ignore next */ []));
-    announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    /** Commits, clears and refusals are otherwise silent to a screen reader. */
+    announcer = createAnnouncer();
     toggleElement = computed(() => this.toggleRef()?.nativeElement, ...(ngDevMode ? [{ debugName: "toggleElement" }] : /* istanbul ignore next */ []));
     popupOpen = computed(() => this.dropdown()?.showing() ?? false, ...(ngDevMode ? [{ debugName: "popupOpen" }] : /* istanbul ignore next */ []));
     resolvedLocale = computed(() => this.locale() ?? (document.documentElement.lang || navigator.language || 'en-US'), ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
@@ -5247,7 +5398,7 @@ class UniDateInputComponent extends BaseComponent {
         this.draftInvalid.set(false);
         this.setFieldText(this.displayText());
         if (!silent)
-            this.announce(date ? `${this.fullDate(date)}.` : 'Date cleared.');
+            this.announcer.announce(date ? `${this.fullDate(date)}.` : 'Date cleared.');
     }
     refuse(raw, reason) {
         this.draftInvalid.set(true);
@@ -5256,7 +5407,7 @@ class UniDateInputComponent extends BaseComponent {
             'out-of-range': `${raw} is outside the allowed dates.`,
             disabled: `${raw} isn't available.`,
         }[reason];
-        this.announce(message);
+        this.announcer.announce(message);
         this.rejected.emit({ raw, reason });
     }
     commit(raw) {
@@ -5404,9 +5555,6 @@ class UniDateInputComponent extends BaseComponent {
         if (element)
             element.value = text;
     }
-    announce(message) {
-        this.announcement.set(this.announcement() === message ? `${message} ` : message);
-    }
     // --- Styling -----------------------------------------------------------------------
     className = computed(() => css({ display: 'block', position: 'relative' }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
     rowClass = computed(() => css({ display: 'flex', alignItems: 'center', flex: 1, width: '100%', minWidth: 0 }), ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
@@ -5440,7 +5588,7 @@ class UniDateInputComponent extends BaseComponent {
         ]);
     }, ...(ngDevMode ? [{ debugName: "embeddedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDateInputComponent, isStandalone: true, selector: "uni-date-input, DateInput", 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 }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, parse: { classPropertyName: "parse", publicName: "parse", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", opened: "opened", closed: "closed", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dateInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "toggleRef", first: true, predicate: ["toggle"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popupRef", first: true, predicate: ["popupDialog"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: UniDropdownComponent, descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: UniCalendarComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so commits happen only when focus\n     leaves the whole field, not while moving into the popup. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <!-- The dropdown wires aria-haspopup/aria-expanded/aria-controls onto\n           this button; its name tracks the value (\"Change date, \u2026\"). -->\n      <button\n        #toggle\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'calendar_month'\"\n        [disable]=\"disabled()\"\n      >\n        {{ toggleLabel() }}\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (toggleElement()) {\n    <uni-dropdown\n      [trigger]=\"toggleElement()!\"\n      ariaHasPopup=\"dialog\"\n      placement=\"bottom-end\"\n      [color]=\"componentOptions().popupColor ?? 'primary-surface'\"\n      [shadow]=\"componentOptions().popupShadow ?? 'menu'\"\n      [borderRadius]=\"componentOptions().popupBorderRadius ?? 'xs'\"\n      paddingVertical=\"xs\"\n      paddingHorizontal=\"xs\"\n      (dropdownShowing)=\"onPopupShowing()\"\n      (dropdownHiding)=\"onPopupHiding()\"\n    >\n      <!-- A focus-holding dialog per the APG date-picker pattern: Tab cycles\n           inside, Escape closes and returns focus to the field. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n      <div #popupDialog role=\"dialog\" aria-label=\"Choose date\" (keydown)=\"onPopupKeydown($event)\">\n        <uni-calendar\n          mode=\"single\"\n          [value]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [disabledDates]=\"disabledDates()\"\n          [markers]=\"markers()\"\n          [weekStart]=\"weekStart()\"\n          [locale]=\"locale()\"\n          (selected)=\"onCalendarPick($event)\"\n        />\n      </div>\n    </uni-dropdown>\n  }\n\n  <!-- Commits, steps and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniCalendarComponent, selector: "uni-calendar, Calendar", inputs: ["value", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "mode", "month", "minDate", "maxDate", "disabledDates", "markers", "locale", "weekStart", "ariaLabel", "size"], outputs: ["valueChange", "touchedChange", "monthChange", "selected"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "color"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDateInputComponent, isStandalone: true, selector: "uni-date-input, DateInput", 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 }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, parse: { classPropertyName: "parse", publicName: "parse", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", opened: "opened", closed: "closed", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dateInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "toggleRef", first: true, predicate: ["toggle"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popupRef", first: true, predicate: ["popupDialog"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: UniDropdownComponent, descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: UniCalendarComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so commits happen only when focus\n     leaves the whole field, not while moving into the popup. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <!-- The dropdown wires aria-haspopup/aria-expanded/aria-controls onto\n           this button; its name tracks the value (\"Change date, \u2026\"). -->\n      <button\n        #toggle\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'calendar_month'\"\n        [disable]=\"disabled()\"\n      >\n        {{ toggleLabel() }}\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (toggleElement()) {\n    <uni-dropdown\n      [trigger]=\"toggleElement()!\"\n      ariaHasPopup=\"dialog\"\n      placement=\"bottom-end\"\n      [color]=\"componentOptions().popupColor ?? 'primary-surface'\"\n      [shadow]=\"componentOptions().popupShadow ?? 'menu'\"\n      [borderRadius]=\"componentOptions().popupBorderRadius ?? 'xs'\"\n      paddingVertical=\"xs\"\n      paddingHorizontal=\"xs\"\n      (dropdownShowing)=\"onPopupShowing()\"\n      (dropdownHiding)=\"onPopupHiding()\"\n    >\n      <!-- A focus-holding dialog per the APG date-picker pattern: Tab cycles\n           inside, Escape closes and returns focus to the field. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n      <div #popupDialog role=\"dialog\" aria-label=\"Choose date\" (keydown)=\"onPopupKeydown($event)\">\n        <uni-calendar\n          mode=\"single\"\n          [value]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [disabledDates]=\"disabledDates()\"\n          [markers]=\"markers()\"\n          [weekStart]=\"weekStart()\"\n          [locale]=\"locale()\"\n          (selected)=\"onCalendarPick($event)\"\n        />\n      </div>\n    </uni-dropdown>\n  }\n\n  <!-- Commits, steps and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniCalendarComponent, selector: "uni-calendar, Calendar", inputs: ["value", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "mode", "month", "minDate", "maxDate", "disabledDates", "markers", "locale", "weekStart", "ariaLabel", "size"], outputs: ["valueChange", "touchedChange", "monthChange", "selected"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "color"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDateInputComponent, decorators: [{
             type: Component,
@@ -5450,7 +5598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         UniDropdownComponent,
                         UniIconButtonComponent,
                         UniInputBoxComponent,
-                    ], providers: [{ provide: COMPONENT_NAME, useValue: 'dateInput' }], host: { '[class]': 'className()' }, template: "<!-- Focusout rides the bubbling event so commits happen only when focus\n     leaves the whole field, not while moving into the popup. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <!-- The dropdown wires aria-haspopup/aria-expanded/aria-controls onto\n           this button; its name tracks the value (\"Change date, \u2026\"). -->\n      <button\n        #toggle\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'calendar_month'\"\n        [disable]=\"disabled()\"\n      >\n        {{ toggleLabel() }}\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (toggleElement()) {\n    <uni-dropdown\n      [trigger]=\"toggleElement()!\"\n      ariaHasPopup=\"dialog\"\n      placement=\"bottom-end\"\n      [color]=\"componentOptions().popupColor ?? 'primary-surface'\"\n      [shadow]=\"componentOptions().popupShadow ?? 'menu'\"\n      [borderRadius]=\"componentOptions().popupBorderRadius ?? 'xs'\"\n      paddingVertical=\"xs\"\n      paddingHorizontal=\"xs\"\n      (dropdownShowing)=\"onPopupShowing()\"\n      (dropdownHiding)=\"onPopupHiding()\"\n    >\n      <!-- A focus-holding dialog per the APG date-picker pattern: Tab cycles\n           inside, Escape closes and returns focus to the field. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n      <div #popupDialog role=\"dialog\" aria-label=\"Choose date\" (keydown)=\"onPopupKeydown($event)\">\n        <uni-calendar\n          mode=\"single\"\n          [value]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [disabledDates]=\"disabledDates()\"\n          [markers]=\"markers()\"\n          [weekStart]=\"weekStart()\"\n          [locale]=\"locale()\"\n          (selected)=\"onCalendarPick($event)\"\n        />\n      </div>\n    </uni-dropdown>\n  }\n\n  <!-- Commits, steps and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n</div>\n" }]
+                    ], providers: [{ provide: COMPONENT_NAME, useValue: 'dateInput' }], host: { '[class]': 'className()' }, template: "<!-- Focusout rides the bubbling event so commits happen only when focus\n     leaves the whole field, not while moving into the popup. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <!-- The dropdown wires aria-haspopup/aria-expanded/aria-controls onto\n           this button; its name tracks the value (\"Change date, \u2026\"). -->\n      <button\n        #toggle\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'calendar_month'\"\n        [disable]=\"disabled()\"\n      >\n        {{ toggleLabel() }}\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (toggleElement()) {\n    <uni-dropdown\n      [trigger]=\"toggleElement()!\"\n      ariaHasPopup=\"dialog\"\n      placement=\"bottom-end\"\n      [color]=\"componentOptions().popupColor ?? 'primary-surface'\"\n      [shadow]=\"componentOptions().popupShadow ?? 'menu'\"\n      [borderRadius]=\"componentOptions().popupBorderRadius ?? 'xs'\"\n      paddingVertical=\"xs\"\n      paddingHorizontal=\"xs\"\n      (dropdownShowing)=\"onPopupShowing()\"\n      (dropdownHiding)=\"onPopupHiding()\"\n    >\n      <!-- A focus-holding dialog per the APG date-picker pattern: Tab cycles\n           inside, Escape closes and returns focus to the field. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n      <div #popupDialog role=\"dialog\" aria-label=\"Choose date\" (keydown)=\"onPopupKeydown($event)\">\n        <uni-calendar\n          mode=\"single\"\n          [value]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [disabledDates]=\"disabledDates()\"\n          [markers]=\"markers()\"\n          [weekStart]=\"weekStart()\"\n          [locale]=\"locale()\"\n          (selected)=\"onCalendarPick($event)\"\n        />\n      </div>\n    </uni-dropdown>\n  }\n\n  <!-- Commits, steps and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</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 }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], commitOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitOnBlur", required: false }] }], parse: [{ type: i0.Input, args: [{ isSignal: true, alias: "parse", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], inputRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], toggleRef: [{ type: i0.ViewChild, args: ['toggle', { ...{ read: ElementRef }, isSignal: true }] }], popupRef: [{ type: i0.ViewChild, args: ['popupDialog', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: [i0.forwardRef(() => UniDropdownComponent), { isSignal: true }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => UniCalendarComponent), { isSignal: true }] }] } });
 
 const toMinutes = (time) => {
@@ -5501,10 +5649,19 @@ class UniTimeInputComponent extends BaseComponent {
     host = inject(ElementRef);
     inputRef = viewChild('field', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
     listRef = viewChild('listbox', ...(ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []));
+    /** Ties the popup to the field so the browser tracks it in the top layer. */
+    anchor = newListboxAnchor();
+    /** `manual` where the top layer is usable, else null — see the popup helper. */
+    popupAttr = listboxPopupAttr();
+    constructor() {
+        super();
+        promoteListboxPopup(this.listRef);
+    }
     srOnly = css(visuallyHidden);
     /** A refused commit — styles the field and sets aria-invalid until edited. */
     draftInvalid = signal(false, ...(ngDevMode ? [{ debugName: "draftInvalid" }] : /* istanbul ignore next */ []));
-    announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    /** Commits, clears and refusals are otherwise silent to a screen reader. */
+    announcer = createAnnouncer();
     resolvedLocale = computed(() => this.locale() ?? (document.documentElement.lang || navigator.language || 'en-US'), ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
     resolvedHour12 = computed(() => this.hour12() ?? localeDefaultHour12(this.resolvedLocale()), ...(ngDevMode ? [{ debugName: "resolvedHour12" }] : /* istanbul ignore next */ []));
     /** The listed times: pinned `slots` verbatim, else the generated step grid. */
@@ -5530,7 +5687,7 @@ class UniTimeInputComponent extends BaseComponent {
         this.draftInvalid.set(false);
         this.setFieldText(this.displayText());
         if (!silent)
-            this.announce(time ? `${this.formatValue(time)}.` : 'Time cleared.');
+            this.announcer.announce(time ? `${this.formatValue(time)}.` : 'Time cleared.');
     }
     refuse(raw, reason, shown = raw) {
         this.draftInvalid.set(true);
@@ -5539,7 +5696,7 @@ class UniTimeInputComponent extends BaseComponent {
             'out-of-range': `${shown} is outside the allowed times.`,
             unavailable: `${shown} isn't available.`,
         }[reason];
-        this.announce(message);
+        this.announcer.announce(message);
         this.rejected.emit({ raw, reason });
     }
     commit(raw) {
@@ -5721,11 +5878,8 @@ class UniTimeInputComponent extends BaseComponent {
         if (element)
             element.value = text;
     }
-    announce(message) {
-        this.announcement.set(this.announcement() === message ? `${message} ` : message);
-    }
     // --- Styling -----------------------------------------------------------------------
-    className = computed(() => css({ display: 'block', position: 'relative' }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    className = computed(() => css({ display: 'block', position: 'relative', ...this.anchor.style }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
     rowClass = computed(() => css({ display: 'flex', alignItems: 'center', flex: 1, width: '100%', minWidth: 0 }), ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
     inputClass = computed(() => {
         const colors = this.theme.colorPalette();
@@ -5754,15 +5908,16 @@ class UniTimeInputComponent extends BaseComponent {
         const options = this.componentOptions();
         return css(listboxPopupStyles(this.theme, options, {
             maxHeight: (options.maxVisibleOptions ?? 7) * 36,
+            anchor: this.anchor.name,
         }));
     }, ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTimeInputComponent, isStandalone: true, selector: "uni-time-input, TimeInput", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'timeInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     commits only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      aria-autocomplete=\"list\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-expanded]=\"list.open()\"\n      [attr.aria-controls]=\"list.listboxId\"\n      [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <button\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        aria-haspopup=\"listbox\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'schedule'\"\n        [attr.aria-expanded]=\"list.open()\"\n        [disable]=\"disabled()\"\n        (click)=\"onToggle()\"\n      >\n        Choose time\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (list.open()) {\n    <ul #listbox [id]=\"list.listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n      @for (time of options(); track time; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"time === value()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectOption(time)\"\n        >\n          {{ optionLabels()[i] }}\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Commits and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTimeInputComponent, isStandalone: true, selector: "uni-time-input, TimeInput", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'timeInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     commits only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      aria-autocomplete=\"list\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-expanded]=\"list.open()\"\n      [attr.aria-controls]=\"list.listboxId\"\n      [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <button\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        aria-haspopup=\"listbox\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'schedule'\"\n        [attr.aria-expanded]=\"list.open()\"\n        [disable]=\"disabled()\"\n        (click)=\"onToggle()\"\n      >\n        Choose time\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (list.open()) {\n    <ul\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\n      @for (time of options(); track time; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"time === value()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectOption(time)\"\n        >\n          {{ optionLabels()[i] }}\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Commits and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTimeInputComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-time-input, TimeInput', imports: [NgTemplateOutlet, UniIconButtonComponent, UniInputBoxComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'timeInput' }], host: { '[class]': 'className()' }, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     commits only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      aria-autocomplete=\"list\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-expanded]=\"list.open()\"\n      [attr.aria-controls]=\"list.listboxId\"\n      [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <button\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        aria-haspopup=\"listbox\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'schedule'\"\n        [attr.aria-expanded]=\"list.open()\"\n        [disable]=\"disabled()\"\n        (click)=\"onToggle()\"\n      >\n        Choose time\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (list.open()) {\n    <ul #listbox [id]=\"list.listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n      @for (time of options(); track time; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"time === value()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectOption(time)\"\n        >\n          {{ optionLabels()[i] }}\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Commits and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n</div>\n" }]
-        }], 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 }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], slots: [{ type: i0.Input, args: [{ isSignal: true, alias: "slots", required: false }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], commitOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitOnBlur", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], rejected: [{ type: i0.Output, args: ["rejected"] }], inputRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['listbox', { isSignal: true }] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-time-input, TimeInput', imports: [NgTemplateOutlet, UniIconButtonComponent, UniInputBoxComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'timeInput' }], host: { '[class]': 'className()' }, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     commits only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      aria-autocomplete=\"list\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-expanded]=\"list.open()\"\n      [attr.aria-controls]=\"list.listboxId\"\n      [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <button\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        aria-haspopup=\"listbox\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'schedule'\"\n        [attr.aria-expanded]=\"list.open()\"\n        [disable]=\"disabled()\"\n        (click)=\"onToggle()\"\n      >\n        Choose time\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (list.open()) {\n    <ul\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\n      @for (time of options(); track time; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"time === value()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectOption(time)\"\n        >\n          {{ optionLabels()[i] }}\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Commits and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], slots: [{ type: i0.Input, args: [{ isSignal: true, alias: "slots", required: false }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], commitOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitOnBlur", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], rejected: [{ type: i0.Output, args: ["rejected"] }], inputRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['listbox', { isSignal: true }] }] } });
 
 /**
  * One field for a date and a time: a thin composer seating a uni-date-input
@@ -6357,10 +6512,23 @@ class UniExpandComponent extends BaseComponent {
         const override = this.transitionSpeed();
         if (override !== undefined)
             return override;
-        const speed = this.componentOptions().transitionSpeed ?? EXPAND_DEFAULT_SPEED;
         const height = this.contentHeight();
+        const speed = this.baseSpeed();
         return height === undefined ? speed : expandDuration(height, speed);
     }, ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+    /**
+     * Base speed in seconds, before the size-aware scaling above. The
+     * deprecated `transitionSpeed` option wins when a theme still sets it;
+     * otherwise the `motion` token's duration (ms) converts to seconds.
+     */
+    baseSpeed = computed(() => {
+        const options = this.componentOptions();
+        if (options.transitionSpeed !== undefined)
+            return options.transitionSpeed;
+        return this.theme.motion(options.motion ?? 'reveal').duration / 1000;
+    }, ...(ngDevMode ? [{ debugName: "baseSpeed" }] : /* istanbul ignore next */ []));
+    /** Curve for the reveal, from the same token as the speed. */
+    easing = computed(() => this.theme.motion(this.componentOptions().motion ?? 'reveal').easing, ...(ngDevMode ? [{ debugName: "easing" }] : /* 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
@@ -6393,19 +6561,19 @@ class UniExpandComponent extends BaseComponent {
      * `duration`, so the classes stay static while timing tracks the theme and
      * the content's size through signals alone.
      */
-    expandAnimation = css(motionSafe({
+    expandAnimation = computed(() => css(motionSafe({
         overflow: 'hidden',
-        animation: `${this.expand} ease-in-out ${EXPAND_DEFAULT_SPEED}s`,
-    }));
-    collapseAnimation = css(motionSafe({
+        animation: `${this.expand} ${this.easing()} ${this.baseSpeed()}s`,
+    })), ...(ngDevMode ? [{ debugName: "expandAnimation" }] : /* istanbul ignore next */ []));
+    collapseAnimation = computed(() => css(motionSafe({
         overflow: 'hidden',
-        animation: `${this.collapse} ease-in-out ${EXPAND_DEFAULT_SPEED}s`,
-    }));
+        animation: `${this.collapse} ${this.easing()} ${this.baseSpeed()}s`,
+    })), ...(ngDevMode ? [{ debugName: "collapseAnimation" }] : /* istanbul ignore next */ []));
     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 }, 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"
+      [animate.enter]="ready() ? expandAnimation() : ''"
+      [animate.leave]="collapseAnimation()"
       [class]="expandClassName"
       [style.animation-duration]="cssDuration()"
     >
@@ -6424,8 +6592,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     providers: [{ provide: COMPONENT_NAME, useValue: 'expand' }],
                     template: `@if (!collapsed()) {
     <div
-      [animate.enter]="ready() ? expandAnimation : ''"
-      [animate.leave]="collapseAnimation"
+      [animate.enter]="ready() ? expandAnimation() : ''"
+      [animate.leave]="collapseAnimation()"
       [class]="expandClassName"
       [style.animation-duration]="cssDuration()"
     >
@@ -6471,9 +6639,20 @@ class UniExpandToggleComponent {
      * 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 */ []));
+    /** Fallback clock when no `transitionSpeed` is bound: the `expand` entry's
+        motion token — the same one the region itself reads. */
+    themeService = inject(ThemeService);
+    expandOptions = this.themeService.getComponentOptions('expand');
+    speed = computed(() => {
+        const override = this.transitionSpeed();
+        if (override !== undefined)
+            return override;
+        const options = this.expandOptions();
+        // Same order uni-expand uses, so the chevron and the region never drift.
+        if (options.transitionSpeed !== undefined)
+            return options.transitionSpeed;
+        return this.themeService.motion(options.motion ?? 'reveal').duration / 1000;
+    }, ...(ngDevMode ? [{ debugName: "speed" }] : /* istanbul ignore next */ []));
     /**
      * The glyph rotates, never the host.
      *
@@ -6954,7 +7133,10 @@ class UniMenuItemComponent {
         const variantStyle = variant
             ? this.theme.component('menuItem')().variants?.[variant]
             : undefined;
-        const transitionSpeed = options.transitionSpeed ?? 0;
+        // Neither set means no transition at all — the escape hatch predates the
+        // motion scale and still works. The deprecated option wins over the token.
+        const motion = options.motion ? this.theme.motion(options.motion) : undefined;
+        const transitionSpeed = options.transitionSpeed ?? (motion ? motion.duration / 1000 : 0);
         return css([
             {
                 display: 'flex',
@@ -6983,7 +7165,7 @@ class UniMenuItemComponent {
                     pointerEvents: 'none',
                 },
             },
-            transitionSpeed > 0 && { transition: `all ${transitionSpeed}s ease` },
+            transitionSpeed > 0 && { transition: `all ${transitionSpeed}s ${motion?.easing ?? '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`
@@ -7263,6 +7445,9 @@ class UniMultiSelectComponent {
     })), ...(ngDevMode ? [{ debugName: "optionsWithSelections" }] : /* istanbul ignore next */ []));
     className = css({ display: 'contents' });
     handleCheck(checked, value) {
+        // The rendered checkbox is disabled, so this only guards a direct call.
+        if (this.options().find((option) => option.value === value)?.disabled)
+            return;
         const selections = this.selections();
         if (!selections && !checked)
             return;
@@ -7277,8 +7462,11 @@ class UniMultiSelectComponent {
             return;
         }
     }
+    /** Selects every *enabled* option — a disabled option is not committable. */
     selectAll() {
-        const allValues = this.options().map((option) => option.value);
+        const allValues = this.options()
+            .filter((option) => !option.disabled)
+            .map((option) => option.value);
         this.updates.emit(allValues);
     }
     deselectAll() {
@@ -7290,11 +7478,11 @@ class UniMultiSelectComponent {
         width: '100%',
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectComponent, isStandalone: true, selector: "uni-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, checkboxGap: { classPropertyName: "checkboxGap", publicName: "checkboxGap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updates: "updates" }, host: { properties: { "class": "className" } }, ngImport: i0, template: "<div box-layout display=\"flex\" [flexDirection]=\"flexDirection()\" [gap]=\"checkboxGap()\">\n  <!-- track $index: option values may be objects and consumers rebuild the\n       array, so identity tracking recreated every node (NG0956). -->\n  @for (option of options(); track $index) {\n    <div [class]=\"optionWrapper\">\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"values().indexOf(option.value) > -1\"\n        (checkedChange)=\"handleCheck($event, option.value)\"\n        variant=\"primary\"\n      >\n      </uni-checkbox>\n    </div>\n  }\n</div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectComponent, isStandalone: true, selector: "uni-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, checkboxGap: { classPropertyName: "checkboxGap", publicName: "checkboxGap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updates: "updates" }, host: { properties: { "class": "className" } }, ngImport: i0, template: "<div box-layout display=\"flex\" [flexDirection]=\"flexDirection()\" [gap]=\"checkboxGap()\">\n  <!-- track $index: option values may be objects and consumers rebuild the\n       array, so identity tracking recreated every node (NG0956). -->\n  @for (option of options(); track $index) {\n    <div [class]=\"optionWrapper\">\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"values().indexOf(option.value) > -1\"\n        (checkedChange)=\"handleCheck($event, option.value)\"\n        variant=\"primary\"\n        [disabled]=\"!!option.disabled\"\n      >\n      </uni-checkbox>\n    </div>\n  }\n</div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uni-multi-select', imports: [UniCheckboxComponent, UniBoxComponent], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div box-layout display=\"flex\" [flexDirection]=\"flexDirection()\" [gap]=\"checkboxGap()\">\n  <!-- track $index: option values may be objects and consumers rebuild the\n       array, so identity tracking recreated every node (NG0956). -->\n  @for (option of options(); track $index) {\n    <div [class]=\"optionWrapper\">\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"values().indexOf(option.value) > -1\"\n        (checkedChange)=\"handleCheck($event, option.value)\"\n        variant=\"primary\"\n      >\n      </uni-checkbox>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'uni-multi-select', imports: [UniCheckboxComponent, UniBoxComponent], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div box-layout display=\"flex\" [flexDirection]=\"flexDirection()\" [gap]=\"checkboxGap()\">\n  <!-- track $index: option values may be objects and consumers rebuild the\n       array, so identity tracking recreated every node (NG0956). -->\n  @for (option of options(); track $index) {\n    <div [class]=\"optionWrapper\">\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"values().indexOf(option.value) > -1\"\n        (checkedChange)=\"handleCheck($event, option.value)\"\n        variant=\"primary\"\n        [disabled]=\"!!option.disabled\"\n      >\n      </uni-checkbox>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selections: [{ type: i0.Input, args: [{ isSignal: true, alias: "selections", required: false }] }], updates: [{ type: i0.Output, args: ["updates"] }], flexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexDirection", required: false }] }], checkboxGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxGap", required: false }] }] } });
 
 class UniMultiSelectDropdownComponent extends BaseComponent {
@@ -7337,10 +7525,18 @@ class UniMultiSelectDropdownComponent extends BaseComponent {
      * 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.
+     *
+     * `disabled` indexes into `filteredOptions`, matching `count`: arrows step
+     * over disabled rows and Home/End land on the nearest enabled one, so the
+     * focus target is always a checkbox that can actually take focus.
      */
     list = createListboxNavigation({
         count: () => this.filteredOptions().length,
         idPrefix: 'uni-multi-select',
+        disabled: (index) => !!this.filteredOptions()[index]?.disabled,
+        // Focus rides the option checkboxes here, not a text field, so Home/End
+        // have no caret to defer to — unlike the combobox-style consumers.
+        homeEndNavigates: true,
     });
     /** Announced with the selection so the count is not left to guesswork. */
     selectionSummary = computed(() => {
@@ -7407,11 +7603,18 @@ class UniMultiSelectDropdownComponent extends BaseComponent {
         this.list.show();
         this.list.setActive(index);
     }
+    /**
+     * Selects every *enabled* option. A disabled option is not committable, so
+     * "select all" must not commit one on the user's behalf — the same rule
+     * `toggleOption` and the keyboard path follow.
+     */
     selectAll() {
         if (this.disabled())
             return;
         this.touched.set(true);
-        const allValues = this.options().map((option) => option.value);
+        const allValues = this.options()
+            .filter((option) => !option.disabled)
+            .map((option) => option.value);
         this.value.set(allValues);
     }
     deselectAll() {
@@ -7424,7 +7627,8 @@ class UniMultiSelectDropdownComponent extends BaseComponent {
         return computed(() => this.value().includes(option.value));
     }
     toggleOption(option, checked) {
-        if (this.disabled())
+        // The nav hook keeps the keyboard off disabled rows; this stops a pointer.
+        if (this.disabled() || option.disabled)
             return;
         this.touched.set(true);
         const { value } = option;
@@ -7440,7 +7644,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 }, 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 });
+    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() || !!option.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,
@@ -7455,7 +7659,7 @@ 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  @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" }]
+                    ], 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() || !!option.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 {
@@ -7568,12 +7772,23 @@ class UniAlertComponent extends BaseComponent {
     alertRef;
     alertState = signal('closed', ...(ngDevMode ? [{ debugName: "alertState" }] : /* istanbul ignore next */ []));
     effectiveVariant = computed(() => this.variant() || this.componentOptions().defaultVariant, ...(ngDevMode ? [{ debugName: "effectiveVariant" }] : /* istanbul ignore next */ []));
+    /**
+     * Timing for the enter/leave transition. The deprecated `transitionSpeed`
+     * (seconds) wins when a theme still sets it.
+     */
+    motion = computed(() => {
+        const options = this.componentOptions();
+        const token = this.theme.motion(options.motion ?? 'notification');
+        return options.transitionSpeed === undefined
+            ? token
+            : { ...token, duration: options.transitionSpeed * 1000 };
+    }, ...(ngDevMode ? [{ debugName: "motion" }] : /* istanbul ignore next */ []));
     alertClass = computed(() => css({
         ...this.theme.getContainerColors(this.effectiveVariant(), this.useVariant()),
         ...this.theme.radius(this.componentOptions().borderRadius),
         ...this.theme.border(this.effectiveVariant()),
         ...this.theme.boxShadow(this.componentOptions().elevation),
-        transition: `all ${this.componentOptions().transitionSpeed}s ease-in-out`,
+        transition: `all ${this.motion().duration / 1000}s ${this.motion().easing}`,
         transitionBehavior: 'allow-discrete',
         opacity: 1,
         top: this.componentOptions().topPosition,
@@ -7679,19 +7894,48 @@ class UniSnackbarComponent extends BaseComponent {
         super();
         effect(() => (this.show() ? this.open() : this.close()));
     }
+    /**
+     * Timing for the enter/leave transition. The deprecated `transitionDelay`
+     * wins when a theme still sets it — it is a CSS time string, so `0.35s` and
+     * `350ms` both parse back to milliseconds.
+     */
+    motion = computed(() => {
+        const options = this.componentOptions();
+        const token = this.theme.motion(options.motion ?? 'notification');
+        const legacy = options.transitionDelay;
+        if (!legacy)
+            return token;
+        const ms = legacy.trim().endsWith('ms') ? parseFloat(legacy) : parseFloat(legacy) * 1000;
+        return Number.isFinite(ms) ? { ...token, duration: ms } : token;
+    }, ...(ngDevMode ? [{ debugName: "motion" }] : /* istanbul ignore next */ []));
     snackbarClass = computed(() => css({
+        // The UA's `[popover]` border, before the theme's own so a themed border
+        // still wins. Its `background-color: Canvas` needs no reset — the
+        // container colors below beat it on origin, and resetting `background`
+        // here would erase them, since it is a shorthand.
+        border: 'none',
         ...this.theme.getContainerColors(this.variant() || 'primary', this.useVariant()),
         ...this.theme.radius('sm'),
         ...this.theme.border(this.variant() || 'primary'),
         ...this.theme.boxShadow('dialog'),
         padding: 0,
-        transition: `all ${this.componentOptions().transitionDelay} ease-in-out`,
+        transition: `all ${this.motion().duration}ms ${this.motion().easing}`,
         transitionBehavior: 'allow-discrete',
         opacity: 1,
-        bottom: this.componentOptions().bottomPosition,
-        zIndex: Z_INDEX.dialog,
+        // `[popover]` arrives centred by `inset: 0; margin: auto`. Undo that,
+        // then rebuild the bottom-centred placement `<dialog>` used to get from
+        // its own UA rules: shrink to the content, pin to the bottom, and let
+        // auto inline margins centre it between the viewport edges.
         position: 'fixed',
-        '&[open]': {
+        inset: 'auto',
+        left: 0,
+        right: 0,
+        bottom: this.componentOptions().bottomPosition,
+        width: 'fit-content',
+        maxWidth: '100%',
+        marginInline: 'auto',
+        marginBlock: 0,
+        '&:popover-open': {
             '@starting-style': {
                 bottom: 0,
                 opacity: 0,
@@ -7712,7 +7956,9 @@ class UniSnackbarComponent extends BaseComponent {
     ngAfterViewInit() {
         this._snackbar?.addEventListener('animationend', (e) => {
             if (e.animationName == this.fadeOut) {
-                this._snackbar?.close();
+                // Leaves the top layer only once the fade has finished — hiding first
+                // would remove the bar mid-animation.
+                this.hide();
                 this.showing.emit(false);
             }
         });
@@ -7727,7 +7973,12 @@ class UniSnackbarComponent extends BaseComponent {
     }
     open() {
         this._snackbar?.removeAttribute('closing');
-        this._snackbar?.show();
+        try {
+            this._snackbar?.showPopover();
+        }
+        catch {
+            // Already showing — reopening is a no-op, the timer below still restarts.
+        }
         this.show.set(true);
         this.showing.emit(true);
         if (this._timeout)
@@ -7737,6 +7988,15 @@ class UniSnackbarComponent extends BaseComponent {
         this._snackbar?.setAttribute('closing', 'true');
         this.show.set(false);
     }
+    /** Drops out of the top layer. Called once the closing fade has run. */
+    hide() {
+        try {
+            this._snackbar?.hidePopover();
+        }
+        catch {
+            // Already hidden.
+        }
+    }
     pauseTimer() {
         this.timer.pause();
     }
@@ -7744,7 +8004,7 @@ class UniSnackbarComponent extends BaseComponent {
         this.timer.resume();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSnackbarComponent, isStandalone: true, selector: "uni-snackbar", inputs: { show: { classPropertyName: "show", publicName: "show", 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 }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", action: "action", showing: "showing" }, providers: [{ provide: COMPONENT_NAME, useValue: 'snackbar' }], viewQueries: [{ propertyName: "snackbarRef", first: true, predicate: ["snackbar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let icon = iconName();\n@let symbol = symbolName();\n<!-- role=\"status\" announces the message politely without stealing focus -->\n<dialog\n  #snackbar\n  [class]=\"snackbarClass()\"\n  role=\"status\"\n  (mouseenter)=\"pauseTimer()\"\n  (mouseleave)=\"resumeTimer()\"\n  (focusin)=\"pauseTimer()\"\n  (focusout)=\"resumeTimer()\"\n>\n  <div row-layout alignItems=\"center\">\n    @if (icon || symbol) {\n      <div box-layout [height]=\"26\" [width]=\"26\" paddingLeft=\"sm\">\n        @if (icon) {\n          <uni-icon [name]=\"icon\"></uni-icon>\n        } @else if (symbol) {\n          <uni-symbol [name]=\"symbol\" [opticalSize]=\"26\"></uni-symbol>\n        }\n      </div>\n    }\n    <div box-layout padding=\"sm\">\n      <span uni-text>\n        <ng-content></ng-content>\n      </span>\n    </div>\n    <div box-layout paddingRight=\"sm\">\n      @if (!actionLabel()) {\n        <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">Close</button>\n      } @else {\n        <button text-button variant=\"ghost\" (click)=\"this.action.emit(); close()\">\n          {{ actionLabel() }}\n        </button>\n      }\n    </div>\n  </div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { 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: 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"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSnackbarComponent, isStandalone: true, selector: "uni-snackbar", inputs: { show: { classPropertyName: "show", publicName: "show", 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 }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", action: "action", showing: "showing" }, providers: [{ provide: COMPONENT_NAME, useValue: 'snackbar' }], viewQueries: [{ propertyName: "snackbarRef", first: true, predicate: ["snackbar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let icon = iconName();\n@let symbol = symbolName();\n<!-- role=\"status\" announces the message politely without stealing focus.\n     popover=\"manual\" puts the bar in the top layer so no stacking context or\n     `overflow: hidden` ancestor can cover or clip it; \"manual\" because a\n     snackbar is dismissed by its own button or its timer, never by a click\n     elsewhere on the page. Not a <dialog>: it is never modal, and dialog's\n     `open` attribute would be a second, competing notion of \"shown\". -->\n<div\n  #snackbar\n  popover=\"manual\"\n  [class]=\"snackbarClass()\"\n  role=\"status\"\n  (mouseenter)=\"pauseTimer()\"\n  (mouseleave)=\"resumeTimer()\"\n  (focusin)=\"pauseTimer()\"\n  (focusout)=\"resumeTimer()\"\n>\n  <div row-layout alignItems=\"center\">\n    @if (icon || symbol) {\n      <div box-layout [height]=\"26\" [width]=\"26\" paddingLeft=\"sm\">\n        @if (icon) {\n          <uni-icon [name]=\"icon\"></uni-icon>\n        } @else if (symbol) {\n          <uni-symbol [name]=\"symbol\" [opticalSize]=\"26\"></uni-symbol>\n        }\n      </div>\n    }\n    <div box-layout padding=\"sm\">\n      <span uni-text>\n        <ng-content></ng-content>\n      </span>\n    </div>\n    <div box-layout paddingRight=\"sm\">\n      @if (!actionLabel()) {\n        <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">Close</button>\n      } @else {\n        <button text-button variant=\"ghost\" (click)=\"this.action.emit(); close()\">\n          {{ actionLabel() }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { 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: 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"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSnackbarComponent, decorators: [{
             type: Component,
@@ -7756,7 +8016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         UniSymbolComponent,
                         UniIconComponent,
                         UniButtonComponent,
-                    ], providers: [{ provide: COMPONENT_NAME, useValue: 'snackbar' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let icon = iconName();\n@let symbol = symbolName();\n<!-- role=\"status\" announces the message politely without stealing focus -->\n<dialog\n  #snackbar\n  [class]=\"snackbarClass()\"\n  role=\"status\"\n  (mouseenter)=\"pauseTimer()\"\n  (mouseleave)=\"resumeTimer()\"\n  (focusin)=\"pauseTimer()\"\n  (focusout)=\"resumeTimer()\"\n>\n  <div row-layout alignItems=\"center\">\n    @if (icon || symbol) {\n      <div box-layout [height]=\"26\" [width]=\"26\" paddingLeft=\"sm\">\n        @if (icon) {\n          <uni-icon [name]=\"icon\"></uni-icon>\n        } @else if (symbol) {\n          <uni-symbol [name]=\"symbol\" [opticalSize]=\"26\"></uni-symbol>\n        }\n      </div>\n    }\n    <div box-layout padding=\"sm\">\n      <span uni-text>\n        <ng-content></ng-content>\n      </span>\n    </div>\n    <div box-layout paddingRight=\"sm\">\n      @if (!actionLabel()) {\n        <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">Close</button>\n      } @else {\n        <button text-button variant=\"ghost\" (click)=\"this.action.emit(); close()\">\n          {{ actionLabel() }}\n        </button>\n      }\n    </div>\n  </div>\n</dialog>\n" }]
+                    ], providers: [{ provide: COMPONENT_NAME, useValue: 'snackbar' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let icon = iconName();\n@let symbol = symbolName();\n<!-- role=\"status\" announces the message politely without stealing focus.\n     popover=\"manual\" puts the bar in the top layer so no stacking context or\n     `overflow: hidden` ancestor can cover or clip it; \"manual\" because a\n     snackbar is dismissed by its own button or its timer, never by a click\n     elsewhere on the page. Not a <dialog>: it is never modal, and dialog's\n     `open` attribute would be a second, competing notion of \"shown\". -->\n<div\n  #snackbar\n  popover=\"manual\"\n  [class]=\"snackbarClass()\"\n  role=\"status\"\n  (mouseenter)=\"pauseTimer()\"\n  (mouseleave)=\"resumeTimer()\"\n  (focusin)=\"pauseTimer()\"\n  (focusout)=\"resumeTimer()\"\n>\n  <div row-layout alignItems=\"center\">\n    @if (icon || symbol) {\n      <div box-layout [height]=\"26\" [width]=\"26\" paddingLeft=\"sm\">\n        @if (icon) {\n          <uni-icon [name]=\"icon\"></uni-icon>\n        } @else if (symbol) {\n          <uni-symbol [name]=\"symbol\" [opticalSize]=\"26\"></uni-symbol>\n        }\n      </div>\n    }\n    <div box-layout padding=\"sm\">\n      <span uni-text>\n        <ng-content></ng-content>\n      </span>\n    </div>\n    <div box-layout paddingRight=\"sm\">\n      @if (!actionLabel()) {\n        <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">Close</button>\n      } @else {\n        <button text-button variant=\"ghost\" (click)=\"this.action.emit(); close()\">\n          {{ actionLabel() }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }, { type: i0.Output, args: ["showChange"] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], timeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeout", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], useVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "useVariant", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], showing: [{ type: i0.Output, args: ["showing"] }], snackbarRef: [{ type: i0.ViewChild, args: ['snackbar', { isSignal: true }] }] } });
 
 class NotificationsComponent {
@@ -8134,6 +8394,7 @@ class UniPopoverComponent extends BaseComponent {
     }, ...(ngDevMode ? [{ debugName: "resolvedMaxWidth" }] : /* istanbul ignore next */ []));
     popoverClassName = computed(() => {
         const options = this.componentOptions();
+        const motion = this.theme.motion(options.motion);
         return css({
             ...this.theme.colorPair(options.color),
             ...this.theme.radius(options.borderRadius),
@@ -8145,7 +8406,7 @@ class UniPopoverComponent extends BaseComponent {
             maxWidth: this.resolvedMaxWidth(),
             overflow: 'visible',
             ...anchorStyles(this.anchorName, this.placement(), { mainAxis: options.offset }),
-            ...discreteOverlayTransition(250, { opacity: 0 }, { opacity: 1 }),
+            ...discreteOverlayTransition(motion.duration, { opacity: 0 }, { opacity: 1 }, motion.easing),
         });
     }, ...(ngDevMode ? [{ debugName: "popoverClassName" }] : /* istanbul ignore next */ []));
     /** Empty regions collapse, so bare content renders v1's single-region look. */
@@ -8344,9 +8605,12 @@ class UniRadioComponent extends BaseComponent {
         // transitions are scoped — never `all` — so the focus ring's outline and
         // shadow apply instantly instead of interpolating from a stale outline
         // color, which flashed a dark ring before the themed ring color landed.
-        const speed = this.componentOptions().transitionSpeed ?? 0.3;
-        const ringTransition = `border-color ${speed}s ease, background-color ${speed}s ease`;
-        const dotTransition = `transform ${speed}s ease`;
+        const options = this.componentOptions();
+        // The deprecated option wins so a theme that set it keeps its timing.
+        const motion = this.theme.motion(options.motion ?? 'control');
+        const speed = options.transitionSpeed ?? motion.duration / 1000;
+        const ringTransition = `border-color ${speed}s ${motion.easing}, background-color ${speed}s ${motion.easing}`;
+        const dotTransition = `transform ${speed}s ${motion.easing}`;
         return css({
             userSelect: 'none',
             cursor: this.disabled() ? 'not-allowed' : 'pointer',
@@ -8455,6 +8719,15 @@ class UniSearchInputComponent extends BaseComponent {
     search = output();
     suggestionSelected = output();
     field = viewChild.required(UniDebounceInputComponent);
+    listRef = viewChild('listbox', ...(ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []));
+    /** Ties the popup to the field so the browser tracks it in the top layer. */
+    anchor = newListboxAnchor();
+    /** `manual` where the top layer is usable, else null — see the popup helper. */
+    popupAttr = listboxPopupAttr();
+    constructor() {
+        super();
+        promoteListboxPopup(this.listRef);
+    }
     visibleSuggestions = computed(() => this.suggestions().slice(0, this.componentOptions().maxSuggestions ?? 8), ...(ngDevMode ? [{ debugName: "visibleSuggestions" }] : /* istanbul ignore next */ []));
     /** Shared combobox bookkeeping: open state, active option, ARIA ids. */
     list = createListboxNavigation({
@@ -8513,20 +8786,21 @@ class UniSearchInputComponent extends BaseComponent {
         display: 'block',
         position: 'relative',
         width: this.width(),
+        ...this.anchor.style,
         '& .uni-search-lead': {
             fontSize: 20,
             ...this.theme.color('on-background-variant'),
             ...this.theme.paddingLeft('sm'),
         },
     }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    listClass = computed(() => css(listboxPopupStyles(this.theme, this.componentOptions())), ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSearchInputComponent, isStandalone: true, selector: "uni-search-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", search: "search", suggestionSelected: "suggestionSelected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'searchInput' }], viewQueries: [{ propertyName: "field", first: true, predicate: UniDebounceInputComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Keydown/focusout ride the bubbling events from the inner input; the\n     wrapper itself stays out of the tab order. -->\n<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n<div (keydown)=\"onKeydown($event)\" (focusout)=\"onFocusOut($event)\">\n  <uni-debounce-input\n    #searchField\n    [label]=\"label()\"\n    [placeholder]=\"placeholder() ?? label()\"\n    [debounceTime]=\"debounceTime()\"\n    role=\"combobox\"\n    [ariaExpanded]=\"list.open()\"\n    [ariaControls]=\"listboxId\"\n    [ariaActivedescendant]=\"list.activeDescendantId() ?? undefined\"\n    (change)=\"handleChange($event)\"\n  >\n    <uni-symbol pre-input class=\"uni-search-lead\" name=\"{{ componentOptions().searchSymbol ?? 'search' }}\" aria-hidden=\"true\" />\n    @if (hasQuery()) {\n      <button\n        post-input\n        icon-button\n        [iconName]=\"componentOptions().clearSymbol ?? 'close'\"\n        variant=\"ghost\"\n        size=\"sm\"\n        (click)=\"clear()\"\n      >\n        Clear search\n      </button>\n    }\n  </uni-debounce-input>\n\n  @if (list.open()) {\n    <ul [id]=\"listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n      @for (suggestion of visibleSuggestions(); track suggestion; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"i === list.activeIndex()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"select(suggestion)\"\n        >\n          {{ suggestion }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n", dependencies: [{ kind: "component", type: UniDebounceInputComponent, selector: "uni-debounce-input", inputs: ["inputName", "inputId", "debounceTime", "label", "placeholder", "disabled", "role", "ariaExpanded", "ariaControls", "ariaActivedescendant"], outputs: ["change"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    listClass = computed(() => css(listboxPopupStyles(this.theme, this.componentOptions(), { anchor: this.anchor.name })), ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSearchInputComponent, deps: [], 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 }, { propertyName: "listRef", first: true, predicate: ["listbox"], 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\n      #listbox\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\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]=\"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 }] }] } });
+            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\n      #listbox\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\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" }]
+        }], ctorParameters: () => [], 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 }] }], listRef: [{ type: i0.ViewChild, args: ['listbox', { isSignal: true }] }] } });
 
 /**
  * UniSearchInputComponent Barrel File
@@ -8603,11 +8877,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 }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", 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 });
+    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 }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", 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\n        [value]=\"i\"\n        [selected]=\"currentSelectedIndex() === i.toString()\"\n        [disabled]=\"opt.disabled ?? false\"\n      >\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      <!-- [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" }]
+            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\n        [value]=\"i\"\n        [selected]=\"currentSelectedIndex() === i.toString()\"\n        [disabled]=\"opt.disabled ?? false\"\n      >\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 }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**
@@ -8615,6 +8889,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * lines (the last line shortened, as real text would be), `rect` and `circle`
  * render fixed shapes. The shimmer only animates when the user allows motion;
  * it degrades to static blocks under `prefers-reduced-motion`.
+ *
+ * Color and radius are theme options with per-instance overrides, because one
+ * app routinely needs several: skeletons on a card and on the page background
+ * want different tints, and a pill placeholder wants a different corner than
+ * the text bars beside it.
  */
 class UniSkeletonComponent extends BaseComponent {
     shape = input('text', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
@@ -8624,6 +8903,19 @@ class UniSkeletonComponent extends BaseComponent {
     height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
     /** Number of text lines (text shape only). */
     lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    /** Base color token; overrides the theme option for this skeleton. */
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Shimmer highlight token; overrides the theme option for this skeleton. */
+    highlightColor = input(undefined, ...(ngDevMode ? [{ debugName: "highlightColor" }] : /* istanbul ignore next */ []));
+    /** Radius token; overrides the theme option. Circles are always round. */
+    borderRadius = input(undefined, ...(ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []));
+    /**
+     * Announces the skeleton to assistive tech as a polite status. Leave unset
+     * when a container already carries `aria-busy` — the skeleton then stays
+     * `aria-hidden`, as a decorative placeholder should.
+     */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    srOnly = css(visuallyHidden);
     cssSize = (value) => typeof value === 'number' ? `${value}px` : value;
     resolvedHeight = computed(() => {
         const height = this.height();
@@ -8641,36 +8933,61 @@ class UniSkeletonComponent extends BaseComponent {
         // Multi-line text blocks end on a short line, like real paragraphs do.
         return Array.from({ length: lines }, (_, i) => lines > 1 && i === lines - 1 ? (width ?? '60%') : (width ?? '100%'));
     }, ...(ngDevMode ? [{ debugName: "lineWidths" }] : /* istanbul ignore next */ []));
-    sweep = keyframes({
-        from: { backgroundPosition: '200% 0' },
-        to: { backgroundPosition: '-200% 0' },
-    });
+    /**
+     * The band is `bandWidth`% of the block, so it clears the block after
+     * travelling `100 / bandWidth` of its own width — the offsets below are
+     * percentages of the band, not of the block.
+     */
+    sweep = (bandWidth, direction) => {
+        const travel = `${Number(((100 / bandWidth) * 100).toFixed(2))}%`;
+        const [from, to] = direction === 'rtl' ? [travel, '-100%'] : ['-100%', travel];
+        return keyframes({
+            from: { transform: `translateX(${from})` },
+            to: { transform: `translateX(${to})` },
+        });
+    };
     className = computed(() => {
         const options = this.componentOptions();
-        const base = this.theme.colors()[options.color ?? 'surface-variant'];
-        const highlight = this.theme.colors()[options.highlightColor ?? 'surface'];
+        const base = this.theme.colors()[this.color() ?? options.color ?? 'surface-variant'];
+        const highlight = this.theme.colors()[this.highlightColor() ?? options.highlightColor ?? 'surface'];
         const animated = (options.animation ?? 'shimmer') === 'shimmer';
+        const bandWidth = Math.max(1, options.highlightWidth ?? 40);
         return css({
             display: 'flex',
             flexDirection: 'column',
             ...this.theme.gap(options.gap),
             '& .uni-skeleton-block': {
+                position: 'relative',
+                overflow: 'hidden',
                 height: this.resolvedHeight(),
                 backgroundColor: base,
                 ...(this.shape() === 'circle'
                     ? { borderRadius: '50%', flex: 'none' }
-                    : this.theme.radius(options.borderRadius)),
+                    : this.theme.radius(this.borderRadius() ?? options.borderRadius)),
                 ...(animated &&
                     motionSafe({
-                        backgroundImage: `linear-gradient(90deg, ${base} 40%, ${highlight} 50%, ${base} 60%)`,
-                        backgroundSize: '200% 100%',
-                        animation: `${this.sweep} ${options.duration ?? 1.4}s ease-in-out infinite`,
+                        // A translated band composites; animating background-position
+                        // repaints the block every frame. Both gradient ends are the base
+                        // color, so the band dissolves into the block with no alpha and
+                        // no fringing where it meets the edges.
+                        '&::after': {
+                            content: '""',
+                            position: 'absolute',
+                            insetBlock: 0,
+                            left: 0,
+                            width: `${bandWidth}%`,
+                            backgroundImage: `linear-gradient(90deg, ${base} 0%, ${highlight} 50%, ${base} 100%)`,
+                            animation: `${this.sweep(bandWidth, options.direction ?? 'ltr')} ${options.duration ?? 1.4}s ease-in-out infinite`,
+                        },
                     })),
             },
         });
     }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSkeletonComponent, isStandalone: true, selector: "uni-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'skeleton' }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSkeletonComponent, isStandalone: true, selector: "uni-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, highlightColor: { classPropertyName: "highlightColor", publicName: "highlightColor", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "attr.aria-hidden": "label() ? null : true", "attr.role": "label() ? 'status' : null" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'skeleton' }], usesInheritance: true, ngImport: i0, template: `
+    @if (label(); as text) {
+      <span [class]="srOnly">{{ text }}</span>
+    }
     @for (line of lineWidths(); track $index) {
       <div class="uni-skeleton-block" [style.width]="line"></div>
     }
@@ -8682,14 +8999,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'uni-skeleton',
                     providers: [{ provide: COMPONENT_NAME, useValue: 'skeleton' }],
-                    host: { '[class]': 'className()', 'aria-hidden': 'true' },
+                    host: {
+                        '[class]': 'className()',
+                        '[attr.aria-hidden]': 'label() ? null : true',
+                        '[attr.role]': "label() ? 'status' : null",
+                    },
                     template: `
+    @if (label(); as text) {
+      <span [class]="srOnly">{{ text }}</span>
+    }
     @for (line of lineWidths(); track $index) {
       <div class="uni-skeleton-block" [style.width]="line"></div>
     }
   `,
                 }]
-        }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] } });
+        }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], highlightColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightColor", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /**
  * Range slider on a native `<input type="range">` — keyboard interaction and
@@ -9492,12 +9816,21 @@ class UniTagInputComponent extends BaseComponent {
     rejected = output();
     inputRef = viewChild.required('field');
     chipRefs = viewChildren('chip', ...(ngDevMode ? [{ debugName: "chipRefs" }] : /* istanbul ignore next */ []));
+    listRef = viewChild('listbox', ...(ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []));
+    /** Ties the popup to the field so the browser tracks it in the top layer. */
+    anchor = newListboxAnchor();
+    /** `manual` where the top layer is usable, else null — see the popup helper. */
+    popupAttr = listboxPopupAttr();
+    constructor() {
+        super();
+        promoteListboxPopup(this.listRef);
+    }
     /** 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 */ []));
+    /** Adds, removes and refusals are otherwise silent to a screen reader. */
+    announcer = createAnnouncer();
     hintId = uniqueId('uni-tag-input-hint');
     srOnly = css(visuallyHidden);
     queryTimer;
@@ -9563,13 +9896,13 @@ class UniTagInputComponent extends BaseComponent {
         };
         this.value.update((items) => [...items, item]);
         this.added.emit(item);
-        this.announce(`${this.labelOf(item)} added. ${this.value().length} ${this.countNoun()}.`);
+        this.announcer.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.`);
+        this.announcer.announce(reason === 'duplicate' ? `${raw} is already added.` : `${raw} was not added: limit reached.`);
     }
     removeAt(index, focus = 'input') {
         const item = this.value()[index];
@@ -9577,7 +9910,7 @@ class UniTagInputComponent extends BaseComponent {
             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()}.`);
+        this.announcer.announce(`${this.labelOf(item)} removed. ${this.value().length} ${this.countNoun()}.`);
         const remaining = this.value().length;
         if (focus === 'left' && index > 0)
             this.focusChip(index - 1);
@@ -9589,10 +9922,6 @@ class UniTagInputComponent extends BaseComponent {
     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);
@@ -9765,7 +10094,11 @@ class UniTagInputComponent extends BaseComponent {
             input.value = text;
     }
     // --- Styling -------------------------------------------------------------
-    className = computed(() => css({ display: 'block' }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** The host is the popup's anchor — the box the list mirrors the width of,
+        and the one its entry animation is measured against. The wrapper below
+        has the same geometry but is only the fallback's positioning context. */
+    className = computed(() => css({ display: 'block', ...this.anchor.style }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    wrapperClass = computed(() => css({ position: 'relative' }), ...(ngDevMode ? [{ debugName: "wrapperClass" }] : /* istanbul ignore next */ []));
     fieldClass = computed(() => {
         const options = this.componentOptions();
         return css({
@@ -9789,14 +10122,14 @@ class UniTagInputComponent extends BaseComponent {
         font: 'inherit',
         padding: 0,
     }), ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
-    listClass = computed(() => css(listboxPopupStyles(this.theme, this.componentOptions())), ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTagInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTagInputComponent, isStandalone: true, selector: "uni-tag-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, parse: { classPropertyName: "parse", publicName: "parse", isSignal: true, isRequired: false, transformFunction: null }, tagVariant: { classPropertyName: "tagVariant", publicName: "tagVariant", isSignal: true, isRequired: false, transformFunction: null }, tagTone: { classPropertyName: "tagTone", publicName: "tagTone", isSignal: true, isRequired: false, transformFunction: null }, tagSize: { classPropertyName: "tagSize", publicName: "tagSize", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", query: "query", added: "added", removed: "removed", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'tagInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "chipRefs", predicate: ["chip"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes only when focus\n     leaves the whole field, not while moving between chips and the input. -->\n<div style=\"position: relative\" (focusout)=\"onFocusOut($event)\">\n  <uni-input-box [error]=\"showError()\" height=\"auto\">\n    <ul [class]=\"fieldClass()\">\n      @for (item of value(); track item.value; let i = $index) {\n        <!-- The focusable element is the chip's own button; this <li> only\n             receives keys bubbling up from it, so it must stay out of the tab\n             order (same delegation the menu uses for its roving focus). -->\n        <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n        <li #chip (keydown)=\"onChipKeydown($event, i)\" (dblclick)=\"editChip(i)\">\n          <uni-tag\n            [label]=\"labelOf(item)\"\n            [value]=\"item.value\"\n            [avatarSrc]=\"item.avatarSrc\"\n            [variant]=\"item.invalid ? 'warn' : tagVariant()\"\n            [tone]=\"tagTone()\"\n            [size]=\"tagSize() ?? componentOptions().chipSize ?? 'md'\"\n            [invalid]=\"!!item.invalid\"\n            [disabled]=\"!!item.disabled || disabled()\"\n            [interactive]=\"true\"\n            [removable]=\"!item.disabled && !disabled()\"\n            [controlTabIndex]=\"-1\"\n            (removed)=\"removeAt(i)\"\n          />\n        </li>\n      }\n\n      <li [class]=\"inputClass()\">\n        <!-- The field is one tab stop: chips carry tabindex=\"-1\" and are\n             entered with Backspace/ArrowLeft, so Tab never walks through\n             eight recipients to reach the next control. -->\n        <input\n          #field\n          type=\"text\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          [class]=\"inputClass()\"\n          [disabled]=\"disabled()\"\n          [placeholder]=\"placeholder() ?? ''\"\n          [attr.aria-label]=\"label()\"\n          [attr.aria-expanded]=\"list.open()\"\n          [attr.aria-controls]=\"list.listboxId\"\n          [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          [attr.aria-invalid]=\"showError() ? true : null\"\n          [attr.aria-required]=\"required() ? true : null\"\n          (keydown)=\"onInputKeydown($event)\"\n          (input)=\"onInput($any($event.target).value)\"\n          (paste)=\"onPaste($event)\"\n          (blur)=\"onBlur()\"\n        />\n      </li>\n    </ul>\n  </uni-input-box>\n\n  @if (list.open()) {\n    <ul [id]=\"list.listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n      @for (suggestion of visibleSuggestions(); track suggestion.value; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"i === list.activeIndex()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectSuggestion(suggestion)\"\n        >\n          {{ labelOf(suggestion) }}\n          @if (suggestion.description) {\n            <span [class]=\"srOnly\">{{ suggestion.description }}</span>\n          }\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Said once for the whole field, rather than every chip advertising it. -->\n  <span [id]=\"hintId\" [class]=\"srOnly\">\n    Press Backspace to reach the last entry, then Backspace again to remove it.\n  </span>\n\n  <!-- Adds and removes are otherwise silent for a screen reader. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n</div>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }, { kind: "component", type: UniTagComponent, selector: "uni-tag", inputs: ["size", "tone", "label", "value", "maxWidth", "avatarSrc", "avatarName", "iconName", "symbolName", "dot", "removable", "interactive", "selected", "invalid", "disabled", "removeLabel", "controlTabIndex"], outputs: ["removed", "activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    listClass = computed(() => css(listboxPopupStyles(this.theme, this.componentOptions(), { anchor: this.anchor.name })), ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTagInputComponent, deps: [], 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 }, { propertyName: "listRef", first: true, predicate: ["listbox"], 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 [class]=\"wrapperClass()\" (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\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\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\">{{ announcer.message() }}</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 }] }] } });
+            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 [class]=\"wrapperClass()\" (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\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\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\">{{ announcer.message() }}</span>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], 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 }] }], listRef: [{ type: i0.ViewChild, args: ['listbox', { isSignal: true }] }] } });
 
 /**
  * UniTagInputComponent Barrel File
@@ -11090,7 +11423,9 @@ class UniTourComponent extends BaseComponent {
     skipped = output();
     calloutOpen = signal(false, ...(ngDevMode ? [{ debugName: "calloutOpen" }] : /* istanbul ignore next */ []));
     satisfied = signal(true, ...(ngDevMode ? [{ debugName: "satisfied" }] : /* istanbul ignore next */ []));
-    announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    /** Repeats must still be heard: the same gate message can come round
+        again on a later step. */
+    announcer = createAnnouncer();
     resolvedTarget = signal(undefined, ...(ngDevMode ? [{ debugName: "resolvedTarget" }] : /* istanbul ignore next */ []));
     presentedIndex = signal(null, ...(ngDevMode ? [{ debugName: "presentedIndex" }] : /* istanbul ignore next */ []));
     gateCleanup = null;
@@ -11194,7 +11529,7 @@ class UniTourComponent extends BaseComponent {
                 this.advance();
             }
             else {
-                this.announcement.set('Next available');
+                this.announcer.announce('Next available');
             }
         });
         this.gateCleanup = () => {
@@ -11262,11 +11597,11 @@ class UniTourComponent extends BaseComponent {
     }, ...(ngDevMode ? [{ debugName: "dotsClassName" }] : /* istanbul ignore next */ []));
     fractionClassName = css({ margin: '0 auto' });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTourComponent, isStandalone: true, selector: "uni-tour", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLabel: { classPropertyName: "skipLabel", publicName: "skipLabel", isSignal: true, isRequired: false, transformFunction: null }, doneLabel: { classPropertyName: "doneLabel", publicName: "doneLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", started: "started", stepChanged: "stepChanged", finished: "finished", skipped: "skipped" }, providers: [{ provide: COMPONENT_NAME, useValue: 'tour' }], usesInheritance: true, ngImport: i0, template: "<uni-callout\n  [(open)]=\"calloutOpen\"\n  [key]=\"currentStep()?.key ?? ''\"\n  [target]=\"resolvedTarget()\"\n  [placement]=\"currentStep()?.placement ?? 'bottom'\"\n  [backdrop]=\"currentStep()?.backdrop\"\n  [targetInteractive]=\"targetInteractive()\"\n  [header]=\"currentStep()?.title ?? ''\"\n  [ariaLabel]=\"stepAriaLabel()\"\n  [closeLabel]=\"skipLabel()\"\n  (dismissed)=\"onDismissed($event)\"\n  (panelKeydown)=\"onPanelKeydown($event)\"\n>\n  <p>{{ currentStep()?.body }}</p>\n  <div callout-actions [class]=\"footerClassName()\">\n    @if (index() > 0) {\n      <button text-button variant=\"ghost\" (click)=\"back()\">{{ backLabel() }}</button>\n    }\n    @if (componentOptions().progressStyle === 'fraction') {\n      <span aria-hidden=\"true\" [class]=\"fractionClassName\">{{ index() + 1 }} of {{ steps().length }}</span>\n    } @else {\n      <span aria-hidden=\"true\" [class]=\"dotsClassName()\">\n        @for (step of steps(); track $index) {\n          <i [class.on]=\"$index === index()\"></i>\n        }\n      </span>\n    }\n    <!-- A click-gate advances by using the target itself \u2014 a Next button\n         would be a lie, so none renders. -->\n    @if (!clickGate()) {\n      <button text-button [disable]=\"!satisfied()\" (click)=\"advance()\">\n        {{ isLast() ? doneLabel() : nextLabel() }}\n      </button>\n    }\n  </div>\n</uni-callout>\n<!-- One live region per tour: gate unlocks are announced here. -->\n<span role=\"status\" [class]=\"statusClassName\">{{ announcement() }}</span>\n", dependencies: [{ kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "component", type: UniCalloutComponent, selector: "uni-callout", inputs: ["open", "key", "target", "placement", "backdrop", "targetInteractive", "dismissible", "dismissOnBackdrop", "header", "arrow", "ariaLabel", "closeLabel"], outputs: ["openChange", "opened", "closed", "dismissed", "panelKeydown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTourComponent, isStandalone: true, selector: "uni-tour", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLabel: { classPropertyName: "skipLabel", publicName: "skipLabel", isSignal: true, isRequired: false, transformFunction: null }, doneLabel: { classPropertyName: "doneLabel", publicName: "doneLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", started: "started", stepChanged: "stepChanged", finished: "finished", skipped: "skipped" }, providers: [{ provide: COMPONENT_NAME, useValue: 'tour' }], usesInheritance: true, ngImport: i0, template: "<uni-callout\n  [(open)]=\"calloutOpen\"\n  [key]=\"currentStep()?.key ?? ''\"\n  [target]=\"resolvedTarget()\"\n  [placement]=\"currentStep()?.placement ?? 'bottom'\"\n  [backdrop]=\"currentStep()?.backdrop\"\n  [targetInteractive]=\"targetInteractive()\"\n  [header]=\"currentStep()?.title ?? ''\"\n  [ariaLabel]=\"stepAriaLabel()\"\n  [closeLabel]=\"skipLabel()\"\n  (dismissed)=\"onDismissed($event)\"\n  (panelKeydown)=\"onPanelKeydown($event)\"\n>\n  <p>{{ currentStep()?.body }}</p>\n  <div callout-actions [class]=\"footerClassName()\">\n    @if (index() > 0) {\n      <button text-button variant=\"ghost\" (click)=\"back()\">{{ backLabel() }}</button>\n    }\n    @if (componentOptions().progressStyle === 'fraction') {\n      <span aria-hidden=\"true\" [class]=\"fractionClassName\">{{ index() + 1 }} of {{ steps().length }}</span>\n    } @else {\n      <span aria-hidden=\"true\" [class]=\"dotsClassName()\">\n        @for (step of steps(); track $index) {\n          <i [class.on]=\"$index === index()\"></i>\n        }\n      </span>\n    }\n    <!-- A click-gate advances by using the target itself \u2014 a Next button\n         would be a lie, so none renders. -->\n    @if (!clickGate()) {\n      <button text-button [disable]=\"!satisfied()\" (click)=\"advance()\">\n        {{ isLast() ? doneLabel() : nextLabel() }}\n      </button>\n    }\n  </div>\n</uni-callout>\n<!-- One live region per tour: gate unlocks are announced here. -->\n<span role=\"status\" [class]=\"statusClassName\">{{ announcer.message() }}</span>\n", dependencies: [{ kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "component", type: UniCalloutComponent, selector: "uni-callout", inputs: ["open", "key", "target", "placement", "backdrop", "targetInteractive", "dismissible", "dismissOnBackdrop", "header", "arrow", "ariaLabel", "closeLabel"], outputs: ["openChange", "opened", "closed", "dismissed", "panelKeydown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTourComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-tour', imports: [UniButtonComponent, UniCalloutComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'tour' }], template: "<uni-callout\n  [(open)]=\"calloutOpen\"\n  [key]=\"currentStep()?.key ?? ''\"\n  [target]=\"resolvedTarget()\"\n  [placement]=\"currentStep()?.placement ?? 'bottom'\"\n  [backdrop]=\"currentStep()?.backdrop\"\n  [targetInteractive]=\"targetInteractive()\"\n  [header]=\"currentStep()?.title ?? ''\"\n  [ariaLabel]=\"stepAriaLabel()\"\n  [closeLabel]=\"skipLabel()\"\n  (dismissed)=\"onDismissed($event)\"\n  (panelKeydown)=\"onPanelKeydown($event)\"\n>\n  <p>{{ currentStep()?.body }}</p>\n  <div callout-actions [class]=\"footerClassName()\">\n    @if (index() > 0) {\n      <button text-button variant=\"ghost\" (click)=\"back()\">{{ backLabel() }}</button>\n    }\n    @if (componentOptions().progressStyle === 'fraction') {\n      <span aria-hidden=\"true\" [class]=\"fractionClassName\">{{ index() + 1 }} of {{ steps().length }}</span>\n    } @else {\n      <span aria-hidden=\"true\" [class]=\"dotsClassName()\">\n        @for (step of steps(); track $index) {\n          <i [class.on]=\"$index === index()\"></i>\n        }\n      </span>\n    }\n    <!-- A click-gate advances by using the target itself \u2014 a Next button\n         would be a lie, so none renders. -->\n    @if (!clickGate()) {\n      <button text-button [disable]=\"!satisfied()\" (click)=\"advance()\">\n        {{ isLast() ? doneLabel() : nextLabel() }}\n      </button>\n    }\n  </div>\n</uni-callout>\n<!-- One live region per tour: gate unlocks are announced here. -->\n<span role=\"status\" [class]=\"statusClassName\">{{ announcement() }}</span>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-tour', imports: [UniButtonComponent, UniCalloutComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'tour' }], template: "<uni-callout\n  [(open)]=\"calloutOpen\"\n  [key]=\"currentStep()?.key ?? ''\"\n  [target]=\"resolvedTarget()\"\n  [placement]=\"currentStep()?.placement ?? 'bottom'\"\n  [backdrop]=\"currentStep()?.backdrop\"\n  [targetInteractive]=\"targetInteractive()\"\n  [header]=\"currentStep()?.title ?? ''\"\n  [ariaLabel]=\"stepAriaLabel()\"\n  [closeLabel]=\"skipLabel()\"\n  (dismissed)=\"onDismissed($event)\"\n  (panelKeydown)=\"onPanelKeydown($event)\"\n>\n  <p>{{ currentStep()?.body }}</p>\n  <div callout-actions [class]=\"footerClassName()\">\n    @if (index() > 0) {\n      <button text-button variant=\"ghost\" (click)=\"back()\">{{ backLabel() }}</button>\n    }\n    @if (componentOptions().progressStyle === 'fraction') {\n      <span aria-hidden=\"true\" [class]=\"fractionClassName\">{{ index() + 1 }} of {{ steps().length }}</span>\n    } @else {\n      <span aria-hidden=\"true\" [class]=\"dotsClassName()\">\n        @for (step of steps(); track $index) {\n          <i [class.on]=\"$index === index()\"></i>\n        }\n      </span>\n    }\n    <!-- A click-gate advances by using the target itself \u2014 a Next button\n         would be a lie, so none renders. -->\n    @if (!clickGate()) {\n      <button text-button [disable]=\"!satisfied()\" (click)=\"advance()\">\n        {{ isLast() ? doneLabel() : nextLabel() }}\n      </button>\n    }\n  </div>\n</uni-callout>\n<!-- One live region per tour: gate unlocks are announced here. -->\n<span role=\"status\" [class]=\"statusClassName\">{{ announcer.message() }}</span>\n" }]
         }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], skipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], started: [{ type: i0.Output, args: ["started"] }], stepChanged: [{ type: i0.Output, args: ["stepChanged"] }], finished: [{ type: i0.Output, args: ["finished"] }], skipped: [{ type: i0.Output, args: ["skipped"] }] } });
 
 /**
@@ -11279,5 +11614,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, ListboxNavigation, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, TRANSFORM_ORIGINS, ThemeService, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCalendarComponent, UniCalloutComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniComboboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDateInputComponent, UniDateTimeInputComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniRadioComponent, UniRecordDatasource, UniRowComponent, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTagInputComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniTimeInputComponent, UniToggleComponent, UniTooltipComponent, UniTourComponent, UniWrapComponent, acceptableFile, addDays, addMonths, anchorArrowStyles, anchorStyles, buildMonthGrid, clearAnchorName, createListboxNavigation, dayOfWeek, daysInMonth, discreteOverlayTransition, focusableElements, formatDate, formatMonthHeading, formatTime, getFileExtension, inclusiveDayCount, isDivider, isToggleOpen, isValidDate, isoDate, joinDateTime, listboxPopupStyles, localeDatePlaceholder, localeDefaultHour12, localeFieldOrder, localeMonthNames, localeWeekStart, monthOf, motionSafe, newAnchorName, parseDateText, parseTimeText, resolveElement, resolveFocusTarget, restoreOverlayFocus, setAnchorName, splitDateTime, spotlightStyles, timeSlots, todayIso, transformOriginFor, uniqueId, useTimer, visuallyHidden, weekdayNames };
+export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, ListboxNavigation, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, TRANSFORM_ORIGINS, ThemeService, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCalendarComponent, UniCalloutComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniComboboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDateInputComponent, UniDateTimeInputComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniRadioComponent, UniRecordDatasource, UniRowComponent, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTagInputComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniTimeInputComponent, UniToggleComponent, UniTooltipComponent, UniTourComponent, UniWrapComponent, acceptableFile, addDays, addMonths, anchorArrowStyles, anchorStyles, buildMonthGrid, clearAnchorName, createAnnouncer, createListboxNavigation, dayOfWeek, daysInMonth, discreteOverlayTransition, focusableElements, formatDate, formatMonthHeading, formatTime, getFileExtension, inclusiveDayCount, isDivider, isToggleOpen, isValidDate, isoDate, joinDateTime, listboxPopupAttr, listboxPopupStyles, localeDatePlaceholder, localeDefaultHour12, localeFieldOrder, localeMonthNames, localeWeekStart, monthOf, motionSafe, newAnchorName, newListboxAnchor, parseDateText, parseTimeText, promoteListboxPopup, resolveElement, resolveFocusTarget, restoreOverlayFocus, setAnchorName, splitDateTime, spotlightStyles, supportsAnchoredPopup, timeSlots, todayIso, transformOriginFor, uniqueId, useTimer, visuallyHidden, weekdayNames };
 //# sourceMappingURL=uni-design-system-uni-angular.mjs.map