@semantic-components/ui-lab 0.73.0 → 0.75.0

package/fesm2022/semantic-components-ui-lab.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, DestroyRef, output, signal, effect, ElementRef, InjectionToken, model, viewChild, booleanAttribute, Directive, PLATFORM_ID, afterNextRender, afterRenderEffect, ViewChild, ViewContainerRef, contentChild, Injector, runInInjectionContext, contentChildren, untracked, Injectable, TemplateRef } from '@angular/core';
 import { RouterOutlet, Router, NavigationEnd } from '@angular/router';
 import { cn, ScSlider, buttonVariants, ScCalendar, SC_FIELD, SC_TIME_PICKER, ScPopoverProvider, ScButton, ScPopoverTrigger, ScPopoverPortal, ScPopover } from '@semantic-components/ui';
-import { SiVolumeOffIcon, SiVolumeXIcon, SiVolume1Icon, SiVolume2Icon, SiPipetteIcon, SiSearchIcon, SiChevronRightIcon, SiCheckIcon, SiCopyIcon, SiChevronUpIcon, SiChevronDownIcon, SiChevronsUpDownIcon, SiSlidersVerticalIcon, SiChevronsLeftIcon, SiChevronLeftIcon, SiChevronsRightIcon, SiCalendarIcon, SiXIcon, SiSmileIcon, SiLoaderCircleIcon, SiPlusIcon, SiZoomOutIcon, SiZoomInIcon, SiMinimize2Icon, SiMinusIcon, SiTriangleAlertIcon, SiCircleXIcon, SiMessageSquareIcon, SiInfoIcon, SiCircleCheckIcon, SiTrash2Icon, SiBellIcon, SiEyeIcon, SiEyeOffIcon, SiCircleIcon, SiFileTextIcon, SiRotateCcwIcon, SiRotateCwIcon, SiDownloadIcon, SiPrinterIcon, SiMaximizeIcon, SiMinimizeIcon, SiPhoneIcon, SiGripVerticalIcon, SiClockIcon, SiGlobeIcon } from '@semantic-icons/lucide-icons';
+import { SiVolumeOffIcon, SiVolumeXIcon, SiVolume1Icon, SiVolume2Icon, SiPipetteIcon, SiSearchIcon, SiChevronRightIcon, SiChevronUpIcon, SiChevronDownIcon, SiChevronsUpDownIcon, SiSlidersVerticalIcon, SiChevronsLeftIcon, SiChevronLeftIcon, SiChevronsRightIcon, SiCalendarIcon, SiXIcon, SiSmileIcon, SiLoaderCircleIcon, SiPlusIcon, SiZoomOutIcon, SiZoomInIcon, SiMinimize2Icon, SiCheckIcon, SiMinusIcon, SiTriangleAlertIcon, SiCircleXIcon, SiMessageSquareIcon, SiInfoIcon, SiCircleCheckIcon, SiTrash2Icon, SiBellIcon, SiEyeIcon, SiEyeOffIcon, SiCircleIcon, SiFileTextIcon, SiRotateCcwIcon, SiRotateCwIcon, SiDownloadIcon, SiPrinterIcon, SiMaximizeIcon, SiMinimizeIcon, SiPhoneIcon, SiGripVerticalIcon, SiClockIcon, SiGlobeIcon } from '@semantic-icons/lucide-icons';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/aria/combobox';
 import { Combobox, ComboboxInput, ComboboxPopupContainer, ComboboxDialog } from '@angular/aria/combobox';
@@ -567,6 +567,7 @@ class ScAudioPlayerProgress {
       <!-- Seek slider -->
       <input
         scSlider
+        aria-label="Seek"
         class="absolute inset-0 h-full [&::-moz-range-progress]:transition-[height] group-hover:[&::-moz-range-progress]:h-1.5 [&::-moz-range-track]:transition-[height] group-hover:[&::-moz-range-track]:h-1.5 [&::-webkit-slider-runnable-track]:transition-[height] group-hover:[&::-webkit-slider-runnable-track]:h-1.5"
         style="--muted: oklch(0 0 0 / 0.1)"
         min="0"
@@ -580,7 +581,7 @@ class ScAudioPlayerProgress {
     <span class="text-muted-foreground w-10 text-xs">
       {{ player.formatTime(player.duration()) }}
     </span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class", "aria-describedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScAudioPlayerProgress, decorators: [{
             type: Component,
@@ -600,6 +601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       <!-- Seek slider -->
       <input
         scSlider
+        aria-label="Seek"
         class="absolute inset-0 h-full [&::-moz-range-progress]:transition-[height] group-hover:[&::-moz-range-progress]:h-1.5 [&::-moz-range-track]:transition-[height] group-hover:[&::-moz-range-track]:h-1.5 [&::-webkit-slider-runnable-track]:transition-[height] group-hover:[&::-webkit-slider-runnable-track]:h-1.5"
         style="--muted: oklch(0 0 0 / 0.1)"
         min="0"
@@ -820,7 +822,7 @@ class ScAudioPlayerVolume {
     >
       <svg siVolume2Icon class="pointer-events-none size-3.5"></svg>
     </button>
-  `, isInline: true, dependencies: [{ kind: "component", type: SiVolumeOffIcon, selector: "svg[siVolumeOffIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiVolumeXIcon, selector: "svg[siVolumeXIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiVolume1Icon, selector: "svg[siVolume1Icon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiVolume2Icon, selector: "svg[siVolume2Icon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: SiVolumeOffIcon, selector: "svg[siVolumeOffIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiVolumeXIcon, selector: "svg[siVolumeXIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiVolume1Icon, selector: "svg[siVolume1Icon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiVolume2Icon, selector: "svg[siVolume2Icon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class", "aria-describedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScAudioPlayerVolume, decorators: [{
             type: Component,
@@ -4145,252 +4147,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], propDecorators: { contentChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ScContextMenuContent), { isSignal: true }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-class ScCopyButton {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    timeout = input(2000, ...(ngDevMode ? [{ debugName: "timeout" }] : []));
-    variant = input('ghost', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    size = input('icon', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    copySuccess = output();
-    copyError = output();
-    copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : []));
-    timeoutId = null;
-    class = computed(() => cn('inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', 'disabled:pointer-events-none disabled:opacity-50', 
-    // Variants
-    this.variant() === 'default' &&
-        'bg-primary text-primary-foreground shadow hover:bg-primary/90', this.variant() === 'ghost' &&
-        'hover:bg-accent hover:text-accent-foreground', this.variant() === 'outline' &&
-        'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground', 
-    // Sizes
-    this.size() === 'sm' && 'h-8 px-3 text-xs', this.size() === 'default' && 'h-9 px-4 py-2 text-sm', this.size() === 'lg' && 'h-10 px-8 text-sm', this.size() === 'icon' && 'size-9', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    iconClass = computed(() => cn(this.size() === 'sm' && 'size-3.5', this.size() === 'default' && 'size-4', this.size() === 'lg' && 'size-5', this.size() === 'icon' && 'size-4'), ...(ngDevMode ? [{ debugName: "iconClass" }] : []));
-    ariaLabel = computed(() => this.copied() ? 'Copied to clipboard' : 'Copy to clipboard', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    async copy() {
-        if (this.disabled() || this.copied())
-            return;
-        try {
-            await navigator.clipboard.writeText(this.value());
-            this.copied.set(true);
-            this.copySuccess.emit(this.value());
-            // Clear any existing timeout
-            if (this.timeoutId) {
-                clearTimeout(this.timeoutId);
-            }
-            // Reset after timeout
-            this.timeoutId = setTimeout(() => {
-                this.copied.set(false);
-                this.timeoutId = null;
-            }, this.timeout());
-        }
-        catch (error) {
-            this.copyError.emit(error instanceof Error ? error : new Error('Failed to copy'));
-        }
-    }
-    reset() {
-        if (this.timeoutId) {
-            clearTimeout(this.timeoutId);
-            this.timeoutId = null;
-        }
-        this.copied.set(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ScCopyButton, isStandalone: true, selector: "button[scCopyButton]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copySuccess: "copySuccess", copyError: "copyError" }, host: { attributes: { "data-slot": "copy-button", "type": "button" }, listeners: { "click": "copy()" }, properties: { "class": "class()", "disabled": "disabled()", "attr.data-copied": "copied() || null", "attr.aria-label": "ariaLabel()" } }, exportAs: ["scCopyButton"], ngImport: i0, template: `
-    @if (copied()) {
-      <svg siCheckIcon [class]="iconClass()" class="text-green-500"></svg>
-    } @else {
-      <svg siCopyIcon [class]="iconClass()"></svg>
-    }
-    <ng-content />
-  `, isInline: true, dependencies: [{ kind: "component", type: SiCheckIcon, selector: "svg[siCheckIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiCopyIcon, selector: "svg[siCopyIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyButton, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[scCopyButton]',
-                    exportAs: 'scCopyButton',
-                    imports: [SiCheckIcon, SiCopyIcon],
-                    template: `
-    @if (copied()) {
-      <svg siCheckIcon [class]="iconClass()" class="text-green-500"></svg>
-    } @else {
-      <svg siCopyIcon [class]="iconClass()"></svg>
-    }
-    <ng-content />
-  `,
-                    host: {
-                        'data-slot': 'copy-button',
-                        type: 'button',
-                        '[class]': 'class()',
-                        '[disabled]': 'disabled()',
-                        '[attr.data-copied]': 'copied() || null',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '(click)': 'copy()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], timeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeout", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], copySuccess: [{ type: i0.Output, args: ["copySuccess"] }], copyError: [{ type: i0.Output, args: ["copyError"] }] } });
-
-class ScCopyButtonWithText {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    timeout = input(2000, ...(ngDevMode ? [{ debugName: "timeout" }] : []));
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    copyText = input('Copy', ...(ngDevMode ? [{ debugName: "copyText" }] : []));
-    copiedText = input('Copied!', ...(ngDevMode ? [{ debugName: "copiedText" }] : []));
-    copySuccess = output();
-    copyError = output();
-    class = computed(() => cn('inline-block', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyButtonWithText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScCopyButtonWithText, isStandalone: true, selector: "[scCopyButtonWithText]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, copyText: { classPropertyName: "copyText", publicName: "copyText", isSignal: true, isRequired: false, transformFunction: null }, copiedText: { classPropertyName: "copiedText", publicName: "copiedText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copySuccess: "copySuccess", copyError: "copyError" }, host: { attributes: { "data-slot": "copy-button-with-text" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <button
-      scCopyButton
-      [value]="value()"
-      [disabled]="disabled()"
-      [timeout]="timeout()"
-      [variant]="variant()"
-      [size]="size()"
-      (copySuccess)="copySuccess.emit($event)"
-      (copyError)="copyError.emit($event)"
-      #copyBtn="scCopyButton"
-    >
-      {{ copyBtn.copied() ? copiedText() : copyText() }}
-    </button>
-  `, isInline: true, dependencies: [{ kind: "component", type: ScCopyButton, selector: "button[scCopyButton]", inputs: ["class", "value", "disabled", "timeout", "variant", "size"], outputs: ["copySuccess", "copyError"], exportAs: ["scCopyButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyButtonWithText, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[scCopyButtonWithText]',
-                    template: `
-    <button
-      scCopyButton
-      [value]="value()"
-      [disabled]="disabled()"
-      [timeout]="timeout()"
-      [variant]="variant()"
-      [size]="size()"
-      (copySuccess)="copySuccess.emit($event)"
-      (copyError)="copyError.emit($event)"
-      #copyBtn="scCopyButton"
-    >
-      {{ copyBtn.copied() ? copiedText() : copyText() }}
-    </button>
-  `,
-                    host: {
-                        'data-slot': 'copy-button-with-text',
-                        '[class]': 'class()',
-                    },
-                    imports: [ScCopyButton],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], timeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeout", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], copyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyText", required: false }] }], copiedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedText", required: false }] }], copySuccess: [{ type: i0.Output, args: ["copySuccess"] }], copyError: [{ type: i0.Output, args: ["copyError"] }] } });
-
-class ScCopyInput {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    readonly = input(true, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
-    class = computed(() => cn('inline-block', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    inputClass = computed(() => cn('flex h-9 w-full rounded-md rounded-r-none border border-input bg-transparent px-3 py-1 text-sm shadow-sm', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', this.readonly() && 'bg-muted text-muted-foreground'), ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScCopyInput, isStandalone: true, selector: "[scCopyInput]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "copy-input" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <div class="flex">
-      <input
-        type="text"
-        [value]="value()"
-        [readonly]="readonly()"
-        [class]="inputClass()"
-      />
-      <button
-        scCopyButton
-        [value]="value()"
-        [variant]="'outline'"
-        [size]="'icon'"
-        class="rounded-l-none border-l-0"
-      ></button>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ScCopyButton, selector: "button[scCopyButton]", inputs: ["class", "value", "disabled", "timeout", "variant", "size"], outputs: ["copySuccess", "copyError"], exportAs: ["scCopyButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyInput, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[scCopyInput]',
-                    template: `
-    <div class="flex">
-      <input
-        type="text"
-        [value]="value()"
-        [readonly]="readonly()"
-        [class]="inputClass()"
-      />
-      <button
-        scCopyButton
-        [value]="value()"
-        [variant]="'outline'"
-        [size]="'icon'"
-        class="rounded-l-none border-l-0"
-      ></button>
-    </div>
-  `,
-                    host: {
-                        'data-slot': 'copy-input',
-                        '[class]': 'class()',
-                    },
-                    imports: [ScCopyButton],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
-
-class ScCopyCode {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    class = computed(() => cn('block', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    preClass = computed(() => cn('rounded-lg bg-muted p-4 pr-12 overflow-x-auto text-sm', 'font-mono'), ...(ngDevMode ? [{ debugName: "preClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyCode, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScCopyCode, isStandalone: true, selector: "[scCopyCode]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "copy-code" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <div class="relative">
-      <pre [class]="preClass()"><code><ng-content /></code></pre>
-      <button
-        scCopyButton
-        [value]="value()"
-        class="absolute top-2 right-2"
-        [variant]="'ghost'"
-        [size]="'icon'"
-      ></button>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ScCopyButton, selector: "button[scCopyButton]", inputs: ["class", "value", "disabled", "timeout", "variant", "size"], outputs: ["copySuccess", "copyError"], exportAs: ["scCopyButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyCode, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[scCopyCode]',
-                    template: `
-    <div class="relative">
-      <pre [class]="preClass()"><code><ng-content /></code></pre>
-      <button
-        scCopyButton
-        [value]="value()"
-        class="absolute top-2 right-2"
-        [variant]="'ghost'"
-        [size]="'icon'"
-      ></button>
-    </div>
-  `,
-                    host: {
-                        'data-slot': 'copy-code',
-                        '[class]': 'class()',
-                    },
-                    imports: [ScCopyButton],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
-
 class ScCountdown {
     destroyRef = inject(DestroyRef);
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
@@ -8915,7 +8671,7 @@ class ScImageCropperSelection {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScImageCropperSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScImageCropperSelection, isStandalone: true, selector: "[scImageCropperSelection]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "image-cropper-selection", "tabindex": "0", "role": "slider", "aria-label": "Crop selection" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class": "class()", "style.left.px": "cropper.cropArea().x", "style.top.px": "cropper.cropArea().y", "style.width.px": "cropper.cropArea().width", "style.height.px": "cropper.cropArea().height" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScImageCropperSelection, isStandalone: true, selector: "[scImageCropperSelection]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "image-cropper-selection", "tabindex": "0", "role": "group", "aria-label": "Crop selection", "aria-roledescription": "crop region" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class": "class()", "style.left.px": "cropper.cropArea().x", "style.top.px": "cropper.cropArea().y", "style.width.px": "cropper.cropArea().width", "style.height.px": "cropper.cropArea().height" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScImageCropperSelection, decorators: [{
             type: Directive,
@@ -8929,8 +8685,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         '[style.width.px]': 'cropper.cropArea().width',
                         '[style.height.px]': 'cropper.cropArea().height',
                         tabindex: '0',
-                        role: 'slider',
+                        role: 'group',
                         'aria-label': 'Crop selection',
+                        'aria-roledescription': 'crop region',
                         '(keydown)': 'onKeyDown($event)',
                     },
                 }]
@@ -9107,6 +8864,7 @@ class ScImageCropperZoomSlider {
     <input
       #sliderEl
       scSlider
+      aria-label="Zoom level"
       [min]="0.1"
       [max]="3"
       [step]="0.1"
@@ -9116,7 +8874,7 @@ class ScImageCropperZoomSlider {
     <span class="text-muted-foreground min-w-[50px] text-center text-sm">
       {{ zoomPercentage() }}
     </span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class", "aria-describedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScImageCropperZoomSlider, decorators: [{
             type: Component,
@@ -9127,6 +8885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
     <input
       #sliderEl
       scSlider
+      aria-label="Zoom level"
       [min]="0.1"
       [max]="3"
       [step]="0.1"
@@ -9415,30 +9174,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
-class ScInfiniteScrollLoader {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScInfiniteScrollLoader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ScInfiniteScrollLoader, isStandalone: true, selector: "[scInfiniteScrollLoader]", host: { attributes: { "data-slot": "infinite-scroll-loader" } }, ngImport: i0 });
+class ScInfiniteScrollEnd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScInfiniteScrollEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ScInfiniteScrollEnd, isStandalone: true, selector: "[scInfiniteScrollEnd]", host: { attributes: { "data-slot": "infinite-scroll-end" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScInfiniteScrollLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScInfiniteScrollEnd, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[scInfiniteScrollLoader]',
+                    selector: '[scInfiniteScrollEnd]',
                     host: {
-                        'data-slot': 'infinite-scroll-loader',
+                        'data-slot': 'infinite-scroll-end',
                     },
                 }]
         }] });
 
-class ScInfiniteScrollEnd {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScInfiniteScrollEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ScInfiniteScrollEnd, isStandalone: true, selector: "[scInfiniteScrollEnd]", host: { attributes: { "data-slot": "infinite-scroll-end" } }, ngImport: i0 });
+class ScInfiniteScrollLoader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScInfiniteScrollLoader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ScInfiniteScrollLoader, isStandalone: true, selector: "[scInfiniteScrollLoader]", host: { attributes: { "data-slot": "infinite-scroll-loader" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScInfiniteScrollEnd, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScInfiniteScrollLoader, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[scInfiniteScrollEnd]',
+                    selector: '[scInfiniteScrollLoader]',
                     host: {
-                        'data-slot': 'infinite-scroll-end',
+                        'data-slot': 'infinite-scroll-loader',
                     },
                 }]
         }] });
@@ -9695,6 +9454,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }] } });
 
+class ScOptFieldSlotCaret {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('pointer-events-none absolute inset-0 flex items-center justify-center', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScOptFieldSlotCaret, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScOptFieldSlotCaret, isStandalone: true, selector: "div[scOptFieldSlotCaret]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "opt-field-slot-caret" }, properties: { "class": "class()" } }, ngImport: i0, template: `
+    <div class="animate-caret-blink bg-foreground h-4 w-px"></div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScOptFieldSlotCaret, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scOptFieldSlotCaret]',
+                    host: {
+                        'data-slot': 'opt-field-slot-caret',
+                        '[class]': 'class()',
+                    },
+                    template: `
+    <div class="animate-caret-blink bg-foreground h-4 w-px"></div>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class ScOptFieldSlotChar {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    char = input('', ...(ngDevMode ? [{ debugName: "char" }] : []));
+    class = computed(() => cn('pointer-events-none', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScOptFieldSlotChar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScOptFieldSlotChar, isStandalone: true, selector: "span[scOptFieldSlotChar]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, char: { classPropertyName: "char", publicName: "char", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "opt-field-slot-char" }, properties: { "class": "class()", "textContent": "char()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScOptFieldSlotChar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'span[scOptFieldSlotChar]',
+                    host: {
+                        'data-slot': 'opt-field-slot-char',
+                        '[class]': 'class()',
+                        '[textContent]': 'char()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], char: [{ type: i0.Input, args: [{ isSignal: true, alias: "char", required: false }] }] } });
+
 class ScOptFieldSlotInput {
     elementRef = inject((ElementRef));
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
@@ -9742,49 +9544,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }], focused: [{ type: i0.Output, args: ["focused"] }] } });
 
-class ScOptFieldSlotCaret {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('pointer-events-none absolute inset-0 flex items-center justify-center', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScOptFieldSlotCaret, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScOptFieldSlotCaret, isStandalone: true, selector: "div[scOptFieldSlotCaret]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "opt-field-slot-caret" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <div class="animate-caret-blink bg-foreground h-4 w-px"></div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScOptFieldSlotCaret, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[scOptFieldSlotCaret]',
-                    host: {
-                        'data-slot': 'opt-field-slot-caret',
-                        '[class]': 'class()',
-                    },
-                    template: `
-    <div class="animate-caret-blink bg-foreground h-4 w-px"></div>
-  `,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScOptFieldSlotChar {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    char = input('', ...(ngDevMode ? [{ debugName: "char" }] : []));
-    class = computed(() => cn('pointer-events-none', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScOptFieldSlotChar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScOptFieldSlotChar, isStandalone: true, selector: "span[scOptFieldSlotChar]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, char: { classPropertyName: "char", publicName: "char", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "opt-field-slot-char" }, properties: { "class": "class()", "textContent": "char()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScOptFieldSlotChar, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'span[scOptFieldSlotChar]',
-                    host: {
-                        'data-slot': 'opt-field-slot-char',
-                        '[class]': 'class()',
-                        '[textContent]': 'char()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], char: [{ type: i0.Input, args: [{ isSignal: true, alias: "char", required: false }] }] } });
-
 class ScOptFieldSlot {
     optField = inject(ScOptField);
     inputComponent = viewChild.required(ScOptFieldSlotInput);
@@ -9900,6 +9659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class ScOptField {
     elementRef = inject((ElementRef));
     id = input(inject(_IdGenerator).getId('sc-opt-field-'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    descriptionIds = signal([], ...(ngDevMode ? [{ debugName: "descriptionIds" }] : []));
     role = computed(() => {
         const tagName = this.elementRef.nativeElement.tagName;
         return tagName === 'LABEL' ? null : 'group';
@@ -14054,6 +13814,7 @@ const SC_NUMBER_FIELD = new InjectionToken('SC_NUMBER_FIELD');
 class ScNumberField {
     elementRef = inject((ElementRef));
     id = input(inject(_IdGenerator).getId('sc-number-field-'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    descriptionIds = signal([], ...(ngDevMode ? [{ debugName: "descriptionIds" }] : []));
     role = computed(() => {
         const tagName = this.elementRef.nativeElement.tagName;
         return tagName === 'LABEL' ? null : 'group';
@@ -14299,7 +14060,7 @@ class ScNumberFieldInput {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScNumberFieldInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScNumberFieldInput, isStandalone: true, selector: "input[scNumberFieldInput]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "number-field-input", "type": "text", "inputmode": "decimal" }, listeners: { "input": "onInput($event)", "blur": "onBlur()", "keydown": "onKeydown($event)" }, properties: { "class": "class()", "value": "displayValue()", "disabled": "numberField.disabled()", "attr.aria-valuemin": "numberField.min()", "attr.aria-valuemax": "numberField.max()", "attr.aria-valuenow": "numberField.value()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScNumberFieldInput, isStandalone: true, selector: "input[scNumberFieldInput]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "number-field-input", "type": "text", "inputmode": "decimal", "role": "spinbutton" }, listeners: { "input": "onInput($event)", "blur": "onBlur()", "keydown": "onKeydown($event)" }, properties: { "class": "class()", "value": "displayValue()", "disabled": "numberField.disabled()", "attr.aria-valuemin": "numberField.min()", "attr.aria-valuemax": "numberField.max()", "attr.aria-valuenow": "numberField.value()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScNumberFieldInput, decorators: [{
             type: Component,
@@ -14310,6 +14071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         'data-slot': 'number-field-input',
                         type: 'text',
                         inputmode: 'decimal',
+                        role: 'spinbutton',
                         '[class]': 'class()',
                         '[value]': 'displayValue()',
                         '[disabled]': 'numberField.disabled()',
@@ -14712,6 +14474,7 @@ const SC_PASSWORD_FIELD = new InjectionToken('SC_PASSWORD_FIELD');
 class ScPasswordField {
     elementRef = inject((ElementRef));
     id = input(inject(_IdGenerator).getId('sc-password-field-'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    descriptionIds = signal([], ...(ngDevMode ? [{ debugName: "descriptionIds" }] : []));
     role = computed(() => {
         const tagName = this.elementRef.nativeElement.tagName;
         return tagName === 'LABEL' ? null : 'group';
@@ -14803,16 +14566,20 @@ class ScPasswordFieldInput {
     field = inject(SC_FIELD);
     passwordField = inject(SC_PASSWORD_FIELD);
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    ariaDescribedByInput = input('', { ...(ngDevMode ? { debugName: "ariaDescribedByInput" } : {}), alias: 'aria-describedby' });
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     autocomplete = input('current-password', ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
+    ariaDescribedBy = computed(() => this.ariaDescribedByInput() ||
+        this.field.descriptionIds().join(' ') ||
+        null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
     class = computed(() => cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 pr-10 text-sm shadow-sm transition-colors', 'file:border-0 file:bg-transparent file:text-sm file:font-medium', 'placeholder:text-muted-foreground', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     onInput(event) {
         const input = event.target;
         this.passwordField.setValue(input.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScPasswordFieldInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScPasswordFieldInput, isStandalone: true, selector: "input[scPasswordFieldInput]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "password-field-input" }, listeners: { "input": "onInput($event)" }, properties: { "id": "field.id()", "type": "passwordField.visible() ? \"text\" : \"password\"", "class": "class()", "value": "passwordField.value()", "disabled": "passwordField.disabled()", "attr.aria-invalid": "passwordField.invalid()", "readonly": "readonly()", "placeholder": "placeholder()", "autocomplete": "autocomplete()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScPasswordFieldInput, isStandalone: true, selector: "input[scPasswordFieldInput]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedByInput: { classPropertyName: "ariaDescribedByInput", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "password-field-input" }, listeners: { "input": "onInput($event)" }, properties: { "id": "field.id()", "type": "passwordField.visible() ? \"text\" : \"password\"", "class": "class()", "value": "passwordField.value()", "disabled": "passwordField.disabled()", "attr.aria-invalid": "passwordField.invalid()", "attr.aria-describedby": "ariaDescribedBy()", "readonly": "readonly()", "placeholder": "placeholder()", "autocomplete": "autocomplete()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScPasswordFieldInput, decorators: [{
             type: Component,
@@ -14827,6 +14594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         '[value]': 'passwordField.value()',
                         '[disabled]': 'passwordField.disabled()',
                         '[attr.aria-invalid]': 'passwordField.invalid()',
+                        '[attr.aria-describedby]': 'ariaDescribedBy()',
                         '[readonly]': 'readonly()',
                         '[placeholder]': 'placeholder()',
                         '[autocomplete]': 'autocomplete()',
@@ -14835,7 +14603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaDescribedByInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
 
 class ScPasswordFieldToggle {
     passwordField = inject(SC_PASSWORD_FIELD);
@@ -18364,6 +18132,7 @@ const SC_RATING_FIELD = new InjectionToken('SC_RATING_FIELD');
 class ScRatingField {
     elementRef = inject((ElementRef));
     id = input(inject(_IdGenerator).getId('sc-rating-field-'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    descriptionIds = signal([], ...(ngDevMode ? [{ debugName: "descriptionIds" }] : []));
     role = computed(() => {
         const tagName = this.elementRef.nativeElement.tagName;
         return tagName === 'LABEL' ? null : 'group';
@@ -18839,6 +18608,7 @@ class ScSignaturePadCanvas {
     // CSS/Tailwind only sets display size, which causes stretching and poor drawing quality.
     width = input(400, ...(ngDevMode ? [{ debugName: "width" }] : []));
     height = input(200, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    ariaLabel = input('Signature pad', { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     // Two-way binding
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -18982,7 +18752,7 @@ class ScSignaturePadCanvas {
         this.signatureChange.emit(dataURL);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSignaturePadCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScSignaturePadCanvas, isStandalone: true, selector: "canvas[scSignaturePadCanvas]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", signatureChange: "signatureChange", strokeEnd: "strokeEnd" }, host: { attributes: { "data-slot": "signature-pad-canvas", "role": "img" }, listeners: { "mousedown": "onPointerDown($event)", "mousemove": "onPointerMove($event)", "mouseup": "onPointerUp()", "mouseleave": "onPointerUp()", "touchstart": "onTouchStart($event)", "touchmove": "onTouchMove($event)", "touchend": "onPointerUp()" }, properties: { "class": "class()", "width": "width()", "height": "height()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScSignaturePadCanvas, isStandalone: true, selector: "canvas[scSignaturePadCanvas]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", signatureChange: "signatureChange", strokeEnd: "strokeEnd" }, host: { attributes: { "data-slot": "signature-pad-canvas", "role": "img" }, listeners: { "mousedown": "onPointerDown($event)", "mousemove": "onPointerMove($event)", "mouseup": "onPointerUp()", "mouseleave": "onPointerUp()", "touchstart": "onTouchStart($event)", "touchmove": "onTouchMove($event)", "touchend": "onPointerUp()" }, properties: { "class": "class()", "width": "width()", "height": "height()", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSignaturePadCanvas, decorators: [{
             type: Component,
@@ -18995,6 +18765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         '[width]': 'width()',
                         '[height]': 'height()',
                         role: 'img',
+                        '[attr.aria-label]': 'ariaLabel()',
                         '(mousedown)': 'onPointerDown($event)',
                         '(mousemove)': 'onPointerMove($event)',
                         '(mouseup)': 'onPointerUp()',
@@ -19006,7 +18777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], signatureChange: [{ type: i0.Output, args: ["signatureChange"] }], strokeEnd: [{ type: i0.Output, args: ["strokeEnd"] }] } });
+        }], ctorParameters: () => [], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], signatureChange: [{ type: i0.Output, args: ["signatureChange"] }], strokeEnd: [{ type: i0.Output, args: ["strokeEnd"] }] } });
 
 class ScSignaturePadControls {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
@@ -19116,8 +18887,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class ScSignaturePadColorButton {
     signaturePad = inject(SC_SIGNATURE_PAD);
     color = input.required(...(ngDevMode ? [{ debugName: "color" }] : []));
-    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabelInput = input('', { ...(ngDevMode ? { debugName: "ariaLabelInput" } : {}), alias: 'aria-label' });
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    ariaLabel = computed(() => this.ariaLabelInput() || `Pen color ${this.color()}`, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     isActive = computed(() => this.signaturePad.penColor() === this.color(), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
     class = computed(() => cn('inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors', 'disabled:pointer-events-none disabled:opacity-50', 'data-active:border-primary data-active:bg-primary/10', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     onClick() {
@@ -19126,7 +18898,7 @@ class ScSignaturePadColorButton {
         this.signaturePad.penColor.set(this.color());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSignaturePadColorButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScSignaturePadColorButton, isStandalone: true, selector: "button[scSignaturePadPenColor]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "attr.aria-label": "ariaLabel()", "attr.data-active": "isActive() || null", "disabled": "signaturePad.disabled() || null" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScSignaturePadColorButton, isStandalone: true, selector: "button[scSignaturePadPenColor]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, ariaLabelInput: { classPropertyName: "ariaLabelInput", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "attr.aria-label": "ariaLabel()", "attr.data-active": "isActive() || null", "disabled": "signaturePad.disabled() || null" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSignaturePadColorButton, decorators: [{
             type: Component,
@@ -19144,13 +18916,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], ariaLabelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class ScSignaturePadWidthButton {
     signaturePad = inject(SC_SIGNATURE_PAD);
     width = input.required(...(ngDevMode ? [{ debugName: "width" }] : []));
-    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabelInput = input('', { ...(ngDevMode ? { debugName: "ariaLabelInput" } : {}), alias: 'aria-label' });
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    ariaLabel = computed(() => this.ariaLabelInput() || `Pen width ${this.width()}`, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     isActive = computed(() => this.signaturePad.penWidth() === this.width(), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
     class = computed(() => cn('inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors', 'disabled:pointer-events-none disabled:opacity-50', 'data-active:border-primary data-active:bg-primary/10', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     onClick() {
@@ -19159,7 +18932,7 @@ class ScSignaturePadWidthButton {
         this.signaturePad.penWidth.set(this.width());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSignaturePadWidthButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScSignaturePadWidthButton, isStandalone: true, selector: "button[scSignaturePadPenWidth]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "attr.aria-label": "ariaLabel()", "attr.data-active": "isActive() || null", "disabled": "signaturePad.disabled() || null" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScSignaturePadWidthButton, isStandalone: true, selector: "button[scSignaturePadPenWidth]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: true, transformFunction: null }, ariaLabelInput: { classPropertyName: "ariaLabelInput", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "attr.aria-label": "ariaLabel()", "attr.data-active": "isActive() || null", "disabled": "signaturePad.disabled() || null" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSignaturePadWidthButton, decorators: [{
             type: Component,
@@ -19177,7 +18950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }], ariaLabelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 // Token for sortable list context
 const SC_SORTABLE_LIST = new InjectionToken('SC_SORTABLE_LIST');
@@ -19994,17 +19767,7 @@ class ScSpotlight {
             class="bg-background/90 hover:bg-background text-foreground absolute top-4 right-4 z-10 rounded-full p-2 shadow-lg"
             aria-label="Close spotlight"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              class="size-5"
-            >
-              <path d="M18 6 6 18" />
-              <path d="m6 6 12 12" />
-            </svg>
+            <svg siXIcon class="size-5"></svg>
           </button>
         }
 
@@ -20020,12 +19783,13 @@ class ScSpotlight {
         }
       </div>
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: SiXIcon, selector: "svg[siXIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSpotlight, decorators: [{
             type: Component,
             args: [{
                     selector: 'sc-spotlight',
+                    imports: [SiXIcon],
                     template: `
     @if (isActive()) {
       <div
@@ -20098,17 +19862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             class="bg-background/90 hover:bg-background text-foreground absolute top-4 right-4 z-10 rounded-full p-2 shadow-lg"
             aria-label="Close spotlight"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              class="size-5"
-            >
-              <path d="M18 6 6 18" />
-              <path d="m6 6 12 12" />
-            </svg>
+            <svg siXIcon class="size-5"></svg>
           </button>
         }
 
@@ -21082,6 +20836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class ScThemeField {
     elementRef = inject((ElementRef));
     id = input(inject(_IdGenerator).getId('sc-theme-field-'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    descriptionIds = signal([], ...(ngDevMode ? [{ debugName: "descriptionIds" }] : []));
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     role = computed(() => {
         const tagName = this.elementRef.nativeElement.tagName;
@@ -23590,6 +23345,7 @@ class ScVideoPlayerProgress {
     <input
       scSlider
       class="absolute inset-0 h-full [&::-moz-range-progress]:transition-[height] group-hover:[&::-moz-range-progress]:h-1.5 [&::-moz-range-track]:transition-[height] group-hover:[&::-moz-range-track]:h-1.5 [&::-webkit-slider-runnable-track]:transition-[height] group-hover:[&::-webkit-slider-runnable-track]:h-1.5"
+      aria-label="Video progress"
       min="0"
       max="100"
       step="0.1"
@@ -23597,7 +23353,7 @@ class ScVideoPlayerProgress {
       [style.--fill-percent]="player.progressPercent() + '%'"
       (input)="onSeek($event)"
     />
-  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class", "aria-describedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScVideoPlayerProgress, decorators: [{
             type: Component,
@@ -23614,6 +23370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
     <input
       scSlider
       class="absolute inset-0 h-full [&::-moz-range-progress]:transition-[height] group-hover:[&::-moz-range-progress]:h-1.5 [&::-moz-range-track]:transition-[height] group-hover:[&::-moz-range-track]:h-1.5 [&::-webkit-slider-runnable-track]:transition-[height] group-hover:[&::-webkit-slider-runnable-track]:h-1.5"
+      aria-label="Video progress"
       min="0"
       max="100"
       step="0.1"
@@ -23663,7 +23420,7 @@ class ScVideoPlayerVolume {
       (input)="onVolumeInput($event)"
       aria-label="Volume"
     />
-  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class", "aria-describedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScVideoPlayerVolume, decorators: [{
             type: Component,
@@ -24727,5 +24484,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthLayout, CHART_COLORS, COUNTRIES, DEFAULT_BREAKPOINTS, DEFAULT_CONFETTI_OPTIONS, DEFAULT_CONFIG, DEFAULT_COUNTER_OPTIONS, DEFAULT_DOCK_OPTIONS, DEFAULT_SEARCH_OPTIONS, DEFAULT_TOOLBAR_CONFIG, SC_AUDIO_PLAYER, SC_CHART, SC_COLOR_PICKER, SC_DATA_TABLE, SC_IMAGE_COMPARE, SC_IMAGE_CROPPER, SC_LANGUAGE_CONFIG, SC_LIGHTBOX, SC_NOTIFICATION_CENTER, SC_NUMBER_FIELD, SC_PASSWORD_FIELD, SC_PDF_VIEWER, SC_RATING_FIELD, SC_RATING_ITEM_GROUP, SC_SIGNATURE_PAD, SC_SORTABLE_ITEM, SC_SORTABLE_LIST, SC_STEPPER, SC_STEPPER_ITEM, SC_TAG_INPUT, SC_TIMEZONE_CONFIG, SC_TREE_ITEM, ScAnimatedCounter, ScAudioPlayer, ScAudioPlayerControls, ScAudioPlayerCover, ScAudioPlayerNext, ScAudioPlayerPlay, ScAudioPlayerPrevious, ScAudioPlayerProgress, ScAudioPlayerRepeat, ScAudioPlayerShuffle, ScAudioPlayerTrackInfo, ScAudioPlayerVolume, ScAutoMarquee, ScBarChart, ScBarcodeScanner, ScBarcodeScannerSimple, ScButtonPattern, ScChartContainer, ScChartLegend, ScChartTooltip, ScColorPicker, ScColorPickerArea, ScColorPickerEyeDropper, ScColorPickerHue, ScColorPickerInput, ScColorPickerPreview, ScColorPickerSwatches, ScCombobox, ScComboboxEmpty, ScComboboxIcon, ScComboboxInput, ScComboboxItem, ScComboboxItemIndicator, ScComboboxList, ScComboboxPortal, ScComboboxTrigger, ScCommand, ScCommandEmpty, ScCommandGroup, ScCommandGroupHeading, ScCommandInput, ScCommandItem, ScCommandList, ScCommandSeparator, ScCommandShortcut, ScConfetti, ScContextMenu, ScContextMenuContent, ScContextMenuItem, ScContextMenuLabel, ScContextMenuSeparator, ScContextMenuShortcut, ScContextMenuSub, ScContextMenuSubContent, ScContextMenuSubTrigger, ScContextMenuTrigger, ScCopyButton, ScCopyButtonWithText, ScCopyCode, ScCopyInput, ScCountdown, ScCountdownSimple, ScDataTable, ScDataTableBody, ScDataTableCell, ScDataTableColumnToggle, ScDataTableFilter, ScDataTableHead, ScDataTableHeader, ScDataTablePagination, ScDataTableRow, ScDateRangePicker, ScDiffViewer, ScDock, ScDockBadge, ScDockItem, ScDockItems, ScDonutChart, ScEmojiPicker, ScEmojiPickerTrigger, ScImageAnnotator, ScImageCompare, ScImageCompareAfter, ScImageCompareArea, ScImageCompareBefore, ScImageCompareLabel, ScImageCompareSlider, ScImageCropper, ScImageCropperAspectRatio, ScImageCropperCanvas, ScImageCropperDragRegion, ScImageCropperFileInput, ScImageCropperFlipH, ScImageCropperFlipV, ScImageCropperGrid, ScImageCropperHandle, ScImageCropperImage, ScImageCropperOverlay, ScImageCropperPreview, ScImageCropperReset, ScImageCropperRotateLeft, ScImageCropperRotateRight, ScImageCropperSelection, ScImageCropperZoomIn, ScImageCropperZoomOut, ScImageCropperZoomSlider, ScInfiniteScroll, ScInfiniteScrollEnd, ScInfiniteScrollLoader, ScKanbanBoard, ScKanbanCard, ScKanbanColumn, ScLanguageButton, ScLanguageSelect, ScLanguageService, ScLanguageToggle, ScLightboxDirective as ScLightbox, ScLightboxContainer, ScLightboxDirective, ScLightboxGallery, ScLightboxTrigger, ScLineChart, ScMarquee, ScMarqueeClone, ScMarqueeFade, ScMarqueeItem, ScMarqueeText, ScMasonryGrid, ScMasonryItem, ScMentionInput, ScMultiSelect, ScNativeCheckbox, ScNavbar, ScNavbarActions, ScNavbarBrand, ScNavbarGroup, ScNavbarMobileLink, ScNavbarMobileMenu, ScNavbarMobilePortal, ScNavbarMobileTrigger, ScNavbarProvider, ScNotificationCenterDirective as ScNotificationCenter, ScNotificationCenterContainer, ScNotificationCenterDirective, ScNotificationGroup, ScNotificationItem, ScNumberField, ScNumberFieldDecrement, ScNumberFieldIncrement, ScNumberFieldInput, ScNumberFieldInputGroup, ScNumberFieldScrubArea, ScOptField, ScOptFieldSeparator, ScOptFieldSlot, ScOptFieldSlotCaret, ScOptFieldSlotChar, ScOptFieldSlotGroup, ScOptFieldSlotInput, ScOrgChart, ScOrgChartNode, ScPasswordField, ScPasswordFieldInput, ScPasswordFieldInputGroup, ScPasswordFieldRequirements, ScPasswordFieldStrength, ScPasswordFieldStrengthBar, ScPasswordFieldToggle, ScPdfViewer, ScPdfViewerContainer, ScPdfViewerContent, ScPdfViewerDownload, ScPdfViewerEmpty, ScPdfViewerError, ScPdfViewerFullscreen, ScPdfViewerLoading, ScPdfViewerNav, ScPdfViewerNextPage, ScPdfViewerPageInfo, ScPdfViewerPrevPage, ScPdfViewerPrint, ScPdfViewerRetry, ScPdfViewerRoot, ScPdfViewerRotateLeft, ScPdfViewerRotateRight, ScPdfViewerSeparator, ScPdfViewerSpacer, ScPdfViewerToolbar$1 as ScPdfViewerToolbar, ScPdfViewerToolbar as ScPdfViewerToolbarLegacy, ScPdfViewerZoom, ScPdfViewerZoomIn, ScPdfViewerZoomOut, ScPdfViewerZoomSelect, ScPhoneInput, ScPhoneInputSimple, ScPieChart, ScQrCode, ScQrCodeDownload, ScRatingField, ScRatingFieldItem, ScRatingItemGroup, ScSearchInput, ScSidebarLayout, ScSignaturePad, ScSignaturePadCanvas, ScSignaturePadClearButton, ScSignaturePadColorButton, ScSignaturePadControls, ScSignaturePadToolbar, ScSignaturePadUndoButton, ScSignaturePadWidthButton, ScSortableHandle, ScSortableItem, ScSortableList, ScSortableOverlay, ScSpeedDial, ScSpeedDialAction, ScSplitButton, ScSpotlight, ScSpotlightActions, ScSpotlightDescription, ScSpotlightTitle, ScStackedLayout, ScStatCard, ScStatCardChange, ScStatCardDescription, ScStatCardIcon, ScStatCardLabel, ScStatCardValue, ScStepper, ScStepperContent, ScStepperDescription, ScStepperItem, ScStepperList, ScStepperNext, ScStepperPrevious, ScStepperSeparator, ScStepperTitle, ScStepperTrigger, ScTagInput, ScTagInputClear, ScTagInputCount, ScTagInputField, ScTagInputTag, ScTheme, ScThemeField, ScThemeSelect, ScThemeToggle, ScTimePickerClock, ScTimeline, ScTimelineConnector, ScTimelineContent, ScTimelineDescription, ScTimelineDot, ScTimelineItem, ScTimelineTime, ScTimelineTitle, ScTimezoneBadge, ScTimezoneButton, ScTimezoneDisplay, ScTimezoneSelect, ScTimezoneService, ScTourGuide, ScTransferList, ScTree, ScTreeItem, ScTreeItemGroup, ScTreeItemIcon, ScTreeItemTrigger, ScTreeItemTriggerIcon, ScVideoPlayer, ScVideoPlayerBigPlay, ScVideoPlayerBufferingIndicator, ScVideoPlayerControls, ScVideoPlayerFullscreen, ScVideoPlayerPip, ScVideoPlayerPlayPause, ScVideoPlayerProgress, ScVideoPlayerSkip, ScVideoPlayerSpacer, ScVideoPlayerSpeed, ScVideoPlayerTime, ScVideoPlayerToolbar, ScVideoPlayerVideo, ScVideoPlayerVolume, ScVirtualList, ScVirtualScroll, TourService, ZOOM_LEVELS, computeDiff, computeWordDiff, createScDateRangePresets, createUnifiedDiff, getCountryByCode, getCountryByDialCode, sizeStyles$1 as sizeStyles, variantStyles$1 as variantStyles };
+export { AuthLayout, CHART_COLORS, COUNTRIES, DEFAULT_BREAKPOINTS, DEFAULT_CONFETTI_OPTIONS, DEFAULT_CONFIG, DEFAULT_COUNTER_OPTIONS, DEFAULT_DOCK_OPTIONS, DEFAULT_SEARCH_OPTIONS, DEFAULT_TOOLBAR_CONFIG, SC_AUDIO_PLAYER, SC_CHART, SC_COLOR_PICKER, SC_DATA_TABLE, SC_IMAGE_COMPARE, SC_IMAGE_CROPPER, SC_LANGUAGE_CONFIG, SC_LIGHTBOX, SC_NOTIFICATION_CENTER, SC_NUMBER_FIELD, SC_PASSWORD_FIELD, SC_PDF_VIEWER, SC_RATING_FIELD, SC_RATING_ITEM_GROUP, SC_SIGNATURE_PAD, SC_SORTABLE_ITEM, SC_SORTABLE_LIST, SC_STEPPER, SC_STEPPER_ITEM, SC_TAG_INPUT, SC_TIMEZONE_CONFIG, SC_TREE_ITEM, ScAnimatedCounter, ScAudioPlayer, ScAudioPlayerControls, ScAudioPlayerCover, ScAudioPlayerNext, ScAudioPlayerPlay, ScAudioPlayerPrevious, ScAudioPlayerProgress, ScAudioPlayerRepeat, ScAudioPlayerShuffle, ScAudioPlayerTrackInfo, ScAudioPlayerVolume, ScAutoMarquee, ScBarChart, ScBarcodeScanner, ScBarcodeScannerSimple, ScButtonPattern, ScChartContainer, ScChartLegend, ScChartTooltip, ScColorPicker, ScColorPickerArea, ScColorPickerEyeDropper, ScColorPickerHue, ScColorPickerInput, ScColorPickerPreview, ScColorPickerSwatches, ScCombobox, ScComboboxEmpty, ScComboboxIcon, ScComboboxInput, ScComboboxItem, ScComboboxItemIndicator, ScComboboxList, ScComboboxPortal, ScComboboxTrigger, ScCommand, ScCommandEmpty, ScCommandGroup, ScCommandGroupHeading, ScCommandInput, ScCommandItem, ScCommandList, ScCommandSeparator, ScCommandShortcut, ScConfetti, ScContextMenu, ScContextMenuContent, ScContextMenuItem, ScContextMenuLabel, ScContextMenuSeparator, ScContextMenuShortcut, ScContextMenuSub, ScContextMenuSubContent, ScContextMenuSubTrigger, ScContextMenuTrigger, ScCountdown, ScCountdownSimple, ScDataTable, ScDataTableBody, ScDataTableCell, ScDataTableColumnToggle, ScDataTableFilter, ScDataTableHead, ScDataTableHeader, ScDataTablePagination, ScDataTableRow, ScDateRangePicker, ScDiffViewer, ScDock, ScDockBadge, ScDockItem, ScDockItems, ScDonutChart, ScEmojiPicker, ScEmojiPickerTrigger, ScImageAnnotator, ScImageCompare, ScImageCompareAfter, ScImageCompareArea, ScImageCompareBefore, ScImageCompareLabel, ScImageCompareSlider, ScImageCropper, ScImageCropperAspectRatio, ScImageCropperCanvas, ScImageCropperDragRegion, ScImageCropperFileInput, ScImageCropperFlipH, ScImageCropperFlipV, ScImageCropperGrid, ScImageCropperHandle, ScImageCropperImage, ScImageCropperOverlay, ScImageCropperPreview, ScImageCropperReset, ScImageCropperRotateLeft, ScImageCropperRotateRight, ScImageCropperSelection, ScImageCropperZoomIn, ScImageCropperZoomOut, ScImageCropperZoomSlider, ScInfiniteScroll, ScInfiniteScrollEnd, ScInfiniteScrollLoader, ScKanbanBoard, ScKanbanCard, ScKanbanColumn, ScLanguageButton, ScLanguageSelect, ScLanguageService, ScLanguageToggle, ScLightboxDirective as ScLightbox, ScLightboxContainer, ScLightboxDirective, ScLightboxGallery, ScLightboxTrigger, ScLineChart, ScMarquee, ScMarqueeClone, ScMarqueeFade, ScMarqueeItem, ScMarqueeText, ScMasonryGrid, ScMasonryItem, ScMentionInput, ScMultiSelect, ScNativeCheckbox, ScNavbar, ScNavbarActions, ScNavbarBrand, ScNavbarGroup, ScNavbarMobileLink, ScNavbarMobileMenu, ScNavbarMobilePortal, ScNavbarMobileTrigger, ScNavbarProvider, ScNotificationCenterDirective as ScNotificationCenter, ScNotificationCenterContainer, ScNotificationCenterDirective, ScNotificationGroup, ScNotificationItem, ScNumberField, ScNumberFieldDecrement, ScNumberFieldIncrement, ScNumberFieldInput, ScNumberFieldInputGroup, ScNumberFieldScrubArea, ScOptField, ScOptFieldSeparator, ScOptFieldSlot, ScOptFieldSlotCaret, ScOptFieldSlotChar, ScOptFieldSlotGroup, ScOptFieldSlotInput, ScOrgChart, ScOrgChartNode, ScPasswordField, ScPasswordFieldInput, ScPasswordFieldInputGroup, ScPasswordFieldRequirements, ScPasswordFieldStrength, ScPasswordFieldStrengthBar, ScPasswordFieldToggle, ScPdfViewer, ScPdfViewerContainer, ScPdfViewerContent, ScPdfViewerDownload, ScPdfViewerEmpty, ScPdfViewerError, ScPdfViewerFullscreen, ScPdfViewerLoading, ScPdfViewerNav, ScPdfViewerNextPage, ScPdfViewerPageInfo, ScPdfViewerPrevPage, ScPdfViewerPrint, ScPdfViewerRetry, ScPdfViewerRoot, ScPdfViewerRotateLeft, ScPdfViewerRotateRight, ScPdfViewerSeparator, ScPdfViewerSpacer, ScPdfViewerToolbar$1 as ScPdfViewerToolbar, ScPdfViewerToolbar as ScPdfViewerToolbarLegacy, ScPdfViewerZoom, ScPdfViewerZoomIn, ScPdfViewerZoomOut, ScPdfViewerZoomSelect, ScPhoneInput, ScPhoneInputSimple, ScPieChart, ScQrCode, ScQrCodeDownload, ScRatingField, ScRatingFieldItem, ScRatingItemGroup, ScSearchInput, ScSidebarLayout, ScSignaturePad, ScSignaturePadCanvas, ScSignaturePadClearButton, ScSignaturePadColorButton, ScSignaturePadControls, ScSignaturePadToolbar, ScSignaturePadUndoButton, ScSignaturePadWidthButton, ScSortableHandle, ScSortableItem, ScSortableList, ScSortableOverlay, ScSpeedDial, ScSpeedDialAction, ScSplitButton, ScSpotlight, ScSpotlightActions, ScSpotlightDescription, ScSpotlightTitle, ScStackedLayout, ScStatCard, ScStatCardChange, ScStatCardDescription, ScStatCardIcon, ScStatCardLabel, ScStatCardValue, ScStepper, ScStepperContent, ScStepperDescription, ScStepperItem, ScStepperList, ScStepperNext, ScStepperPrevious, ScStepperSeparator, ScStepperTitle, ScStepperTrigger, ScTagInput, ScTagInputClear, ScTagInputCount, ScTagInputField, ScTagInputTag, ScTheme, ScThemeField, ScThemeSelect, ScThemeToggle, ScTimePickerClock, ScTimeline, ScTimelineConnector, ScTimelineContent, ScTimelineDescription, ScTimelineDot, ScTimelineItem, ScTimelineTime, ScTimelineTitle, ScTimezoneBadge, ScTimezoneButton, ScTimezoneDisplay, ScTimezoneSelect, ScTimezoneService, ScTourGuide, ScTransferList, ScTree, ScTreeItem, ScTreeItemGroup, ScTreeItemIcon, ScTreeItemTrigger, ScTreeItemTriggerIcon, ScVideoPlayer, ScVideoPlayerBigPlay, ScVideoPlayerBufferingIndicator, ScVideoPlayerControls, ScVideoPlayerFullscreen, ScVideoPlayerPip, ScVideoPlayerPlayPause, ScVideoPlayerProgress, ScVideoPlayerSkip, ScVideoPlayerSpacer, ScVideoPlayerSpeed, ScVideoPlayerTime, ScVideoPlayerToolbar, ScVideoPlayerVideo, ScVideoPlayerVolume, ScVirtualList, ScVirtualScroll, TourService, ZOOM_LEVELS, computeDiff, computeWordDiff, createScDateRangePresets, createUnifiedDiff, getCountryByCode, getCountryByDialCode, sizeStyles$1 as sizeStyles, variantStyles$1 as variantStyles };
 //# sourceMappingURL=semantic-components-ui-lab.mjs.map