@besaitech/ng-design-system 0.0.56 → 0.0.58

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, numberAttribute, output, signal, forwardRef, viewChild, viewChildren, afterRenderEffect, model, ElementRef, Directive, Injector, contentChild, untracked, afterNextRender, TemplateRef, linkedSignal, DestroyRef, Injectable, contentChildren } from '@angular/core';
+import { inject, input, booleanAttribute, computed, ChangeDetectionStrategy, Component, isDevMode, effect, numberAttribute, output, signal, forwardRef, viewChild, viewChildren, afterRenderEffect, model, ElementRef, Directive, Injector, contentChild, untracked, afterNextRender, TemplateRef, linkedSignal, DestroyRef, 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';
@@ -81,6 +81,13 @@ const SDS_ICONS = {
     'arrow-up': '<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>',
     'arrow-down': '<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>',
     'chevrons-up-down': '<path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/>',
+    // Move to top / bottom (reorder menus).
+    'chevrons-up': '<path d="m17 11-5-5-5 5"/><path d="m17 18-5-5-5 5"/>',
+    'chevrons-down': '<path d="m7 6 5 5 5-5"/><path d="m7 13 5 5 5-5"/>',
+    // Ratings and reviews. A filled star: <sds-icon name="star" filled /> (the path is closed).
+    star: '<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>',
+    // Comments, messages to a customer.
+    'message-square': '<path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/>',
     filter: '<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>',
     table: '<path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/>',
     // Contactless ordering: every restaurant table gets its own QR code (Belvigo merchant nav).
@@ -165,6 +172,7 @@ function toIconPx(value) {
  * @example
  * <sds-icon name="search" />
  * <sds-icon name="home" [size]="18" />
+ * <sds-icon name="star" filled class="text-accent-amber" />
  */
 class SdsIcon {
     sanitizer = inject(DomSanitizer);
@@ -174,16 +182,21 @@ class SdsIcon {
     size = input(20, ...(ngDevMode ? [{ debugName: "size", transform: toIconPx }] : [{ transform: toIconPx }]));
     /** Stroke width of the line icon. */
     strokeWidth = input(2, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
+    /**
+     * Fill the shape with the current colour as well as stroking it — a filled rating star, a solid dot.
+     * Only closed shapes (star, circle…) read as filled; open line icons are unchanged.
+     */
+    filled = input(false, ...(ngDevMode ? [{ debugName: "filled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     svg = computed(() => {
         const inner = SDS_ICONS[this.name()] ?? '';
         const markup = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ` +
-            `width="100%" height="100%" fill="none" stroke="currentColor" ` +
+            `width="100%" height="100%" fill="${this.filled() ? 'currentColor' : 'none'}" stroke="currentColor" ` +
             `stroke-width="${this.strokeWidth()}" stroke-linecap="round" ` +
             `stroke-linejoin="round">${inner}</svg>`;
         return this.sanitizer.bypassSecurityTrustHtml(markup);
     }, ...(ngDevMode ? [{ debugName: "svg" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: SdsIcon, isStandalone: true, selector: "sds-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width.px": "size()", "style.height.px": "size()", "innerHTML": "svg()", "attr.aria-hidden": "\"true\"" }, classAttribute: "sds-icon inline-flex shrink-0 items-center justify-center" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: SdsIcon, isStandalone: true, selector: "sds-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width.px": "size()", "style.height.px": "size()", "innerHTML": "svg()", "attr.aria-hidden": "\"true\"" }, classAttribute: "sds-icon inline-flex shrink-0 items-center justify-center" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsIcon, decorators: [{
             type: Component,
@@ -199,7 +212,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         '[attr.aria-hidden]': '"true"',
                     },
                 }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }] } });
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }] } });
+
+/**
+ * Dark-mode fills a brand preset can take over. Internal to the library (not in public-api.ts).
+ *
+ * The monochrome presets (saitech.css, belvigo.css) have a dark 600 step that is a mid-dark grey: as a
+ * solid fill under white text it reads as disabled. So in dark mode the library's solid "primary" fills
+ * (primary button, toggle "on", tri-state "contains", the count badges) invert to `ink` on `surface`,
+ * and its selected tints (chip, tertiary button, drop zone) go neutral. A coloured brand does not need
+ * that: with the emerald preset every primary button turned WHITE in dark mode, next to green checkboxes
+ * and tabs.
+ *
+ * Each class below reads a `--sds-dark-*` custom property and falls back to the inverted/neutral value,
+ * so the monochrome presets keep their look and a preset opts in by setting the properties under
+ * `html.dark` (belvigo-emerald.css does):
+ *
+ *   --sds-dark-primary          solid fill                         (fallback: ink)
+ *   --sds-dark-primary-hover    solid fill, hover                  (fallback: ink 90 %)
+ *   --sds-dark-primary-active   solid fill, pressed                (fallback: ink 80 %)
+ *   --sds-dark-on-primary       text / marks on the solid fill     (fallback: surface)
+ *   --sds-dark-tint             selected tint background           (fallback: muted, or white 10 % on buttons)
+ *   --sds-dark-tint-hover       tint, hover
+ *   --sds-dark-tint-active      tint, pressed
+ *   --sds-dark-tint-border      border of a selected tint          (fallback: ink-soft)
+ *   --sds-dark-on-tint          text on the tint                   (fallback: ink)
+ *
+ * The strings are whole class literals on purpose: Tailwind finds them by scanning the published bundle.
+ */
+/** Solid primary fill in dark mode. */
+const DARK_PRIMARY_BG = 'dark:bg-[color:var(--sds-dark-primary,var(--color-ink))]';
+const DARK_PRIMARY_BORDER = 'dark:border-[color:var(--sds-dark-primary,var(--color-ink))]';
+const DARK_PRIMARY_RING = 'dark:ring-[color:var(--sds-dark-primary,var(--color-ink))]';
+/** The solid fill's colour used as a foreground (an icon inside a light knob). */
+const DARK_PRIMARY_TEXT = 'dark:text-[color:var(--sds-dark-primary,var(--color-ink))]';
+const DARK_PRIMARY_HOVER = 'dark:hover:bg-[color:var(--sds-dark-primary-hover,color-mix(in_oklab,var(--color-ink)_90%,transparent))]';
+const DARK_PRIMARY_ACTIVE = 'dark:active:bg-[color:var(--sds-dark-primary-active,color-mix(in_oklab,var(--color-ink)_80%,transparent))]';
+/** Text and marks on the solid fill. */
+const DARK_ON_PRIMARY = 'dark:text-[color:var(--sds-dark-on-primary,var(--color-surface))]';
+/** A light element sitting on the solid fill (the toggle's knob). */
+const DARK_ON_PRIMARY_BG = 'dark:bg-[color:var(--sds-dark-on-primary,var(--color-surface))]';
+/** Secondary text on the solid fill (a caption at 85 %). */
+const DARK_ON_PRIMARY_SOFT = 'dark:text-[color:color-mix(in_oklab,var(--sds-dark-on-primary,var(--color-surface))_85%,transparent)]';
+/**
+ * Hover of a fill that keeps `bg-brand-600` in dark mode (selected day, current page). Falls back to the
+ * light hover step; a coloured preset whose dark 700 is a light TEXT green points it at its fill hover.
+ */
+const DARK_BRAND_FILL_HOVER = 'dark:hover:bg-[color:var(--sds-dark-primary-hover,var(--color-brand-700))]';
+/** Selected tint in dark mode (chip, drop zone). */
+const DARK_TINT_BG = 'dark:bg-[color:var(--sds-dark-tint,var(--color-muted))]';
+const DARK_TINT_BORDER = 'dark:border-[color:var(--sds-dark-tint-border,var(--color-ink-soft))]';
+const DARK_ON_TINT = 'dark:text-[color:var(--sds-dark-on-tint,var(--color-ink))]';
 
 const BASE = 'inline-flex items-center justify-center gap-2 font-medium ' +
     'transition-colors duration-150 select-none whitespace-nowrap cursor-pointer ' +
@@ -208,16 +271,22 @@ const BASE = 'inline-flex items-center justify-center gap-2 font-medium ' +
     '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.
+ * it read as disabled, and at `disabled:opacity-50` the real disabled state looked the same. So by default
+ * 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.
+ *
+ * A coloured brand keeps its colour: the preset sets `--sds-dark-primary*` / `--sds-dark-tint*` under
+ * `html.dark` (belvigo-emerald.css does) and the dark primary and tertiary take them. See theme/dark-fills.ts.
  */
 const VARIANTS$2 = {
     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',
+        `${DARK_PRIMARY_BG} ${DARK_ON_PRIMARY} ${DARK_PRIMARY_HOVER} ${DARK_PRIMARY_ACTIVE}`,
     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 ' +
-        'dark:bg-white/10 dark:text-ink dark:hover:bg-white/15 dark:active:bg-white/20',
+        'dark:bg-[color:var(--sds-dark-tint,rgb(255_255_255/0.1))] ' +
+        'dark:text-[color:var(--sds-dark-on-tint,var(--color-ink))] ' +
+        'dark:hover:bg-[color:var(--sds-dark-tint-hover,rgb(255_255_255/0.15))] ' +
+        'dark:active:bg-[color:var(--sds-dark-tint-active,rgb(255_255_255/0.2))]',
     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',
@@ -347,13 +416,32 @@ const SIZES$b = {
  * sidebar search field).
  */
 class SdsInput {
-    inputId = `sds-input-${nextId$n++}`;
+    autoId = `sds-input-${nextId$n++}`;
+    /**
+     * `id` of the native `<input>` — for a `<label for>` outside the component, or to focus the field with
+     * `document.getElementById(id).focus()` (after adding a row, say). Empty (default) generates one. Set it
+     * here rather than as an `id` on the host: the host is not the focusable element.
+     */
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /** The native field's id: {@link inputId} or the generated one. */
+    fieldId = computed(() => this.inputId() || this.autoId, ...(ngDevMode ? [{ debugName: "fieldId" }] : []));
     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" }] : []));
+    /**
+     * Mark the field invalid (danger frame + `aria-invalid`) without showing an [error] message — for a
+     * form that reports its problems once, in a summary or a single message under a group of fields.
+     */
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Mark the field required: an asterisk after the [label] (hidden from screen readers) and
+     * `aria-required` on the field. It does not validate — keep `Validators.required` (or your own check)
+     * for that; this is the visible and announced half.
+     */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
      * `search` is the semantically right type for a search field, and the template strips the WebKit
      * search decorations that come with it. Without that, a `search` field with {@link clearable} draws
@@ -414,9 +502,9 @@ class SdsInput {
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     describedBy = computed(() => {
         if (this.error())
-            return `${this.inputId}-err`;
+            return `${this.fieldId()}-err`;
         if (this.hint())
-            return `${this.inputId}-hint`;
+            return `${this.fieldId()}-hint`;
         return null;
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     fieldPadding = computed(() => {
@@ -431,6 +519,7 @@ class SdsInput {
         return `${left} ${right}`;
     }, ...(ngDevMode ? [{ debugName: "fieldPadding" }] : []));
     wrapperClasses = computed(() => {
+        const danger = !!this.error() || this.invalid();
         const parts = [SIZES$b[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
         if (this.isDisabled())
             parts.push('opacity-60 cursor-not-allowed');
@@ -438,19 +527,19 @@ class SdsInput {
             // border-transparent, not border-0: the border box is what keeps a filled field the same height
             // as a bordered one, so the two sit level when a toolbar mixes them.
             parts.push('border-transparent bg-muted text-ink');
-            parts.push(this.error()
+            parts.push(danger
                 ? 'border-danger focus-within:ring-2 focus-within:ring-danger/30'
                 : 'focus-within:ring-2 focus-within:ring-brand-500/25');
         }
         else if (this.onBrand()) {
             parts.push('bg-white/10 text-white');
-            parts.push(this.error()
+            parts.push(danger
                 ? 'border-danger focus-within:ring-2 focus-within:ring-danger/30'
                 : 'border-white/15 focus-within:border-white/40 focus-within:ring-2 focus-within:ring-white/20');
         }
         else {
             parts.push('bg-surface text-ink');
-            parts.push(this.error()
+            parts.push(danger
                 ? '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');
         }
@@ -482,7 +571,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 }, 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsInput, isStandalone: true, selector: "sds-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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),
@@ -491,11 +580,14 @@ class SdsInput {
         ], ngImport: i0, template: `
     @if (label()) {
       <label
-        [for]="inputId"
+        [for]="fieldId()"
         class="mb-1.5 block text-sm font-medium"
         [class]="onBrand() ? 'text-white/90' : 'text-ink'"
       >
         {{ label() }}
+        @if (required()) {
+          <span class="ml-0.5" [class]="onBrand() ? 'text-white/70' : 'text-danger'" aria-hidden="true">*</span>
+        }
       </label>
     }
 
@@ -515,7 +607,7 @@ class SdsInput {
       }
 
       <input
-        [id]="inputId"
+        [id]="fieldId()"
         [type]="type()"
         [placeholder]="placeholder()"
         [disabled]="isDisabled()"
@@ -523,7 +615,8 @@ class SdsInput {
         [attr.autocomplete]="autocomplete() || null"
         [attr.maxlength]="maxLength() || null"
         [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
-        [attr.aria-invalid]="error() ? 'true' : null"
+        [attr.aria-invalid]="error() || invalid() ? 'true' : null"
+        [attr.aria-required]="required() ? 'true' : null"
         [attr.aria-describedby]="describedBy()"
         class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed
                [&::-webkit-search-cancel-button]:appearance-none
@@ -548,7 +641,7 @@ class SdsInput {
           type="button"
           [attr.aria-label]="trailingActionLabel() || null"
           [attr.aria-pressed]="trailingActionPressed()"
-          [attr.aria-controls]="inputId"
+          [attr.aria-controls]="fieldId()"
           class="absolute right-2.5 inline-flex h-7 w-7 items-center justify-center rounded-full
                  opacity-70 hover:opacity-100 hover:bg-black/5"
           (click)="trailingActionClick.emit()"
@@ -565,19 +658,19 @@ class SdsInput {
     </div>
 
     @if (error()) {
-      <p [id]="inputId + '-err'" class="mt-1.5 text-xs font-medium text-danger">
+      <p [id]="fieldId() + '-err'" class="mt-1.5 text-xs font-medium text-danger">
         {{ error() }}
       </p>
     } @else if (hint()) {
       <p
-        [id]="inputId + '-hint'"
+        [id]="fieldId() + '-hint'"
         class="mt-1.5 text-xs"
         [class]="onBrand() ? 'text-white/60' : 'text-ink-faint'"
       >
         {{ hint() }}
       </p>
     }
-  `, isInline: true, 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"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, 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"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsInput, decorators: [{
             type: Component,
@@ -590,11 +683,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     ], host: { class: 'block' }, template: `
     @if (label()) {
       <label
-        [for]="inputId"
+        [for]="fieldId()"
         class="mb-1.5 block text-sm font-medium"
         [class]="onBrand() ? 'text-white/90' : 'text-ink'"
       >
         {{ label() }}
+        @if (required()) {
+          <span class="ml-0.5" [class]="onBrand() ? 'text-white/70' : 'text-danger'" aria-hidden="true">*</span>
+        }
       </label>
     }
 
@@ -614,7 +710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       }
 
       <input
-        [id]="inputId"
+        [id]="fieldId()"
         [type]="type()"
         [placeholder]="placeholder()"
         [disabled]="isDisabled()"
@@ -622,7 +718,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [attr.autocomplete]="autocomplete() || null"
         [attr.maxlength]="maxLength() || null"
         [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
-        [attr.aria-invalid]="error() ? 'true' : null"
+        [attr.aria-invalid]="error() || invalid() ? 'true' : null"
+        [attr.aria-required]="required() ? 'true' : null"
         [attr.aria-describedby]="describedBy()"
         class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed
                [&::-webkit-search-cancel-button]:appearance-none
@@ -647,7 +744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           type="button"
           [attr.aria-label]="trailingActionLabel() || null"
           [attr.aria-pressed]="trailingActionPressed()"
-          [attr.aria-controls]="inputId"
+          [attr.aria-controls]="fieldId()"
           class="absolute right-2.5 inline-flex h-7 w-7 items-center justify-center rounded-full
                  opacity-70 hover:opacity-100 hover:bg-black/5"
           (click)="trailingActionClick.emit()"
@@ -664,12 +761,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </div>
 
     @if (error()) {
-      <p [id]="inputId + '-err'" class="mt-1.5 text-xs font-medium text-danger">
+      <p [id]="fieldId() + '-err'" class="mt-1.5 text-xs font-medium text-danger">
         {{ error() }}
       </p>
     } @else if (hint()) {
       <p
-        [id]="inputId + '-hint'"
+        [id]="fieldId() + '-hint'"
         class="mt-1.5 text-xs"
         [class]="onBrand() ? 'text-white/60' : 'text-ink-faint'"
       >
@@ -677,7 +774,7 @@ 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 }] }], 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"] }] } });
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], 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 }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", 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$m = 0;
 const HEIGHTS = {
@@ -720,6 +817,11 @@ class SdsInputNumber {
      * host that renders the message itself, e.g. an editable table cell.
      */
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Mark the field required: an asterisk after the [label] (hidden from screen readers) and
+     * `aria-required` on the field. It does not validate — same contract as sds-input's [required].
+     */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Extra id(s) for the field's `aria-describedby`, added to its own hint/error message id. */
     ariaDescribedby = input('', ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
@@ -1170,7 +1272,7 @@ class SdsInputNumber {
         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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", 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: [
+    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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, 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),
@@ -1178,7 +1280,12 @@ class SdsInputNumber {
             },
         ], 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>
+      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">
+        {{ label() }}
+        @if (required()) {
+          <span class="ml-0.5 text-danger" aria-hidden="true">*</span>
+        }
+      </label>
     }
 
     <div class="relative border transition-colors" [class]="wrapperClasses()">
@@ -1224,6 +1331,7 @@ class SdsInputNumber {
           [readOnly]="readonly()"
           [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
           [attr.aria-invalid]="error() || invalid() ? 'true' : null"
+          [attr.aria-required]="required() ? 'true' : null"
           [attr.aria-describedby]="describedBy()"
           [attr.aria-valuenow]="value()"
           [attr.aria-valuemin]="min()"
@@ -1315,7 +1423,7 @@ class SdsInputNumber {
     } @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 });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsInputNumber, decorators: [{
             type: Component,
@@ -1333,7 +1441,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     host: { class: 'block' },
                     template: `
     @if (label()) {
-      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">{{ label() }}</label>
+      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">
+        {{ label() }}
+        @if (required()) {
+          <span class="ml-0.5 text-danger" aria-hidden="true">*</span>
+        }
+      </label>
     }
 
     <div class="relative border transition-colors" [class]="wrapperClasses()">
@@ -1379,6 +1492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           [readOnly]="readonly()"
           [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
           [attr.aria-invalid]="error() || invalid() ? 'true' : null"
+          [attr.aria-required]="required() ? 'true' : null"
           [attr.aria-describedby]="describedBy()"
           [attr.aria-valuenow]="value()"
           [attr.aria-valuemin]="min()"
@@ -1472,7 +1586,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 }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", 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 }] }] } });
+        }], 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 }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", 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$l = 0;
 const SIZES$a = {
@@ -1930,7 +2044,7 @@ class SdsTimeInput {
     } @else if (hint()) {
       <p [id]="fieldId + '-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 });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTimeInput, decorators: [{
             type: Component,
@@ -2665,6 +2779,7 @@ class SdsTextarea {
     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 }]));
+    /** Asterisk after the [label] (hidden from screen readers) + `aria-required`. It does not validate. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Minimum visible rows. */
     rows = input(3, ...(ngDevMode ? [{ debugName: "rows", transform: numberAttribute }] : [{ transform: numberAttribute }]));
@@ -2778,6 +2893,9 @@ class SdsTextarea {
     @if (label()) {
       <label [for]="fieldId" class="mb-1.5 block text-sm font-medium text-ink">
         {{ label() }}
+        @if (required()) {
+          <span class="ml-0.5 text-danger" aria-hidden="true">*</span>
+        }
       </label>
     }
 
@@ -2851,6 +2969,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     @if (label()) {
       <label [for]="fieldId" class="mb-1.5 block text-sm font-medium text-ink">
         {{ label() }}
+        @if (required()) {
+          <span class="ml-0.5 text-danger" aria-hidden="true">*</span>
+        }
       </label>
     }
 
@@ -2958,21 +3079,24 @@ class SdsToggleSwitch {
             return `${this.fieldId}-hint`;
         return null;
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    /** The "on" icon takes the track's colour, so it reads as cut out of the knob. */
+    onIconClass = `text-brand-600 ${DARK_PRIMARY_TEXT}`;
     /**
      * 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.
+     * black) tints the off track so it stays visible on dark surfaces too. A coloured brand preset keeps
+     * its own "on" track in dark via --sds-dark-primary / --sds-dark-on-primary (see theme/dark-fills.ts).
      */
     trackClasses = computed(() => {
         const parts = [this.sizing().track];
-        parts.push(this.checked() ? 'bg-brand-600 dark:bg-ink' : 'bg-ink/15');
+        parts.push(this.checked() ? `bg-brand-600 ${DARK_PRIMARY_BG}` : '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');
+        parts.push(this.checked() ? `bg-white ${DARK_ON_PRIMARY_BG}` : 'bg-white dark:bg-ink-soft');
         return parts.join(' ');
     }, ...(ngDevMode ? [{ debugName: "knobClasses" }] : []));
     constructor() {
@@ -3052,7 +3176,7 @@ class SdsToggleSwitch {
             <sds-icon
               [name]="onIcon()!"
               [size]="sizing().icon"
-              class="text-brand-600 dark:text-ink"
+              [class]="onIconClass"
             />
           } @else if (!checked() && offIcon()) {
             <sds-icon
@@ -3086,7 +3210,7 @@ class SdsToggleSwitch {
         {{ hint() }}
       </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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsToggleSwitch, decorators: [{
             type: Component,
@@ -3128,7 +3252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             <sds-icon
               [name]="onIcon()!"
               [size]="sizing().icon"
-              class="text-brand-600 dark:text-ink"
+              [class]="onIconClass"
             />
           } @else if (!checked() && offIcon()) {
             <sds-icon
@@ -3270,7 +3394,7 @@ class SdsCheckbox {
         }
       </span>
     </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 });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { 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,
@@ -3659,7 +3783,7 @@ class SdsAvatar {
         ></span>
       }
     </div>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsAvatar, decorators: [{
             type: Component,
@@ -3906,7 +4030,7 @@ class SdsAllergenIcon {
     @if (iconName(); as name) {
       <sds-icon [name]="name" [size]="size()" [strokeWidth]="strokeWidth()" />
     }
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsAllergenIcon, decorators: [{
             type: Component,
@@ -3986,13 +4110,16 @@ class SdsTriStateChip {
         switch (this.value()) {
             case 'contains':
                 // Filled + solid thick border + check. In dark mode a monochrome brand-600 is a dim grey, so the
-                // fill inverts to ink/surface (the same rule as sds-toggle-switch and sds-button primary).
-                return (`${base} border-brand-600 bg-brand-600 text-white ` +
-                    'dark:border-ink dark:bg-ink dark:text-surface hover:bg-brand-700 dark:hover:bg-ink-soft');
+                // fill inverts to ink/surface (the same rule as sds-toggle-switch and sds-button primary) unless
+                // the brand preset supplies its own dark fill (--sds-dark-primary*, see theme/dark-fills.ts).
+                return (`${base} border-brand-600 bg-brand-600 text-white hover:bg-brand-700 ` +
+                    `${DARK_PRIMARY_BORDER} ${DARK_PRIMARY_BG} ${DARK_ON_PRIMARY} ` +
+                    'dark:hover:bg-[color:var(--sds-dark-primary-hover,var(--color-ink-soft))]');
             case 'may-contain':
                 // Unfilled + DASHED thick border + question mark.
-                return (`${base} border-dashed border-brand-600 bg-brand-50 text-ink ` +
-                    'dark:border-ink-soft dark:bg-muted hover:bg-brand-100 dark:hover:bg-surface');
+                return (`${base} border-dashed border-brand-600 bg-brand-50 text-ink hover:bg-brand-100 ` +
+                    `${DARK_TINT_BORDER} ${DARK_TINT_BG} ` +
+                    'dark:hover:bg-[color:var(--sds-dark-tint-hover,var(--color-surface))]');
             default:
                 return `${base} border-border bg-surface text-ink-soft hover:border-ink-faint hover:text-ink`;
         }
@@ -4000,7 +4127,7 @@ class SdsTriStateChip {
     captionClass = computed(() => {
         switch (this.value()) {
             case 'contains':
-                return 'text-white/85 dark:text-surface/85';
+                return `text-white/85 ${DARK_ON_PRIMARY_SOFT}`;
             case 'may-contain':
                 return 'text-ink-soft';
             default:
@@ -4104,7 +4231,7 @@ class SdsTriStateChip {
       <span [id]="chipId + '-hint'" class="sr-only">{{ hint() }}</span>
     }
     <span class="sr-only" aria-live="polite" aria-atomic="true">{{ announcement() }}</span>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTriStateChip, decorators: [{
             type: Component,
@@ -4321,7 +4448,7 @@ class SdsSegmented {
         </button>
       }
     </div>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSegmented, decorators: [{
             type: Component,
@@ -4374,7 +4501,8 @@ const SIZE = {
 /**
  * Chip look shared by sds-chip and sds-chip-group. Selected is more than a tint — a brand border, bolder
  * text and (by default) a check — so it reads in greyscale too. In dark mode the brand text/tint are
- * swapped for ink/muted (the library's rule for a monochrome brand's dark ramp).
+ * swapped for ink/muted (the library's rule for a monochrome brand's dark ramp), unless the brand preset
+ * supplies its own dark tint (--sds-dark-tint*, see theme/dark-fills.ts).
  */
 function chipClass(size, selected) {
     const base = 'inline-flex shrink-0 select-none items-center whitespace-nowrap rounded-full border font-medium ' +
@@ -4383,7 +4511,7 @@ function chipClass(size, selected) {
         SIZE[size];
     return selected
         ? `${base} cursor-pointer border-brand-600 bg-brand-50 font-semibold text-brand-700 ` +
-            'dark:border-ink-soft dark:bg-muted dark:text-ink'
+            `${DARK_TINT_BORDER} ${DARK_TINT_BG} ${DARK_ON_TINT}`
         : `${base} cursor-pointer border-border bg-surface text-ink-soft hover:border-ink-faint hover:text-ink`;
 }
 const COUNT_CLASS = 'inline-flex min-w-5 items-center justify-center rounded-full bg-ink/5 px-1.5 text-[11px] font-semibold tabular-nums dark:bg-white/10';
@@ -4431,7 +4559,7 @@ class SdsChip {
         <span [class]="countClass">{{ count() }}</span>
       }
     </button>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsChip, decorators: [{
             type: Component,
@@ -4678,7 +4806,7 @@ class SdsChipGroup {
         </button>
       }
     </div>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsChipGroup, decorators: [{
             type: Component,
@@ -4835,7 +4963,7 @@ class SdsChecklistRow {
         }
       </div>
     </div>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsChecklistRow, decorators: [{
             type: Component,
@@ -5037,7 +5165,7 @@ class SdsScore {
         </div>
       }
     </div>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsScore, decorators: [{
             type: Component,
@@ -5216,9 +5344,12 @@ class SdsStatusTile {
     hatch = computed(() => this.state() === 'sold-out'
         ? 'repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--color-danger) 10%, transparent) 12px 24px)'
         : null, ...(ngDevMode ? [{ debugName: "hatch" }] : []));
+    /** The selected check: brand fill, inverted in dark unless the brand preset supplies a dark fill. */
+    checkBadgeClass = 'absolute right-2 top-2 grid h-7 w-7 place-items-center rounded-full bg-brand-600 text-white shadow ring-2 ring-surface ' +
+        `${DARK_PRIMARY_BG} ${DARK_ON_PRIMARY}`;
     tileClass = computed(() => {
         const ring = this.selected()
-            ? ' ring-2 ring-brand-500 ring-offset-2 ring-offset-canvas dark:ring-ink'
+            ? ` ring-2 ring-brand-500 ring-offset-2 ring-offset-canvas ${DARK_PRIMARY_RING}`
             : '';
         return ('relative flex aspect-square w-full min-h-32 cursor-pointer select-none flex-col overflow-hidden ' +
             'rounded-card border-2 text-left shadow-sm transition-[transform,box-shadow] duration-100 ' +
@@ -5285,7 +5416,7 @@ class SdsStatusTile {
 
       @if (selected()) {
         <span
-          class="absolute right-2 top-2 grid h-7 w-7 place-items-center rounded-full bg-brand-600 text-white shadow ring-2 ring-surface dark:bg-ink dark:text-surface"
+          [class]="checkBadgeClass"
           aria-hidden="true"
         >
           <sds-icon name="check" [size]="16" [strokeWidth]="3" />
@@ -5303,7 +5434,7 @@ class SdsStatusTile {
         </span>
       }
     </button>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsStatusTile, decorators: [{
             type: Component,
@@ -5366,7 +5497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
       @if (selected()) {
         <span
-          class="absolute right-2 top-2 grid h-7 w-7 place-items-center rounded-full bg-brand-600 text-white shadow ring-2 ring-surface dark:bg-ink dark:text-surface"
+          [class]="checkBadgeClass"
           aria-hidden="true"
         >
           <sds-icon name="check" [size]="16" [strokeWidth]="3" />
@@ -5795,7 +5926,7 @@ class SdsMenu {
         }
       </div>
     }
-  `, isInline: true, styles: [".animate-sds-menu{animation:sds-menu-pop .12s ease-out}@keyframes sds-menu-pop{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".animate-sds-menu{animation:sds-menu-pop .12s ease-out}@keyframes sds-menu-pop{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMenu, decorators: [{
             type: Component,
@@ -5893,6 +6024,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * </sds-bulk-bar>
  */
 class SdsBulkBar {
+    /** The selection count: brand fill, inverted in dark unless the preset supplies a dark fill. */
+    countClass = 'inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-brand-600 px-1.5 text-xs font-bold tabular-nums text-white ' +
+        `${DARK_PRIMARY_BG} ${DARK_ON_PRIMARY}`;
     /** Number of selected things. The bar is hidden at 0. */
     count = input(0, ...(ngDevMode ? [{ debugName: "count", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /** "{count} selected" — `{count}` is replaced. Pass a translated string. */
@@ -5920,7 +6054,7 @@ class SdsBulkBar {
       >
         <span class="inline-flex items-center gap-2 pr-1 text-sm font-semibold text-ink">
           <span
-            class="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-brand-600 px-1.5 text-xs font-bold tabular-nums text-white dark:bg-ink dark:text-surface"
+            [class]="countClass"
             >{{ count() }}</span
           >
           {{ countWords() }}
@@ -5942,7 +6076,7 @@ class SdsBulkBar {
         </button>
       </div>
     }
-  `, isInline: true, styles: [".animate-sds-bulk{animation:sds-bulk-in .16s ease-out}@keyframes sds-bulk-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-bulk{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".animate-sds-bulk{animation:sds-bulk-in .16s ease-out}@keyframes sds-bulk-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-bulk{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsBulkBar, decorators: [{
             type: Component,
@@ -5964,7 +6098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       >
         <span class="inline-flex items-center gap-2 pr-1 text-sm font-semibold text-ink">
           <span
-            class="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-brand-600 px-1.5 text-xs font-bold tabular-nums text-white dark:bg-ink dark:text-surface"
+            [class]="countClass"
             >{{ count() }}</span
           >
           {{ countWords() }}
@@ -6621,7 +6755,7 @@ class SdsSortableList {
 
     <p [id]="instructionsId" class="sr-only">{{ instructions() }}</p>
     <div class="sr-only" aria-live="assertive" aria-atomic="true">{{ liveMessage() }}</div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSortableList, decorators: [{
             type: Component,
@@ -6734,6 +6868,9 @@ function sdsFileMatchesAccept(file, accept) {
  * affordance); clicking anywhere on the zone opens the picker too. All text is set through inputs with
  * English defaults.
  *
+ * `[loading]` shows a spinner and disables the control while an upload runs; `[ariaLabel]` names the Browse
+ * button when the visible text is shared by several rows ("Upload" beside each document).
+ *
  * `appearance="button"` drops the zone and renders only the Browse button (files can still be dropped
  * on it) — for a "Replace photo" / "Upload logo" / "Add document" action next to a preview, with the
  * same accept/size/count checks and error messages. `browse()` opens the picker from your own control.
@@ -6754,6 +6891,11 @@ class SdsFileDrop {
     /** Most files accepted in one pick/drop. Null = no limit (1 when not [multiple]). */
     maxFiles = input(null, ...(ngDevMode ? [{ debugName: "maxFiles" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Work in progress (an upload running): a spinner replaces the icon, the control is disabled and marked
+     * `aria-busy`. The host keeps showing its own result/error afterwards.
+     */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Icon in the zone at rest. */
     icon = input('upload', ...(ngDevMode ? [{ debugName: "icon" }] : []));
     /** `zone` (default): the dashed drop zone with a Browse button. `button`: the Browse button alone. */
@@ -6764,6 +6906,13 @@ class SdsFileDrop {
     /** Shown while files are dragged over the zone. */
     dropLabel = input('Drop to add', ...(ngDevMode ? [{ debugName: "dropLabel" }] : []));
     browseLabel = input('Browse files', ...(ngDevMode ? [{ debugName: "browseLabel" }] : []));
+    /** Button text while [loading]. Empty keeps [browseLabel]. */
+    loadingLabel = input('', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+    /**
+     * Accessible name of the Browse button when its visible text is not enough — several upload buttons in
+     * a list each need to say WHAT they upload ("Upload — VAT certificate"). Empty uses the visible text.
+     */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     /** Extra line under the label, e.g. "JPEG or PNG, up to 10 MB". */
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     /** Tokens: `{name}`. */
@@ -6779,6 +6928,8 @@ class SdsFileDrop {
     dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
     errors = signal([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
     dragDepth = 0;
+    isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    buttonText = computed(() => this.loading() && this.loadingLabel() ? this.loadingLabel() : this.browseLabel(), ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
     describedBy = computed(() => {
         const ids = [`${this.zoneId}-label`];
         if (this.hint())
@@ -6790,24 +6941,28 @@ class SdsFileDrop {
     zoneClass = computed(() => {
         const base = 'flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 ' +
             'text-center transition-colors';
+        if (this.loading())
+            return `${base} cursor-progress border-border bg-muted/50`;
         if (this.disabled())
             return `${base} cursor-not-allowed border-border bg-muted opacity-60`;
         return this.dragging()
-            ? `${base} cursor-copy border-brand-500 bg-brand-50 dark:bg-muted`
+            ? `${base} cursor-copy border-brand-500 bg-brand-50 ${DARK_TINT_BG}`
             : `${base} cursor-pointer border-border bg-muted/50 hover:border-ink-faint`;
     }, ...(ngDevMode ? [{ debugName: "zoneClass" }] : []));
     buttonClass = computed(() => {
         const size = this.size() === 'sm' ? 'h-8 px-3' : 'h-9 px-3.5';
-        const drag = this.dragging() ? ' border-brand-500 bg-brand-50 dark:bg-muted' : ' border-border bg-surface hover:bg-muted';
+        const drag = this.dragging()
+            ? ` border-brand-500 bg-brand-50 ${DARK_TINT_BG}`
+            : ' border-border bg-surface hover:bg-muted';
         return (`inline-flex ${size} items-center gap-1.5 rounded-control border text-sm font-semibold text-ink shadow-sm ` +
             'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 ' +
-            'disabled:cursor-not-allowed disabled:opacity-60' +
+            (this.loading() ? 'cursor-progress' : 'disabled:cursor-not-allowed disabled:opacity-60') +
             drag);
     }, ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
     /** Open the native file picker. */
     browse(event) {
         event?.stopPropagation();
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         this.fileInput()?.nativeElement.click();
     }
@@ -6817,28 +6972,28 @@ class SdsFileDrop {
         this.browse();
     }
     onDragEnter(event) {
-        if (this.disabled() || !this.hasFiles(event))
+        if (this.isDisabled() || !this.hasFiles(event))
             return;
         event.preventDefault();
         this.dragDepth++;
         this.dragging.set(true);
     }
     onDragOver(event) {
-        if (this.disabled() || !this.hasFiles(event))
+        if (this.isDisabled() || !this.hasFiles(event))
             return;
         event.preventDefault();
         if (event.dataTransfer)
             event.dataTransfer.dropEffect = 'copy';
     }
     onDragLeave(event) {
-        if (this.disabled() || !this.hasFiles(event))
+        if (this.isDisabled() || !this.hasFiles(event))
             return;
         this.dragDepth = Math.max(0, this.dragDepth - 1);
         if (this.dragDepth === 0)
             this.dragging.set(false);
     }
     onDrop(event) {
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         event.preventDefault();
         this.dragDepth = 0;
@@ -6897,12 +7052,14 @@ class SdsFileDrop {
         this.errors.set([]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsFileDrop, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsFileDrop, isStandalone: true, selector: "sds-file-drop", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, dropLabel: { classPropertyName: "dropLabel", publicName: "dropLabel", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, wrongTypeMessage: { classPropertyName: "wrongTypeMessage", publicName: "wrongTypeMessage", isSignal: true, isRequired: false, transformFunction: null }, tooLargeMessage: { classPropertyName: "tooLargeMessage", publicName: "tooLargeMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyMessage: { classPropertyName: "tooManyMessage", publicName: "tooManyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "files", rejected: "rejected" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsFileDrop, isStandalone: true, selector: "sds-file-drop", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, dropLabel: { classPropertyName: "dropLabel", publicName: "dropLabel", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", 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 }, wrongTypeMessage: { classPropertyName: "wrongTypeMessage", publicName: "wrongTypeMessage", isSignal: true, isRequired: false, transformFunction: null }, tooLargeMessage: { classPropertyName: "tooLargeMessage", publicName: "tooLargeMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyMessage: { classPropertyName: "tooManyMessage", publicName: "tooManyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "files", rejected: "rejected" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (appearance() === 'button') {
       <button
         type="button"
         [class]="buttonClass()"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-busy]="loading() ? 'true' : null"
         [attr.aria-describedby]="errors().length ? zoneId + '-errors' : null"
         [attr.data-dragging]="dragging() ? 'true' : null"
         (click)="browse($event)"
@@ -6911,8 +7068,12 @@ class SdsFileDrop {
         (dragleave)="onDragLeave($event)"
         (drop)="onDrop($event)"
       >
-        <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="16" />
-        {{ dragging() ? dropLabel() : browseLabel() }}
+        @if (loading()) {
+          <sds-icon name="loader-circle" [size]="16" class="animate-spin" />
+        } @else {
+          <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="16" />
+        }
+        {{ dragging() ? dropLabel() : buttonText() }}
       </button>
       <input
         #fileInput
@@ -6922,13 +7083,14 @@ class SdsFileDrop {
         aria-hidden="true"
         [accept]="accept()"
         [multiple]="multiple()"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
         (change)="onInputChange($event)"
       />
     } @else {
     <div
       [class]="zoneClass()"
-      [attr.aria-disabled]="disabled() ? 'true' : null"
+      [attr.aria-disabled]="isDisabled() ? 'true' : null"
+      [attr.aria-busy]="loading() ? 'true' : null"
       [attr.data-dragging]="dragging() ? 'true' : null"
       (click)="onZoneClick($event)"
       (dragenter)="onDragEnter($event)"
@@ -6940,7 +7102,11 @@ class SdsFileDrop {
         class="grid h-11 w-11 place-items-center rounded-full bg-surface text-ink-soft shadow-sm ring-1 ring-border"
         aria-hidden="true"
       >
-        <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="22" />
+        @if (loading()) {
+          <sds-icon name="loader-circle" [size]="22" class="animate-spin" />
+        } @else {
+          <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="22" />
+        }
       </span>
       <p class="text-sm font-semibold text-ink" [id]="zoneId + '-label'">
         {{ dragging() ? dropLabel() : label() }}
@@ -6951,12 +7117,13 @@ class SdsFileDrop {
       <button
         type="button"
         class="mt-1 inline-flex h-9 items-center gap-1.5 rounded-control border border-border bg-surface px-3.5 text-sm font-semibold text-ink shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-60"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="ariaLabel() || null"
         [attr.aria-describedby]="describedBy()"
         (click)="browse($event)"
       >
         <sds-icon name="upload" [size]="16" />
-        {{ browseLabel() }}
+        {{ buttonText() }}
       </button>
       <input
         #fileInput
@@ -6966,7 +7133,7 @@ class SdsFileDrop {
         aria-hidden="true"
         [accept]="accept()"
         [multiple]="multiple()"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
         (change)="onInputChange($event)"
       />
     </div>
@@ -6984,7 +7151,7 @@ class SdsFileDrop {
         </ul>
       }
     </div>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsFileDrop, decorators: [{
             type: Component,
@@ -6998,7 +7165,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       <button
         type="button"
         [class]="buttonClass()"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-busy]="loading() ? 'true' : null"
         [attr.aria-describedby]="errors().length ? zoneId + '-errors' : null"
         [attr.data-dragging]="dragging() ? 'true' : null"
         (click)="browse($event)"
@@ -7007,8 +7176,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         (dragleave)="onDragLeave($event)"
         (drop)="onDrop($event)"
       >
-        <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="16" />
-        {{ dragging() ? dropLabel() : browseLabel() }}
+        @if (loading()) {
+          <sds-icon name="loader-circle" [size]="16" class="animate-spin" />
+        } @else {
+          <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="16" />
+        }
+        {{ dragging() ? dropLabel() : buttonText() }}
       </button>
       <input
         #fileInput
@@ -7018,13 +7191,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         aria-hidden="true"
         [accept]="accept()"
         [multiple]="multiple()"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
         (change)="onInputChange($event)"
       />
     } @else {
     <div
       [class]="zoneClass()"
-      [attr.aria-disabled]="disabled() ? 'true' : null"
+      [attr.aria-disabled]="isDisabled() ? 'true' : null"
+      [attr.aria-busy]="loading() ? 'true' : null"
       [attr.data-dragging]="dragging() ? 'true' : null"
       (click)="onZoneClick($event)"
       (dragenter)="onDragEnter($event)"
@@ -7036,7 +7210,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         class="grid h-11 w-11 place-items-center rounded-full bg-surface text-ink-soft shadow-sm ring-1 ring-border"
         aria-hidden="true"
       >
-        <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="22" />
+        @if (loading()) {
+          <sds-icon name="loader-circle" [size]="22" class="animate-spin" />
+        } @else {
+          <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="22" />
+        }
       </span>
       <p class="text-sm font-semibold text-ink" [id]="zoneId + '-label'">
         {{ dragging() ? dropLabel() : label() }}
@@ -7047,12 +7225,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       <button
         type="button"
         class="mt-1 inline-flex h-9 items-center gap-1.5 rounded-control border border-border bg-surface px-3.5 text-sm font-semibold text-ink shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-60"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="ariaLabel() || null"
         [attr.aria-describedby]="describedBy()"
         (click)="browse($event)"
       >
         <sds-icon name="upload" [size]="16" />
-        {{ browseLabel() }}
+        {{ buttonText() }}
       </button>
       <input
         #fileInput
@@ -7062,7 +7241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         aria-hidden="true"
         [accept]="accept()"
         [multiple]="multiple()"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
         (change)="onInputChange($event)"
       />
     </div>
@@ -7082,7 +7261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </div>
   `,
                 }]
-        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], wrongTypeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrongTypeMessage", required: false }] }], tooLargeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooLargeMessage", required: false }] }], tooManyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyMessage", required: false }] }], files: [{ type: i0.Output, args: ["files"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
+        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], wrongTypeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrongTypeMessage", required: false }] }], tooLargeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooLargeMessage", required: false }] }], tooManyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyMessage", required: false }] }], files: [{ type: i0.Output, args: ["files"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
 
 let nextId$8 = 0;
 /**
@@ -7496,7 +7675,7 @@ class SdsImageCropper {
         <sds-icon name="zoom-in" [size]="18" />
       </button>
     </div>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsImageCropper, decorators: [{
             type: Component,
@@ -7721,7 +7900,7 @@ class SdsCalendar {
     navBtn = 'inline-flex h-8 w-8 items-center justify-center rounded-control text-ink-soft hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500';
     titleBtn = 'rounded-control px-2 py-1 capitalize hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500';
     actionBtn = 'rounded-control px-2 py-1 text-xs font-medium text-brand-700 hover:bg-brand-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-40';
-    doneBtn = 'rounded-control bg-brand-600 px-3 py-1 text-xs font-semibold text-white hover:bg-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500';
+    doneBtn = `rounded-control bg-brand-600 px-3 py-1 text-xs font-semibold text-white hover:bg-brand-700 ${DARK_BRAND_FILL_HOVER} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500`;
     timeInput = 'w-8 bg-transparent py-1 text-center text-sm text-ink outline-none disabled:cursor-not-allowed disabled:opacity-40';
     stepBtn = 'flex h-3.5 w-5 items-center justify-center text-ink-faint transition-colors hover:text-ink focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-30';
     // --- labels ---
@@ -7977,7 +8156,7 @@ class SdsCalendar {
     dayClass(cell) {
         const base = 'inline-flex h-9 w-9 items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-40';
         if (cell.selected)
-            return `${base} bg-brand-600 font-semibold text-white hover:bg-brand-700`;
+            return `${base} bg-brand-600 font-semibold text-white hover:bg-brand-700 ${DARK_BRAND_FILL_HOVER}`;
         let cls = `${base} hover:bg-brand-50`;
         if (cell.otherMonth)
             cls += ' text-ink-faint';
@@ -7990,7 +8169,7 @@ class SdsCalendar {
     cellClass(selected, current, disabled) {
         const base = 'h-10 rounded-control text-sm capitalize transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-40';
         if (selected)
-            return `${base} bg-brand-600 font-semibold text-white hover:bg-brand-700`;
+            return `${base} bg-brand-600 font-semibold text-white hover:bg-brand-700 ${DARK_BRAND_FILL_HOVER}`;
         let cls = `${base} text-ink hover:bg-brand-50`;
         if (current)
             cls += ' font-semibold text-brand-600';
@@ -8217,7 +8396,7 @@ class SdsCalendar {
         </div>
       }
     </div>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsCalendar, decorators: [{
             type: Component,
@@ -8846,7 +9025,7 @@ class SdsDatePicker {
     @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"] }, { kind: "component", type: SdsCalendar, selector: "sds-calendar", inputs: ["value", "min", "max", "firstDayOfWeek", "locale", "showActions", "showTime", "showDone", "timeLabel", "hoursLabel", "minutesLabel", "doneLabel", "calendarLabel", "previousLabel", "nextLabel", "todayActionLabel", "clearActionLabel"], outputs: ["valueChange", "dateSelect", "done"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { kind: "component", type: SdsCalendar, selector: "sds-calendar", inputs: ["value", "min", "max", "firstDayOfWeek", "locale", "showActions", "showTime", "showDone", "timeLabel", "hoursLabel", "minutesLabel", "doneLabel", "calendarLabel", "previousLabel", "nextLabel", "todayActionLabel", "clearActionLabel"], outputs: ["valueChange", "dateSelect", "done"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsDatePicker, decorators: [{
             type: Component,
@@ -9145,6 +9324,14 @@ class SdsSelect {
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     filled = computed(() => this.appearance() === 'filled', ...(ngDevMode ? [{ debugName: "filled" }] : []));
     onBrand = computed(() => this.appearance() === 'on-brand', ...(ngDevMode ? [{ debugName: "onBrand" }] : []));
+    /** The trigger's value / placeholder colour: on the dark `on-brand` surface it stays white in light mode too. */
+    valueTextClass = computed(() => {
+        const selected = !!this.selectedOption();
+        if (this.onBrand()) {
+            return selected ? 'text-white' : 'text-white/60';
+        }
+        return selected ? 'text-ink' : 'text-ink-faint';
+    }, ...(ngDevMode ? [{ debugName: "valueTextClass" }] : []));
     normalizedOptions = computed(() => this.options().map((o) => this.norm(o)), ...(ngDevMode ? [{ debugName: "normalizedOptions" }] : []));
     filteredOptions = computed(() => {
         const f = this.filterText().trim().toLowerCase();
@@ -9510,7 +9697,10 @@ class SdsSelect {
         (keydown)="onTriggerKeydown($event)"
       >
         @if (optionTpl() && selectedOption()) {
-          <span class="flex flex-1 items-center gap-2 truncate pl-3.5 text-ink">
+          <span
+            class="flex flex-1 items-center gap-2 truncate pl-3.5"
+            [class]="onBrand() ? 'text-white' : 'text-ink'"
+          >
             <ng-container
               [ngTemplateOutlet]="optionTpl()!.template"
               [ngTemplateOutletContext]="triggerContext()!"
@@ -9519,7 +9709,7 @@ class SdsSelect {
         } @else {
           <span
             class="flex-1 truncate pl-3.5"
-            [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
+            [class]="valueTextClass()"
           >
             {{ selectedOption() ? selectedOption()!.label : placeholder() }}
           </span>
@@ -9530,7 +9720,8 @@ class SdsSelect {
             type="button"
             tabindex="-1"
             [attr.aria-label]="clearLabel()"
-            class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
+            class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full"
+            [class]="onBrand() ? 'text-white/60 hover:bg-white/10 hover:text-white' : 'text-ink-faint hover:bg-black/5 hover:text-ink-soft'"
             (click)="clear($event)"
           >
             <sds-icon name="x" [size]="15" />
@@ -9538,7 +9729,9 @@ class SdsSelect {
         }
 
         <span
-          class="mr-3 ml-1 inline-flex shrink-0 items-center justify-center text-ink-soft transition-transform duration-150"
+          class="mr-3 ml-1 inline-flex shrink-0 items-center justify-center transition-transform duration-150"
+          [class.text-ink-soft]="!onBrand()"
+          [class.text-white/70]="onBrand()"
           [class.rotate-180]="open()"
         >
           <sds-icon name="chevron-down" [size]="18" />
@@ -9627,7 +9820,7 @@ 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { 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,
@@ -9666,7 +9859,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         (keydown)="onTriggerKeydown($event)"
       >
         @if (optionTpl() && selectedOption()) {
-          <span class="flex flex-1 items-center gap-2 truncate pl-3.5 text-ink">
+          <span
+            class="flex flex-1 items-center gap-2 truncate pl-3.5"
+            [class]="onBrand() ? 'text-white' : 'text-ink'"
+          >
             <ng-container
               [ngTemplateOutlet]="optionTpl()!.template"
               [ngTemplateOutletContext]="triggerContext()!"
@@ -9675,7 +9871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         } @else {
           <span
             class="flex-1 truncate pl-3.5"
-            [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
+            [class]="valueTextClass()"
           >
             {{ selectedOption() ? selectedOption()!.label : placeholder() }}
           </span>
@@ -9686,7 +9882,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             type="button"
             tabindex="-1"
             [attr.aria-label]="clearLabel()"
-            class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
+            class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full"
+            [class]="onBrand() ? 'text-white/60 hover:bg-white/10 hover:text-white' : 'text-ink-faint hover:bg-black/5 hover:text-ink-soft'"
             (click)="clear($event)"
           >
             <sds-icon name="x" [size]="15" />
@@ -9694,7 +9891,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }
 
         <span
-          class="mr-3 ml-1 inline-flex shrink-0 items-center justify-center text-ink-soft transition-transform duration-150"
+          class="mr-3 ml-1 inline-flex shrink-0 items-center justify-center transition-transform duration-150"
+          [class.text-ink-soft]="!onBrand()"
+          [class.text-white/70]="onBrand()"
           [class.rotate-180]="open()"
         >
           <sds-icon name="chevron-down" [size]="18" />
@@ -9859,6 +10058,14 @@ class SdsMultiSelect {
     filterLabel = input('Search', ...(ngDevMode ? [{ debugName: "filterLabel" }] : []));
     /** Visible text of the "select all" row (see {@link showToggleAll}). */
     selectAllLabel = input('Select all', ...(ngDevMode ? [{ debugName: "selectAllLabel" }] : []));
+    /** The panel opened. */
+    opened = output();
+    /**
+     * The panel closed (Escape, Tab, an outside click, a re-click on the field, a footer `close()`), with
+     * the selection at that moment. For "apply on close": take the value here instead of on every
+     * `ngModelChange`. Not emitted when the component is destroyed with the panel open.
+     */
+    closed = output();
     /** Optional projected `<ng-template sdsSelectOption>` — custom option-row rendering. */
     optionTpl = contentChild(SdsSelectOption, ...(ngDevMode ? [{ debugName: "optionTpl" }] : []));
     /** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
@@ -9990,6 +10197,7 @@ class SdsMultiSelect {
             return;
         this.filterText.set('');
         this.open.set(true);
+        this.opened.emit();
         this.onTouched();
         this.initHighlight();
         afterNextRender(() => {
@@ -10014,6 +10222,7 @@ class SdsMultiSelect {
         this.open.set(false);
         if (returnFocus)
             this.trigger()?.nativeElement.focus();
+        this.closed.emit([...this.value()]);
     }
     clear(event) {
         event.stopPropagation();
@@ -10258,7 +10467,7 @@ class SdsMultiSelect {
             this.close();
     }
     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 }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
+    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 }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsMultiSelect), multi: true },
         ], 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()) {
@@ -10436,7 +10645,7 @@ 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { 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,
@@ -10629,7 +10838,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 }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", 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 }] }] } });
+        }], 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 }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], 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: 'Belgium', dialCode: '32', lengths: [9], format: '### ## ## ##', example: '470123456' },
@@ -11288,7 +11497,7 @@ class SdsPhoneInput {
         {{ hint() || autoHint() }}
       </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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsPhoneInput, decorators: [{
             type: Component,
@@ -11551,7 +11760,7 @@ class SdsPaginator {
         if (this.disabled())
             return `${cls} text-ink-faint opacity-50 cursor-not-allowed`;
         return active
-            ? `${cls} bg-brand-600 text-white hover:bg-brand-700 cursor-pointer`
+            ? `${cls} bg-brand-600 text-white hover:bg-brand-700 ${DARK_BRAND_FILL_HOVER} cursor-pointer`
             : `${cls} text-ink-soft hover:bg-muted cursor-pointer`;
     }
     firstPage() {
@@ -11707,7 +11916,7 @@ class SdsPaginator {
         </label>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "component", type: SdsSelect, selector: "sds-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "label", "ariaLabel", "hint", "error", "size", "appearance", "disabled", "clearable", "filter", "filterPlaceholder", "emptyMessage", "clearLabel", "filterLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { kind: "component", type: SdsSelect, selector: "sds-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "label", "ariaLabel", "hint", "error", "size", "appearance", "disabled", "clearable", "filter", "filterPlaceholder", "emptyMessage", "clearLabel", "filterLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsPaginator, decorators: [{
             type: Component,
@@ -11961,10 +12170,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Container (role="tablist") for the <sds-tab> headers. Renders the bottom rule
  * and handles roving-focus keyboard navigation (Arrow keys, Home, End) with
  * automatic activation.
+ *
+ * Name the tab set with [ariaLabel] (or [ariaLabelledby] pointing at a visible heading) when the page has
+ * more than one, or when the tabs alone do not say what they switch.
+ *
+ * @example
+ * <sds-tab-list [ariaLabel]="'Order status'">…</sds-tab-list>
  */
 class SdsTabList {
     host = inject(ElementRef);
     store = inject(SdsTabsStore);
+    /** Accessible name of the tablist. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Id of a visible element that names the tablist (takes precedence over [ariaLabel] for AT). */
+    ariaLabelledby = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
     listClass = computed(() => {
         const base = 'relative flex border-b border-border';
         return this.store.scrollable() ? `${base} overflow-x-auto` : base;
@@ -11998,7 +12217,7 @@ class SdsTabList {
         el.click(); // automatic activation
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTabList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SdsTabList, isStandalone: true, selector: "sds-tab-list", host: { attributes: { "role": "tablist" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "listClass()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: SdsTabList, isStandalone: true, selector: "sds-tab-list", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tablist" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "listClass()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledby() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTabList, decorators: [{
             type: Component,
@@ -12008,11 +12227,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     host: {
                         role: 'tablist',
                         '[class]': 'listClass()',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-labelledby]': 'ariaLabelledby() || null',
                         '(keydown)': 'onKeydown($event)',
                     },
                     template: `<ng-content />`,
                 }]
-        }] });
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }] } });
 
 /**
  * A single tab header (role="tab"). Project the label and, optionally, an
@@ -12358,7 +12579,7 @@ class SdsAccordionHeader {
         [class.rotate-180]="panel.open()"
       />
     </button>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsAccordionHeader, decorators: [{
             type: Component,
@@ -14059,7 +14280,7 @@ class SdsTable {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "component", type: SdsPaginator, selector: "sds-paginator", inputs: ["totalRecords", "first", "rows", "rowsPerPageOptions", "pageLinkSize", "showFirstLastIcon", "showPageLinks", "showCurrentPageReport", "currentPageReportTemplate", "showJumpToPageInput", "rowsPerPageLabel", "jumpToPageLabel", "paginationLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "pageLinkLabel", "jumpToPageAriaLabel", "size", "disabled"], outputs: ["firstChange", "rowsChange", "pageChange"] }, { kind: "component", type: SdsInputNumber, selector: "sds-input-number", inputs: ["label", "ariaLabel", "placeholder", "hint", "error", "invalid", "ariaDescribedby", "size", "appearance", "disabled", "readonly", "mode", "locale", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "min", "max", "step", "showButtons", "buttonLayout", "incrementIcon", "decrementIcon", "allowEmpty", "clearable", "clearLabel", "incrementLabel", "decrementLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { kind: "component", type: SdsPaginator, selector: "sds-paginator", inputs: ["totalRecords", "first", "rows", "rowsPerPageOptions", "pageLinkSize", "showFirstLastIcon", "showPageLinks", "showCurrentPageReport", "currentPageReportTemplate", "showJumpToPageInput", "rowsPerPageLabel", "jumpToPageLabel", "paginationLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "pageLinkLabel", "jumpToPageAriaLabel", "size", "disabled"], outputs: ["firstChange", "rowsChange", "pageChange"] }, { kind: "component", type: SdsInputNumber, selector: "sds-input-number", inputs: ["label", "ariaLabel", "placeholder", "hint", "error", "invalid", "required", "ariaDescribedby", "size", "appearance", "disabled", "readonly", "mode", "locale", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "min", "max", "step", "showButtons", "buttonLayout", "incrementIcon", "decrementIcon", "allowEmpty", "clearable", "clearLabel", "incrementLabel", "decrementLabel"] }, { 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: SdsTable, decorators: [{
             type: Component,
@@ -14613,7 +14834,7 @@ class SdsToastHost {
         </button>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsToastHost, decorators: [{
             type: Component,
@@ -14776,7 +14997,7 @@ class SdsThemeToggle {
     >
       <sds-icon [name]="isDark() ? 'sun' : 'moon'" [size]="iconSize()" />
     </button>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsThemeToggle, decorators: [{
             type: Component,
@@ -15019,7 +15240,7 @@ class SdsTopbar {
       </div>
       </div>
     </header>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTopbar, decorators: [{
             type: Component,
@@ -15414,7 +15635,7 @@ class SdsSidebar {
         <ng-content select="[sdsFooter]" />
       </div>
     </aside>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSidebar, decorators: [{
             type: Component,
@@ -15657,7 +15878,7 @@ class SdsNavGroup {
         <ng-content />
       </div>
     </div>
-  `, 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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsNavGroup, decorators: [{
             type: Component,
@@ -15775,7 +15996,7 @@ class SdsNavItem {
             : this.badgeTone() === 'neutral'
                 ? 'bg-muted text-ink-soft border border-border'
                 : this.store.appearance() === 'surface'
-                    ? 'bg-brand-600 text-white dark:bg-ink dark:text-surface'
+                    ? `bg-brand-600 text-white ${DARK_PRIMARY_BG} ${DARK_ON_PRIMARY}`
                     : 'bg-white text-brand-800';
         const base = 'ml-auto inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 ' +
             'text-[11px] font-bold tabular-nums leading-none';
@@ -15860,7 +16081,7 @@ class SdsNavItem {
         <span class="sr-only">, {{ text }}</span>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsNavItem, decorators: [{
             type: Component,
@@ -16067,7 +16288,7 @@ class SdsUserMenu {
         </div>
       </div>
     }
-  `, isInline: true, styles: [".animate-sds-menu{animation:sds-menu-in .14s ease-out}@keyframes sds-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsAvatar, selector: "sds-avatar", inputs: ["name", "initials", "src", "size", "status", "shape", "bgClass", "fallbackIcon", "placeholderClass", "decorative", "lazy"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".animate-sds-menu{animation:sds-menu-in .14s ease-out}@keyframes sds-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsAvatar, selector: "sds-avatar", inputs: ["name", "initials", "src", "size", "status", "shape", "bgClass", "fallbackIcon", "placeholderClass", "decorative", "lazy"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsUserMenu, decorators: [{
             type: Component,
@@ -16218,7 +16439,7 @@ class SdsMenuItem {
       <span class="flex-1 truncate text-left">{{ label() }}</span>
       <ng-content />
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMenuItem, decorators: [{
             type: Component,
@@ -16606,7 +16827,7 @@ class SdsSearchCommand {
         </div>
       </div>
     }
-  `, isInline: true, styles: [".animate-sds-cmd{animation:sds-cmd-in .16s ease-out}@keyframes sds-cmd-in{0%{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.animate-sds-cmd{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".animate-sds-cmd{animation:sds-cmd-in .16s ease-out}@keyframes sds-cmd-in{0%{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.animate-sds-cmd{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSearchCommand, decorators: [{
             type: Component,
@@ -17054,7 +17275,7 @@ class SdsLanguageSwitcher {
         </div>
       </div>
     }
-  `, isInline: true, styles: [".animate-sds-menu{animation:sds-menu-in .14s ease-out}@keyframes sds-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".animate-sds-menu{animation:sds-menu-in .14s ease-out}@keyframes sds-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLanguageSwitcher, decorators: [{
             type: Component,