@semantic-components/ui-lab 0.73.0 → 0.74.0

package/README.md

@@ -10,5 +10,5 @@ Experimental and extended UI components and layouts for the Semantic Components
 ## Usage
 
 ```ts
-import { ScAlert, ScTable, ScSidebar } from '@semantic-components/ui-lab';
+import { ScAlert, ScSidebar, ScTable } from '@semantic-components/ui-lab';
 ```

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

@@ -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,
@@ -8915,7 +8917,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 +8931,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 +9110,7 @@ class ScImageCropperZoomSlider {
     <input
       #sliderEl
       scSlider
+      aria-label="Zoom level"
       [min]="0.1"
       [max]="3"
       [step]="0.1"
@@ -9116,7 +9120,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 +9131,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 +9420,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 +9700,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 +9790,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 +9905,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 +14060,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 +14306,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 +14317,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 +14720,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 +14812,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 +14840,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 +14849,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 +18378,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 +18854,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 +18998,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 +19011,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 +19023,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 +19133,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 +19144,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 +19162,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 +19178,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 +19196,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');
@@ -21082,6 +21101,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 +23610,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 +23618,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 +23635,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 +23685,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,