@uni-design-system/uni-angular 9.0.1 → 10.1.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, ChangeDetectionStrategy, Component, ElementRef, Directive, model, afterRenderEffect, Renderer2, output, viewChild, ViewChild, viewChildren, contentChildren, effect, untracked, afterNextRender, booleanAttribute } from '@angular/core';
+import { signal, inject, DestroyRef, computed, linkedSignal, resource, Injectable, InjectionToken, input, ChangeDetectionStrategy, Component, ElementRef, Directive, model, afterRenderEffect, Renderer2, output, viewChild, ViewChild, viewChildren, effect, untracked, isDevMode, contentChildren, afterNextRender, forwardRef, booleanAttribute } from '@angular/core';
 import { injectGlobal, css, keyframes } from '@emotion/css';
 import { UniThemes, LightTheme, toTypefaces, parseTheme, formatThemeIssues, hydrateTheme, createThemeFromPalette, Z_INDEX, removeInputPlatformStyling, fadeIn, fadeOut, expandDuration, expandFadeIn, collapseFadeOut, HOVER_OR_KEYBOARD_FOCUS, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
 import { NgTemplateOutlet, NgClass, CommonModule } from '@angular/common';
@@ -30,9 +30,23 @@ function resolveFocusTarget(element) {
 /**
  * Visually hides content while keeping it available to screen readers.
  * Use for text alternatives (e.g. badge counts, icon-only affordances).
+ *
+ * `fixed`, not `absolute`, and that is load-bearing. An absolutely positioned
+ * box resolves its containing block to the nearest *positioned* ancestor —
+ * which, since the controls emitting these spans are `position: static`, is
+ * whatever positioned box happens to be above them in the consumer's layout,
+ * often several scroll containers up. The span then skips every intervening
+ * `overflow: auto` and lands in that distant ancestor's scrollable overflow,
+ * turning 1x1 of invisible text into real scrollable distance in a box that
+ * never opted into scrolling. A fixed box's containing block is the viewport,
+ * so it joins no ancestor's scrollable overflow at all.
+ *
+ * Caveat: inside a `transform`ed (or `filter`ed/`contain`ed) ancestor a fixed
+ * box re-anchors to that ancestor. Harmless here — the element is 1x1 and
+ * clipped to nothing, so where it lands never matters, only what it overflows.
  */
 const visuallyHidden = {
-    position: 'absolute',
+    position: 'fixed',
     width: 1,
     height: 1,
     padding: 0,
@@ -367,6 +381,694 @@ const splitDateTime = (value) => {
 /** One combined value only when both parts are present. */
 const joinDateTime = (date, time) => date && time ? `${date}T${time}` : undefined;
 
+/**
+ * Canonical numeric value shapes shared by `uni-number-input`,
+ * `uni-quantity-stepper`, `uni-number-range-input` and `uni-slider`.
+ *
+ * The components' internal source of truth is a **canonical decimal string** —
+ * optional sign, digits, an optional `.`, no grouping and no affix:
+ * `'-1234.56'`. The bound `number` is its projection, emitted on commit.
+ *
+ * Nothing numeric passes through a float, because floats give wrong answers to
+ * questions people ask of money: `0.1 + 0.2` is `0.30000000000000004`, and
+ * `(1.15).toFixed(1)` is `'1.1'` — 1.15 is really 1.1499999999999999, so the
+ * platform rounds a tie that isn't there. See `decimal.helper.ts`.
+ */
+
+/** Canonical decimal, permitting a leading `+` and a bare `.5` / `5.` form. */
+const CANONICAL = /^[+-]?(\d+(\.\d*)?|\.\d+)$/;
+/** `1.5e-7`, `1e21` — what `String(number)` produces outside 1e-7…1e21. */
+const EXPONENTIAL = /^([+-]?)(\d+)(?:\.(\d+))?[eE]([+-]?\d+)$/;
+/** True when `text` is already a canonical decimal (leading/trailing space allowed). */
+const isCanonicalDecimal = (text) => CANONICAL.test(text.trim());
+/** Fraction-digit count. `'1.250'` → 3, `'12'` → 0, `'5.'` → 0. */
+const decimalScale = (value) => {
+    const point = value.indexOf('.');
+    return point < 0 ? 0 : value.length - point - 1;
+};
+/**
+ * Canonical decimal → integer scaled by `10^scale`. Fraction digits beyond
+ * `scale` are truncated, so callers that must not lose them pass a `scale` at
+ * least `decimalScale(value)`.
+ */
+const toScaled = (value, scale) => {
+    let text = value.trim();
+    const negative = text.startsWith('-');
+    if (negative || text.startsWith('+'))
+        text = text.slice(1);
+    const [integer, fraction = ''] = text.split('.');
+    const padded = (fraction + '0'.repeat(scale)).slice(0, scale);
+    const digits = (integer + padded).replace(/^0+(?=\d)/, '');
+    const scaled = BigInt(digits || '0');
+    return negative ? -scaled : scaled;
+};
+/** Scaled integer → canonical decimal, with trailing fraction zeros trimmed. */
+const fromScaled = (scaled, scale) => {
+    const negative = scaled < 0n;
+    let digits = (negative ? -scaled : scaled).toString();
+    if (scale > 0) {
+        digits = digits.padStart(scale + 1, '0');
+        digits = `${digits.slice(0, -scale)}.${digits.slice(-scale)}`;
+        // `0+$` stops at the point, so '10.00' loses only its fraction zeros.
+        digits = digits.replace(/0+$/, '').replace(/\.$/, '');
+    }
+    if (digits === '' || digits === '0')
+        return '0';
+    return (negative ? '-' : '') + digits;
+};
+/**
+ * Strip a leading `+`, leading zeros and trailing fraction zeros: `'+01.50'`
+ * → `'1.5'`. Requires a canonical decimal; guard with `isCanonicalDecimal`.
+ */
+const normalizeDecimal = (value) => {
+    const scale = decimalScale(value);
+    return fromScaled(toScaled(value, scale), scale);
+};
+/**
+ * Any numeric input → canonical decimal, expanding the exponential notation
+ * `String(number)` produces outside 1e-7…1e21. A `step` of `1e-7` would
+ * otherwise reach the arithmetic as the literal text `'1e-7'`.
+ *
+ * Throws on text that is not numeric at all — every caller here passes either
+ * a `number` input or text already cleared by the parser.
+ */
+const toDecimal = (value) => {
+    const text = String(value).trim();
+    if (CANONICAL.test(text))
+        return normalizeDecimal(text);
+    const match = EXPONENTIAL.exec(text);
+    if (!match)
+        throw new RangeError(`Not a decimal number: ${JSON.stringify(text)}`);
+    const [, sign, integer, fraction = '', exponent] = match;
+    const digits = integer + fraction;
+    const point = integer.length + Number(exponent);
+    let expanded;
+    if (point <= 0)
+        expanded = `0.${'0'.repeat(-point)}${digits}`;
+    else if (point >= digits.length)
+        expanded = digits + '0'.repeat(point - digits.length);
+    else
+        expanded = `${digits.slice(0, point)}.${digits.slice(point)}`;
+    return normalizeDecimal((sign === '-' ? '-' : '') + expanded);
+};
+/** `-1` when `a < b`, `1` when `a > b`, `0` when equal. `'1.50'` equals `'1.5'`. */
+const compareDecimal = (a, b) => {
+    const scale = Math.max(decimalScale(a), decimalScale(b));
+    const left = toScaled(a, scale);
+    const right = toScaled(b, scale);
+    return left < right ? -1 : left > right ? 1 : 0;
+};
+/**
+ * Round to `fractionDigits`, breaking ties per `mode`. Exact where
+ * `Number.prototype.toFixed` is not — see the file header.
+ */
+const roundDecimal = (value, fractionDigits, mode = 'half-up') => {
+    const digits = Math.max(0, Math.trunc(fractionDigits));
+    const scale = decimalScale(value);
+    if (scale <= digits)
+        return normalizeDecimal(value);
+    const scaled = toScaled(value, scale);
+    const divisor = 10n ** BigInt(scale - digits);
+    let quotient = scaled / divisor; // BigInt division truncates toward zero
+    const remainder = scaled % divisor;
+    if (remainder === 0n)
+        return fromScaled(quotient, digits);
+    const negative = scaled < 0n;
+    const twiceRemainder = (remainder < 0n ? -remainder : remainder) * 2n;
+    const away = () => {
+        quotient += negative ? -1n : 1n;
+    };
+    switch (mode) {
+        case 'trunc':
+            break;
+        case 'ceil':
+            if (!negative)
+                quotient += 1n;
+            break;
+        case 'floor':
+            if (negative)
+                quotient -= 1n;
+            break;
+        case 'half-even':
+            if (twiceRemainder > divisor || (twiceRemainder === divisor && quotient % 2n !== 0n))
+                away();
+            break;
+        default: // half-up — a tie goes away from zero
+            if (twiceRemainder >= divisor)
+                away();
+    }
+    return fromScaled(quotient, digits);
+};
+/**
+ * Multiply by `10^places`, exactly. Used for the percent preset's
+ * fraction ⇄ display shift (`0.15` ⇄ `15`) and for deriving a default
+ * large step of `step × 10` without touching a float.
+ */
+const shiftDecimal = (value, places) => {
+    const currentScale = decimalScale(value);
+    let scaled = toScaled(value, currentScale);
+    let scale = currentScale - places;
+    if (scale < 0) {
+        scaled *= 10n ** BigInt(-scale);
+        scale = 0;
+    }
+    return fromScaled(scaled, scale);
+};
+/**
+ * Hold a value inside its fences, reporting which one it hit so the caller can
+ * announce it. Clamping belongs on commit, never per keystroke: a `min=10`
+ * field that clamps live can never be typed into, because the `1` becomes `10`
+ * before the `5` arrives.
+ */
+const clampDecimal = (value, min, max) => {
+    if (min != null && compareDecimal(value, toDecimal(min)) < 0) {
+        return { value: toDecimal(min), hit: 'min' };
+    }
+    if (max != null && compareDecimal(value, toDecimal(max)) > 0) {
+        return { value: toDecimal(max), hit: 'max' };
+    }
+    return { value, hit: null };
+};
+/**
+ * One step from `current`, in `direction` (`1` up, `-1` down).
+ *
+ * Steps land on the grid `origin + n · step`, where `origin` is `min` by
+ * default. A value that is *off* the grid snaps to the nearest grid point **in
+ * the direction of travel** rather than jumping past it: with `min=5, step=10`
+ * the grid is 5, 15, 25, and stepping up from 7 gives 15, not 17.
+ *
+ * Fences stop the value; they never wrap unless `wrap` is set and both bounds
+ * are defined. Returns `current` unchanged when `step` is zero.
+ */
+const stepDecimal = (current, direction, config = {}) => {
+    const step = toDecimal(config.step ?? 1);
+    const origin = config.stepOrigin === 'zero' || config.min == null ? '0' : toDecimal(config.min);
+    // One shared scale keeps every term an exact integer.
+    const scale = Math.max(decimalScale(current), decimalScale(step), decimalScale(origin), config.min == null ? 0 : decimalScale(toDecimal(config.min)), config.max == null ? 0 : decimalScale(toDecimal(config.max)));
+    const stepBy = toScaled(step, scale);
+    if (stepBy === 0n)
+        return current;
+    const value = toScaled(current, scale);
+    const anchor = toScaled(origin, scale);
+    let offset = (value - anchor) % stepBy;
+    if (offset < 0n)
+        offset += stepBy;
+    let next;
+    if (offset === 0n)
+        next = value + (direction > 0 ? stepBy : -stepBy);
+    else
+        next = direction > 0 ? value + (stepBy - offset) : value - offset;
+    const min = config.min == null ? null : toScaled(toDecimal(config.min), scale);
+    const max = config.max == null ? null : toScaled(toDecimal(config.max), scale);
+    if (config.wrap && min != null && max != null) {
+        // The cycle includes one step past `max` so 23 → 0 rather than 23 → 23.
+        const span = max - min + stepBy;
+        let position = (next - min) % span;
+        if (position < 0n)
+            position += span;
+        next = min + position;
+    }
+    else {
+        if (max != null && next > max)
+            next = max;
+        if (min != null && next < min)
+            next = min;
+    }
+    return fromScaled(next, scale);
+};
+
+/**
+ * Locale-aware number parsing and formatting, on top of the exact arithmetic
+ * in `decimal.helper.ts`. `Intl.NumberFormat` supplies both directions —
+ * separators, currency placement and digit systems all come from the locale
+ * and none of them is hardcoded per language. No number library.
+ *
+ * The reason this exists rather than `<input type="number">`: per the HTML
+ * value sanitization algorithm, a number input whose text is not a valid
+ * floating-point number reports `value === ''`. Type `12,50` as most of Europe
+ * does, or paste `1,234.56` from a spreadsheet, and the app reads an empty
+ * field with no way to tell that from a blank one.
+ */
+/** Preset defaults. `null` decimals means "ask `Intl` about the currency". */
+const PRESETS$1 = {
+    decimal: { decimals: [0, 3], grouping: 'min2', inputMode: 'decimal' },
+    integer: { decimals: [0, 0], grouping: 'min2', inputMode: 'numeric' },
+    currency: { decimals: null, grouping: 'always', inputMode: 'decimal' },
+    percent: { decimals: [0, 2], grouping: 'min2', inputMode: 'decimal' },
+};
+/**
+ * First code point of each localized digit run we map back to ASCII:
+ * Arabic-Indic, Extended Arabic-Indic (Persian/Urdu), Devanagari, Bengali,
+ * Thai. Anything outside these still parses in its ASCII form.
+ */
+const DIGIT_ZEROS = [0x0660, 0x06f0, 0x0966, 0x09e6, 0x0e50];
+/** Arabic decimal separator and thousands separator. */
+const ARABIC_DECIMAL = '٫';
+const ARABIC_GROUP = '٬';
+/**
+ * Locale separators plus, when a currency is given, its symbol, side and
+ * fraction digits. Memoized: constructing an `Intl.NumberFormat` is expensive
+ * and a field re-resolves this on every keystroke.
+ */
+const localeNumberParts = memoize((locale, currency) => {
+    const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);
+    const group = parts.find((part) => part.type === 'group')?.value ?? ',';
+    const decimal = parts.find((part) => part.type === 'decimal')?.value ?? '.';
+    if (!currency) {
+        return {
+            group,
+            decimal,
+            currencySymbol: '',
+            currencyLeading: true,
+            currencyDecimals: 2,
+        };
+    }
+    const formatter = new Intl.NumberFormat(locale, { style: 'currency', currency });
+    const currencyParts = formatter.formatToParts(1);
+    const symbolIndex = currencyParts.findIndex((part) => part.type === 'currency');
+    const integerIndex = currencyParts.findIndex((part) => part.type === 'integer');
+    return {
+        group,
+        decimal,
+        currencySymbol: currencyParts[symbolIndex]?.value ?? '',
+        currencyLeading: symbolIndex < integerIndex,
+        currencyDecimals: formatter.resolvedOptions().maximumFractionDigits ?? 2,
+    };
+});
+/**
+ * Map localized digits and Arabic separators to ASCII, so `١٢٣٤٫٥` parses in
+ * `ar` and `१२३४.५` in `hi`.
+ */
+const toAsciiDigits = (text) => {
+    let out = '';
+    for (const char of text) {
+        const code = char.codePointAt(0) ?? 0;
+        const zero = DIGIT_ZEROS.find((start) => code >= start && code <= start + 9);
+        if (zero != null)
+            out += String(code - zero);
+        else if (char === ARABIC_DECIMAL)
+            out += '.';
+        else if (char === ARABIC_GROUP)
+            continue;
+        else
+            out += char;
+    }
+    return out;
+};
+/**
+ * Evaluate `+ − × ÷ ( )` over decimal literals — shunting-yard, roughly thirty
+ * lines, and **never `eval`**. Returns a canonical decimal, or `null` when the
+ * text is not a well-formed expression.
+ *
+ * Floats are acceptable here in a way they are not elsewhere: this is a
+ * convenience path for spreadsheet muscle memory (`12*3`, `100/4+5`), and the
+ * result is settled to ten decimals before re-entering exact arithmetic.
+ * Division is the only operation that can produce a non-terminating decimal,
+ * and no exact representation would help there either.
+ */
+const evaluateExpression = (text) => {
+    const source = text.replace(/×/g, '*').replace(/÷/g, '/').replace(/−/g, '-');
+    if (!/^[\d.\s+\-*/()]+$/.test(source))
+        return null;
+    // A bare number is not an expression — it belongs on the ordinary path.
+    if (!/[\d)]\s*[+\-*/]\s*[\d(.]/.test(source) && !source.includes('('))
+        return null;
+    const tokens = source.match(/\d+\.?\d*|\.\d+|[+\-*/()]/g);
+    if (!tokens)
+        return null;
+    const precedence = { '+': 1, '-': 1, '*': 2, '/': 2 };
+    const output = [];
+    const operators = [];
+    let previous = null;
+    for (const token of tokens) {
+        if (/^[\d.]/.test(token)) {
+            output.push(Number(token));
+        }
+        else if (token === '(') {
+            operators.push(token);
+        }
+        else if (token === ')') {
+            while (operators.length && operators[operators.length - 1] !== '(') {
+                output.push(operators.pop());
+            }
+            if (!operators.length)
+                return null;
+            operators.pop();
+        }
+        else {
+            // Unary minus: push an implicit 0 so `-3` and `(2+-3)` both work.
+            if (token === '-' && (previous === null || previous in precedence || previous === '(')) {
+                output.push(0);
+            }
+            while (operators.length &&
+                precedence[operators[operators.length - 1]] >= precedence[token]) {
+                output.push(operators.pop());
+            }
+            operators.push(token);
+        }
+        previous = token;
+    }
+    while (operators.length) {
+        const operator = operators.pop();
+        if (operator === '(')
+            return null;
+        output.push(operator);
+    }
+    const stack = [];
+    for (const token of output) {
+        if (typeof token === 'number') {
+            stack.push(token);
+            continue;
+        }
+        const right = stack.pop();
+        const left = stack.pop();
+        if (left === undefined || right === undefined)
+            return null;
+        stack.push(token === '+'
+            ? left + right
+            : token === '-'
+                ? left - right
+                : token === '*'
+                    ? left * right
+                    : left / right);
+    }
+    if (stack.length !== 1 || !Number.isFinite(stack[0]))
+        return null;
+    return normalizeDecimal(Number(stack[0].toFixed(10)).toString());
+};
+/** Fill in every preset, locale and currency default. */
+const resolveNumberFormat = (config = {}) => {
+    const presetName = config.currency ? 'currency' : (config.preset ?? 'decimal');
+    const preset = PRESETS$1[presetName];
+    const locale = config.locale || 'en-US';
+    const parts = localeNumberParts(locale, config.currency);
+    const [minimumFractionDigits, maximumFractionDigits] = Array.isArray(config.decimals)
+        ? config.decimals
+        : config.decimals != null
+            ? [config.decimals, config.decimals]
+            : (preset.decimals ?? [parts.currencyDecimals, parts.currencyDecimals]);
+    const isPercent = presetName === 'percent';
+    const isInteger = presetName === 'integer';
+    // Adornments live outside the editable text, so the caret never walks over
+    // them and `prefix`/`suffix` can be any string without becoming parseable.
+    const prefix = config.prefix || (config.currency && parts.currencyLeading ? parts.currencySymbol : '');
+    const suffix = config.suffix ||
+        (config.currency && !parts.currencyLeading ? parts.currencySymbol : '') ||
+        (isPercent ? '%' : '');
+    return {
+        locale,
+        parts,
+        prefix,
+        suffix,
+        minimumFractionDigits,
+        maximumFractionDigits,
+        grouping: config.grouping !== undefined ? config.grouping : preset.grouping,
+        compact: config.numberFormat?.notation === 'compact',
+        isInteger,
+        shift: config.valueIsFraction ? 2 : 0,
+        roundingMode: config.roundingMode ?? 'half-up',
+        inputMode: isInteger && (config.min == null || config.min < 0) ? 'decimal' : preset.inputMode,
+        unitAnnouncement: config.unitAnnouncement,
+    };
+};
+/**
+ * Read a user's text into a canonical decimal in **model units**.
+ *
+ * Accepted, in order: canonical/ASCII (always, whatever the locale — it is
+ * what agents and APIs write), locale-grouped, affixed, localized digits,
+ * compact (`1.5k`), accounting negatives (`(1,234.56)` → `-1234.56`), and
+ * expressions when `allowExpressions` is set.
+ */
+const parseNumber = (raw, format, options = {}) => {
+    const original = toAsciiDigits(String(raw)).trim();
+    if (original === '')
+        return { status: 'empty' };
+    let text = original;
+    const { prefix, suffix, parts } = format;
+    // People paste from spreadsheets: strip this field's own affixes, the
+    // currency symbol and code, and any stray percent sign.
+    if (prefix)
+        text = text.split(prefix).join('');
+    if (suffix)
+        text = text.split(suffix).join('');
+    if (options.currency) {
+        text = text.split(parts.currencySymbol).join('');
+        text = text.replace(new RegExp(options.currency, 'i'), '');
+    }
+    text = text.replace(/%/g, '');
+    // `\s` covers NBSP and the narrow/thin spaces a French copy-paste carries.
+    text = text.replace(/\s/g, '');
+    if (text === '')
+        return { status: 'error', reason: 'unparseable' };
+    // Finance types parentheses for a negative; refusing them is a papercut.
+    let negative = false;
+    const accounting = /^\((.+)\)$/.exec(text);
+    if (accounting) {
+        negative = true;
+        text = accounting[1];
+    }
+    let magnitude = 0;
+    if (format.compact) {
+        const compact = /^(.+?)([kKmMbB])$/.exec(text);
+        if (compact) {
+            text = compact[1];
+            magnitude = { k: 3, m: 6, b: 9 }[compact[2].toLowerCase()];
+        }
+    }
+    let canonical = null;
+    if (isCanonicalDecimal(text)) {
+        canonical = text;
+    }
+    else {
+        const degrouped = text.split(parts.group).join('').split(parts.decimal).join('.');
+        if (isCanonicalDecimal(degrouped)) {
+            canonical = degrouped;
+        }
+        else if (options.allowExpressions) {
+            // Evaluate the ORIGINAL text: parentheses here are grouping, not the
+            // accounting negative stripped above.
+            const evaluated = evaluateExpression(original);
+            if (evaluated != null) {
+                return { status: 'ok', value: shiftDecimal(evaluated, -format.shift), viaExpression: true };
+            }
+        }
+    }
+    if (canonical == null)
+        return { status: 'error', reason: 'unparseable' };
+    canonical = normalizeDecimal(canonical);
+    if (magnitude)
+        canonical = shiftDecimal(canonical, magnitude);
+    if (negative && !canonical.startsWith('-') && canonical !== '0')
+        canonical = `-${canonical}`;
+    if (format.isInteger && decimalScale(canonical) > 0) {
+        return { status: 'error', reason: 'not-integer' };
+    }
+    return { status: 'ok', value: shiftDecimal(canonical, -format.shift), viaExpression: false };
+};
+/** Insert the locale's group separator every three integer digits. */
+const applyGrouping = (integer, separator) => integer.replace(/\B(?=(\d{3})+(?!\d))/g, () => separator);
+/**
+ * Canonical decimal (model units) → the display number, without affixes.
+ *
+ * `min2` grouping — the default — starts at five integer digits, so a year
+ * renders `2026` rather than `2,026` while a price still renders `10,000`.
+ */
+const formatNumber = (canonical, format) => {
+    const display = shiftDecimal(canonical, format.shift);
+    if (format.compact) {
+        return new Intl.NumberFormat(format.locale, {
+            notation: 'compact',
+            maximumFractionDigits: 1,
+        }).format(Number(display));
+    }
+    const rounded = roundDecimal(display, format.maximumFractionDigits, format.roundingMode);
+    const negative = rounded.startsWith('-');
+    const [integerPart, fractionPart = ''] = (negative ? rounded.slice(1) : rounded).split('.');
+    const fraction = fractionPart.padEnd(format.minimumFractionDigits, '0');
+    const grouped = format.grouping === false
+        ? integerPart
+        : format.grouping === 'min2'
+            ? integerPart.length > 4
+                ? applyGrouping(integerPart, format.parts.group)
+                : integerPart
+            : integerPart.length > 3
+                ? applyGrouping(integerPart, format.parts.group)
+                : integerPart;
+    return ((negative ? '-' : '') + grouped + (fraction ? format.parts.decimal + fraction : ''));
+};
+/**
+ * The plain text the field shows while focused: the display number with no
+ * grouping and no affixes, so the caret never has to walk over a separator
+ * that appears and vanishes mid-word.
+ */
+const rawNumberText = (canonical, format) => roundDecimal(shiftDecimal(canonical, format.shift), format.maximumFractionDigits, format.roundingMode);
+/** Round a committed value to the field's precision, in model units. */
+const settleNumber = (canonical, format) => shiftDecimal(rawNumberText(canonical, format), -format.shift);
+/**
+ * The `aria-valuetext` string: the formatted number with its affixes spoken.
+ * `aria-valuenow` alone announces "1234.56", which is the one thing about a
+ * money field that is not the point. An empty field says "Empty" per APG.
+ */
+const speakNumber = (canonical, format, emptyText = 'Empty') => {
+    if (canonical == null)
+        return emptyText;
+    const number = formatNumber(canonical, format);
+    const unit = format.unitAnnouncement || format.suffix;
+    const spoken = unit ? (unit === '%' ? ' percent' : ` ${unit}`) : '';
+    return format.prefix + number + spoken;
+};
+/** Model-units canonical decimal → the bound `number`. */
+const toNumber = (canonical) => Number(canonical);
+/**
+ * True when a value cannot survive the trip through `number` — the reason the
+ * components also expose an exact `valueAsString` model, and the trigger for
+ * the dev-mode warning. Silent precision loss is the whole point of that
+ * second model, so it is worth saying out loud once.
+ *
+ * A `number` can only be checked for magnitude, since it has already lost
+ * whatever it was going to lose. A canonical string can be checked properly:
+ * `'9007199254740993'` comes back as `'9007199254740992'`.
+ */
+const losesPrecision = (value) => {
+    if (typeof value === 'number') {
+        return !Number.isFinite(value) || Math.abs(value) > Number.MAX_SAFE_INTEGER;
+    }
+    const canonical = toDecimal(value);
+    const projected = Number(canonical);
+    return !Number.isFinite(projected) || String(projected) !== canonical;
+};
+
+/**
+ * Hold-to-repeat for stepper buttons: press once to step once, hold to keep
+ * stepping, faster the longer you hold. Getting a quantity from 1 to 200 is
+ * otherwise 199 clicks.
+ *
+ * Like the other cdk helpers this owns **no DOM and attaches no listeners to
+ * an element** — the component's template hands it the events, which keeps the
+ * ARIA and the markup where they belong:
+ *
+ * ```html
+ * <button
+ *   type="button"
+ *   tabindex="-1"
+ *   [disabled]="atMax()"
+ *   (pointerdown)="increment.press($event)"
+ *   (pointerup)="increment.release()"
+ *   (pointercancel)="increment.cancel()"
+ *   (lostpointercapture)="increment.release()"
+ * >
+ * ```
+ *
+ * It does register one `window` blur listener, because a hold that survives
+ * the window losing focus is a value that keeps climbing while the user is
+ * somewhere else. That listener is torn down with the injection context, so
+ * `createPressRepeat` must be called from one — a field initializer, as with
+ * `useTimer()`.
+ */
+/** Milliseconds spent interpolating from `intervalMs` down to `fastIntervalMs`. */
+const RAMP_WINDOW_MS = 500;
+const DEFAULTS = {
+    /** Held this long before repeating starts, so a normal click steps once. */
+    delayMs: 500,
+    /** Repeat period once it starts — 10 steps a second. */
+    intervalMs: 100,
+    /** Repeat period at full speed — 40 steps a second. */
+    fastIntervalMs: 25,
+    /** Held this long before the acceleration begins. */
+    rampMs: 2000,
+};
+function createPressRepeat(config) {
+    const destroyRef = inject(DestroyRef);
+    const holding = signal(false, ...(ngDevMode ? [{ debugName: "holding" }] : /* istanbul ignore next */ []));
+    let timer = null;
+    let startedAt = 0;
+    let repeated = false;
+    const timing = () => ({ ...DEFAULTS, ...config.timing?.() });
+    /** Linear ramp: flat until `rampMs`, then down to `fastIntervalMs`. */
+    const intervalFor = (elapsed) => {
+        const { intervalMs, fastIntervalMs, rampMs } = timing();
+        if (elapsed <= rampMs)
+            return intervalMs;
+        const progress = Math.min(1, (elapsed - rampMs) / RAMP_WINDOW_MS);
+        return intervalMs + (fastIntervalMs - intervalMs) * progress;
+    };
+    const stopTimer = () => {
+        if (timer != null)
+            clearTimeout(timer);
+        timer = null;
+    };
+    const tick = () => {
+        repeated = true;
+        config.onStep(true);
+        // Re-armed rather than set on an interval, so the period can shorten
+        // between ticks as the hold accelerates.
+        timer = setTimeout(tick, intervalFor(Date.now() - startedAt));
+    };
+    const end = (notify) => {
+        stopTimer();
+        if (!holding())
+            return;
+        holding.set(false);
+        const didRepeat = repeated;
+        repeated = false;
+        startedAt = 0;
+        if (notify)
+            config.onRelease?.(didRepeat);
+    };
+    const onWindowBlur = () => end(false);
+    window.addEventListener('blur', onWindowBlur);
+    destroyRef.onDestroy(() => {
+        stopTimer();
+        window.removeEventListener('blur', onWindowBlur);
+    });
+    return {
+        holding: holding.asReadonly(),
+        press(event) {
+            if (config.disabled?.())
+                return;
+            if (holding())
+                return;
+            if (event) {
+                // Keeps the pointer stream on the button even when the finger slides
+                // off it, so `pointerup` still arrives and the run still ends.
+                //
+                // This also suppresses the browser's default focus handling, which is
+                // why `focus` exists: a spinner button that leaves focus nowhere means
+                // the arrow keys stop working the moment you click `+`, exactly when a
+                // user is most likely to reach for them.
+                event.preventDefault();
+                const target = event.currentTarget;
+                // The button is handed over as a fallback, for controls that have no
+                // text field to focus (a read-only quantity stepper, where the buttons
+                // are themselves the tab stops).
+                config.focus?.(target instanceof HTMLElement ? target : null);
+                // jsdom and older engines lack the method entirely.
+                if (target instanceof Element && typeof target.setPointerCapture === 'function') {
+                    try {
+                        target.setPointerCapture(event.pointerId);
+                    }
+                    catch {
+                        // A synthetic or already-released pointer id; the run is still fine.
+                    }
+                }
+            }
+            holding.set(true);
+            repeated = false;
+            startedAt = Date.now();
+            config.onStep(false);
+            if (config.repeat?.() === false)
+                return;
+            timer = setTimeout(tick, timing().delayMs);
+        },
+        release() {
+            end(true);
+        },
+        cancel() {
+            end(false);
+        },
+    };
+}
+
 /**
  * The keyboard and ARIA bookkeeping shared by every combobox-style popup:
  * open state, the active option index, and the `aria-activedescendant` id
@@ -1854,7 +2556,7 @@ class UniCheckboxComponent extends BaseComponent {
     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 */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -2777,6 +3479,20 @@ class UniInputBoxComponent extends BaseComponent {
     width = input(undefined, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     grow = input(undefined, ...(ngDevMode ? [{ debugName: "grow" }] : /* istanbul ignore next */ []));
+    /**
+     * Stop applying the themed leading inset to the inner control, for fields
+     * that place it themselves.
+     *
+     * The inset normally rides the `<input>`, which is right while the text is
+     * the field's leading edge. It is wrong the moment an adornment sits in
+     * front: a currency prefix would hug the border while the number it belongs
+     * to is indented past it. A field with adornments takes the inset over and
+     * puts it on whichever element is actually first.
+     */
+    managedInset = input(false, ...(ngDevMode ? [{ debugName: "managedInset" }] : /* istanbul ignore next */ []));
+    /** Auto-height fields (tag input, textarea) still keep the themed height as
+        a floor, so a single-line field lines up with every other input. */
+    minHeight = computed(() => this.height() === 'auto' ? this.componentOptions().height : undefined, ...(ngDevMode ? [{ debugName: "minHeight" }] : /* 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 */ []));
@@ -2790,7 +3506,9 @@ class UniInputBoxComponent extends BaseComponent {
             '& input, select, textarea': {
                 ...removeInputPlatformStyling,
                 height: '100%',
-                ...this.theme.paddingLeft(this.componentOptions().paddingLeft),
+                ...(this.managedInset()
+                    ? undefined
+                    : this.theme.paddingLeft(this.componentOptions().paddingLeft)),
                 ...this.theme.color(this.componentOptions().textColor),
                 ...this.theme.typeface(this.componentOptions().typeface),
             },
@@ -2824,12 +3542,12 @@ class UniInputBoxComponent extends BaseComponent {
         },
     ]), ...(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 }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", 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  [containerColor]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [width]=\"width()\"\n  [fullWidth]=\"fullWidth()\"\n  [grow]=\"grow()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", isSignal: true, isRequired: false, transformFunction: null }, managedInset: { classPropertyName: "managedInset", publicName: "managedInset", 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  [minHeight]=\"minHeight()\"\n  [containerColor]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [width]=\"width()\"\n  [fullWidth]=\"fullWidth()\"\n  [grow]=\"grow()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: UniRowDirective, 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: [UniRowDirective], 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  [containerColor]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [width]=\"width()\"\n  [fullWidth]=\"fullWidth()\"\n  [grow]=\"grow()\"\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 }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], grow: [{ type: i0.Input, args: [{ isSignal: true, alias: "grow", required: false }] }] } });
+            args: [{ selector: 'uni-input-box', imports: [UniRowDirective], 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  [minHeight]=\"minHeight()\"\n  [containerColor]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [width]=\"width()\"\n  [fullWidth]=\"fullWidth()\"\n  [grow]=\"grow()\"\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 }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], grow: [{ type: i0.Input, args: [{ isSignal: true, alias: "grow", required: false }] }], managedInset: [{ type: i0.Input, args: [{ isSignal: true, alias: "managedInset", required: false }] }] } });
 
 /**
  * Form-bound, closed-set, single-select autocomplete: `FormValueControl<T | null>`
@@ -3240,7 +3958,7 @@ class UniComboboxComponent extends BaseComponent {
         ]);
     }, ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniComboboxComponent, isStandalone: true, selector: "uni-combobox, Combobox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filterLocally: { classPropertyName: "filterLocally", publicName: "filterLocally", isSignal: true, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", query: "query", selected: "selected", cleared: "cleared", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'combobox' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     resolves only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div [class]=\"rowClass()\">\n      <input\n        #field\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        aria-autocomplete=\"list\"\n        [class]=\"inputClass()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [value]=\"displayValue()\"\n        [attr.aria-label]=\"label()\"\n        [attr.aria-expanded]=\"popupOpen()\"\n        [attr.aria-controls]=\"list.listboxId\"\n        [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n        [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n        [attr.aria-invalid]=\"showError() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        (keydown)=\"onKeydown($event)\"\n        (input)=\"onInput()\"\n        (click)=\"onFieldClick()\"\n      />\n      @if (clearable() && value() !== null && !disabled()) {\n        <button\n          icon-button\n          type=\"button\"\n          size=\"sm\"\n          [iconName]=\"componentOptions().clearIcon ?? 'close'\"\n          (click)=\"clear()\"\n        >\n          Clear {{ label() }}\n        </button>\n      }\n      <!-- Pointer-only: keyboard has ArrowDown, the input announces expanded. -->\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [class]=\"toggleClass()\"\n        [disabled]=\"disabled()\"\n        (mousedown)=\"onToggleMousedown($event)\"\n      >\n        <uni-icon [name]=\"componentOptions().toggleIcon ?? 'chevronDown'\" size=\"20\" />\n      </button>\n    </div>\n  </uni-input-box>\n\n  @if (popupOpen()) {\n    <ul\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\n      @if (filteredIndices().length === 0) {\n        <!-- Non-interactive: not an option, not navigable, no id. -->\n        <li class=\"empty\">{{ emptyText() }}</li>\n      } @else {\n        @for (optIndex of filteredIndices(); track optIndex; let i = $index) {\n          <!-- aria-selected marks the *committed* option; the active one is\n               carried by aria-activedescendant \u2014 they are different facts. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <li\n            role=\"option\"\n            [id]=\"list.optionId(i)\"\n            [class.active]=\"i === list.activeIndex()\"\n            [attr.aria-selected]=\"optIndex === committedIndex()\"\n            [attr.aria-disabled]=\"options()[optIndex].disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(optIndex)\"\n          >\n            <span class=\"check\" aria-hidden=\"true\">\n              @if (optIndex === committedIndex()) {\n                <uni-icon [name]=\"componentOptions().selectedIcon ?? 'check'\" size=\"18\" />\n              }\n            </span>\n            <span class=\"text\">\n              <span class=\"option-label\">{{ options()[optIndex].label }}</span>\n              @if (options()[optIndex].description) {\n                <span class=\"desc\">{{ options()[optIndex].description }}</span>\n              }\n            </span>\n          </li>\n        }\n      }\n    </ul>\n  }\n\n  <!-- Commits, clears, refusals and result counts are otherwise silent. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n", dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniComboboxComponent, isStandalone: true, selector: "uni-combobox, Combobox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filterLocally: { classPropertyName: "filterLocally", publicName: "filterLocally", isSignal: true, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", query: "query", selected: "selected", cleared: "cleared", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'combobox' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     resolves only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div [class]=\"rowClass()\">\n      <input\n        #field\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        aria-autocomplete=\"list\"\n        [class]=\"inputClass()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [value]=\"displayValue()\"\n        [attr.aria-label]=\"label()\"\n        [attr.aria-expanded]=\"popupOpen()\"\n        [attr.aria-controls]=\"list.listboxId\"\n        [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n        [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n        [attr.aria-invalid]=\"showError() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        (keydown)=\"onKeydown($event)\"\n        (input)=\"onInput()\"\n        (click)=\"onFieldClick()\"\n      />\n      @if (clearable() && value() !== null && !disabled()) {\n        <button\n          icon-button\n          type=\"button\"\n          size=\"sm\"\n          [iconName]=\"componentOptions().clearIcon ?? 'close'\"\n          (click)=\"clear()\"\n        >\n          Clear {{ label() }}\n        </button>\n      }\n      <!-- Pointer-only: keyboard has ArrowDown, the input announces expanded. -->\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [class]=\"toggleClass()\"\n        [disabled]=\"disabled()\"\n        (mousedown)=\"onToggleMousedown($event)\"\n      >\n        <uni-icon [name]=\"componentOptions().toggleIcon ?? 'chevronDown'\" size=\"20\" />\n      </button>\n    </div>\n  </uni-input-box>\n\n  @if (popupOpen()) {\n    <ul\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\n      @if (filteredIndices().length === 0) {\n        <!-- Non-interactive: not an option, not navigable, no id. -->\n        <li class=\"empty\">{{ emptyText() }}</li>\n      } @else {\n        @for (optIndex of filteredIndices(); track optIndex; let i = $index) {\n          <!-- aria-selected marks the *committed* option; the active one is\n               carried by aria-activedescendant \u2014 they are different facts. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <li\n            role=\"option\"\n            [id]=\"list.optionId(i)\"\n            [class.active]=\"i === list.activeIndex()\"\n            [attr.aria-selected]=\"optIndex === committedIndex()\"\n            [attr.aria-disabled]=\"options()[optIndex].disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(optIndex)\"\n          >\n            <span class=\"check\" aria-hidden=\"true\">\n              @if (optIndex === committedIndex()) {\n                <uni-icon [name]=\"componentOptions().selectedIcon ?? 'check'\" size=\"18\" />\n              }\n            </span>\n            <span class=\"text\">\n              <span class=\"option-label\">{{ options()[optIndex].label }}</span>\n              @if (options()[optIndex].description) {\n                <span class=\"desc\">{{ options()[optIndex].description }}</span>\n              }\n            </span>\n          </li>\n        }\n      }\n    </ul>\n  }\n\n  <!-- Commits, clears, refusals and result counts are otherwise silent. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n", dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniComboboxComponent, decorators: [{
             type: Component,
@@ -4145,7 +4863,7 @@ class UniDateInputComponent extends BaseComponent {
         ]);
     }, ...(ngDevMode ? [{ debugName: "embeddedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDateInputComponent, isStandalone: true, selector: "uni-date-input, DateInput", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, parse: { classPropertyName: "parse", publicName: "parse", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", opened: "opened", closed: "closed", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dateInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "toggleRef", first: true, predicate: ["toggle"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popupRef", first: true, predicate: ["popupDialog"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: UniDropdownComponent, descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: UniCalendarComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so commits happen only when focus\n     leaves the whole field, not while moving into the popup. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <!-- The dropdown wires aria-haspopup/aria-expanded/aria-controls onto\n           this button; its name tracks the value (\"Change date, \u2026\"). -->\n      <button\n        #toggle\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'calendar_month'\"\n        [disable]=\"disabled()\"\n      >\n        {{ toggleLabel() }}\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (toggleElement()) {\n    <uni-dropdown\n      [trigger]=\"toggleElement()!\"\n      ariaHasPopup=\"dialog\"\n      placement=\"bottom-end\"\n      [containerColor]=\"componentOptions().popupColor ?? 'primary-surface'\"\n      [shadow]=\"componentOptions().popupShadow ?? 'menu'\"\n      [borderRadius]=\"componentOptions().popupBorderRadius ?? 'xs'\"\n      paddingVertical=\"xs\"\n      paddingHorizontal=\"xs\"\n      (dropdownShowing)=\"onPopupShowing()\"\n      (dropdownHiding)=\"onPopupHiding()\"\n    >\n      <!-- A focus-holding dialog per the APG date-picker pattern: Tab cycles\n           inside, Escape closes and returns focus to the field. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n      <div #popupDialog role=\"dialog\" aria-label=\"Choose date\" (keydown)=\"onPopupKeydown($event)\">\n        <uni-calendar\n          mode=\"single\"\n          [value]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [disabledDates]=\"disabledDates()\"\n          [markers]=\"markers()\"\n          [weekStart]=\"weekStart()\"\n          [locale]=\"locale()\"\n          (selected)=\"onCalendarPick($event)\"\n        />\n      </div>\n    </uni-dropdown>\n  }\n\n  <!-- Commits, steps and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniCalendarComponent, selector: "uni-calendar, Calendar", inputs: ["value", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "mode", "month", "minDate", "maxDate", "disabledDates", "markers", "locale", "weekStart", "ariaLabel", "size"], outputs: ["valueChange", "touchedChange", "monthChange", "selected"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "containerColor"], 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", "width", "fullWidth", "grow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDateInputComponent, isStandalone: true, selector: "uni-date-input, DateInput", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, parse: { classPropertyName: "parse", publicName: "parse", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", opened: "opened", closed: "closed", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dateInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "toggleRef", first: true, predicate: ["toggle"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popupRef", first: true, predicate: ["popupDialog"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: UniDropdownComponent, descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: UniCalendarComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so commits happen only when focus\n     leaves the whole field, not while moving into the popup. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <!-- The dropdown wires aria-haspopup/aria-expanded/aria-controls onto\n           this button; its name tracks the value (\"Change date, \u2026\"). -->\n      <button\n        #toggle\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'calendar_month'\"\n        [disable]=\"disabled()\"\n      >\n        {{ toggleLabel() }}\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (toggleElement()) {\n    <uni-dropdown\n      [trigger]=\"toggleElement()!\"\n      ariaHasPopup=\"dialog\"\n      placement=\"bottom-end\"\n      [containerColor]=\"componentOptions().popupColor ?? 'primary-surface'\"\n      [shadow]=\"componentOptions().popupShadow ?? 'menu'\"\n      [borderRadius]=\"componentOptions().popupBorderRadius ?? 'xs'\"\n      paddingVertical=\"xs\"\n      paddingHorizontal=\"xs\"\n      (dropdownShowing)=\"onPopupShowing()\"\n      (dropdownHiding)=\"onPopupHiding()\"\n    >\n      <!-- A focus-holding dialog per the APG date-picker pattern: Tab cycles\n           inside, Escape closes and returns focus to the field. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n      <div #popupDialog role=\"dialog\" aria-label=\"Choose date\" (keydown)=\"onPopupKeydown($event)\">\n        <uni-calendar\n          mode=\"single\"\n          [value]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [disabledDates]=\"disabledDates()\"\n          [markers]=\"markers()\"\n          [weekStart]=\"weekStart()\"\n          [locale]=\"locale()\"\n          (selected)=\"onCalendarPick($event)\"\n        />\n      </div>\n    </uni-dropdown>\n  }\n\n  <!-- Commits, steps and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniCalendarComponent, selector: "uni-calendar, Calendar", inputs: ["value", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "mode", "month", "minDate", "maxDate", "disabledDates", "markers", "locale", "weekStart", "ariaLabel", "size"], outputs: ["valueChange", "touchedChange", "monthChange", "selected"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "containerColor"], 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", "width", "fullWidth", "grow", "managedInset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDateInputComponent, decorators: [{
             type: Component,
@@ -4469,7 +5187,7 @@ class UniTimeInputComponent extends BaseComponent {
         }));
     }, ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTimeInputComponent, isStandalone: true, selector: "uni-time-input, TimeInput", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'timeInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     commits only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      aria-autocomplete=\"list\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-expanded]=\"list.open()\"\n      [attr.aria-controls]=\"list.listboxId\"\n      [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <button\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        aria-haspopup=\"listbox\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'schedule'\"\n        [attr.aria-expanded]=\"list.open()\"\n        [disable]=\"disabled()\"\n        (click)=\"onToggle()\"\n      >\n        Choose time\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (list.open()) {\n    <ul\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\n      @for (time of options(); track time; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"time === value()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectOption(time)\"\n        >\n          {{ optionLabels()[i] }}\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Commits and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTimeInputComponent, isStandalone: true, selector: "uni-time-input, TimeInput", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'timeInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes and the draft\n     commits only when focus leaves the whole field. -->\n<div (focusout)=\"onFocusOut($event)\">\n  <ng-template #parts>\n    <input\n      #field\n      type=\"text\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      aria-autocomplete=\"list\"\n      [class]=\"inputClass()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"displayText()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-expanded]=\"list.open()\"\n      [attr.aria-controls]=\"list.listboxId\"\n      [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n      [attr.aria-invalid]=\"showError() || draftInvalid() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (keydown)=\"onInputKeydown($event)\"\n      (input)=\"onInput()\"\n    />\n    <span [class]=\"toggleWrapClass()\">\n      <button\n        icon-button\n        type=\"button\"\n        size=\"sm\"\n        aria-haspopup=\"listbox\"\n        [symbolName]=\"componentOptions().toggleSymbol ?? 'schedule'\"\n        [attr.aria-expanded]=\"list.open()\"\n        [disable]=\"disabled()\"\n        (click)=\"onToggle()\"\n      >\n        Choose time\n      </button>\n    </span>\n  </ng-template>\n\n  @if (embedded()) {\n    <!-- A composer (uni-date-time-input) owns the field chrome. -->\n    <div [class]=\"embeddedClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n  } @else {\n    <uni-input-box [error]=\"showError() || draftInvalid()\" [disabled]=\"disabled()\">\n      <div [class]=\"rowClass()\"><ng-container [ngTemplateOutlet]=\"parts\" /></div>\n    </uni-input-box>\n  }\n\n  @if (list.open()) {\n    <ul\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\n      @for (time of options(); track time; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"time === value()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectOption(time)\"\n        >\n          {{ optionLabels()[i] }}\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Commits and rejections are otherwise a silent reformat. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTimeInputComponent, decorators: [{
             type: Component,
@@ -4602,7 +5320,7 @@ class UniDateTimeInputComponent extends BaseComponent {
         });
     }, ...(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", "width", "fullWidth", "grow"] }, { 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 });
+    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", "width", "fullWidth", "grow", "managedInset"] }, { 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,
@@ -4616,7 +5334,7 @@ class UniInputComponent {
     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 */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -4632,7 +5350,7 @@ class UniInputComponent {
      */
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     // --- CONSTRAINTS ---
-    // These are Signal Forms' own optional control inputs, so the `[field]`
+    // These are Signal Forms' own optional control inputs, so the `[formField]`
     // directive syncs them from the field's validators the same way it syncs
     // `required` — and they are reflected onto the native element so the browser
     // can do its part (number steppers, length limits, on-screen keyboards).
@@ -4679,7 +5397,7 @@ class UniInputComponent {
     }
     inputClass = css({});
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputComponent, isStandalone: true, selector: "uni-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" [width]=\"width()\" [fullWidth]=\"fullWidth()\" [grow]=\"grow()\">\n  <ng-content select=\"pre-input, [pre-input]\" />\n  <input\n    [type]=\"type()\"\n    [value]=\"value()\"\n    (input)=\"handleInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (blur)=\"markAsTouched()\"\n    [class]=\"inputClass\"\n    [attr.name]=\"name() || null\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [attr.inputmode]=\"inputMode() || null\"\n    [attr.list]=\"list() || null\"\n    [attr.min]=\"min() ?? null\"\n    [attr.max]=\"max() ?? null\"\n    [attr.step]=\"step() ?? null\"\n    [attr.minlength]=\"minLength() ?? null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.pattern]=\"nativePattern()\"\n    [attr.spellcheck]=\"spellcheck() ?? null\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <ng-content select=\"post-input, [post-input]\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputComponent, isStandalone: true, selector: "uni-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" [width]=\"width()\" [fullWidth]=\"fullWidth()\" [grow]=\"grow()\">\n  <ng-content select=\"pre-input, [pre-input]\" />\n  <input\n    [type]=\"type()\"\n    [value]=\"value()\"\n    (input)=\"handleInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (blur)=\"markAsTouched()\"\n    [class]=\"inputClass\"\n    [attr.name]=\"name() || null\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [attr.inputmode]=\"inputMode() || null\"\n    [attr.list]=\"list() || null\"\n    [attr.min]=\"min() ?? null\"\n    [attr.max]=\"max() ?? null\"\n    [attr.step]=\"step() ?? null\"\n    [attr.minlength]=\"minLength() ?? null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.pattern]=\"nativePattern()\"\n    [attr.spellcheck]=\"spellcheck() ?? null\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <ng-content select=\"post-input, [post-input]\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputComponent, decorators: [{
             type: Component,
@@ -4853,7 +5571,7 @@ class UniMultiSelectDropdownComponent extends BaseComponent {
     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 */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -5004,7 +5722,7 @@ class UniMultiSelectDropdownComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectDropdownComponent, isStandalone: true, selector: "uni-multi-select-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRow"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  @if (label(); as fieldLabel) {\n    <span [class]=\"srOnly\">{{ fieldLabel }},</span>\n  }\n  <span [class]=\"srOnly\">{{ selectionSummary() }}</span>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <span uni-text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</span>\n      <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  ariaHasPopup=\"dialog\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n  <div (keydown)=\"onPanelKeydown($event)\">\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass()\"\n      [value]=\"query()\"\n      (input)=\"handleQueryInput($event)\"\n      placeholder=\"Search...\"\n      aria-label=\"Filter options\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div\n    stack-layout\n    gap=\"xs\"\n    padding=\"xs\"\n    role=\"group\"\n    [attr.aria-label]=\"label() ? label() + ' options' : 'Options'\"\n  >\n    @for (option of filteredOptions(); track option.value; let i = $index) {\n      <div #optionRow (focusin)=\"onOptionFocus(i)\">\n        <uni-checkbox\n          [label]=\"option.label\"\n          [checked]=\"isOptionSelected(option)()\"\n          (checkedChange)=\"toggleOption(option, $event)\"\n          variant=\"primary\"\n          [disabled]=\"disabled() || !!option.disabled\"\n        >\n        </uni-checkbox>\n      </div>\n    }\n    @if (filteredOptions().length === 0) {\n      <span uni-text=\"label\" role=\"status\">No options match.</span>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n  </div>\n  </div>\n</uni-dropdown>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "containerColor"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "directive", type: UniStackDirective, selector: "[uni-stack-layout], [stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectDropdownComponent, isStandalone: true, selector: "uni-multi-select-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRow"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  @if (label(); as fieldLabel) {\n    <span [class]=\"srOnly\">{{ fieldLabel }},</span>\n  }\n  <span [class]=\"srOnly\">{{ selectionSummary() }}</span>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <span uni-text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</span>\n      <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  ariaHasPopup=\"dialog\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n  <div (keydown)=\"onPanelKeydown($event)\">\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass()\"\n      [value]=\"query()\"\n      (input)=\"handleQueryInput($event)\"\n      placeholder=\"Search...\"\n      aria-label=\"Filter options\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div\n    stack-layout\n    gap=\"xs\"\n    padding=\"xs\"\n    role=\"group\"\n    [attr.aria-label]=\"label() ? label() + ' options' : 'Options'\"\n  >\n    @for (option of filteredOptions(); track option.value; let i = $index) {\n      <div #optionRow (focusin)=\"onOptionFocus(i)\">\n        <uni-checkbox\n          [label]=\"option.label\"\n          [checked]=\"isOptionSelected(option)()\"\n          (checkedChange)=\"toggleOption(option, $event)\"\n          variant=\"primary\"\n          [disabled]=\"disabled() || !!option.disabled\"\n        >\n        </uni-checkbox>\n      </div>\n    }\n    @if (filteredOptions().length === 0) {\n      <span uni-text=\"label\" role=\"status\">No options match.</span>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n  </div>\n  </div>\n</uni-dropdown>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "containerColor"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "directive", type: UniStackDirective, selector: "[uni-stack-layout], [stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectDropdownComponent, decorators: [{
             type: Component,
@@ -5084,7 +5802,7 @@ class UniRadioComponent extends BaseComponent {
     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 */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -5274,7 +5992,7 @@ class UniDebounceInputComponent {
         minWidth: 0,
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDebounceInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniDebounceInputComponent, isStandalone: true, selector: "uni-debounce-input", inputs: { inputName: { classPropertyName: "inputName", publicName: "inputName", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "ariaExpanded", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, ariaActivedescendant: { classPropertyName: "ariaActivedescendant", publicName: "ariaActivedescendant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: "<uni-input-box>\n  <ng-content select=\"[pre-input]\" />\n  <input\n    #field\n    [class]=\"inputClass\"\n    [type]=\"type()\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [attr.inputmode]=\"inputMode() || null\"\n    [name]=\"inputName()\"\n    [id]=\"inputId()\"\n    [value]=\"value() ?? ''\"\n    (input)=\"handleInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"label() || null\"\n    [attr.role]=\"role() || null\"\n    [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n    [attr.aria-controls]=\"ariaControls() || null\"\n    [attr.aria-activedescendant]=\"ariaActivedescendant() || null\"\n    [attr.aria-autocomplete]=\"role() === 'combobox' ? 'list' : null\"\n  />\n  <ng-content select=\"[post-input]\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniDebounceInputComponent, isStandalone: true, selector: "uni-debounce-input", inputs: { inputName: { classPropertyName: "inputName", publicName: "inputName", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "ariaExpanded", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, ariaActivedescendant: { classPropertyName: "ariaActivedescendant", publicName: "ariaActivedescendant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: "<uni-input-box>\n  <ng-content select=\"[pre-input]\" />\n  <input\n    #field\n    [class]=\"inputClass\"\n    [type]=\"type()\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [attr.inputmode]=\"inputMode() || null\"\n    [name]=\"inputName()\"\n    [id]=\"inputId()\"\n    [value]=\"value() ?? ''\"\n    (input)=\"handleInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"label() || null\"\n    [attr.role]=\"role() || null\"\n    [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n    [attr.aria-controls]=\"ariaControls() || null\"\n    [attr.aria-activedescendant]=\"ariaActivedescendant() || null\"\n    [attr.aria-autocomplete]=\"role() === 'combobox' ? 'list' : null\"\n  />\n  <ng-content select=\"[post-input]\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDebounceInputComponent, decorators: [{
             type: Component,
@@ -5395,7 +6113,7 @@ class UniSelectComponent {
     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 */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -5461,7 +6179,7 @@ class UniSelectComponent {
         pointerEvents: 'none' /* Crucial for clicking through */,
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSelectComponent, isStandalone: true, selector: "uni-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" [class]=\"selectClass\" [width]=\"width()\" [fullWidth]=\"fullWidth()\" [grow]=\"grow()\">\n  <select\n    [disabled]=\"disabled()\"\n    [value]=\"currentSelectedIndex()\"\n    (change)=\"handleSelectChange($event)\"\n    (blur)=\"touched.set(true)\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  >\n    @if (placeholder()) {\n      <option [value]=\"UNSELECTED\" disabled selected>\n        {{ placeholder() }}\n      </option>\n    }\n\n    @for (opt of options(); track opt.label; let i = $index) {\n      <!-- [selected] evaluates during the option's own render, so a selection\n           pointing at an option added in the same change-detection pass still\n           applies (the select-level [value] write lands before new options\n           exist and is ignored by the browser). -->\n      <option\n        [value]=\"i\"\n        [selected]=\"currentSelectedIndex() === i.toString()\"\n        [disabled]=\"opt.disabled ?? false\"\n      >\n        {{ opt.label }}\n      </option>\n    }\n  </select>\n  <uni-symbol name=\"keyboard_arrow_down\" [class]=\"arrowClass\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSelectComponent, isStandalone: true, selector: "uni-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" [class]=\"selectClass\" [width]=\"width()\" [fullWidth]=\"fullWidth()\" [grow]=\"grow()\">\n  <select\n    [disabled]=\"disabled()\"\n    [value]=\"currentSelectedIndex()\"\n    (change)=\"handleSelectChange($event)\"\n    (blur)=\"touched.set(true)\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  >\n    @if (placeholder()) {\n      <option [value]=\"UNSELECTED\" disabled selected>\n        {{ placeholder() }}\n      </option>\n    }\n\n    @for (opt of options(); track opt.label; let i = $index) {\n      <!-- [selected] evaluates during the option's own render, so a selection\n           pointing at an option added in the same change-detection pass still\n           applies (the select-level [value] write lands before new options\n           exist and is ignored by the browser). -->\n      <option\n        [value]=\"i\"\n        [selected]=\"currentSelectedIndex() === i.toString()\"\n        [disabled]=\"opt.disabled ?? false\"\n      >\n        {{ opt.label }}\n      </option>\n    }\n  </select>\n  <uni-symbol name=\"keyboard_arrow_down\" [class]=\"arrowClass\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSelectComponent, decorators: [{
             type: Component,
@@ -5469,138 +6187,1981 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], grow: [{ type: i0.Input, args: [{ isSignal: true, alias: "grow", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**
- * Range slider on a native `<input type="range">` — keyboard interaction and
- * the ARIA slider contract come from the platform. Fill, track, thumb and
- * radii resolve from `slider` theme tokens; the fill percentage rides a CSS
- * custom property so dragging never regenerates styles.
+ * Numeric field with locale-aware parsing, `Intl` formatting on commit,
+ * prefix/suffix adornments and steppers that hold to repeat.
+ *
+ * Not `<input type="number">`, and the first reason is a data-loss bug: per the
+ * HTML value sanitization algorithm, a number input whose text is not a valid
+ * floating-point number reports `value === ''`. Type `12,50` as most of Europe
+ * does, or paste `1,234.56` from a spreadsheet, and the app reads an empty
+ * field. This is `type="text"` with `role="spinbutton"`, which is the only way
+ * to keep the user's malformed text on screen and tell them about it.
+ *
+ * Chrome comes from `uni-input-box`, so error, disabled and focus states match
+ * every other field. All arithmetic runs on the cdk's exact decimal helpers.
  */
-class UniSliderComponent extends BaseComponent {
-    // --- REQUIRED SIGNALS (populated by FormValueControl) ---
-    value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+class UniNumberInputComponent extends BaseComponent {
+    // --- Signal Forms block (explicit per AGENTS.md, not a base class) --------
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
     /**
-     * Id(s) of external element(s) describing this control — typically your
-     * app-rendered value or error text — exposed as aria-describedby.
+     * Exact binding, as a canonical decimal string. Bind this instead of `value`
+     * where a cent in the fifth decimal place matters; both stay in sync, so it
+     * is a one-word change from the ordinary case.
      */
-    ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
-    // --- CONFIGURATION ---
+    valueAsString = model(null, ...(ngDevMode ? [{ debugName: "valueAsString" }] : /* istanbul ignore next */ []));
+    // --- Configuration -------------------------------------------------------
+    /** Accessible name, e.g. "Unit price". */
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    // `min`/`max` are part of the FormValueControl contract (synced from
-    // min()/max() validators), so their type must admit undefined.
-    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
-    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    preset = input('decimal', ...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
+    /** ISO 4217 code, e.g. `'USD'`. Implies `preset="currency"`. */
+    currency = input(...(ngDevMode ? [undefined, { debugName: "currency" }] : /* istanbul ignore next */ []));
+    /** BCP 47 tag. Defaults to the document language, then the browser's. */
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** Static adornment before the number, e.g. `'$'`. Never parseable input. */
+    prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
+    /** Static adornment after the number, e.g. `'kg'`, `'/mo'`. */
+    suffix = input(...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
+    decimals = input(...(ngDevMode ? [undefined, { debugName: "decimals" }] : /* istanbul ignore next */ []));
+    grouping = input(...(ngDevMode ? [undefined, { debugName: "grouping" }] : /* istanbul ignore next */ []));
+    /** Escape hatch, merged over the preset. */
+    numberFormat = input(...(ngDevMode ? [undefined, { debugName: "numberFormat" }] : /* istanbul ignore next */ []));
+    roundingMode = input('half-up', ...(ngDevMode ? [{ debugName: "roundingMode" }] : /* istanbul ignore next */ []));
+    align = input(...(ngDevMode ? [undefined, { debugName: "align" }] : /* istanbul ignore next */ []));
+    /** The model is a fraction: `0.15` displays as `15%`. */
+    valueIsFraction = input(false, ...(ngDevMode ? [{ debugName: "valueIsFraction" }] : /* istanbul ignore next */ []));
+    /** Spoken long form of an abbreviated suffix, e.g. `'kilograms'` for `kg`. */
+    unitAnnouncement = input(...(ngDevMode ? [undefined, { debugName: "unitAnnouncement" }] : /* istanbul ignore next */ []));
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    /** Renders without its own input-box chrome, for composers like uni-slider. */
+    embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : /* istanbul ignore next */ []));
+    // --- Range and stepping --------------------------------------------------
+    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
     step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
-    resolvedMin = computed(() => this.min() ?? 0, ...(ngDevMode ? [{ debugName: "resolvedMin" }] : /* istanbul ignore next */ []));
-    resolvedMax = computed(() => this.max() ?? 100, ...(ngDevMode ? [{ debugName: "resolvedMax" }] : /* istanbul ignore next */ []));
-    markAsTouched() {
-        this.touched.set(true);
+    /** `PageUp`/`PageDown` and `Shift+Arrow`. Default: `step × 10`. */
+    largeStep = input(...(ngDevMode ? [undefined, { debugName: "largeStep" }] : /* istanbul ignore next */ []));
+    /** `Alt+Arrow`, Figma's fine-nudge convention. Unset disables it. */
+    smallStep = input(...(ngDevMode ? [undefined, { debugName: "smallStep" }] : /* istanbul ignore next */ []));
+    stepOrigin = input('min', ...(ngDevMode ? [{ debugName: "stepOrigin" }] : /* istanbul ignore next */ []));
+    /** Cyclic fields only — 23 → 0 hours, 359 → 0 degrees. */
+    wrap = input(false, ...(ngDevMode ? [{ debugName: "wrap" }] : /* istanbul ignore next */ []));
+    /** `false` refuses an out-of-range commit instead of clamping it. */
+    clampOnCommit = input(true, ...(ngDevMode ? [{ debugName: "clampOnCommit" }] : /* istanbul ignore next */ []));
+    /** What ↑ commits on an empty field. Default: `min ?? 0`. */
+    emptyStepValue = input(...(ngDevMode ? [undefined, { debugName: "emptyStepValue" }] : /* istanbul ignore next */ []));
+    // --- Entry behaviour -----------------------------------------------------
+    commitOnBlur = input(true, ...(ngDevMode ? [{ debugName: "commitOnBlur" }] : /* istanbul ignore next */ []));
+    selectOnFocus = input(false, ...(ngDevMode ? [{ debugName: "selectOnFocus" }] : /* istanbul ignore next */ []));
+    /** `12*3` → 36. Off by default: a parser in a form field is a real cost. */
+    allowExpressions = input(false, ...(ngDevMode ? [{ debugName: "allowExpressions" }] : /* istanbul ignore next */ []));
+    /** Scroll-to-step. Off by default — see `onWheel`. */
+    wheel = input(false, ...(ngDevMode ? [{ debugName: "wheel" }] : /* istanbul ignore next */ []));
+    repeat = input(true, ...(ngDevMode ? [{ debugName: "repeat" }] : /* istanbul ignore next */ []));
+    /** Custom parser, replacing the built-in locale parsing. */
+    parse = input(...(ngDevMode ? [undefined, { debugName: "parse" }] : /* istanbul ignore next */ []));
+    /** Overrides the themed layout for this instance. */
+    stepperLayout = input(...(ngDevMode ? [undefined, { debugName: "stepperLayout" }] : /* istanbul ignore next */ []));
+    // --- Events --------------------------------------------------------------
+    stepped = output();
+    /** A commit was refused; the raw text stays in the field. */
+    rejected = output();
+    inputRef = viewChild.required('field');
+    srOnly = css(visuallyHidden);
+    /** Clamps, fences, rejections and expression results are otherwise silent. */
+    announcer = createAnnouncer();
+    hintId = uniqueId('uni-number-input-hint');
+    /** Uncommitted text. `null` means "show the committed value". */
+    draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    /** A commit that failed — styles the field until the text is edited. */
+    draftInvalid = signal(false, ...(ngDevMode ? [{ debugName: "draftInvalid" }] : /* istanbul ignore next */ []));
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /**
+     * The canonical decimal behind both models — the field's source of truth.
+     *
+     * Two models that each accept writes need a rule for which one won, and
+     * "whichever the app touched last" is the only one that does not surprise
+     * somebody. A `linkedSignal` over both gives us that: the model whose value
+     * differs from the previous source is the one that changed.
+     *
+     * The subtlety is the echo. Committing writes both models, and the `value`
+     * projection of a 17-digit exact string is lossy — so on the next pass
+     * `value` looks changed, and naively adopting it would clobber the very
+     * precision `valueAsString` exists to keep. A changed `value` that already
+     * matches `Number(exact)` is our own projection coming back, not a write.
+     */
+    canonical = linkedSignal({ ...(ngDevMode ? { debugName: "canonical" } : /* istanbul ignore next */ {}), source: () => ({ value: this.value(), exact: this.valueAsString() }),
+        computation: (source, previous) => {
+            const prior = previous?.source;
+            if (prior && source.exact !== prior.exact)
+                return source.exact;
+            if (prior && source.value !== prior.value) {
+                if (source.exact != null && Number(source.exact) === source.value)
+                    return source.exact;
+                return source.value == null ? null : toDecimal(source.value);
+            }
+            if (source.exact != null)
+                return source.exact;
+            return source.value == null ? null : toDecimal(source.value);
+        } });
+    constructor() {
+        super();
+        // A hybrid device can gain or lose a coarse pointer mid-session.
+        if (typeof matchMedia === 'function') {
+            const query = matchMedia('(pointer: coarse)');
+            const onChange = () => this.coarsePointer.set(query.matches);
+            query.addEventListener('change', onChange);
+            inject(DestroyRef).onDestroy(() => query.removeEventListener('change', onChange));
+        }
+        // Keep both models reflecting the source of truth, so an app that binds
+        // only one of them still reads a consistent value from the other.
+        effect(() => {
+            const canonical = this.canonical();
+            untracked(() => {
+                if (this.valueAsString() !== canonical)
+                    this.valueAsString.set(canonical);
+                const projected = canonical == null ? null : Number(canonical);
+                if (this.value() !== projected)
+                    this.value.set(projected);
+            });
+        });
+        // Silent precision loss is the whole reason `valueAsString` exists, so it
+        // is worth saying out loud — once, in dev, per offending value.
+        if (isDevMode()) {
+            let warned = null;
+            effect(() => {
+                const exact = this.valueAsString();
+                const value = this.value();
+                const subject = exact ?? value;
+                if (subject == null)
+                    return;
+                const key = String(subject);
+                if (key === warned || !losesPrecision(subject))
+                    return;
+                warned = key;
+                console.warn(`[uni-number-input] "${this.label()}": ${key} cannot round-trip through a JavaScript number. ` +
+                    'Bind [(valueAsString)] instead of [(value)] to keep it exact.');
+            });
+        }
     }
-    handleInput(event) {
-        this.value.set(Number(event.target.value));
+    // --- Format resolution ----------------------------------------------------
+    resolvedLocale = computed(() => this.locale() ?? (document.documentElement.lang || navigator.language || 'en-US'), ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
+    format = computed(() => resolveNumberFormat({
+        preset: this.preset(),
+        currency: this.currency(),
+        locale: this.resolvedLocale(),
+        decimals: this.decimals(),
+        grouping: this.grouping(),
+        prefix: this.prefix(),
+        suffix: this.suffix(),
+        roundingMode: this.roundingMode(),
+        valueIsFraction: this.valueIsFraction(),
+        numberFormat: this.numberFormat(),
+        min: this.min(),
+        unitAnnouncement: this.unitAnnouncement(),
+    }), ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /**
+     * Two stacked arrows cannot both be 24px tall inside a 32px field, so on a
+     * coarse pointer the stacked layout becomes `split`, where each button is a
+     * full-height square and clears the WCAG 2.2 SC 2.5.8 floor. Two 12px
+     * targets under a fingertip is a coin toss.
+     */
+    coarsePointer = signal(typeof matchMedia === 'function' ? matchMedia('(pointer: coarse)').matches : false, ...(ngDevMode ? [{ debugName: "coarsePointer" }] : /* istanbul ignore next */ []));
+    layout = computed(() => {
+        const requested = this.stepperLayout() ?? this.componentOptions().stepperLayout ?? 'stacked';
+        return requested === 'stacked' && this.coarsePointer() ? 'split' : requested;
+    }, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    showSteppers = computed(() => this.layout() !== 'none' && !this.readOnly(), ...(ngDevMode ? [{ debugName: "showSteppers" }] : /* istanbul ignore next */ []));
+    showError = computed(() => (this.invalid() && (this.touched() || this.dirty())) || this.draftInvalid(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    /** Raw while focused, formatted once committed — no caret arithmetic ever. */
+    displayText = computed(() => {
+        const draft = this.draft();
+        if (draft != null)
+            return draft;
+        const canonical = this.canonical();
+        if (canonical == null)
+            return '';
+        return this.focused()
+            ? rawNumberText(canonical, this.format())
+            : formatNumber(canonical, this.format());
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+    valueTextForAria = computed(() => speakNumber(this.canonical(), this.format()), ...(ngDevMode ? [{ debugName: "valueTextForAria" }] : /* istanbul ignore next */ []));
+    /**
+     * `aria-valuenow` is omitted entirely on an empty field, per APG — a
+     * spinbutton reporting 0 for "nothing yet" is a wrong answer, not a missing
+     * one. `aria-valuetext` carries the localized "Empty" instead.
+     */
+    canonicalForAria = computed(() => this.canonical() ?? null, ...(ngDevMode ? [{ debugName: "canonicalForAria" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => [this.ariaDescribedBy(), this.hintId].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    // --- Fences ---------------------------------------------------------------
+    atFence(which) {
+        const bound = which === 'min' ? this.min() : this.max();
+        const canonical = this.canonical();
+        if (bound == null || canonical == null)
+            return false;
+        const clamped = clampDecimal(canonical, this.min(), this.max());
+        if (clamped.hit === which)
+            return true;
+        return which === 'min'
+            ? Number(canonical) <= bound
+            : Number(canonical) >= bound;
     }
-    fillPercent = computed(() => {
-        const min = this.resolvedMin();
-        const range = this.resolvedMax() - min;
-        if (range <= 0)
-            return '0%';
-        const ratio = (this.value() - min) / range;
-        return `${Math.min(100, Math.max(0, ratio * 100))}%`;
-    }, ...(ngDevMode ? [{ debugName: "fillPercent" }] : /* istanbul ignore next */ []));
-    inputClass = computed(() => {
+    atMin = computed(() => this.atFence('min') && !this.wrap(), ...(ngDevMode ? [{ debugName: "atMin" }] : /* istanbul ignore next */ []));
+    atMax = computed(() => this.atFence('max') && !this.wrap(), ...(ngDevMode ? [{ debugName: "atMax" }] : /* istanbul ignore next */ []));
+    // --- Committing -----------------------------------------------------------
+    /** Set the source of truth; the constructor's effect pushes it to both models. */
+    write(canonical) {
+        this.canonical.set(canonical);
+    }
+    /**
+     * Turn the draft into a value. Out-of-range either clamps (announced) or is
+     * refused, per `clampOnCommit`; unreadable text stays in the field, flagged.
+     */
+    commitDraft() {
+        const draft = this.draft();
+        if (draft == null)
+            return;
+        const custom = this.parse();
+        if (custom) {
+            const parsed = custom(draft, this.resolvedLocale());
+            if (parsed == null)
+                return this.reject(draft, 'unparseable');
+            return this.acceptValue(parsed, false);
+        }
+        const result = parseNumber(draft, this.format(), {
+            allowExpressions: this.allowExpressions(),
+            currency: this.currency(),
+        });
+        if (result.status === 'empty') {
+            this.draft.set(null);
+            this.draftInvalid.set(false);
+            this.write(null);
+            return;
+        }
+        if (result.status === 'error')
+            return this.reject(draft, result.reason);
+        this.acceptValue(result.value, result.viaExpression);
+    }
+    acceptValue(parsed, viaExpression) {
+        const settled = settleNumber(parsed, this.format());
+        const clamped = clampDecimal(settled, this.min(), this.max());
+        if (clamped.hit && !this.clampOnCommit()) {
+            return this.reject(this.draft() ?? settled, clamped.hit);
+        }
+        this.draft.set(null);
+        this.draftInvalid.set(false);
+        this.write(clamped.value);
+        if (clamped.hit) {
+            const bound = clamped.hit === 'min' ? this.min() : this.max();
+            this.announcer.announce(`${clamped.hit === 'min' ? 'Minimum' : 'Maximum'} is ${bound}. Value set to ${bound}.`);
+        }
+        else if (viaExpression) {
+            this.announcer.announce(`${formatNumber(clamped.value, this.format())}.`);
+        }
+    }
+    reject(raw, reason) {
+        this.draftInvalid.set(true);
+        this.rejected.emit({ raw, reason });
+        this.announcer.announce(this.rejectionMessage(raw, reason));
+    }
+    rejectionMessage(raw, reason) {
+        switch (reason) {
+            case 'min':
+                return `${raw} is below the minimum of ${this.min()}.`;
+            case 'max':
+                return `${raw} is above the maximum of ${this.max()}.`;
+            case 'not-integer':
+                return `${raw} must be a whole number.`;
+            default:
+                return `${raw} is not a number.`;
+        }
+    }
+    // --- Stepping -------------------------------------------------------------
+    stepSize(magnitude) {
+        if (magnitude === 'normal')
+            return this.step();
+        if (magnitude === 'large')
+            return this.largeStep() ?? this.step() * 10;
+        return this.smallStep() ?? null;
+    }
+    /**
+     * Apply one step. An empty field commits `emptyStepValue ?? min ?? 0`, so ↑
+     * on a blank quantity gives 1 rather than NaN.
+     */
+    applyStep(direction, magnitude = 'normal', announce = true) {
+        if (this.disabled() || this.readOnly())
+            return;
+        const size = this.stepSize(magnitude);
+        if (size == null)
+            return;
+        // Type-then-step should step from what is on screen, not what was committed.
+        if (this.draft() != null)
+            this.commitDraft();
+        if (this.draftInvalid())
+            return;
+        const from = this.value();
+        const current = this.canonical();
+        if (current == null) {
+            const seed = toDecimal(this.emptyStepValue() ?? this.min() ?? 0);
+            this.write(seed);
+            this.stepped.emit({ from, to: Number(seed), by: 0 });
+            if (announce)
+                this.announceValue();
+            return;
+        }
+        const next = stepDecimal(current, direction, {
+            step: size,
+            min: this.min(),
+            max: this.max(),
+            stepOrigin: this.stepOrigin(),
+            wrap: this.wrap(),
+        });
+        if (next === current) {
+            if (announce)
+                this.announceFence(direction);
+            return;
+        }
+        this.write(next);
+        this.stepped.emit({ from, to: Number(next), by: Number(next) - (from ?? 0) });
+        if (announce)
+            this.announceValue();
+    }
+    announceValue() {
+        this.announcer.announce(`${speakNumber(this.canonical(), this.format())}.`);
+    }
+    announceFence(direction) {
+        const bound = direction > 0 ? this.max() : this.min();
+        if (bound == null)
+            return;
+        this.announcer.announce(`${direction > 0 ? 'Maximum' : 'Minimum'}, ${bound}.`);
+    }
+    // --- Hold to repeat -------------------------------------------------------
+    repeatTiming = () => {
         const options = this.componentOptions();
-        const fill = this.theme.colors()[options.color ?? 'primary'];
-        const track = this.theme.colors()[options.trackColor ?? 'surface-variant'];
-        const radius = this.theme.radii()[options.borderRadius ?? 'max'];
-        const trackHeight = options.trackHeight ?? 4;
-        const thumbSize = options.thumbSize ?? 16;
-        // Webkit paints the fill via a gradient stopped at the custom property;
-        // Firefox has a real ::-moz-range-progress.
-        const trackFill = `linear-gradient(to right, ${fill} var(--uni-slider-fill), ${track} var(--uni-slider-fill))`;
-        const thumb = {
-            appearance: 'none',
-            width: thumbSize,
-            height: thumbSize,
-            borderRadius: radius,
-            border: 'none',
-            background: fill,
-            cursor: 'pointer',
+        return {
+            delayMs: options.repeatDelayMs,
+            intervalMs: options.repeatIntervalMs,
+            fastIntervalMs: options.repeatFastIntervalMs,
+            rampMs: options.repeatRampMs,
         };
-        return css({
-            appearance: 'none',
-            width: '100%',
-            height: thumbSize,
-            margin: 0,
-            background: 'transparent',
-            cursor: 'pointer',
-            '&::-webkit-slider-runnable-track': {
-                height: trackHeight,
-                borderRadius: radius,
-                background: trackFill,
-            },
-            '&::-webkit-slider-thumb': {
-                ...thumb,
-                marginTop: (trackHeight - thumbSize) / 2,
+    };
+    /**
+     * The live region announces on release only — a screen reader narrating two
+     * hundred intermediate values is a denial of service.
+     */
+    increment = createPressRepeat({
+        onStep: () => this.applyStep(1, 'normal', false),
+        onRelease: () => this.announceValue(),
+        disabled: () => this.disabled() || this.readOnly() || this.atMax(),
+        repeat: () => this.repeat(),
+        // A native spinner leaves focus in its field; without this the arrow keys
+        // go dead the moment you click a stepper.
+        focus: () => this.inputRef().nativeElement.focus(),
+        timing: this.repeatTiming,
+    });
+    decrement = createPressRepeat({
+        onStep: () => this.applyStep(-1, 'normal', false),
+        onRelease: () => this.announceValue(),
+        disabled: () => this.disabled() || this.readOnly() || this.atMin(),
+        repeat: () => this.repeat(),
+        // A native spinner leaves focus in its field; without this the arrow keys
+        // go dead the moment you click a stepper.
+        focus: () => this.inputRef().nativeElement.focus(),
+        timing: this.repeatTiming,
+    });
+    // --- Input events ---------------------------------------------------------
+    onInput(text) {
+        this.draft.set(text);
+        // The flag describes a *committed* failure; editing clears it.
+        this.draftInvalid.set(false);
+    }
+    onFocus() {
+        this.focused.set(true);
+        if (this.selectOnFocus()) {
+            queueMicrotask(() => this.inputRef().nativeElement.select());
+        }
+    }
+    onBlur() {
+        this.focused.set(false);
+        this.touched.set(true);
+        if (this.commitOnBlur())
+            this.commitDraft();
+        this.increment.cancel();
+        this.decrement.cancel();
+    }
+    onKeydown(event) {
+        if (this.readOnly())
+            return;
+        const magnitude = event.shiftKey ? 'large' : event.altKey ? 'small' : 'normal';
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                this.applyStep(1, magnitude);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.applyStep(-1, magnitude);
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                this.applyStep(1, 'large');
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                this.applyStep(-1, 'large');
+                break;
+            case 'Home': {
+                // No-op when unbounded: nothing sensible lives at an open fence.
+                const min = this.min();
+                if (min == null)
+                    return;
+                event.preventDefault();
+                this.draft.set(null);
+                this.write(toDecimal(min));
+                this.announceValue();
+                break;
+            }
+            case 'End': {
+                const max = this.max();
+                if (max == null)
+                    return;
+                event.preventDefault();
+                this.draft.set(null);
+                this.write(toDecimal(max));
+                this.announceValue();
+                break;
+            }
+            case 'Enter':
+                // Never submit the form while an uncommitted draft is in the field.
+                if (this.draft() != null)
+                    event.preventDefault();
+                this.commitDraft();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.draft.set(null);
+                this.draftInvalid.set(false);
+                this.increment.cancel();
+                this.decrement.cancel();
+                break;
+            case 'Tab':
+                // Never trap: commit what is typed, then let focus move on.
+                this.commitDraft();
+                break;
+        }
+    }
+    /**
+     * Scroll-to-step, off by default. A *focused* `<input type="number">` changes
+     * value on the wheel, which silently corrupts forms people are merely
+     * scrolling past. When enabled this needs focus **and** hover, and it only
+     * calls `preventDefault` when the value actually moved, so a page does not
+     * get scroll-trapped on a field sitting at its max.
+     */
+    onWheel(event) {
+        if (!this.wheel() || !this.focused() || this.disabled() || this.readOnly())
+            return;
+        const before = this.canonical();
+        this.applyStep(event.deltaY < 0 ? 1 : -1);
+        if (this.canonical() !== before)
+            event.preventDefault();
+    }
+    // --- Styling --------------------------------------------------------------
+    className = computed(() => css({ display: 'block' }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    fieldRowClass = computed(() => {
+        const options = this.componentOptions();
+        return css([
+            {
+                display: 'flex',
+                alignItems: 'center',
+                width: '100%',
+                // Full field height, so a stretched stepper column is the height of the
+                // field rather than of the text inside it.
+                height: '100%',
             },
-            '&::-moz-range-track': { height: trackHeight, borderRadius: radius, background: track },
-            '&::-moz-range-progress': { height: trackHeight, borderRadius: radius, background: fill },
-            '&::-moz-range-thumb': thumb,
-            // The shared, themable focus indicator, in the track's fill color.
-            '&:focus-visible': { ...this.theme.focusRingStyle(fill) },
-            '&:disabled': {
-                cursor: 'not-allowed',
-                opacity: 0.5,
-                '&::-webkit-slider-thumb': { cursor: 'not-allowed' },
-                '&::-moz-range-thumb': { cursor: 'not-allowed' },
+            this.theme.gap(options.affixGap ?? 'xs'),
+            // Trailing inset, matching the leading one, so a suffix — or the text
+            // itself — does not sit against the border. It rides the row because
+            // `removeInputPlatformStyling` zeroes padding on `& input` at a higher
+            // specificity than this class. Skipped when a stepper holds the trailing
+            // edge: a button is meant to reach the border.
+            this.showSteppers() ? undefined : this.theme.paddingRight(this.trailingInset()),
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "fieldRowClass" }] : /* istanbul ignore next */ []));
+    /** The shared field inset, reused on the trailing side so the two match. */
+    trailingInset = computed(() => this.fieldChrome().paddingLeft, ...(ngDevMode ? [{ debugName: "trailingInset" }] : /* istanbul ignore next */ []));
+    inputClass = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            flex: 1,
+            minWidth: 0,
+            border: 0,
+            outline: 'none',
+            background: 'transparent',
+            color: 'inherit',
+            font: 'inherit',
+            padding: 0,
+            textAlign: this.align() ?? options.align ?? 'start',
+            ...(options.tabularNumerals === false ? {} : { fontVariantNumeric: 'tabular-nums' }),
+            // Colour alone cannot carry "this is not a number" (WCAG 1.4.1), and the
+            // same underline already means the same thing on an invalid uni-tag.
+            ...(this.draftInvalid()
+                ? {
+                    textDecoration: 'underline dashed',
+                    textUnderlineOffset: 3,
+                    textDecorationColor: this.theme.colors()['warn'],
+                }
+                : {}),
+        });
+    }, ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    /**
+     * The shared field chrome, read from the `input` theme entry — the same entry
+     * `uni-input-box` resolves. Not a duplicate token: the inset has to be the
+     * one every other field uses, or a money field stops lining up with the text
+     * field above it.
+     */
+    fieldChrome = this.theme.getComponentOptions('input');
+    /**
+     * The leading inset for a prefix adornment. When there is a prefix the field
+     * tells the box to stop insetting the `<input>` (`managedInset`) and puts the
+     * inset here instead, so the `$` sits at the field's leading edge with the
+     * number right after it. With no prefix the box keeps doing it — the text is
+     * the leading edge then, and the box's rule outranks this class anyway.
+     * `embedded` fields have no chrome, so they get no inset either.
+     */
+    leadingInset = computed(() => this.embedded() ? undefined : this.theme.paddingLeft(this.fieldChrome().paddingLeft), ...(ngDevMode ? [{ debugName: "leadingInset" }] : /* istanbul ignore next */ []));
+    affixBase() {
+        const options = this.componentOptions();
+        return {
+            flex: 'none',
+            userSelect: 'none',
+            ...this.theme.color(options.affixColor ?? 'on-primary-surface-variant'),
+        };
+    }
+    /** Carries the field's leading inset, being the first thing in the row. */
+    prefixClass = computed(() => css([this.affixBase(), this.leadingInset()]), ...(ngDevMode ? [{ debugName: "prefixClass" }] : /* istanbul ignore next */ []));
+    suffixClass = computed(() => css([this.affixBase()]), ...(ngDevMode ? [{ debugName: "suffixClass" }] : /* istanbul ignore next */ []));
+    /** Shared chrome for every stepper button, in any layout. */
+    stepperButton() {
+        const options = this.componentOptions();
+        const target = options.minTouchTarget ?? 24;
+        return {
+            display: 'grid',
+            placeItems: 'center',
+            flex: 'none',
+            minWidth: target,
+            minHeight: target,
+            padding: 0,
+            border: 0,
+            background: 'transparent',
+            color: 'inherit',
+            cursor: 'pointer',
+            touchAction: 'none',
+            '&:disabled': { opacity: 0.4, cursor: 'not-allowed' },
+            ...this.theme.focusRing(),
+        };
+    }
+    /** Split and trailing layouts: one square button per direction. */
+    stepperClass = computed(() => css({
+        ...this.stepperButton(),
+        width: this.componentOptions().stepperWidth ?? 32,
+        alignSelf: 'stretch',
+    }), ...(ngDevMode ? [{ debugName: "stepperClass" }] : /* istanbul ignore next */ []));
+    /** Stacked layout: two half-height arrows sharing one column. */
+    stackedColumnClass = computed(() => css({
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 'none',
+        alignSelf: 'stretch',
+        justifyContent: 'center',
+        width: this.componentOptions().stepperWidth ?? 32,
+    }), ...(ngDevMode ? [{ debugName: "stackedColumnClass" }] : /* istanbul ignore next */ []));
+    stackedButtonClass = computed(() => css({
+        ...this.stepperButton(),
+        width: '100%',
+        // The two arrows split the field height between them. They cannot each
+        // reach `minTouchTarget` — 2 × 24 does not fit a 32px field — which is
+        // why a coarse pointer gets the `split` layout instead; see `layout`.
+        minHeight: 0,
+        flex: 1,
+    }), ...(ngDevMode ? [{ debugName: "stackedButtonClass" }] : /* istanbul ignore next */ []));
+    glyphSize = computed(() => (this.layout() === 'stacked' ? 12 : 18), ...(ngDevMode ? [{ debugName: "glyphSize" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniNumberInputComponent, isStandalone: true, selector: "uni-number-input, NumberInput", 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 }, valueAsString: { classPropertyName: "valueAsString", publicName: "valueAsString", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, numberFormat: { classPropertyName: "numberFormat", publicName: "numberFormat", isSignal: true, isRequired: false, transformFunction: null }, roundingMode: { classPropertyName: "roundingMode", publicName: "roundingMode", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, valueIsFraction: { classPropertyName: "valueIsFraction", publicName: "valueIsFraction", isSignal: true, isRequired: false, transformFunction: null }, unitAnnouncement: { classPropertyName: "unitAnnouncement", publicName: "unitAnnouncement", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, smallStep: { classPropertyName: "smallStep", publicName: "smallStep", isSignal: true, isRequired: false, transformFunction: null }, stepOrigin: { classPropertyName: "stepOrigin", publicName: "stepOrigin", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, clampOnCommit: { classPropertyName: "clampOnCommit", publicName: "clampOnCommit", isSignal: true, isRequired: false, transformFunction: null }, emptyStepValue: { classPropertyName: "emptyStepValue", publicName: "emptyStepValue", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, allowExpressions: { classPropertyName: "allowExpressions", publicName: "allowExpressions", isSignal: true, isRequired: false, transformFunction: null }, wheel: { classPropertyName: "wheel", publicName: "wheel", isSignal: true, isRequired: false, transformFunction: null }, repeat: { classPropertyName: "repeat", publicName: "repeat", isSignal: true, isRequired: false, transformFunction: null }, parse: { classPropertyName: "parse", publicName: "parse", isSignal: true, isRequired: false, transformFunction: null }, stepperLayout: { classPropertyName: "stepperLayout", publicName: "stepperLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueAsString: "valueAsStringChange", stepped: "stepped", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'numberInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Stepper buttons, shared by every layout. Real <button>s so they are\n     announced and activated as buttons, but tabindex=\"-1\": they are pointer\n     affordances, and the keyboard route is the arrow keys. The same reasoning\n     governs uni-combobox's chevron and uni-tag-input's per-chip remove. -->\n<ng-template #decrementButton let-styleClass=\"styleClass\" let-icon=\"icon\">\n  <button\n    type=\"button\"\n    tabindex=\"-1\"\n    [class]=\"styleClass\"\n    [disabled]=\"disabled() || atMin()\"\n    [attr.aria-label]=\"'Decrease ' + label()\"\n    (pointerdown)=\"decrement.press($event)\"\n    (pointerup)=\"decrement.release()\"\n    (pointercancel)=\"decrement.cancel()\"\n    (lostpointercapture)=\"decrement.release()\"\n  >\n    <uni-icon [name]=\"icon\" [size]=\"glyphSize()\" />\n  </button>\n</ng-template>\n\n<ng-template #incrementButton let-styleClass=\"styleClass\" let-icon=\"icon\">\n  <button\n    type=\"button\"\n    tabindex=\"-1\"\n    [class]=\"styleClass\"\n    [disabled]=\"disabled() || atMax()\"\n    [attr.aria-label]=\"'Increase ' + label()\"\n    (pointerdown)=\"increment.press($event)\"\n    (pointerup)=\"increment.release()\"\n    (pointercancel)=\"increment.cancel()\"\n    (lostpointercapture)=\"increment.release()\"\n  >\n    <uni-icon [name]=\"icon\" [size]=\"glyphSize()\" />\n  </button>\n</ng-template>\n\n<ng-template #fieldContent>\n  <div [class]=\"fieldRowClass()\">\n    @if (showSteppers() && layout() === 'split') {\n      <ng-container\n        [ngTemplateOutlet]=\"decrementButton\"\n        [ngTemplateOutletContext]=\"{\n          styleClass: stepperClass(),\n          icon: componentOptions().decrementIcon ?? 'minus',\n        }\"\n      ></ng-container>\n    }\n\n    <!-- Affixes are adornments, not text: they live outside the <input>, so\n         caret math, select-all and paste never step over them, and they are\n         aria-hidden because aria-valuetext already speaks them. -->\n    @if (format().prefix) {\n      <span [class]=\"prefixClass()\" aria-hidden=\"true\">{{ format().prefix }}</span>\n    }\n\n    <input\n      #field\n      type=\"text\"\n      role=\"spinbutton\"\n      autocomplete=\"off\"\n      [class]=\"inputClass()\"\n      [value]=\"displayText()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readOnly()\"\n      [attr.inputmode]=\"format().inputMode\"\n      [attr.placeholder]=\"placeholder() ?? null\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-valuenow]=\"canonicalForAria()\"\n      [attr.aria-valuemin]=\"min() ?? null\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuetext]=\"valueTextForAria()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"showError() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      [attr.aria-readonly]=\"readOnly() ? true : null\"\n      (input)=\"onInput($any($event.target).value)\"\n      (keydown)=\"onKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (wheel)=\"onWheel($event)\"\n    />\n\n    @if (format().suffix) {\n      <span [class]=\"suffixClass()\" aria-hidden=\"true\">{{ format().suffix }}</span>\n    }\n\n    @if (showSteppers()) {\n      @switch (layout()) {\n        @case ('split') {\n          <ng-container\n            [ngTemplateOutlet]=\"incrementButton\"\n            [ngTemplateOutletContext]=\"{\n              styleClass: stepperClass(),\n              icon: componentOptions().incrementIcon ?? 'plus',\n            }\"\n          ></ng-container>\n        }\n        @case ('trailing') {\n          <ng-container\n            [ngTemplateOutlet]=\"decrementButton\"\n            [ngTemplateOutletContext]=\"{\n              styleClass: stepperClass(),\n              icon: componentOptions().decrementIcon ?? 'minus',\n            }\"\n          ></ng-container>\n          <ng-container\n            [ngTemplateOutlet]=\"incrementButton\"\n            [ngTemplateOutletContext]=\"{\n              styleClass: stepperClass(),\n              icon: componentOptions().incrementIcon ?? 'plus',\n            }\"\n          ></ng-container>\n        }\n        @case ('stacked') {\n          <span [class]=\"stackedColumnClass()\">\n            <ng-container\n              [ngTemplateOutlet]=\"incrementButton\"\n              [ngTemplateOutletContext]=\"{\n                styleClass: stackedButtonClass(),\n                icon: componentOptions().stepUpIcon ?? 'chevronUp',\n              }\"\n            ></ng-container>\n            <ng-container\n              [ngTemplateOutlet]=\"decrementButton\"\n              [ngTemplateOutletContext]=\"{\n                styleClass: stackedButtonClass(),\n                icon: componentOptions().stepDownIcon ?? 'chevronDown',\n              }\"\n            ></ng-container>\n          </span>\n        }\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- `embedded` drops the field chrome for composers that supply their own. -->\n@if (embedded()) {\n  <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n} @else {\n  <!-- The inset moves onto the prefix (or the input when there is none), so an\n       adornment sits at the field's leading edge instead of hugging its border. -->\n  <uni-input-box\n    [error]=\"showError()\"\n    [disabled]=\"disabled()\"\n    [fullWidth]=\"true\"\n    [managedInset]=\"!!format().prefix\"\n  >\n    <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n  </uni-input-box>\n}\n\n<!-- Said once per field rather than repeated on both buttons. -->\n<span [id]=\"hintId\" [class]=\"srOnly\">\n  Use the up and down arrow keys to change the value.\n</span>\n\n<!-- Clamps, fences, rejections and expression results are each a purely visual\n     event otherwise. Held stepping announces on release only. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniNumberInputComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-number-input, NumberInput', imports: [NgTemplateOutlet, UniIconComponent, UniInputBoxComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'numberInput' }], host: { '[class]': 'className()' }, template: "<!-- Stepper buttons, shared by every layout. Real <button>s so they are\n     announced and activated as buttons, but tabindex=\"-1\": they are pointer\n     affordances, and the keyboard route is the arrow keys. The same reasoning\n     governs uni-combobox's chevron and uni-tag-input's per-chip remove. -->\n<ng-template #decrementButton let-styleClass=\"styleClass\" let-icon=\"icon\">\n  <button\n    type=\"button\"\n    tabindex=\"-1\"\n    [class]=\"styleClass\"\n    [disabled]=\"disabled() || atMin()\"\n    [attr.aria-label]=\"'Decrease ' + label()\"\n    (pointerdown)=\"decrement.press($event)\"\n    (pointerup)=\"decrement.release()\"\n    (pointercancel)=\"decrement.cancel()\"\n    (lostpointercapture)=\"decrement.release()\"\n  >\n    <uni-icon [name]=\"icon\" [size]=\"glyphSize()\" />\n  </button>\n</ng-template>\n\n<ng-template #incrementButton let-styleClass=\"styleClass\" let-icon=\"icon\">\n  <button\n    type=\"button\"\n    tabindex=\"-1\"\n    [class]=\"styleClass\"\n    [disabled]=\"disabled() || atMax()\"\n    [attr.aria-label]=\"'Increase ' + label()\"\n    (pointerdown)=\"increment.press($event)\"\n    (pointerup)=\"increment.release()\"\n    (pointercancel)=\"increment.cancel()\"\n    (lostpointercapture)=\"increment.release()\"\n  >\n    <uni-icon [name]=\"icon\" [size]=\"glyphSize()\" />\n  </button>\n</ng-template>\n\n<ng-template #fieldContent>\n  <div [class]=\"fieldRowClass()\">\n    @if (showSteppers() && layout() === 'split') {\n      <ng-container\n        [ngTemplateOutlet]=\"decrementButton\"\n        [ngTemplateOutletContext]=\"{\n          styleClass: stepperClass(),\n          icon: componentOptions().decrementIcon ?? 'minus',\n        }\"\n      ></ng-container>\n    }\n\n    <!-- Affixes are adornments, not text: they live outside the <input>, so\n         caret math, select-all and paste never step over them, and they are\n         aria-hidden because aria-valuetext already speaks them. -->\n    @if (format().prefix) {\n      <span [class]=\"prefixClass()\" aria-hidden=\"true\">{{ format().prefix }}</span>\n    }\n\n    <input\n      #field\n      type=\"text\"\n      role=\"spinbutton\"\n      autocomplete=\"off\"\n      [class]=\"inputClass()\"\n      [value]=\"displayText()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readOnly()\"\n      [attr.inputmode]=\"format().inputMode\"\n      [attr.placeholder]=\"placeholder() ?? null\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-valuenow]=\"canonicalForAria()\"\n      [attr.aria-valuemin]=\"min() ?? null\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuetext]=\"valueTextForAria()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"showError() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      [attr.aria-readonly]=\"readOnly() ? true : null\"\n      (input)=\"onInput($any($event.target).value)\"\n      (keydown)=\"onKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (wheel)=\"onWheel($event)\"\n    />\n\n    @if (format().suffix) {\n      <span [class]=\"suffixClass()\" aria-hidden=\"true\">{{ format().suffix }}</span>\n    }\n\n    @if (showSteppers()) {\n      @switch (layout()) {\n        @case ('split') {\n          <ng-container\n            [ngTemplateOutlet]=\"incrementButton\"\n            [ngTemplateOutletContext]=\"{\n              styleClass: stepperClass(),\n              icon: componentOptions().incrementIcon ?? 'plus',\n            }\"\n          ></ng-container>\n        }\n        @case ('trailing') {\n          <ng-container\n            [ngTemplateOutlet]=\"decrementButton\"\n            [ngTemplateOutletContext]=\"{\n              styleClass: stepperClass(),\n              icon: componentOptions().decrementIcon ?? 'minus',\n            }\"\n          ></ng-container>\n          <ng-container\n            [ngTemplateOutlet]=\"incrementButton\"\n            [ngTemplateOutletContext]=\"{\n              styleClass: stepperClass(),\n              icon: componentOptions().incrementIcon ?? 'plus',\n            }\"\n          ></ng-container>\n        }\n        @case ('stacked') {\n          <span [class]=\"stackedColumnClass()\">\n            <ng-container\n              [ngTemplateOutlet]=\"incrementButton\"\n              [ngTemplateOutletContext]=\"{\n                styleClass: stackedButtonClass(),\n                icon: componentOptions().stepUpIcon ?? 'chevronUp',\n              }\"\n            ></ng-container>\n            <ng-container\n              [ngTemplateOutlet]=\"decrementButton\"\n              [ngTemplateOutletContext]=\"{\n                styleClass: stackedButtonClass(),\n                icon: componentOptions().stepDownIcon ?? 'chevronDown',\n              }\"\n            ></ng-container>\n          </span>\n        }\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- `embedded` drops the field chrome for composers that supply their own. -->\n@if (embedded()) {\n  <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n} @else {\n  <!-- The inset moves onto the prefix (or the input when there is none), so an\n       adornment sits at the field's leading edge instead of hugging its border. -->\n  <uni-input-box\n    [error]=\"showError()\"\n    [disabled]=\"disabled()\"\n    [fullWidth]=\"true\"\n    [managedInset]=\"!!format().prefix\"\n  >\n    <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n  </uni-input-box>\n}\n\n<!-- Said once per field rather than repeated on both buttons. -->\n<span [id]=\"hintId\" [class]=\"srOnly\">\n  Use the up and down arrow keys to change the value.\n</span>\n\n<!-- Clamps, fences, rejections and expression results are each a purely visual\n     event otherwise. Held stepping announces on release only. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], valueAsString: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAsString", required: false }] }, { type: i0.Output, args: ["valueAsStringChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], preset: [{ type: i0.Input, args: [{ isSignal: true, alias: "preset", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], grouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouping", required: false }] }], numberFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberFormat", required: false }] }], roundingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundingMode", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], valueIsFraction: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueIsFraction", required: false }] }], unitAnnouncement: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitAnnouncement", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], largeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeStep", required: false }] }], smallStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "smallStep", required: false }] }], stepOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepOrigin", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], clampOnCommit: [{ type: i0.Input, args: [{ isSignal: true, alias: "clampOnCommit", required: false }] }], emptyStepValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStepValue", required: false }] }], commitOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitOnBlur", required: false }] }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], allowExpressions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowExpressions", required: false }] }], wheel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wheel", required: false }] }], repeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "repeat", required: false }] }], parse: [{ type: i0.Input, args: [{ isSignal: true, alias: "parse", required: false }] }], stepperLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperLayout", required: false }] }], stepped: [{ type: i0.Output, args: ["stepped"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], inputRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
+
+/**
+ * Bounded numeric input by pointer, for values where the *position* is the
+ * information: volume, opacity, weightings, price filters.
+ *
+ * Custom thumbs rather than `<input type="range">`, which the previous version
+ * used: one native range input cannot carry two thumbs, marks or a tooltip, and
+ * a second component for the range case would mean two keyboard maps to keep in
+ * step. The step model and the keyboard map are the cdk's, shared with the
+ * numeric fields, so nothing new is learned moving between them.
+ *
+ * All arithmetic on values runs through the cdk's exact decimal helpers —
+ * stepping `0.1` never yields `0.30000000000000004`. Only pointer *positions*
+ * use floats, and they are snapped to the grid before becoming a value.
+ */
+class UniSliderComponent extends BaseComponent {
+    // --- Signal Forms block (explicit per AGENTS.md, not a base class) --------
+    /** Shape follows `mode`: a number when `single`, a `UniNumberRange` when `range`. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    // --- Configuration -------------------------------------------------------
+    /** Accessible name, e.g. "Opacity". Names the group in range mode. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    // `min`/`max` are part of the FormValueControl contract — Signal Forms syncs
+    // them from min()/max() validators — so their type must admit undefined.
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** `PageUp`/`PageDown` and `Shift+Arrow`. Default: a tenth of the range. */
+    largeStep = input(...(ngDevMode ? [undefined, { debugName: "largeStep" }] : /* istanbul ignore next */ []));
+    /** Fill anchor. Defaults to `min`; set `0` for a slider that spans ±. */
+    origin = input(...(ngDevMode ? [undefined, { debugName: "origin" }] : /* istanbul ignore next */ []));
+    marks = input([], ...(ngDevMode ? [{ debugName: "marks" }] : /* istanbul ignore next */ []));
+    /** Marks become the only valid stops — t-shirt sizing, Likert scales. */
+    snapToMarks = input(false, ...(ngDevMode ? [{ debugName: "snapToMarks" }] : /* istanbul ignore next */ []));
+    /**
+     * Where the current value is shown. `tooltip` appears on hover, focus and
+     * drag; `inline` sits at the trailing edge of the track; `input` seats a
+     * compact `uni-number-input` there, two-way bound to the same value — drag
+     * for the ballpark, type for the exact figure, which is the pairing that
+     * makes bounded numeric input actually usable.
+     *
+     * `input` applies to `single` mode only; a range would need two fields, and
+     * `inline` already reads well for two ends.
+     */
+    valueDisplay = input('none', ...(ngDevMode ? [{ debugName: "valueDisplay" }] : /* istanbul ignore next */ []));
+    /** Overrides how a value is rendered and spoken. */
+    formatValue = input(...(ngDevMode ? [undefined, { debugName: "formatValue" }] : /* istanbul ignore next */ []));
+    /** Enforced distance between the two ends, in range mode. */
+    minGap = input(...(ngDevMode ? [undefined, { debugName: "minGap" }] : /* istanbul ignore next */ []));
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    // --- Events --------------------------------------------------------------
+    /** Continuous, during a drag or a held key. Bind this for a live preview. */
+    sliding = output();
+    /**
+     * Committed — on pointer release and key-up. **A form should bind this**:
+     * piping a 60 Hz stream into a model is how sliders get blamed for jank.
+     */
+    changed = output();
+    trackRef = viewChild.required('track');
+    thumbRefs = viewChildren('thumb', ...(ngDevMode ? [{ debugName: "thumbRefs" }] : /* istanbul ignore next */ []));
+    srOnly = css(visuallyHidden);
+    /** Fences and swaps only — `aria-valuetext` already narrates movement. */
+    announcer = createAnnouncer();
+    groupId = uniqueId('uni-slider');
+    /** True from pointerdown until release, to suppress the jump transition. */
+    dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    draggingThumb = null;
+    /** Set by keydown, consumed by keyup, so one commit follows a key run. */
+    keyed = false;
+    isRange = computed(() => this.mode() === 'range', ...(ngDevMode ? [{ debugName: "isRange" }] : /* istanbul ignore next */ []));
+    resolvedMin = computed(() => this.min() ?? 0, ...(ngDevMode ? [{ debugName: "resolvedMin" }] : /* istanbul ignore next */ []));
+    resolvedMax = computed(() => this.max() ?? 100, ...(ngDevMode ? [{ debugName: "resolvedMax" }] : /* istanbul ignore next */ []));
+    derivePair(value) {
+        const min = this.resolvedMin();
+        const max = this.resolvedMax();
+        if (this.isRange()) {
+            const range = (value ?? {});
+            return [range.start ?? min, range.end ?? max];
+        }
+        return [typeof value === 'number' ? value : min, max];
+    }
+    /**
+     * The two thumb positions, by **identity** rather than by order: thumb 0 is
+     * whichever thumb the user grabbed first, not necessarily the lower one.
+     *
+     * A `linkedSignal` so an external write to `value` resets them, while a drag
+     * moves them without writing the model on every frame. The computation
+     * deliberately keeps the existing order when the incoming value describes the
+     * same two positions — a commit writes the range back *sorted*, and
+     * re-deriving from that would un-cross a crossed pair and yank the dragged
+     * thumb out from under the pointer mid-drag.
+     */
+    thumbs = linkedSignal({ ...(ngDevMode ? { debugName: "thumbs" } : /* istanbul ignore next */ {}), source: () => this.value(),
+        computation: (value, previous) => {
+            const next = this.derivePair(value);
+            const prior = previous?.value;
+            if (prior &&
+                Math.min(prior[0], prior[1]) === Math.min(next[0], next[1]) &&
+                Math.max(prior[0], prior[1]) === Math.max(next[0], next[1])) {
+                return prior;
+            }
+            return next;
+        } });
+    thumbIndexes = computed(() => (this.isRange() ? [0, 1] : [0]), ...(ngDevMode ? [{ debugName: "thumbIndexes" }] : /* istanbul ignore next */ []));
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    /** Default large step: a tenth of the range, snapped to the step grid. */
+    resolvedLargeStep = computed(() => {
+        const explicit = this.largeStep();
+        if (explicit != null)
+            return explicit;
+        const step = this.step();
+        const tenth = (this.resolvedMax() - this.resolvedMin()) / 10;
+        const snapped = Math.round(tenth / step) * step;
+        return snapped > 0 ? snapped : step;
+    }, ...(ngDevMode ? [{ debugName: "resolvedLargeStep" }] : /* istanbul ignore next */ []));
+    numberFormat = computed(() => resolveNumberFormat({ decimals: [0, Math.max(decimalScale(toDecimal(this.step())), 0)] }), ...(ngDevMode ? [{ debugName: "numberFormat" }] : /* istanbul ignore next */ []));
+    formatted(value) {
+        const custom = this.formatValue();
+        if (custom)
+            return custom(value);
+        return formatNumber(toDecimal(value), this.numberFormat());
+    }
+    /** A mark's label speaks for its value, so a marks-only slider says "Medium". */
+    markLabel(value) {
+        return this.marks().find((mark) => mark.value === value && mark.label)?.label;
+    }
+    valueText(value) {
+        return this.markLabel(value) ?? this.formatted(value);
+    }
+    // --- Geometry -------------------------------------------------------------
+    percentOf(value) {
+        const min = this.resolvedMin();
+        const span = this.resolvedMax() - min;
+        if (span <= 0)
+            return 0;
+        return Math.min(100, Math.max(0, ((value - min) / span) * 100));
+    }
+    lowValue = computed(() => {
+        const [a, b] = this.thumbs();
+        return this.isRange() ? Math.min(a, b) : a;
+    }, ...(ngDevMode ? [{ debugName: "lowValue" }] : /* istanbul ignore next */ []));
+    highValue = computed(() => {
+        const [a, b] = this.thumbs();
+        return this.isRange() ? Math.max(a, b) : a;
+    }, ...(ngDevMode ? [{ debugName: "highValue" }] : /* istanbul ignore next */ []));
+    /** The fill spans between the ends in range mode, or origin → value. */
+    fillStart = computed(() => {
+        if (this.isRange())
+            return this.percentOf(this.lowValue());
+        const origin = this.origin() ?? this.resolvedMin();
+        return this.percentOf(Math.min(origin, this.thumbs()[0]));
+    }, ...(ngDevMode ? [{ debugName: "fillStart" }] : /* istanbul ignore next */ []));
+    fillEnd = computed(() => {
+        if (this.isRange())
+            return 100 - this.percentOf(this.highValue());
+        const origin = this.origin() ?? this.resolvedMin();
+        return 100 - this.percentOf(Math.max(origin, this.thumbs()[0]));
+    }, ...(ngDevMode ? [{ debugName: "fillEnd" }] : /* istanbul ignore next */ []));
+    hasMarkLabels = computed(() => this.marks().some((mark) => !!mark.label), ...(ngDevMode ? [{ debugName: "hasMarkLabels" }] : /* istanbul ignore next */ []));
+    /** The number-field readout only makes sense for a single value. */
+    showReadoutField = computed(() => this.valueDisplay() === 'input' && !this.isRange(), ...(ngDevMode ? [{ debugName: "showReadoutField" }] : /* istanbul ignore next */ []));
+    /** Fraction digits the readout should accept, taken from the step. */
+    readoutDecimals = computed(() => [
+        0,
+        decimalScale(toDecimal(this.step())),
+    ], ...(ngDevMode ? [{ debugName: "readoutDecimals" }] : /* istanbul ignore next */ []));
+    /**
+     * The readout drives the thumb. Guarded against the write-back cycle: the
+     * field is fed from `value`, so a commit here would otherwise bounce.
+     */
+    onReadoutValue(next) {
+        if (next == null)
+            return;
+        const snapped = this.snapToGrid(next);
+        if (snapped === this.thumbs()[0])
+            return;
+        this.setThumb(0, snapped, true);
+    }
+    // --- ARIA per thumb -------------------------------------------------------
+    thumbValue(index) {
+        return this.thumbs()[index];
+    }
+    /**
+     * Each thumb's bound is the *other thumb's* position, so a screen-reader user
+     * is told where the wall actually is rather than where the track ends.
+     */
+    thumbMin(index) {
+        if (!this.isRange())
+            return this.resolvedMin();
+        return this.isLower(index) ? this.resolvedMin() : this.lowValue();
+    }
+    thumbMax(index) {
+        if (!this.isRange())
+            return this.resolvedMax();
+        return this.isLower(index) ? this.highValue() : this.resolvedMax();
+    }
+    /** Thumbs may cross; which one is "minimum" follows position, not identity. */
+    isLower(index) {
+        const [a, b] = this.thumbs();
+        return index === 0 ? a <= b : b < a;
+    }
+    thumbLabel(index) {
+        if (!this.isRange())
+            return this.label();
+        return `${this.label()}, ${this.isLower(index) ? 'minimum' : 'maximum'}`;
+    }
+    // --- Value plumbing -------------------------------------------------------
+    currentValue() {
+        if (!this.isRange())
+            return this.thumbs()[0];
+        return { start: this.lowValue(), end: this.highValue() };
+    }
+    /** Exact `min + n · step`, so a snapped position never carries float drift. */
+    snapToGrid(raw) {
+        const marks = this.marks();
+        if (this.snapToMarks() && marks.length) {
+            return marks.reduce((best, mark) => (Math.abs(mark.value - raw) < Math.abs(best - raw) ? mark.value : best), marks[0].value);
+        }
+        const min = toDecimal(this.resolvedMin());
+        const step = toDecimal(this.step());
+        if (Number(step) === 0)
+            return this.resolvedMin();
+        const steps = Math.round((raw - Number(min)) / Number(step));
+        const scale = Math.max(decimalScale(min), decimalScale(step));
+        const exact = fromScaled(toScaled(min, scale) + BigInt(steps) * toScaled(step, scale), scale);
+        return this.clamp(Number(exact));
+    }
+    clamp(value) {
+        return Math.min(this.resolvedMax(), Math.max(this.resolvedMin(), value));
+    }
+    /**
+     * Move a thumb. `commit` writes the model and emits `changed`; without it the
+     * move is visual and only emits `sliding`.
+     */
+    setThumb(index, next, commit) {
+        let target = this.clamp(next);
+        // With a minimum gap the ends fence each other instead of swapping — the
+        // gap is the whole point of setting it.
+        const gap = this.minGap();
+        if (gap != null && this.isRange()) {
+            const [a, b] = this.thumbs();
+            const other = index === 0 ? b : a;
+            const current = index === 0 ? a : b;
+            if (current <= other)
+                target = Math.min(target, other - gap);
+            else
+                target = Math.max(target, other + gap);
+            target = this.clamp(target);
+        }
+        const previous = this.thumbs()[index];
+        if (previous !== target) {
+            this.thumbs.update((pair) => {
+                const next = [...pair];
+                next[index] = target;
+                return next;
+            });
+            this.sliding.emit(this.currentValue());
+        }
+        if (commit)
+            this.commit();
+    }
+    commit() {
+        this.value.set(this.currentValue());
+        this.changed.emit(this.currentValue());
+    }
+    announceValue(index) {
+        this.announcer.announce(`${this.valueText(this.thumbs()[index])}.`);
+    }
+    // --- Pointer --------------------------------------------------------------
+    /** True when the track is laid out right-to-left. */
+    isRtl() {
+        const track = this.trackRef().nativeElement;
+        return getComputedStyle(track).direction === 'rtl';
+    }
+    /** Pointer x → a raw value. The track's visual direction flips in RTL; the value's does not. */
+    valueFromPointer(event) {
+        const rect = this.trackRef().nativeElement.getBoundingClientRect();
+        if (rect.width <= 0)
+            return this.resolvedMin();
+        let ratio = (event.clientX - rect.left) / rect.width;
+        if (this.isRtl())
+            ratio = 1 - ratio;
+        const min = this.resolvedMin();
+        return min + Math.min(1, Math.max(0, ratio)) * (this.resolvedMax() - min);
+    }
+    nearestThumb(raw) {
+        if (!this.isRange())
+            return 0;
+        const [a, b] = this.thumbs();
+        return Math.abs(a - raw) <= Math.abs(b - raw) ? 0 : 1;
+    }
+    onTrackPointerDown(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        const raw = this.valueFromPointer(event);
+        const onThumb = event.target?.closest('[role="slider"]');
+        const index = onThumb
+            ? Number(onThumb.dataset['thumb'])
+            : this.nearestThumb(raw);
+        this.draggingThumb = index;
+        this.thumbRefs()[index]?.nativeElement.focus();
+        // Pressing the track jumps the nearest thumb there — no "grab the thumb
+        // first" tax — and that jump animates. A drag never does.
+        if (!onThumb)
+            this.setThumb(index, this.snapToGrid(raw), false);
+        this.dragging.set(true);
+        const track = this.trackRef().nativeElement;
+        if (typeof track.setPointerCapture === 'function') {
+            try {
+                track.setPointerCapture(event.pointerId);
+            }
+            catch {
+                // Synthetic pointer id; the move/up listeners below still work.
+            }
+        }
+    }
+    onTrackPointerMove(event) {
+        if (this.draggingThumb == null)
+            return;
+        this.setThumb(this.draggingThumb, this.snapToGrid(this.valueFromPointer(event)), false);
+    }
+    onTrackPointerUp() {
+        const index = this.draggingThumb;
+        this.dragging.set(false);
+        if (index == null)
+            return;
+        this.draggingThumb = null;
+        this.touched.set(true);
+        this.commit();
+        this.announceValue(index);
+    }
+    // --- Keyboard -------------------------------------------------------------
+    /** Adjacent mark, when marks are the only stops. */
+    markStep(current, direction) {
+        const values = this.marks()
+            .map((mark) => mark.value)
+            .sort((a, b) => a - b);
+        if (!values.length)
+            return current;
+        const at = values.indexOf(current);
+        if (at < 0)
+            return this.snapToGrid(current);
+        return values[Math.min(values.length - 1, Math.max(0, at + direction))];
+    }
+    stepFrom(current, direction, large) {
+        if (this.snapToMarks() && this.marks().length)
+            return this.markStep(current, direction);
+        const next = stepDecimal(toDecimal(current), direction, {
+            step: large ? this.resolvedLargeStep() : this.step(),
+            min: this.resolvedMin(),
+            max: this.resolvedMax(),
+            stepOrigin: 'min',
+        });
+        return Number(next);
+    }
+    onThumbKeydown(event, index) {
+        if (this.disabled())
+            return;
+        const current = this.thumbs()[index];
+        const large = event.shiftKey;
+        // Horizontal arrows follow the picture, so they mirror in RTL; the vertical
+        // ones follow the number and never do (APG's rule).
+        const toward = this.isRtl() ? -1 : 1;
+        // Every branch either assigns or returns, so this needs no initializer.
+        let next;
+        switch (event.key) {
+            case 'ArrowUp':
+                next = this.stepFrom(current, 1, large);
+                break;
+            case 'ArrowDown':
+                next = this.stepFrom(current, -1, large);
+                break;
+            case 'ArrowRight':
+                next = this.stepFrom(current, toward > 0 ? 1 : -1, large);
+                break;
+            case 'ArrowLeft':
+                next = this.stepFrom(current, toward > 0 ? -1 : 1, large);
+                break;
+            case 'PageUp':
+                next = this.stepFrom(current, 1, true);
+                break;
+            case 'PageDown':
+                next = this.stepFrom(current, -1, true);
+                break;
+            case 'Home':
+                next = this.resolvedMin();
+                break;
+            case 'End':
+                next = this.resolvedMax();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.keyed = true;
+        this.setThumb(index, next, false);
+    }
+    /** One commit and one announcement per key run, not per repeat. */
+    onThumbKeyup(index) {
+        if (!this.keyed)
+            return;
+        this.keyed = false;
+        this.touched.set(true);
+        this.commit();
+        this.announceValue(index);
+    }
+    onThumbBlur() {
+        this.touched.set(true);
+    }
+    // --- Styling --------------------------------------------------------------
+    className = computed(() => css({ display: 'block' }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    fillColor = computed(() => {
+        const colors = this.theme.colors();
+        return colors[this.variant()] ?? colors['primary'];
+    }, ...(ngDevMode ? [{ debugName: "fillColor" }] : /* istanbul ignore next */ []));
+    rootClass = computed(() => css({
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        ...(this.disabled() ? { cursor: 'not-allowed' } : {}),
+    }), ...(ngDevMode ? [{ debugName: "rootClass" }] : /* istanbul ignore next */ []));
+    rowClass = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            display: 'flex',
+            alignItems: 'center',
+            ...this.theme.gap(options.labelTypeface ? 'md' : 'md'),
+        });
+    }, ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+    trackClass = computed(() => {
+        const options = this.componentOptions();
+        const colors = this.theme.colors();
+        const height = options.trackHeight ?? 4;
+        const target = options.minTouchTarget ?? 24;
+        const radius = this.theme.radii()[options.borderRadius ?? 'max'];
+        return css({
+            position: 'relative',
+            flex: '1 1 auto',
+            height,
+            borderRadius: radius,
+            backgroundColor: this.disabled()
+                ? colors['disabled-container']
+                : colors[options.trackColor ?? 'primary-container'],
+            cursor: this.disabled() ? 'not-allowed' : 'pointer',
+            // Vertical room for the hit areas, horizontal room so a thumb at either
+            // fence is not clipped by the track's own box.
+            marginBlock: Math.max(0, (target - height) / 2),
+            marginInline: target / 2,
+            // Only the track: a vertical page scroll starting here still scrolls.
+            touchAction: 'none',
+        });
+    }, ...(ngDevMode ? [{ debugName: "trackClass" }] : /* istanbul ignore next */ []));
+    fillClass = computed(() => {
+        const options = this.componentOptions();
+        const colors = this.theme.colors();
+        const duration = options.transitionMs ?? 120;
+        return css({
+            position: 'absolute',
+            insetBlock: 0,
+            borderRadius: this.theme.radii()[options.borderRadius ?? 'max'],
+            backgroundColor: this.disabled() ? colors['disabled'] : this.fillColor(),
+            ...(this.dragging()
+                ? {}
+                : motionSafe({
+                    transitionProperty: 'inset-inline-start, inset-inline-end',
+                    transitionDuration: `${duration}ms`,
+                    transitionTimingFunction: 'ease',
+                })),
+        });
+    }, ...(ngDevMode ? [{ debugName: "fillClass" }] : /* istanbul ignore next */ []));
+    markClass = computed(() => {
+        const options = this.componentOptions();
+        const colors = this.theme.colors();
+        const size = options.markSize ?? 3;
+        return css({
+            position: 'absolute',
+            top: '50%',
+            width: size,
+            height: size,
+            borderRadius: '50%',
+            backgroundColor: colors[options.markColor ?? 'on-primary-container'],
+            transform: 'translate(-50%, -50%)',
+            opacity: 0.7,
+            pointerEvents: 'none',
+        });
+    }, ...(ngDevMode ? [{ debugName: "markClass" }] : /* istanbul ignore next */ []));
+    thumbClass = computed(() => {
+        const options = this.componentOptions();
+        const colors = this.theme.colors();
+        const size = options.thumbSize ?? 16;
+        const target = options.minTouchTarget ?? 24;
+        const duration = options.transitionMs ?? 120;
+        return css({
+            position: 'absolute',
+            top: '50%',
+            // The hit area is the element; the visual dot is the pseudo-element, so
+            // a 16px thumb still presents a 24px target (WCAG 2.5.8).
+            width: target,
+            height: target,
+            transform: 'translate(-50%, -50%)',
+            display: 'grid',
+            placeItems: 'center',
+            borderRadius: '50%',
+            cursor: this.disabled() ? 'not-allowed' : 'grab',
+            touchAction: 'none',
+            pointerEvents: this.disabled() ? 'none' : 'auto',
+            '&:active': { cursor: 'grabbing' },
+            '&::after': {
+                content: '""',
+                width: size,
+                height: size,
+                borderRadius: this.theme.radii()[options.thumbBorderRadius ?? 'max'],
+                backgroundColor: this.disabled() ? colors['on-disabled'] : this.fillColor(),
+                border: `2px solid ${colors['background']}`,
+                boxSizing: 'border-box',
+            },
+            ...this.theme.focusRing(),
+            ...(this.dragging()
+                ? {}
+                : motionSafe({
+                    transitionProperty: 'inset-inline-start',
+                    transitionDuration: `${duration}ms`,
+                    transitionTimingFunction: 'ease',
+                })),
+        });
+    }, ...(ngDevMode ? [{ debugName: "thumbClass" }] : /* istanbul ignore next */ []));
+    tooltipClass = computed(() => {
+        const options = this.componentOptions();
+        const colors = this.theme.colors();
+        return css({
+            position: 'absolute',
+            bottom: '100%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            marginBottom: 4,
+            padding: '2px 6px',
+            whiteSpace: 'nowrap',
+            pointerEvents: 'none',
+            opacity: 0,
+            backgroundColor: colors[options.tooltipColor ?? 'inverse-surface'],
+            borderRadius: this.theme.radii()[options.tooltipBorderRadius ?? 'xs'],
+            ...this.theme.color(options.tooltipTextColor ?? 'on-inverse-surface'),
+            ...this.theme.typeface(options.labelTypeface ?? 'label'),
+            ...this.theme.boxShadow(options.tooltipShadow ?? 'menu'),
+            // Shown on hover and focus, and throughout a drag.
+            '[role="slider"]:hover > &, [role="slider"]:focus-visible > &': { opacity: 1 },
+        });
+    }, ...(ngDevMode ? [{ debugName: "tooltipClass" }] : /* istanbul ignore next */ []));
+    labelsClass = computed(() => {
+        const options = this.componentOptions();
+        const target = options.minTouchTarget ?? 24;
+        return css({
+            position: 'relative',
+            height: 18,
+            marginInline: target / 2,
+        });
+    }, ...(ngDevMode ? [{ debugName: "labelsClass" }] : /* istanbul ignore next */ []));
+    labelClass = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            position: 'absolute',
+            transform: 'translateX(-50%)',
+            whiteSpace: 'nowrap',
+            ...this.theme.color(options.labelColor ?? 'on-surface-variant'),
+            ...this.theme.typeface(options.labelTypeface ?? 'label'),
+        });
+    }, ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
+    /** Narrow enough that the track keeps most of the row. */
+    readoutFieldClass = computed(() => css({ flex: 'none', width: 130 }), ...(ngDevMode ? [{ debugName: "readoutFieldClass" }] : /* istanbul ignore next */ []));
+    readoutClass = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            flex: 'none',
+            minWidth: '4ch',
+            textAlign: 'end',
+            fontVariantNumeric: 'tabular-nums',
+            ...this.theme.color(options.labelColor ?? 'on-surface-variant'),
+            ...this.theme.typeface(options.labelTypeface ?? 'label'),
+        });
+    }, ...(ngDevMode ? [{ debugName: "readoutClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSliderComponent, isStandalone: true, selector: "uni-slider, Slider", 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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: false, transformFunction: null }, marks: { classPropertyName: "marks", publicName: "marks", isSignal: true, isRequired: false, transformFunction: null }, snapToMarks: { classPropertyName: "snapToMarks", publicName: "snapToMarks", isSignal: true, isRequired: false, transformFunction: null }, valueDisplay: { classPropertyName: "valueDisplay", publicName: "valueDisplay", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, minGap: { classPropertyName: "minGap", publicName: "minGap", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", sliding: "sliding", changed: "changed" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'slider' }], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "thumbRefs", predicate: ["thumb"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Range mode is two questions, so it is a group with two tab stops; single\n     mode needs no wrapper role \u2014 the thumb itself is the control. -->\n<div\n  [class]=\"rootClass()\"\n  [attr.role]=\"isRange() ? 'group' : null\"\n  [attr.aria-label]=\"isRange() ? label() : null\"\n>\n  <div [class]=\"rowClass()\">\n    <!-- Pointer move/up ride the track because it holds the pointer capture,\n         so a drag that leaves the element still tracks and still releases. -->\n    <div\n      #track\n      [class]=\"trackClass()\"\n      (pointerdown)=\"onTrackPointerDown($event)\"\n      (pointermove)=\"onTrackPointerMove($event)\"\n      (pointerup)=\"onTrackPointerUp()\"\n      (pointercancel)=\"onTrackPointerUp()\"\n      (lostpointercapture)=\"onTrackPointerUp()\"\n    >\n      <div\n        [class]=\"fillClass()\"\n        [style.inset-inline-start.%]=\"fillStart()\"\n        [style.inset-inline-end.%]=\"fillEnd()\"\n      ></div>\n\n      @for (mark of marks(); track mark.value) {\n        <div [class]=\"markClass()\" [style.inset-inline-start.%]=\"percentOf(mark.value)\"></div>\n      }\n\n      @for (index of thumbIndexes(); track index) {\n        <div\n          #thumb\n          role=\"slider\"\n          tabindex=\"0\"\n          [attr.data-thumb]=\"index\"\n          [class]=\"thumbClass()\"\n          [style.inset-inline-start.%]=\"percentOf(thumbValue(index))\"\n          [attr.aria-label]=\"thumbLabel(index)\"\n          [attr.aria-valuenow]=\"thumbValue(index)\"\n          [attr.aria-valuemin]=\"thumbMin(index)\"\n          [attr.aria-valuemax]=\"thumbMax(index)\"\n          [attr.aria-valuetext]=\"valueText(thumbValue(index))\"\n          [attr.aria-orientation]=\"'horizontal'\"\n          [attr.aria-disabled]=\"disabled() ? true : null\"\n          [attr.aria-invalid]=\"showError() ? true : null\"\n          [attr.aria-required]=\"required() ? true : null\"\n          [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n          (keydown)=\"onThumbKeydown($event, index)\"\n          (keyup)=\"onThumbKeyup(index)\"\n          (blur)=\"onThumbBlur()\"\n        >\n          @if (valueDisplay() === 'tooltip') {\n            <span [class]=\"tooltipClass()\" aria-hidden=\"true\">\n              {{ valueText(thumbValue(index)) }}\n            </span>\n          }\n        </div>\n      }\n    </div>\n\n    @if (showReadoutField()) {\n      <!-- The field is the slider's precise-entry escape hatch: drag for the\n           ballpark, type for the exact value. It carries its own label because\n           it is a second tab stop, and the thumb's ARIA already names the\n           slider itself. -->\n      <uni-number-input\n        [class]=\"readoutFieldClass()\"\n        [label]=\"label() + ' value'\"\n        [value]=\"thumbValue(0)\"\n        [min]=\"resolvedMin()\"\n        [max]=\"resolvedMax()\"\n        [step]=\"step()\"\n        [decimals]=\"readoutDecimals()\"\n        [disabled]=\"disabled()\"\n        align=\"end\"\n        (valueChange)=\"onReadoutValue($event)\"\n      />\n    }\n\n    @if (valueDisplay() === 'inline') {\n      <!-- Duplicated from aria-valuetext, so it is hidden from the reader. -->\n      <span [class]=\"readoutClass()\" aria-hidden=\"true\">\n        @if (isRange()) {\n          {{ valueText(lowValue()) }} \u2013 {{ valueText(highValue()) }}\n        } @else {\n          {{ valueText(thumbValue(0)) }}\n        }\n      </span>\n    }\n  </div>\n\n  @if (hasMarkLabels()) {\n    <!-- Presentational: the text is folded into aria-valuetext at the matching\n         value rather than being separately focusable. -->\n    <div [class]=\"labelsClass()\" role=\"presentation\">\n      @for (mark of marks(); track mark.value) {\n        @if (mark.label) {\n          <span [class]=\"labelClass()\" [style.inset-inline-start.%]=\"percentOf(mark.value)\">\n            {{ mark.label }}\n          </span>\n        }\n      }\n    </div>\n  }\n\n  <!-- Fences and swaps only; ordinary movement is already narrated by\n       aria-valuetext, and doubling it is noise. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n", dependencies: [{ kind: "component", type: UniNumberInputComponent, selector: "uni-number-input, NumberInput", inputs: ["value", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "valueAsString", "label", "placeholder", "preset", "currency", "locale", "prefix", "suffix", "decimals", "grouping", "numberFormat", "roundingMode", "align", "valueIsFraction", "unitAnnouncement", "readOnly", "embedded", "min", "max", "step", "largeStep", "smallStep", "stepOrigin", "wrap", "clampOnCommit", "emptyStepValue", "commitOnBlur", "selectOnFocus", "allowExpressions", "wheel", "repeat", "parse", "stepperLayout"], outputs: ["valueChange", "touchedChange", "valueAsStringChange", "stepped", "rejected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSliderComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-slider, Slider', imports: [UniNumberInputComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'slider' }], host: { '[class]': 'className()' }, template: "<!-- Range mode is two questions, so it is a group with two tab stops; single\n     mode needs no wrapper role \u2014 the thumb itself is the control. -->\n<div\n  [class]=\"rootClass()\"\n  [attr.role]=\"isRange() ? 'group' : null\"\n  [attr.aria-label]=\"isRange() ? label() : null\"\n>\n  <div [class]=\"rowClass()\">\n    <!-- Pointer move/up ride the track because it holds the pointer capture,\n         so a drag that leaves the element still tracks and still releases. -->\n    <div\n      #track\n      [class]=\"trackClass()\"\n      (pointerdown)=\"onTrackPointerDown($event)\"\n      (pointermove)=\"onTrackPointerMove($event)\"\n      (pointerup)=\"onTrackPointerUp()\"\n      (pointercancel)=\"onTrackPointerUp()\"\n      (lostpointercapture)=\"onTrackPointerUp()\"\n    >\n      <div\n        [class]=\"fillClass()\"\n        [style.inset-inline-start.%]=\"fillStart()\"\n        [style.inset-inline-end.%]=\"fillEnd()\"\n      ></div>\n\n      @for (mark of marks(); track mark.value) {\n        <div [class]=\"markClass()\" [style.inset-inline-start.%]=\"percentOf(mark.value)\"></div>\n      }\n\n      @for (index of thumbIndexes(); track index) {\n        <div\n          #thumb\n          role=\"slider\"\n          tabindex=\"0\"\n          [attr.data-thumb]=\"index\"\n          [class]=\"thumbClass()\"\n          [style.inset-inline-start.%]=\"percentOf(thumbValue(index))\"\n          [attr.aria-label]=\"thumbLabel(index)\"\n          [attr.aria-valuenow]=\"thumbValue(index)\"\n          [attr.aria-valuemin]=\"thumbMin(index)\"\n          [attr.aria-valuemax]=\"thumbMax(index)\"\n          [attr.aria-valuetext]=\"valueText(thumbValue(index))\"\n          [attr.aria-orientation]=\"'horizontal'\"\n          [attr.aria-disabled]=\"disabled() ? true : null\"\n          [attr.aria-invalid]=\"showError() ? true : null\"\n          [attr.aria-required]=\"required() ? true : null\"\n          [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n          (keydown)=\"onThumbKeydown($event, index)\"\n          (keyup)=\"onThumbKeyup(index)\"\n          (blur)=\"onThumbBlur()\"\n        >\n          @if (valueDisplay() === 'tooltip') {\n            <span [class]=\"tooltipClass()\" aria-hidden=\"true\">\n              {{ valueText(thumbValue(index)) }}\n            </span>\n          }\n        </div>\n      }\n    </div>\n\n    @if (showReadoutField()) {\n      <!-- The field is the slider's precise-entry escape hatch: drag for the\n           ballpark, type for the exact value. It carries its own label because\n           it is a second tab stop, and the thumb's ARIA already names the\n           slider itself. -->\n      <uni-number-input\n        [class]=\"readoutFieldClass()\"\n        [label]=\"label() + ' value'\"\n        [value]=\"thumbValue(0)\"\n        [min]=\"resolvedMin()\"\n        [max]=\"resolvedMax()\"\n        [step]=\"step()\"\n        [decimals]=\"readoutDecimals()\"\n        [disabled]=\"disabled()\"\n        align=\"end\"\n        (valueChange)=\"onReadoutValue($event)\"\n      />\n    }\n\n    @if (valueDisplay() === 'inline') {\n      <!-- Duplicated from aria-valuetext, so it is hidden from the reader. -->\n      <span [class]=\"readoutClass()\" aria-hidden=\"true\">\n        @if (isRange()) {\n          {{ valueText(lowValue()) }} \u2013 {{ valueText(highValue()) }}\n        } @else {\n          {{ valueText(thumbValue(0)) }}\n        }\n      </span>\n    }\n  </div>\n\n  @if (hasMarkLabels()) {\n    <!-- Presentational: the text is folded into aria-valuetext at the matching\n         value rather than being separately focusable. -->\n    <div [class]=\"labelsClass()\" role=\"presentation\">\n      @for (mark of marks(); track mark.value) {\n        @if (mark.label) {\n          <span [class]=\"labelClass()\" [style.inset-inline-start.%]=\"percentOf(mark.value)\">\n            {{ mark.label }}\n          </span>\n        }\n      }\n    </div>\n  }\n\n  <!-- Fences and swaps only; ordinary movement is already narrated by\n       aria-valuetext, and doubling it is noise. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], largeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeStep", required: false }] }], origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: false }] }], marks: [{ type: i0.Input, args: [{ isSignal: true, alias: "marks", required: false }] }], snapToMarks: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToMarks", required: false }] }], valueDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueDisplay", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], minGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "minGap", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sliding: [{ type: i0.Output, args: ["sliding"] }], changed: [{ type: i0.Output, args: ["changed"] }], trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], thumbRefs: [{ type: i0.ViewChildren, args: ['thumb', { isSignal: true }] }] } });
+
+/**
+ * Two linked numeric fields in one chrome, with one `{ start, end }` value —
+ * price filters, thresholds, tolerances.
+ *
+ * `start`/`end` deliberately match `UniDateRange`, so the library has one range
+ * vocabulary, and they avoid colliding with the `min`/`max` **inputs**, which
+ * mean the fence rather than the value.
+ *
+ * It owns its commit path rather than nesting two `uni-number-input`s, because
+ * the two behaviours the spec asks for need *different* bounds: a stepper must
+ * be fenced at the other end, while a typed commit must reach the parent
+ * un-clamped so a backwards range can be swapped instead of destroyed. A child
+ * field applies one bound pair to both. The arithmetic, parsing and formatting
+ * are still the cdk's, shared with every other numeric control.
+ */
+class UniNumberRangeInputComponent extends BaseComponent {
+    // --- Signal Forms block (explicit per AGENTS.md, not a base class) --------
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    // --- Configuration -------------------------------------------------------
+    /** Names the group, e.g. "Price range". */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    startLabel = input('Minimum', ...(ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []));
+    endLabel = input('Maximum', ...(ngDevMode ? [{ debugName: "endLabel" }] : /* istanbul ignore next */ []));
+    // Forwarded to both parts, so the two ends always read alike.
+    preset = input('decimal', ...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
+    currency = input(...(ngDevMode ? [undefined, { debugName: "currency" }] : /* istanbul ignore next */ []));
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
+    suffix = input(...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
+    decimals = input(...(ngDevMode ? [undefined, { debugName: "decimals" }] : /* istanbul ignore next */ []));
+    grouping = input(...(ngDevMode ? [undefined, { debugName: "grouping" }] : /* istanbul ignore next */ []));
+    roundingMode = input('half-up', ...(ngDevMode ? [{ debugName: "roundingMode" }] : /* istanbul ignore next */ []));
+    placeholderStart = input(...(ngDevMode ? [undefined, { debugName: "placeholderStart" }] : /* istanbul ignore next */ []));
+    placeholderEnd = input(...(ngDevMode ? [undefined, { debugName: "placeholderEnd" }] : /* istanbul ignore next */ []));
+    // `min`/`max` are part of the FormValueControl contract — Signal Forms syncs
+    // them from min()/max() validators — so their type must admit undefined.
+    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Enforced distance between the two ends. */
+    minGap = input(...(ngDevMode ? [undefined, { debugName: "minGap" }] : /* istanbul ignore next */ []));
+    // --- Events --------------------------------------------------------------
+    /** The ends were entered backwards and have been exchanged. */
+    swapped = output();
+    /** A typed commit on one end could not be read; its text stays in place. */
+    rejected = output();
+    inputRefs = viewChildren('field', ...(ngDevMode ? [{ debugName: "inputRefs" }] : /* istanbul ignore next */ []));
+    srOnly = css(visuallyHidden);
+    announcer = createAnnouncer();
+    hintId = uniqueId('uni-number-range-hint');
+    groupId = uniqueId('uni-number-range');
+    /** Uncommitted text per part. `null` means "show the committed value". */
+    drafts = signal({
+        start: null,
+        end: null,
+    }, ...(ngDevMode ? [{ debugName: "drafts" }] : /* istanbul ignore next */ []));
+    focusedPart = signal(null, ...(ngDevMode ? [{ debugName: "focusedPart" }] : /* istanbul ignore next */ []));
+    invalidPart = signal(null, ...(ngDevMode ? [{ debugName: "invalidPart" }] : /* istanbul ignore next */ []));
+    parts = ['start', 'end'];
+    fieldChrome = this.theme.getComponentOptions('input');
+    format = computed(() => resolveNumberFormat({
+        preset: this.preset(),
+        currency: this.currency(),
+        locale: this.locale() ?? (document.documentElement.lang || navigator.language || 'en-US'),
+        decimals: this.decimals(),
+        grouping: this.grouping(),
+        prefix: this.prefix(),
+        suffix: this.suffix(),
+        roundingMode: this.roundingMode(),
+        min: this.min(),
+    }), ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** Form-level error, which belongs to both ends. */
+    formError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "formError" }] : /* istanbul ignore next */ []));
+    /**
+     * Box-level error. A refused draft in *one* end flags the shared chrome, but
+     * must not flag the other end's input — that end is fine.
+     */
+    showError = computed(() => this.formError() || this.invalidPart() != null, ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => [this.ariaDescribedBy(), this.hintId].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    // --- Per-part reads -------------------------------------------------------
+    /** The committed canonical decimal for a part, or `null` when that end is open. */
+    canonicalOf(part) {
+        const range = this.value();
+        const raw = part === 'start' ? range?.start : range?.end;
+        return raw == null ? null : toDecimal(raw);
+    }
+    valueOf(part) {
+        const range = this.value();
+        return (part === 'start' ? range?.start : range?.end) ?? null;
+    }
+    displayText(part) {
+        const draft = this.drafts()[part];
+        if (draft != null)
+            return draft;
+        const canonical = this.canonicalOf(part);
+        if (canonical == null)
+            return '';
+        return this.focusedPart() === part
+            ? rawNumberText(canonical, this.format())
+            : formatNumber(canonical, this.format());
+    }
+    partLabel(part) {
+        return `${this.label()}, ${part === 'start' ? this.startLabel() : this.endLabel()}`;
+    }
+    valueTextOf(part) {
+        return speakNumber(this.canonicalOf(part), this.format());
+    }
+    isInvalid(part) {
+        return this.invalidPart() === part;
+    }
+    // --- Fences ---------------------------------------------------------------
+    /** Exact `a ± b` without a float, for the gap arithmetic. */
+    shiftBy(value, by, direction) {
+        const scale = Math.max(decimalScale(value), decimalScale(by));
+        const moved = toScaled(value, scale) + BigInt(direction) * toScaled(by, scale);
+        return fromScaled(moved, scale);
+    }
+    /**
+     * The fence a part's **stepping** and its ARIA see: the other end, held off
+     * by `minGap`, intersected with the outer bounds. This is deliberately
+     * tighter than what a typed commit is measured against — the steppers must
+     * not walk one end through the other, while typing a backwards range should
+     * be swapped rather than clamped away.
+     */
+    stepFence(part) {
+        const gap = toDecimal(this.minGap() ?? 0);
+        const outerMin = this.min();
+        const outerMax = this.max();
+        if (part === 'start') {
+            const other = this.canonicalOf('end');
+            if (other == null)
+                return { min: outerMin, max: outerMax };
+            const cap = this.shiftBy(other, gap, -1);
+            const capped = outerMax != null && compareDecimal(cap, toDecimal(outerMax)) > 0 ? outerMax : Number(cap);
+            return { min: outerMin, max: capped };
+        }
+        const other = this.canonicalOf('start');
+        if (other == null)
+            return { min: outerMin, max: outerMax };
+        const floor = this.shiftBy(other, gap, 1);
+        const floored = outerMin != null && compareDecimal(floor, toDecimal(outerMin)) < 0 ? outerMin : Number(floor);
+        return { min: floored, max: outerMax };
+    }
+    // --- Writing --------------------------------------------------------------
+    writeRange(start, end) {
+        if (start == null && end == null) {
+            this.value.set(null);
+            return;
+        }
+        this.value.set({
+            ...(start == null ? {} : { start: Number(start) }),
+            ...(end == null ? {} : { end: Number(end) }),
+        });
+    }
+    onInput(part, text) {
+        this.drafts.update((drafts) => ({ ...drafts, [part]: text }));
+        if (this.invalidPart() === part)
+            this.invalidPart.set(null);
+    }
+    /**
+     * Commit one part. Out-of-range clamps to the **outer** bounds only, so the
+     * other end never destroys what was typed; the ends are then reconciled.
+     */
+    commitPart(part) {
+        const draft = this.drafts()[part];
+        if (draft == null)
+            return;
+        const result = parseNumber(draft, this.format(), { currency: this.currency() });
+        if (result.status === 'error') {
+            this.invalidPart.set(part);
+            this.rejected.emit({ part, raw: draft, reason: result.reason });
+            this.announcer.announce(`${draft} is not a number.`);
+            return;
+        }
+        this.drafts.update((drafts) => ({ ...drafts, [part]: null }));
+        this.invalidPart.set(null);
+        let start = this.canonicalOf('start');
+        let end = this.canonicalOf('end');
+        if (result.status === 'empty') {
+            if (part === 'start')
+                start = null;
+            else
+                end = null;
+            this.writeRange(start, end);
+            return;
+        }
+        const settled = clampDecimal(settleNumber(result.value, this.format()), this.min(), this.max()).value;
+        if (part === 'start')
+            start = settled;
+        else
+            end = settled;
+        this.reconcile(part, start, end);
+    }
+    /**
+     * Put the two ends in order. A backwards pair is **swapped**, not refused —
+     * the same rule `uni-calendar` applies to a backwards date range, because the
+     * user pointed at the range they meant. Otherwise `minGap` is honoured by
+     * pushing the end that was just edited back to the boundary, which is what
+     * makes stepping behave as a fence rather than dragging the other end along.
+     */
+    reconcile(edited, start, end) {
+        if (start != null && end != null) {
+            if (compareDecimal(start, end) > 0) {
+                const swapped = { start: Number(end), end: Number(start) };
+                this.value.set(swapped);
+                this.swapped.emit(swapped);
+                this.announcer.announce(`Range ${formatNumber(end, this.format())} to ${formatNumber(start, this.format())}. Ends swapped.`);
+                return;
+            }
+            const gap = toDecimal(this.minGap() ?? 0);
+            if (Number(gap) > 0) {
+                const distance = this.shiftBy(end, start, -1);
+                if (compareDecimal(distance, gap) < 0) {
+                    if (edited === 'end')
+                        end = this.shiftBy(start, gap, 1);
+                    else
+                        start = this.shiftBy(end, gap, -1);
+                    this.announcer.announce(`Kept ${formatNumber(gap, this.format())} between the ends.`);
+                }
+            }
+        }
+        this.writeRange(start, end);
+    }
+    // --- Stepping -------------------------------------------------------------
+    applyStep(part, direction, large = false) {
+        if (this.disabled())
+            return;
+        if (this.drafts()[part] != null)
+            this.commitPart(part);
+        const fence = this.stepFence(part);
+        const current = this.canonicalOf(part);
+        if (current == null) {
+            const seed = toDecimal(fence.min ?? this.min() ?? 0);
+            this.reconcile(part, part === 'start' ? seed : this.canonicalOf('start'), part === 'end' ? seed : this.canonicalOf('end'));
+            this.announceValue(part);
+            return;
+        }
+        const next = stepDecimal(current, direction, {
+            step: large ? this.step() * 10 : this.step(),
+            min: fence.min,
+            max: fence.max,
+            stepOrigin: 'min',
+        });
+        if (next === current) {
+            const bound = direction > 0 ? fence.max : fence.min;
+            if (bound != null) {
+                this.announcer.announce(`${direction > 0 ? 'Maximum' : 'Minimum'}, ${bound}.`);
+            }
+            return;
+        }
+        this.reconcile(part, part === 'start' ? next : this.canonicalOf('start'), part === 'end' ? next : this.canonicalOf('end'));
+        this.announceValue(part);
+    }
+    announceValue(part) {
+        this.announcer.announce(`${this.valueTextOf(part)}.`);
+    }
+    // --- Events ---------------------------------------------------------------
+    onFocus(part) {
+        this.focusedPart.set(part);
+    }
+    onBlur(part) {
+        if (this.focusedPart() === part)
+            this.focusedPart.set(null);
+        this.touched.set(true);
+        this.commitPart(part);
+    }
+    onKeydown(event, part) {
+        const fence = this.stepFence(part);
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                this.applyStep(part, 1, event.shiftKey);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.applyStep(part, -1, event.shiftKey);
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                this.applyStep(part, 1, true);
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                this.applyStep(part, -1, true);
+                break;
+            case 'Home':
+                if (fence.min == null)
+                    return;
+                event.preventDefault();
+                this.drafts.update((d) => ({ ...d, [part]: null }));
+                this.reconcile(part, part === 'start' ? toDecimal(fence.min) : this.canonicalOf('start'), part === 'end' ? toDecimal(fence.min) : this.canonicalOf('end'));
+                break;
+            case 'End':
+                if (fence.max == null)
+                    return;
+                event.preventDefault();
+                this.drafts.update((d) => ({ ...d, [part]: null }));
+                this.reconcile(part, part === 'start' ? toDecimal(fence.max) : this.canonicalOf('start'), part === 'end' ? toDecimal(fence.max) : this.canonicalOf('end'));
+                break;
+            case 'Enter':
+                if (this.drafts()[part] != null)
+                    event.preventDefault();
+                this.commitPart(part);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.drafts.update((d) => ({ ...d, [part]: null }));
+                this.invalidPart.set(null);
+                break;
+            case 'Tab':
+                this.commitPart(part);
+                break;
+        }
+    }
+    // --- Styling --------------------------------------------------------------
+    className = computed(() => css({ display: 'block' }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    rowClass = computed(() => {
+        const options = this.componentOptions();
+        return css([
+            {
+                display: 'flex',
+                alignItems: 'center',
+                width: '100%',
+                height: '100%',
+            },
+            this.theme.gap(options.partGap ?? 'sm'),
+            // Both insets ride the row, not the `<input>`s: uni-input-box styles
+            // `& input` at a higher specificity than this class can reach, so an
+            // inset set on an input is silently overridden. See `managedInset`,
+            // which is why the box is not applying the leading one either. There are
+            // never steppers here, so the trailing edge always gets one — otherwise
+            // the upper end's suffix sits against the border.
+            this.theme.paddingLeft(this.fieldChrome().paddingLeft),
+            this.theme.paddingRight(this.fieldChrome().paddingLeft),
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+    /** Each end is its own `[prefix][number][suffix]` group. */
+    partWrapClass = computed(() => {
+        const options = this.componentOptions();
+        return css([
+            { display: 'flex', alignItems: 'center', flex: '1 1 0', minWidth: 0 },
+            this.theme.gap(options.affixGap ?? 'xs'),
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "partWrapClass" }] : /* istanbul ignore next */ []));
+    affixClass = computed(() => {
+        const options = this.componentOptions();
+        return css([
+            { flex: 'none', userSelect: 'none' },
+            this.theme.color(options.affixColor ?? 'on-primary-surface-variant'),
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "affixClass" }] : /* istanbul ignore next */ []));
+    partClass = computed(() => css([this.partBase()]), ...(ngDevMode ? [{ debugName: "partClass" }] : /* istanbul ignore next */ []));
+    partBase() {
+        return {
+            flex: '1 1 0',
+            minWidth: 0,
+            border: 0,
+            outline: 'none',
+            background: 'transparent',
+            color: 'inherit',
+            font: 'inherit',
+            padding: 0,
+            fontVariantNumeric: 'tabular-nums',
+        };
+    }
+    invalidClass = computed(() => {
+        // Colour alone cannot carry "this is not a number" (WCAG 1.4.1).
+        return css({
+            textDecoration: 'underline dashed',
+            textUnderlineOffset: 3,
+            textDecorationColor: this.theme.colors()['warn'],
+        });
+    }, ...(ngDevMode ? [{ debugName: "invalidClass" }] : /* istanbul ignore next */ []));
+    dividerClass = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            flex: 'none',
+            userSelect: 'none',
+            ...this.theme.color(options.dividerColor ?? 'outline'),
+        });
+    }, ...(ngDevMode ? [{ debugName: "dividerClass" }] : /* istanbul ignore next */ []));
+    dividerText = computed(() => this.componentOptions().dividerText ?? '–', ...(ngDevMode ? [{ debugName: "dividerText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniNumberRangeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniNumberRangeInputComponent, isStandalone: true, selector: "uni-number-range-input, NumberRangeInput", 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 }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, roundingMode: { classPropertyName: "roundingMode", publicName: "roundingMode", isSignal: true, isRequired: false, transformFunction: null }, placeholderStart: { classPropertyName: "placeholderStart", publicName: "placeholderStart", isSignal: true, isRequired: false, transformFunction: null }, placeholderEnd: { classPropertyName: "placeholderEnd", publicName: "placeholderEnd", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minGap: { classPropertyName: "minGap", publicName: "minGap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", swapped: "swapped", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'numberRangeInput' }], viewQueries: [{ propertyName: "inputRefs", predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- One label names the group; the parts are named \"{label}, Minimum\" and\n     \"{label}, Maximum\". Two tab stops, honestly \u2014 it is two questions. -->\n<div role=\"group\" [attr.aria-label]=\"label()\" [attr.aria-describedby]=\"describedBy()\">\n  <uni-input-box\n    [error]=\"showError()\"\n    [disabled]=\"disabled()\"\n    [fullWidth]=\"true\"\n    [managedInset]=\"true\"\n  >\n    <div [class]=\"rowClass()\">\n      @for (part of parts; track part) {\n        @if (part === 'end') {\n          <!-- Punctuation between two numbers, not a glyph: aria-hidden, since\n               the two parts are already named minimum and maximum. -->\n          <span [class]=\"dividerClass()\" aria-hidden=\"true\">{{ dividerText() }}</span>\n        }\n\n        <span [class]=\"partWrapClass()\">\n          <!-- Adornments, not text: outside the <input> so the caret,\n               select-all and paste never step over them, and aria-hidden\n               because aria-valuetext already speaks them. -->\n          @if (format().prefix) {\n            <span [class]=\"affixClass()\" aria-hidden=\"true\">{{ format().prefix }}</span>\n          }\n\n          <input\n            #field\n            type=\"text\"\n            role=\"spinbutton\"\n            autocomplete=\"off\"\n            [class]=\"partClass() + (isInvalid(part) ? ' ' + invalidClass() : '')\"\n            [value]=\"displayText(part)\"\n            [disabled]=\"disabled()\"\n            [attr.inputmode]=\"format().inputMode\"\n            [attr.placeholder]=\"\n              (part === 'start' ? placeholderStart() : placeholderEnd()) ?? null\n            \"\n            [attr.aria-label]=\"partLabel(part)\"\n            [attr.aria-valuenow]=\"valueOf(part)\"\n            [attr.aria-valuemin]=\"stepFence(part).min ?? null\"\n            [attr.aria-valuemax]=\"stepFence(part).max ?? null\"\n            [attr.aria-valuetext]=\"valueTextOf(part)\"\n            [attr.aria-invalid]=\"isInvalid(part) || formError() ? true : null\"\n            [attr.aria-required]=\"required() ? true : null\"\n            (input)=\"onInput(part, $any($event.target).value)\"\n            (keydown)=\"onKeydown($event, part)\"\n            (focus)=\"onFocus(part)\"\n            (blur)=\"onBlur(part)\"\n          />\n\n          @if (format().suffix) {\n            <span [class]=\"affixClass()\" aria-hidden=\"true\">{{ format().suffix }}</span>\n          }\n        </span>\n      }\n    </div>\n  </uni-input-box>\n</div>\n\n<!-- Said once for the whole field rather than on both ends. -->\n<span [id]=\"hintId\" [class]=\"srOnly\">\n  Two values. Use the up and down arrow keys to change either end; entering them\n  the wrong way round swaps them.\n</span>\n\n<!-- Swaps, gap corrections, fences and refusals are each otherwise silent. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniNumberRangeInputComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-number-range-input, NumberRangeInput', imports: [UniInputBoxComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'numberRangeInput' }], host: { '[class]': 'className()' }, template: "<!-- One label names the group; the parts are named \"{label}, Minimum\" and\n     \"{label}, Maximum\". Two tab stops, honestly \u2014 it is two questions. -->\n<div role=\"group\" [attr.aria-label]=\"label()\" [attr.aria-describedby]=\"describedBy()\">\n  <uni-input-box\n    [error]=\"showError()\"\n    [disabled]=\"disabled()\"\n    [fullWidth]=\"true\"\n    [managedInset]=\"true\"\n  >\n    <div [class]=\"rowClass()\">\n      @for (part of parts; track part) {\n        @if (part === 'end') {\n          <!-- Punctuation between two numbers, not a glyph: aria-hidden, since\n               the two parts are already named minimum and maximum. -->\n          <span [class]=\"dividerClass()\" aria-hidden=\"true\">{{ dividerText() }}</span>\n        }\n\n        <span [class]=\"partWrapClass()\">\n          <!-- Adornments, not text: outside the <input> so the caret,\n               select-all and paste never step over them, and aria-hidden\n               because aria-valuetext already speaks them. -->\n          @if (format().prefix) {\n            <span [class]=\"affixClass()\" aria-hidden=\"true\">{{ format().prefix }}</span>\n          }\n\n          <input\n            #field\n            type=\"text\"\n            role=\"spinbutton\"\n            autocomplete=\"off\"\n            [class]=\"partClass() + (isInvalid(part) ? ' ' + invalidClass() : '')\"\n            [value]=\"displayText(part)\"\n            [disabled]=\"disabled()\"\n            [attr.inputmode]=\"format().inputMode\"\n            [attr.placeholder]=\"\n              (part === 'start' ? placeholderStart() : placeholderEnd()) ?? null\n            \"\n            [attr.aria-label]=\"partLabel(part)\"\n            [attr.aria-valuenow]=\"valueOf(part)\"\n            [attr.aria-valuemin]=\"stepFence(part).min ?? null\"\n            [attr.aria-valuemax]=\"stepFence(part).max ?? null\"\n            [attr.aria-valuetext]=\"valueTextOf(part)\"\n            [attr.aria-invalid]=\"isInvalid(part) || formError() ? true : null\"\n            [attr.aria-required]=\"required() ? true : null\"\n            (input)=\"onInput(part, $any($event.target).value)\"\n            (keydown)=\"onKeydown($event, part)\"\n            (focus)=\"onFocus(part)\"\n            (blur)=\"onBlur(part)\"\n          />\n\n          @if (format().suffix) {\n            <span [class]=\"affixClass()\" aria-hidden=\"true\">{{ format().suffix }}</span>\n          }\n        </span>\n      }\n    </div>\n  </uni-input-box>\n</div>\n\n<!-- Said once for the whole field rather than on both ends. -->\n<span [id]=\"hintId\" [class]=\"srOnly\">\n  Two values. Use the up and down arrow keys to change either end; entering them\n  the wrong way round swaps them.\n</span>\n\n<!-- Swaps, gap corrections, fences and refusals are each otherwise silent. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }], preset: [{ type: i0.Input, args: [{ isSignal: true, alias: "preset", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], grouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouping", required: false }] }], roundingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundingMode", required: false }] }], placeholderStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderStart", required: false }] }], placeholderEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderEnd", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], minGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "minGap", required: false }] }], swapped: [{ type: i0.Output, args: ["swapped"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], inputRefs: [{ type: i0.ViewChildren, args: ['field', { isSignal: true }] }] } });
+
+/**
+ * `− 3 +` for cart lines, table cells and seat counts: the numeric core with no
+ * field chrome, no label and no room for either.
+ *
+ * A separate component rather than a `chrome="bare"` flag on
+ * `uni-number-input`, because this control is defined by what it does *not*
+ * have — presets, affixes, expressions, four stepper layouts — and eight inputs
+ * are easier to write correctly than forty with a list of which ones to leave
+ * alone. The arithmetic, parsing and hold-to-repeat are the cdk's, shared with
+ * the field, so `1,200` and the keyboard map behave identically in both.
+ *
+ * The middle stays a real input by default: typing `12` beats tapping `+`
+ * eleven times. `editable=false` is for read-mostly tables.
+ */
+class UniQuantityStepperComponent extends BaseComponent {
+    // --- Signal Forms block (explicit per AGENTS.md, not a base class) --------
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    // --- Configuration -------------------------------------------------------
+    /**
+     * Accessible name. Never visible and always needed — a cart with six of these
+     * needs "Quantity, Blue T-shirt (M)", not six controls called "Quantity".
+     */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    // `min`/`max` are part of the FormValueControl contract — Signal Forms syncs
+    // them from min()/max() validators — so their type must admit undefined.
+    // Read `resolvedMin()` internally, never `min()`.
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** `false` renders the number as text: read-mostly tables. */
+    editable = input(true, ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    /**
+     * The cart pattern in one attribute: at `min` the decrement button becomes a
+     * remove affordance and emits `removed` rather than stepping. Without it
+     * every shop reimplements the same `value === 1 ? remove() : step(-1)` branch
+     * outside the component.
+     */
+    deleteAtMin = input(false, ...(ngDevMode ? [{ debugName: "deleteAtMin" }] : /* istanbul ignore next */ []));
+    // --- Events --------------------------------------------------------------
+    /**
+     * The remove affordance was activated — the row should come out.
+     *
+     * Named `removed`, not the spec's `emptied`: that word is a native
+     * `HTMLMediaElement` event, which `@angular-eslint/no-output-native` bans for
+     * good reason, and `removed` is already what `uni-tag` calls this same
+     * request.
+     */
+    removed = output();
+    inputRef = viewChild('field', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    srOnly = css(visuallyHidden);
+    announcer = createAnnouncer();
+    hintId = uniqueId('uni-quantity-stepper');
+    /** Uncommitted text. `null` means "show the committed value". */
+    draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    canonical = computed(() => {
+        const value = this.value();
+        return value == null ? null : toDecimal(value);
+    }, ...(ngDevMode ? [{ debugName: "canonical" }] : /* istanbul ignore next */ []));
+    /** Quantities are plain numbers; precision follows the step. */
+    format = computed(() => resolveNumberFormat({ decimals: [0, decimalScale(toDecimal(this.step()))] }), ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    displayText = computed(() => {
+        const draft = this.draft();
+        if (draft != null)
+            return draft;
+        const canonical = this.canonical();
+        return canonical == null ? '' : formatNumber(canonical, this.format());
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => [this.ariaDescribedBy(), this.hintId].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    // --- Fences ---------------------------------------------------------------
+    /** A quantity has a floor even when a validator has not supplied one. */
+    resolvedMin = computed(() => this.min() ?? 0, ...(ngDevMode ? [{ debugName: "resolvedMin" }] : /* istanbul ignore next */ []));
+    atMin = computed(() => {
+        const canonical = this.canonical();
+        return canonical != null && Number(canonical) <= this.resolvedMin();
+    }, ...(ngDevMode ? [{ debugName: "atMin" }] : /* istanbul ignore next */ []));
+    atMax = computed(() => {
+        const max = this.max();
+        const canonical = this.canonical();
+        return max != null && canonical != null && Number(canonical) >= max;
+    }, ...(ngDevMode ? [{ debugName: "atMax" }] : /* istanbul ignore next */ []));
+    /** At the floor with `deleteAtMin`, the − is a remove control instead. */
+    showDelete = computed(() => this.deleteAtMin() && this.atMin(), ...(ngDevMode ? [{ debugName: "showDelete" }] : /* istanbul ignore next */ []));
+    decrementIcon = computed(() => {
+        const options = this.componentOptions();
+        return this.showDelete()
+            ? (options.deleteIcon ?? 'delete')
+            : (options.decrementIcon ?? 'minus');
+    }, ...(ngDevMode ? [{ debugName: "decrementIcon" }] : /* istanbul ignore next */ []));
+    decrementLabel = computed(() => this.showDelete() ? `Remove ${this.label()}` : `Decrease ${this.label()}`, ...(ngDevMode ? [{ debugName: "decrementLabel" }] : /* istanbul ignore next */ []));
+    // --- Committing -----------------------------------------------------------
+    onInput(text) {
+        this.draft.set(text);
+    }
+    /**
+     * The same parse path as the field, so `1,200` commits as 1200 here too.
+     * Unreadable text reverts rather than being kept: this control has no room to
+     * show an error, and no `rejected` output to report one through.
+     */
+    commitDraft() {
+        const draft = this.draft();
+        if (draft == null)
+            return;
+        const result = parseNumber(draft, this.format());
+        if (result.status !== 'ok') {
+            this.draft.set(null);
+            if (result.status === 'empty')
+                return;
+            this.announcer.announce(`${draft} is not a number.`);
+            return;
+        }
+        const settled = settleNumber(result.value, this.format());
+        const clamped = clampDecimal(settled, this.resolvedMin(), this.max());
+        this.draft.set(null);
+        this.value.set(Number(clamped.value));
+        if (clamped.hit) {
+            const bound = clamped.hit === 'min' ? this.resolvedMin() : this.max();
+            this.announcer.announce(`${clamped.hit === 'min' ? 'Minimum' : 'Maximum'} is ${bound}.`);
+        }
+    }
+    // --- Stepping -------------------------------------------------------------
+    applyStep(direction, announce = true) {
+        if (this.disabled())
+            return;
+        if (this.draft() != null)
+            this.commitDraft();
+        const current = this.canonical();
+        if (current == null) {
+            const seed = toDecimal(this.resolvedMin());
+            this.value.set(Number(seed));
+            if (announce)
+                this.announceValue();
+            return;
+        }
+        const next = stepDecimal(current, direction, {
+            step: this.step(),
+            min: this.resolvedMin(),
+            max: this.max(),
+            stepOrigin: 'min',
+        });
+        if (next === current) {
+            if (announce)
+                this.announceFence(direction);
+            return;
+        }
+        this.value.set(Number(next));
+        if (announce)
+            this.announceValue();
+    }
+    /**
+     * The decrement button has two jobs. Below the floor with `deleteAtMin` it is
+     * a remove control — a single click, with nothing to hold and repeat — so the
+     * press/repeat machinery is skipped entirely in that state.
+     */
+    onDecrementPress(event) {
+        if (this.showDelete())
+            return;
+        this.decrement.press(event);
+    }
+    onDecrementClick() {
+        if (this.disabled() || !this.showDelete())
+            return;
+        this.removed.emit();
+        this.announcer.announce(`${this.label()} removed.`);
+    }
+    announceValue() {
+        this.announcer.announce(`${this.displayText()}.`);
+    }
+    announceFence(direction) {
+        const bound = direction > 0 ? this.max() : this.resolvedMin();
+        if (bound == null)
+            return;
+        this.announcer.announce(`${direction > 0 ? 'Maximum' : 'Minimum'}, ${bound}.`);
+    }
+    // --- Hold to repeat -------------------------------------------------------
+    /** Announced on release only; narrating every intermediate value is noise. */
+    increment = createPressRepeat({
+        onStep: () => this.applyStep(1, false),
+        onRelease: () => this.announceValue(),
+        focus: (button) => this.focusField(button),
+        disabled: () => this.disabled() || this.atMax(),
+    });
+    decrement = createPressRepeat({
+        onStep: () => this.applyStep(-1, false),
+        onRelease: () => this.announceValue(),
+        focus: (button) => this.focusField(button),
+        disabled: () => this.disabled() || this.atMin(),
+    });
+    // --- Keyboard -------------------------------------------------------------
+    onKeydown(event) {
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                this.applyStep(1);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.applyStep(-1);
+                break;
+            case 'Enter':
+                if (this.draft() != null)
+                    event.preventDefault();
+                this.commitDraft();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.draft.set(null);
+                break;
+            case 'Tab':
+                this.commitDraft();
+                break;
+        }
+    }
+    onBlur() {
+        this.touched.set(true);
+        this.commitDraft();
+        this.increment.cancel();
+        this.decrement.cancel();
+    }
+    /**
+     * Focus the field a stepper press should land in. With `editable=false` there
+     * is no field and the buttons are the tab stops, so the pressed button takes
+     * it instead.
+     */
+    focusField(fallback) {
+        const input = this.inputRef()?.nativeElement;
+        if (input)
+            input.focus();
+        else
+            fallback?.focus();
+    }
+    // --- Styling --------------------------------------------------------------
+    className = computed(() => css({ display: 'inline-block' }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Overall height, from the theme's `sizes` block. */
+    height = computed(() => Number(this.style()['height'] ?? 32), ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /**
+     * The shared field chrome, read from the same `input` theme entry
+     * `uni-input-box` resolves. This control has its own container tokens, but the
+     * **focus indicator** has to be the one every other field uses — a stepper
+     * that highlights differently from the field beside it reads as a bug.
+     */
+    fieldChrome = this.theme.getComponentOptions('input');
+    rootClass = computed(() => {
+        const colors = this.theme.colors();
+        const chrome = this.fieldChrome();
+        return css({
+            display: 'inline-flex',
+            alignItems: 'stretch',
+            height: this.height(),
+            // The themed size is the *outer* height, so a md stepper is 32px like the
+            // field beside it rather than 32 plus its border.
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            ...this.theme.backgroundColor(this.disabled() ? chrome.disabledColor : this.containerColor()),
+            ...this.theme.border(this.containerBorder()),
+            ...this.theme.radius(this.containerRadius()),
+            ...(this.showError() ? { borderColor: colors['warn'] } : {}),
+            ...(this.disabled() ? { cursor: 'not-allowed' } : {}),
+            // The middle input clears its own outline (removeInputPlatformStyling),
+            // so the focus indicator belongs on the container — the same `:has()`
+            // rule and the same `input` tokens uni-input-box uses, so a stepper
+            // highlights exactly like the field next to it. Error state wins, to
+            // keep a flagged control visibly flagged while it is being corrected.
+            '&:has(input:focus)': {
+                outline: chrome.focusOutline,
+                outlineOffset: chrome.focusOutlineOffset,
+                ...(this.showError()
+                    ? {}
+                    : {
+                        ...this.theme.border(chrome.focusBorder),
+                        ...this.theme.boxShadow(chrome.focusShadow),
+                        ...this.theme.backgroundColor(chrome.focusColor),
+                    }),
             },
+            // The dividers move with the frame, so a focused control does not end up
+            // amber on the outside and grey down the middle. Falls back to the resting
+            // border, which is a no-op in themes that show focus as an outline.
+            '&:has(input:focus) > input': this.showError()
+                ? {}
+                : {
+                    ...this.theme.borderLeft(chrome.focusBorder ?? this.dividerBorder()),
+                    ...this.theme.borderRight(chrome.focusBorder ?? this.dividerBorder()),
+                },
         });
-    }, ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniSliderComponent, isStandalone: true, selector: "uni-slider", 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'slider' }], usesInheritance: true, ngImport: i0, template: `
-    <input
-      type="range"
-      [class]="inputClass()"
-      [style.--uni-slider-fill]="fillPercent()"
-      [min]="resolvedMin()"
-      [max]="resolvedMax()"
-      [step]="step()"
-      [value]="value()"
-      [disabled]="disabled()"
-      (input)="handleInput($event)"
-      (blur)="markAsTouched()"
-      [attr.aria-label]="label()"
-      [attr.aria-describedby]="ariaDescribedBy() || null"
-    />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    }, ...(ngDevMode ? [{ debugName: "rootClass" }] : /* istanbul ignore next */ []));
+    /** Square at the field height, so the pointer target is legal at every size. */
+    buttonClass = computed(() => {
+        const colors = this.theme.colors();
+        return css({
+            display: 'grid',
+            placeItems: 'center',
+            flex: 'none',
+            width: this.height(),
+            padding: 0,
+            border: 0,
+            background: 'transparent',
+            color: this.disabled() ? colors['on-disabled-surface'] : 'inherit',
+            cursor: this.disabled() ? 'not-allowed' : 'pointer',
+            touchAction: 'none',
+            '&:disabled': { opacity: 0.4, cursor: 'not-allowed' },
+            ...this.theme.focusRing(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "buttonClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Container chrome, defaulting to the shared `input` entry rather than to
+     * hardcoded tokens. It is not a field, but it sits beside them in carts and
+     * table rows, so a theme that restyles `input` must carry it along — the
+     * options below stay as per-component overrides for a deliberately different
+     * look.
+     */
+    containerColor = computed(() => this.componentOptions().color ?? this.fieldChrome().color, ...(ngDevMode ? [{ debugName: "containerColor" }] : /* istanbul ignore next */ []));
+    containerBorder = computed(() => this.componentOptions().border ?? this.fieldChrome().border, ...(ngDevMode ? [{ debugName: "containerBorder" }] : /* istanbul ignore next */ []));
+    containerRadius = computed(() => this.componentOptions().borderRadius ?? this.fieldChrome().borderRadius, ...(ngDevMode ? [{ debugName: "containerRadius" }] : /* istanbul ignore next */ []));
+    /** The rules either side of the value, matching the frame around it. */
+    dividerBorder = computed(() => this.containerBorder(), ...(ngDevMode ? [{ debugName: "dividerBorder" }] : /* istanbul ignore next */ []));
+    /**
+     * Characters the value cell asks the browser to size itself for.
+     *
+     * Load-bearing: a bare `<input>` defaults to `size="20"`, and `flex-basis:
+     * auto` resolves to that intrinsic width — so the control claimed ~230px
+     * instead of the ~100px its buttons and `valueWidth` need, and stole track
+     * width from anything beside it in a grid (`1fr` is `minmax(auto, 1fr)`, and
+     * the `auto` floor includes this). Tracking the content keeps the cell honest
+     * while still letting it grow with the digits, which a fixed `width` would
+     * not. `valueWidth` remains the floor, via `min-width`.
+     */
+    valueSize = computed(() => Math.max(this.displayText().length, 1), ...(ngDevMode ? [{ debugName: "valueSize" }] : /* istanbul ignore next */ []));
+    valueBase() {
+        const options = this.componentOptions();
+        const colors = this.theme.colors();
+        return {
+            flex: '1 1 auto',
+            minWidth: options.valueWidth ?? '3ch',
+            textAlign: 'center',
+            alignSelf: 'stretch',
+            border: 0,
+            background: 'transparent',
+            color: 'inherit',
+            font: 'inherit',
+            padding: 0,
+            outline: 'none',
+            ...(options.tabularNumerals === false ? {} : { fontVariantNumeric: 'tabular-nums' }),
+            // A rule either side, which is what makes the three parts read as one
+            // control rather than three loose ones. It uses the **same token as the
+            // outer border** so the frame reads as one weight — a heavier divider
+            // makes the control look like three stuck together. A theme wanting a
+            // distinct rule overrides just its colour.
+            ...this.theme.borderLeft(this.dividerBorder()),
+            ...this.theme.borderRight(this.dividerBorder()),
+            ...(options.dividerColor
+                ? { borderInlineColor: colors[options.dividerColor] }
+                : {}),
+        };
+    }
+    inputClass = computed(() => css([this.valueBase()]), ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    /** Read-only presentation: centred text on the same grid as the input. */
+    readoutClass = computed(() => css([this.valueBase(), { display: 'grid', placeItems: 'center' }]), ...(ngDevMode ? [{ debugName: "readoutClass" }] : /* istanbul ignore next */ []));
+    glyphSize = computed(() => Math.max(12, Math.round(this.height() / 2)), ...(ngDevMode ? [{ debugName: "glyphSize" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniQuantityStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniQuantityStepperComponent, isStandalone: true, selector: "uni-quantity-stepper, QuantityStepper", 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, deleteAtMin: { classPropertyName: "deleteAtMin", publicName: "deleteAtMin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", removed: "removed" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'quantityStepper' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- With an editable middle the input is the tab stop and the buttons are\n     pointer affordances (tabindex=\"-1\"), exactly as in uni-number-input. With a\n     read-only middle there is nothing else to focus, so the buttons become the\n     tab stops and the group carries the name. -->\n<div\n  [class]=\"rootClass()\"\n  [attr.role]=\"editable() ? null : 'group'\"\n  [attr.aria-label]=\"editable() ? null : label()\"\n>\n  <button\n    type=\"button\"\n    [class]=\"buttonClass()\"\n    [attr.tabindex]=\"editable() ? -1 : null\"\n    [disabled]=\"disabled() || (atMin() && !showDelete())\"\n    [attr.aria-label]=\"decrementLabel()\"\n    (pointerdown)=\"onDecrementPress($event)\"\n    (pointerup)=\"decrement.release()\"\n    (pointercancel)=\"decrement.cancel()\"\n    (lostpointercapture)=\"decrement.release()\"\n    (click)=\"onDecrementClick()\"\n  >\n    <uni-icon [name]=\"decrementIcon()\" [size]=\"glyphSize()\" />\n  </button>\n\n  @if (editable()) {\n    <input\n      #field\n      type=\"text\"\n      role=\"spinbutton\"\n      inputmode=\"numeric\"\n      autocomplete=\"off\"\n      [class]=\"inputClass()\"\n      [attr.size]=\"valueSize()\"\n      [value]=\"displayText()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-valuenow]=\"value() ?? null\"\n      [attr.aria-valuemin]=\"resolvedMin()\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuetext]=\"displayText() || 'Empty'\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"showError() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (input)=\"onInput($any($event.target).value)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n  } @else {\n    <!-- Text, not a control: no role and no tab stop, so a reader reads it as\n         the group's content. -->\n    <span [class]=\"readoutClass()\">{{ displayText() }}</span>\n  }\n\n  <button\n    type=\"button\"\n    [class]=\"buttonClass()\"\n    [attr.tabindex]=\"editable() ? -1 : null\"\n    [disabled]=\"disabled() || atMax()\"\n    [attr.aria-label]=\"'Increase ' + label()\"\n    (pointerdown)=\"increment.press($event)\"\n    (pointerup)=\"increment.release()\"\n    (pointercancel)=\"increment.cancel()\"\n    (lostpointercapture)=\"increment.release()\"\n  >\n    <uni-icon [name]=\"componentOptions().incrementIcon ?? 'plus'\" [size]=\"glyphSize()\" />\n  </button>\n</div>\n\n@if (editable()) {\n  <span [id]=\"hintId\" [class]=\"srOnly\">\n    Use the up and down arrow keys to change the quantity.\n  </span>\n}\n\n<!-- Fences, clamps and removals are otherwise silent. Held stepping announces\n     once, on release. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n", dependencies: [{ 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: UniSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniQuantityStepperComponent, decorators: [{
             type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'uni-slider',
-                    providers: [{ provide: COMPONENT_NAME, useValue: 'slider' }],
-                    template: `
-    <input
-      type="range"
-      [class]="inputClass()"
-      [style.--uni-slider-fill]="fillPercent()"
-      [min]="resolvedMin()"
-      [max]="resolvedMax()"
-      [step]="step()"
-      [value]="value()"
-      [disabled]="disabled()"
-      (input)="handleInput($event)"
-      (blur)="markAsTouched()"
-      [attr.aria-label]="label()"
-      [attr.aria-describedby]="ariaDescribedBy() || null"
-    />
-  `,
-                }]
-        }], 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 }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-quantity-stepper, QuantityStepper', imports: [UniIconComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'quantityStepper' }], host: { '[class]': 'className()' }, template: "<!-- With an editable middle the input is the tab stop and the buttons are\n     pointer affordances (tabindex=\"-1\"), exactly as in uni-number-input. With a\n     read-only middle there is nothing else to focus, so the buttons become the\n     tab stops and the group carries the name. -->\n<div\n  [class]=\"rootClass()\"\n  [attr.role]=\"editable() ? null : 'group'\"\n  [attr.aria-label]=\"editable() ? null : label()\"\n>\n  <button\n    type=\"button\"\n    [class]=\"buttonClass()\"\n    [attr.tabindex]=\"editable() ? -1 : null\"\n    [disabled]=\"disabled() || (atMin() && !showDelete())\"\n    [attr.aria-label]=\"decrementLabel()\"\n    (pointerdown)=\"onDecrementPress($event)\"\n    (pointerup)=\"decrement.release()\"\n    (pointercancel)=\"decrement.cancel()\"\n    (lostpointercapture)=\"decrement.release()\"\n    (click)=\"onDecrementClick()\"\n  >\n    <uni-icon [name]=\"decrementIcon()\" [size]=\"glyphSize()\" />\n  </button>\n\n  @if (editable()) {\n    <input\n      #field\n      type=\"text\"\n      role=\"spinbutton\"\n      inputmode=\"numeric\"\n      autocomplete=\"off\"\n      [class]=\"inputClass()\"\n      [attr.size]=\"valueSize()\"\n      [value]=\"displayText()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-valuenow]=\"value() ?? null\"\n      [attr.aria-valuemin]=\"resolvedMin()\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuetext]=\"displayText() || 'Empty'\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"showError() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (input)=\"onInput($any($event.target).value)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n  } @else {\n    <!-- Text, not a control: no role and no tab stop, so a reader reads it as\n         the group's content. -->\n    <span [class]=\"readoutClass()\">{{ displayText() }}</span>\n  }\n\n  <button\n    type=\"button\"\n    [class]=\"buttonClass()\"\n    [attr.tabindex]=\"editable() ? -1 : null\"\n    [disabled]=\"disabled() || atMax()\"\n    [attr.aria-label]=\"'Increase ' + label()\"\n    (pointerdown)=\"increment.press($event)\"\n    (pointerup)=\"increment.release()\"\n    (pointercancel)=\"increment.cancel()\"\n    (lostpointercapture)=\"increment.release()\"\n  >\n    <uni-icon [name]=\"componentOptions().incrementIcon ?? 'plus'\" [size]=\"glyphSize()\" />\n  </button>\n</div>\n\n@if (editable()) {\n  <span [id]=\"hintId\" [class]=\"srOnly\">\n    Use the up and down arrow keys to change the quantity.\n  </span>\n}\n\n<!-- Fences, clamps and removals are otherwise silent. Held stepping announces\n     once, on release. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], deleteAtMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteAtMin", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], inputRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 /**
  * Compact chip for categories, states, filters and tokens.
@@ -6112,6 +8673,13 @@ class UniTagInputComponent extends BaseComponent {
         has the same geometry but is only the fallback's positioning context. */
     className = computed(() => css({ display: 'block', ...this.anchor.style }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
     wrapperClass = computed(() => css({ position: 'relative' }), ...(ngDevMode ? [{ debugName: "wrapperClass" }] : /* istanbul ignore next */ []));
+    /**
+     * The shared field chrome, from the same `input` theme entry
+     * `uni-input-box` resolves — not a duplicate token, because the inset has to
+     * match every other field or a chip field stops lining up with the text
+     * field above it.
+     */
+    fieldChrome = this.theme.getComponentOptions('input');
     fieldClass = computed(() => {
         const options = this.componentOptions();
         return css({
@@ -6122,6 +8690,14 @@ class UniTagInputComponent extends BaseComponent {
             listStyle: 'none',
             margin: 0,
             padding: 0,
+            // Wrapped chip rows keep clear of the field border; one 24px chip row
+            // plus this padding fills the themed 32px minimum exactly.
+            ...this.theme.paddingTop('xs'),
+            ...this.theme.paddingBottom('xs'),
+            // The leading inset lives here rather than on the inner <input> (see
+            // `managedInset`): the chips are this field's leading edge, and an inset
+            // on the text alone leaves the first chip riding the border.
+            ...this.theme.paddingLeft(this.fieldChrome().paddingLeft),
             ...this.theme.gap(options.chipGap),
         });
     }, ...(ngDevMode ? [{ debugName: "fieldClass" }] : /* istanbul ignore next */ []));
@@ -6137,11 +8713,11 @@ class UniTagInputComponent extends BaseComponent {
     }), ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
     listClass = computed(() => css(listboxPopupStyles(this.theme, this.componentOptions(), { anchor: this.anchor.name })), ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTagInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTagInputComponent, isStandalone: true, selector: "uni-tag-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, parse: { classPropertyName: "parse", publicName: "parse", isSignal: true, isRequired: false, transformFunction: null }, tagVariant: { classPropertyName: "tagVariant", publicName: "tagVariant", isSignal: true, isRequired: false, transformFunction: null }, tagTone: { classPropertyName: "tagTone", publicName: "tagTone", isSignal: true, isRequired: false, transformFunction: null }, tagSize: { classPropertyName: "tagSize", publicName: "tagSize", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", query: "query", added: "added", removed: "removed", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'tagInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "chipRefs", predicate: ["chip"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes only when focus\n     leaves the whole field, not while moving between chips and the input. -->\n<div [class]=\"wrapperClass()\" (focusout)=\"onFocusOut($event)\">\n  <uni-input-box [error]=\"showError()\" height=\"auto\">\n    <ul [class]=\"fieldClass()\">\n      @for (item of value(); track item.value; let i = $index) {\n        <!-- The focusable element is the chip's own button; this <li> only\n             receives keys bubbling up from it, so it must stay out of the tab\n             order (same delegation the menu uses for its roving focus). -->\n        <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n        <li #chip (keydown)=\"onChipKeydown($event, i)\" (dblclick)=\"editChip(i)\">\n          <uni-tag\n            [label]=\"labelOf(item)\"\n            [value]=\"item.value\"\n            [avatarSrc]=\"item.avatarSrc\"\n            [variant]=\"item.invalid ? 'warn' : tagVariant()\"\n            [tone]=\"tagTone()\"\n            [size]=\"tagSize() ?? componentOptions().chipSize ?? 'md'\"\n            [invalid]=\"!!item.invalid\"\n            [disabled]=\"!!item.disabled || disabled()\"\n            [interactive]=\"true\"\n            [removable]=\"!item.disabled && !disabled()\"\n            [controlTabIndex]=\"-1\"\n            (removed)=\"removeAt(i)\"\n          />\n        </li>\n      }\n\n      <li [class]=\"inputClass()\">\n        <!-- The field is one tab stop: chips carry tabindex=\"-1\" and are\n             entered with Backspace/ArrowLeft, so Tab never walks through\n             eight recipients to reach the next control. -->\n        <input\n          #field\n          type=\"text\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          [class]=\"inputClass()\"\n          [disabled]=\"disabled()\"\n          [placeholder]=\"placeholder() ?? ''\"\n          [attr.aria-label]=\"label()\"\n          [attr.aria-expanded]=\"list.open()\"\n          [attr.aria-controls]=\"list.listboxId\"\n          [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          [attr.aria-invalid]=\"showError() ? true : null\"\n          [attr.aria-required]=\"required() ? true : null\"\n          (keydown)=\"onInputKeydown($event)\"\n          (input)=\"onInput($any($event.target).value)\"\n          (paste)=\"onPaste($event)\"\n          (blur)=\"onBlur()\"\n        />\n      </li>\n    </ul>\n  </uni-input-box>\n\n  @if (list.open()) {\n    <ul\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\n      @for (suggestion of visibleSuggestions(); track suggestion.value; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"i === list.activeIndex()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectSuggestion(suggestion)\"\n        >\n          {{ labelOf(suggestion) }}\n          @if (suggestion.description) {\n            <span [class]=\"srOnly\">{{ suggestion.description }}</span>\n          }\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Said once for the whole field, rather than every chip advertising it. -->\n  <span [id]=\"hintId\" [class]=\"srOnly\">\n    Press Backspace to reach the last entry, then Backspace again to remove it.\n  </span>\n\n  <!-- Adds and removes are otherwise silent for a screen reader. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow"] }, { kind: "component", type: UniTagComponent, selector: "uni-tag", inputs: ["size", "tone", "label", "value", "maxWidth", "avatarSrc", "avatarName", "iconName", "symbolName", "dot", "removable", "interactive", "selected", "invalid", "disabled", "removeLabel", "controlTabIndex"], outputs: ["removed", "activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTagInputComponent, isStandalone: true, selector: "uni-tag-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, commitOnBlur: { classPropertyName: "commitOnBlur", publicName: "commitOnBlur", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, parse: { classPropertyName: "parse", publicName: "parse", isSignal: true, isRequired: false, transformFunction: null }, tagVariant: { classPropertyName: "tagVariant", publicName: "tagVariant", isSignal: true, isRequired: false, transformFunction: null }, tagTone: { classPropertyName: "tagTone", publicName: "tagTone", isSignal: true, isRequired: false, transformFunction: null }, tagSize: { classPropertyName: "tagSize", publicName: "tagSize", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", query: "query", added: "added", removed: "removed", rejected: "rejected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'tagInput' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "chipRefs", predicate: ["chip"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Focusout rides the bubbling event so the list closes only when focus\n     leaves the whole field, not while moving between chips and the input. -->\n<div [class]=\"wrapperClass()\" (focusout)=\"onFocusOut($event)\">\n  <!-- The chip row owns the leading inset, so the first chip sits at the\n       field's edge instead of riding its border. -->\n  <uni-input-box [error]=\"showError()\" height=\"auto\" [managedInset]=\"true\">\n    <ul [class]=\"fieldClass()\">\n      @for (item of value(); track item.value; let i = $index) {\n        <!-- The focusable element is the chip's own button; this <li> only\n             receives keys bubbling up from it, so it must stay out of the tab\n             order (same delegation the menu uses for its roving focus). -->\n        <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n        <li #chip (keydown)=\"onChipKeydown($event, i)\" (dblclick)=\"editChip(i)\">\n          <uni-tag\n            [label]=\"labelOf(item)\"\n            [value]=\"item.value\"\n            [avatarSrc]=\"item.avatarSrc\"\n            [variant]=\"item.invalid ? 'warn' : tagVariant()\"\n            [tone]=\"tagTone()\"\n            [size]=\"tagSize() ?? componentOptions().chipSize ?? 'md'\"\n            [invalid]=\"!!item.invalid\"\n            [disabled]=\"!!item.disabled || disabled()\"\n            [interactive]=\"true\"\n            [removable]=\"!item.disabled && !disabled()\"\n            [controlTabIndex]=\"-1\"\n            (removed)=\"removeAt(i)\"\n          />\n        </li>\n      }\n\n      <li [class]=\"inputClass()\">\n        <!-- The field is one tab stop: chips carry tabindex=\"-1\" and are\n             entered with Backspace/ArrowLeft, so Tab never walks through\n             eight recipients to reach the next control. -->\n        <input\n          #field\n          type=\"text\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          [class]=\"inputClass()\"\n          [disabled]=\"disabled()\"\n          [placeholder]=\"placeholder() ?? ''\"\n          [attr.aria-label]=\"label()\"\n          [attr.aria-expanded]=\"list.open()\"\n          [attr.aria-controls]=\"list.listboxId\"\n          [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          [attr.aria-invalid]=\"showError() ? true : null\"\n          [attr.aria-required]=\"required() ? true : null\"\n          (keydown)=\"onInputKeydown($event)\"\n          (input)=\"onInput($any($event.target).value)\"\n          (paste)=\"onPaste($event)\"\n          (blur)=\"onBlur()\"\n        />\n      </li>\n    </ul>\n  </uni-input-box>\n\n  @if (list.open()) {\n    <ul\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\n      @for (suggestion of visibleSuggestions(); track suggestion.value; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"i === list.activeIndex()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectSuggestion(suggestion)\"\n        >\n          {{ labelOf(suggestion) }}\n          @if (suggestion.description) {\n            <span [class]=\"srOnly\">{{ suggestion.description }}</span>\n          }\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Said once for the whole field, rather than every chip advertising it. -->\n  <span [id]=\"hintId\" [class]=\"srOnly\">\n    Press Backspace to reach the last entry, then Backspace again to remove it.\n  </span>\n\n  <!-- Adds and removes are otherwise silent for a screen reader. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }, { kind: "component", type: UniTagComponent, selector: "uni-tag", inputs: ["size", "tone", "label", "value", "maxWidth", "avatarSrc", "avatarName", "iconName", "symbolName", "dot", "removable", "interactive", "selected", "invalid", "disabled", "removeLabel", "controlTabIndex"], outputs: ["removed", "activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTagInputComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-tag-input', imports: [UniInputBoxComponent, UniTagComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'tagInput' }], host: { '[class]': 'className()' }, template: "<!-- Focusout rides the bubbling event so the list closes only when focus\n     leaves the whole field, not while moving between chips and the input. -->\n<div [class]=\"wrapperClass()\" (focusout)=\"onFocusOut($event)\">\n  <uni-input-box [error]=\"showError()\" height=\"auto\">\n    <ul [class]=\"fieldClass()\">\n      @for (item of value(); track item.value; let i = $index) {\n        <!-- The focusable element is the chip's own button; this <li> only\n             receives keys bubbling up from it, so it must stay out of the tab\n             order (same delegation the menu uses for its roving focus). -->\n        <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n        <li #chip (keydown)=\"onChipKeydown($event, i)\" (dblclick)=\"editChip(i)\">\n          <uni-tag\n            [label]=\"labelOf(item)\"\n            [value]=\"item.value\"\n            [avatarSrc]=\"item.avatarSrc\"\n            [variant]=\"item.invalid ? 'warn' : tagVariant()\"\n            [tone]=\"tagTone()\"\n            [size]=\"tagSize() ?? componentOptions().chipSize ?? 'md'\"\n            [invalid]=\"!!item.invalid\"\n            [disabled]=\"!!item.disabled || disabled()\"\n            [interactive]=\"true\"\n            [removable]=\"!item.disabled && !disabled()\"\n            [controlTabIndex]=\"-1\"\n            (removed)=\"removeAt(i)\"\n          />\n        </li>\n      }\n\n      <li [class]=\"inputClass()\">\n        <!-- The field is one tab stop: chips carry tabindex=\"-1\" and are\n             entered with Backspace/ArrowLeft, so Tab never walks through\n             eight recipients to reach the next control. -->\n        <input\n          #field\n          type=\"text\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          [class]=\"inputClass()\"\n          [disabled]=\"disabled()\"\n          [placeholder]=\"placeholder() ?? ''\"\n          [attr.aria-label]=\"label()\"\n          [attr.aria-expanded]=\"list.open()\"\n          [attr.aria-controls]=\"list.listboxId\"\n          [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          [attr.aria-invalid]=\"showError() ? true : null\"\n          [attr.aria-required]=\"required() ? true : null\"\n          (keydown)=\"onInputKeydown($event)\"\n          (input)=\"onInput($any($event.target).value)\"\n          (paste)=\"onPaste($event)\"\n          (blur)=\"onBlur()\"\n        />\n      </li>\n    </ul>\n  </uni-input-box>\n\n  @if (list.open()) {\n    <ul\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\n      @for (suggestion of visibleSuggestions(); track suggestion.value; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"i === list.activeIndex()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectSuggestion(suggestion)\"\n        >\n          {{ labelOf(suggestion) }}\n          @if (suggestion.description) {\n            <span [class]=\"srOnly\">{{ suggestion.description }}</span>\n          }\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Said once for the whole field, rather than every chip advertising it. -->\n  <span [id]=\"hintId\" [class]=\"srOnly\">\n    Press Backspace to reach the last entry, then Backspace again to remove it.\n  </span>\n\n  <!-- Adds and removes are otherwise silent for a screen reader. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-tag-input', imports: [UniInputBoxComponent, UniTagComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'tagInput' }], host: { '[class]': 'className()' }, template: "<!-- Focusout rides the bubbling event so the list closes only when focus\n     leaves the whole field, not while moving between chips and the input. -->\n<div [class]=\"wrapperClass()\" (focusout)=\"onFocusOut($event)\">\n  <!-- The chip row owns the leading inset, so the first chip sits at the\n       field's edge instead of riding its border. -->\n  <uni-input-box [error]=\"showError()\" height=\"auto\" [managedInset]=\"true\">\n    <ul [class]=\"fieldClass()\">\n      @for (item of value(); track item.value; let i = $index) {\n        <!-- The focusable element is the chip's own button; this <li> only\n             receives keys bubbling up from it, so it must stay out of the tab\n             order (same delegation the menu uses for its roving focus). -->\n        <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n        <li #chip (keydown)=\"onChipKeydown($event, i)\" (dblclick)=\"editChip(i)\">\n          <uni-tag\n            [label]=\"labelOf(item)\"\n            [value]=\"item.value\"\n            [avatarSrc]=\"item.avatarSrc\"\n            [variant]=\"item.invalid ? 'warn' : tagVariant()\"\n            [tone]=\"tagTone()\"\n            [size]=\"tagSize() ?? componentOptions().chipSize ?? 'md'\"\n            [invalid]=\"!!item.invalid\"\n            [disabled]=\"!!item.disabled || disabled()\"\n            [interactive]=\"true\"\n            [removable]=\"!item.disabled && !disabled()\"\n            [controlTabIndex]=\"-1\"\n            (removed)=\"removeAt(i)\"\n          />\n        </li>\n      }\n\n      <li [class]=\"inputClass()\">\n        <!-- The field is one tab stop: chips carry tabindex=\"-1\" and are\n             entered with Backspace/ArrowLeft, so Tab never walks through\n             eight recipients to reach the next control. -->\n        <input\n          #field\n          type=\"text\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          [class]=\"inputClass()\"\n          [disabled]=\"disabled()\"\n          [placeholder]=\"placeholder() ?? ''\"\n          [attr.aria-label]=\"label()\"\n          [attr.aria-expanded]=\"list.open()\"\n          [attr.aria-controls]=\"list.listboxId\"\n          [attr.aria-activedescendant]=\"list.activeDescendantId()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          [attr.aria-invalid]=\"showError() ? true : null\"\n          [attr.aria-required]=\"required() ? true : null\"\n          (keydown)=\"onInputKeydown($event)\"\n          (input)=\"onInput($any($event.target).value)\"\n          (paste)=\"onPaste($event)\"\n          (blur)=\"onBlur()\"\n        />\n      </li>\n    </ul>\n  </uni-input-box>\n\n  @if (list.open()) {\n    <ul\n      #listbox\n      [id]=\"list.listboxId\"\n      role=\"listbox\"\n      [attr.popover]=\"popupAttr\"\n      [attr.aria-label]=\"label()\"\n      [class]=\"listClass()\"\n    >\n      @for (suggestion of visibleSuggestions(); track suggestion.value; let i = $index) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <li\n          role=\"option\"\n          [id]=\"list.optionId(i)\"\n          [class.active]=\"i === list.activeIndex()\"\n          [attr.aria-selected]=\"i === list.activeIndex()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"selectSuggestion(suggestion)\"\n        >\n          {{ labelOf(suggestion) }}\n          @if (suggestion.description) {\n            <span [class]=\"srOnly\">{{ suggestion.description }}</span>\n          }\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Said once for the whole field, rather than every chip advertising it. -->\n  <span [id]=\"hintId\" [class]=\"srOnly\">\n    Press Backspace to reach the last entry, then Backspace again to remove it.\n  </span>\n\n  <!-- Adds and removes are otherwise silent for a screen reader. -->\n  <span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], preset: [{ type: i0.Input, args: [{ isSignal: true, alias: "preset", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], commitOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitOnBlur", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], parse: [{ type: i0.Input, args: [{ isSignal: true, alias: "parse", required: false }] }], tagVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagVariant", required: false }] }], tagTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagTone", required: false }] }], tagSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagSize", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], query: [{ type: i0.Output, args: ["query"] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], inputRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], chipRefs: [{ type: i0.ViewChildren, args: ['chip', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['listbox', { isSignal: true }] }] } });
 
 class UniTextareaComponent {
@@ -6152,7 +8728,7 @@ class UniTextareaComponent {
     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 */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -6164,7 +8740,7 @@ class UniTextareaComponent {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** Visible text rows. Defaults to the theme's `textarea` options. */
     rows = input(undefined, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-    // Signal Forms' own optional control inputs: the `[field]` directive syncs
+    // Signal Forms' own optional control inputs: the `[formField]` directive syncs
     // them from the field's validators, as it does `required`.
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
@@ -6192,13 +8768,25 @@ class UniTextareaComponent {
         this.value.set(event.target.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniTextareaComponent, isStandalone: true, selector: "uni-textarea", 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 }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" height=\"auto\" [width]=\"width()\" [fullWidth]=\"fullWidth()\" [grow]=\"grow()\">\n  <textarea\n    [value]=\"value()\"\n    (input)=\"handleInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (blur)=\"markAsTouched()\"\n    [rows]=\"resolvedRows()\"\n    [class]=\"textareaClass()\"\n    [attr.name]=\"name() || null\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [attr.minlength]=\"minLength() ?? null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.spellcheck]=\"spellcheck() ?? null\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  ></textarea>\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniTextareaComponent, isStandalone: true, selector: "uni-textarea", 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 }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" height=\"auto\" [width]=\"width()\" [fullWidth]=\"fullWidth()\" [grow]=\"grow()\">\n  <textarea\n    [value]=\"value()\"\n    (input)=\"handleInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (blur)=\"markAsTouched()\"\n    [rows]=\"resolvedRows()\"\n    [class]=\"textareaClass()\"\n    [attr.name]=\"name() || null\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [attr.minlength]=\"minLength() ?? null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.spellcheck]=\"spellcheck() ?? null\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  ></textarea>\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTextareaComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-textarea', imports: [UniInputBoxComponent], template: "<uni-input-box [error]=\"showError()\" height=\"auto\" [width]=\"width()\" [fullWidth]=\"fullWidth()\" [grow]=\"grow()\">\n  <textarea\n    [value]=\"value()\"\n    (input)=\"handleInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (blur)=\"markAsTouched()\"\n    [rows]=\"resolvedRows()\"\n    [class]=\"textareaClass()\"\n    [attr.name]=\"name() || null\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [attr.minlength]=\"minLength() ?? null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.spellcheck]=\"spellcheck() ?? null\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  ></textarea>\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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], spellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellcheck", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], grow: [{ type: i0.Input, args: [{ isSignal: true, alias: "grow", required: false }] }] } });
 
+/**
+ * Everything a switch needs, from the three numbers a theme actually states.
+ *
+ * `travel` is why this is derived rather than written down: the knob starts at
+ * `inset` and must end the same distance from the far edge, so it moves
+ * `width - inset - knob - inset`, which reduces to `width - height`. The old
+ * code hardcoded a translate of one track height, which was correct only while
+ * the width was locked at 2x and the knob at 0.8x.
+ */
+function geometry(width, height, inset) {
+    return { width, height, inset, knob: height - inset * 2, travel: width - height, radius: height / 2 };
+}
 class UniToggleComponent extends BaseComponent {
     // --- REQUIRED SIGNALS (populated by FormCheckboxControl) ---
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
@@ -6206,7 +8794,7 @@ class UniToggleComponent extends BaseComponent {
     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 */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -6215,6 +8803,16 @@ class UniToggleComponent extends BaseComponent {
     ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
     // --- CONFIGURATION ---
     label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Checked-state track color token, overriding the theme's
+     * `toggle.behavior.checkedColor`.
+     *
+     * This exists alongside the theme option because `variant` — where this color
+     * used to live exclusively — defaults to `'primary'`, so the component cannot
+     * tell "set to primary" from "not set". Without an input, a theme-level
+     * `checkedColor` would silently make per-instance `variant` inert.
+     */
+    checkedColor = input(...(ngDevMode ? [undefined, { debugName: "checkedColor" }] : /* istanbul ignore next */ []));
     // Only show errors if the user has actually interacted with the field
     showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
     markAsTouched() {
@@ -6224,18 +8822,44 @@ class UniToggleComponent extends BaseComponent {
         this.checked.set(event.target.checked);
         this.markAsTouched();
     }
+    /**
+     * Track and knob geometry for the active `size`, read out of the theme's
+     * `sizes` block as data — `width`, `height` and the knob's inset `padding`.
+     *
+     * Read rather than spread: `padding` must not reach the track as real CSS or
+     * it would double up with the knob's own `top`/`left` offsets. `uni-calendar`
+     * treats its size block the same way.
+     */
     metrics = computed(() => {
-        const toggleSize = this.componentOptions().size || 20;
-        const sliderSize = toggleSize * 0.8;
+        // The legacy single-number token wins when a theme still sets it: that
+        // theme opted into the old derived-ratio geometry before `sizes` existed,
+        // and it applies to every instance regardless of the `size` input.
+        const legacy = this.componentOptions().size;
+        if (legacy != null) {
+            const height = Number(legacy);
+            return geometry(height * 2, height, (height - height * 0.8) / 2);
+        }
+        const size = this.style();
+        const height = Number(size['height'] ?? 20);
+        const width = Number(size['width'] ?? height * 2);
+        const inset = Number(size['padding'] ?? (height - height * 0.8) / 2);
+        return geometry(width, height, inset);
+    }, ...(ngDevMode ? [{ debugName: "metrics" }] : /* istanbul ignore next */ []));
+    /** The resolved checked/accent color: input, then theme option, then variant. */
+    accent = computed(() => this.checkedColor() ?? this.componentOptions().checkedColor ?? this.variant(), ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
+    /** Knob slide and track color change, as a motion token — never `all`. */
+    transitions = computed(() => {
+        const motion = this.theme.motion(this.componentOptions().motion ?? 'control');
+        const speed = motion.duration / 1000;
         return {
-            toggleSize,
-            toggleWidth: toggleSize * 2,
-            sliderSize,
-            sliderOffset: (toggleSize - sliderSize) / 2,
+            // Scoped, never `all`: the focus ring must apply instantly rather than
+            // interpolating its outline color from a stale value.
+            track: `background-color ${speed}s ${motion.easing}, border-color ${speed}s ${motion.easing}`,
+            knob: `transform ${speed}s ${motion.easing}, background-color ${speed}s ${motion.easing}`,
         };
-    }, ...(ngDevMode ? [{ debugName: "metrics" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "transitions" }] : /* istanbul ignore next */ []));
     toggleLabel = computed(() => {
-        const { toggleSize, toggleWidth, sliderSize, sliderOffset } = this.metrics();
+        const { height, width, knob, inset, radius } = this.metrics();
         return css({
             userSelect: 'none',
             cursor: this.disabled() ? 'not-allowed' : 'pointer',
@@ -6245,26 +8869,24 @@ class UniToggleComponent extends BaseComponent {
             gap: 8,
             opacity: this.disabled() ? 0.6 : 1,
             '& .toggle-switch': {
-                width: toggleWidth,
-                height: toggleSize,
+                width,
+                height,
                 backgroundColor: this.disabled()
                     ? this.getThemeColor('disabled')
                     : this.getThemeColor(this.componentOptions().trackColor ?? 'surface-variant'),
-                borderRadius: toggleSize / 2,
+                borderRadius: radius,
                 position: 'relative',
-                // 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',
+                transition: this.transitions().track,
             },
             '& .toggle-slider': {
-                width: sliderSize,
-                height: sliderSize,
+                width: knob,
+                height: knob,
                 backgroundColor: this.getThemeColor(this.componentOptions().knobColor ?? 'surface'),
                 borderRadius: '50%',
                 position: 'absolute',
-                top: sliderOffset,
-                left: sliderOffset,
-                transition: 'transform 0.3s ease, background-color 0.3s ease',
+                top: inset,
+                left: inset,
+                transition: this.transitions().knob,
                 ...this.theme.boxShadow('raised'),
             },
             // Hover darkens whatever the token resolves to — the button convention.
@@ -6276,7 +8898,8 @@ class UniToggleComponent extends BaseComponent {
         });
     }, ...(ngDevMode ? [{ debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
     toggleInput = computed(() => {
-        const { toggleSize } = this.metrics();
+        const { travel } = this.metrics();
+        const accent = this.getThemeColor(this.accent());
         return css({
             position: 'absolute',
             zIndex: -1,
@@ -6284,18 +8907,20 @@ class UniToggleComponent extends BaseComponent {
             height: 0,
             opacity: 0,
             '&:checked + .toggle-switch': {
-                backgroundColor: this.getThemeColor(this.variant()),
-                borderColor: this.getThemeColor(this.variant()),
+                backgroundColor: accent,
+                borderColor: accent,
             },
             '&:checked + .toggle-switch .toggle-slider': {
-                transform: `translateX(${toggleSize}px)`,
+                transform: `translateX(${travel}px)`,
             },
             '&:disabled + .toggle-switch': {
                 cursor: 'not-allowed',
             },
-            // The shared, themable focus indicator, keyed off the hidden input.
+            // The shared, themable focus indicator, keyed off the hidden input. It
+            // wears the checked color rather than the variant, so a themed on-state
+            // is not paired with a ring in some other role's color.
             '&:focus + .toggle-switch': {
-                ...this.theme.focusRingStyle(this.getThemeColor(this.variant())),
+                ...this.theme.focusRingStyle(accent),
             },
         });
     }, ...(ngDevMode ? [{ debugName: "toggleInput" }] : /* istanbul ignore next */ []));
@@ -6304,12 +8929,12 @@ class UniToggleComponent extends BaseComponent {
         return colors[token] ? colors[token] : colors['primary'];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniToggleComponent, isStandalone: true, selector: "uni-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", 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: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'toggle' }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"toggleLabel()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    [class]=\"toggleInput()\"\n    [checked]=\"checked()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"toggle-switch\">\n    <div class=\"toggle-slider\"></div>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniToggleComponent, isStandalone: true, selector: "uni-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", 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: false, transformFunction: null }, checkedColor: { classPropertyName: "checkedColor", publicName: "checkedColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'toggle' }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"toggleLabel()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    [class]=\"toggleInput()\"\n    [checked]=\"checked()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"toggle-switch\">\n    <div class=\"toggle-slider\"></div>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'uni-toggle', imports: [UniTextDirective], providers: [{ provide: COMPONENT_NAME, useValue: 'toggle' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [class]=\"toggleLabel()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    [class]=\"toggleInput()\"\n    [checked]=\"checked()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"toggle-switch\">\n    <div class=\"toggle-slider\"></div>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n" }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+        }], 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 }] }], checkedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkedColor", required: false }] }] } });
 
 /**
  * Every layout and typography attribute directive, for
@@ -6343,6 +8968,9 @@ const UNI_FORMS = [
     UniMultiSelectDropdownComponent,
     UniSearchInputComponent,
     UniTagInputComponent,
+    UniNumberInputComponent,
+    UniNumberRangeInputComponent,
+    UniQuantityStepperComponent,
     UniSliderComponent,
     UniDateInputComponent,
     UniTimeInputComponent,
@@ -7943,8 +10571,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[uni-dialog-header]', imports: [UniBoxDirective, UniIconButtonComponent, UniTextDirective, UniRowDirective], providers: [{ provide: COMPONENT_NAME, useValue: 'dialogHeader' }], template: "<div\n  row-layout\n  [containerColor]=\"componentOptions().color\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [height]=\"componentOptions().height\"\n  alignItems=\"center\"\n  [paddingHorizontal]=\"componentOptions().paddingHorizontal ?? 'sm'\"\n>\n  <!-- Balance spacer: only centered titles need to offset the close button. -->\n  @if ((componentOptions().textAlign || 'center') === 'center') {\n    <div box-layout [width]=\"26\"></div>\n  }\n  <div box-layout [grow]=\"1\" [attr.id]=\"titleId\">\n    <span uni-text\n      [typeface]=\"componentOptions().textRole\"\n      [color]=\"componentOptions().textColor\"\n      display=\"block\"\n      [align]=\"componentOptions().textAlign || 'center'\"\n      ><ng-content></ng-content\n    ></span>\n  </div>\n  <button\n    icon-button\n    [iconName]=\"componentOptions().closeButtonIcon\"\n    [symbolName]=\"componentOptions().closeButtonSymbol\"\n    variant=\"ghost\"\n    (click)=\"closeDialog()\"\n    [size]=\"componentOptions().closeButtonSize || 'md'\"\n  >\n    Close\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
+const DRAWER_PANEL = new InjectionToken('uni-drawer-panel');
+
+/**
+ * The drawer's pinned footer action row — the save bar of an editor panel.
+ *
+ * Sits outside the scrolling body, so the actions stay reachable however long
+ * the form is. Mirrors `[dialog-buttons]`; the difference is posture, which
+ * lives in the `drawerButtons` theme options rather than here.
+ */
+class UniDrawerButtonsComponent extends BaseComponent {
+    drawer = inject(DRAWER_PANEL, { optional: true });
+    confirmButtonText = input(...(ngDevMode ? [undefined, { debugName: "confirmButtonText" }] : /* istanbul ignore next */ []));
+    confirmButtonVariant = input(...(ngDevMode ? [undefined, { debugName: "confirmButtonVariant" }] : /* istanbul ignore next */ []));
+    cancelButtonText = input(...(ngDevMode ? [undefined, { debugName: "cancelButtonText" }] : /* istanbul ignore next */ []));
+    cancelButtonVariant = input(...(ngDevMode ? [undefined, { debugName: "cancelButtonVariant" }] : /* istanbul ignore next */ []));
+    disableConfirm = input(...(ngDevMode ? [undefined, { debugName: "disableConfirm" }] : /* istanbul ignore next */ []));
+    padding = input(...(ngDevMode ? [undefined, { debugName: "padding" }] : /* istanbul ignore next */ []));
+    justifyContent = input(...(ngDevMode ? [undefined, { debugName: "justifyContent" }] : /* istanbul ignore next */ []));
+    confirmed = output();
+    // Inputs win over theme options; the trailing literal is the fallback.
+    confirmVariant = computed(() => this.confirmButtonVariant() ?? this.componentOptions().confirmButtonVariant ?? 'primary', ...(ngDevMode ? [{ debugName: "confirmVariant" }] : /* istanbul ignore next */ []));
+    cancelVariant = computed(() => this.cancelButtonVariant() ?? this.componentOptions().cancelButtonVariant ?? 'quaternary', ...(ngDevMode ? [{ debugName: "cancelVariant" }] : /* istanbul ignore next */ []));
+    paddingValue = computed(() => this.padding() ?? this.componentOptions().padding ?? 'md', ...(ngDevMode ? [{ debugName: "paddingValue" }] : /* istanbul ignore next */ []));
+    justifyContentValue = computed(() => this.justifyContent() ?? this.componentOptions().justifyContent ?? 'flex-end', ...(ngDevMode ? [{ debugName: "justifyContentValue" }] : /* istanbul ignore next */ []));
+    gapValue = computed(() => this.componentOptions().gap ?? 'sm', ...(ngDevMode ? [{ debugName: "gapValue" }] : /* istanbul ignore next */ []));
+    buttonSize = computed(() => this.componentOptions().buttonSize ?? 'md', ...(ngDevMode ? [{ debugName: "buttonSize" }] : /* istanbul ignore next */ []));
+    /** A pinned row, sized by its content rather than by the body beside it. */
+    hostClass = computed(() => css({
+        flex: 'none',
+        ...this.theme.borderTop(this.componentOptions().divider),
+    }), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    className = computed(() => css([
+        this.componentTheme().fixed,
+        this.componentOptions().stretch && {
+            width: '100%',
+            minWidth: '100%',
+            '& > button': { flex: '1 1 50%', maxWidth: '50%' },
+        },
+    ]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /**
+     * Cancel routes through the drawer's own close decision, so a panel with
+     * unsaved changes can veto it exactly as it vetoes Escape.
+     */
+    closeDrawer() {
+        this.drawer?.requestClose('close-button');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDrawerButtonsComponent, isStandalone: true, selector: "[uni-drawer-buttons], [drawer-buttons]", inputs: { confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonVariant: { classPropertyName: "confirmButtonVariant", publicName: "confirmButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonVariant: { classPropertyName: "cancelButtonVariant", publicName: "cancelButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, disableConfirm: { classPropertyName: "disableConfirm", publicName: "disableConfirm", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, host: { properties: { "class": "hostClass()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'drawerButtons' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  [gap]=\"gapValue()\"\n  [padding]=\"paddingValue()\"\n  [justifyContent]=\"justifyContentValue()\"\n  [flexDirection]=\"componentOptions().reverseOrder ? 'row-reverse' : 'row'\"\n  [class]=\"className()\"\n>\n  <button text-button [variant]=\"cancelVariant()\" [size]=\"buttonSize()\" (click)=\"closeDrawer()\">\n    {{ cancelButtonText() || 'Cancel' }}\n  </button>\n  <button\n    text-button\n    [variant]=\"confirmVariant()\"\n    [size]=\"buttonSize()\"\n    (click)=\"confirmed.emit()\"\n    [disable]=\"disableConfirm()\"\n  >\n    {{ confirmButtonText() || 'Save' }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[uni-drawer-buttons], [drawer-buttons]', imports: [UniRowDirective, UniButtonComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'drawerButtons' }], host: { '[class]': 'hostClass()' }, template: "<div\n  row-layout\n  [gap]=\"gapValue()\"\n  [padding]=\"paddingValue()\"\n  [justifyContent]=\"justifyContentValue()\"\n  [flexDirection]=\"componentOptions().reverseOrder ? 'row-reverse' : 'row'\"\n  [class]=\"className()\"\n>\n  <button text-button [variant]=\"cancelVariant()\" [size]=\"buttonSize()\" (click)=\"closeDrawer()\">\n    {{ cancelButtonText() || 'Cancel' }}\n  </button>\n  <button\n    text-button\n    [variant]=\"confirmVariant()\"\n    [size]=\"buttonSize()\"\n    (click)=\"confirmed.emit()\"\n    [disable]=\"disableConfirm()\"\n  >\n    {{ confirmButtonText() || 'Save' }}\n  </button>\n</div>\n" }]
+        }], propDecorators: { confirmButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonText", required: false }] }], confirmButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonVariant", required: false }] }], cancelButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonText", required: false }] }], cancelButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonVariant", required: false }] }], disableConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableConfirm", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], justifyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "justifyContent", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }] } });
+
+/**
+ * The drawer's pinned header row: a title, and optionally a close button.
+ *
+ * Sits outside the scrolling body, so it stays put while the form beneath it
+ * moves. Reached either by projecting it — `<div uni-drawer-header>` — or
+ * implicitly, by giving `uni-drawer` a `headline`, in which case the drawer
+ * renders one of these itself.
+ */
+class UniDrawerHeaderComponent extends BaseComponent {
+    drawer = inject(DRAWER_PANEL, { optional: true });
+    /** Title text. Falls back to the drawer's `headline`; projected content wins over both. */
+    headline = input(...(ngDevMode ? [undefined, { debugName: "headline" }] : /* istanbul ignore next */ []));
+    /** Attached to the title so the drawer is labelled by it. */
+    titleId = this.drawer?.titleId ?? null;
+    title = computed(() => this.headline() ?? this.drawer?.headline() ?? '', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    showClose = computed(() => this.drawer?.defaultCloseButton() ?? true, ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // Tells the drawer it is labelled by this row rather than by `ariaLabel`.
+        this.drawer?.hasHeader.set(true);
+    }
+    /** Never a bare close: the drawer decides, so a veto is honoured here too. */
+    closeDrawer() {
+        this.drawer?.requestClose('close-button');
+    }
+    className = computed(() => css({
+        // A pinned row: it is a flex child of the panel and must not be sized
+        // by the scrolling body beside it.
+        flex: 'none',
+        ...this.theme.borderBottom(this.componentOptions().divider),
+    }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDrawerHeaderComponent, isStandalone: true, selector: "[uni-drawer-header]", inputs: { headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'drawerHeader' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  [containerColor]=\"componentOptions().color\"\n  [height]=\"componentOptions().height\"\n  alignItems=\"center\"\n  gap=\"sm\"\n  [padding]=\"componentOptions().padding ?? 'md'\"\n>\n  <div box-layout [grow]=\"1\" [minWidth]=\"0\" [attr.id]=\"titleId\">\n    <span\n      uni-text\n      [typeface]=\"componentOptions().textRole\"\n      [color]=\"componentOptions().textColor\"\n      display=\"block\"\n      [align]=\"componentOptions().textAlign || 'left'\"\n      ><ng-content>{{ title() }}</ng-content></span\n    >\n  </div>\n  @if (showClose()) {\n    <button\n      icon-button\n      [iconName]=\"componentOptions().closeButtonIcon\"\n      [symbolName]=\"componentOptions().closeButtonSymbol\"\n      variant=\"ghost\"\n      (click)=\"closeDrawer()\"\n      [size]=\"componentOptions().closeButtonSize || 'md'\"\n    >\n      Close\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "directive", type: UniRowDirective, 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: UniDrawerHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[uni-drawer-header]', imports: [UniBoxDirective, UniIconButtonComponent, UniTextDirective, UniRowDirective], providers: [{ provide: COMPONENT_NAME, useValue: 'drawerHeader' }], host: { '[class]': 'className()' }, template: "<div\n  row-layout\n  [containerColor]=\"componentOptions().color\"\n  [height]=\"componentOptions().height\"\n  alignItems=\"center\"\n  gap=\"sm\"\n  [padding]=\"componentOptions().padding ?? 'md'\"\n>\n  <div box-layout [grow]=\"1\" [minWidth]=\"0\" [attr.id]=\"titleId\">\n    <span\n      uni-text\n      [typeface]=\"componentOptions().textRole\"\n      [color]=\"componentOptions().textColor\"\n      display=\"block\"\n      [align]=\"componentOptions().textAlign || 'left'\"\n      ><ng-content>{{ title() }}</ng-content></span\n    >\n  </div>\n  @if (showClose()) {\n    <button\n      icon-button\n      [iconName]=\"componentOptions().closeButtonIcon\"\n      [symbolName]=\"componentOptions().closeButtonSymbol\"\n      variant=\"ghost\"\n      (click)=\"closeDrawer()\"\n      [size]=\"componentOptions().closeButtonSize || 'md'\"\n    >\n      Close\n    </button>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }] } });
+
 /**
- * Navigation drawer with two modes sharing one content slot:
+ * Drawer with two modes sharing one three-row layout:
  *
  * - `side` — an in-flow `<aside>` that pushes content (dashboard sidenav);
  *   opening/closing animates its width, and the divider border primitive
@@ -7953,17 +10674,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  *   scrim backdrop come from the platform (same machinery as `uni-dialog`),
  *   sliding in from its edge.
  *
- * Surface, width, divider, elevation, padding and backdrop all resolve from
- * `drawer` theme tokens.
+ * **The panel is never the scroll container.** It is a flex column of three
+ * rows — an optional `[uni-drawer-header]`, the projected body, an optional
+ * `[uni-drawer-buttons]` — and only the body scrolls. The panel itself is
+ * `overflow: clip` on both axes. That is what lets a header and a save bar pin
+ * while a long form scrolls between them, and it is why the theme's `padding`
+ * option lands on the body row rather than the panel: padding on a scrolling
+ * box scrolls away with its content.
+ *
+ * Surface, width, divider, elevation, padding, backdrop, scrim and background
+ * all resolve from `drawer` theme tokens.
  */
 class UniDrawerComponent extends BaseComponent {
     /** Two-way bindable open state: [(open)]. */
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     mode = input('side', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     position = input('start', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the overlay mode's dialog. */
-    ariaLabel = input('Navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    contentTemplate = viewChild.required('content');
+    /**
+     * Accessible name for the overlay mode. Only consulted when the drawer has
+     * no header to be labelled by.
+     *
+     * There is deliberately no default. A drawer used as an editor panel that
+     * inherited the literal "Navigation" would announce itself as something it
+     * is not, and a wrong accessible name is worse than a missing one — the
+     * missing one is at least caught by any audit.
+     */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Title for the drawer's header row. Shorthand for projecting a
+     * `[uni-drawer-header]`; project one instead when the header needs more
+     * than a title (a record counter, prev/next navigation).
+     */
+    headline = input(...(ngDevMode ? [undefined, { debugName: "headline" }] : /* istanbul ignore next */ []));
+    /** Whether the header row renders a close button. */
+    defaultCloseButton = input(true, ...(ngDevMode ? [{ debugName: "defaultCloseButton" }] : /* istanbul ignore next */ []));
+    /** Panel width in px, overriding the theme's `drawer.behavior.width`. */
+    width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the overlay dims the page behind it, overriding the theme's
+     * `drawer.behavior.scrim`. False leaves the backdrop transparent so the page
+     * stays legible while the panel is open — an editor panel beside a board the
+     * user is still reading.
+     *
+     * This does not make the drawer non-modal: focus is still trapped and the
+     * page behind is still inert. It is a visibility choice, not a modality one.
+     */
+    scrim = input(...(ngDevMode ? [undefined, { debugName: "scrim" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS selector for the element to focus when the overlay opens. The native
+     * default is the first focusable element, which in an editor panel is
+     * usually the close button rather than the first field.
+     */
+    initialFocus = input(...(ngDevMode ? [undefined, { debugName: "initialFocus" }] : /* istanbul ignore next */ []));
+    /**
+     * The drawer is *asking* to close — Escape, the backdrop, or a close/cancel
+     * button. Pair with `disableAutoClose` to hold the panel open while an async
+     * confirmation runs.
+     */
+    closeRequest = output();
+    /**
+     * When true the drawer never closes itself; it only emits `closeRequest` and
+     * waits for the consumer to set `open`. Off by default, so a drawer that
+     * ignores `closeRequest` behaves exactly as it always has.
+     */
+    disableAutoClose = input(false, ...(ngDevMode ? [{ debugName: "disableAutoClose" }] : /* istanbul ignore next */ []));
+    /** Set by a projected `[uni-drawer-header]` so it can pin flush to the top. */
+    hasHeader = signal(false, ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
+    /** Id referenced by aria-labelledby; the header row attaches it to its title. */
+    titleId = uniqueId('uni-drawer-title');
+    labelledBy = computed(() => (this.hasHeader() ? this.titleId : null), ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    headerTemplate = viewChild.required('header');
+    bodyTemplate = viewChild.required('body');
+    footerTemplate = viewChild.required('footer');
     overlay = viewChild('overlay', ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
@@ -7975,6 +10757,9 @@ class UniDrawerComponent extends BaseComponent {
                 if (!dialog.open) {
                     dialog.removeAttribute('closing');
                     dialog.showModal();
+                    const selector = this.initialFocus();
+                    if (selector)
+                        dialog.querySelector(selector)?.focus();
                 }
             }
             else if (dialog.open) {
@@ -7983,14 +10768,24 @@ class UniDrawerComponent extends BaseComponent {
             }
         });
     }
+    /**
+     * The one place a close is decided, so every route in — Escape, the
+     * backdrop, the header's close button, the footer's cancel — behaves
+     * identically and is equally vetoable.
+     */
+    requestClose(reason) {
+        this.closeRequest.emit({ reason });
+        if (!this.disableAutoClose())
+            this.open.set(false);
+    }
     onBackdropClick(event) {
         if (event.target.nodeName === 'DIALOG')
-            this.open.set(false);
+            this.requestClose('backdrop');
     }
     /** Route Escape through the animated close, keeping `open` in sync. */
     onCancel(event) {
         event.preventDefault();
-        this.open.set(false);
+        this.requestClose('escape');
     }
     onAnimationEnd(event) {
         const dialog = this.overlay()?.nativeElement;
@@ -8004,53 +10799,129 @@ class UniDrawerComponent extends BaseComponent {
     edge = computed(() => (this.position() === 'start' ? '-100%' : '100%'), ...(ngDevMode ? [{ debugName: "edge" }] : /* istanbul ignore next */ []));
     slideIn = computed(() => keyframes({ from: { transform: `translateX(${this.edge()})` }, to: { transform: 'translateX(0)' } }), ...(ngDevMode ? [{ debugName: "slideIn" }] : /* istanbul ignore next */ []));
     slideOut = computed(() => keyframes({ from: { transform: 'translateX(0)' }, to: { transform: `translateX(${this.edge()})` } }), ...(ngDevMode ? [{ debugName: "slideOut" }] : /* istanbul ignore next */ []));
+    /** Input wins over the theme option; the literal is the last-resort default. */
+    panelWidth = computed(() => this.width() ?? this.componentOptions().width ?? 280, ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+    showScrim = computed(() => this.scrim() ?? this.componentOptions().scrim ?? true, ...(ngDevMode ? [{ debugName: "showScrim" }] : /* istanbul ignore next */ []));
+    /**
+     * The panel's surface. `solid` is the plain color pair; `glass` and
+     * `gradient` derive from it, so a theme swaps treatment without restating
+     * the color.
+     */
+    surface = computed(() => {
+        const options = this.componentOptions();
+        const pair = this.theme.colorPair(options.color);
+        const base = pair?.backgroundColor;
+        const treatment = options.background ?? 'solid';
+        if (!base || treatment === 'solid')
+            return pair;
+        if (treatment === 'glass') {
+            return {
+                ...pair,
+                backgroundColor: `color-mix(in srgb, ${base} 72%, transparent)`,
+                backdropFilter: 'blur(12px) saturate(1.4)',
+            };
+        }
+        // A vertical tint toward the content color: always visible, and it never
+        // lets the page show through the way a fade to transparent would.
+        return {
+            ...pair,
+            backgroundImage: `linear-gradient(to bottom, ${base} 0%, color-mix(in srgb, ${base} 92%, ${pair?.color ?? 'transparent'} 8%) 100%)`,
+        };
+    }, ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    /** The shared flex column: three rows, and never a scroll container itself. */
+    shell = {
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'column',
+        // Both axes, explicitly, and never the shorthand. Setting one axis alone
+        // computes the other to `auto` — which is precisely how a panel becomes
+        // an accidental scroll container.
+        overflowX: 'clip',
+        overflowY: 'clip',
+    };
     sideClass = computed(() => {
         const options = this.componentOptions();
-        const width = options.width ?? 280;
+        const width = this.panelWidth();
         const start = this.position() === 'start';
         return css({
-            display: 'block',
-            boxSizing: 'border-box',
+            ...this.shell,
             height: '100%',
             flex: 'none',
-            overflowX: 'hidden',
-            overflowY: 'auto',
             transition: 'width 0.25s ease, visibility 0.25s',
-            ...this.theme.colorPair(options.color),
+            ...this.surface(),
             ...(start
                 ? this.theme.borderRight(options.divider)
                 : this.theme.borderLeft(options.divider)),
             ...(this.open()
-                ? { width, visibility: 'visible', ...this.theme.padding(options.padding) }
-                : { width: 0, visibility: 'hidden', padding: 0, border: 'none' }),
+                ? { width, visibility: 'visible' }
+                : { width: 0, visibility: 'hidden', border: 'none' }),
         });
     }, ...(ngDevMode ? [{ debugName: "sideClass" }] : /* istanbul ignore next */ []));
     overClass = computed(() => {
         const options = this.componentOptions();
         const start = this.position() === 'start';
         return css({
-            boxSizing: 'border-box',
-            width: options.width ?? 280,
+            ...this.shell,
+            width: this.panelWidth(),
             maxWidth: '90vw',
             height: '100dvh',
             maxHeight: '100dvh',
             border: 'none',
+            padding: 0,
             margin: start ? '0 auto 0 0' : '0 0 0 auto',
-            overflowY: 'auto',
-            ...this.theme.colorPair(options.color),
-            ...this.theme.padding(options.padding),
+            ...this.surface(),
             ...this.theme.boxShadow(options.elevation),
-            '&::backdrop': { ...options.backdrop },
+            // The UA stylesheet hides a closed dialog with `display: none`, which the
+            // shell's `display: flex` would otherwise beat on specificity — leaving
+            // the panel sitting in normal flow behind the page whenever it is shut.
+            // The closing animation still runs: `open` is only removed after it ends.
+            '&:not([open])': { display: 'none' },
+            // `scrim: false` keeps the modality — focus trap, inert page — but stops
+            // the drawer dimming what it covers.
+            '&::backdrop': this.showScrim() ? { ...options.backdrop } : { background: 'transparent' },
             '&[open]': { animation: `${this.slideIn()} 250ms ease-out` },
             '&[closing]': { animation: `${this.slideOut()} 250ms ease-in` },
         });
     }, ...(ngDevMode ? [{ debugName: "overClass" }] : /* istanbul ignore next */ []));
+    /** The only scrolling row, and the only padded one. */
+    bodyClass = computed(() => css({
+        flex: '1 1 auto',
+        minHeight: 0,
+        // Defence in depth: a positioned body is the containing block for any
+        // stray absolute descendant, so nothing can re-home into an ancestor
+        // and inflate its scrollHeight. Only safe because the shell above is
+        // `overflow: clip` — on its own this would move the phantom overflow
+        // into this scroller instead of out of the panel.
+        position: 'relative',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        overscrollBehavior: 'contain',
+        ...this.theme.padding(this.componentOptions().padding),
+    }), ...(ngDevMode ? [{ debugName: "bodyClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDrawerComponent, isStandalone: true, selector: "uni-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'drawer' }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <ng-template #content><ng-content /></ng-template>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDrawerComponent, isStandalone: true, selector: "uni-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, defaultCloseButton: { classPropertyName: "defaultCloseButton", publicName: "defaultCloseButton", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, scrim: { classPropertyName: "scrim", publicName: "scrim", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, disableAutoClose: { classPropertyName: "disableAutoClose", publicName: "disableAutoClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeRequest: "closeRequest" }, providers: [
+            { provide: COMPONENT_NAME, useValue: 'drawer' },
+            { provide: DRAWER_PANEL, useExisting: forwardRef(() => UniDrawerComponent) },
+        ], viewQueries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <!-- One <ng-content> per slot, each parked in a template so both modes can
+         render the same projected nodes. The catch-all is declared last so the
+         two selective slots claim their content first. -->
+    <ng-template #header>
+      @if (headline()) {
+        <div uni-drawer-header></div>
+      }
+      <ng-content select="[uni-drawer-header]" />
+    </ng-template>
+    <ng-template #footer>
+      <ng-content select="[uni-drawer-buttons], [drawer-buttons]" />
+    </ng-template>
+    <ng-template #body><ng-content /></ng-template>
+
     @if (mode() === 'side') {
       <aside [class]="sideClass()" [attr.aria-hidden]="open() ? null : 'true'">
-        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+        <ng-container [ngTemplateOutlet]="headerTemplate()" />
+        <div [class]="bodyClass()"><ng-container [ngTemplateOutlet]="bodyTemplate()" /></div>
+        <ng-container [ngTemplateOutlet]="footerTemplate()" />
       </aside>
     } @else {
       <!-- Click handles the ::backdrop only (target check); keyboard closing
@@ -8060,28 +10931,49 @@ class UniDrawerComponent extends BaseComponent {
       <dialog
         #overlay
         [class]="overClass()"
-        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="labelledBy()"
+        [attr.aria-label]="labelledBy() ? null : ariaLabel()"
         (click)="onBackdropClick($event)"
         (cancel)="onCancel($event)"
         (animationend)="onAnimationEnd($event)"
       >
-        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+        <ng-container [ngTemplateOutlet]="headerTemplate()" />
+        <div [class]="bodyClass()"><ng-container [ngTemplateOutlet]="bodyTemplate()" /></div>
+        <ng-container [ngTemplateOutlet]="footerTemplate()" />
       </dialog>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniDrawerHeaderComponent, selector: "[uni-drawer-header]", inputs: ["headline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'uni-drawer',
-                    imports: [NgTemplateOutlet],
-                    providers: [{ provide: COMPONENT_NAME, useValue: 'drawer' }],
+                    imports: [NgTemplateOutlet, UniDrawerHeaderComponent],
+                    providers: [
+                        { provide: COMPONENT_NAME, useValue: 'drawer' },
+                        { provide: DRAWER_PANEL, useExisting: forwardRef(() => UniDrawerComponent) },
+                    ],
                     template: `
-    <ng-template #content><ng-content /></ng-template>
+    <!-- One <ng-content> per slot, each parked in a template so both modes can
+         render the same projected nodes. The catch-all is declared last so the
+         two selective slots claim their content first. -->
+    <ng-template #header>
+      @if (headline()) {
+        <div uni-drawer-header></div>
+      }
+      <ng-content select="[uni-drawer-header]" />
+    </ng-template>
+    <ng-template #footer>
+      <ng-content select="[uni-drawer-buttons], [drawer-buttons]" />
+    </ng-template>
+    <ng-template #body><ng-content /></ng-template>
+
     @if (mode() === 'side') {
       <aside [class]="sideClass()" [attr.aria-hidden]="open() ? null : 'true'">
-        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+        <ng-container [ngTemplateOutlet]="headerTemplate()" />
+        <div [class]="bodyClass()"><ng-container [ngTemplateOutlet]="bodyTemplate()" /></div>
+        <ng-container [ngTemplateOutlet]="footerTemplate()" />
       </aside>
     } @else {
       <!-- Click handles the ::backdrop only (target check); keyboard closing
@@ -8091,17 +10983,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
       <dialog
         #overlay
         [class]="overClass()"
-        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="labelledBy()"
+        [attr.aria-label]="labelledBy() ? null : ariaLabel()"
         (click)="onBackdropClick($event)"
         (cancel)="onCancel($event)"
         (animationend)="onAnimationEnd($event)"
       >
-        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+        <ng-container [ngTemplateOutlet]="headerTemplate()" />
+        <div [class]="bodyClass()"><ng-container [ngTemplateOutlet]="bodyTemplate()" /></div>
+        <ng-container [ngTemplateOutlet]="footerTemplate()" />
       </dialog>
     }
   `,
                 }]
-        }], 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 }] }] } });
+        }], 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 }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], defaultCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCloseButton", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], scrim: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrim", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }], disableAutoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAutoClose", required: false }] }], headerTemplate: [{ type: i0.ViewChild, args: ['header', { isSignal: true }] }], bodyTemplate: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }], footerTemplate: [{ type: i0.ViewChild, args: ['footer', { isSignal: true }] }], overlay: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }] } });
 
 class UniExpandComponent extends BaseComponent {
     collapsed = model(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
@@ -11745,5 +14640,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, ListboxNavigation, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, TRANSFORM_ORIGINS, ThemeService, UNI_FORMS, UNI_LAYOUT, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxDirective, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCalendarComponent, UniCalloutComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterDirective, UniCheckboxComponent, UniComboboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDateInputComponent, UniDateTimeInputComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaDirective, UniGridDirective, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniRadioComponent, UniRecordDatasource, UniRowDirective, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackDirective, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTagInputComponent, UniTextDirective, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniTimeInputComponent, UniToggleComponent, UniTooltipComponent, UniTourComponent, UniWrapDirective, acceptableFile, addDays, addMonths, anchorArrowStyles, anchorStyles, buildMonthGrid, clearAnchorName, createAnnouncer, createListboxNavigation, dayOfWeek, daysInMonth, discreteOverlayTransition, focusableElements, formatDate, formatMonthHeading, formatTime, getFileExtension, inclusiveDayCount, isDivider, isToggleOpen, isValidDate, isoDate, joinDateTime, listboxPopupAttr, listboxPopupStyles, localeDatePlaceholder, localeDefaultHour12, localeFieldOrder, localeMonthNames, localeWeekStart, monthOf, motionSafe, newAnchorName, newListboxAnchor, parseDateText, parseTimeText, promoteListboxPopup, resolveElement, resolveFocusTarget, restoreOverlayFocus, setAnchorName, splitDateTime, spotlightStyles, supportsAnchoredPopup, timeSlots, todayIso, transformOriginFor, uniqueId, useTimer, visuallyHidden, weekdayNames };
+export { BodyRenderDirective, ConfirmationDialogComponent, DRAWER_PANEL, DragAndDropDirective, FOCUSABLE_SELECTOR, ListboxNavigation, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, TRANSFORM_ORIGINS, ThemeService, UNI_FORMS, UNI_LAYOUT, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxDirective, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCalendarComponent, UniCalloutComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterDirective, UniCheckboxComponent, UniComboboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDateInputComponent, UniDateTimeInputComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerButtonsComponent, UniDrawerComponent, UniDrawerHeaderComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaDirective, UniGridDirective, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniNumberInputComponent, UniNumberRangeInputComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniQuantityStepperComponent, UniRadioComponent, UniRecordDatasource, UniRowDirective, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackDirective, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTagInputComponent, UniTextDirective, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniTimeInputComponent, UniToggleComponent, UniTooltipComponent, UniTourComponent, UniWrapDirective, acceptableFile, addDays, addMonths, anchorArrowStyles, anchorStyles, buildMonthGrid, clampDecimal, clearAnchorName, compareDecimal, createAnnouncer, createListboxNavigation, createPressRepeat, dayOfWeek, daysInMonth, decimalScale, discreteOverlayTransition, evaluateExpression, focusableElements, formatDate, formatMonthHeading, formatNumber, formatTime, fromScaled, getFileExtension, inclusiveDayCount, isCanonicalDecimal, isDivider, isToggleOpen, isValidDate, isoDate, joinDateTime, listboxPopupAttr, listboxPopupStyles, localeDatePlaceholder, localeDefaultHour12, localeFieldOrder, localeMonthNames, localeNumberParts, localeWeekStart, losesPrecision, monthOf, motionSafe, newAnchorName, newListboxAnchor, normalizeDecimal, parseDateText, parseNumber, parseTimeText, promoteListboxPopup, rawNumberText, resolveElement, resolveFocusTarget, resolveNumberFormat, restoreOverlayFocus, roundDecimal, setAnchorName, settleNumber, shiftDecimal, speakNumber, splitDateTime, spotlightStyles, stepDecimal, supportsAnchoredPopup, timeSlots, toAsciiDigits, toDecimal, toNumber, toScaled, todayIso, transformOriginFor, uniqueId, useTimer, visuallyHidden, weekdayNames };
 //# sourceMappingURL=uni-design-system-uni-angular.mjs.map