@besaitech/ng-design-system 0.0.49 → 0.0.51

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, viewChild, numberAttribute, viewChildren, afterRenderEffect, ElementRef, model, Injector, afterNextRender, TemplateRef, Directive, contentChild, Injectable, contentChildren, untracked, DestroyRef } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, numberAttribute, output, signal, forwardRef, viewChild, viewChildren, afterRenderEffect, ElementRef, model, Injector, afterNextRender, TemplateRef, Directive, contentChild, Injectable, contentChildren, untracked, DestroyRef } 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';
@@ -62,7 +62,10 @@ const SDS_ICONS = {
     copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
     type: '<polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/>',
     tag: '<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/>',
+    ticket: '<path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M13 5v2"/><path d="M13 17v2"/><path d="M13 11v2"/>',
     square: '<rect width="18" height="18" x="3" y="3" rx="2"/>',
+    'square-check': '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="m9 12 2 2 4-4"/>',
+    'circle-dot': '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/>',
     'circle-user': '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/>',
     'layout-grid': '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>',
     'panels-top-left': '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/>',
@@ -160,12 +163,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 const BASE = 'inline-flex items-center justify-center gap-2 font-medium ' +
     'transition-colors duration-150 select-none whitespace-nowrap cursor-pointer ' +
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ' +
-    'focus-visible:ring-brand-500 disabled:opacity-50 disabled:pointer-events-none';
+    'focus-visible:ring-offset-surface focus-visible:ring-brand-500 ' +
+    'disabled:opacity-50 disabled:pointer-events-none';
+/**
+ * Dark mode has its own fills. A monochrome brand's dark 600 step is a mid-dark grey: as a primary fill
+ * it read as disabled, and at `disabled:opacity-50` the real disabled state looked the same. So the dark
+ * primary is the inverted light fill (`ink` on `surface`); tertiary and ghost swap their black/brand-50
+ * tints for white ones, which show on a dark surface.
+ */
 const VARIANTS$2 = {
-    primary: 'bg-brand-600 text-white shadow-sm hover:bg-brand-700 active:bg-brand-800',
+    primary: 'bg-brand-600 text-white shadow-sm hover:bg-brand-700 active:bg-brand-800 ' +
+        'dark:bg-ink dark:text-surface dark:hover:bg-ink/90 dark:active:bg-ink/80',
     secondary: 'bg-surface text-ink border border-border shadow-sm hover:bg-muted active:bg-brand-50',
-    tertiary: 'bg-brand-50 text-brand-700 hover:bg-brand-100 active:bg-brand-200/70',
-    ghost: 'bg-transparent text-ink-soft hover:bg-black/5 active:bg-black/10',
+    tertiary: 'bg-brand-50 text-brand-700 hover:bg-brand-100 active:bg-brand-200/70 ' +
+        'dark:bg-white/10 dark:text-ink dark:hover:bg-white/15 dark:active:bg-white/20',
+    ghost: 'bg-transparent text-ink-soft hover:bg-black/5 active:bg-black/10 ' +
+        'dark:hover:bg-white/10 dark:active:bg-white/15',
     danger: 'bg-danger text-white shadow-sm hover:brightness-95 active:brightness-90',
 };
 const SIZES$b = {
@@ -280,7 +293,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$e = 0;
+let nextId$f = 0;
 const SIZES$a = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -293,7 +306,7 @@ const SIZES$a = {
  * sidebar search field).
  */
 class SdsInput {
-    inputId = `sds-input-${nextId$e++}`;
+    inputId = `sds-input-${nextId$f++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -321,6 +334,14 @@ class SdsInput {
     shape = input('control', ...(ngDevMode ? [{ debugName: "shape" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * The native `autocomplete` token (`name`, `tel`, `email`, `new-password`, `one-time-code`…). Empty
+     * leaves the browser's default. Checkout and sign-up fields need it: browsers autofill from it, and
+     * password managers only offer a generated password for `new-password`.
+     */
+    autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
+    /** Hard character cap on the native field; 0 means no limit. */
+    maxLength = input(0, ...(ngDevMode ? [{ debugName: "maxLength", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /**
      * Accessible name for the clear button. French default so existing consumers are unchanged, but an
      * app serving more than one language MUST translate it — it is an icon-only control, so this string
@@ -421,7 +442,7 @@ class SdsInput {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsInput, isStandalone: true, selector: "sds-input", 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 }, type: { classPropertyName: "type", publicName: "type", 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 }, shape: { classPropertyName: "shape", publicName: "shape", 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 }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingAction: { classPropertyName: "trailingAction", publicName: "trailingAction", isSignal: true, isRequired: false, transformFunction: null }, trailingActionLabel: { classPropertyName: "trailingActionLabel", publicName: "trailingActionLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingActionPressed: { classPropertyName: "trailingActionPressed", publicName: "trailingActionPressed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trailingActionClick: "trailingActionClick" }, host: { classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsInput, isStandalone: true, selector: "sds-input", 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 }, type: { classPropertyName: "type", publicName: "type", 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 }, shape: { classPropertyName: "shape", publicName: "shape", 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 }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingAction: { classPropertyName: "trailingAction", publicName: "trailingAction", isSignal: true, isRequired: false, transformFunction: null }, trailingActionLabel: { classPropertyName: "trailingActionLabel", publicName: "trailingActionLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingActionPressed: { classPropertyName: "trailingActionPressed", publicName: "trailingActionPressed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trailingActionClick: "trailingActionClick" }, host: { classAttribute: "block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SdsInput),
@@ -459,6 +480,8 @@ class SdsInput {
         [placeholder]="placeholder()"
         [disabled]="isDisabled()"
         [value]="value()"
+        [attr.autocomplete]="autocomplete() || null"
+        [attr.maxlength]="maxLength() || null"
         [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
         [attr.aria-invalid]="error() ? 'true' : null"
         [attr.aria-describedby]="describedBy()"
@@ -556,6 +579,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [placeholder]="placeholder()"
         [disabled]="isDisabled()"
         [value]="value()"
+        [attr.autocomplete]="autocomplete() || null"
+        [attr.maxlength]="maxLength() || null"
         [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
         [attr.aria-invalid]="error() ? 'true' : null"
         [attr.aria-describedby]="describedBy()"
@@ -612,9 +637,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       </p>
     }
   `, 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"] }] } });
+        }], 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 }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", 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$d = 0;
+let nextId$e = 0;
 const HEIGHTS = {
     sm: 'h-9',
     md: 'h-10',
@@ -637,7 +662,7 @@ const TEXT = {
  * {@link min}/{@link max} on blur and on every spinner step; ArrowUp / ArrowDown also step it.
  */
 class SdsInputNumber {
-    inputId = `sds-input-number-${nextId$d++}`;
+    inputId = `sds-input-number-${nextId$e++}`;
     fieldRef = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldRef" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -1344,7 +1369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], 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$c = 0;
+let nextId$d = 0;
 const SIZES$9 = {
     sm: 'min-h-9 text-sm',
     md: 'min-h-10 text-sm',
@@ -1364,7 +1389,7 @@ const SIZES$9 = {
  * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
  */
 class SdsLocalizedInput {
-    inputId = `sds-localized-input-${nextId$c++}`;
+    inputId = `sds-localized-input-${nextId$d++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -1620,7 +1645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], 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$b = 0;
+let nextId$c = 0;
 const SIZES$8 = {
     md: 'h-12 w-11 text-lg',
     lg: 'h-14 w-12 text-xl',
@@ -1637,7 +1662,7 @@ const SIZES$8 = {
  * first box and have it land correctly.
  */
 class SdsOtpInput {
-    groupId = `sds-otp-${nextId$b++}`;
+    groupId = `sds-otp-${nextId$c++}`;
     /** How many boxes / characters the code has. */
     length = input(6, ...(ngDevMode ? [{ debugName: "length", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -1937,7 +1962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", 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 }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], cellLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellLabel", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], cells: [{ type: i0.ViewChildren, args: ['cell', { isSignal: true }] }] } });
 
-let nextId$a = 0;
+let nextId$b = 0;
 const SIZES$7 = {
     sm: 'text-sm px-3 py-2',
     md: 'text-sm px-3.5 py-2.5',
@@ -1949,7 +1974,7 @@ const SIZES$7 = {
  * [(ngModel)].
  */
 class SdsTextarea {
-    fieldId = `sds-textarea-${nextId$a++}`;
+    fieldId = `sds-textarea-${nextId$b++}`;
     field = viewChild('field', ...(ngDevMode ? [{ debugName: "field" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -1958,6 +1983,11 @@ class SdsTextarea {
     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 — the textarea counterpart of `sds-input`'s
+     * `filled`, so a form that uses filled inputs keeps one look down to its notes field.
+     */
+    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
@@ -1992,14 +2022,24 @@ class SdsTextarea {
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     fieldClasses = computed(() => {
         const parts = [
-            'block w-full rounded-control border bg-surface text-ink outline-none transition-colors placeholder:text-ink-faint',
+            'block w-full rounded-control border text-ink outline-none transition-colors placeholder:text-ink-faint',
             SIZES$7[this.size()],
         ];
         if (this.autoResize())
             parts.push('overflow-hidden');
-        parts.push(this.error()
-            ? 'border-danger focus:border-danger focus:ring-2 focus:ring-danger/25'
-            : 'border-border focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25');
+        if (this.appearance() === 'filled') {
+            // border-transparent, not border-0, for the same reason as sds-input's filled: one box model.
+            parts.push('bg-muted');
+            parts.push(this.error()
+                ? 'border-danger focus:ring-2 focus:ring-danger/30'
+                : 'border-transparent focus:ring-2 focus:ring-brand-500/25');
+        }
+        else {
+            parts.push('bg-surface');
+            parts.push(this.error()
+                ? 'border-danger focus:border-danger focus:ring-2 focus:ring-danger/25'
+                : 'border-border focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25');
+        }
         if (this.isDisabled())
             parts.push('opacity-60 cursor-not-allowed');
         return parts.join(' ');
@@ -2046,7 +2086,7 @@ class SdsTextarea {
         el.style.height = `${el.scrollHeight}px`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTextarea, isStandalone: true, selector: "sds-textarea", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTextarea, isStandalone: true, selector: "sds-textarea", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SdsTextarea),
@@ -2185,9 +2225,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { field: [{ 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { field: [{ 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
 
-let nextId$9 = 0;
+let nextId$a = 0;
 const SIZES$6 = {
     sm: { track: 'h-5 w-9', knob: 'h-4 w-4', on: 'translate-x-4', icon: 11 },
     md: { track: 'h-6 w-11', knob: 'h-5 w-5', on: 'translate-x-5', icon: 13 },
@@ -2200,7 +2240,7 @@ const SIZES$6 = {
  * states.
  */
 class SdsToggleSwitch {
-    fieldId = `sds-toggle-switch-${nextId$9++}`;
+    fieldId = `sds-toggle-switch-${nextId$a++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -2236,14 +2276,21 @@ class SdsToggleSwitch {
             return `${this.fieldId}-hint`;
         return null;
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    /**
+     * On/off must read at a glance in both modes. In light mode the brand track against a pale grey one does
+     * it. In dark mode a monochrome brand's 600 step is a mid-dark grey, as dim as the off track, so there
+     * "on" flips to a light track with a dark knob and "off" keeps a dim track with a muted knob. `ink` (not
+     * black) tints the off track so it stays visible on dark surfaces too.
+     */
     trackClasses = computed(() => {
         const parts = [this.sizing().track];
-        parts.push(this.checked() ? 'bg-brand-600' : 'bg-black/15');
+        parts.push(this.checked() ? 'bg-brand-600 dark:bg-ink' : 'bg-ink/15');
         return parts.join(' ');
     }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : []));
     knobClasses = computed(() => {
         const parts = [this.sizing().knob];
         parts.push(this.checked() ? this.sizing().on : 'translate-x-0.5');
+        parts.push(this.checked() ? 'bg-white dark:bg-surface' : 'bg-white dark:bg-ink-soft');
         return parts.join(' ');
     }, ...(ngDevMode ? [{ debugName: "knobClasses" }] : []));
     constructor() {
@@ -2316,20 +2363,20 @@ class SdsToggleSwitch {
         (keydown.space)="onSpace($event)"
       >
         <span
-          class="pointer-events-none inline-flex items-center justify-center rounded-full bg-white shadow-sm transition-transform"
+          class="pointer-events-none inline-flex items-center justify-center rounded-full shadow-sm transition-[transform,background-color]"
           [class]="knobClasses()"
         >
           @if (checked() && onIcon()) {
             <sds-icon
               [name]="onIcon()!"
               [size]="sizing().icon"
-              class="text-brand-600"
+              class="text-brand-600 dark:text-ink"
             />
           } @else if (!checked() && offIcon()) {
             <sds-icon
               [name]="offIcon()!"
               [size]="sizing().icon"
-              class="text-ink-faint"
+              class="text-ink-faint dark:text-surface"
             />
           }
         </span>
@@ -2392,20 +2439,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         (keydown.space)="onSpace($event)"
       >
         <span
-          class="pointer-events-none inline-flex items-center justify-center rounded-full bg-white shadow-sm transition-transform"
+          class="pointer-events-none inline-flex items-center justify-center rounded-full shadow-sm transition-[transform,background-color]"
           [class]="knobClasses()"
         >
           @if (checked() && onIcon()) {
             <sds-icon
               [name]="onIcon()!"
               [size]="sizing().icon"
-              class="text-brand-600"
+              class="text-brand-600 dark:text-ink"
             />
           } @else if (!checked() && offIcon()) {
             <sds-icon
               [name]="offIcon()!"
               [size]="sizing().icon"
-              class="text-ink-faint"
+              class="text-ink-faint dark:text-surface"
             />
           }
         </span>
@@ -2437,17 +2484,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], trueValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "trueValue", required: false }] }], falseValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "falseValue", required: false }] }], onIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onIcon", required: false }] }], offIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIcon", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
 
-let nextId$8 = 0;
+let nextId$9 = 0;
 /**
  * Boolean checkbox. Implements ControlValueAccessor — use with reactive forms
  * or `[(ngModel)]`. Renders a styled box (brand-filled with a check when on)
- * and an optional inline label.
+ * and an optional inline label. Without a visible `label` it renders no `<label>`
+ * of its own, so it can sit inside the consumer's `<label>` (a whole clickable
+ * row), whose text then names it.
  *
  * @example
  * <sds-checkbox label="Fusion automatique" [(ngModel)]="autoMerge" />
  */
 class SdsCheckbox {
-    id = `sds-checkbox-${nextId$8++}`;
+    id = `sds-checkbox-${nextId$9++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -2457,6 +2506,7 @@ class SdsCheckbox {
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     iconSize = computed(() => (this.size() === 'sm' ? 11 : 13), ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    stateClasses = computed(() => this.isDisabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer', ...(ngDevMode ? [{ debugName: "stateClasses" }] : []));
     boxClasses = computed(() => {
         const size = this.size() === 'sm' ? 'h-4 w-4' : 'h-5 w-5';
         const state = this.checked()
@@ -2493,10 +2543,20 @@ class SdsCheckbox {
                 multi: true,
             },
         ], ngImport: i0, template: `
-    <label
-      class="inline-flex select-none items-center gap-2"
-      [class]="isDisabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'"
-    >
+    <!-- With a visible label the whole thing is a <label>. Without one it is a plain span, so the box can
+         sit inside the consumer's own <label> (a clickable row, say) without nesting labels. -->
+    @if (label()) {
+      <label class="inline-flex select-none items-center gap-2" [class]="stateClasses()">
+        <ng-container [ngTemplateOutlet]="box" />
+        <span class="text-sm text-ink">{{ label() }}</span>
+      </label>
+    } @else {
+      <span class="inline-flex select-none items-center" [class]="stateClasses()">
+        <ng-container [ngTemplateOutlet]="box" />
+      </span>
+    }
+
+    <ng-template #box>
       <span
         class="relative inline-flex shrink-0 items-center justify-center rounded-control border transition-colors"
         [class]="boxClasses()"
@@ -2515,18 +2575,15 @@ class SdsCheckbox {
           <sds-icon name="check" [size]="iconSize()" [strokeWidth]="3" />
         }
       </span>
-      @if (label()) {
-        <span class="text-sm text-ink">{{ label() }}</span>
-      }
-    </label>
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </ng-template>
+  `, 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: SdsCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'sds-checkbox',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SdsIcon],
+                    imports: [SdsIcon, NgTemplateOutlet],
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -2536,10 +2593,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     ],
                     host: { class: 'inline-flex' },
                     template: `
-    <label
-      class="inline-flex select-none items-center gap-2"
-      [class]="isDisabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'"
-    >
+    <!-- With a visible label the whole thing is a <label>. Without one it is a plain span, so the box can
+         sit inside the consumer's own <label> (a clickable row, say) without nesting labels. -->
+    @if (label()) {
+      <label class="inline-flex select-none items-center gap-2" [class]="stateClasses()">
+        <ng-container [ngTemplateOutlet]="box" />
+        <span class="text-sm text-ink">{{ label() }}</span>
+      </label>
+    } @else {
+      <span class="inline-flex select-none items-center" [class]="stateClasses()">
+        <ng-container [ngTemplateOutlet]="box" />
+      </span>
+    }
+
+    <ng-template #box>
       <span
         class="relative inline-flex shrink-0 items-center justify-center rounded-control border transition-colors"
         [class]="boxClasses()"
@@ -2558,14 +2625,214 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           <sds-icon name="check" [size]="iconSize()" [strokeWidth]="3" />
         }
       </span>
-      @if (label()) {
-        <span class="text-sm text-ink">{{ label() }}</span>
-      }
-    </label>
+    </ng-template>
   `,
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
+let nextId$8 = 0;
+/**
+ * Mounted radios by group name. A pick updates the rest of its group, because a native radio says
+ * nothing when the browser unchecks it — without this a reactive form would leave the old choice drawn.
+ */
+const groups = new Map();
+/**
+ * One option of a single-choice group: a styled circle (brand-filled with a dot when on) over a native
+ * radio input, so grouping and keyboard behaviour stay the browser's — radios that share a `name`
+ * move with the arrow keys and only one of them is on.
+ *
+ * Two ways to bind it:
+ * - with forms: every radio of the group gets the same `[(ngModel)]` / `formControlName`, the same
+ *   `name` and its own `[value]`; the control holds the value of the selected radio
+ *   (ControlValueAccessor, like a native radio);
+ * - without forms: drive `[checked]` yourself and update it from `(selected)`, which emits this radio's
+ *   value when the user picks it.
+ *
+ * Like `sds-checkbox`, without a visible `label` it renders no `<label>` of its own, so it can sit
+ * inside the consumer's `<label>` (a whole clickable row), whose text then names it.
+ *
+ * @example
+ * <sds-radio name="size" value="small" label="Petit" [(ngModel)]="size" />
+ * <sds-radio name="size" value="large" label="Grand" [(ngModel)]="size" />
+ */
+class SdsRadio {
+    id = `sds-radio-${nextId$8++}`;
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Accessible name used when no visible [label] is provided. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** The group's name, shared by all its radios (native grouping, arrow keys, and form syncing). */
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    /** What this option stands for: a form control bound to the group holds it while this radio is on. */
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** On/off when used without forms. Ignored once a form control is bound. */
+    checked = input(false, ...(ngDevMode ? [{ debugName: "checked", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Emits this radio's value when the user picks it. */
+    selected = output();
+    /** The group's current value, once a form control is bound (see {@link registerOnChange}). */
+    modelValue = signal(undefined, ...(ngDevMode ? [{ debugName: "modelValue" }] : []));
+    formBound = signal(false, ...(ngDevMode ? [{ debugName: "formBound" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isChecked = computed(() => this.formBound() ? Object.is(this.modelValue(), this.value()) : this.checked(), ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
+    stateClasses = computed(() => this.isDisabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer', ...(ngDevMode ? [{ debugName: "stateClasses" }] : []));
+    circleClasses = computed(() => {
+        const size = this.size() === 'sm' ? 'h-4 w-4' : 'h-5 w-5';
+        const state = this.isChecked() ? 'border-brand-600 bg-brand-600' : 'border-border bg-surface';
+        const focus = 'focus-within:ring-2 focus-within:ring-brand-500/30 focus-within:border-brand-500';
+        return `${size} ${state} ${focus}`;
+    }, ...(ngDevMode ? [{ debugName: "circleClasses" }] : []));
+    dotClasses = computed(() => this.size() === 'sm' ? 'h-1.5 w-1.5' : 'h-2 w-2', ...(ngDevMode ? [{ debugName: "dotClasses" }] : []));
+    constructor() {
+        effect((onCleanup) => {
+            const name = this.name();
+            if (!name) {
+                return;
+            }
+            let group = groups.get(name);
+            if (!group) {
+                group = new Set();
+                groups.set(name, group);
+            }
+            group.add(this);
+            onCleanup(() => {
+                group.delete(this);
+                if (group.size === 0) {
+                    groups.delete(name);
+                }
+            });
+        });
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.modelValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+        this.formBound.set(true);
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    /** A native radio only fires `change` when it turns on. */
+    onPick() {
+        const value = this.value();
+        if (this.formBound()) {
+            const name = this.name();
+            for (const radio of (name && groups.get(name)) || [this]) {
+                radio.modelValue.set(value);
+            }
+            this.onChange(value);
+        }
+        this.selected.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsRadio, isStandalone: true, selector: "sds-radio", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", 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 } }, outputs: { selected: "selected" }, host: { classAttribute: "inline-flex" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdsRadio),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    @if (label()) {
+      <label class="inline-flex select-none items-center gap-2" [class]="stateClasses()">
+        <ng-container [ngTemplateOutlet]="circle" />
+        <span class="text-sm text-ink">{{ label() }}</span>
+      </label>
+    } @else {
+      <span class="inline-flex select-none items-center" [class]="stateClasses()">
+        <ng-container [ngTemplateOutlet]="circle" />
+      </span>
+    }
+
+    <ng-template #circle>
+      <span
+        class="relative inline-flex shrink-0 items-center justify-center rounded-full border transition-colors"
+        [class]="circleClasses()"
+      >
+        <input
+          type="radio"
+          class="absolute inset-0 m-0 cursor-[inherit] opacity-0"
+          [id]="id"
+          [attr.name]="name() || null"
+          [checked]="isChecked()"
+          [disabled]="isDisabled()"
+          [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+          (change)="onPick()"
+          (blur)="onTouched()"
+        />
+        @if (isChecked()) {
+          <span
+            class="pointer-events-none rounded-full bg-white"
+            [class]="dotClasses()"
+            aria-hidden="true"
+          ></span>
+        }
+      </span>
+    </ng-template>
+  `, isInline: true, dependencies: [{ 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: SdsRadio, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-radio',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SdsRadio),
+                            multi: true,
+                        },
+                    ],
+                    host: { class: 'inline-flex' },
+                    template: `
+    @if (label()) {
+      <label class="inline-flex select-none items-center gap-2" [class]="stateClasses()">
+        <ng-container [ngTemplateOutlet]="circle" />
+        <span class="text-sm text-ink">{{ label() }}</span>
+      </label>
+    } @else {
+      <span class="inline-flex select-none items-center" [class]="stateClasses()">
+        <ng-container [ngTemplateOutlet]="circle" />
+      </span>
+    }
+
+    <ng-template #circle>
+      <span
+        class="relative inline-flex shrink-0 items-center justify-center rounded-full border transition-colors"
+        [class]="circleClasses()"
+      >
+        <input
+          type="radio"
+          class="absolute inset-0 m-0 cursor-[inherit] opacity-0"
+          [id]="id"
+          [attr.name]="name() || null"
+          [checked]="isChecked()"
+          [disabled]="isDisabled()"
+          [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+          (change)="onPick()"
+          (blur)="onTouched()"
+        />
+        @if (isChecked()) {
+          <span
+            class="pointer-events-none rounded-full bg-white"
+            [class]="dotClasses()"
+            aria-hidden="true"
+          ></span>
+        }
+      </span>
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+
 const STATUS_COLOR = {
     online: 'bg-success',
     offline: 'bg-ink-faint',
@@ -9334,6 +9601,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * for the slow drifting brand blobs behind the page. Both read the brand ramp, so they follow the active
  * theme and dark mode, and the decorations respect prefers-reduced-motion.
  *
+ * Page overlays (drawers, dialogs) can be rendered anywhere in the page: `<main>` is not a stacking
+ * context, so a `fixed` overlay with a z-index above the top bar's (z-30) covers the top bar too.
+ *
  * @example
  * <sds-shell background="gradient" decorations>
  *   <sds-topbar appearance="glass" sdsTopbar … />
@@ -9345,27 +9615,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class SdsShell {
     /** `plain` flat canvas (default) or a soft brand-tinted `gradient` wash. */
     background = input('plain', ...(ngDevMode ? [{ debugName: "background" }] : []));
-    /** Add slow-drifting brand-tinted blobs behind the page content (opt-in). */
+    /** Add slow-drifting brand-tinted blobs behind the page content (opt-in). They stay in place while the page scrolls. */
     decorations = input(false, ...(ngDevMode ? [{ debugName: "decorations", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    mainClass = computed(() => this.background() === 'gradient'
+    areaClass = computed(() => this.background() === 'gradient'
         ? 'bg-linear-to-br from-brand-50/50 via-canvas to-brand-100/40'
-        : 'bg-canvas', ...(ngDevMode ? [{ debugName: "mainClass" }] : []));
+        : 'bg-canvas', ...(ngDevMode ? [{ debugName: "areaClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsShell, isStandalone: true, selector: "sds-shell", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, decorations: { classPropertyName: "decorations", publicName: "decorations", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <div class="flex h-screen flex-col overflow-hidden">
       <ng-content select="[sdsTopbar]" />
       <div class="flex min-h-0 flex-1">
         <ng-content select="[sdsSidebar]" />
-        <main class="relative isolate min-w-0 flex-1 overflow-y-auto" [class]="mainClass()">
+        <!--
+          The content area carries the background and the ambient blobs; the scrolling <main> sits on top,
+          transparent. <main> is positioned but never a stacking context (no isolate, no z-index): one would
+          trap a page's own overlays — drawers, dialogs, fixed popovers — under the top bar (z-30) however
+          high their z-index. Same pattern as the top bar and sidebar decorations: the blob layer comes first
+          with no z-index, so the positioned <main> after it paints above it.
+        -->
+        <div class="relative flex min-w-0 flex-1" [class]="areaClass()">
           @if (decorations()) {
-            <div class="pointer-events-none absolute inset-0 -z-10 overflow-hidden" aria-hidden="true">
+            <div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
               <div class="absolute -left-32 top-10 h-96 w-96 rounded-full bg-brand-300/15 blur-3xl animate-sds-ambient"></div>
               <div class="absolute -right-40 top-1/3 h-[28rem] w-[28rem] rounded-full bg-brand-400/12 blur-3xl animate-sds-ambient [animation-delay:4s]"></div>
               <div class="absolute bottom-10 left-1/4 h-80 w-80 rounded-full bg-brand-200/20 blur-3xl animate-sds-ambient [animation-delay:7s]"></div>
             </div>
           }
-          <ng-content />
-        </main>
+          <main class="relative min-w-0 flex-1 overflow-y-auto">
+            <ng-content />
+          </main>
+        </div>
       </div>
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -9381,16 +9660,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       <ng-content select="[sdsTopbar]" />
       <div class="flex min-h-0 flex-1">
         <ng-content select="[sdsSidebar]" />
-        <main class="relative isolate min-w-0 flex-1 overflow-y-auto" [class]="mainClass()">
+        <!--
+          The content area carries the background and the ambient blobs; the scrolling <main> sits on top,
+          transparent. <main> is positioned but never a stacking context (no isolate, no z-index): one would
+          trap a page's own overlays — drawers, dialogs, fixed popovers — under the top bar (z-30) however
+          high their z-index. Same pattern as the top bar and sidebar decorations: the blob layer comes first
+          with no z-index, so the positioned <main> after it paints above it.
+        -->
+        <div class="relative flex min-w-0 flex-1" [class]="areaClass()">
           @if (decorations()) {
-            <div class="pointer-events-none absolute inset-0 -z-10 overflow-hidden" aria-hidden="true">
+            <div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
               <div class="absolute -left-32 top-10 h-96 w-96 rounded-full bg-brand-300/15 blur-3xl animate-sds-ambient"></div>
               <div class="absolute -right-40 top-1/3 h-[28rem] w-[28rem] rounded-full bg-brand-400/12 blur-3xl animate-sds-ambient [animation-delay:4s]"></div>
               <div class="absolute bottom-10 left-1/4 h-80 w-80 rounded-full bg-brand-200/20 blur-3xl animate-sds-ambient [animation-delay:7s]"></div>
             </div>
           }
-          <ng-content />
-        </main>
+          <main class="relative min-w-0 flex-1 overflow-y-auto">
+            <ng-content />
+          </main>
+        </div>
       </div>
     </div>
   `,
@@ -11259,5 +11547,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, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenuItem, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSearchCommand, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsUserMenu, 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, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenuItem, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsSearchCommand, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map