@uni-design-system/uni-angular 8.0.0 → 8.1.0

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, ChangeDetectionStrategy, Component, contentChildren, output, Renderer2, ElementRef, Directive, model, effect, viewChild, afterNextRender, ViewChild, afterRenderEffect, booleanAttribute, viewChildren } from '@angular/core';
 import { injectGlobal, css, keyframes } from '@emotion/css';
-import { UniThemes, LightTheme, toTypefaces, parseTheme, formatThemeIssues, hydrateTheme, createThemeFromPalette, Z_INDEX, fadeIn, fadeOut, EXPAND_DEFAULT_SPEED, expandDuration, expandFadeIn, collapseFadeOut, removeInputPlatformStyling, HOVER_OR_KEYBOARD_FOCUS, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
+import { UniThemes, LightTheme, toTypefaces, parseTheme, formatThemeIssues, hydrateTheme, createThemeFromPalette, Z_INDEX, fadeIn, removeInputPlatformStyling, fadeOut, EXPAND_DEFAULT_SPEED, expandDuration, expandFadeIn, collapseFadeOut, HOVER_OR_KEYBOARD_FOCUS, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
 import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 
 let nextUniqueId = 0;
@@ -50,6 +50,294 @@ function motionSafe(styles) {
     return { '@media (prefers-reduced-motion: no-preference)': styles };
 }
 
+/**
+ * Canonical date/time value shapes shared by `uni-calendar`,
+ * `uni-date-input`, `uni-time-input` and `uni-date-time-input`.
+ *
+ * Plain ISO strings, never `Date`s: a calendar date is a label on a wall
+ * calendar, not an instant. `new Date('2026-08-20')` is midnight UTC — which
+ * is 19 Aug in Honolulu — the classic off-by-one every `Date`-valued picker
+ * ships. Strings are timezone-free, JSON-serializable and sortable with `<`.
+ * Zoned scheduling is the app's concern; these components never touch
+ * `Date.getTimezoneOffset()`.
+ */
+
+function memoize(fn) {
+    const cache = new Map();
+    return ((...args) => {
+        const key = JSON.stringify(args);
+        if (cache.has(key)) {
+            return cache.get(key);
+        }
+        const result = fn(...args);
+        cache.set(key, result);
+        return result;
+    });
+}
+
+/**
+ * Pure date/time helpers: ISO string math, `Intl`-driven formatting and
+ * parsing. No date library — `Date` appears only as UTC arithmetic inside
+ * these functions, so no result ever depends on the machine's timezone.
+ */
+const pad = (n) => String(n).padStart(2, '0');
+const toUTC = (date) => {
+    const [y, m, d] = date.split('-').map(Number);
+    return Date.UTC(y, m - 1, d);
+};
+const fromUTC = (timestamp) => {
+    const d = new Date(timestamp);
+    return isoDate(d.getUTCFullYear(), d.getUTCMonth() + 1, d.getUTCDate());
+};
+/** `(2026, 8, 5)` → `'2026-08-05'`. Does not validate — see `isValidDate`. */
+const isoDate = (year, month, day) => `${year}-${pad(month)}-${pad(day)}`;
+/** The ISO date when the parts form a real calendar day, else `null`. */
+const isValidDate = (year, month, day) => month >= 1 && month <= 12 && day >= 1 && day <= daysInMonth(year, month)
+    ? isoDate(year, month, day)
+    : null;
+/** Days in a month, leap-year aware. */
+const daysInMonth = (year, month) => new Date(Date.UTC(year, month, 0)).getUTCDate();
+const addDays = (date, days) => fromUTC(toUTC(date) + days * 86_400_000);
+/** Same day ± n months, clamping the day to the target month's length. */
+const addMonths = (date, months) => {
+    let [y, m] = date.split('-').map(Number);
+    const d = Number(date.slice(8, 10));
+    const total = y * 12 + (m - 1) + months;
+    y = Math.floor(total / 12);
+    m = ((total % 12) + 12) % 12 + 1;
+    return isoDate(y, m, Math.min(d, daysInMonth(y, m)));
+};
+/** Day of week, 0 = Sunday … 6 = Saturday. */
+const dayOfWeek = (date) => new Date(toUTC(date)).getUTCDay();
+/** `'2026-08-20'` → `'2026-08'`. */
+const monthOf = (date) => date.slice(0, 7);
+/** Today as a local-wall-clock ISO date (the one place local time matters). */
+const todayIso = () => {
+    const d = new Date();
+    return isoDate(d.getFullYear(), d.getMonth() + 1, d.getDate());
+};
+/** Inclusive day count of a range: `('-20', '-24')` → 5. */
+const inclusiveDayCount = (start, end) => Math.round((toUTC(end) - toUTC(start)) / 86_400_000) + 1;
+/**
+ * The week matrix a calendar renders: full weeks covering `'YYYY-MM'`,
+ * starting on `weekStart` (0 = Sunday). Outside cells are always present so
+ * showing or hiding them is a pure render decision.
+ */
+const buildMonthGrid = (month, weekStart) => {
+    const [y, m] = month.split('-').map(Number);
+    const first = isoDate(y, m, 1);
+    const offset = (dayOfWeek(first) - weekStart + 7) % 7;
+    const total = daysInMonth(y, m);
+    const weeks = [];
+    let cursor = addDays(first, -offset);
+    for (let w = 0; w < Math.ceil((offset + total) / 7); w++) {
+        const week = [];
+        for (let c = 0; c < 7; c++) {
+            week.push({ date: cursor, outside: monthOf(cursor) !== month });
+            cursor = addDays(cursor, 1);
+        }
+        weeks.push(week);
+    }
+    return weeks;
+};
+// ---- Intl formatting (always UTC — the ISO string is re-hydrated as UTC
+// midnight, so the local zone can never shift the label) ---------------------
+const formatDate = (date, locale, options = { dateStyle: 'medium' }) => new Intl.DateTimeFormat(locale, { ...options, timeZone: 'UTC' }).format(new Date(toUTC(date)));
+/** `'2026-08'` → `'August 2026'` in the locale. */
+const formatMonthHeading = (month, locale) => formatDate(`${month}-01`, locale, { month: 'long', year: 'numeric' });
+/** Weekday header labels starting at `weekStart` (0 = Sunday). */
+const weekdayNames = memoize((locale, weekStart, format) => {
+    const labels = [];
+    for (let i = 0; i < 7; i++) {
+        // 2023-01-01 is a Sunday.
+        const day = new Date(Date.UTC(2023, 0, 1 + ((weekStart + i) % 7)));
+        labels.push({
+            label: new Intl.DateTimeFormat(locale, { weekday: format, timeZone: 'UTC' }).format(day),
+            full: new Intl.DateTimeFormat(locale, { weekday: 'long', timeZone: 'UTC' }).format(day),
+        });
+    }
+    return labels;
+});
+/** `'15:00'` → `'3:00 PM'` (or `'15:00'` when `hour12` is false). */
+const formatTime = (time, locale, hour12) => {
+    const [h, m] = time.split(':').map(Number);
+    return new Intl.DateTimeFormat(locale, {
+        hour: 'numeric',
+        minute: '2-digit',
+        hour12,
+        timeZone: 'UTC',
+    }).format(new Date(Date.UTC(2000, 0, 1, h, m)));
+};
+/**
+ * The locale's first day of week, 0 = Sunday … 6 = Saturday. Falls back to
+ * Sunday where `Intl.Locale` week info is unavailable.
+ */
+const localeWeekStart = memoize((locale) => {
+    try {
+        const intlLocale = new Intl.Locale(locale);
+        const info = intlLocale.getWeekInfo?.() ?? intlLocale.weekInfo;
+        // Intl counts 1 = Monday … 7 = Sunday.
+        if (info?.firstDay)
+            return info.firstDay % 7;
+    }
+    catch {
+        // Unknown locale tag — fall through to the default.
+    }
+    return 0;
+});
+/** Whether the locale's default clock is 12-hour. */
+const localeDefaultHour12 = memoize((locale) => new Intl.DateTimeFormat(locale, { hour: 'numeric' }).resolvedOptions().hour12 ?? true);
+/** The locale's numeric-date field order, e.g. en-US → month, day, year. */
+const localeFieldOrder = memoize((locale) => {
+    const parts = new Intl.DateTimeFormat(locale, { timeZone: 'UTC' }).formatToParts(new Date(Date.UTC(2000, 11, 31)));
+    return parts
+        .filter((p) => ['year', 'month', 'day'].includes(p.type))
+        .map((p) => p.type);
+});
+/** Long + short month names → month number, lowercased, dots stripped. */
+const localeMonthNames = memoize((locale) => {
+    const map = new Map();
+    for (let i = 0; i < 12; i++) {
+        const date = new Date(Date.UTC(2000, i, 15));
+        for (const style of ['long', 'short']) {
+            const name = new Intl.DateTimeFormat(locale, { month: style, timeZone: 'UTC' })
+                .format(date)
+                .toLowerCase()
+                .replace(/\./g, '');
+            map.set(name, i + 1);
+        }
+    }
+    return map;
+});
+/** The locale's digit pattern as a placeholder, e.g. `'MM/DD/YYYY'`. */
+const localeDatePlaceholder = memoize((locale) => new Intl.DateTimeFormat(locale, { timeZone: 'UTC' })
+    .format(new Date(Date.UTC(2000, 11, 31)))
+    .replace(/2000/, 'YYYY')
+    .replace(/12/, 'MM')
+    .replace(/31/, 'DD'));
+// ---- Parsing (Intl-driven — digit order and month names come from the
+// locale, never from a hardcoded table) ---------------------------------------
+/** Missing year → the NEXT occurrence: nobody schedules into the past. */
+const nextOccurrence = (month, day, today) => {
+    const year = Number(today.slice(0, 4));
+    const candidate = isValidDate(year, month, day);
+    if (candidate && candidate >= today)
+        return candidate;
+    return isValidDate(year + 1, month, day);
+};
+/**
+ * Free-typed date text → ISO date, or `null` when unreadable. Accepts, in
+ * order: ISO (`2026-08-20`), a month name from the locale's own long/short
+ * lists (`aug 20`, `20 aug 2026`, `August 20th`), and locale-numeric text
+ * (`8/20/2026`, `20.8.2026`, `08-20`) with the digit order taken from
+ * `Intl.DateTimeFormat(locale).formatToParts()`. A missing year resolves to
+ * the next occurrence; two-digit years are refused rather than guessed.
+ */
+const parseDateText = (raw, locale, options = {}) => {
+    const today = options.today ?? todayIso();
+    const s = raw
+        .trim()
+        .toLowerCase()
+        .replace(/(\d+)(st|nd|rd|th)\b/g, '$1')
+        .replace(/,/g, ' ');
+    if (!s)
+        return null;
+    // 1. ISO — what agents and APIs write.
+    const iso = s.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+    if (iso)
+        return isValidDate(+iso[1], +iso[2], +iso[3]);
+    // 2. Month name, from the locale's own list.
+    const monthNames = localeMonthNames(locale);
+    const tokens = s.split(/\s+/);
+    const monthToken = tokens.find((t) => monthNames.has(t.replace(/\./g, '')));
+    if (monthToken) {
+        const month = monthNames.get(monthToken.replace(/\./g, ''));
+        const numbers = tokens.filter((t) => /^\d+$/.test(t)).map(Number);
+        if (numbers.length === 1 && numbers[0] >= 1 && numbers[0] <= 31)
+            return nextOccurrence(month, numbers[0], today);
+        if (numbers.length === 2) {
+            const year = numbers.find((n) => n >= 1000);
+            const day = numbers.find((n) => n <= 31 && n !== year);
+            if (year && day)
+                return isValidDate(year, month, day);
+        }
+        return null;
+    }
+    // 3. Locale numeric — digit order from Intl, not hardcoded.
+    const numeric = s.match(/^(\d{1,4})[/.\-\s](\d{1,4})(?:[/.\-\s](\d{1,4}))?$/);
+    if (!numeric)
+        return null;
+    const parts = [numeric[1], numeric[2], numeric[3]].filter((p) => !!p);
+    if (parts.length === 3) {
+        if (parts[0].length === 4)
+            return isValidDate(+parts[0], +parts[1], +parts[2]); // 2026/8/20
+        const bag = {};
+        localeFieldOrder(locale).forEach((field, i) => (bag[field] = parts[i]));
+        if (!bag.year || bag.year.length < 4)
+            return null; // two-digit years are refused, not guessed
+        return isValidDate(+bag.year, +bag.month, +bag.day);
+    }
+    // Two numbers: month/day in locale order, year = next occurrence.
+    const bag = {};
+    localeFieldOrder(locale)
+        .filter((field) => field !== 'year')
+        .forEach((field, i) => (bag[field] = +parts[i]));
+    return bag.month && bag.day ? nextOccurrence(bag.month, bag.day, today) : null;
+};
+/**
+ * Free-typed time text → `'HH:mm'`, or `null`. Accepts `9`, `930`, `9:30`,
+ * `9.30`, `9 30`, `3p`, `3pm`, `3 PM`, `15:00`. Bare hours 1–7 with no
+ * meridiem lean PM when `hour12` — typing `3` into an appointment field
+ * means 15:00, not 03:00.
+ */
+const parseTimeText = (raw, hour12) => {
+    const s = raw.trim().toLowerCase().replace(/\s+/g, '');
+    const match = s.match(/^(\d{1,2})(?:[:.h]?(\d{2}))?(a|am|p|pm)?$/);
+    if (!match)
+        return null;
+    let hour = +match[1];
+    const minute = match[2] ? +match[2] : 0;
+    const meridiem = match[3];
+    if (minute > 59)
+        return null;
+    if (meridiem) {
+        if (hour < 1 || hour > 12)
+            return null;
+        if (meridiem[0] === 'p' && hour !== 12)
+            hour += 12;
+        if (meridiem[0] === 'a' && hour === 12)
+            hour = 0;
+    }
+    else {
+        if (hour > 23)
+            return null;
+        if (hour12 && hour >= 1 && hour <= 7)
+            hour += 12;
+    }
+    return `${pad(hour)}:${pad(minute)}`;
+};
+/** Every `minuteStep` time between `min` and `max` (inclusive bounds). */
+const timeSlots = (minuteStep, min, max) => {
+    const slots = [];
+    const lo = min ?? '00:00';
+    const hi = max ?? '23:59';
+    for (let minutes = 0; minutes < 24 * 60; minutes += minuteStep) {
+        const t = `${pad(Math.floor(minutes / 60))}:${pad(minutes % 60)}`;
+        if (t >= lo && t <= hi)
+            slots.push(t);
+    }
+    return slots;
+};
+// ---- Combined values --------------------------------------------------------
+const splitDateTime = (value) => {
+    if (!value)
+        return {};
+    const [date, time] = value.split('T');
+    return { ...(date ? { date } : {}), ...(time ? { time } : {}) };
+};
+/** One combined value only when both parts are present. */
+const joinDateTime = (date, time) => date && time ? `${date}T${time}` : undefined;
+
 /**
  * The keyboard and ARIA bookkeeping shared by every combobox-style popup:
  * open state, the active option index, and the `aria-activedescendant` id
@@ -519,19 +807,6 @@ class UniServerSideDatasource extends UniBaseDatasource {
     }
 }
 
-function memoize(fn) {
-    const cache = new Map();
-    return ((...args) => {
-        const key = JSON.stringify(args);
-        if (cache.has(key)) {
-            return cache.get(key);
-        }
-        const result = fn(...args);
-        cache.set(key, result);
-        return result;
-    });
-}
-
 class LocalStorageService {
     isLocalStorageAvailable = memoize(() => {
         try {
@@ -958,15 +1233,43 @@ class ThemeService {
         const token = (color + '-container');
         return this.colorPair(token, useVariant);
     };
+    /**
+     * The shared keyboard-focus indicator's styles (WCAG 2.4.7), without a
+     * selector — for controls that key the ring off their own state selector
+     * (`&:focus + .checkbox`). Everything else spreads `focusRing()` instead.
+     *
+     * Themable: a theme that defines `focusRing` **border** and/or **shadow**
+     * primitives replaces the default 2px outline with that border (drawn as
+     * an outline hugging the control) plus the ring shadow — one focus
+     * language for every control, from text fields to checkboxes to calendar
+     * days. A `focusRing` **thickness** primitive sets the outline offset
+     * (default 0 when themed, 2px for the classic outline; negative values
+     * overlay the control's own border, reading as a border-color change).
+     * Without those primitives the classic outline renders, in the given
+     * color or `currentColor`.
+     */
+    focusRingStyle = (color, gap) => {
+        const border = this.borders()['focusRing'];
+        const shadow = this.shadows()['focusRing'];
+        // An explicit per-call gap wins; else the theme's `focusRing` thickness
+        // primitive; else the branch default (hugging when themed, classic 2px).
+        const offset = gap ?? this.thicknesses()['focusRing'];
+        if (border || shadow) {
+            return {
+                outline: border ?? 'none',
+                outlineOffset: offset ?? 0,
+                ...(shadow ? { boxShadow: shadow } : {}),
+            };
+        }
+        return { outline: `2px solid ${color ?? 'currentColor'}`, outlineOffset: offset ?? '2px' };
+    };
     /**
      * Shared keyboard-focus indicator (WCAG 2.4.7). Spread into a component's
      * Emotion styles: `...this.theme.focusRing()` or `focusRing('primary')`.
+     * See `focusRingStyle` for how themes restyle it.
      */
     focusRing = (token) => ({
-        '&:focus-visible': {
-            outline: `2px solid ${token ? this.colors()[token] : 'currentColor'}`,
-            outlineOffset: '2px',
-        },
+        '&:focus-visible': this.focusRingStyle(token ? this.colors()[token] : undefined),
     });
     typeface = (typeface) => {
         const typefaces = this.typeFaces();
@@ -2139,73 +2442,705 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * This file exports all public-facing elements of the button-group component.
  */
 
-class UniCardContentComponent extends BaseComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniCardContentComponent, isStandalone: true, selector: "uni-card-content", providers: [{ provide: COMPONENT_NAME, useValue: 'cardContent' }], usesInheritance: true, ngImport: i0, template: "<div [style]=\"style()\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class BodyRenderDirective {
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    ngOnInit() {
+        const element = this.el.nativeElement;
+        this.renderer.appendChild(document.body, element);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BodyRenderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.12", type: BodyRenderDirective, isStandalone: true, selector: "[uniBodyRender]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardContentComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-card-content', imports: [], providers: [{ provide: COMPONENT_NAME, useValue: 'cardContent' }], template: "<div [style]=\"style()\">\n  <ng-content></ng-content>\n</div>\n" }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BodyRenderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uniBodyRender]',
+                }]
         }] });
 
-/**
- * Typeface defaults by host element, so semantic HTML and the type scale
- * reinforce each other: `<h1 uni-text>` is already headline-large.
- */
-const TagTypefaces = {
-    h1: 'headline-large',
-    h2: 'headline-medium',
-    h3: 'headline-small',
-    h4: 'title-large',
-    h5: 'title-medium',
-    h6: 'title-small',
-    p: 'body-1-long',
-    small: 'caption',
-    figcaption: 'caption',
-    blockquote: 'quote',
-    label: 'label',
-};
-/**
- * The typography primitive, applied as an attribute to any element so
- * semantics stay yours. The attribute value is the typeface:
- * `<h1 uni-text="display-small">`, `<span uni-text="caption">`, dynamic via
- * `[uni-text]="role()"`. With no value, the typeface is inferred from the
- * host element (h1 → headline-large, p → body-1-long, …), falling back to
- * `title-small`; the `typeface` input remains as an explicit override.
- */
-class UniTextComponent {
+class DragAndDropDirective {
+    // TODO(v4): rename to fileDropped — renaming is breaking
+    // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+    onFileDropped = output();
+    workspaceOpacity = signal('1', ...(ngDevMode ? [{ debugName: "workspaceOpacity" }] : /* istanbul ignore next */ []));
+    // Dragover listener, when files are dragged over our host element
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.workspaceOpacity.set('0.5');
+    }
+    // Dragleave listener, when files are dragged away from our host element
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.workspaceOpacity.set('1');
+    }
+    // Drop listener, when files are dropped on our host element
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.workspaceOpacity.set('1');
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.onFileDropped.emit(files);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DragAndDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.12", type: DragAndDropDirective, isStandalone: true, selector: "[uni-drag-n-drop], [dragAndDrop]", outputs: { onFileDropped: "onFileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "style.opacity": "workspaceOpacity()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DragAndDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uni-drag-n-drop], [dragAndDrop]',
+                    host: {
+                        '[style.opacity]': 'workspaceOpacity()',
+                        '(dragover)': 'onDragOver($event)',
+                        '(dragleave)': 'onDragLeave($event)',
+                        '(drop)': 'onDrop($event)',
+                    },
+                }]
+        }], propDecorators: { onFileDropped: [{ type: i0.Output, args: ["onFileDropped"] }] } });
+
+class UniIconButtonComponent {
     theme = inject(ThemeService);
-    tag = inject(ElementRef).nativeElement.tagName.toLowerCase();
-    /** Typeface via the selector attribute: `uni-text="headline-large"`. */
-    uniText = input('', { ...(ngDevMode ? { debugName: "uniText" } : /* istanbul ignore next */ {}), alias: 'uni-text' });
-    /** Explicit typeface; the attribute value wins when both are set. */
-    typeface = input(undefined, ...(ngDevMode ? [{ debugName: "typeface" }] : /* istanbul ignore next */ []));
-    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
-    display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : /* istanbul ignore next */ []));
-    align = input(...(ngDevMode ? [undefined, { debugName: "align" }] : /* istanbul ignore next */ []));
-    nowrap = input(...(ngDevMode ? [undefined, { debugName: "nowrap" }] : /* istanbul ignore next */ []));
-    maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
-    ellipsis = input(false, ...(ngDevMode ? [{ debugName: "ellipsis" }] : /* istanbul ignore next */ []));
-    resolvedTypeface = computed(() => this.uniText() || this.typeface() || TagTypefaces[this.tag] || 'title-small', ...(ngDevMode ? [{ debugName: "resolvedTypeface" }] : /* istanbul ignore next */ []));
+    config = this.theme.component('iconButton');
+    /**
+     * Accessible name for the button. Alternative to projecting text content
+     * (`<button icon-button>Close</button>`); one of the two is required for
+     * an icon-only button to be announced correctly.
+     */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    iconName = input(...(ngDevMode ? [undefined, { debugName: "iconName" }] : /* istanbul ignore next */ []));
+    symbolName = input(...(ngDevMode ? [undefined, { debugName: "symbolName" }] : /* istanbul ignore next */ []));
+    variant = input('ghost', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disable = input(...(ngDevMode ? [undefined, { debugName: "disable" }] : /* istanbul ignore next */ []));
+    loading = input(...(ngDevMode ? [undefined, { debugName: "loading" }] : /* istanbul ignore next */ []));
+    opticalSize = input(24, ...(ngDevMode ? [{ debugName: "opticalSize" }] : /* istanbul ignore next */ []));
+    srOnlyClass = css(visuallyHidden);
+    /**
+     * Sizes `iconName` from the size token's `fontSize`, the same value that sizes
+     * a `symbolName` ligature — so the two paths render the same glyph size and
+     * `symbolName` → `iconName` is a like-for-like swap. Without it a masked icon
+     * fills the whole button box, since the base size tokens carry no padding.
+     * Themes that do use padding (Carbon) set a matching `fontSize`, so they land
+     * on the same glyph either way.
+     */
+    glyphSize = computed(() => {
+        // Size tokens are Emotion style objects, so `fontSize` is typed wider than
+        // a CSS length; anything exotic falls back to filling the button as before.
+        const fontSize = this.config().sizes?.[this.size()]?.fontSize;
+        return typeof fontSize === 'number' || typeof fontSize === 'string' ? fontSize : undefined;
+    }, ...(ngDevMode ? [{ debugName: "glyphSize" }] : /* istanbul ignore next */ []));
     className = computed(() => {
+        const { sizes, variants } = this.config();
+        const sizeConfig = sizes && sizes[this.size()];
+        const colorConfig = variants && variants[this.variant()];
         return css([
             {
-                ...this.theme.typeface(this.resolvedTypeface()),
-                ...this.theme.color(this.color()),
-                display: this.display(),
+                position: 'relative',
+                overflow: 'hidden',
+                outline: 0,
+                border: 0,
+                cursor: 'pointer',
+                transition: 'all 0.28s ease',
+                // Token-driven radius (`max` = circle) with the legacy 999 fallback
+                // for hand-authored themes that predate iconButton options.
+                ...(this.theme.radius(this.config().options?.borderRadius) ?? { borderRadius: 999 }),
+                // Block-level, but centring: the size tokens make the box bigger than
+                // the glyph (an `sm` button is 22px around an 18px icon), so a plain
+                // `display: block` parks the glyph in the top-left corner. Flex is
+                // still block-level, so nothing about the button's own layout changes.
+                // The accessible-name span is absolutely positioned and so stays out
+                // of the flex flow.
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                '&:disabled': {
+                    cursor: 'not-allowed !important',
+                },
+                '& symbol': {
+                    fontSize: 'inherit',
+                    lineHeight: 'inherit',
+                },
             },
-            this.align() && {
-                textAlign: this.align(),
+            sizeConfig && {
+                ...sizeConfig,
             },
-            this.nowrap() && {
-                whiteSpace: 'nowrap',
+            colorConfig && {
+                ...colorConfig,
             },
-            this.maxWidth() && {
-                maxWidth: this.maxWidth(),
-                overflow: 'hidden',
-                whiteSpace: 'nowrap',
-                textOverflow: 'ellipsis',
-                display: 'inline-block',
+            this.symbolName() &&
+                !this.loading() && {
+                padding: 0,
+            },
+            this.variant() !== 'ghost' && {
+                '&:hover': {
+                    ...this.theme.boxShadow('raised'),
+                },
+            },
+            this.variant() === 'ghost' && {
+                '&:hover': {
+                    backgroundColor: 'rgba(0,0,0,0.1)',
+                },
+            },
+            !this.loading() && {
+                '&:disabled': {
+                    ...this.config().variants?.disabled,
+                },
+            },
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniIconButtonComponent, isStandalone: true, selector: "button[uni-icon-button], button[icon-button]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "disable() || loading() || null", "attr.aria-busy": "loading() ? 'true' : null", "attr.aria-label": "ariaLabel() || null", "class": "className()" } }, hostDirectives: [{ directive: RippleDirective }], ngImport: i0, template: `
+    @if (loading()) {
+      <uni-icon name="spinner" />
+    } @else if (symbolName()) {
+      <uni-symbol [name]="symbolName()!" [opticalSize]="opticalSize()" />
+    } @else if (iconName()) {
+      <uni-icon [name]="iconName()!" [size]="glyphSize()" />
+    }
+    <!-- Projected text is the button's accessible name (visually hidden) -->
+    <span [class]="srOnlyClass"><ng-content /></span>
+  `, isInline: true, dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[uni-icon-button], button[icon-button]',
+                    imports: [UniSymbolComponent, UniIconComponent],
+                    template: `
+    @if (loading()) {
+      <uni-icon name="spinner" />
+    } @else if (symbolName()) {
+      <uni-symbol [name]="symbolName()!" [opticalSize]="opticalSize()" />
+    } @else if (iconName()) {
+      <uni-icon [name]="iconName()!" [size]="glyphSize()" />
+    }
+    <!-- Projected text is the button's accessible name (visually hidden) -->
+    <span [class]="srOnlyClass"><ng-content /></span>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[attr.disabled]': 'disable() || loading() || null',
+                        '[attr.aria-busy]': "loading() ? 'true' : null",
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[class]': 'className()',
+                    },
+                    hostDirectives: [{ directive: RippleDirective }],
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disable: [{ type: i0.Input, args: [{ isSignal: true, alias: "disable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], opticalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "opticalSize", required: false }] }] } });
+
+/**
+ * Inline month calendar: single-date or start–end range selection, day
+ * markers (availability dots), min/max fences and disabled dates. One tab
+ * stop with a roving-tabindex `role="grid"`; every day is a real button
+ * named with its full date. Values are plain ISO strings (`'YYYY-MM-DD'`),
+ * never `Date` objects, so bindings are timezone-free and serializable.
+ * Selection and today colours come from the theme's `primary` role pair;
+ * geometry and glyphs come from the `calendar` theme entry.
+ */
+class UniCalendarComponent extends BaseComponent {
+    // --- Signal Forms block (explicit per AGENTS.md, not a base class) --------
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    // --- Configuration -------------------------------------------------------
+    /** `'single'` reads/writes a `UniDate`; `'range'` a `UniDateRange`. */
+    mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Shown month, `'YYYY-MM'` — two-way, so an app can drive "jump to June". */
+    month = model(...(ngDevMode ? [undefined, { debugName: "month" }] : /* istanbul ignore next */ []));
+    /** Earliest selectable date (inclusive). */
+    minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /** Latest selectable date (inclusive). */
+    maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** Blocked days: a list of dates, or a predicate. */
+    disabledDates = input(...(ngDevMode ? [undefined, { debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    /** Availability dots; `label` extends the day's accessible name. */
+    markers = input([], ...(ngDevMode ? [{ debugName: "markers" }] : /* istanbul ignore next */ []));
+    /** BCP 47 tag; defaults to the document language, then the browser's. */
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** First day of week, 0 = Sunday; defaults from the locale's week info. */
+    weekStart = input(...(ngDevMode ? [undefined, { debugName: "weekStart" }] : /* istanbul ignore next */ []));
+    /** Names the grid when it stands alone (otherwise the heading names it). */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Day geometry token; `sm`/`md`/`lg` map to the theme's `calendar` sizes. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    // --- Events (value/month changes flow through the models) -----------------
+    /** Each committed day, including both ends of a range. */
+    selected = output();
+    host = inject(ElementRef);
+    headingId = uniqueId('uni-calendar-heading');
+    srOnly = css(visuallyHidden);
+    /** Pending range start — set by the first commit, cleared by the second. */
+    pendingStart = signal(null, ...(ngDevMode ? [{ debugName: "pendingStart" }] : /* istanbul ignore next */ []));
+    /** 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 */ []));
+    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 */ []));
+    /** The month on screen: the `month` model, else the value's month, else today's. */
+    viewMonth = computed(() => this.month() ?? monthOf(this.anchorDate() ?? todayIso()), ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
+    anchorDate = computed(() => {
+        const value = this.value();
+        return this.mode() === 'range'
+            ? value?.start
+            : value;
+    }, ...(ngDevMode ? [{ debugName: "anchorDate" }] : /* istanbul ignore next */ []));
+    /**
+     * The roving-tabindex day. Re-derives when the view or value changes
+     * (selected day in view → today in view → first enabled day); keyboard
+     * navigation writes it directly.
+     */
+    focusedDate = linkedSignal(() => this.pickFocus(), ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    heading = computed(() => formatMonthHeading(this.viewMonth(), this.resolvedLocale()), ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    weekdays = computed(() => weekdayNames(this.resolvedLocale(), this.resolvedWeekStart(), this.componentOptions().weekdayFormat ?? 'short'), ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+    disabledDateSet = computed(() => {
+        const dates = this.disabledDates();
+        return Array.isArray(dates) ? new Set(dates) : null;
+    }, ...(ngDevMode ? [{ debugName: "disabledDateSet" }] : /* istanbul ignore next */ []));
+    markersByDate = computed(() => {
+        const map = new Map();
+        for (const marker of this.markers()) {
+            const existing = map.get(marker.date);
+            if (existing)
+                existing.push(marker);
+            else
+                map.set(marker.date, [marker]);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "markersByDate" }] : /* istanbul ignore next */ []));
+    /** The committed range, or the pending preview band. */
+    rangeBand = computed(() => {
+        if (this.mode() !== 'range')
+            return null;
+        const pending = this.pendingStart();
+        const preview = this.previewDate();
+        if (pending && preview) {
+            const [start, end] = preview < pending ? [preview, pending] : [pending, preview];
+            return { start, end, preview: true };
+        }
+        if (pending)
+            return { start: pending, end: pending, preview: true };
+        const value = this.value();
+        if (value?.start && value?.end)
+            return { start: value.start, end: value.end, preview: false };
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "rangeBand" }] : /* istanbul ignore next */ []));
+    isDayDisabled(date) {
+        const min = this.minDate();
+        const max = this.maxDate();
+        if ((min && date < min) || (max && date > max))
+            return true;
+        const dates = this.disabledDates();
+        if (!dates)
+            return false;
+        const set = this.disabledDateSet();
+        return set ? set.has(date) : dates(date);
+    }
+    isSelected(date) {
+        if (this.mode() === 'single')
+            return this.value() === date;
+        const pending = this.pendingStart();
+        if (pending)
+            return pending === date;
+        const value = this.value();
+        return value?.start === date || value?.end === date;
+    }
+    /** The full render model: one precomputed cell per grid position. */
+    gridWeeks = computed(() => {
+        const locale = this.resolvedLocale();
+        const band = this.rangeBand();
+        const today = todayIso();
+        const focused = this.focusedDate();
+        const markers = this.markersByDate();
+        const cellBase = this.cellClass();
+        const dayBase = this.dayClass();
+        const todayClass = this.todayClass();
+        return buildMonthGrid(this.viewMonth(), this.resolvedWeekStart()).map((week) => week.map((cell) => {
+            const date = cell.date;
+            const selected = !cell.outside && this.isSelected(date);
+            const inBand = !cell.outside && !!band && date >= band.start && date <= band.end;
+            const dayMarkers = cell.outside ? [] : (markers.get(date) ?? []).slice(0, 3);
+            const markerLabel = dayMarkers
+                .filter((marker) => marker.label)
+                .map((marker) => marker.label)
+                .join(', ');
+            const isToday = date === today;
+            return {
+                date,
+                day: Number(date.slice(8, 10)),
+                outside: cell.outside,
+                disabled: this.isDayDisabled(date),
+                today: isToday,
+                selected,
+                inBand,
+                tabIndex: date === focused && !cell.outside ? 0 : -1,
+                ariaLabel: formatDate(date, locale, { dateStyle: 'full' }) + (markerLabel ? `, ${markerLabel}` : ''),
+                markers: dayMarkers,
+                cellClass: [
+                    cellBase,
+                    inBand && (band.preview ? this.previewClass() : this.inRangeClass()),
+                    inBand && date === band.start && this.bandStartClass(),
+                    inBand && date === band.end && this.bandEndClass(),
+                ]
+                    .filter(Boolean)
+                    .join(' '),
+                dayClass: [dayBase, isToday && todayClass, selected && this.selectedClass()]
+                    .filter(Boolean)
+                    .join(' '),
+            };
+        }));
+    }, ...(ngDevMode ? [{ debugName: "gridWeeks" }] : /* istanbul ignore next */ []));
+    // --- Selection -------------------------------------------------------------
+    select(date) {
+        if (this.disabled() || this.isDayDisabled(date))
+            return;
+        this.setViewMonth(monthOf(date));
+        this.focusedDate.set(date);
+        const locale = this.resolvedLocale();
+        const full = (d) => formatDate(d, locale, { dateStyle: 'full' });
+        if (this.mode() === 'single') {
+            this.value.set(date);
+            this.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.`);
+        }
+        else {
+            let [start, end] = [this.pendingStart(), date];
+            if (end < start)
+                [start, end] = [end, start]; // backwards commit swaps
+            this.pendingStart.set(null);
+            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.selected.emit(date);
+    }
+    cancelPending() {
+        this.pendingStart.set(null);
+        this.previewDate.set(null);
+        this.announce('Range selection cancelled.');
+    }
+    // --- Navigation ------------------------------------------------------------
+    onNav(direction) {
+        this.setViewMonth(monthOf(addMonths(`${this.viewMonth()}-01`, direction)));
+    }
+    setViewMonth(month) {
+        if (this.month() !== month)
+            this.month.set(month);
+    }
+    /**
+     * Move the roving focus. A landing on a disabled day keeps going in the
+     * same direction until an enabled day; the min/max fence stops the caret,
+     * it never wraps. Month edges never block — the grid follows.
+     */
+    moveFocus(target, direction) {
+        const min = this.minDate();
+        const max = this.maxDate();
+        if ((min && target < min) || (max && target > max))
+            return;
+        let date = target;
+        let guard = 0;
+        while (this.isDayDisabled(date)) {
+            date = addDays(date, direction);
+            if ((min && date < min) || (max && date > max) || ++guard > 500)
+                return;
+        }
+        this.setViewMonth(monthOf(date));
+        this.focusedDate.set(date);
+        if (this.pendingStart())
+            this.previewDate.set(date);
+        this.focusDay(date);
+    }
+    onGridKeydown(event) {
+        const focused = this.focusedDate();
+        const week = (dayOfWeek(focused) - this.resolvedWeekStart() + 7) % 7;
+        const handlers = {
+            ArrowLeft: () => this.moveFocus(addDays(focused, -1), -1),
+            ArrowRight: () => this.moveFocus(addDays(focused, 1), 1),
+            ArrowUp: () => this.moveFocus(addDays(focused, -7), -1),
+            ArrowDown: () => this.moveFocus(addDays(focused, 7), 1),
+            Home: () => this.moveFocus(addDays(focused, -week), 1),
+            End: () => this.moveFocus(addDays(focused, 6 - week), -1),
+            PageUp: () => this.moveFocus(addMonths(focused, event.shiftKey ? -12 : -1), -1),
+            PageDown: () => this.moveFocus(addMonths(focused, event.shiftKey ? 12 : 1), 1),
+            Enter: () => this.select(focused),
+            ' ': () => this.select(focused),
+        };
+        if (event.key === 'Escape') {
+            // Only a pending range consumes Escape; otherwise it bubbles so a
+            // hosting popover can light-dismiss.
+            if (this.pendingStart()) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.cancelPending();
+            }
+            return;
+        }
+        const handler = handlers[event.key];
+        if (handler) {
+            event.preventDefault();
+            handler();
+        }
+    }
+    onDayHover(date) {
+        if (this.pendingStart() && !this.isDayDisabled(date))
+            this.previewDate.set(date);
+    }
+    /** Focus the roving day — used by popup hosts when the calendar opens. */
+    focusActiveDay() {
+        this.focusDay(this.focusedDate());
+    }
+    onHostFocusOut(event) {
+        const next = event.relatedTarget;
+        if (!next || !this.host.nativeElement.contains(next))
+            this.touched.set(true);
+    }
+    focusDay(date) {
+        queueMicrotask(() => this.host.nativeElement.querySelector(`[data-date="${date}"]`)?.focus());
+    }
+    pickFocus() {
+        const view = this.viewMonth();
+        const anchor = this.anchorDate();
+        if (anchor && monthOf(anchor) === view && !this.isDayDisabled(anchor))
+            return anchor;
+        const today = todayIso();
+        if (monthOf(today) === view && !this.isDayDisabled(today))
+            return today;
+        return this.firstEnabledInView(view);
+    }
+    firstEnabledInView(view) {
+        const first = `${view}-01`;
+        let date = first;
+        for (let i = 0; i < 31 && monthOf(date) === view; i++) {
+            if (!this.isDayDisabled(date))
+                return date;
+            date = addDays(date, 1);
+        }
+        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 */ []));
+    navClass = computed(() => css({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        ...this.theme.gap('xs'),
+        marginBottom: 4,
+    }), ...(ngDevMode ? [{ debugName: "navClass" }] : /* istanbul ignore next */ []));
+    headingClass = computed(() => css({ flex: 1, textAlign: 'center', ...this.theme.typeface('title-small') }), ...(ngDevMode ? [{ debugName: "headingClass" }] : /* istanbul ignore next */ []));
+    gridClass = computed(() => css({ display: 'grid', ...this.theme.gap(this.componentOptions().gap ?? 'xxs') }), ...(ngDevMode ? [{ debugName: "gridClass" }] : /* istanbul ignore next */ []));
+    rowClass = computed(() => css({
+        display: 'grid',
+        gridTemplateColumns: 'repeat(7, 1fr)',
+        justifyItems: 'center',
+        ...this.theme.gap(this.componentOptions().gap ?? 'xxs'),
+    }), ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+    weekdayClass = computed(() => css({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...this.daySize(),
+        height: 'auto',
+        ...this.theme.typeface(this.componentOptions().typeface ?? 'label'),
+        ...this.theme.color('on-background-variant'),
+        '& abbr': { textDecoration: 'none' },
+    }), ...(ngDevMode ? [{ debugName: "weekdayClass" }] : /* istanbul ignore next */ []));
+    /** The gridcell — range bands paint here so they read as one bar. */
+    cellClass = computed(() => css({ position: 'relative', display: 'flex' }), ...(ngDevMode ? [{ debugName: "cellClass" }] : /* istanbul ignore next */ []));
+    inRangeClass = computed(() => css({ ...this.theme.backgroundColor('primary-container'), borderRadius: 0 }), ...(ngDevMode ? [{ debugName: "inRangeClass" }] : /* istanbul ignore next */ []));
+    previewClass = computed(() => {
+        const colors = this.theme.colorPalette();
+        return css({
+            backgroundColor: `color-mix(in srgb, ${colors['primary-container']} 55%, transparent)`,
+            outline: `1px dashed ${colors['primary']}`,
+            outlineOffset: -1,
+        });
+    }, ...(ngDevMode ? [{ debugName: "previewClass" }] : /* istanbul ignore next */ []));
+    bandStartClass = computed(() => css({ ...this.theme.getRadiusLeft(this.componentOptions().dayBorderRadius ?? 'max') }), ...(ngDevMode ? [{ debugName: "bandStartClass" }] : /* istanbul ignore next */ []));
+    bandEndClass = computed(() => css({ ...this.theme.getRadiusRight(this.componentOptions().dayBorderRadius ?? 'max') }), ...(ngDevMode ? [{ debugName: "bandEndClass" }] : /* istanbul ignore next */ []));
+    dayClass = computed(() => {
+        const options = this.componentOptions();
+        const colors = this.theme.colorPalette();
+        return css({
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            border: 0,
+            padding: 0,
+            background: 'transparent',
+            color: 'inherit',
+            cursor: 'pointer',
+            ...this.theme.typeface(options.typeface ?? 'label'),
+            ...this.daySize(),
+            ...this.theme.radius(options.dayBorderRadius ?? 'max'),
+            '&:hover:not(:disabled)': { ...this.theme.colorPair('primary-container') },
+            ...this.theme.focusRing(),
+            '&:disabled': {
+                color: colors['on-disabled'],
+                cursor: 'default',
+                pointerEvents: 'none',
+            },
+        });
+    }, ...(ngDevMode ? [{ debugName: "dayClass" }] : /* istanbul ignore next */ []));
+    todayClass = computed(() => {
+        const colors = this.theme.colorPalette();
+        // Outline (or dot), never fill — so today and selected can coincide and
+        // both stay legible (WCAG 1.4.1: no state carried by colour alone).
+        return (this.componentOptions().todayStyle ?? 'outline') === 'outline'
+            ? css({ boxShadow: `inset 0 0 0 1.5px ${colors['primary']}` })
+            : css({
+                '&::after': {
+                    content: '""',
+                    position: 'absolute',
+                    bottom: 3,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    width: 4,
+                    height: 4,
+                    borderRadius: 999,
+                    backgroundColor: colors['primary'],
+                },
+            });
+    }, ...(ngDevMode ? [{ debugName: "todayClass" }] : /* istanbul ignore next */ []));
+    selectedClass = computed(() => {
+        const colors = this.theme.colorPalette();
+        return css({
+            ...this.theme.colorPair('primary'),
+            // A marker dot survives selection by switching to the on-colour.
+            '& [data-dot]': { backgroundColor: colors['on-primary'] },
+        });
+    }, ...(ngDevMode ? [{ debugName: "selectedClass" }] : /* istanbul ignore next */ []));
+    outsideDayClass = computed(() => {
+        const colors = this.theme.colorPalette();
+        return css({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            ...this.theme.typeface(this.componentOptions().typeface ?? 'label'),
+            ...this.daySize(),
+            color: colors['on-disabled'],
+        });
+    }, ...(ngDevMode ? [{ debugName: "outsideDayClass" }] : /* istanbul ignore next */ []));
+    dotsClass = computed(() => css({
+        position: 'absolute',
+        bottom: 2,
+        left: 0,
+        right: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        gap: 2,
+        pointerEvents: 'none',
+    }), ...(ngDevMode ? [{ debugName: "dotsClass" }] : /* istanbul ignore next */ []));
+    /** One dot class per marker variant present, resolved from the palette. */
+    dotClasses = computed(() => {
+        const colors = this.theme.colorPalette();
+        const classes = new Map();
+        for (const marker of this.markers()) {
+            const variant = marker.variant ?? 'primary';
+            if (!classes.has(variant)) {
+                classes.set(variant, css({ width: 4, height: 4, borderRadius: 999, backgroundColor: colors[variant] }));
+            }
+        }
+        return classes;
+    }, ...(ngDevMode ? [{ debugName: "dotClasses" }] : /* istanbul ignore next */ []));
+    dotClassFor(variant) {
+        return this.dotClasses().get(variant ?? 'primary') ?? '';
+    }
+    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 });
+}
+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" }]
+        }], 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"] }] } });
+
+class UniCardContentComponent extends BaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniCardContentComponent, isStandalone: true, selector: "uni-card-content", providers: [{ provide: COMPONENT_NAME, useValue: 'cardContent' }], usesInheritance: true, ngImport: i0, template: "<div [style]=\"style()\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardContentComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-card-content', imports: [], providers: [{ provide: COMPONENT_NAME, useValue: 'cardContent' }], template: "<div [style]=\"style()\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+/**
+ * Typeface defaults by host element, so semantic HTML and the type scale
+ * reinforce each other: `<h1 uni-text>` is already headline-large.
+ */
+const TagTypefaces = {
+    h1: 'headline-large',
+    h2: 'headline-medium',
+    h3: 'headline-small',
+    h4: 'title-large',
+    h5: 'title-medium',
+    h6: 'title-small',
+    p: 'body-1-long',
+    small: 'caption',
+    figcaption: 'caption',
+    blockquote: 'quote',
+    label: 'label',
+};
+/**
+ * The typography primitive, applied as an attribute to any element so
+ * semantics stay yours. The attribute value is the typeface:
+ * `<h1 uni-text="display-small">`, `<span uni-text="caption">`, dynamic via
+ * `[uni-text]="role()"`. With no value, the typeface is inferred from the
+ * host element (h1 → headline-large, p → body-1-long, …), falling back to
+ * `title-small`; the `typeface` input remains as an explicit override.
+ */
+class UniTextComponent {
+    theme = inject(ThemeService);
+    tag = inject(ElementRef).nativeElement.tagName.toLowerCase();
+    /** Typeface via the selector attribute: `uni-text="headline-large"`. */
+    uniText = input('', { ...(ngDevMode ? { debugName: "uniText" } : /* istanbul ignore next */ {}), alias: 'uni-text' });
+    /** Explicit typeface; the attribute value wins when both are set. */
+    typeface = input(undefined, ...(ngDevMode ? [{ debugName: "typeface" }] : /* istanbul ignore next */ []));
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : /* istanbul ignore next */ []));
+    align = input(...(ngDevMode ? [undefined, { debugName: "align" }] : /* istanbul ignore next */ []));
+    nowrap = input(...(ngDevMode ? [undefined, { debugName: "nowrap" }] : /* istanbul ignore next */ []));
+    maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    ellipsis = input(false, ...(ngDevMode ? [{ debugName: "ellipsis" }] : /* istanbul ignore next */ []));
+    resolvedTypeface = computed(() => this.uniText() || this.typeface() || TagTypefaces[this.tag] || 'title-small', ...(ngDevMode ? [{ debugName: "resolvedTypeface" }] : /* istanbul ignore next */ []));
+    className = computed(() => {
+        return css([
+            {
+                ...this.theme.typeface(this.resolvedTypeface()),
+                ...this.theme.color(this.color()),
+                display: this.display(),
+            },
+            this.align() && {
+                textAlign: this.align(),
+            },
+            this.nowrap() && {
+                whiteSpace: 'nowrap',
+            },
+            this.maxWidth() && {
+                maxWidth: this.maxWidth(),
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+                display: 'inline-block',
             },
             this.ellipsis() && {
                 whiteSpace: 'nowrap',
@@ -2376,19 +3311,13 @@ class UniCheckboxComponent extends BaseComponent {
         '&:disabled + .checkbox': {
             cursor: 'not-allowed',
         },
+        // The shared, themable focus indicator, keyed off the hidden input's
+        // focus. The ring sits out from the box, so its radius carries an extra
+        // 4px to round proportionally (as the original hand-drawn ring did) —
+        // without it the corners gap away from the box.
         '&:focus + .checkbox': {
-            position: 'relative',
-            '&::after': {
-                content: '""',
-                position: 'absolute',
-                top: '-4px',
-                left: '-4px',
-                right: '-4px',
-                bottom: '-4px',
-                border: `2px solid ${this.getThemeColor(this.variant())}`,
-                borderRadius: `${(Number(this.componentOptions().borderRadius) || 2) + 4}px`,
-                pointerEvents: 'none',
-            },
+            ...this.theme.focusRingStyle(this.getThemeColor(this.variant()), this.componentOptions().focusRingGap),
+            borderRadius: `${(Number(this.componentOptions().borderRadius) || 2) + 2}px`,
         },
     }), ...(ngDevMode ? [{ debugName: "checkboxInput" }] : /* istanbul ignore next */ []));
     getThemeColor(token) {
@@ -2408,196 +3337,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ selector: 'uni-checkbox', imports: [UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'checkbox' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [class]=\"checkboxLabel()\">\n  <input\n    type=\"checkbox\"\n    [class]=\"checkboxInput()\"\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"checkbox\">\n    <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <rect class=\"checkbox-box\" x=\"1\" y=\"1\" width=\"18\" height=\"18\"></rect>\n      <polyline class=\"checkbox-check\" points=\"4 11 8 15 16 6\"></polyline>\n      <line class=\"checkbox-dash\" x1=\"5\" y1=\"10\" x2=\"15\" y2=\"10\"></line>\n    </svg>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n" }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }] } });
 
-class BodyRenderDirective {
-    el = inject(ElementRef);
-    renderer = inject(Renderer2);
-    ngOnInit() {
-        const element = this.el.nativeElement;
-        this.renderer.appendChild(document.body, element);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BodyRenderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.12", type: BodyRenderDirective, isStandalone: true, selector: "[uniBodyRender]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BodyRenderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[uniBodyRender]',
-                }]
-        }] });
-
-class DragAndDropDirective {
-    // TODO(v4): rename to fileDropped — renaming is breaking
-    // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-    onFileDropped = output();
-    workspaceOpacity = signal('1', ...(ngDevMode ? [{ debugName: "workspaceOpacity" }] : /* istanbul ignore next */ []));
-    // Dragover listener, when files are dragged over our host element
-    onDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.workspaceOpacity.set('0.5');
-    }
-    // Dragleave listener, when files are dragged away from our host element
-    onDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.workspaceOpacity.set('1');
-    }
-    // Drop listener, when files are dropped on our host element
-    onDrop(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.workspaceOpacity.set('1');
-        const files = event.dataTransfer?.files;
-        if (files && files.length > 0) {
-            this.onFileDropped.emit(files);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DragAndDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.12", type: DragAndDropDirective, isStandalone: true, selector: "[uni-drag-n-drop], [dragAndDrop]", outputs: { onFileDropped: "onFileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "style.opacity": "workspaceOpacity()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DragAndDropDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[uni-drag-n-drop], [dragAndDrop]',
-                    host: {
-                        '[style.opacity]': 'workspaceOpacity()',
-                        '(dragover)': 'onDragOver($event)',
-                        '(dragleave)': 'onDragLeave($event)',
-                        '(drop)': 'onDrop($event)',
-                    },
-                }]
-        }], propDecorators: { onFileDropped: [{ type: i0.Output, args: ["onFileDropped"] }] } });
-
-class UniIconButtonComponent {
-    theme = inject(ThemeService);
-    config = this.theme.component('iconButton');
-    /**
-     * Accessible name for the button. Alternative to projecting text content
-     * (`<button icon-button>Close</button>`); one of the two is required for
-     * an icon-only button to be announced correctly.
-     */
-    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    iconName = input(...(ngDevMode ? [undefined, { debugName: "iconName" }] : /* istanbul ignore next */ []));
-    symbolName = input(...(ngDevMode ? [undefined, { debugName: "symbolName" }] : /* istanbul ignore next */ []));
-    variant = input('ghost', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    disable = input(...(ngDevMode ? [undefined, { debugName: "disable" }] : /* istanbul ignore next */ []));
-    loading = input(...(ngDevMode ? [undefined, { debugName: "loading" }] : /* istanbul ignore next */ []));
-    opticalSize = input(24, ...(ngDevMode ? [{ debugName: "opticalSize" }] : /* istanbul ignore next */ []));
-    srOnlyClass = css(visuallyHidden);
-    /**
-     * Sizes `iconName` from the size token's `fontSize`, the same value that sizes
-     * a `symbolName` ligature — so the two paths render the same glyph size and
-     * `symbolName` → `iconName` is a like-for-like swap. Without it a masked icon
-     * fills the whole button box, since the base size tokens carry no padding.
-     * Themes that do use padding (Carbon) set a matching `fontSize`, so they land
-     * on the same glyph either way.
-     */
-    glyphSize = computed(() => {
-        // Size tokens are Emotion style objects, so `fontSize` is typed wider than
-        // a CSS length; anything exotic falls back to filling the button as before.
-        const fontSize = this.config().sizes?.[this.size()]?.fontSize;
-        return typeof fontSize === 'number' || typeof fontSize === 'string' ? fontSize : undefined;
-    }, ...(ngDevMode ? [{ debugName: "glyphSize" }] : /* istanbul ignore next */ []));
-    className = computed(() => {
-        const { sizes, variants } = this.config();
-        const sizeConfig = sizes && sizes[this.size()];
-        const colorConfig = variants && variants[this.variant()];
-        return css([
-            {
-                position: 'relative',
-                overflow: 'hidden',
-                outline: 0,
-                border: 0,
-                cursor: 'pointer',
-                transition: 'all 0.28s ease',
-                // Token-driven radius (`max` = circle) with the legacy 999 fallback
-                // for hand-authored themes that predate iconButton options.
-                ...(this.theme.radius(this.config().options?.borderRadius) ?? { borderRadius: 999 }),
-                // Block-level, but centring: the size tokens make the box bigger than
-                // the glyph (an `sm` button is 22px around an 18px icon), so a plain
-                // `display: block` parks the glyph in the top-left corner. Flex is
-                // still block-level, so nothing about the button's own layout changes.
-                // The accessible-name span is absolutely positioned and so stays out
-                // of the flex flow.
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                '&:disabled': {
-                    cursor: 'not-allowed !important',
-                },
-                '& symbol': {
-                    fontSize: 'inherit',
-                    lineHeight: 'inherit',
-                },
-            },
-            sizeConfig && {
-                ...sizeConfig,
-            },
-            colorConfig && {
-                ...colorConfig,
-            },
-            this.symbolName() &&
-                !this.loading() && {
-                padding: 0,
-            },
-            this.variant() !== 'ghost' && {
-                '&:hover': {
-                    ...this.theme.boxShadow('raised'),
-                },
-            },
-            this.variant() === 'ghost' && {
-                '&:hover': {
-                    backgroundColor: 'rgba(0,0,0,0.1)',
-                },
-            },
-            !this.loading() && {
-                '&:disabled': {
-                    ...this.config().variants?.disabled,
-                },
-            },
-        ]);
-    }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniIconButtonComponent, isStandalone: true, selector: "button[uni-icon-button], button[icon-button]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "disable() || loading() || null", "attr.aria-busy": "loading() ? 'true' : null", "attr.aria-label": "ariaLabel() || null", "class": "className()" } }, hostDirectives: [{ directive: RippleDirective }], ngImport: i0, template: `
-    @if (loading()) {
-      <uni-icon name="spinner" />
-    } @else if (symbolName()) {
-      <uni-symbol [name]="symbolName()!" [opticalSize]="opticalSize()" />
-    } @else if (iconName()) {
-      <uni-icon [name]="iconName()!" [size]="glyphSize()" />
-    }
-    <!-- Projected text is the button's accessible name (visually hidden) -->
-    <span [class]="srOnlyClass"><ng-content /></span>
-  `, isInline: true, dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[uni-icon-button], button[icon-button]',
-                    imports: [UniSymbolComponent, UniIconComponent],
-                    template: `
-    @if (loading()) {
-      <uni-icon name="spinner" />
-    } @else if (symbolName()) {
-      <uni-symbol [name]="symbolName()!" [opticalSize]="opticalSize()" />
-    } @else if (iconName()) {
-      <uni-icon [name]="iconName()!" [size]="glyphSize()" />
-    }
-    <!-- Projected text is the button's accessible name (visually hidden) -->
-    <span [class]="srOnlyClass"><ng-content /></span>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[attr.disabled]': 'disable() || loading() || null',
-                        '[attr.aria-busy]': "loading() ? 'true' : null",
-                        '[attr.aria-label]': 'ariaLabel() || null',
-                        '[class]': 'className()',
-                    },
-                    hostDirectives: [{ directive: RippleDirective }],
-                }]
-        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disable: [{ type: i0.Input, args: [{ isSignal: true, alias: "disable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], opticalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "opticalSize", required: false }] }] } });
-
 class UniDataSearchComponent extends BaseComponent {
     datasource = input(...(ngDevMode ? [undefined, { debugName: "datasource" }] : /* istanbul ignore next */ []));
     placeholder = input('Search', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -3077,6 +3816,1021 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * This file exports all public-facing elements of the data-table component.
  */
 
+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 */ []));
+    placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    offset = input({ mainAxis: 4, alignmentAxis: 12 }, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    /** CSS anchor-name linking the trigger to the popover panel. */
+    anchorName = newAnchorName();
+    /**
+     * Value for aria-haspopup on the trigger, describing what the popover
+     * contains (e.g. 'menu' for Menu, 'dialog' for rich content). When unset,
+     * only aria-expanded/aria-controls are managed.
+     */
+    ariaHasPopup = input(null, ...(ngDevMode ? [{ debugName: "ariaHasPopup" }] : /* istanbul ignore next */ []));
+    /** Document-unique id of the popover element, for aria-controls wiring. */
+    popoverId = uniqueId('uni-dropdown');
+    paddingVertical = input(...(ngDevMode ? [undefined, { debugName: "paddingVertical" }] : /* istanbul ignore next */ []));
+    paddingHorizontal = input(...(ngDevMode ? [undefined, { debugName: "paddingHorizontal" }] : /* istanbul ignore next */ []));
+    // Per-instance panel-chrome overrides; undefined falls back to the theme's
+    // `dropdown` options, so hosts like uni-menu can restyle their panel
+    // without forking the shared dropdown entry.
+    border = input(...(ngDevMode ? [undefined, { debugName: "border" }] : /* istanbul ignore next */ []));
+    borderRadius = input(...(ngDevMode ? [undefined, { debugName: "borderRadius" }] : /* istanbul ignore next */ []));
+    shadow = input(...(ngDevMode ? [undefined, { debugName: "shadow" }] : /* istanbul ignore next */ []));
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    dropdownShowing = output();
+    dropdownHiding = output();
+    dropdownRef;
+    get _trigger() {
+        return this.trigger();
+    }
+    get _dropdown() {
+        return this.dropdownRef.nativeElement;
+    }
+    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();
+        return css([
+            {
+                // Reset browser agent default popover styles
+                border: 'none',
+                background: 'transparent',
+                padding: 0,
+                overflow: 'visible',
+                width: 'max-content',
+                // 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)',
+                    },
+                },
+            },
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "dropdownClass" }] : /* istanbul ignore next */ []));
+    /** The element that receives focus and carries the ARIA popup state. */
+    get _focusTarget() {
+        return resolveFocusTarget(this._trigger);
+    }
+    ngOnInit() {
+        // Single native click binding to manage open/close commands
+        this.renderer.listen(this._trigger, 'click', (e) => {
+            e.stopPropagation();
+            this.toggleDropdown();
+        });
+        // Anchor the popover panel to the trigger element
+        this.renderer.setStyle(this._trigger, 'anchor-name', this.anchorName);
+        // Wire the ARIA popup contract onto the focusable trigger element
+        const focusTarget = this._focusTarget;
+        this.renderer.setAttribute(focusTarget, 'aria-expanded', 'false');
+        this.renderer.setAttribute(focusTarget, 'aria-controls', this.popoverId);
+        if (this.ariaHasPopup()) {
+            this.renderer.setAttribute(focusTarget, 'aria-haspopup', this.ariaHasPopup());
+        }
+        // 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';
+            this.showing.set(isOpened);
+            this.renderer.setAttribute(this._focusTarget, 'aria-expanded', `${isOpened}`);
+            if (isOpened) {
+                this.dropdownShowing.emit(true);
+            }
+            else {
+                this.dropdownHiding.emit(true);
+                this.restoreFocus();
+            }
+        });
+    }
+    /**
+     * 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();
+        }
+        else {
+            this._dropdown.showPopover();
+        }
+    }
+    hideDropdown() {
+        this._dropdown.hidePopover();
+    }
+    ngOnDestroy() {
+        try {
+            this._dropdown.hidePopover();
+        }
+        catch {
+            // popover was already closed or detached
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDropdownComponent, isStandalone: true, selector: "uni-dropdown", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "ariaHasPopup", isSignal: true, isRequired: false, transformFunction: null }, paddingVertical: { classPropertyName: "paddingVertical", publicName: "paddingVertical", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownShowing: "dropdownShowing", dropdownHiding: "dropdownHiding" }, providers: [{ provide: COMPONENT_NAME, useValue: 'dropdown' }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <!-- 1. The native 'popover' attribute brings it to the top layer with native light-dismiss -->
+    <div #dropdown popover="auto" [id]="popoverId" [class]="dropdownClass()">
+      <div
+        box-layout
+        [border]="border() ?? componentOptions().border"
+        [borderRadius]="borderRadius() ?? componentOptions().borderRadius"
+        [paddingVertical]="paddingVertical()"
+        [paddingHorizontal]="paddingHorizontal()"
+        [color]="color() ?? componentOptions().color"
+        [shadow]="shadow() ?? componentOptions().shadow"
+      >
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'uni-dropdown',
+                    imports: [UniBoxComponent],
+                    template: `
+    <!-- 1. The native 'popover' attribute brings it to the top layer with native light-dismiss -->
+    <div #dropdown popover="auto" [id]="popoverId" [class]="dropdownClass()">
+      <div
+        box-layout
+        [border]="border() ?? componentOptions().border"
+        [borderRadius]="borderRadius() ?? componentOptions().borderRadius"
+        [paddingVertical]="paddingVertical()"
+        [paddingHorizontal]="paddingHorizontal()"
+        [color]="color() ?? componentOptions().color"
+        [shadow]="shadow() ?? componentOptions().shadow"
+      >
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'dropdown' }],
+                }]
+        }], propDecorators: { trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHasPopup", required: false }] }], paddingVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingVertical", required: false }] }], paddingHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingHorizontal", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], dropdownShowing: [{ type: i0.Output, args: ["dropdownShowing"] }], dropdownHiding: [{ type: i0.Output, args: ["dropdownHiding"] }], dropdownRef: [{
+                type: ViewChild,
+                args: ['dropdown', { static: true }]
+            }] } });
+
+class UniInputBoxComponent extends BaseComponent {
+    className = css({ display: 'contents' });
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    minWidth = input('0', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    /** Override the themed field height, e.g. `'auto'` for multi-line fields. */
+    height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    color = computed(() => this.error() ? this.componentOptions().errorColor : this.componentOptions().color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    border = computed(() => this.error() ? this.componentOptions().errorBorder : this.componentOptions().border, ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
+    shadow = computed(() => this.error() ? this.componentOptions().errorShadow : this.componentOptions().shadow, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
+    inputBoxClass = computed(() => css([
+        this.disabled() && {
+            ...this.theme.color(this.componentOptions().disabledTextColor),
+            ...this.theme.backgroundColor(this.componentOptions().disabledColor),
+            cursor: 'not-allowed !important',
+        },
+        {
+            '& input, select, textarea': {
+                ...removeInputPlatformStyling,
+                height: '100%',
+                ...this.theme.paddingLeft(this.componentOptions().paddingLeft),
+                ...this.theme.color(this.componentOptions().textColor),
+                ...this.theme.typeface(this.componentOptions().typeFace),
+            },
+            // Multi-line fields size themselves (rows/resize), not from the box.
+            '& textarea': {
+                height: 'auto',
+                ...this.theme.paddingTop('xs'),
+                ...this.theme.paddingBottom('xs'),
+            },
+            '&:has(input:disabled, select:disabled, textarea:disabled)': {
+                ...this.theme.color(this.componentOptions().disabledTextColor),
+                ...this.theme.backgroundColor(this.componentOptions().disabledColor),
+            },
+            '& input:disabled, select:disabled, textarea:disabled': {
+                cursor: 'not-allowed !important',
+            },
+            '&:has(input:focus, select:focus, textarea:focus)': {
+                outline: this.componentOptions().focusOutline,
+                outlineOffset: this.componentOptions().focusOutlineOffset,
+                // Optional focus chrome (border/ring/background). It yields to the
+                // error state, so a flagged field stays visibly flagged while the
+                // user is in it correcting the value.
+                ...(this.error()
+                    ? {}
+                    : {
+                        ...this.theme.border(this.componentOptions().focusBorder),
+                        ...this.theme.boxShadow(this.componentOptions().focusShadow),
+                        ...this.theme.backgroundColor(this.componentOptions().focusColor),
+                    }),
+            },
+        },
+    ]), ...(ngDevMode ? [{ debugName: "inputBoxClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputBoxComponent, isStandalone: true, selector: "uni-input-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"height() ?? componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-input-box', imports: [UniRowComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"height() ?? componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+/**
+ * Date field with free-typed parsing and a popup calendar. Type `aug 20`,
+ * `8/20/2026` or `2026-08-20`, or pick from the grid — the form gets the
+ * same canonical `'YYYY-MM-DD'` string either way. Parsing is `Intl`-driven
+ * (locale digit order and month names, never hardcoded); unreadable text
+ * stays in the field, flagged, with a `rejected` event. The popup is a
+ * native popover hosting the same `uni-calendar` an app could render inline.
+ */
+class UniDateInputComponent extends BaseComponent {
+    // --- Signal Forms block (explicit per AGENTS.md, not a base class) --------
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    // --- Configuration -------------------------------------------------------
+    /** Accessible name for the field, e.g. "Appointment date". */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Defaults to the locale's digit pattern, e.g. `MM/DD/YYYY`. */
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** How the committed value renders, e.g. `{ dateStyle: 'long' }`. */
+    displayFormat = input({ dateStyle: 'medium' }, ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
+    /** BCP 47 tag; defaults to the document language, then the browser's. */
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    commitOnBlur = input(true, ...(ngDevMode ? [{ debugName: "commitOnBlur" }] : /* istanbul ignore next */ []));
+    /** Custom parser, replacing the built-in ISO/locale/month-name parsing. */
+    parse = input(...(ngDevMode ? [undefined, { debugName: "parse" }] : /* istanbul ignore next */ []));
+    /** Renders without its own input-box chrome, for composers like uni-date-time-input. */
+    embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : /* istanbul ignore next */ []));
+    // --- Forwarded to the popup calendar --------------------------------------
+    minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    disabledDates = input(...(ngDevMode ? [undefined, { debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    markers = input([], ...(ngDevMode ? [{ debugName: "markers" }] : /* istanbul ignore next */ []));
+    weekStart = input(...(ngDevMode ? [undefined, { debugName: "weekStart" }] : /* istanbul ignore next */ []));
+    // --- Events ----------------------------------------------------------------
+    /** Popup shown. */
+    opened = output();
+    /** Popup hidden. */
+    closed = output();
+    /** A typed commit was refused; the raw text stays in the field. */
+    rejected = output();
+    host = inject(ElementRef);
+    inputRef = viewChild('field', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // #toggle sits on the icon-button component, so read the element explicitly.
+    toggleRef = viewChild('toggle', { ...(ngDevMode ? { debugName: "toggleRef" } : /* istanbul ignore next */ {}), read: ElementRef });
+    popupRef = viewChild('popupDialog', ...(ngDevMode ? [{ debugName: "popupRef" }] : /* istanbul ignore next */ []));
+    dropdown = viewChild(UniDropdownComponent, ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
+    calendar = viewChild(UniCalendarComponent, ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    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 */ []));
+    displayText = computed(() => {
+        const value = this.value();
+        return value ? formatDate(value, this.resolvedLocale(), this.displayFormat()) : '';
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+    resolvedPlaceholder = computed(() => this.placeholder() ?? localeDatePlaceholder(this.resolvedLocale()), ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    toggleLabel = computed(() => {
+        const value = this.value();
+        return value
+            ? `Change date, ${formatDate(value, this.resolvedLocale(), { dateStyle: 'full' })}`
+            : 'Choose date';
+    }, ...(ngDevMode ? [{ debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
+    // --- Committing -------------------------------------------------------------
+    fullDate(date) {
+        return formatDate(date, this.resolvedLocale(), { dateStyle: 'full' });
+    }
+    isDayBlocked(date) {
+        const dates = this.disabledDates();
+        if (!dates)
+            return false;
+        return Array.isArray(dates) ? dates.includes(date) : dates(date);
+    }
+    setValue(date, silent = false) {
+        this.value.set(date);
+        this.draftInvalid.set(false);
+        this.setFieldText(this.displayText());
+        if (!silent)
+            this.announce(date ? `${this.fullDate(date)}.` : 'Date cleared.');
+    }
+    refuse(raw, reason) {
+        this.draftInvalid.set(true);
+        const message = {
+            unparseable: `Couldn't read “${raw}” as a date.`,
+            'out-of-range': `${raw} is outside the allowed dates.`,
+            disabled: `${raw} isn't available.`,
+        }[reason];
+        this.announce(message);
+        this.rejected.emit({ raw, reason });
+    }
+    commit(raw) {
+        const trimmed = raw.trim();
+        if (!trimmed) {
+            this.setValue(undefined);
+            return true;
+        }
+        const custom = this.parse();
+        const parsed = custom
+            ? custom(trimmed, this.resolvedLocale())
+            : parseDateText(trimmed, this.resolvedLocale());
+        if (!parsed) {
+            this.refuse(trimmed, 'unparseable');
+            return false;
+        }
+        const min = this.minDate();
+        const max = this.maxDate();
+        if ((min && parsed < min) || (max && parsed > max)) {
+            this.refuse(trimmed, 'out-of-range');
+            return false;
+        }
+        if (this.isDayBlocked(parsed)) {
+            this.refuse(trimmed, 'disabled');
+            return false;
+        }
+        this.setValue(parsed);
+        return true;
+    }
+    /** Step a committed value ±1 day, skipping blocked days, stopping at fences. */
+    step(direction) {
+        const committed = this.value();
+        if (!committed)
+            return;
+        let date = addDays(committed, direction);
+        let guard = 0;
+        while (this.isDayBlocked(date) && guard++ < 400)
+            date = addDays(date, direction);
+        const min = this.minDate();
+        const max = this.maxDate();
+        if ((min && date < min) || (max && date > max))
+            return; // fence
+        this.setValue(date);
+    }
+    // --- Keyboard ----------------------------------------------------------------
+    onInputKeydown(event) {
+        const element = this.inputRef().nativeElement;
+        switch (event.key) {
+            case 'Enter':
+                event.preventDefault();
+                this.commit(element.value);
+                break;
+            case 'Escape':
+                if (this.popupOpen()) {
+                    this.closePopup();
+                }
+                else {
+                    this.setFieldText(this.displayText());
+                    this.draftInvalid.set(false);
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                // Alt or an empty field opens the popup; on a committed value the
+                // caret has nowhere to go, so stepping is what a spinner would do.
+                if (event.altKey || element.value.trim() === '')
+                    this.openPopup();
+                else if (this.value() && element.value === this.displayText())
+                    this.step(-1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.value() && element.value === this.displayText())
+                    this.step(1);
+                break;
+        }
+    }
+    onInput() {
+        this.draftInvalid.set(false);
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next && this.host.nativeElement.contains(next))
+            return;
+        this.touched.set(true);
+        if (this.popupOpen())
+            return;
+        const element = this.inputRef()?.nativeElement;
+        if (element && this.commitOnBlur() && element.value !== this.displayText())
+            this.commit(element.value);
+    }
+    // --- Popup ---------------------------------------------------------------------
+    openPopup() {
+        if (this.disabled() || this.popupOpen())
+            return;
+        this.dropdown()?.toggleDropdown();
+    }
+    closePopup() {
+        if (this.popupOpen())
+            this.dropdown()?.hideDropdown();
+    }
+    onPopupShowing() {
+        // The grid opens on the committed value's month (or today's).
+        this.calendar()?.month.set(monthOf(this.value() ?? todayIso()));
+        this.calendar()?.focusActiveDay();
+        this.opened.emit();
+    }
+    onPopupHiding() {
+        this.closed.emit();
+        // Focus returns to the field (not the toggle) when it was in the popup —
+        // this runs before the dropdown's own restoreFocus, which then no-ops.
+        const active = document.activeElement;
+        const popup = this.popupRef()?.nativeElement;
+        if (!active || active === document.body || (popup && popup.contains(active)))
+            this.inputRef()?.nativeElement.focus();
+    }
+    onCalendarPick(date) {
+        this.setValue(date);
+        this.closePopup();
+    }
+    /** The popup is a focus-holding dialog: Tab cycles inside it (APG pattern). */
+    onPopupKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closePopup();
+            return;
+        }
+        if (event.key !== 'Tab')
+            return;
+        const popup = this.popupRef()?.nativeElement;
+        if (!popup)
+            return;
+        const focusables = Array.from(popup.querySelectorAll('button:not(:disabled)')).filter((button) => button.tabIndex >= 0);
+        if (!focusables.length)
+            return;
+        const index = focusables.indexOf(document.activeElement);
+        const next = focusables[(index + (event.shiftKey ? -1 : 1) + focusables.length) % focusables.length];
+        event.preventDefault();
+        next.focus();
+    }
+    // --- Internals -------------------------------------------------------------------
+    setFieldText(text) {
+        const element = this.inputRef()?.nativeElement;
+        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 */ []));
+    inputClass = computed(() => {
+        const colors = this.theme.colorPalette();
+        return css([
+            {
+                flex: 1,
+                minWidth: 0,
+                border: 0,
+                outline: 'none',
+                background: 'transparent',
+                color: 'inherit',
+                font: 'inherit',
+            },
+            this.draftInvalid() && {
+                color: colors['warn'],
+                // Shape and colour, not colour alone (WCAG 1.4.1).
+                textDecoration: `underline dashed ${colors['warn']} 1.5px`,
+                textUnderlineOffset: 3,
+            },
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    toggleWrapClass = computed(() => css({ display: 'flex', alignItems: 'center', ...this.theme.paddingRight('xxs') }), ...(ngDevMode ? [{ debugName: "toggleWrapClass" }] : /* istanbul ignore next */ []));
+    /** Embedded mode: the composer owns the box; keep only the flex row. */
+    embeddedClass = computed(() => {
+        const colors = this.theme.colorPalette();
+        return css([
+            { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 },
+            this.draftInvalid() && { color: colors['warn'] },
+        ]);
+    }, ...(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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDateInputComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-date-input, DateInput', imports: [
+                        NgTemplateOutlet,
+                        UniCalendarComponent,
+                        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" }]
+        }], 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) => {
+    const [h, m] = time.split(':').map(Number);
+    return h * 60 + m;
+};
+const fromMinutes = (minutes) => `${String(Math.floor(minutes / 60)).padStart(2, '0')}:${String(minutes % 60).padStart(2, '0')}`;
+/**
+ * Time field: a combobox over time options — the same listbox contract as
+ * uni-search-input and uni-tag-input. Type `3p`, `930` or `15:00`, or pick
+ * `3:00 PM` from the list; the form always gets 24-hour `'HH:mm'` (`hour12`
+ * affects display only). The list is assistive, not exhaustive: any
+ * parseable time commits, unless `slots` pins the choices (a slot picker) —
+ * then a typed time must match one. Unreadable or unavailable text stays in
+ * the field, flagged, with a `rejected` event.
+ */
+class UniTimeInputComponent extends BaseComponent {
+    // --- Signal Forms block (explicit per AGENTS.md, not a base class) --------
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    // --- Configuration -------------------------------------------------------
+    /** Accessible name for the field, e.g. "Start time". */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Generated list granularity, in minutes. */
+    minuteStep = input(30, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    /** Earliest allowed time (inclusive), `'09:00'`. */
+    minTime = input(...(ngDevMode ? [undefined, { debugName: "minTime" }] : /* istanbul ignore next */ []));
+    /** Latest allowed time (inclusive), `'17:00'`. */
+    maxTime = input(...(ngDevMode ? [undefined, { debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    /** Exact allowed times (scheduling). When set, typed entry must match one. */
+    slots = input(...(ngDevMode ? [undefined, { debugName: "slots" }] : /* istanbul ignore next */ []));
+    /** 12-hour display; defaults from the locale. The value stays 24-hour. */
+    hour12 = input(...(ngDevMode ? [undefined, { debugName: "hour12" }] : /* istanbul ignore next */ []));
+    /** BCP 47 tag for the display format; defaults to the document language. */
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    commitOnBlur = input(true, ...(ngDevMode ? [{ debugName: "commitOnBlur" }] : /* istanbul ignore next */ []));
+    /** Renders without its own input-box chrome, for composers like uni-date-time-input. */
+    embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : /* istanbul ignore next */ []));
+    // --- Events ----------------------------------------------------------------
+    /** A typed commit was refused; the raw text stays in the field. */
+    rejected = output();
+    host = inject(ElementRef);
+    inputRef = viewChild('field', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    listRef = viewChild('listbox', ...(ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    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. */
+    options = computed(() => this.slots() ?? timeSlots(this.minuteStep(), this.minTime(), this.maxTime()), ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    optionLabels = computed(() => this.options().map((time) => this.formatValue(time)), ...(ngDevMode ? [{ debugName: "optionLabels" }] : /* istanbul ignore next */ []));
+    /** Shared combobox bookkeeping — identical contract to uni-search-input. */
+    list = createListboxNavigation({
+        count: () => this.options().length,
+        idPrefix: 'uni-time-listbox',
+    });
+    displayText = computed(() => {
+        const value = this.value();
+        return value ? this.formatValue(value) : '';
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+    resolvedPlaceholder = computed(() => this.placeholder() ?? this.formatValue('09:00'), ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    formatValue(time) {
+        return formatTime(time, this.resolvedLocale(), this.resolvedHour12());
+    }
+    // --- Committing -------------------------------------------------------------
+    setValue(time, silent = false) {
+        this.value.set(time);
+        this.draftInvalid.set(false);
+        this.setFieldText(this.displayText());
+        if (!silent)
+            this.announce(time ? `${this.formatValue(time)}.` : 'Time cleared.');
+    }
+    refuse(raw, reason, shown = raw) {
+        this.draftInvalid.set(true);
+        const message = {
+            unparseable: `Couldn't read “${shown}” as a time.`,
+            'out-of-range': `${shown} is outside the allowed times.`,
+            unavailable: `${shown} isn't available.`,
+        }[reason];
+        this.announce(message);
+        this.rejected.emit({ raw, reason });
+    }
+    commit(raw) {
+        const trimmed = raw.trim();
+        if (!trimmed) {
+            this.setValue(undefined);
+            return true;
+        }
+        let parsed = parseTimeText(trimmed, this.resolvedHour12());
+        if (!parsed) {
+            this.refuse(trimmed, 'unparseable');
+            return false;
+        }
+        const min = this.minTime();
+        const max = this.maxTime();
+        const inBounds = (time) => !(min && time < min) && !(max && time > max);
+        const slots = this.slots();
+        if (!slots && !inBounds(parsed)) {
+            // The PM bias yields if it pushed the time out of bounds.
+            const unbiased = parseTimeText(trimmed, false);
+            if (unbiased && inBounds(unbiased))
+                parsed = unbiased;
+            else {
+                this.refuse(trimmed, 'out-of-range');
+                return false;
+            }
+        }
+        if (slots && !slots.includes(parsed)) {
+            // Announce the formatted time — "5:00 PM isn't available."
+            this.refuse(trimmed, 'unavailable', this.formatValue(parsed));
+            return false;
+        }
+        this.setValue(parsed);
+        return true;
+    }
+    /** Step a committed value ±minuteStep (±1 slot when pinned), clamped. */
+    stepValue(direction) {
+        const committed = this.value();
+        if (!committed)
+            return;
+        const slots = this.slots();
+        if (slots?.length) {
+            const sorted = [...slots].sort();
+            const index = sorted.indexOf(committed);
+            const next = index >= 0
+                ? sorted[index + direction]
+                : direction > 0
+                    ? sorted.find((slot) => slot > committed)
+                    : [...sorted].reverse().find((slot) => slot < committed);
+            if (next)
+                this.setValue(next);
+            return;
+        }
+        const step = this.minuteStep();
+        const current = toMinutes(committed);
+        const snapped = direction > 0
+            ? Math.floor(current / step) * step + step
+            : Math.ceil(current / step) * step - step;
+        if (snapped < 0 || snapped >= 24 * 60)
+            return;
+        const candidate = fromMinutes(snapped);
+        const min = this.minTime();
+        const max = this.maxTime();
+        if ((min && candidate < min) || (max && candidate > max))
+            return; // fence
+        this.setValue(candidate);
+    }
+    // --- Keyboard ----------------------------------------------------------------
+    onInputKeydown(event) {
+        const element = this.inputRef().nativeElement;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                event.preventDefault();
+                const direction = event.key === 'ArrowDown' ? 1 : -1;
+                // A committed value with the list closed steps like a spinner —
+                // ArrowUp means later, like the date field's ArrowUp means tomorrow —
+                // while the list opens from an empty or edited field (or the toggle).
+                if (!this.list.open() && this.value() && element.value === this.displayText()) {
+                    this.stepValue(direction === 1 ? -1 : 1);
+                    break;
+                }
+                if (!this.list.open()) {
+                    this.openList();
+                    if (this.list.activeIndex() < 0)
+                        this.list.setActive(direction === 1 ? 0 : this.options().length - 1);
+                }
+                else {
+                    const count = this.options().length;
+                    this.list.setActive((this.list.activeIndex() + direction + count) % count);
+                }
+                this.scrollToActive();
+                break;
+            }
+            case 'Enter': {
+                event.preventDefault();
+                const active = this.list.activeIndex();
+                if (this.list.open() && active >= 0)
+                    this.setValue(this.options()[active]);
+                else
+                    this.commit(element.value);
+                this.list.hide();
+                break;
+            }
+            case 'Escape':
+                if (this.list.open()) {
+                    this.list.hide();
+                }
+                else {
+                    this.setFieldText(this.displayText());
+                    this.draftInvalid.set(false);
+                }
+                break;
+            case 'Tab':
+                // Never trap: commit what is typed, then let focus move on.
+                if (element.value.trim() && element.value !== this.displayText())
+                    this.commit(element.value);
+                this.list.hide();
+                break;
+        }
+    }
+    onInput() {
+        this.draftInvalid.set(false);
+        // Typing never selects an option — Enter must commit the draft, not
+        // whatever happens to sit nearest; the list only scrolls alongside.
+        this.list.show();
+        this.list.setActive(-1);
+        const parsed = parseTimeText(this.inputRef().nativeElement.value, this.resolvedHour12());
+        if (parsed) {
+            const options = this.options();
+            let nearest = options.findIndex((time) => time >= parsed);
+            if (nearest < 0)
+                nearest = options.length - 1;
+            this.scrollToIndex(nearest);
+        }
+    }
+    onToggle() {
+        if (this.list.open()) {
+            this.list.hide();
+        }
+        else {
+            this.openList();
+            this.inputRef()?.nativeElement.focus();
+        }
+    }
+    selectOption(time) {
+        this.setValue(time);
+        this.list.hide();
+        this.inputRef()?.nativeElement.focus();
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next && this.host.nativeElement.contains(next))
+            return;
+        this.list.hide();
+        this.touched.set(true);
+        const element = this.inputRef()?.nativeElement;
+        if (element && this.commitOnBlur() && element.value !== this.displayText())
+            this.commit(element.value);
+    }
+    // --- Internals -------------------------------------------------------------------
+    openList() {
+        this.list.show();
+        const committed = this.value();
+        if (committed)
+            this.list.setActive(this.options().indexOf(committed));
+        this.scrollToActive();
+    }
+    scrollToActive() {
+        this.scrollToIndex(this.list.activeIndex());
+    }
+    scrollToIndex(index) {
+        if (index < 0)
+            return;
+        queueMicrotask(() => this.listRef()?.nativeElement.children[index]?.scrollIntoView?.({ block: 'nearest' }));
+    }
+    setFieldText(text) {
+        const element = this.inputRef()?.nativeElement;
+        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 */ []));
+    inputClass = computed(() => {
+        const colors = this.theme.colorPalette();
+        return css([
+            {
+                flex: 1,
+                minWidth: 0,
+                border: 0,
+                outline: 'none',
+                background: 'transparent',
+                color: 'inherit',
+                font: 'inherit',
+            },
+            this.draftInvalid() && {
+                color: colors['warn'],
+                // Shape and colour, not colour alone (WCAG 1.4.1).
+                textDecoration: `underline dashed ${colors['warn']} 1.5px`,
+                textUnderlineOffset: 3,
+            },
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    toggleWrapClass = computed(() => css({ display: 'flex', alignItems: 'center', ...this.theme.paddingRight('xxs') }), ...(ngDevMode ? [{ debugName: "toggleWrapClass" }] : /* istanbul ignore next */ []));
+    /** Embedded mode: the composer owns the box; keep only the flex row. */
+    embeddedClass = computed(() => css({ display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }), ...(ngDevMode ? [{ debugName: "embeddedClass" }] : /* istanbul ignore next */ []));
+    listClass = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            right: 0,
+            zIndex: 20,
+            margin: '4px 0 0',
+            padding: 4,
+            listStyle: 'none',
+            maxHeight: (options.maxVisibleOptions ?? 7) * 36,
+            overflowY: 'auto',
+            ...this.theme.backgroundColor(options.listColor ?? 'primary-surface'),
+            ...this.theme.boxShadow(options.listShadow ?? 'menu'),
+            ...this.theme.radius(options.listBorderRadius ?? 'xs'),
+            '& [role="option"]': {
+                padding: '8px 12px',
+                cursor: 'pointer',
+                ...this.theme.typeface('label'),
+                ...this.theme.color('on-primary-surface'),
+                ...this.theme.radius('xxs'),
+                '&.active, &:hover': {
+                    ...this.theme.backgroundColor('primary-container'),
+                    ...this.theme.color('on-primary-container'),
+                },
+            },
+        });
+    }, ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTimeInputComponent, isStandalone: true, selector: "uni-time-input, TimeInput", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'timeInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     commits only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      aria-autocomplete=\"list\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-expanded]=\"list.open()\"\n      [attr.aria-controls]=\"list.listboxId\"\n      [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <button\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        aria-haspopup=\"listbox\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'schedule'\"\n        [attr.aria-expanded]=\"list.open()\"\n        [disable]=\"disabled()\"\n        (click)=\"onToggle()\"\n      >\n        Choose time\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (list.open()) {\n    <ul #listbox [id]=\"list.listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n      @for (time of options(); track time; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"time === value()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectOption(time)\"\n        >\n          {{ optionLabels()[i] }}\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Commits and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcement() }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+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 }] }] } });
+
+/**
+ * One field for a date and a time: a thin composer seating a uni-date-input
+ * and a uni-time-input in one input-box chrome under one label, yielding one
+ * combined `'YYYY-MM-DDTHH:mm'` value. The value emits only when both parts
+ * are set — a time without a day is not an answer — and clearing the date
+ * clears it. With `slotsFor`, the time part stays disabled until a day is
+ * chosen and offers exactly that day's slots: the scheduling flow in one
+ * attribute. Two honest tab stops (it is two questions); apps needing a
+ * different arrangement compose the primitives directly.
+ */
+class UniDateTimeInputComponent extends BaseComponent {
+    // --- Signal Forms block (explicit per AGENTS.md, not a base class) --------
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    // --- Configuration -------------------------------------------------------
+    /** Names the group; the parts are announced as "Date" and "Time" under it. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Earliest allowed moment; the date and time fences are split from it. */
+    minDateTime = input(...(ngDevMode ? [undefined, { debugName: "minDateTime" }] : /* istanbul ignore next */ []));
+    /** Latest allowed moment; the date and time fences are split from it. */
+    maxDateTime = input(...(ngDevMode ? [undefined, { debugName: "maxDateTime" }] : /* istanbul ignore next */ []));
+    // --- Forwarded wholesale ----------------------------------------------------
+    disabledDates = input(...(ngDevMode ? [undefined, { debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    markers = input([], ...(ngDevMode ? [{ debugName: "markers" }] : /* istanbul ignore next */ []));
+    /** Fixed time choices; superseded per-day by `slotsFor` when that is set. */
+    slots = input(...(ngDevMode ? [undefined, { debugName: "slots" }] : /* istanbul ignore next */ []));
+    minuteStep = input(30, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    hour12 = input(...(ngDevMode ? [undefined, { debugName: "hour12" }] : /* istanbul ignore next */ []));
+    weekStart = input(...(ngDevMode ? [undefined, { debugName: "weekStart" }] : /* istanbul ignore next */ []));
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** Scheduling: the day's available times. Gates the time part on a date. */
+    slotsFor = input(...(ngDevMode ? [undefined, { debugName: "slotsFor" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    /**
+     * The two part-values. An external `value` write re-derives both; an
+     * internal partial state (a date without a time round-trips through
+     * `undefined`) must not be wiped by its own echo.
+     */
+    parts = linkedSignal({ ...(ngDevMode ? { debugName: "parts" } : /* istanbul ignore next */ {}), source: this.value,
+        computation: (value, previous) => {
+            if (value)
+                return splitDateTime(value);
+            const kept = previous?.value;
+            if (kept && joinDateTime(kept.date, kept.time) === undefined)
+                return kept;
+            return {};
+        } });
+    dateValue = computed(() => this.parts().date, ...(ngDevMode ? [{ debugName: "dateValue" }] : /* istanbul ignore next */ []));
+    timeValue = computed(() => this.parts().time, ...(ngDevMode ? [{ debugName: "timeValue" }] : /* istanbul ignore next */ []));
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    minParts = computed(() => splitDateTime(this.minDateTime()), ...(ngDevMode ? [{ debugName: "minParts" }] : /* istanbul ignore next */ []));
+    maxParts = computed(() => splitDateTime(this.maxDateTime()), ...(ngDevMode ? [{ debugName: "maxParts" }] : /* istanbul ignore next */ []));
+    dateMin = computed(() => this.minParts().date, ...(ngDevMode ? [{ debugName: "dateMin" }] : /* istanbul ignore next */ []));
+    dateMax = computed(() => this.maxParts().date, ...(ngDevMode ? [{ debugName: "dateMax" }] : /* istanbul ignore next */ []));
+    // The time fence applies only on the boundary date itself — 'after 9:00'
+    // on the min date, any time on later days.
+    timeMin = computed(() => {
+        const { date, time } = this.minParts();
+        return time && date && this.dateValue() === date ? time : undefined;
+    }, ...(ngDevMode ? [{ debugName: "timeMin" }] : /* istanbul ignore next */ []));
+    timeMax = computed(() => {
+        const { date, time } = this.maxParts();
+        return time && date && this.dateValue() === date ? time : undefined;
+    }, ...(ngDevMode ? [{ debugName: "timeMax" }] : /* istanbul ignore next */ []));
+    /** The chosen day's slots when `slotsFor` is set, else the fixed list. */
+    effectiveSlots = computed(() => {
+        const slotsFor = this.slotsFor();
+        if (!slotsFor)
+            return this.slots();
+        const date = this.dateValue();
+        return date ? slotsFor(date) : [];
+    }, ...(ngDevMode ? [{ debugName: "effectiveSlots" }] : /* istanbul ignore next */ []));
+    timeDisabled = computed(() => this.disabled() || (!!this.slotsFor() && !this.dateValue()), ...(ngDevMode ? [{ debugName: "timeDisabled" }] : /* istanbul ignore next */ []));
+    // --- Part plumbing -----------------------------------------------------------
+    onDatePartChange(date) {
+        let time = this.parts().time;
+        if (!date) {
+            time = undefined; // clearing the date clears the combined value
+        }
+        else {
+            const slotsFor = this.slotsFor();
+            // Changing the day clears a slot that no longer exists.
+            if (slotsFor && time && !slotsFor(date).includes(time))
+                time = undefined;
+        }
+        this.setParts({ date, time });
+    }
+    onTimePartChange(time) {
+        this.setParts({ date: this.parts().date, time });
+    }
+    setParts(parts) {
+        this.parts.set(parts);
+        this.value.set(joinDateTime(parts.date, parts.time));
+    }
+    onHostFocusOut(event) {
+        const next = event.relatedTarget;
+        if (!next || !this.host.nativeElement.contains(next))
+            this.touched.set(true);
+    }
+    // --- Styling --------------------------------------------------------------------
+    className = computed(() => css({ display: 'block' }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    groupClass = computed(() => css({
+        display: 'flex',
+        alignItems: 'stretch',
+        flex: 1,
+        width: '100%',
+        minWidth: 0,
+        ...this.theme.gap(this.componentOptions().partGap ?? 'sm'),
+    }), ...(ngDevMode ? [{ debugName: "groupClass" }] : /* istanbul ignore next */ []));
+    datePartClass = computed(() => css({ flex: 1.4, minWidth: 0, display: 'flex', '& > *': { flex: 1, minWidth: 0 } }), ...(ngDevMode ? [{ debugName: "datePartClass" }] : /* istanbul ignore next */ []));
+    timePartClass = computed(() => css({ flex: 1, minWidth: 0, display: 'flex', '& > *': { flex: 1, minWidth: 0 } }), ...(ngDevMode ? [{ debugName: "timePartClass" }] : /* istanbul ignore next */ []));
+    dividerClass = computed(() => {
+        const colors = this.theme.colorPalette();
+        return css({
+            width: 1,
+            alignSelf: 'stretch',
+            flex: 'none',
+            backgroundColor: colors[this.componentOptions().dividerColor ?? 'outline'],
+        });
+    }, ...(ngDevMode ? [{ debugName: "dividerClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDateTimeInputComponent, isStandalone: true, selector: "uni-date-time-input, DateTimeInput", 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 }, minDateTime: { classPropertyName: "minDateTime", publicName: "minDateTime", isSignal: true, isRequired: false, transformFunction: null }, maxDateTime: { classPropertyName: "maxDateTime", publicName: "maxDateTime", 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 }, slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, slotsFor: { classPropertyName: "slotsFor", publicName: "slotsFor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { listeners: { "focusout": "onHostFocusOut($event)" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dateTimeInput' }], usesInheritance: true, ngImport: i0, template: "<!-- One field chrome for both parts; the parts render embedded (no box of\n     their own), so error/disabled/focus states stay consistent with every\n     other field. Tab order: date, then time \u2014 two honest tab stops. -->\n<uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n  <div role=\"group\" [attr.aria-label]=\"label()\" [class]=\"groupClass()\">\n    <div [class]=\"datePartClass()\">\n      <uni-date-input\n        [embedded]=\"true\"\n        label=\"Date\"\n        [value]=\"dateValue()\"\n        [minDate]=\"dateMin()\"\n        [maxDate]=\"dateMax()\"\n        [disabledDates]=\"disabledDates()\"\n        [markers]=\"markers()\"\n        [weekStart]=\"weekStart()\"\n        [locale]=\"locale()\"\n        [disabled]=\"disabled()\"\n        [ariaDescribedBy]=\"ariaDescribedBy()\"\n        (valueChange)=\"onDatePartChange($event)\"\n      />\n    </div>\n    <div [class]=\"dividerClass()\"></div>\n    <div [class]=\"timePartClass()\">\n      <uni-time-input\n        [embedded]=\"true\"\n        label=\"Time\"\n        [value]=\"timeValue()\"\n        [minTime]=\"timeMin()\"\n        [maxTime]=\"timeMax()\"\n        [slots]=\"effectiveSlots()\"\n        [minuteStep]=\"minuteStep()\"\n        [hour12]=\"hour12()\"\n        [locale]=\"locale()\"\n        [disabled]=\"timeDisabled()\"\n        (valueChange)=\"onTimePartChange($event)\"\n      />\n    </div>\n  </div>\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniDateInputComponent, selector: "uni-date-input, DateInput", inputs: ["value", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "placeholder", "displayFormat", "locale", "commitOnBlur", "parse", "embedded", "minDate", "maxDate", "disabledDates", "markers", "weekStart"], outputs: ["valueChange", "touchedChange", "opened", "closed", "rejected"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }, { kind: "component", type: UniTimeInputComponent, selector: "uni-time-input, TimeInput", inputs: ["value", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "placeholder", "minuteStep", "minTime", "maxTime", "slots", "hour12", "locale", "commitOnBlur", "embedded"], outputs: ["valueChange", "touchedChange", "rejected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDateTimeInputComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-date-time-input, DateTimeInput', imports: [UniDateInputComponent, UniInputBoxComponent, UniTimeInputComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'dateTimeInput' }], host: { '[class]': 'className()', '(focusout)': 'onHostFocusOut($event)' }, template: "<!-- One field chrome for both parts; the parts render embedded (no box of\n     their own), so error/disabled/focus states stay consistent with every\n     other field. Tab order: date, then time \u2014 two honest tab stops. -->\n<uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n  <div role=\"group\" [attr.aria-label]=\"label()\" [class]=\"groupClass()\">\n    <div [class]=\"datePartClass()\">\n      <uni-date-input\n        [embedded]=\"true\"\n        label=\"Date\"\n        [value]=\"dateValue()\"\n        [minDate]=\"dateMin()\"\n        [maxDate]=\"dateMax()\"\n        [disabledDates]=\"disabledDates()\"\n        [markers]=\"markers()\"\n        [weekStart]=\"weekStart()\"\n        [locale]=\"locale()\"\n        [disabled]=\"disabled()\"\n        [ariaDescribedBy]=\"ariaDescribedBy()\"\n        (valueChange)=\"onDatePartChange($event)\"\n      />\n    </div>\n    <div [class]=\"dividerClass()\"></div>\n    <div [class]=\"timePartClass()\">\n      <uni-time-input\n        [embedded]=\"true\"\n        label=\"Time\"\n        [value]=\"timeValue()\"\n        [minTime]=\"timeMin()\"\n        [maxTime]=\"timeMax()\"\n        [slots]=\"effectiveSlots()\"\n        [minuteStep]=\"minuteStep()\"\n        [hour12]=\"hour12()\"\n        [locale]=\"locale()\"\n        [disabled]=\"timeDisabled()\"\n        (valueChange)=\"onTimePartChange($event)\"\n      />\n    </div>\n  </div>\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 }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], minDateTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDateTime", required: false }] }], maxDateTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDateTime", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }], slots: [{ type: i0.Input, args: [{ isSignal: true, alias: "slots", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], slotsFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotsFor", required: false }] }] } });
+
 class UniDialogComponent extends BaseComponent {
     elem = inject(ElementRef);
     /** Two-way bindable open state: [(show)]. */
@@ -3482,203 +5236,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], contentTemplate: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], overlay: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }] } });
 
-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 */ []));
-    placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
-    offset = input({ mainAxis: 4, alignmentAxis: 12 }, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
-    /** CSS anchor-name linking the trigger to the popover panel. */
-    anchorName = newAnchorName();
-    /**
-     * Value for aria-haspopup on the trigger, describing what the popover
-     * contains (e.g. 'menu' for Menu, 'dialog' for rich content). When unset,
-     * only aria-expanded/aria-controls are managed.
-     */
-    ariaHasPopup = input(null, ...(ngDevMode ? [{ debugName: "ariaHasPopup" }] : /* istanbul ignore next */ []));
-    /** Document-unique id of the popover element, for aria-controls wiring. */
-    popoverId = uniqueId('uni-dropdown');
-    paddingVertical = input(...(ngDevMode ? [undefined, { debugName: "paddingVertical" }] : /* istanbul ignore next */ []));
-    paddingHorizontal = input(...(ngDevMode ? [undefined, { debugName: "paddingHorizontal" }] : /* istanbul ignore next */ []));
-    // Per-instance panel-chrome overrides; undefined falls back to the theme's
-    // `dropdown` options, so hosts like uni-menu can restyle their panel
-    // without forking the shared dropdown entry.
-    border = input(...(ngDevMode ? [undefined, { debugName: "border" }] : /* istanbul ignore next */ []));
-    borderRadius = input(...(ngDevMode ? [undefined, { debugName: "borderRadius" }] : /* istanbul ignore next */ []));
-    shadow = input(...(ngDevMode ? [undefined, { debugName: "shadow" }] : /* istanbul ignore next */ []));
-    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
-    dropdownShowing = output();
-    dropdownHiding = output();
-    dropdownRef;
-    get _trigger() {
-        return this.trigger();
-    }
-    get _dropdown() {
-        return this.dropdownRef.nativeElement;
-    }
-    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();
-        return css([
-            {
-                // Reset browser agent default popover styles
-                border: 'none',
-                background: 'transparent',
-                padding: 0,
-                overflow: 'visible',
-                width: 'max-content',
-                // 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)',
-                    },
-                },
-            },
-        ]);
-    }, ...(ngDevMode ? [{ debugName: "dropdownClass" }] : /* istanbul ignore next */ []));
-    /** The element that receives focus and carries the ARIA popup state. */
-    get _focusTarget() {
-        return resolveFocusTarget(this._trigger);
-    }
-    ngOnInit() {
-        // Single native click binding to manage open/close commands
-        this.renderer.listen(this._trigger, 'click', (e) => {
-            e.stopPropagation();
-            this.toggleDropdown();
-        });
-        // Anchor the popover panel to the trigger element
-        this.renderer.setStyle(this._trigger, 'anchor-name', this.anchorName);
-        // Wire the ARIA popup contract onto the focusable trigger element
-        const focusTarget = this._focusTarget;
-        this.renderer.setAttribute(focusTarget, 'aria-expanded', 'false');
-        this.renderer.setAttribute(focusTarget, 'aria-controls', this.popoverId);
-        if (this.ariaHasPopup()) {
-            this.renderer.setAttribute(focusTarget, 'aria-haspopup', this.ariaHasPopup());
-        }
-        // 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';
-            this.showing.set(isOpened);
-            this.renderer.setAttribute(this._focusTarget, 'aria-expanded', `${isOpened}`);
-            if (isOpened) {
-                this.dropdownShowing.emit(true);
-            }
-            else {
-                this.dropdownHiding.emit(true);
-                this.restoreFocus();
-            }
-        });
-    }
-    /**
-     * 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();
-        }
-        else {
-            this._dropdown.showPopover();
-        }
-    }
-    hideDropdown() {
-        this._dropdown.hidePopover();
-    }
-    ngOnDestroy() {
-        try {
-            this._dropdown.hidePopover();
-        }
-        catch {
-            // popover was already closed or detached
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDropdownComponent, isStandalone: true, selector: "uni-dropdown", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "ariaHasPopup", isSignal: true, isRequired: false, transformFunction: null }, paddingVertical: { classPropertyName: "paddingVertical", publicName: "paddingVertical", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownShowing: "dropdownShowing", dropdownHiding: "dropdownHiding" }, providers: [{ provide: COMPONENT_NAME, useValue: 'dropdown' }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
-    <!-- 1. The native 'popover' attribute brings it to the top layer with native light-dismiss -->
-    <div #dropdown popover="auto" [id]="popoverId" [class]="dropdownClass()">
-      <div
-        box-layout
-        [border]="border() ?? componentOptions().border"
-        [borderRadius]="borderRadius() ?? componentOptions().borderRadius"
-        [paddingVertical]="paddingVertical()"
-        [paddingHorizontal]="paddingHorizontal()"
-        [color]="color() ?? componentOptions().color"
-        [shadow]="shadow() ?? componentOptions().shadow"
-      >
-        <ng-content></ng-content>
-      </div>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDropdownComponent, decorators: [{
-            type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'uni-dropdown',
-                    imports: [UniBoxComponent],
-                    template: `
-    <!-- 1. The native 'popover' attribute brings it to the top layer with native light-dismiss -->
-    <div #dropdown popover="auto" [id]="popoverId" [class]="dropdownClass()">
-      <div
-        box-layout
-        [border]="border() ?? componentOptions().border"
-        [borderRadius]="borderRadius() ?? componentOptions().borderRadius"
-        [paddingVertical]="paddingVertical()"
-        [paddingHorizontal]="paddingHorizontal()"
-        [color]="color() ?? componentOptions().color"
-        [shadow]="shadow() ?? componentOptions().shadow"
-      >
-        <ng-content></ng-content>
-      </div>
-    </div>
-  `,
-                    providers: [{ provide: COMPONENT_NAME, useValue: 'dropdown' }],
-                }]
-        }], propDecorators: { trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHasPopup", required: false }] }], paddingVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingVertical", required: false }] }], paddingHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingHorizontal", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], dropdownShowing: [{ type: i0.Output, args: ["dropdownShowing"] }], dropdownHiding: [{ type: i0.Output, args: ["dropdownHiding"] }], dropdownRef: [{
-                type: ViewChild,
-                args: ['dropdown', { static: true }]
-            }] } });
-
 class UniExpandComponent extends BaseComponent {
     collapsed = model(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     /**
@@ -4169,57 +5726,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * This file exports all public-facing elements of the file-drop-zone component.
  */
 
-class UniInputBoxComponent extends BaseComponent {
-    className = css({ display: 'contents' });
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-    minWidth = input('0', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
-    /** Override the themed field height, e.g. `'auto'` for multi-line fields. */
-    height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-    color = computed(() => this.error() ? this.componentOptions().errorColor : this.componentOptions().color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    border = computed(() => this.error() ? this.componentOptions().errorBorder : this.componentOptions().border, ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
-    shadow = computed(() => this.error() ? this.componentOptions().errorShadow : this.componentOptions().shadow, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
-    inputBoxClass = computed(() => css([
-        this.disabled() && {
-            ...this.theme.color(this.componentOptions().disabledTextColor),
-            ...this.theme.backgroundColor(this.componentOptions().disabledColor),
-            cursor: 'not-allowed !important',
-        },
-        {
-            '& input, select, textarea': {
-                ...removeInputPlatformStyling,
-                height: '100%',
-                ...this.theme.paddingLeft(this.componentOptions().paddingLeft),
-                ...this.theme.color(this.componentOptions().textColor),
-                ...this.theme.typeface(this.componentOptions().typeFace),
-            },
-            // Multi-line fields size themselves (rows/resize), not from the box.
-            '& textarea': {
-                height: 'auto',
-                ...this.theme.paddingTop('xs'),
-                ...this.theme.paddingBottom('xs'),
-            },
-            '&:has(input:disabled, select:disabled, textarea:disabled)': {
-                ...this.theme.color(this.componentOptions().disabledTextColor),
-                ...this.theme.backgroundColor(this.componentOptions().disabledColor),
-            },
-            '& input:disabled, select:disabled, textarea:disabled': {
-                cursor: 'not-allowed !important',
-            },
-            '&:has(input:focus, select:focus, textarea:focus)': {
-                outline: this.componentOptions().focusOutline,
-                outlineOffset: this.componentOptions().focusOutlineOffset,
-            },
-        },
-    ]), ...(ngDevMode ? [{ debugName: "inputBoxClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputBoxComponent, isStandalone: true, selector: "uni-input-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"height() ?? componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'uni-input-box', imports: [UniRowComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"height() ?? componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
-
 /**
  * Text input that emits `change` only after the user pauses typing. Wears the
  * shared input chrome (themed color, border, typeface, focus ring) via
@@ -5533,6 +7039,13 @@ class UniRadioComponent extends BaseComponent {
     });
     radioOptionClass = computed(() => {
         const { outerCircleSize, innerCircleSize, innerCircleOffset } = this.metrics();
+        // The dot's grow/retract is a token: 0.3s default, 0 = instant. The
+        // 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`;
         return css({
             userSelect: 'none',
             cursor: this.disabled() ? 'not-allowed' : 'pointer',
@@ -5548,7 +7061,7 @@ class UniRadioComponent extends BaseComponent {
                     ? this.getThemeColor('on-disabled')
                     : this.getThemeColor(this.componentOptions().ringColor ?? 'outline')}`,
                 position: 'relative',
-                transition: 'all 0.3s ease',
+                transition: ringTransition,
                 backgroundColor: this.getThemeColor(this.componentOptions().fillColor ?? 'surface'),
                 flexShrink: 0,
             },
@@ -5561,7 +7074,7 @@ class UniRadioComponent extends BaseComponent {
                 top: innerCircleOffset,
                 left: innerCircleOffset,
                 transform: 'scale(0)',
-                transition: 'all 0.3s ease',
+                transition: dotTransition,
             },
             '&:hover .radio-button': this.disabled()
                 ? {}
@@ -5589,9 +7102,9 @@ class UniRadioComponent extends BaseComponent {
         '&:checked + .radio-button .radio-inner': {
             transform: 'scale(1)',
         },
+        // The shared, themable focus indicator, keyed off the hidden input.
         '&:focus + .radio-button': {
-            outline: `2px solid ${this.getThemeColor(this.variant())}`,
-            outlineOffset: '2px',
+            ...this.theme.focusRingStyle(this.getThemeColor(this.variant())),
         },
     }), ...(ngDevMode ? [{ debugName: "radioInputClass" }] : /* istanbul ignore next */ []));
     handleRadioChange(optionValue) {
@@ -5978,7 +7491,8 @@ class UniSliderComponent extends BaseComponent {
             '&::-moz-range-track': { height: trackHeight, borderRadius: radius, background: track },
             '&::-moz-range-progress': { height: trackHeight, borderRadius: radius, background: fill },
             '&::-moz-range-thumb': thumb,
-            '&:focus-visible': { outline: `2px solid ${fill}`, outlineOffset: 2 },
+            // The shared, themable focus indicator, in the track's fill color.
+            '&:focus-visible': { ...this.theme.focusRingStyle(fill) },
             '&:disabled': {
                 cursor: 'not-allowed',
                 opacity: 0.5,
@@ -8035,7 +9549,9 @@ class UniToggleComponent extends BaseComponent {
                     : this.getThemeColor(this.componentOptions().trackColor ?? 'surface-variant'),
                 borderRadius: toggleSize / 2,
                 position: 'relative',
-                transition: 'all 0.3s ease',
+                // Scoped, never `all`: the focus ring must apply instantly rather
+                // than interpolating its outline color from a stale value.
+                transition: 'background-color 0.3s ease, border-color 0.3s ease',
             },
             '& .toggle-slider': {
                 width: sliderSize,
@@ -8045,7 +9561,7 @@ class UniToggleComponent extends BaseComponent {
                 position: 'absolute',
                 top: sliderOffset,
                 left: sliderOffset,
-                transition: 'all 0.3s ease',
+                transition: 'transform 0.3s ease, background-color 0.3s ease',
                 ...this.theme.boxShadow('raised'),
             },
             // Hover darkens whatever the token resolves to — the button convention.
@@ -8074,9 +9590,9 @@ class UniToggleComponent extends BaseComponent {
             '&:disabled + .toggle-switch': {
                 cursor: 'not-allowed',
             },
+            // The shared, themable focus indicator, keyed off the hidden input.
             '&:focus + .toggle-switch': {
-                outline: `2px solid ${this.getThemeColor(this.variant())}`,
-                outlineOffset: '2px',
+                ...this.theme.focusRingStyle(this.getThemeColor(this.variant())),
             },
         });
     }, ...(ngDevMode ? [{ debugName: "toggleInput" }] : /* istanbul ignore next */ []));
@@ -8298,5 +9814,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, ThemeService, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniRadioComponent, UniRecordDatasource, UniRowComponent, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTagInputComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniToggleComponent, UniTooltipComponent, UniWrapComponent, acceptableFile, anchorArrowStyles, anchorStyles, createListboxNavigation, getFileExtension, isDivider, motionSafe, newAnchorName, resolveFocusTarget, uniqueId, useTimer, visuallyHidden };
+export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, ListboxNavigation, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, ThemeService, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCalendarComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDateInputComponent, UniDateTimeInputComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniRadioComponent, UniRecordDatasource, UniRowComponent, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTagInputComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniTimeInputComponent, UniToggleComponent, UniTooltipComponent, UniWrapComponent, acceptableFile, addDays, addMonths, anchorArrowStyles, anchorStyles, buildMonthGrid, createListboxNavigation, dayOfWeek, daysInMonth, formatDate, formatMonthHeading, formatTime, getFileExtension, inclusiveDayCount, isDivider, isValidDate, isoDate, joinDateTime, localeDatePlaceholder, localeDefaultHour12, localeFieldOrder, localeMonthNames, localeWeekStart, monthOf, motionSafe, newAnchorName, parseDateText, parseTimeText, resolveFocusTarget, splitDateTime, timeSlots, todayIso, uniqueId, useTimer, visuallyHidden, weekdayNames };
 //# sourceMappingURL=uni-design-system-uni-angular.mjs.map