@besaitech/ng-design-system 0.0.41 → 0.0.44

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, TemplateRef, Directive, contentChild, Injectable, contentChildren } 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"/>',
@@ -267,7 +272,7 @@ 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$c = 0;
+let nextId$d = 0;
 const SIZES$a = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -280,7 +285,7 @@ const SIZES$a = {
  * sidebar search field).
  */
 class SdsInput {
-    inputId = `sds-input-${nextId$c++}`;
+    inputId = `sds-input-${nextId$d++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -601,6 +606,736 @@ 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',
@@ -3395,6 +4130,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], openCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCalendarLabel", required: false }] }], closeCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeCalendarLabel", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], todayActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayActionLabel", required: false }] }], clearActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearActionLabel", required: false }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsCalendar), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 let nextId$6 = 0;
 
+/**
+ * Supplies a custom template for each option row (and the selected value shown
+ * in the trigger) of an `<sds-select>` / `<sds-multi-select>`. Use as a
+ * structural template projected into the select:
+ *
+ * @example
+ * <sds-select [options]="categories" optionLabel="name" optionValue="id" [(ngModel)]="catId">
+ *   <ng-template sdsSelectOption let-option let-selected="selected">
+ *     <span class="dot" [style.background]="option.color"></span>
+ *     <span class="truncate">{{ option.name }}</span>
+ *   </ng-template>
+ * </sds-select>
+ */
+class SdsSelectOption {
+    /** The wrapped template, rendered by the host select via ngTemplateOutlet. */
+    template = inject(TemplateRef);
+    /** Lets the compiler type-check `let-*` bindings against SdsSelectOptionContext. */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsSelectOption, isStandalone: true, selector: "ng-template[sdsSelectOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsSelectOption]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Supplies a custom template shown in place of the default "no results" message
+ * when a select has no (matching) options.
+ *
+ * @example
+ * <ng-template sdsSelectEmpty let-q>No category matches "{{ q }}".</ng-template>
+ */
+class SdsSelectEmpty {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsSelectEmpty, isStandalone: true, selector: "ng-template[sdsSelectEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsSelectEmpty]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Supplies a custom sticky footer rendered below the option list — e.g. a
+ * "＋ Create new" action. The `close` context callback dismisses the panel.
+ *
+ * @example
+ * <ng-template sdsSelectFooter let-close="close">
+ *   <button (click)="createCategory(); close()">＋ New category</button>
+ * </ng-template>
+ */
+class SdsSelectFooter {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsSelectFooter, isStandalone: true, selector: "ng-template[sdsSelectFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsSelectFooter]',
+                    standalone: true,
+                }]
+        }] });
+
 const SIZES$4 = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -3411,9 +4223,25 @@ let nextId$5 = 0;
  * key; otherwise selection matching falls back to reference equality (a written
  * copy of an option will not match).
  *
+ * Options render as plain text by default. To render richer options (an icon,
+ * an avatar, a two-line row…) project template directives — the same content
+ * also renders in the trigger for the selected value:
+ * - `<ng-template sdsSelectOption let-option>` — one option row (see {@link SdsSelectOption});
+ *   context: the raw `option` (implicit), plus `label`, `value`, `selected`, `disabled`, `index`.
+ * - `<ng-template sdsSelectEmpty let-query>` — replaces the "no results" message (see {@link SdsSelectEmpty}).
+ * - `<ng-template sdsSelectFooter let-close="close">` — a sticky footer action, e.g. "＋ New…"
+ *   (see {@link SdsSelectFooter}); `close()` dismisses the panel.
+ *
  * @example
  * <sds-select [options]="services" optionLabel="name" optionValue="id"
  *            placeholder="Choisir un service" [(ngModel)]="serviceId" filter clearable />
+ *
+ * @example
+ * <sds-select [options]="categories" optionLabel="name" optionValue="id" [(ngModel)]="categoryId">
+ *   <ng-template sdsSelectOption let-option>
+ *     <span class="dot" [style.background]="option.color"></span> {{ option.name }}
+ *   </ng-template>
+ * </sds-select>
  */
 class SdsSelect {
     host = inject(ElementRef);
@@ -3438,6 +4266,12 @@ class SdsSelect {
     filter = input(false, ...(ngDevMode ? [{ debugName: "filter", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     filterPlaceholder = input('Rechercher…', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
     emptyMessage = input('Aucun résultat', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    /** Optional projected `<ng-template sdsSelectOption>` — custom option + selected-value rendering. */
+    optionTpl = contentChild(SdsSelectOption, ...(ngDevMode ? [{ debugName: "optionTpl" }] : []));
+    /** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
+    emptyTpl = contentChild(SdsSelectEmpty, ...(ngDevMode ? [{ debugName: "emptyTpl" }] : []));
+    /** Optional projected `<ng-template sdsSelectFooter>` — a sticky footer action. */
+    footerTpl = contentChild(SdsSelectFooter, ...(ngDevMode ? [{ debugName: "footerTpl" }] : []));
     value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : []));
@@ -3494,9 +4328,30 @@ class SdsSelect {
             const label = labelKey && labelKey in o ? String(o[labelKey]) : String(o['label'] ?? raw);
             const value = this.optionValue() ? o[this.optionValue()] : raw;
             const disabled = this.optionDisabled() ? !!o[this.optionDisabled()] : !!o['disabled'];
-            return { label, value, disabled };
+            return { label, value, disabled, raw };
         }
-        return { label: String(raw), value: raw, disabled: false };
+        return { label: String(raw), value: raw, disabled: false, raw };
+    }
+    /** Context for a projected option template (an option row). */
+    optionContext(opt, index) {
+        return {
+            $implicit: opt.raw,
+            option: opt.raw,
+            label: opt.label,
+            value: opt.value,
+            selected: this.isSelected(opt.value),
+            disabled: opt.disabled,
+            index,
+        };
+    }
+    /** Context for the option template reused in the trigger to render the selected value. */
+    triggerContext = computed(() => {
+        const sel = this.selectedOption();
+        return sel ? this.optionContext(sel, -1) : null;
+    }, ...(ngDevMode ? [{ debugName: "triggerContext" }] : []));
+    /** Context for a projected footer template. */
+    footerContext() {
+        return { $implicit: this.filterText(), filterText: this.filterText(), close: () => this.close(true) };
     }
     equals(a, b) {
         const k = this.dataKey();
@@ -3768,7 +4623,7 @@ class SdsSelect {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSelect, isStandalone: true, selector: "sds-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsSelect), multi: true },
-        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "optionTpl", first: true, predicate: SdsSelectOption, descendants: true, isSignal: true }, { propertyName: "emptyTpl", first: true, predicate: SdsSelectEmpty, descendants: true, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: SdsSelectFooter, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
       <label [for]="selectId" class="mb-1.5 block text-sm font-medium text-ink">
         {{ label() }}
@@ -3791,12 +4646,21 @@ class SdsSelect {
         (click)="toggle()"
         (keydown)="onTriggerKeydown($event)"
       >
-        <span
-          class="flex-1 truncate pl-3.5"
-          [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
-        >
-          {{ selectedOption() ? selectedOption()!.label : placeholder() }}
-        </span>
+        @if (optionTpl() && selectedOption()) {
+          <span class="flex flex-1 items-center gap-2 truncate pl-3.5 text-ink">
+            <ng-container
+              [ngTemplateOutlet]="optionTpl()!.template"
+              [ngTemplateOutletContext]="triggerContext()!"
+            />
+          </span>
+        } @else {
+          <span
+            class="flex-1 truncate pl-3.5"
+            [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
+          >
+            {{ selectedOption() ? selectedOption()!.label : placeholder() }}
+          </span>
+        }
 
         @if (showClear()) {
           <button
@@ -3854,15 +4718,42 @@ class SdsSelect {
                 (click)="opt.disabled ? null : selectOption(opt)"
                 (mouseenter)="opt.disabled ? null : highlightedIndex.set(i)"
               >
-                <span class="truncate">{{ opt.label }}</span>
+                @if (optionTpl()) {
+                  <span class="flex min-w-0 flex-1 items-center gap-2">
+                    <ng-container
+                      [ngTemplateOutlet]="optionTpl()!.template"
+                      [ngTemplateOutletContext]="optionContext(opt, i)"
+                    />
+                  </span>
+                } @else {
+                  <span class="truncate">{{ opt.label }}</span>
+                }
                 @if (isSelected(opt.value)) {
                   <sds-icon name="check" [size]="16" class="shrink-0 text-brand-600" />
                 }
               </li>
             } @empty {
-              <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              @if (emptyTpl()) {
+                <li class="px-3 py-2 text-sm text-ink-faint">
+                  <ng-container
+                    [ngTemplateOutlet]="emptyTpl()!.template"
+                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                  />
+                </li>
+              } @else {
+                <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              }
             }
           </ul>
+
+          @if (footerTpl()) {
+            <div class="border-t border-border">
+              <ng-container
+                [ngTemplateOutlet]="footerTpl()!.template"
+                [ngTemplateOutletContext]="footerContext()"
+              />
+            </div>
+          }
         </div>
       }
     </div>
@@ -3873,14 +4764,14 @@ class SdsSelect {
     @if (error()) {
       <p class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'sds-select',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SdsIcon],
+                    imports: [SdsIcon, NgTemplateOutlet],
                     providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsSelect), multi: true },
                     ],
@@ -3911,12 +4802,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         (click)="toggle()"
         (keydown)="onTriggerKeydown($event)"
       >
-        <span
-          class="flex-1 truncate pl-3.5"
-          [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
-        >
-          {{ selectedOption() ? selectedOption()!.label : placeholder() }}
-        </span>
+        @if (optionTpl() && selectedOption()) {
+          <span class="flex flex-1 items-center gap-2 truncate pl-3.5 text-ink">
+            <ng-container
+              [ngTemplateOutlet]="optionTpl()!.template"
+              [ngTemplateOutletContext]="triggerContext()!"
+            />
+          </span>
+        } @else {
+          <span
+            class="flex-1 truncate pl-3.5"
+            [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
+          >
+            {{ selectedOption() ? selectedOption()!.label : placeholder() }}
+          </span>
+        }
 
         @if (showClear()) {
           <button
@@ -3974,15 +4874,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 (click)="opt.disabled ? null : selectOption(opt)"
                 (mouseenter)="opt.disabled ? null : highlightedIndex.set(i)"
               >
-                <span class="truncate">{{ opt.label }}</span>
+                @if (optionTpl()) {
+                  <span class="flex min-w-0 flex-1 items-center gap-2">
+                    <ng-container
+                      [ngTemplateOutlet]="optionTpl()!.template"
+                      [ngTemplateOutletContext]="optionContext(opt, i)"
+                    />
+                  </span>
+                } @else {
+                  <span class="truncate">{{ opt.label }}</span>
+                }
                 @if (isSelected(opt.value)) {
                   <sds-icon name="check" [size]="16" class="shrink-0 text-brand-600" />
                 }
               </li>
             } @empty {
-              <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              @if (emptyTpl()) {
+                <li class="px-3 py-2 text-sm text-ink-faint">
+                  <ng-container
+                    [ngTemplateOutlet]="emptyTpl()!.template"
+                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                  />
+                </li>
+              } @else {
+                <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              }
             }
           </ul>
+
+          @if (footerTpl()) {
+            <div class="border-t border-border">
+              <ng-container
+                [ngTemplateOutlet]="footerTpl()!.template"
+                [ngTemplateOutletContext]="footerContext()"
+              />
+            </div>
+          }
         </div>
       }
     </div>
@@ -3995,7 +4922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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 }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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 }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 const SIZES$3 = {
     sm: 'min-h-9 text-sm',
@@ -4013,9 +4940,24 @@ let nextId$4 = 0;
  * For object options, set [optionValue] or [dataKey] so written values match by
  * key; otherwise matching falls back to reference equality.
  *
+ * Project template directives to customise the panel:
+ * - `<ng-template sdsSelectOption let-option>` — the content of each option row, after its
+ *   checkbox (see {@link SdsSelectOption}); context: the raw `option` (implicit), plus `label`,
+ *   `value`, `selected`, `disabled`, `index`.
+ * - `<ng-template sdsSelectEmpty let-query>` — replaces the "no results" message (see {@link SdsSelectEmpty}).
+ * - `<ng-template sdsSelectFooter let-close="close">` — a sticky footer action (see {@link SdsSelectFooter});
+ *   `close()` dismisses the panel.
+ *
  * @example
  * <sds-multi-select [options]="services" optionLabel="name" optionValue="code"
  *                  display="chip" filter [(ngModel)]="codes" />
+ *
+ * @example
+ * <sds-multi-select [options]="tags" optionLabel="name" optionValue="id" [(ngModel)]="tagIds">
+ *   <ng-template sdsSelectOption let-option>
+ *     <span class="dot" [style.background]="option.color"></span> {{ option.name }}
+ *   </ng-template>
+ * </sds-multi-select>
  */
 class SdsMultiSelect {
     host = inject(ElementRef);
@@ -4043,6 +4985,12 @@ class SdsMultiSelect {
     filter = input(false, ...(ngDevMode ? [{ debugName: "filter", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     filterPlaceholder = input('Rechercher…', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
     emptyMessage = input('Aucun résultat', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    /** Optional projected `<ng-template sdsSelectOption>` — custom option-row rendering. */
+    optionTpl = contentChild(SdsSelectOption, ...(ngDevMode ? [{ debugName: "optionTpl" }] : []));
+    /** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
+    emptyTpl = contentChild(SdsSelectEmpty, ...(ngDevMode ? [{ debugName: "emptyTpl" }] : []));
+    /** Optional projected `<ng-template sdsSelectFooter>` — a sticky footer action. */
+    footerTpl = contentChild(SdsSelectFooter, ...(ngDevMode ? [{ debugName: "footerTpl" }] : []));
     value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : []));
@@ -4108,9 +5056,25 @@ class SdsMultiSelect {
             const label = labelKey && labelKey in o ? String(o[labelKey]) : String(o['label'] ?? raw);
             const value = this.optionValue() ? o[this.optionValue()] : raw;
             const disabled = this.optionDisabled() ? !!o[this.optionDisabled()] : !!o['disabled'];
-            return { label, value, disabled };
+            return { label, value, disabled, raw };
         }
-        return { label: String(raw), value: raw, disabled: false };
+        return { label: String(raw), value: raw, disabled: false, raw };
+    }
+    /** Context for a projected option template (an option row). */
+    optionContext(opt, index) {
+        return {
+            $implicit: opt.raw,
+            option: opt.raw,
+            label: opt.label,
+            value: opt.value,
+            selected: this.isSelected(opt.value),
+            disabled: opt.disabled,
+            index,
+        };
+    }
+    /** Context for a projected footer template. */
+    footerContext() {
+        return { $implicit: this.filterText(), filterText: this.filterText(), close: () => this.close(true) };
     }
     equals(a, b) {
         const k = this.dataKey();
@@ -4422,7 +5386,7 @@ class SdsMultiSelect {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsMultiSelect, isStandalone: true, selector: "sds-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsMultiSelect), multi: true },
-        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "optionTpl", first: true, predicate: SdsSelectOption, descendants: true, isSignal: true }, { propertyName: "emptyTpl", first: true, predicate: SdsSelectEmpty, descendants: true, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: SdsSelectFooter, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
       <label [for]="selectId" class="mb-1.5 block text-sm font-medium text-ink">
         {{ label() }}
@@ -4555,12 +5519,39 @@ class SdsMultiSelect {
                     <sds-icon name="check" [size]="12" />
                   }
                 </span>
-                <span class="truncate">{{ opt.label }}</span>
+                @if (optionTpl()) {
+                  <span class="flex min-w-0 flex-1 items-center gap-2">
+                    <ng-container
+                      [ngTemplateOutlet]="optionTpl()!.template"
+                      [ngTemplateOutletContext]="optionContext(opt, i)"
+                    />
+                  </span>
+                } @else {
+                  <span class="truncate">{{ opt.label }}</span>
+                }
               </li>
             } @empty {
-              <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              @if (emptyTpl()) {
+                <li class="px-3 py-2 text-sm text-ink-faint">
+                  <ng-container
+                    [ngTemplateOutlet]="emptyTpl()!.template"
+                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                  />
+                </li>
+              } @else {
+                <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              }
             }
           </ul>
+
+          @if (footerTpl()) {
+            <div class="border-t border-border">
+              <ng-container
+                [ngTemplateOutlet]="footerTpl()!.template"
+                [ngTemplateOutletContext]="footerContext()"
+              />
+            </div>
+          }
         </div>
       }
     </div>
@@ -4571,14 +5562,14 @@ class SdsMultiSelect {
     @if (error()) {
       <p class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMultiSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'sds-multi-select',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SdsIcon],
+                    imports: [SdsIcon, NgTemplateOutlet],
                     providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsMultiSelect), multi: true },
                     ],
@@ -4719,12 +5710,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     <sds-icon name="check" [size]="12" />
                   }
                 </span>
-                <span class="truncate">{{ opt.label }}</span>
+                @if (optionTpl()) {
+                  <span class="flex min-w-0 flex-1 items-center gap-2">
+                    <ng-container
+                      [ngTemplateOutlet]="optionTpl()!.template"
+                      [ngTemplateOutletContext]="optionContext(opt, i)"
+                    />
+                  </span>
+                } @else {
+                  <span class="truncate">{{ opt.label }}</span>
+                }
               </li>
             } @empty {
-              <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              @if (emptyTpl()) {
+                <li class="px-3 py-2 text-sm text-ink-faint">
+                  <ng-container
+                    [ngTemplateOutlet]="emptyTpl()!.template"
+                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                  />
+                </li>
+              } @else {
+                <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              }
             }
           </ul>
+
+          @if (footerTpl()) {
+            <div class="border-t border-border">
+              <ng-container
+                [ngTemplateOutlet]="footerTpl()!.template"
+                [ngTemplateOutletContext]="footerContext()"
+              />
+            </div>
+          }
         </div>
       }
     </div>
@@ -4737,7 +5755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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 }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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 }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 const SDS_PHONE_COUNTRIES = [
     { iso2: 'BE', name: 'Belgique', dialCode: '32', lengths: [9], format: '### ## ## ##', example: '470123456' },
@@ -8640,5 +9658,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, 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 };
+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, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, 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