@besaitech/ng-design-system 0.0.40 → 0.0.42

package/fesm2022/besaitech-ng-design-system.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, output, signal, forwardRef, numberAttribute, viewChildren, afterRenderEffect, viewChild, ElementRef, model, Injector, afterNextRender, Injectable, TemplateRef, Directive, contentChildren, contentChild } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, output, signal, forwardRef, viewChild, numberAttribute, viewChildren, afterRenderEffect, ElementRef, model, Injector, afterNextRender, Injectable, TemplateRef, Directive, contentChildren, contentChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
@@ -48,6 +48,11 @@ const SDS_ICONS = {
     'chevron-right': '<path d="m9 18 6-6-6-6"/>',
     'chevron-left': '<path d="m15 18-6-6 6-6"/>',
     'chevron-down': '<path d="m6 9 6 6 6-6"/>',
+    // Stepper glyphs for sds-input-number: chevrons for the stacked spinner, plus/minus for the
+    // horizontal/vertical layouts.
+    'chevron-up': '<path d="m18 15-6-6-6 6"/>',
+    plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
+    minus: '<path d="M5 12h14"/>',
     'chevrons-left': '<path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/>',
     'chevrons-right': '<path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/>',
     x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
@@ -155,7 +160,7 @@ const VARIANTS$2 = {
     ghost: 'bg-transparent text-ink-soft hover:bg-black/5 active:bg-black/10',
     danger: 'bg-danger text-white shadow-sm hover:brightness-95 active:brightness-90',
 };
-const SIZES$a = {
+const SIZES$b = {
     sm: 'h-8 px-3 text-sm',
     md: 'h-10 px-4 text-sm',
     lg: 'h-12 px-5 text-base',
@@ -215,7 +220,7 @@ class SdsButton {
             BASE,
             this.shape() === 'pill' ? 'rounded-full' : 'rounded-control',
             VARIANTS$2[this.variant()],
-            SIZES$a[size],
+            SIZES$b[size],
             this.iconOnly() ? ICON_ONLY[size] : '',
             this.block() ? 'w-full' : '',
         ]
@@ -267,8 +272,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: [".sds-spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:9999px;animation:sds-spin .6s linear infinite}@keyframes sds-spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
-let nextId$b = 0;
-const SIZES$9 = {
+let nextId$d = 0;
+const SIZES$a = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
@@ -280,7 +285,7 @@ const SIZES$9 = {
  * sidebar search field).
  */
 class SdsInput {
-    inputId = `sds-input-${nextId$b++}`;
+    inputId = `sds-input-${nextId$d++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -357,7 +362,7 @@ class SdsInput {
         return `${left} ${right}`;
     }, ...(ngDevMode ? [{ debugName: "fieldPadding" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$9[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
+        const parts = [SIZES$a[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
         if (this.isDisabled())
             parts.push('opacity-60 cursor-not-allowed');
         if (this.filled()) {
@@ -601,6 +606,1012 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 100000s ease-in-out 0s;-webkit-text-fill-color:currentColor;caret-color:currentColor}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], trailingAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAction", required: false }] }], trailingActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionLabel", required: false }] }], trailingActionPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionPressed", required: false }] }], trailingActionClick: [{ type: i0.Output, args: ["trailingActionClick"] }] } });
 
+let nextId$c = 0;
+const HEIGHTS = {
+    sm: 'h-9',
+    md: 'h-10',
+    lg: 'h-12',
+};
+const TEXT = {
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-base',
+};
+/**
+ * Numeric input with locale-aware formatting, optional currency, prefix/suffix affixes, min/max/step
+ * boundaries and spinner buttons — the design-system counterpart of PrimeNG's `InputNumber`.
+ *
+ * The value is a `number | null` bound through ControlValueAccessor, so it works with reactive forms
+ * or `[(ngModel)]`: `<sds-input-number [(ngModel)]="amount" mode="currency" currency="EUR" />`.
+ *
+ * The field formats **live as you type**: the currency symbol, grouping separators and prefix/suffix
+ * stay visible on every keystroke, and the caret is kept where it belongs. The value is clamped to
+ * {@link min}/{@link max} on blur and on every spinner step; ArrowUp / ArrowDown also step it.
+ */
+class SdsInputNumber {
+    inputId = `sds-input-number-${nextId$c++}`;
+    fieldRef = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldRef" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Accessible name used when no visible [label] is provided. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** `filled` is a borderless field on a muted ground; `default` is the bordered white field. */
+    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Read-only: the value is shown and selectable but cannot be typed or stepped. */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    // --- Formatting -----------------------------------------------------------
+    mode = input('decimal', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** BCP 47 locale for grouping/decimal symbols (e.g. `fr-FR`). Empty follows the runtime locale. */
+    locale = input('', ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    /** ISO 4217 code, required when {@link mode} is `currency` (e.g. `EUR`, `USD`). */
+    currency = input('', ...(ngDevMode ? [{ debugName: "currency" }] : []));
+    currencyDisplay = input('symbol', ...(ngDevMode ? [{ debugName: "currencyDisplay" }] : []));
+    /** Thousands/grouping separators. */
+    useGrouping = input(true, ...(ngDevMode ? [{ debugName: "useGrouping", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    minFractionDigits = input(null, ...(ngDevMode ? [{ debugName: "minFractionDigits" }] : []));
+    maxFractionDigits = input(null, ...(ngDevMode ? [{ debugName: "maxFractionDigits" }] : []));
+    /** Text shown before the value (e.g. `↑ `). */
+    prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : []));
+    /** Text shown after the value (e.g. ` kg`, `%`). */
+    suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : []));
+    // --- Boundaries & spinner -------------------------------------------------
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Show the increment/decrement spinner buttons. */
+    showButtons = input(false, ...(ngDevMode ? [{ debugName: "showButtons", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    buttonLayout = input('stacked', ...(ngDevMode ? [{ debugName: "buttonLayout" }] : []));
+    /** Override the increment button icon (defaults: chevron-up when stacked, plus otherwise). */
+    incrementIcon = input(null, ...(ngDevMode ? [{ debugName: "incrementIcon" }] : []));
+    /** Override the decrement button icon (defaults: chevron-down when stacked, minus otherwise). */
+    decrementIcon = input(null, ...(ngDevMode ? [{ debugName: "decrementIcon" }] : []));
+    /** Allow an empty (null) value. When false, blurring an empty field falls back to {@link min} or 0. */
+    allowEmpty = input(true, ...(ngDevMode ? [{ debugName: "allowEmpty", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Accessible names for the icon-only controls. French defaults so existing consumers are unchanged;
+     * translate them in a multi-language app.
+     */
+    clearLabel = input('Effacer', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    incrementLabel = input('Augmenter', ...(ngDevMode ? [{ debugName: "incrementLabel" }] : []));
+    decrementLabel = input('Diminuer', ...(ngDevMode ? [{ debugName: "decrementLabel" }] : []));
+    /** The committed numeric value (driven by CVA + user input). */
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    describedBy = computed(() => {
+        if (this.error())
+            return `${this.inputId}-err`;
+        if (this.hint())
+            return `${this.inputId}-hint`;
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    clearVisible = computed(() => this.clearable() && this.value() !== null && !this.isDisabled() && !this.readonly(), ...(ngDevMode ? [{ debugName: "clearVisible" }] : []));
+    incrementIconName = computed(() => this.incrementIcon() ?? (this.buttonLayout() === 'stacked' ? 'chevron-up' : 'plus'), ...(ngDevMode ? [{ debugName: "incrementIconName" }] : []));
+    decrementIconName = computed(() => this.decrementIcon() ?? (this.buttonLayout() === 'stacked' ? 'chevron-down' : 'minus'), ...(ngDevMode ? [{ debugName: "decrementIconName" }] : []));
+    canIncrement = computed(() => {
+        if (this.isDisabled() || this.readonly())
+            return false;
+        const max = this.max();
+        return max === null || (this.value() ?? this.min() ?? 0) < max;
+    }, ...(ngDevMode ? [{ debugName: "canIncrement" }] : []));
+    canDecrement = computed(() => {
+        if (this.isDisabled() || this.readonly())
+            return false;
+        const min = this.min();
+        return min === null || (this.value() ?? min ?? 0) > min;
+    }, ...(ngDevMode ? [{ debugName: "canDecrement" }] : []));
+    /** Locale grouping/decimal separators, derived from Intl so parsing matches formatting. */
+    separators = computed(() => {
+        const sample = new Intl.NumberFormat(this.locale() || undefined, {
+            useGrouping: true,
+        }).formatToParts(1234567.8);
+        return {
+            group: sample.find((p) => p.type === 'group')?.value ?? ',',
+            decimal: sample.find((p) => p.type === 'decimal')?.value ?? '.',
+        };
+    }, ...(ngDevMode ? [{ debugName: "separators" }] : []));
+    /** Base Intl options (style/currency/grouping) without any fraction-digit constraints. */
+    baseOptions() {
+        const opts = { useGrouping: this.useGrouping() };
+        if (this.mode() === 'currency') {
+            opts.style = 'currency';
+            opts.currency = this.currency() || 'USD';
+            opts.currencyDisplay = this.currencyDisplay();
+        }
+        else {
+            opts.style = 'decimal';
+        }
+        return opts;
+    }
+    committedOptions = computed(() => {
+        const opts = this.baseOptions();
+        const min = this.minFractionDigits();
+        const max = this.maxFractionDigits();
+        if (min !== null)
+            opts.minimumFractionDigits = min;
+        if (max !== null)
+            opts.maximumFractionDigits = min !== null ? Math.max(max, min) : max;
+        return opts;
+    }, ...(ngDevMode ? [{ debugName: "committedOptions" }] : []));
+    /** The most fraction digits the field will keep — the resolved Intl maximum (2 for USD, 0 for JPY…). */
+    maxFrac = computed(() => {
+        const fallback = this.maxFractionDigits() ?? (this.mode() === 'currency' ? 2 : 3);
+        try {
+            const resolved = new Intl.NumberFormat(this.locale() || undefined, this.committedOptions()).resolvedOptions().maximumFractionDigits;
+            return resolved ?? fallback;
+        }
+        catch {
+            return fallback;
+        }
+    }, ...(ngDevMode ? [{ debugName: "maxFrac" }] : []));
+    wrapperClasses = computed(() => {
+        const vertical = this.buttonLayout() === 'vertical' && this.showButtons();
+        const parts = [
+            'overflow-hidden rounded-control',
+            vertical ? 'flex flex-col' : `flex items-stretch ${HEIGHTS[this.size()]}`,
+        ];
+        if (this.isDisabled())
+            parts.push('opacity-60 cursor-not-allowed');
+        if (this.appearance() === 'filled') {
+            parts.push('border-transparent bg-muted text-ink');
+            parts.push(this.error()
+                ? 'border-danger focus-within:ring-2 focus-within:ring-danger/30'
+                : 'focus-within:ring-2 focus-within:ring-brand-500/25');
+        }
+        else {
+            parts.push('bg-white text-ink');
+            parts.push(this.error()
+                ? 'border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/25'
+                : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
+        }
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    fieldCellClasses = computed(() => this.buttonLayout() === 'vertical' && this.showButtons() ? HEIGHTS[this.size()] : 'h-full', ...(ngDevMode ? [{ debugName: "fieldCellClasses" }] : []));
+    inputClasses = computed(() => {
+        const parts = [TEXT[this.size()], 'pl-3.5', this.clearVisible() ? 'pr-9' : 'pr-3.5'];
+        if (this.showButtons() && this.buttonLayout() !== 'stacked')
+            parts.push('text-center');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
+    buttonBase = 'inline-flex shrink-0 items-center justify-center text-ink-soft transition-colors ' +
+        'hover:bg-muted hover:text-ink disabled:cursor-not-allowed disabled:opacity-40 select-none';
+    edgeButtonClasses = computed(() => this.buttonLayout() === 'vertical'
+        ? `${this.buttonBase} ${HEIGHTS[this.size()]} border-border`
+        : `${this.buttonBase} w-10 border-border`, ...(ngDevMode ? [{ debugName: "edgeButtonClasses" }] : []));
+    stackedButtonClasses = computed(() => this.buttonBase, ...(ngDevMode ? [{ debugName: "stackedButtonClasses" }] : []));
+    constructor() {
+        // Reflect the committed value into the field whenever it — or a formatting input — changes from
+        // OUTSIDE typing (initial render, writeValue, a spin while blurred, a currency/locale switch).
+        // While the field is the active element the input handler owns the DOM value and its caret, so this
+        // stands down: gating on the live `document.activeElement` (not a signal) is immune to focus-event
+        // timing, which is what makes live formatting safe.
+        effect(() => {
+            const el = this.fieldRef()?.nativeElement;
+            const v = this.value();
+            // Touch the formatting inputs so a currency/locale/affix change repaints a blurred field.
+            this.committedOptions();
+            this.prefix();
+            this.suffix();
+            if (!el || this.isActive(el))
+                return;
+            el.value = v === null ? '' : this.format(v);
+        });
+    }
+    isActive(el) {
+        return typeof document !== 'undefined' && document.activeElement === el;
+    }
+    /** Paint the committed value into the field imperatively (used by spin/clear/blur). */
+    paintCommitted() {
+        const el = this.fieldRef()?.nativeElement;
+        if (!el)
+            return;
+        const v = this.value();
+        el.value = v === null ? '' : this.format(v);
+    }
+    // --- Formatting / parsing helpers -----------------------------------------
+    /** Format a committed value with the configured min/max fraction digits (used at rest and on blur). */
+    format(n) {
+        try {
+            const body = new Intl.NumberFormat(this.locale() || undefined, this.committedOptions()).format(n);
+            return `${this.prefix()}${body}${this.suffix()}`;
+        }
+        catch {
+            return `${this.prefix()}${n}${this.suffix()}`;
+        }
+    }
+    /**
+     * Format a partially-typed value, keeping exactly the fraction digits the user has entered (so
+     * trailing zeros and a lone decimal separator survive) while still grouping the integer part and
+     * showing the currency symbol / affixes.
+     */
+    formatLive(p) {
+        const locale = this.locale() || undefined;
+        const fracCount = p.fracDigits.length;
+        const num = this.toNumber(p) ?? 0;
+        if (fracCount > 0 || !p.hadDecimal) {
+            try {
+                const body = new Intl.NumberFormat(locale, {
+                    ...this.baseOptions(),
+                    minimumFractionDigits: fracCount,
+                    maximumFractionDigits: fracCount,
+                }).format(num);
+                return `${this.prefix()}${body}${this.suffix()}`;
+            }
+            catch {
+                return `${this.prefix()}${num}${this.suffix()}`;
+            }
+        }
+        // A lone decimal separator was just typed ("1234,"): format the integer, then splice the separator
+        // in right after the integer digits — which, for a trailing-symbol currency, is NOT the string end.
+        const dec = this.separators().decimal;
+        let out = '';
+        let inserted = false;
+        try {
+            const parts = new Intl.NumberFormat(locale, {
+                ...this.baseOptions(),
+                maximumFractionDigits: 0,
+            }).formatToParts(num);
+            parts.forEach((part, i) => {
+                out += part.value;
+                const here = part.type === 'integer' || part.type === 'group';
+                const next = parts[i + 1];
+                const nextHere = next && (next.type === 'integer' || next.type === 'group');
+                if (here && !nextHere && !inserted) {
+                    out += dec;
+                    inserted = true;
+                }
+            });
+        }
+        catch {
+            out = `${num}${dec}`;
+            inserted = true;
+        }
+        if (!inserted)
+            out += dec;
+        return `${this.prefix()}${out}${this.suffix()}`;
+    }
+    toNumber(p) {
+        const s = `${p.negative ? '-' : ''}${p.intDigits || '0'}${p.fracDigits ? '.' + p.fracDigits : ''}`;
+        const n = Number(s);
+        return Number.isFinite(n) ? n : null;
+    }
+    /** Pull the sign / integer / fraction fragments out of a formatted, partially-typed string. */
+    parseInput(raw) {
+        const { group, decimal } = this.separators();
+        let t = raw;
+        const prefix = this.prefix();
+        const suffix = this.suffix();
+        if (prefix && t.startsWith(prefix))
+            t = t.slice(prefix.length);
+        if (suffix && t.endsWith(suffix))
+            t = t.slice(0, t.length - suffix.length);
+        if (group)
+            t = t.split(group).join('');
+        if (decimal && decimal !== '.')
+            t = t.split(decimal).join('.');
+        t = t.replace(/[^0-9.\-]/g, '');
+        const negative = t.includes('-');
+        t = t.replace(/-/g, '');
+        const dot = t.indexOf('.');
+        const hadDecimal = dot !== -1 && this.maxFrac() > 0;
+        let intDigits = (hadDecimal ? t.slice(0, dot) : t.replace(/\./g, '')).replace(/\D/g, '');
+        let fracDigits = hadDecimal ? t.slice(dot + 1).replace(/\D/g, '') : '';
+        // Strip a leading run of zeros ("007" -> "7") but keep a lone "0".
+        intDigits = intDigits.replace(/^0+(?=\d)/, '');
+        fracDigits = fracDigits.slice(0, this.maxFrac());
+        return { negative, intDigits, fracDigits, hadDecimal };
+    }
+    /** Characters that "carry meaning" for caret placement (digits, minus, the decimal separator). */
+    isSignificant(ch) {
+        return (ch >= '0' && ch <= '9') || ch === '-' || ch === this.separators().decimal;
+    }
+    significantBefore(s, upto) {
+        let n = 0;
+        for (let i = 0; i < upto && i < s.length; i++)
+            if (this.isSignificant(s[i]))
+                n++;
+        return n;
+    }
+    /** The caret index in `formatted` that sits just after `target` significant characters. */
+    caretAfter(formatted, target) {
+        if (target <= 0) {
+            for (let i = 0; i < formatted.length; i++)
+                if (this.isSignificant(formatted[i]))
+                    return i;
+            return formatted.length;
+        }
+        let n = 0;
+        for (let i = 0; i < formatted.length; i++) {
+            if (this.isSignificant(formatted[i]) && ++n === target)
+                return i + 1;
+        }
+        return formatted.length;
+    }
+    clamp(n) {
+        const min = this.min();
+        const max = this.max();
+        if (min !== null && n < min)
+            n = min;
+        if (max !== null && n > max)
+            n = max;
+        return n;
+    }
+    /** Trim binary-float drift (0.1 + 0.2) back to a clean decimal. */
+    tidy(n) {
+        return Math.round(n * 1e10) / 1e10;
+    }
+    // --- Interaction ----------------------------------------------------------
+    onInput(event) {
+        const el = event.target;
+        const raw = el.value;
+        const caret = el.selectionStart ?? raw.length;
+        const target = this.significantBefore(raw, caret);
+        const parsed = this.parseInput(raw);
+        if (parsed.intDigits === '' && parsed.fracDigits === '' && !parsed.hadDecimal) {
+            // Nothing numeric left — allow a lone "-" mid-entry, otherwise empty.
+            const text = parsed.negative ? '-' : '';
+            el.value = text;
+            el.setSelectionRange(text.length, text.length);
+            this.value.set(null);
+            this.onChange(null);
+            return;
+        }
+        const num = this.toNumber(parsed);
+        const formatted = this.formatLive(parsed);
+        el.value = formatted;
+        const next = this.caretAfter(formatted, target);
+        el.setSelectionRange(next, next);
+        this.value.set(num);
+        this.onChange(num);
+    }
+    onKeydown(event) {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.spin(1);
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.spin(-1);
+        }
+    }
+    onBlur() {
+        let v = this.value();
+        if (v === null && !this.allowEmpty())
+            v = this.min() ?? 0;
+        if (v !== null)
+            v = this.clamp(this.tidy(v));
+        // Re-render through the committed formatter (applies min-fraction padding + clamping).
+        this.value.set(v);
+        this.paintCommitted();
+        this.onChange(v);
+        this.onTouched();
+    }
+    spin(direction) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        const base = this.value() ?? this.min() ?? 0;
+        const nextValue = this.clamp(this.tidy(base + direction * this.step()));
+        this.value.set(nextValue);
+        this.onChange(nextValue);
+        this.onTouched();
+        // Paint the stepped value ourselves — the effect stands down while the field is focused.
+        const el = this.fieldRef()?.nativeElement;
+        if (el) {
+            const text = this.format(nextValue);
+            el.value = text;
+            if (this.isActive(el))
+                el.setSelectionRange(text.length, text.length);
+        }
+    }
+    clear() {
+        this.value.set(null);
+        this.onChange(null);
+        this.onTouched();
+        const el = this.fieldRef()?.nativeElement;
+        if (el)
+            el.value = '';
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(typeof value === 'number' && Number.isFinite(value) ? value : null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsInputNumber, isStandalone: true, selector: "sds-input-number", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: true, isRequired: false, transformFunction: null }, useGrouping: { classPropertyName: "useGrouping", publicName: "useGrouping", isSignal: true, isRequired: false, transformFunction: null }, minFractionDigits: { classPropertyName: "minFractionDigits", publicName: "minFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, maxFractionDigits: { classPropertyName: "maxFractionDigits", publicName: "maxFractionDigits", 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 }, 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 }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, buttonLayout: { classPropertyName: "buttonLayout", publicName: "buttonLayout", isSignal: true, isRequired: false, transformFunction: null }, incrementIcon: { classPropertyName: "incrementIcon", publicName: "incrementIcon", isSignal: true, isRequired: false, transformFunction: null }, decrementIcon: { classPropertyName: "decrementIcon", publicName: "decrementIcon", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdsInputNumber),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">{{ label() }}</label>
+    }
+
+    <div class="relative border transition-colors" [class]="wrapperClasses()">
+      <!-- Horizontal: minus before the field. Vertical: plus above it. -->
+      @if (showButtons() && buttonLayout() === 'horizontal') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="decrementLabel()"
+          [disabled]="!canDecrement()"
+          class="border-r"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(-1)"
+        >
+          <sds-icon [name]="decrementIconName()" [size]="16" />
+        </button>
+      }
+      @if (showButtons() && buttonLayout() === 'vertical') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="incrementLabel()"
+          [disabled]="!canIncrement()"
+          class="w-full border-b"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(1)"
+        >
+          <sds-icon [name]="incrementIconName()" [size]="16" />
+        </button>
+      }
+
+      <div class="relative flex min-w-0 flex-1 items-center" [class]="fieldCellClasses()">
+        <input
+          #field
+          [id]="inputId"
+          type="text"
+          inputmode="decimal"
+          role="spinbutton"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-valuenow]="value()"
+          [attr.aria-valuemin]="min()"
+          [attr.aria-valuemax]="max()"
+          class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+          [class]="inputClasses()"
+          (input)="onInput($event)"
+          (keydown)="onKeydown($event)"
+          (blur)="onBlur()"
+        />
+
+        @if (clearVisible()) {
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="clearLabel()"
+            class="absolute right-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-60 hover:bg-black/5 hover:opacity-100"
+            (mousedown)="$event.preventDefault()"
+            (click)="clear()"
+          >
+            <sds-icon name="x" [size]="15" />
+          </button>
+        }
+      </div>
+
+      <!-- Horizontal: plus after the field. Vertical: minus below it. -->
+      @if (showButtons() && buttonLayout() === 'horizontal') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="incrementLabel()"
+          [disabled]="!canIncrement()"
+          class="border-l"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(1)"
+        >
+          <sds-icon [name]="incrementIconName()" [size]="16" />
+        </button>
+      }
+      @if (showButtons() && buttonLayout() === 'vertical') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="decrementLabel()"
+          [disabled]="!canDecrement()"
+          class="w-full border-t"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(-1)"
+        >
+          <sds-icon [name]="decrementIconName()" [size]="16" />
+        </button>
+      }
+
+      <!-- Stacked: a chevron column at the trailing edge. -->
+      @if (showButtons() && buttonLayout() === 'stacked') {
+        <div class="flex w-9 shrink-0 flex-col divide-y divide-border border-l border-border">
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="incrementLabel()"
+            [disabled]="!canIncrement()"
+            class="min-h-0 flex-1"
+            [class]="stackedButtonClasses()"
+            (mousedown)="$event.preventDefault()"
+            (click)="spin(1)"
+          >
+            <sds-icon [name]="incrementIconName()" [size]="14" />
+          </button>
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="decrementLabel()"
+            [disabled]="!canDecrement()"
+            class="min-h-0 flex-1"
+            [class]="stackedButtonClasses()"
+            (mousedown)="$event.preventDefault()"
+            (click)="spin(-1)"
+          >
+            <sds-icon [name]="decrementIconName()" [size]="14" />
+          </button>
+        </div>
+      }
+    </div>
+
+    @if (error()) {
+      <p [id]="inputId + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="inputId + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsInputNumber, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-input-number',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SdsInputNumber),
+                            multi: true,
+                        },
+                    ],
+                    host: { class: 'block' },
+                    template: `
+    @if (label()) {
+      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">{{ label() }}</label>
+    }
+
+    <div class="relative border transition-colors" [class]="wrapperClasses()">
+      <!-- Horizontal: minus before the field. Vertical: plus above it. -->
+      @if (showButtons() && buttonLayout() === 'horizontal') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="decrementLabel()"
+          [disabled]="!canDecrement()"
+          class="border-r"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(-1)"
+        >
+          <sds-icon [name]="decrementIconName()" [size]="16" />
+        </button>
+      }
+      @if (showButtons() && buttonLayout() === 'vertical') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="incrementLabel()"
+          [disabled]="!canIncrement()"
+          class="w-full border-b"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(1)"
+        >
+          <sds-icon [name]="incrementIconName()" [size]="16" />
+        </button>
+      }
+
+      <div class="relative flex min-w-0 flex-1 items-center" [class]="fieldCellClasses()">
+        <input
+          #field
+          [id]="inputId"
+          type="text"
+          inputmode="decimal"
+          role="spinbutton"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-valuenow]="value()"
+          [attr.aria-valuemin]="min()"
+          [attr.aria-valuemax]="max()"
+          class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+          [class]="inputClasses()"
+          (input)="onInput($event)"
+          (keydown)="onKeydown($event)"
+          (blur)="onBlur()"
+        />
+
+        @if (clearVisible()) {
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="clearLabel()"
+            class="absolute right-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-60 hover:bg-black/5 hover:opacity-100"
+            (mousedown)="$event.preventDefault()"
+            (click)="clear()"
+          >
+            <sds-icon name="x" [size]="15" />
+          </button>
+        }
+      </div>
+
+      <!-- Horizontal: plus after the field. Vertical: minus below it. -->
+      @if (showButtons() && buttonLayout() === 'horizontal') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="incrementLabel()"
+          [disabled]="!canIncrement()"
+          class="border-l"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(1)"
+        >
+          <sds-icon [name]="incrementIconName()" [size]="16" />
+        </button>
+      }
+      @if (showButtons() && buttonLayout() === 'vertical') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="decrementLabel()"
+          [disabled]="!canDecrement()"
+          class="w-full border-t"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(-1)"
+        >
+          <sds-icon [name]="decrementIconName()" [size]="16" />
+        </button>
+      }
+
+      <!-- Stacked: a chevron column at the trailing edge. -->
+      @if (showButtons() && buttonLayout() === 'stacked') {
+        <div class="flex w-9 shrink-0 flex-col divide-y divide-border border-l border-border">
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="incrementLabel()"
+            [disabled]="!canIncrement()"
+            class="min-h-0 flex-1"
+            [class]="stackedButtonClasses()"
+            (mousedown)="$event.preventDefault()"
+            (click)="spin(1)"
+          >
+            <sds-icon [name]="incrementIconName()" [size]="14" />
+          </button>
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="decrementLabel()"
+            [disabled]="!canDecrement()"
+            class="min-h-0 flex-1"
+            [class]="stackedButtonClasses()"
+            (mousedown)="$event.preventDefault()"
+            (click)="spin(-1)"
+          >
+            <sds-icon [name]="decrementIconName()" [size]="14" />
+          </button>
+        </div>
+      }
+    </div>
+
+    @if (error()) {
+      <p [id]="inputId + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="inputId + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", 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 }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], buttonLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLayout", required: false }] }], incrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementIcon", required: false }] }], decrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementIcon", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }] } });
+
+let nextId$b = 0;
+const SIZES$9 = {
+    sm: 'min-h-9 text-sm',
+    md: 'min-h-10 text-sm',
+    lg: 'min-h-12 text-base',
+};
+/**
+ * One language-aware text field for editing a translated value (a {@link SdsLocalizedValue} — a title,
+ * label or description in several languages). Only one language is edited at a time; a compact switcher
+ * sitting **inside the field** flips which translation you are editing, and a dot marks the languages that
+ * already have content, so a partially-translated value is obvious at a glance.
+ *
+ * The active language defaults to {@link currentLanguage} when it is one of {@link languages}, otherwise the
+ * first accepted language — so the field "opens on the language you are working in". Empty translations are
+ * pruned from the emitted value, keeping the stored map clean.
+ *
+ * Implements ControlValueAccessor over the map — use with reactive forms or `[(ngModel)]`:
+ * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
+ */
+class SdsLocalizedInput {
+    inputId = `sds-localized-input-${nextId$b++}`;
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** The accepted language codes, in display order (e.g. `['fr','nl','en']`). */
+    languages = input([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
+    /** Language to pre-select; used when it is one of {@link languages}, else the first accepted language. */
+    currentLanguage = input(null, ...(ngDevMode ? [{ debugName: "currentLanguage" }] : []));
+    multiline = input(false, ...(ngDevMode ? [{ debugName: "multiline", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    rows = input(3, ...(ngDevMode ? [{ debugName: "rows", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Accessible name for the in-field language switcher, and the "no translation yet" title suffix on each
+     * language button. French defaults so existing consumers are unchanged; translate them in a multi-language
+     * app (the buttons are letter-only, so the title carries their meaning).
+     */
+    languageSwitcherLabel = input('Langue', ...(ngDevMode ? [{ debugName: "languageSwitcherLabel" }] : []));
+    untranslatedLabel = input('à traduire', ...(ngDevMode ? [{ debugName: "untranslatedLabel" }] : []));
+    valueMap = signal({}, ...(ngDevMode ? [{ debugName: "valueMap" }] : []));
+    /** Language chosen via the switcher; null means "follow currentLanguage / the first language". */
+    manual = signal(null, ...(ngDevMode ? [{ debugName: "manual" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    wrapperClasses = computed(() => {
+        const parts = [SIZES$9[this.size()]];
+        parts.push(this.isDisabled()
+            ? 'border-border opacity-60 cursor-not-allowed'
+            : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    /** The language currently being edited. */
+    activeLang = computed(() => {
+        const langs = this.languages();
+        if (!langs.length) {
+            return '';
+        }
+        const manual = this.manual();
+        if (manual && langs.includes(manual)) {
+            return manual;
+        }
+        const preferred = this.currentLanguage();
+        return preferred && langs.includes(preferred) ? preferred : langs[0];
+    }, ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
+    current = computed(() => this.valueMap()[this.activeLang()] ?? '', ...(ngDevMode ? [{ debugName: "current" }] : []));
+    filled(lang) {
+        const text = this.valueMap()[lang];
+        return !!text && text.trim().length > 0;
+    }
+    fieldPlaceholder() {
+        const base = this.placeholder();
+        const lang = this.activeLang().toUpperCase();
+        if (base) {
+            return lang ? `${base} (${lang})` : base;
+        }
+        return lang ? `(${lang})` : '';
+    }
+    select(lang) {
+        this.manual.set(lang);
+        this.onTouched();
+    }
+    write(event) {
+        const lang = this.activeLang();
+        if (!lang) {
+            return;
+        }
+        const text = event.target.value;
+        const next = { ...this.valueMap() };
+        if (text) {
+            next[lang] = text;
+        }
+        else {
+            delete next[lang];
+        }
+        this.valueMap.set(next);
+        this.onChange(next);
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.valueMap.set(value ? { ...value } : {});
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLocalizedInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsLocalizedInput, isStandalone: true, selector: "sds-localized-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, languageSwitcherLabel: { classPropertyName: "languageSwitcherLabel", publicName: "languageSwitcherLabel", isSignal: true, isRequired: false, transformFunction: null }, untranslatedLabel: { classPropertyName: "untranslatedLabel", publicName: "untranslatedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdsLocalizedInput),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    @if (label()) {
+      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">{{ label() }}</label>
+    }
+
+    <div
+      class="relative flex items-stretch rounded-control border bg-white text-ink transition-colors"
+      [class]="wrapperClasses()"
+    >
+      @if (multiline()) {
+        <textarea
+          [id]="inputId"
+          [rows]="rows()"
+          [placeholder]="fieldPlaceholder()"
+          [disabled]="isDisabled()"
+          [value]="current()"
+          (input)="write($event)"
+          (blur)="onTouched()"
+          class="min-w-0 flex-1 resize-y bg-transparent px-3.5 py-2 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        ></textarea>
+      } @else {
+        <input
+          [id]="inputId"
+          [placeholder]="fieldPlaceholder()"
+          [disabled]="isDisabled()"
+          [value]="current()"
+          (input)="write($event)"
+          (blur)="onTouched()"
+          class="min-w-0 flex-1 bg-transparent px-3.5 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        />
+      }
+
+      @if (languages().length > 1) {
+        <div
+          class="flex shrink-0 items-center gap-0.5 self-start p-1"
+          [class]="multiline() ? '' : 'self-center'"
+          role="tablist"
+          [attr.aria-label]="languageSwitcherLabel()"
+        >
+          @for (lang of languages(); track lang) {
+            <button
+              type="button"
+              role="tab"
+              tabindex="-1"
+              [disabled]="isDisabled()"
+              (click)="select(lang)"
+              [attr.aria-selected]="activeLang() === lang"
+              [attr.title]="lang.toUpperCase() + (filled(lang) ? '' : ' — ' + untranslatedLabel())"
+              class="flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-semibold uppercase leading-none transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+              [class]="
+                activeLang() === lang
+                  ? 'bg-brand-50 text-brand-700'
+                  : 'text-ink-faint hover:bg-muted hover:text-ink-soft'
+              "
+            >
+              {{ lang }}
+              <span
+                class="inline-block h-1 w-1 rounded-full"
+                [class]="filled(lang) ? 'bg-success' : 'bg-current/30'"
+              ></span>
+            </button>
+          }
+        </div>
+      }
+    </div>
+
+    @if (hint()) {
+      <p class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLocalizedInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-localized-input',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SdsLocalizedInput),
+                            multi: true,
+                        },
+                    ],
+                    host: { class: 'block' },
+                    template: `
+    @if (label()) {
+      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">{{ label() }}</label>
+    }
+
+    <div
+      class="relative flex items-stretch rounded-control border bg-white text-ink transition-colors"
+      [class]="wrapperClasses()"
+    >
+      @if (multiline()) {
+        <textarea
+          [id]="inputId"
+          [rows]="rows()"
+          [placeholder]="fieldPlaceholder()"
+          [disabled]="isDisabled()"
+          [value]="current()"
+          (input)="write($event)"
+          (blur)="onTouched()"
+          class="min-w-0 flex-1 resize-y bg-transparent px-3.5 py-2 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        ></textarea>
+      } @else {
+        <input
+          [id]="inputId"
+          [placeholder]="fieldPlaceholder()"
+          [disabled]="isDisabled()"
+          [value]="current()"
+          (input)="write($event)"
+          (blur)="onTouched()"
+          class="min-w-0 flex-1 bg-transparent px-3.5 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        />
+      }
+
+      @if (languages().length > 1) {
+        <div
+          class="flex shrink-0 items-center gap-0.5 self-start p-1"
+          [class]="multiline() ? '' : 'self-center'"
+          role="tablist"
+          [attr.aria-label]="languageSwitcherLabel()"
+        >
+          @for (lang of languages(); track lang) {
+            <button
+              type="button"
+              role="tab"
+              tabindex="-1"
+              [disabled]="isDisabled()"
+              (click)="select(lang)"
+              [attr.aria-selected]="activeLang() === lang"
+              [attr.title]="lang.toUpperCase() + (filled(lang) ? '' : ' — ' + untranslatedLabel())"
+              class="flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-semibold uppercase leading-none transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+              [class]="
+                activeLang() === lang
+                  ? 'bg-brand-50 text-brand-700'
+                  : 'text-ink-faint hover:bg-muted hover:text-ink-soft'
+              "
+            >
+              {{ lang }}
+              <span
+                class="inline-block h-1 w-1 rounded-full"
+                [class]="filled(lang) ? 'bg-success' : 'bg-current/30'"
+              ></span>
+            </button>
+          }
+        </div>
+      }
+    </div>
+
+    @if (hint()) {
+      <p class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], languageSwitcherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageSwitcherLabel", required: false }] }], untranslatedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "untranslatedLabel", required: false }] }] } });
+
 let nextId$a = 0;
 const SIZES$8 = {
     md: 'h-12 w-11 text-lg',
@@ -7398,6 +8409,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], gridlines: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridlines", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], rowsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageLabel", required: false }] }], paginationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationLabel", required: false }] }], firstPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstPageLabel", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: false }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: false }] }], lastPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastPageLabel", required: false }] }], pageLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLinkLabel", required: false }] }], globalFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilter", required: false }] }], globalFilterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterPlaceholder", required: false }] }], globalFilterAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterAriaLabel", required: false }] }], globalFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], rowUnselect: [{ type: i0.Output, args: ["rowUnselect"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowExpand: [{ type: i0.Output, args: ["rowExpand"] }], rowCollapse: [{ type: i0.Output, args: ["rowCollapse"] }], colReorder: [{ type: i0.Output, args: ["colReorder"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsTableCell), { isSignal: true }] }], rowExpansion: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsTableRowExpansion), { isSignal: true }] }] } });
 
+/**
+ * A tiny transient-notification bus. Application code calls {@link success} / {@link error} / {@link info}
+ * after an action; a single {@link SdsToastHost} mounted in the app shell renders the queue and each toast
+ * auto-dismisses. Deliberately minimal — no positions, no actions-in-toast — because it exists to confirm
+ * an action, not to be a notification centre.
+ *
+ * `providedIn: 'root'`, so injecting it anywhere shares one queue:
+ *
+ * ```ts
+ * private readonly toasts = inject(SdsToastService);
+ * this.toasts.success('Enregistré.');
+ * ```
+ *
+ * Mount the host once (e.g. in the shell): `<sds-toast-host />`.
+ */
+class SdsToastService {
+    seq = 0;
+    toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
+    /** How long a toast stays, in ms, by kind. Errors linger; success/info are brief. */
+    static TTL = {
+        success: 3500,
+        info: 3500,
+        error: 6000,
+    };
+    success(text) {
+        this.push('success', text);
+    }
+    error(text) {
+        this.push('error', text);
+    }
+    info(text) {
+        this.push('info', text);
+    }
+    dismiss(id) {
+        this.toasts.update((list) => list.filter((t) => t.id !== id));
+    }
+    push(kind, text) {
+        const id = ++this.seq;
+        this.toasts.update((list) => [...list, { id, kind, text }]);
+        setTimeout(() => this.dismiss(id), SdsToastService.TTL[kind]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Renders the {@link SdsToastService} queue, fixed bottom-centre. Mount it once, in the app shell:
+ * `<sds-toast-host />`. Application code pushes toasts through the injected service.
+ *
+ * Accessibility: the two live regions are ALWAYS in the DOM (even when empty), because a live region must
+ * pre-exist for its later content changes to be announced. Errors go to an assertive `role="alert"` region
+ * so a failure interrupts; success/info go to a polite region so they queue.
+ */
+class SdsToastHost {
+    toasts = inject(SdsToastService);
+    /**
+     * Accessible name for each toast's close button. French default so existing consumers are unchanged; the
+     * button is icon-only, so an app serving more than one language MUST translate it.
+     */
+    closeLabel = input('Fermer', ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
+    errors = computed(() => this.toasts.toasts().filter((t) => t.kind === 'error'), ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    notices = computed(() => this.toasts.toasts().filter((t) => t.kind !== 'error'), ...(ngDevMode ? [{ debugName: "notices" }] : []));
+    icon(kind) {
+        return kind === 'success' ? 'check-circle' : kind === 'error' ? 'alert-circle' : 'info';
+    }
+    tone(kind) {
+        return kind === 'success' ? 'text-success' : kind === 'error' ? 'text-danger' : 'text-accent-blue';
+    }
+    border(kind) {
+        const accent = kind === 'success' ? 'border-l-success' : kind === 'error' ? 'border-l-danger' : 'border-l-accent-blue';
+        return `border-l-4 ${accent} border-y-border border-r-border`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsToastHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsToastHost, isStandalone: true, selector: "sds-toast-host", inputs: { closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="pointer-events-none fixed inset-x-0 bottom-6 z-[100] flex flex-col items-center gap-2 px-4">
+      <div role="alert" aria-live="assertive" class="flex w-full flex-col items-center gap-2">
+        @for (t of errors(); track t.id) {
+          <ng-container [ngTemplateOutlet]="toast" [ngTemplateOutletContext]="{ t }" />
+        }
+      </div>
+      <div aria-live="polite" class="flex w-full flex-col items-center gap-2">
+        @for (t of notices(); track t.id) {
+          <ng-container [ngTemplateOutlet]="toast" [ngTemplateOutletContext]="{ t }" />
+        }
+      </div>
+    </div>
+
+    <ng-template #toast let-t="t">
+      <div
+        class="pointer-events-auto flex max-w-md items-start gap-2.5 rounded-card border bg-surface px-4 py-3 text-sm shadow-lg"
+        [class]="border(t.kind)"
+      >
+        <sds-icon [name]="icon(t.kind)" [size]="18" class="mt-0.5 shrink-0" [class]="tone(t.kind)" />
+        <span class="text-ink">{{ t.text }}</span>
+        <button
+          type="button"
+          (click)="toasts.dismiss(t.id)"
+          [attr.aria-label]="closeLabel()"
+          class="ml-1 shrink-0 rounded p-0.5 text-ink-faint hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+        >
+          <sds-icon name="x" [size]="15" />
+        </button>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsToastHost, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-toast-host',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, SdsIcon],
+                    template: `
+    <div class="pointer-events-none fixed inset-x-0 bottom-6 z-[100] flex flex-col items-center gap-2 px-4">
+      <div role="alert" aria-live="assertive" class="flex w-full flex-col items-center gap-2">
+        @for (t of errors(); track t.id) {
+          <ng-container [ngTemplateOutlet]="toast" [ngTemplateOutletContext]="{ t }" />
+        }
+      </div>
+      <div aria-live="polite" class="flex w-full flex-col items-center gap-2">
+        @for (t of notices(); track t.id) {
+          <ng-container [ngTemplateOutlet]="toast" [ngTemplateOutletContext]="{ t }" />
+        }
+      </div>
+    </div>
+
+    <ng-template #toast let-t="t">
+      <div
+        class="pointer-events-auto flex max-w-md items-start gap-2.5 rounded-card border bg-surface px-4 py-3 text-sm shadow-lg"
+        [class]="border(t.kind)"
+      >
+        <sds-icon [name]="icon(t.kind)" [size]="18" class="mt-0.5 shrink-0" [class]="tone(t.kind)" />
+        <span class="text-ink">{{ t.text }}</span>
+        <button
+          type="button"
+          (click)="toasts.dismiss(t.id)"
+          [attr.aria-label]="closeLabel()"
+          class="ml-1 shrink-0 rounded p-0.5 text-ink-faint hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+        >
+          <sds-icon name="x" [size]="15" />
+        </button>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }] } });
+
 /**
  * Shared collapse state for the sidebar and its nav items.
  *
@@ -8213,5 +9375,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
+export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLocalizedInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map