@semantic-components/ui 0.12.0 → 0.13.0

package/fesm2022/semantic-components-ui.mjs

@@ -1,44 +1,38 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { signal, inject, LOCALE_ID, Injectable, input, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Directive, HostListener, ChangeDetectorRef, viewChild, afterNextRender, forwardRef, ViewContainerRef, contentChildren, model, output, effect, linkedSignal, Injector, booleanAttribute, untracked, viewChildren } from '@angular/core';
+import { signal, inject, LOCALE_ID, Injectable, input, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Directive, HostListener, ChangeDetectorRef, viewChild, afterNextRender, forwardRef, booleanAttribute, ViewContainerRef, contentChildren, effect, Injector, model, untracked, output, linkedSignal, viewChildren } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormArray, NgForm, FormGroupDirective, NgControl, FormBuilder, FormsModule } from '@angular/forms';
+import { cn } from '@semantic-components/utils';
 import { Editor } from '@tiptap/core';
 import Document from '@tiptap/extension-document';
 import Heading from '@tiptap/extension-heading';
 import Paragraph from '@tiptap/extension-paragraph';
 import Text from '@tiptap/extension-text';
 import { cva } from 'class-variance-authority';
-import { SvgQuoteIcon, SvgBoldIcon, SvgListIcon, SvgCodeIcon, SvgPaletteIcon, SvgHighlighterIcon, SvgUndoIcon, SvgRedoIcon, SvgMinusIcon, SvgItalicIcon, SvgListOrderedIcon, SvgStrikethroughIcon, SvgAlignLeftIcon, SvgAlignRightIcon, SvgAlignCenterIcon, SvgUnderlineIcon, SvgCheckIcon, SvgChevronDownIcon, SvgEllipsisIcon, SvgChevronLeftIcon, SvgChevronsLeftIcon, SvgChevronRightIcon, SvgChevronsRightIcon, SvgCalendarIcon, SvgMoonIcon, SvgSunIcon, SvgXIcon, SvgChevronUpIcon, SvgCircleIcon, SvgDotIcon, SvgSearchIcon, SvgClockIcon } from '@semantic-icons/lucide-icons';
-import { Overlay, OverlayModule, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
+import { SvgRedoIcon, SvgAlignCenterIcon, SvgAlignLeftIcon, SvgAlignRightIcon, SvgUndoIcon, SvgUnlinkIcon, SvgQuoteIcon, SvgBoldIcon, SvgListIcon, SvgCodeIcon, SvgPaletteIcon, SvgHighlighterIcon, SvgMinusIcon, SvgItalicIcon, SvgListOrderedIcon, SvgStrikethroughIcon, SvgUnderlineIcon, SvgCheckIcon, SvgChevronDownIcon, SvgEllipsisIcon, SvgChevronLeftIcon, SvgChevronsLeftIcon, SvgChevronRightIcon, SvgChevronsRightIcon, SvgCalendarIcon, SvgMoonIcon, SvgSunIcon, SvgXIcon, SvgChevronUpIcon, SvgCircleIcon, SvgDotIcon, SvgSearchIcon, SvgClockIcon, SvgFileTextIcon, SvgUploadIcon, SvgCookieIcon } from '@semantic-icons/lucide-icons';
+import { Overlay, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
-import * as i1$5 from '@angular/cdk/menu';
+import { Dialog, DialogRef, DialogModule } from '@angular/cdk/dialog';
+import * as i1$3 from '@angular/cdk/menu';
 import { CdkMenuTrigger, CdkMenu, CdkMenuItem, CdkContextMenuTrigger, CdkMenuItemCheckbox, CdkMenuGroup, CdkMenuItemRadio, CdkMenuBar } from '@angular/cdk/menu';
-import { DialogRef, Dialog, DialogModule } from '@angular/cdk/dialog';
-import * as i1$1 from '@angular/cdk/a11y';
-import { A11yModule, FocusMonitor, ActiveDescendantKeyManager, _IdGenerator } from '@angular/cdk/a11y';
+import { _IdGenerator, ActiveDescendantKeyManager, FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
-import { TAB, ESCAPE, hasModifierKey, ENTER } from '@angular/cdk/keycodes';
-import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
+import { hasModifierKey, ENTER, TAB, ESCAPE } from '@angular/cdk/keycodes';
 import { _getEventTarget } from '@angular/cdk/platform';
-import * as i1$3 from '@angular/common';
-import { NgClass, DOCUMENT, NgTemplateOutlet, CommonModule, AsyncPipe, JsonPipe, NgOptimizedImage } from '@angular/common';
-import * as i1$2 from 'ngx-scrollbar';
-import { NgScrollbarModule } from 'ngx-scrollbar';
+import * as i1$1 from '@angular/common';
+import { NgClass, DOCUMENT, NgTemplateOutlet, CommonModule, AsyncPipe, JsonPipe } from '@angular/common';
 import EmblaCarousel from 'embla-carousel';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i1$4 from '@angular/cdk/accordion';
+import * as i1$2 from '@angular/cdk/accordion';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { Subject, debounceTime } from 'rxjs';
+import { Subject, debounceTime, catchError, throwError } from 'rxjs';
 import { BreakpointObserver, LayoutModule } from '@angular/cdk/layout';
-
-function cn(...inputs) {
-    return twMerge(clsx(inputs));
-}
+import { HttpEventType, HttpResponse } from '@angular/common/http';
+import { DataService } from '@semantic-components/supabase';
 
 class ScSettings {
+    clock = signal('am-pm');
     dateFormatPattern = signal('');
     localeId = inject(LOCALE_ID);
     constructor() {
@@ -75,27 +69,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class ScSeparator {
+    orientation = input('horizontal');
+    class = input('');
+    _class = computed(() => cn('block shrink-0 bg-border', this.orientation() === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScSeparator, isStandalone: true, selector: "sc-separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSeparator, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-separator', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
 const scHeadingVariants = cva('', {
     variants: {
         level: {
-            1: 'text-4xl font-extrabold tracking-tight lg:text-5xl',
-            2: 'text-3xl font-semibold tracking-tight',
-            3: 'text-2xl font-semibold tracking-tight',
-            4: 'text-xl font-semibold tracking-tight',
-            5: '',
-            6: '',
+            '1': 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl',
+            '2': 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0',
+            '3': 'scroll-m-20 text-2xl font-semibold tracking-tight',
+            '4': 'scroll-m-20 text-xl font-semibold tracking-tight',
+            '5': '',
+            '6': '',
         },
     },
     defaultVariants: {
-        level: 1,
+        level: '1',
     },
 });
 class ScHeading {
-    level = input(1);
-    class = input('');
-    classes = computed(() => cn(scHeadingVariants({ level: this.level() }), this.class()));
+    level = input('1');
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn(scHeadingVariants({ level: this.level() }), this.classInput()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScHeading, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScHeading, isStandalone: true, selector: "h1[sc-heading], h2[sc-heading], h3[sc-heading], h4[sc-heading], h5[sc-heading], h6[sc-heading]", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScHeading, isStandalone: true, selector: "h1[sc-heading], h2[sc-heading], h3[sc-heading], h4[sc-heading], h5[sc-heading], h6[sc-heading]", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -104,7 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ selector: 'h1[sc-heading], h2[sc-heading], h3[sc-heading], h4[sc-heading], h5[sc-heading], h6[sc-heading]', imports: [], template: `
     <ng-content />
   `, host: {
-                        '[class]': 'classes()',
+                        '[class]': 'class()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
@@ -126,7 +140,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-const toggleVariants = cva('inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_.svg]:pointer-events-none [&_.svg]:size-4 [&_.svg]:shrink-0', {
+class ScBlockquote {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScBlockquote, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScBlockquote, isStandalone: true, selector: "blockquote[sc-blockquote]", host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScBlockquote, decorators: [{
+            type: Component,
+            args: [{ selector: 'blockquote[sc-blockquote]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+const toggleVariants = cva('inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         variant: {
             default: 'bg-transparent',
@@ -298,11 +327,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class ScExtensions {
+    //history extension
+    undo = signal(false);
+    redo = signal(false);
+    history = computed(() => this.undo() || this.redo());
+    //link extension
+    setLink = signal(false);
+    unsetLink = signal(false);
+    link = computed(() => this.setLink() || this.unsetLink());
+    //text align extension
+    textAlignRight = signal(false);
+    textAlignLeft = signal(false);
+    textAlignCenter = signal(false);
+    textAlign = computed(() => this.textAlignRight() || this.textAlignLeft() || this.textAlignCenter());
+    //
     highlight = signal(false);
     color = signal(false);
     underline = signal(false);
-    link = signal(false);
-    textAlign = signal(false);
     fontFamily = signal(false);
     bold = signal(false);
     youtube = signal(false);
@@ -315,7 +356,6 @@ class ScExtensions {
     orderedList = signal(false);
     horizontalRule = signal(false);
     textStyle = signal(false);
-    history = signal(false);
     table = signal(false);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensions, providedIn: 'root' });
@@ -327,270 +367,577 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
-class ScExtensionBlockquote {
-    ariaLabel = 'Toggle blockquote';
+class ScEditorRedo {
+    ariaLabel = 'Redo';
     parent = inject(ScEditor, { host: true });
     extensions = inject(ScExtensions);
     constructor() {
-        this.extensions.blockquote.set(true);
+        this.extensions.redo.set(true);
     }
     get editor() {
         return this.parent.editor;
     }
-    toggleBlockquote() {
-        this.editor.chain().focus().toggleBlockquote().run();
+    redo() {
+        this.editor.chain().focus().redo().run();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBlockquote, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionBlockquote, isStandalone: true, selector: "sc-extension-blockquote", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorRedo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScEditorRedo, isStandalone: true, selector: "sc-editor-redo", ngImport: i0, template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleBlockquote()"
+      (click)="redo()"
       sc-toggle
       variant="outline"
       type="button"
     >
-      <svg-quote-icon />
+      <svg-redo-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgQuoteIcon, selector: "svg-quote-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgRedoIcon, selector: "svg-redo-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBlockquote, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorRedo, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-extension-blockquote', imports: [ScTooltip, ScToggle, SvgQuoteIcon], template: `
+            args: [{ selector: 'sc-editor-redo', imports: [ScTooltip, ScToggle, SvgRedoIcon], template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleBlockquote()"
+      (click)="redo()"
       sc-toggle
       variant="outline"
       type="button"
     >
-      <svg-quote-icon />
+      <svg-redo-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-class ScExtensionBold {
-    ariaLabel = 'Toggle Bold';
+class ScEditorTextAlignCenter {
+    ariaLabel = 'Align center';
     parent = inject(ScEditor, { host: true });
     extensions = inject(ScExtensions);
     constructor() {
-        this.extensions.bold.set(true);
+        this.extensions.textAlignCenter.set(true);
     }
     get editor() {
         return this.parent.editor;
     }
-    toggleBold() {
-        this.editor.chain().focus().toggleBold().run();
+    setCenterAlign() {
+        this.editor.chain().focus().setTextAlign('center').run();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBold, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionBold, isStandalone: true, selector: "sc-extension-bold", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorTextAlignCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScEditorTextAlignCenter, isStandalone: true, selector: "sc-editor-text-align-center", ngImport: i0, template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleBold()"
+      (click)="setCenterAlign()"
+      type="button"
+      sc-toggle
+      variant="outline"
+    >
+      <svg-align-center-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgAlignCenterIcon, selector: "svg-align-center-icon", inputs: ["class"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorTextAlignCenter, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-editor-text-align-center', imports: [ScTooltip, SvgAlignCenterIcon, ScToggle], template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="setCenterAlign()"
+      type="button"
       sc-toggle
       variant="outline"
+    >
+      <svg-align-center-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+
+class ScEditorTextAlignLeft {
+    ariaLabel = 'Align left';
+    parent = inject(ScEditor, { host: true });
+    extensions = inject(ScExtensions);
+    constructor() {
+        this.extensions.textAlignLeft.set(true);
+    }
+    get editor() {
+        return this.parent.editor;
+    }
+    setLeftAlign() {
+        this.editor.chain().focus().setTextAlign('left').run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorTextAlignLeft, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScEditorTextAlignLeft, isStandalone: true, selector: "sc-editor-text-align-left", ngImport: i0, template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="setLeftAlign()"
       type="button"
+      sc-toggle
+      variant="outline"
     >
-      <svg-bold-icon />
+      <svg-align-left-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgBoldIcon, selector: "svg-bold-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgAlignLeftIcon, selector: "svg-align-left-icon", inputs: ["class"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBold, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorTextAlignLeft, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-extension-bold', imports: [ScTooltip, ScToggle, SvgBoldIcon], template: `
+            args: [{ selector: 'sc-editor-text-align-left', imports: [ScTooltip, SvgAlignLeftIcon, ScToggle], template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleBold()"
+      (click)="setLeftAlign()"
+      type="button"
       sc-toggle
       variant="outline"
+    >
+      <svg-align-left-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+
+class ScEditorTextAlignRight {
+    ariaLabel = 'Align right';
+    parent = inject(ScEditor, { host: true });
+    extensions = inject(ScExtensions);
+    constructor() {
+        this.extensions.textAlignRight.set(true);
+    }
+    get editor() {
+        return this.parent.editor;
+    }
+    setRightAlign() {
+        this.editor.chain().focus().setTextAlign('right').run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorTextAlignRight, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScEditorTextAlignRight, isStandalone: true, selector: "sc-editor-text-align-right", ngImport: i0, template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="setRightAlign()"
       type="button"
+      sc-toggle
+      variant="outline"
     >
-      <svg-bold-icon />
+      <svg-align-right-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgAlignRightIcon, selector: "svg-align-right-icon", inputs: ["class"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorTextAlignRight, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-editor-text-align-right', imports: [ScTooltip, SvgAlignRightIcon, ScToggle], template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="setRightAlign()"
+      type="button"
+      sc-toggle
+      variant="outline"
+    >
+      <svg-align-right-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-class ScExtensionBulletList {
-    ariaLabel = 'Toggle List';
+class ScEditorUndo {
+    ariaLabel = 'Undo';
     parent = inject(ScEditor, { host: true });
     extensions = inject(ScExtensions);
     constructor() {
-        this.extensions.bulletList.set(true);
+        this.extensions.undo.set(true);
     }
     get editor() {
         return this.parent.editor;
     }
-    toggleBulletList() {
-        this.editor.chain().focus().toggleBulletList().run();
+    undo() {
+        this.editor.chain().focus().undo().run();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionBulletList, isStandalone: true, selector: "sc-extension-bullet-list", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorUndo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScEditorUndo, isStandalone: true, selector: "sc-editor-undo", ngImport: i0, template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleBulletList()"
+      (click)="undo()"
       sc-toggle
       variant="outline"
       type="button"
     >
-      <svg-list-icon />
+      <svg-undo-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgListIcon, selector: "svg-list-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgUndoIcon, selector: "svg-undo-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBulletList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorUndo, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-extension-bullet-list', imports: [ScTooltip, ScToggle, SvgListIcon], template: `
+            args: [{ selector: 'sc-editor-undo', imports: [ScTooltip, ScToggle, SvgUndoIcon], template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleBulletList()"
+      (click)="undo()"
       sc-toggle
       variant="outline"
       type="button"
     >
-      <svg-list-icon />
+      <svg-undo-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-class ScExtensionCode {
-    ariaLabel = 'Format code';
+class ScEditorUnsetLink {
+    ariaLabel = 'Unset Link';
     parent = inject(ScEditor, { host: true });
+    dialog = inject(Dialog);
     extensions = inject(ScExtensions);
     constructor() {
-        this.extensions.code.set(true);
+        this.extensions.unsetLink.set(true);
     }
     get editor() {
         return this.parent.editor;
     }
-    toggleCode() {
-        this.editor.chain().focus().toggleCode().run();
+    unsetLink() {
+        this.editor.chain().focus().unsetLink().run();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionCode, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionCode, isStandalone: true, selector: "sc-extension-code", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorUnsetLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScEditorUnsetLink, isStandalone: true, selector: "sc-editor-unset-link", ngImport: i0, template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleCode()"
+      (click)="unsetLink()"
       sc-toggle
       variant="outline"
       type="button"
     >
-      <svg-code-icon />
+      <svg-unlink-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgCodeIcon, selector: "svg-code-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgUnlinkIcon, selector: "svg-unlink-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionCode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorUnsetLink, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-extension-code', imports: [ScTooltip, SvgCodeIcon, ScToggle], template: `
+            args: [{ selector: 'sc-editor-unset-link', imports: [ScTooltip, ScToggle, SvgUnlinkIcon], template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleCode()"
+      (click)="unsetLink()"
       sc-toggle
       variant="outline"
       type="button"
     >
-      <svg-code-icon />
+      <svg-unlink-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-const allColors = {
-    slate: {
-        50: '#f8fafc',
-        100: '#f1f5f9',
-        200: '#e2e8f0',
-        300: '#cbd5e1',
-        400: '#94a3b8',
-        500: '#64748b',
-        600: '#475569',
-        700: '#334155',
-        800: '#1e293b',
-        900: '#0f172a',
-        950: '#020617',
-    },
-    gray: {
-        50: '#f9fafb',
-        100: '#f3f4f6',
-        200: '#e5e7eb',
-        300: '#d1d5db',
-        400: '#9ca3af',
-        500: '#6b7280',
-        600: '#4b5563',
-        700: '#374151',
-        800: '#1f2937',
-        900: '#111827',
-        950: '#030712',
-    },
-    zinc: {
-        50: '#fafafa',
-        100: '#f4f4f5',
-        200: '#e4e4e7',
-        300: '#d4d4d8',
-        400: '#a1a1aa',
-        500: '#71717a',
-        600: '#52525b',
-        700: '#3f3f46',
-        800: '#27272a',
-        900: '#18181b',
-        950: '#09090b',
-    },
-    neutral: {
-        50: '#fafafa',
-        100: '#f5f5f5',
-        200: '#e5e5e5',
-        300: '#d4d4d4',
-        400: '#a3a3a3',
-        500: '#737373',
-        600: '#525252',
-        700: '#404040',
-        800: '#262626',
-        900: '#171717',
-        950: '#0a0a0a',
-    },
-    stone: {
-        50: '#fafaf9',
-        100: '#f5f5f4',
-        200: '#e7e5e4',
-        300: '#d6d3d1',
-        400: '#a8a29e',
-        500: '#78716c',
-        600: '#57534e',
-        700: '#44403c',
-        800: '#292524',
-        900: '#1c1917',
-        950: '#0c0a09',
-    },
-    red: {
-        50: '#fef2f2',
-        100: '#fee2e2',
-        200: '#fecaca',
-        300: '#fca5a5',
-        400: '#f87171',
-        500: '#ef4444',
-        600: '#dc2626',
-        700: '#b91c1c',
-        800: '#991b1b',
-        900: '#7f1d1d',
-        950: '#450a0a',
-    },
-    orange: {
-        50: '#fff7ed',
-        100: '#ffedd5',
-        200: '#fed7aa',
-        300: '#fdba74',
+class ScEditorGroup {
+    class = input('');
+    //TODO change styles
+    _class = computed(() => cn('flex flex-wrap items-center gap-1 py-1', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScEditorGroup, isStandalone: true, selector: "sc-editor-group", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-editor-group', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScEditorToolbar {
+    class = input('');
+    //TODO change styles to fit shadcn
+    _class = computed(() => cn('block border-b px-3 py-1 dark:border-gray-600', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScEditorToolbar, isStandalone: true, selector: "sc-editor-toolbar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorToolbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-editor-toolbar', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScExtensionBlockquote {
+    ariaLabel = 'Toggle blockquote';
+    parent = inject(ScEditor, { host: true });
+    extensions = inject(ScExtensions);
+    constructor() {
+        this.extensions.blockquote.set(true);
+    }
+    get editor() {
+        return this.parent.editor;
+    }
+    toggleBlockquote() {
+        this.editor.chain().focus().toggleBlockquote().run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBlockquote, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionBlockquote, isStandalone: true, selector: "sc-extension-blockquote", ngImport: i0, template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleBlockquote()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-quote-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgQuoteIcon, selector: "svg-quote-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBlockquote, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-extension-blockquote', imports: [ScTooltip, ScToggle, SvgQuoteIcon], template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleBlockquote()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-quote-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+
+class ScExtensionBold {
+    ariaLabel = 'Toggle Bold';
+    parent = inject(ScEditor, { host: true });
+    extensions = inject(ScExtensions);
+    constructor() {
+        this.extensions.bold.set(true);
+    }
+    get editor() {
+        return this.parent.editor;
+    }
+    toggleBold() {
+        this.editor.chain().focus().toggleBold().run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBold, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionBold, isStandalone: true, selector: "sc-extension-bold", ngImport: i0, template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleBold()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-bold-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgBoldIcon, selector: "svg-bold-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBold, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-extension-bold', imports: [ScTooltip, ScToggle, SvgBoldIcon], template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleBold()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-bold-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+
+class ScExtensionBulletList {
+    ariaLabel = 'Toggle List';
+    parent = inject(ScEditor, { host: true });
+    extensions = inject(ScExtensions);
+    constructor() {
+        this.extensions.bulletList.set(true);
+    }
+    get editor() {
+        return this.parent.editor;
+    }
+    toggleBulletList() {
+        this.editor.chain().focus().toggleBulletList().run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionBulletList, isStandalone: true, selector: "sc-extension-bullet-list", ngImport: i0, template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleBulletList()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-list-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgListIcon, selector: "svg-list-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBulletList, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-extension-bullet-list', imports: [ScTooltip, ScToggle, SvgListIcon], template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleBulletList()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-list-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+
+class ScExtensionCode {
+    ariaLabel = 'Format code';
+    parent = inject(ScEditor, { host: true });
+    extensions = inject(ScExtensions);
+    constructor() {
+        this.extensions.code.set(true);
+    }
+    get editor() {
+        return this.parent.editor;
+    }
+    toggleCode() {
+        this.editor.chain().focus().toggleCode().run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionCode, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionCode, isStandalone: true, selector: "sc-extension-code", ngImport: i0, template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleCode()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-code-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgCodeIcon, selector: "svg-code-icon", inputs: ["class"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionCode, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-extension-code', imports: [ScTooltip, SvgCodeIcon, ScToggle], template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleCode()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-code-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+
+const allColors = {
+    slate: {
+        50: '#f8fafc',
+        100: '#f1f5f9',
+        200: '#e2e8f0',
+        300: '#cbd5e1',
+        400: '#94a3b8',
+        500: '#64748b',
+        600: '#475569',
+        700: '#334155',
+        800: '#1e293b',
+        900: '#0f172a',
+        950: '#020617',
+    },
+    gray: {
+        50: '#f9fafb',
+        100: '#f3f4f6',
+        200: '#e5e7eb',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827',
+        950: '#030712',
+    },
+    zinc: {
+        50: '#fafafa',
+        100: '#f4f4f5',
+        200: '#e4e4e7',
+        300: '#d4d4d8',
+        400: '#a1a1aa',
+        500: '#71717a',
+        600: '#52525b',
+        700: '#3f3f46',
+        800: '#27272a',
+        900: '#18181b',
+        950: '#09090b',
+    },
+    neutral: {
+        50: '#fafafa',
+        100: '#f5f5f5',
+        200: '#e5e5e5',
+        300: '#d4d4d4',
+        400: '#a3a3a3',
+        500: '#737373',
+        600: '#525252',
+        700: '#404040',
+        800: '#262626',
+        900: '#171717',
+        950: '#0a0a0a',
+    },
+    stone: {
+        50: '#fafaf9',
+        100: '#f5f5f4',
+        200: '#e7e5e4',
+        300: '#d6d3d1',
+        400: '#a8a29e',
+        500: '#78716c',
+        600: '#57534e',
+        700: '#44403c',
+        800: '#292524',
+        900: '#1c1917',
+        950: '#0c0a09',
+    },
+    red: {
+        50: '#fef2f2',
+        100: '#fee2e2',
+        200: '#fecaca',
+        300: '#fca5a5',
+        400: '#f87171',
+        500: '#ef4444',
+        600: '#dc2626',
+        700: '#b91c1c',
+        800: '#991b1b',
+        900: '#7f1d1d',
+        950: '#450a0a',
+    },
+    orange: {
+        50: '#fff7ed',
+        100: '#ffedd5',
+        200: '#fed7aa',
+        300: '#fdba74',
         400: '#fb923c',
         500: '#f97316',
         600: '#ea580c',
@@ -874,7 +1221,7 @@ class ScExtensionColor {
         </button>
       </div>
     </ng-template>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgPaletteIcon, selector: "svg-palette-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgPaletteIcon, selector: "svg-palette-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionColor, decorators: [{
             type: Component,
@@ -1691,7 +2038,7 @@ class ScExtensionHighlight {
       <svg-highlighter-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgHighlighterIcon, selector: "svg-highlighter-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgHighlighterIcon, selector: "svg-highlighter-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionHighlight, decorators: [{
             type: Component,
@@ -1710,79 +2057,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-class ScExtensionHistory {
-    ariaLabel1 = 'Undo';
-    ariaLabel2 = 'Redo';
-    parent = inject(ScEditor, { host: true });
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.history.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    undo() {
-        this.editor.chain().focus().undo().run();
-    }
-    redo() {
-        this.editor.chain().focus().redo().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionHistory, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionHistory, isStandalone: true, selector: "sc-extension-history", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel1"
-      [scTooltip]="ariaLabel1"
-      (click)="undo()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg-undo-icon />
-      <span class="sr-only">{{ ariaLabel1 }}</span>
-    </button>
-
-    <button
-      [attr.aria-label]="ariaLabel2"
-      [scTooltip]="ariaLabel2"
-      (click)="redo()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg-redo-icon />
-      <span class="sr-only">{{ ariaLabel2 }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgUndoIcon, selector: "svg-undo-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgRedoIcon, selector: "svg-redo-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionHistory, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extension-history', imports: [ScTooltip, ScToggle, SvgUndoIcon, SvgRedoIcon], template: `
-    <button
-      [attr.aria-label]="ariaLabel1"
-      [scTooltip]="ariaLabel1"
-      (click)="undo()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg-undo-icon />
-      <span class="sr-only">{{ ariaLabel1 }}</span>
-    </button>
-
-    <button
-      [attr.aria-label]="ariaLabel2"
-      [scTooltip]="ariaLabel2"
-      (click)="redo()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg-redo-icon />
-      <span class="sr-only">{{ ariaLabel2 }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
 class ScExtensionHorizontalRule {
     ariaLabel = 'Toggle Horizontal Rule';
     parent = inject(ScEditor, { host: true });
@@ -1809,7 +2083,7 @@ class ScExtensionHorizontalRule {
       <svg-minus-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgMinusIcon, selector: "svg-minus-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgMinusIcon, selector: "svg-minus-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionHorizontalRule, decorators: [{
             type: Component,
@@ -2183,7 +2457,7 @@ class ScExtensionItalic {
       <svg-italic-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgItalicIcon, selector: "svg-italic-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgItalicIcon, selector: "svg-italic-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionItalic, decorators: [{
             type: Component,
@@ -2363,7 +2637,7 @@ class ScExtensionLink {
     dialog = inject(Dialog);
     extensions = inject(ScExtensions);
     constructor() {
-        this.extensions.link.set(true);
+        this.extensions.setLink.set(true);
     }
     get editor() {
         return this.parent.editor;
@@ -2380,9 +2654,6 @@ class ScExtensionLink {
                 .run();
         });
     }
-    removeLink() {
-        this.editor.chain().focus().unsetLink().run();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionLink, isStandalone: true, selector: "sc-extension-link", ngImport: i0, template: `
     <button
@@ -2410,31 +2681,6 @@ class ScExtensionLink {
       </svg>
       <span class="sr-only">Link</span>
     </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="removeLink()"
-      type="button"
-      scTooltip="Remove link"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-width="2"
-          d="M13.2 9.8a3.4 3.4 0 0 0-4.8 0L5 13.2A3.4 3.4 0 0 0 9.8 18l.3-.3m-.3-4.5a3.4 3.4 0 0 0 4.8 0L18 9.8A3.4 3.4 0 0 0 13.2 5l-1 1m7.4 14-1.8-1.8m0 0L16 16.4m1.8 1.8 1.8-1.8m-1.8 1.8L16 20"
-        />
-      </svg>
-      <span class="sr-only">Remove link</span>
-    </button>
   `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionLink, decorators: [{
@@ -2465,31 +2711,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       </svg>
       <span class="sr-only">Link</span>
     </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="removeLink()"
-      type="button"
-      scTooltip="Remove link"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-width="2"
-          d="M13.2 9.8a3.4 3.4 0 0 0-4.8 0L5 13.2A3.4 3.4 0 0 0 9.8 18l.3-.3m-.3-4.5a3.4 3.4 0 0 0 4.8 0L18 9.8A3.4 3.4 0 0 0 13.2 5l-1 1m7.4 14-1.8-1.8m0 0L16 16.4m1.8 1.8 1.8-1.8m-1.8 1.8L16 20"
-        />
-      </svg>
-      <span class="sr-only">Remove link</span>
-    </button>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
@@ -2519,7 +2740,7 @@ class ScExtensionOrderedList {
       <svg-list-ordered-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgListOrderedIcon, selector: "svg-list-ordered-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgListOrderedIcon, selector: "svg-list-ordered-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionOrderedList, decorators: [{
             type: Component,
@@ -2696,7 +2917,7 @@ class ScExtensionStrike {
       <svg-strikethrough-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgStrikethroughIcon, selector: "svg-strikethrough-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgStrikethroughIcon, selector: "svg-strikethrough-icon", inputs: ["class"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionStrike, decorators: [{
             type: Component,
@@ -2911,23 +3132,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-class ScExtensionsSeparator {
-    class = input('');
-    classes = computed(() => cn('px-1', this.class()));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionsSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScExtensionsSeparator, isStandalone: true, selector: "sc-extensions-separator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
-    <span class="inline-block h-4 w-px bg-gray-300 dark:bg-gray-600"></span>
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionsSeparator, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extensions-separator', imports: [], template: `
-    <span class="inline-block h-4 w-px bg-gray-300 dark:bg-gray-600"></span>
-  `, host: {
-                        '[class]': 'classes()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
 class ScExtensionTable {
     parent = inject(ScEditor, { host: true });
     dialog = inject(Dialog);
@@ -3050,7 +3254,7 @@ class ScExtensionTable {
       <span class="sr-only">Delete table</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3130,7 +3334,7 @@ class ScExtensionTable {
       <span class="sr-only">Remove column</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3288,7 +3492,7 @@ class ScExtensionTable {
       <span class="sr-only">Merge or split</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3393,7 +3597,7 @@ class ScExtensionTable {
       <span class="sr-only">Add cell attribute</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3471,11 +3675,11 @@ class ScExtensionTable {
       </svg>
       <span class="sr-only">Next cell</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScExtensionsSeparator, selector: "sc-extensions-separator", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScSeparator, selector: "sc-separator", inputs: ["orientation", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionTable, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-extension-table', imports: [ScTooltip, ScExtensionsSeparator], template: `
+            args: [{ selector: 'sc-extension-table', imports: [ScTooltip, ScSeparator], template: `
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
       (click)="insertTable()"
@@ -3527,7 +3731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       <span class="sr-only">Delete table</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3607,7 +3811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       <span class="sr-only">Remove column</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3765,7 +3969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       <span class="sr-only">Merge or split</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3870,7 +4074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       <span class="sr-only">Add cell attribute</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3951,107 +4155,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-class ScExtensionTextAlignAction {
-    ariaLabel1 = 'Align left';
-    ariaLabel2 = 'Align center';
-    ariaLabel3 = 'Align right';
-    parent = inject(ScEditor, { host: true });
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.textAlign.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    setLeftAlign() {
-        this.editor.chain().focus().setTextAlign('left').run();
-    }
-    setCenterAlign() {
-        this.editor.chain().focus().setTextAlign('center').run();
-    }
-    setRightAlign() {
-        this.editor.chain().focus().setTextAlign('right').run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionTextAlignAction, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionTextAlignAction, isStandalone: true, selector: "sc-extension-text-align", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel1"
-      [scTooltip]="ariaLabel1"
-      (click)="setLeftAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg-align-left-icon />
-      <span class="sr-only">{{ ariaLabel1 }}</span>
-    </button>
-
-    <button
-      [attr.aria-label]="ariaLabel2"
-      [scTooltip]="ariaLabel2"
-      (click)="setCenterAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg-align-center-icon />
-      <span class="sr-only">{{ ariaLabel2 }}</span>
-    </button>
-
-    <button
-      [attr.aria-label]="ariaLabel3"
-      [scTooltip]="ariaLabel3"
-      (click)="setRightAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg-align-right-icon />
-      <span class="sr-only">{{ ariaLabel3 }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgAlignLeftIcon, selector: "svg-align-left-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgAlignRightIcon, selector: "svg-align-right-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgAlignCenterIcon, selector: "svg-align-center-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionTextAlignAction, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extension-text-align', imports: [ScTooltip, SvgAlignLeftIcon, SvgAlignRightIcon, SvgAlignCenterIcon, ScToggle], template: `
-    <button
-      [attr.aria-label]="ariaLabel1"
-      [scTooltip]="ariaLabel1"
-      (click)="setLeftAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg-align-left-icon />
-      <span class="sr-only">{{ ariaLabel1 }}</span>
-    </button>
-
-    <button
-      [attr.aria-label]="ariaLabel2"
-      [scTooltip]="ariaLabel2"
-      (click)="setCenterAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg-align-center-icon />
-      <span class="sr-only">{{ ariaLabel2 }}</span>
-    </button>
-
-    <button
-      [attr.aria-label]="ariaLabel3"
-      [scTooltip]="ariaLabel3"
-      (click)="setRightAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg-align-right-icon />
-      <span class="sr-only">{{ ariaLabel3 }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
 class ScExtensionTextStyle {
     parent = inject(ScEditor, { host: true });
     extensions = inject(ScExtensions);
@@ -4304,7 +4407,7 @@ class ScExtensionUnderline {
       <svg-underline-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgUnderlineIcon, selector: "svg-underline-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgUnderlineIcon, selector: "svg-underline-icon", inputs: ["class"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionUnderline, decorators: [{
             type: Component,
@@ -4637,30 +4740,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-class ScExtensionsGroup {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionsGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionsGroup, isStandalone: true, selector: "sc-extensions-group", ngImport: i0, template: `
-    <div class="flex flex-wrap items-center gap-1 py-1">
-      <ng-content />
-    </div>
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionsGroup, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extensions-group', imports: [], template: `
-    <div class="flex flex-wrap items-center gap-1 py-1">
-      <ng-content />
-    </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
 class ScEditor {
     _cdr = inject(ChangeDetectorRef);
     editorDiv = viewChild.required('editorDiv');
     _value = signal('');
     _isEditable = signal(true);
     class = input('');
-    classes = computed(() => cn('', this.class()));
+    //TODO change styles
+    classes = computed(() => cn('block w-full rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-600 dark:bg-gray-700', this.class()));
     editorClass = input('');
     editorClasses = computed(() => cn('mx-auto focus:outline-none', scArticleClasses(), this.editorClass()));
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -4813,58 +4900,60 @@ class ScEditor {
                 multi: true,
             },
         ], viewQueries: [{ propertyName: "editorDiv", first: true, predicate: ["editorDiv"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div
-      class="w-full rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-600 dark:bg-gray-700"
-    >
-      <div class="border-b px-3 py-1 dark:border-gray-600">
-        <sc-extensions-group>
-          <sc-extension-history />
-          <sc-extensions-separator />
-          <sc-extension-bold />
-          <sc-extension-italic />
-          <sc-extension-underline />
-          <sc-extension-highlight />
-          <sc-extension-link />
-          <sc-extension-text-style />
-          <sc-extension-color />
-          <sc-extension-font-family />
-          <sc-extensions-separator />
-          <sc-extension-text-align />
-        </sc-extensions-group>
-
-        <sc-extensions-group>
-          <sc-extension-heading />
-          <sc-extension-paragraph />
-          <sc-extensions-separator />
-          <sc-extension-image />
-          <sc-extension-youtube />
-          <sc-extension-bullet-list />
-          <sc-extension-ordered-list />
-          <sc-extension-blockquote />
-          <sc-extensions-separator />
-          <sc-extension-strike />
-          <sc-extension-horizontal-rule />
-          <sc-extension-code />
-        </sc-extensions-group>
-
-        <sc-extensions-group>
-          <sc-extension-table />
-        </sc-extensions-group>
-      </div>
-
-      <div class="rounded-b-lg bg-white px-4 py-2 dark:bg-gray-800">
-        <label class="sr-only" for="wysiwyg-example">Publish post</label>
-        <div
-          class="block w-full border-0 bg-white px-0 text-sm text-gray-800 focus:ring-0 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-400"
-          #editorDiv
-        ></div>
-      </div>
+    <sc-editor-toolbar>
+      <sc-editor-group>
+        <sc-editor-undo />
+        <sc-editor-redo />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-extension-bold />
+        <sc-extension-italic />
+        <sc-extension-underline />
+        <sc-extension-highlight />
+        <sc-extension-text-style />
+        <sc-extension-color />
+        <sc-extension-font-family />
+        <sc-extension-link />
+        <sc-editor-unset-link />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-editor-text-align-left />
+        <sc-editor-text-align-center />
+        <sc-editor-text-align-right />
+      </sc-editor-group>
+
+      <sc-editor-group>
+        <sc-extension-heading />
+        <sc-extension-paragraph />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-extension-image />
+        <sc-extension-youtube />
+        <sc-extension-bullet-list />
+        <sc-extension-ordered-list />
+        <sc-extension-blockquote />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-extension-strike />
+        <sc-extension-horizontal-rule />
+        <sc-extension-code />
+      </sc-editor-group>
+
+      <sc-editor-group>
+        <sc-extension-table />
+      </sc-editor-group>
+    </sc-editor-toolbar>
+
+    <div class="rounded-b-lg bg-white px-4 py-2 dark:bg-gray-800">
+      <label class="sr-only" for="wysiwyg-example">Publish post</label>
+      <div
+        class="block w-full border-0 bg-white px-0 text-sm text-gray-800 focus:ring-0 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-400"
+        #editorDiv
+      ></div>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScExtensionHighlight, selector: "sc-extension-highlight" }, { kind: "component", type: ScExtensionColor, selector: "sc-extension-color" }, { kind: "component", type: ScExtensionBold, selector: "sc-extension-bold" }, { kind: "component", type: ScExtensionUnderline, selector: "sc-extension-underline" }, { kind: "component", type: ScExtensionYoutube, selector: "sc-extension-youtube" }, { kind: "component", type: ScExtensionImage, selector: "sc-extension-image" }, { kind: "component", type: ScExtensionFontFamily, selector: "sc-extension-font-family" }, { kind: "component", type: ScExtensionLink, selector: "sc-extension-link" }, { kind: "component", type: ScExtensionItalic, selector: "sc-extension-italic" }, { kind: "component", type: ScExtensionBlockquote, selector: "sc-extension-blockquote" }, { kind: "component", type: ScExtensionBulletList, selector: "sc-extension-bullet-list" }, { kind: "component", type: ScExtensionOrderedList, selector: "sc-extension-ordered-list" }, { kind: "component", type: ScExtensionTextAlignAction, selector: "sc-extension-text-align" }, { kind: "component", type: ScExtensionTextStyle, selector: "sc-extension-text-style" }, { kind: "component", type: ScExtensionParagraph, selector: "sc-extension-paragraph" }, { kind: "component", type: ScExtensionHistory, selector: "sc-extension-history" }, { kind: "component", type: ScExtensionsSeparator, selector: "sc-extensions-separator", inputs: ["class"] }, { kind: "component", type: ScExtensionsGroup, selector: "sc-extensions-group" }, { kind: "component", type: ScExtensionStrike, selector: "sc-extension-strike" }, { kind: "component", type: ScExtensionHorizontalRule, selector: "sc-extension-horizontal-rule" }, { kind: "component", type: ScExtensionCode, selector: "sc-extension-code" }, { kind: "component", type: ScExtensionHeading, selector: "sc-extension-heading" }, { kind: "component", type: ScExtensionTable, selector: "sc-extension-table" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScEditorUndo, selector: "sc-editor-undo" }, { kind: "component", type: ScEditorRedo, selector: "sc-editor-redo" }, { kind: "component", type: ScExtensionHighlight, selector: "sc-extension-highlight" }, { kind: "component", type: ScExtensionColor, selector: "sc-extension-color" }, { kind: "component", type: ScExtensionBold, selector: "sc-extension-bold" }, { kind: "component", type: ScExtensionUnderline, selector: "sc-extension-underline" }, { kind: "component", type: ScExtensionYoutube, selector: "sc-extension-youtube" }, { kind: "component", type: ScExtensionImage, selector: "sc-extension-image" }, { kind: "component", type: ScExtensionFontFamily, selector: "sc-extension-font-family" }, { kind: "component", type: ScExtensionLink, selector: "sc-extension-link" }, { kind: "component", type: ScExtensionItalic, selector: "sc-extension-italic" }, { kind: "component", type: ScExtensionBlockquote, selector: "sc-extension-blockquote" }, { kind: "component", type: ScExtensionBulletList, selector: "sc-extension-bullet-list" }, { kind: "component", type: ScExtensionOrderedList, selector: "sc-extension-ordered-list" }, { kind: "component", type: ScExtensionTextStyle, selector: "sc-extension-text-style" }, { kind: "component", type: ScExtensionParagraph, selector: "sc-extension-paragraph" }, { kind: "component", type: ScSeparator, selector: "sc-separator", inputs: ["orientation", "class"] }, { kind: "component", type: ScEditorGroup, selector: "sc-editor-group", inputs: ["class"] }, { kind: "component", type: ScExtensionStrike, selector: "sc-extension-strike" }, { kind: "component", type: ScExtensionHorizontalRule, selector: "sc-extension-horizontal-rule" }, { kind: "component", type: ScExtensionCode, selector: "sc-extension-code" }, { kind: "component", type: ScExtensionHeading, selector: "sc-extension-heading" }, { kind: "component", type: ScExtensionTable, selector: "sc-extension-table" }, { kind: "component", type: ScEditorToolbar, selector: "sc-editor-toolbar", inputs: ["class"] }, { kind: "component", type: ScEditorUnsetLink, selector: "sc-editor-unset-link" }, { kind: "component", type: ScEditorTextAlignRight, selector: "sc-editor-text-align-right" }, { kind: "component", type: ScEditorTextAlignLeft, selector: "sc-editor-text-align-left" }, { kind: "component", type: ScEditorTextAlignCenter, selector: "sc-editor-text-align-center" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditor, decorators: [{
             type: Component,
             args: [{ selector: 'sc-editor', imports: [
+                        ScEditorUndo,
+                        ScEditorRedo,
                         ScExtensionHighlight,
                         ScExtensionColor,
                         ScExtensionBold,
@@ -4877,64 +4966,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         ScExtensionBlockquote,
                         ScExtensionBulletList,
                         ScExtensionOrderedList,
-                        ScExtensionTextAlignAction,
                         ScExtensionTextStyle,
                         ScExtensionParagraph,
-                        ScExtensionHistory,
-                        ScExtensionsSeparator,
-                        ScExtensionsGroup,
+                        ScSeparator,
+                        ScEditorGroup,
                         ScExtensionStrike,
                         ScExtensionHorizontalRule,
                         ScExtensionCode,
                         ScExtensionHeading,
                         ScExtensionTable,
+                        ScEditorToolbar,
+                        ScEditorUnsetLink,
+                        ScEditorTextAlignRight,
+                        ScEditorTextAlignLeft,
+                        ScEditorTextAlignCenter,
                     ], template: `
-    <div
-      class="w-full rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-600 dark:bg-gray-700"
-    >
-      <div class="border-b px-3 py-1 dark:border-gray-600">
-        <sc-extensions-group>
-          <sc-extension-history />
-          <sc-extensions-separator />
-          <sc-extension-bold />
-          <sc-extension-italic />
-          <sc-extension-underline />
-          <sc-extension-highlight />
-          <sc-extension-link />
-          <sc-extension-text-style />
-          <sc-extension-color />
-          <sc-extension-font-family />
-          <sc-extensions-separator />
-          <sc-extension-text-align />
-        </sc-extensions-group>
-
-        <sc-extensions-group>
-          <sc-extension-heading />
-          <sc-extension-paragraph />
-          <sc-extensions-separator />
-          <sc-extension-image />
-          <sc-extension-youtube />
-          <sc-extension-bullet-list />
-          <sc-extension-ordered-list />
-          <sc-extension-blockquote />
-          <sc-extensions-separator />
-          <sc-extension-strike />
-          <sc-extension-horizontal-rule />
-          <sc-extension-code />
-        </sc-extensions-group>
-
-        <sc-extensions-group>
-          <sc-extension-table />
-        </sc-extensions-group>
-      </div>
-
-      <div class="rounded-b-lg bg-white px-4 py-2 dark:bg-gray-800">
-        <label class="sr-only" for="wysiwyg-example">Publish post</label>
-        <div
-          class="block w-full border-0 bg-white px-0 text-sm text-gray-800 focus:ring-0 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-400"
-          #editorDiv
-        ></div>
-      </div>
+    <sc-editor-toolbar>
+      <sc-editor-group>
+        <sc-editor-undo />
+        <sc-editor-redo />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-extension-bold />
+        <sc-extension-italic />
+        <sc-extension-underline />
+        <sc-extension-highlight />
+        <sc-extension-text-style />
+        <sc-extension-color />
+        <sc-extension-font-family />
+        <sc-extension-link />
+        <sc-editor-unset-link />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-editor-text-align-left />
+        <sc-editor-text-align-center />
+        <sc-editor-text-align-right />
+      </sc-editor-group>
+
+      <sc-editor-group>
+        <sc-extension-heading />
+        <sc-extension-paragraph />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-extension-image />
+        <sc-extension-youtube />
+        <sc-extension-bullet-list />
+        <sc-extension-ordered-list />
+        <sc-extension-blockquote />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-extension-strike />
+        <sc-extension-horizontal-rule />
+        <sc-extension-code />
+      </sc-editor-group>
+
+      <sc-editor-group>
+        <sc-extension-table />
+      </sc-editor-group>
+    </sc-editor-toolbar>
+
+    <div class="rounded-b-lg bg-white px-4 py-2 dark:bg-gray-800">
+      <label class="sr-only" for="wysiwyg-example">Publish post</label>
+      <div
+        class="block w-full border-0 bg-white px-0 text-sm text-gray-800 focus:ring-0 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-400"
+        #editorDiv
+      ></div>
     </div>
   `, host: {
                         '[class]': 'classes()',
@@ -4947,7 +5039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     ] }]
         }], ctorParameters: () => [] });
 
-const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_.svg]:pointer-events-none [&_.svg]:size-4 [&_.svg]:shrink-0', {
+const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         variant: {
             primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
@@ -4972,93 +5064,131 @@ const buttonVariants = cva('inline-flex items-center justify-center gap-2 whites
 class ScButton {
     variant = input('primary');
     size = input('default');
-    class = input('');
-    classes = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.class()));
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.classInput()));
+    disabled = input(false, {
+        transform: booleanAttribute,
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScButton, isStandalone: true, selector: "button[sc-button], a[sc-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScButton, isStandalone: true, selector: "button[sc-button], a[sc-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "attr.data-disabled": "disabled()" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScButton, decorators: [{
             type: Component,
-            args: [{ selector: 'button[sc-button], a[sc-button]', imports: [], template: `
-    <ng-content />
-  `, host: {
-                        '[class]': 'classes()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScListbox {
-    class = input('');
-    classes = computed(() => cn('relative z-50 max-h-96 w-full min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', this.class()));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScListbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScListbox, isStandalone: true, selector: "ul[sc-listbox]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScListbox, decorators: [{
-            type: Component,
-            args: [{ selector: 'ul[sc-listbox]', imports: [], template: `
-    <ng-content />
-  `, host: {
-                        '[class]': 'classes()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScListboxOption {
-    class = input('');
-    classes = computed(() => cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this.class()));
-    isSelected = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScListboxOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScListboxOption, isStandalone: true, selector: "li[sc-listbox-option]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
-    @if (isSelected()) {
-      <svg-check-icon class="absolute left-2 flex size-4 items-center justify-center" />
-    }
-
-    <ng-content />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScListboxOption, decorators: [{
-            type: Component,
-            args: [{ selector: 'li[sc-listbox-option]', imports: [SvgCheckIcon], template: `
-    @if (isSelected()) {
-      <svg-check-icon class="absolute left-2 flex size-4 items-center justify-center" />
-    }
-
+            args: [{ selector: 'button[sc-button], a[sc-button]', imports: [], template: `
     <ng-content />
   `, host: {
-                        '[class]': 'classes()',
+                        '[class]': 'class()',
+                        '[attr.data-disabled]': 'disabled()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+class ScSelectState {
+    //1 undefined for init
+    //2 selected value
+    //3 null nothing selected
+    value = signal(undefined);
+    disabled = signal(false);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelectState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelectState });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelectState, decorators: [{
+            type: Injectable
+        }] });
+
 class ScOption {
+    state = inject(ScSelectState);
+    /** The unique ID of the option. */
+    id = signal(inject(_IdGenerator).getId('sc-option-'));
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[active=true]:bg-accent data-[active=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this.classInput()));
+    isSelected = computed(() => this.value() === this.state.value());
     value = input.required();
     labelEl = viewChild.required('label');
     label = computed(() => {
-        return this.labelEl().nativeElement.textContent?.trim();
+        return this.labelEl().nativeElement.textContent?.trim() ?? '';
+    });
+    element = inject(ElementRef);
+    /** Gets the host DOM element. */
+    getHostElement() {
+        return this.element.nativeElement;
+    }
+    active = signal(false);
+    setActiveStyles() {
+        this.active.set(true);
+    }
+    setInactiveStyles() {
+        this.active.set(false);
+    }
+    disabled;
+    getLabel() {
+        return this.label();
+    }
+    disabledByInput = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
     });
+    _disabled = computed(() => this.disabledByInput() || this.disabled || this.state.disabled());
+    toggle() {
+        if (this.isSelected()) {
+            this.deselect();
+        }
+        else {
+            this.select();
+        }
+    }
+    select() {
+        if (this._disabled()) {
+            return;
+        }
+        this.state.value.set(this.value());
+    }
+    deselect() {
+        if (this._disabled()) {
+            return;
+        }
+        this.state.value.set(null);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScOption, isStandalone: true, selector: "sc-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "labelEl", first: true, predicate: ["label"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScOption, isStandalone: true, selector: "sc-option", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabledByInput: { classPropertyName: "disabledByInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseover": "setActiveStyles()", "mouseleave": "setInactiveStyles()", "click": "toggle()" }, properties: { "id": "id()", "class": "class()", "attr.data-disabled": "_disabled()", "attr.data-active": "active()" } }, viewQueries: [{ propertyName: "labelEl", first: true, predicate: ["label"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (isSelected()) {
+      <svg-check-icon class="absolute left-2 flex size-4 items-center justify-center" />
+    }
+
     <span #label>
       <ng-content />
     </span>
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScOption, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-option', imports: [], template: `
+            args: [{ selector: 'sc-option', imports: [SvgCheckIcon], template: `
+    @if (isSelected()) {
+      <svg-check-icon class="absolute left-2 flex size-4 items-center justify-center" />
+    }
+
     <span #label>
       <ng-content />
     </span>
-  `, host: {}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+  `, host: {
+                        '[id]': 'id()',
+                        '[class]': 'class()',
+                        '[attr.data-disabled]': '_disabled()',
+                        '[attr.data-active]': 'active()',
+                        '(mouseover)': 'setActiveStyles()',
+                        '(mouseleave)': 'setInactiveStyles()',
+                        '(click)': 'toggle()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
 class ScSelect {
-    static nextId = 0;
-    id = 0;
-    _getPanelId() {
-        return `panel-${this.id}`;
-    }
+    state = inject(ScSelectState);
+    panelId = inject(_IdGenerator).getId('sc-select-panel-');
     _cdr = inject(ChangeDetectorRef);
     _overlay = inject(Overlay);
     _dir = inject(Directionality, { optional: true });
@@ -5068,23 +5198,48 @@ class ScSelect {
     _panelTemplate = viewChild.required('panelTemplate');
     placeholder = input('');
     isOpen = signal(false);
+    options = contentChildren(ScOption);
+    activeDescendant = signal(null);
     constructor() {
-        this.id = ++ScSelect.nextId;
+        effect(() => {
+            //init
+            if (this.state.value() === undefined) {
+                this.state.value.set(this.value());
+            }
+        });
+        effect(() => {
+            if (this.value() !== this.state.value()) {
+                this.setValue(this.state.value());
+            }
+        });
+        effect(() => {
+            this.syncSelectedState(this.value(), this.options(), this.options()[0]);
+        });
+        this.keyManager.change.subscribe(() => this.activeDescendant.set(this.keyManager.activeItem?.id() ?? null));
     }
-    options = contentChildren(ScOption);
+    /**
+     * Scrolls an option into view.
+     * @param option Option to be scrolled into view.
+     * @param position Position to which to align the option relative to the scrollable container.
+     */
+    scrollOptionIntoView(option, position) {
+        option.getHostElement().scrollIntoView({ block: position, inline: position });
+    }
+    injector = inject(Injector);
+    keyManager = new ActiveDescendantKeyManager(this.options, this.injector)
+        .withHomeAndEnd(true)
+        .withPageUpDown(true)
+        .withVerticalOrientation(true);
     value = model(undefined);
     isDisabled = signal(false);
     writeValue(value) {
         this.value.set(value);
     }
-    handleValueChange(v) {
-        this.setValue(v[0]);
-        this.close();
-    }
     setValue(value) {
         this.value.set(value);
         this._onChange(value);
         this._cdr.markForCheck();
+        this.close();
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onChange = () => { };
@@ -5166,39 +5321,84 @@ class ScSelect {
     }
     close() {
         if (this.isOpen()) {
+            this.focusOnTrigger();
             this.isOpen.set(false);
             this._overlayRef?.detach();
         }
     }
+    focusOnTrigger() {
+        this.scSelectTrigger().nativeElement.focus();
+    }
+    /**
+     * Synchronizes the internal state of the component based on a specific selected date.
+     * @param value Currently selected date.
+     * @param options Options rendered out in the timepicker.
+     * @param fallback Option to set as active if no option is selected.
+     */
+    syncSelectedState(value, options, fallback) {
+        let hasSelected = false;
+        for (const option of options) {
+            if (value && option.value() === value) {
+                this.scrollOptionIntoView(option, 'center');
+                untracked(() => this.keyManager.setActiveItem(option));
+                hasSelected = true;
+            }
+        }
+        // If no option was selected, we need to reset the key manager since
+        // it might be holding onto an option that no longer exists.
+        if (!hasSelected) {
+            if (fallback) {
+                untracked(() => this.keyManager.setActiveItem(fallback));
+                this.scrollOptionIntoView(fallback, 'center');
+            }
+            else {
+                untracked(() => this.keyManager.setActiveItem(-1));
+            }
+        }
+    }
     /** Handles keyboard events while the overlay is open. */
     _handleKeydown(event) {
-        const keyCode = event.keyCode;
-        if (keyCode === TAB) {
+        const key = event.key;
+        if (key === 'Tab') {
             this.close();
         }
-        else if (keyCode === ESCAPE && !hasModifierKey(event)) {
+        else if (key === 'Escape' && !hasModifierKey(event)) {
             event.preventDefault();
             this.close();
         }
-        else if (keyCode === ENTER) {
-            //TODO for me it's mean it's was selected
-            this.close();
+        else if (key === 'Enter') {
+            event.preventDefault();
+            if (this.keyManager.activeItem) {
+                this.setValue(this.keyManager.activeItem.value() ?? '');
+            }
+            else {
+                this.close();
+            }
+        }
+        else {
+            const previousActive = this.keyManager.activeItem;
+            this.keyManager.onKeydown(event);
+            const currentActive = this.keyManager.activeItem;
+            if (currentActive && currentActive !== previousActive) {
+                this.scrollOptionIntoView(currentActive, 'nearest');
+            }
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScSelect, isStandalone: true, selector: "sc-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScSelect, isStandalone: true, selector: "sc-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ScSelect),
                 multi: true,
             },
+            ScSelectState,
         ], queries: [{ propertyName: "options", predicate: ScOption, isSignal: true }], viewQueries: [{ propertyName: "scSelectTrigger", first: true, predicate: ["scSelectTrigger"], descendants: true, isSignal: true }, { propertyName: "_panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <button
       class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"
       #scSelectTrigger
       [disabled]="isDisabled()"
       [attr.aria-expanded]="_isExpanded()"
-      [attr.aria-controls]="_getPanelId()"
+      [attr.aria-controls]="panelId"
       (click)="open()"
       type="button"
       role="combobox"
@@ -5209,43 +5409,24 @@ class ScSelect {
 
     <ng-template #panelTemplate>
       <ul
-        [id]="_getPanelId()"
-        [cdkTrapFocusAutoCapture]="true"
-        (cdkListboxValueChange)="handleValueChange($event.value)"
-        sc-listbox
-        cdkListbox
-        cdkTrapFocus
+        class="relative z-50 max-h-96 w-full min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        [id]="panelId"
+        role="listbox"
       >
-        @for (option of options(); track $index) {
-          <li
-            [isSelected]="option.value() === this.value()"
-            [cdkOption]="option.value()"
-            sc-listbox-option
-          >
-            {{ option.label() }}
-          </li>
-        }
+        <ng-content />
       </ul>
     </ng-template>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgChevronDownIcon, selector: "svg-chevron-down-icon", inputs: ["class", "svgClass"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "component", type: ScListbox, selector: "ul[sc-listbox]", inputs: ["class"] }, { kind: "component", type: ScListboxOption, selector: "li[sc-listbox-option]", inputs: ["class", "isSelected"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgChevronDownIcon, selector: "svg-chevron-down-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-select', imports: [
-                        SvgChevronDownIcon,
-                        OverlayModule,
-                        ScListbox,
-                        ScListboxOption,
-                        CdkOption,
-                        CdkListbox,
-                        A11yModule,
-                    ], template: `
+            args: [{ selector: 'sc-select', imports: [SvgChevronDownIcon], template: `
     <button
       class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"
       #scSelectTrigger
       [disabled]="isDisabled()"
       [attr.aria-expanded]="_isExpanded()"
-      [attr.aria-controls]="_getPanelId()"
+      [attr.aria-controls]="panelId"
       (click)="open()"
       type="button"
       role="combobox"
@@ -5256,22 +5437,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
     <ng-template #panelTemplate>
       <ul
-        [id]="_getPanelId()"
-        [cdkTrapFocusAutoCapture]="true"
-        (cdkListboxValueChange)="handleValueChange($event.value)"
-        sc-listbox
-        cdkListbox
-        cdkTrapFocus
+        class="relative z-50 max-h-96 w-full min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        [id]="panelId"
+        role="listbox"
       >
-        @for (option of options(); track $index) {
-          <li
-            [isSelected]="option.value() === this.value()"
-            [cdkOption]="option.value()"
-            sc-listbox-option
-          >
-            {{ option.label() }}
-          </li>
-        }
+        <ng-content />
       </ul>
     </ng-template>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -5280,6 +5450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             useExisting: forwardRef(() => ScSelect),
                             multi: true,
                         },
+                        ScSelectState,
                     ] }]
         }], ctorParameters: () => [] });
 
@@ -5317,7 +5488,7 @@ class ScPageItem {
         </a>
       }
     </li>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgEllipsisIcon, selector: "svg-ellipsis-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: SvgEllipsisIcon, selector: "svg-ellipsis-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageItem, decorators: [{
             type: Component,
@@ -5558,7 +5729,7 @@ class ScPaginator {
         }
       </ul>
     </nav>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScPageItem, selector: "sc-page-item", inputs: ["currentPage", "page"], outputs: ["pageChanged"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScPagination, selector: "nav[sc-pagination]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgChevronLeftIcon, selector: "svg-chevron-left-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronsLeftIcon, selector: "svg-chevrons-left-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronRightIcon, selector: "svg-chevron-right-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronsRightIcon, selector: "svg-chevrons-right-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScSelect, selector: "sc-select", inputs: ["placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: ScOption, selector: "sc-option", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScPageItem, selector: "sc-page-item", inputs: ["currentPage", "page"], outputs: ["pageChanged"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScPagination, selector: "nav[sc-pagination]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: SvgChevronLeftIcon, selector: "svg-chevron-left-icon", inputs: ["class"] }, { kind: "component", type: SvgChevronsLeftIcon, selector: "svg-chevrons-left-icon", inputs: ["class"] }, { kind: "component", type: SvgChevronRightIcon, selector: "svg-chevron-right-icon", inputs: ["class"] }, { kind: "component", type: SvgChevronsRightIcon, selector: "svg-chevrons-right-icon", inputs: ["class"] }, { kind: "component", type: ScSelect, selector: "sc-select", inputs: ["placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: ScOption, selector: "sc-option", inputs: ["class", "value", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPaginator, decorators: [{
             type: Component,
@@ -5818,7 +5989,7 @@ class ScMonthDays {
         {{ day.slice(-2) }}
       </button>
     }
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMonthDays, decorators: [{
             type: Component,
@@ -5891,7 +6062,7 @@ class ScMonthYearHeader {
     >
       <svg-chevron-right-icon />
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgChevronRightIcon, selector: "svg-chevron-right-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronLeftIcon, selector: "svg-chevron-left-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgChevronRightIcon, selector: "svg-chevron-right-icon", inputs: ["class"] }, { kind: "component", type: SvgChevronLeftIcon, selector: "svg-chevron-left-icon", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMonthYearHeader, decorators: [{
             type: Component,
@@ -6082,7 +6253,7 @@ class ScCalendar {
         <button sc-button type="button">Done</button>
       </div>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScMonthYearHeader, selector: "sc-month-year-header", inputs: ["class", "monthYear"], outputs: ["monthYearChange"] }, { kind: "component", type: ScMonthDays, selector: "sc-month-days", inputs: ["class", "weekDaysNames", "days", "firstDayMonth", "selectedDay"], outputs: ["selectedDayChange"] }, { kind: "component", type: ScCard, selector: "div[sc-card]", inputs: ["class"] }, { kind: "component", type: ScCardHeader, selector: "div[sc-card-header]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: ScCardFooter, selector: "div[sc-card-footer]", inputs: ["class"] }, { kind: "component", type: ScCardContent, selector: "div[sc-card-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScMonthYearHeader, selector: "sc-month-year-header", inputs: ["class", "monthYear"], outputs: ["monthYearChange"] }, { kind: "component", type: ScMonthDays, selector: "sc-month-days", inputs: ["class", "weekDaysNames", "days", "firstDayMonth", "selectedDay"], outputs: ["selectedDayChange"] }, { kind: "component", type: ScCard, selector: "div[sc-card]", inputs: ["class"] }, { kind: "component", type: ScCardHeader, selector: "div[sc-card-header]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: ScCardFooter, selector: "div[sc-card-footer]", inputs: ["class"] }, { kind: "component", type: ScCardContent, selector: "div[sc-card-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCalendar, decorators: [{
             type: Component,
@@ -6145,10 +6316,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 const scInputStyles = signal('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm');
 class ScInput {
-    class = input('');
-    classes = computed(() => cn(scInputStyles(), this.class()));
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn(scInputStyles(), this.classInput()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScInput, isStandalone: true, selector: "input[sc-input]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScInput, isStandalone: true, selector: "input[sc-input]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -6157,7 +6330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ selector: 'input[sc-input]', imports: [], template: `
     <ng-content />
   `, host: {
-                        '[class]': 'classes()',
+                        '[class]': 'class()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
@@ -6332,7 +6505,7 @@ class ScDatePicker {
       <svg-calendar-icon />
     </button>
     <input #input sc-input scDateInput type="text" placeholder="Select date" />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScInput, selector: "input[sc-input]", inputs: ["class"] }, { kind: "component", type: SvgCalendarIcon, selector: "svg-calendar-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "directive", type: ScDateInput, selector: "[scDateInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScInput, selector: "input[sc-input]", inputs: ["class"] }, { kind: "component", type: SvgCalendarIcon, selector: "svg-calendar-icon", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "directive", type: ScDateInput, selector: "[scDateInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDatePicker, decorators: [{
             type: Component,
@@ -6547,7 +6720,7 @@ class ScThemeToggler {
         <svg-sun-icon />
       }
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgMoonIcon, selector: "svg-moon-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgSunIcon, selector: "svg-sun-icon", inputs: ["class", "svgClass"] }, { kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgMoonIcon, selector: "svg-moon-icon", inputs: ["class"] }, { kind: "component", type: SvgSunIcon, selector: "svg-sun-icon", inputs: ["class"] }, { kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScThemeToggler, decorators: [{
             type: Component,
@@ -6908,7 +7081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScBreadcrumbSeparator {
     class = input('');
-    classes = computed(() => cn('[&>.svg]:w-3.5 [&>.svg]:h-3.5', this.class()));
+    classes = computed(() => cn('[&_svg]:w-3.5 [&_svg]:h-3.5', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScBreadcrumbSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScBreadcrumbSeparator, isStandalone: true, selector: "li[sc-breadcrumb-separator]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "attr.aria-hidden": "true", "class": "classes()" } }, ngImport: i0, template: `
     <ng-content />
@@ -6932,7 +7105,7 @@ class ScBreadcrumbEllipsis {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScBreadcrumbEllipsis, isStandalone: true, selector: "span[sc-breadcrumb-ellipsis]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "attr.aria-hidden": "true", "class": "classes()" } }, ngImport: i0, template: `
     <svg-ellipsis-icon class="size-4" />
     <span class="sr-only">More</span>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgEllipsisIcon, selector: "svg-ellipsis-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgEllipsisIcon, selector: "svg-ellipsis-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScBreadcrumbEllipsis, decorators: [{
             type: Component,
@@ -6946,6 +7119,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+class ScToggleGroup {
+    type = input('single');
+    class = input('');
+    _class = computed(() => cn('flex items-center justify-center gap-1', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScToggleGroup, isStandalone: true, selector: "sc-toggle-group", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToggleGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-toggle-group', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScToggleGroupItem {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToggleGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScToggleGroupItem, isStandalone: true, selector: "sc-toggle-group-item", ngImport: i0, template: `
+    <p>toggle-group-item works!</p>
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToggleGroupItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-toggle-group-item', imports: [], template: `
+    <p>toggle-group-item works!</p>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
 class ScDialogClose {
     class = input('');
     classes = computed(() => cn('absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', this.class()));
@@ -7068,7 +7272,7 @@ class ScDialog {
         <button sc-button type="submit">Save changes</button>
       </div>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScDialogHeader, selector: "div[sc-dialog-header]", inputs: ["class"] }, { kind: "component", type: ScDialogTitle, selector: "h2[sc-dialog-title]", inputs: ["class"] }, { kind: "component", type: ScDialogDescription, selector: "p[sc-dialog-description]", inputs: ["class"] }, { kind: "component", type: ScDialogFooter, selector: "div[sc-dialog-footer]", inputs: ["class"] }, { kind: "component", type: ScDialogClose, selector: "button[sc-dialog-close]", inputs: ["class"] }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScDialogContent, selector: "div[sc-dialog-content]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScDialogHeader, selector: "div[sc-dialog-header]", inputs: ["class"] }, { kind: "component", type: ScDialogTitle, selector: "h2[sc-dialog-title]", inputs: ["class"] }, { kind: "component", type: ScDialogDescription, selector: "p[sc-dialog-description]", inputs: ["class"] }, { kind: "component", type: ScDialogFooter, selector: "div[sc-dialog-footer]", inputs: ["class"] }, { kind: "component", type: ScDialogClose, selector: "button[sc-dialog-close]", inputs: ["class"] }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class"] }, { kind: "component", type: ScDialogContent, selector: "div[sc-dialog-content]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDialog, decorators: [{
             type: Component,
@@ -7101,11 +7305,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-const alertVariants = cva('relative w-full rounded-lg border p-4 [&>.svg+div]:translate-y-[-3px] [&>.svg]:absolute [&>.svg]:left-4 [&>.svg]:top-4 [&>.svg]:text-foreground [&>.svg~*]:pl-7', {
+const alertVariants = cva('relative w-full rounded-lg border p-4 [&_svg]:size-4 [&>.svg-host+p]:translate-y-[-3px] [&_svg]:absolute [&_svg]:left-4 [&_svg]:top-4 [&_svg]:text-foreground [&>.svg-host~*]:pl-7', {
     variants: {
         variant: {
             default: 'bg-background text-foreground',
-            destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>.svg]:text-destructive',
+            destructive: 'border-destructive/50 text-destructive dark:border-destructive [&_svg]:text-destructive',
         },
     },
     defaultVariants: {
@@ -7274,7 +7478,7 @@ class ScAlertDialog {
         <button sc-button>Continue</button>
       </div>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: ScAlertDialogFooter, selector: "div[sc-alert-dialog-footer]", inputs: ["class"] }, { kind: "component", type: ScAlertDialogHeader, selector: "div[sc-alert-dialog-header]", inputs: ["class"] }, { kind: "component", type: scAlertDialogDescription, selector: "p[sc-alert-dialog-description]", inputs: ["class"] }, { kind: "component", type: ScAlertDialogTitle, selector: "h2[sc-alert-dialog-title]", inputs: ["class"] }, { kind: "component", type: ScAlertDialogContent, selector: "div[sc-alert-dialog-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: ScAlertDialogFooter, selector: "div[sc-alert-dialog-footer]", inputs: ["class"] }, { kind: "component", type: ScAlertDialogHeader, selector: "div[sc-alert-dialog-header]", inputs: ["class"] }, { kind: "component", type: scAlertDialogDescription, selector: "p[sc-alert-dialog-description]", inputs: ["class"] }, { kind: "component", type: ScAlertDialogTitle, selector: "h2[sc-alert-dialog-title]", inputs: ["class"] }, { kind: "component", type: ScAlertDialogContent, selector: "div[sc-alert-dialog-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAlertDialog, decorators: [{
             type: Component,
@@ -7339,47 +7543,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScScrollArea {
     host = inject(ElementRef);
-    class = input('');
-    classes = computed(() => cn('', this.class()));
-    visibility = input('native');
-    //TODO remove use of ngAfterViewInit
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('', this.classInput()));
     ngAfterViewInit() {
         const height = this.host.nativeElement.scrollHeight;
         console.log(height);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScScrollArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScScrollArea, isStandalone: true, selector: "div[sc-scroll-area]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
-    <ng-scrollbar
-      [visibility]="visibility()"
-      [style]="{
-        '--scrollbar-border-radius': '100px',
-        '--scrollbar-padding': '1px',
-        '--scrollbar-thumb-color': 'hsl(var(--border))',
-        '--scrollbar-thumb-hover-color': 'hsl(var(--border))',
-        '--scrollbar-size': '7px',
-      }"
-    >
-      <ng-content />
-    </ng-scrollbar>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i1$2.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScScrollArea, isStandalone: true, selector: "div[sc-scroll-area]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScScrollArea, decorators: [{
             type: Component,
-            args: [{ selector: 'div[sc-scroll-area]', imports: [NgScrollbarModule], template: `
-    <ng-scrollbar
-      [visibility]="visibility()"
-      [style]="{
-        '--scrollbar-border-radius': '100px',
-        '--scrollbar-padding': '1px',
-        '--scrollbar-thumb-color': 'hsl(var(--border))',
-        '--scrollbar-thumb-hover-color': 'hsl(var(--border))',
-        '--scrollbar-size': '7px',
-      }"
-    >
-      <ng-content />
-    </ng-scrollbar>
+            args: [{ selector: 'div[sc-scroll-area]', imports: [], template: `
+    <ng-content />
   `, host: {
-                        '[class]': 'classes()',
+                        '[class]': 'class()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
@@ -7456,7 +7638,7 @@ class ScTabs {
     </div>
 
     <ng-content />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabs, decorators: [{
             type: Component,
@@ -7515,6 +7697,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+class ScTabContent2 {
+    template = viewChild.required('template');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabContent2, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScTabContent2, isStandalone: true, selector: "sc-tab-content2", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #template>
+      <ng-content />
+    </ng-template>
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabContent2, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-tab-content2', imports: [], template: `
+    <ng-template #template>
+      <ng-content />
+    </ng-template>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScTabLabel2 {
+    template = viewChild.required('template');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabLabel2, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScTabLabel2, isStandalone: true, selector: "sc-tab-label2", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #template>
+      <ng-content />
+    </ng-template>
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabLabel2, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-tab-label2', imports: [], template: `
+    <ng-template #template>
+      <ng-content />
+    </ng-template>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [] }]
+        }] });
+
+class ScTabGroup {
+    tabLabels = contentChildren(ScTabLabel2, { descendants: true });
+    tabContents = contentChildren(ScTabContent2, { descendants: true });
+    ngAfterViewInit() {
+        console.log(this.tabLabels());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScTabGroup, isStandalone: true, selector: "sc-tab-group", queries: [{ propertyName: "tabLabels", predicate: ScTabLabel2, descendants: true, isSignal: true }, { propertyName: "tabContents", predicate: ScTabContent2, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="group relative my-4 flex flex-col space-y-2">
+      <div class="relative mr-auto w-full" dir="ltr" data-orientation="horizontal">
+        <div class="flex items-center justify-between pb-3">
+          <div
+            class="inline-flex h-9 w-full items-center justify-start rounded-none border-b bg-transparent p-0 text-muted-foreground"
+            style="outline: none;"
+            tabindex="0"
+            data-orientation="horizontal"
+          >
+            @for (tab of tabLabels(); track tab) {
+              <ng-container [ngTemplateOutlet]="tab.template()"></ng-container>
+            }
+          </div>
+        </div>
+        <div
+          class="relative mt-2 rounded-md border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          id="radix-:r17g:-content-preview"
+          style="animation-duration: 0s;"
+          tabindex="0"
+          data-state="active"
+          data-orientation="horizontal"
+        >
+          <div class="theme-zinc w-full" style="--radius: 0.5rem;">
+            <div class="preview flex min-h-[350px] w-full items-center justify-center p-10">
+              <div
+                class="relative h-72 w-48 overflow-hidden rounded-md border"
+                dir="ltr"
+                style="position: relative; --radix-scroll-area-corner-width: 0px; --radix-scroll-area-corner-height: 0px;"
+              >
+                <div
+                  class="size-full rounded-[inherit]"
+                  style="overflow: hidden scroll;"
+                  data-radix-scroll-area-viewport=""
+                >
+                  @for (content of tabContents(); track content) {
+                    <ng-container [ngTemplateOutlet]="content.template()"></ng-container>
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ng-content />
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-tab-group', imports: [NgTemplateOutlet], template: `
+    <div class="group relative my-4 flex flex-col space-y-2">
+      <div class="relative mr-auto w-full" dir="ltr" data-orientation="horizontal">
+        <div class="flex items-center justify-between pb-3">
+          <div
+            class="inline-flex h-9 w-full items-center justify-start rounded-none border-b bg-transparent p-0 text-muted-foreground"
+            style="outline: none;"
+            tabindex="0"
+            data-orientation="horizontal"
+          >
+            @for (tab of tabLabels(); track tab) {
+              <ng-container [ngTemplateOutlet]="tab.template()"></ng-container>
+            }
+          </div>
+        </div>
+        <div
+          class="relative mt-2 rounded-md border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          id="radix-:r17g:-content-preview"
+          style="animation-duration: 0s;"
+          tabindex="0"
+          data-state="active"
+          data-orientation="horizontal"
+        >
+          <div class="theme-zinc w-full" style="--radius: 0.5rem;">
+            <div class="preview flex min-h-[350px] w-full items-center justify-center p-10">
+              <div
+                class="relative h-72 w-48 overflow-hidden rounded-md border"
+                dir="ltr"
+                style="position: relative; --radix-scroll-area-corner-width: 0px; --radix-scroll-area-corner-height: 0px;"
+              >
+                <div
+                  class="size-full rounded-[inherit]"
+                  style="overflow: hidden scroll;"
+                  data-radix-scroll-area-viewport=""
+                >
+                  @for (content of tabContents(); track content) {
+                    <ng-container [ngTemplateOutlet]="content.template()"></ng-container>
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ng-content />
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScTabItem {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScTabItem, isStandalone: true, selector: "sc-tab-item", ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-tab-item', imports: [], template: `
+    <ng-content />
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
 const toastVariants = cva('group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full', {
     variants: {
         variant: {
@@ -7707,7 +8046,7 @@ class ScToastExample {
     </ol>
 
 -->
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScToastClose, selector: "button[sc-toast-close]", inputs: ["class"] }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScToastAction, selector: "button[sc-toast-action]", inputs: ["class"] }, { kind: "component", type: ScToastDescription, selector: "p[sc-toast-description]", inputs: ["class"] }, { kind: "component", type: ScToastTitle, selector: "h2[sc-toast-title]", inputs: ["class"] }, { kind: "component", type: ScToast, selector: "li[sc-toast]", inputs: ["variant", "class"] }, { kind: "component", type: ScToastContent, selector: "div[sc-toast-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScToastClose, selector: "button[sc-toast-close]", inputs: ["class"] }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class"] }, { kind: "component", type: ScToastAction, selector: "button[sc-toast-action]", inputs: ["class"] }, { kind: "component", type: ScToastDescription, selector: "p[sc-toast-description]", inputs: ["class"] }, { kind: "component", type: ScToastTitle, selector: "h2[sc-toast-title]", inputs: ["class"] }, { kind: "component", type: ScToast, selector: "li[sc-toast]", inputs: ["variant", "class"] }, { kind: "component", type: ScToastContent, selector: "div[sc-toast-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToastExample, decorators: [{
             type: Component,
@@ -8070,7 +8409,7 @@ class ScCheckbox {
     } @else if (checked() === true) {
       <svg-check-icon [class]="svgClasses()" />
     }
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgMinusIcon, selector: "svg-minus-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class"] }, { kind: "component", type: SvgMinusIcon, selector: "svg-minus-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCheckbox, decorators: [{
             type: Component,
@@ -8110,7 +8449,7 @@ class ScAccordion {
     <cdk-accordion>
       <ng-content />
     </cdk-accordion>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i1$4.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i1$2.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAccordion, decorators: [{
             type: Component,
@@ -8142,7 +8481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScAccordionTrigger {
     class = input('');
-    classes = computed(() => cn('flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>.svg]:rotate-180', this.class()));
+    classes = computed(() => cn('flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScAccordionTrigger, isStandalone: true, selector: "button[sc-accordion-trigger]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
     <ng-content />
@@ -8179,7 +8518,7 @@ class ScAccordionItem {
         <ng-content select="sc-accordion-content" />
       }
     </cdk-accordion-item>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i1$4.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "component", type: SvgChevronDownIcon, selector: "svg-chevron-down-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronUpIcon, selector: "svg-chevron-up-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScAccordionHeader, selector: "h3[sc-accordion-header]", inputs: ["class"] }, { kind: "component", type: ScAccordionTrigger, selector: "button[sc-accordion-trigger]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i1$2.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "component", type: SvgChevronDownIcon, selector: "svg-chevron-down-icon", inputs: ["class"] }, { kind: "component", type: SvgChevronUpIcon, selector: "svg-chevron-up-icon", inputs: ["class"] }, { kind: "component", type: ScAccordionHeader, selector: "h3[sc-accordion-header]", inputs: ["class"] }, { kind: "component", type: ScAccordionTrigger, selector: "button[sc-accordion-trigger]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAccordionItem, decorators: [{
             type: Component,
@@ -8443,23 +8782,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScRadioItem {
     state = inject(ScRadioGroupState);
-    id = input.required();
+    id = signal(inject(_IdGenerator).getId('sc-radio-item-'));
+    name = computed(() => {
+        return this.state.name();
+    });
     value = input.required();
     checked = computed(() => {
         return this.value() === this.state.selectedValue();
     });
-    name = computed(() => {
-        return this.state.name();
+    disabledByInput = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
     });
-    disabled = input(false);
-    class = input('row-start-1 col-start-1');
-    classes = computed(() => cn('appearance-none aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', this.class()));
-    hostClass = input('');
-    hostClasses = computed(() => cn('flex items-center space-x-2', this.hostClass()));
-    circleHostClass = input('row-start-1 col-start-1 h-4 w-4 flex items-center justify-center');
-    circleClass = input('');
-    circleClasses = computed(() => cn('h-2.5 w-2.5 fill-primary text-primary', this.circleClass()));
-    radioChecked = output();
+    disabled = computed(() => this.disabledByInput() || this.state.disabled());
+    class = input('');
+    _class = computed(() => cn('flex items-center space-x-2', this.class()));
+    inputClass = input('');
+    _inputClass = computed(() => cn('row-start-1 col-start-1', 'appearance-none aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', this.inputClass()));
+    svgWrapperClass = input('row-start-1 col-start-1 h-4 w-4 flex items-center justify-center');
+    svgClass = input('');
+    _svgClass = computed(() => cn('h-2.5 w-2.5 fill-primary text-primary', this.svgClass()));
     toggle() {
         if (this.disabled()) {
             return;
@@ -8467,32 +8809,48 @@ class ScRadioItem {
         this.state.selectedValue.set(this.value());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScRadioItem, isStandalone: true, selector: "sc-radio-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, hostClass: { classPropertyName: "hostClass", publicName: "hostClass", isSignal: true, isRequired: false, transformFunction: null }, circleHostClass: { classPropertyName: "circleHostClass", publicName: "circleHostClass", isSignal: true, isRequired: false, transformFunction: null }, circleClass: { classPropertyName: "circleClass", publicName: "circleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { radioChecked: "radioChecked" }, host: { listeners: { "click": "toggle()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScRadioItem, isStandalone: true, selector: "sc-radio-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabledByInput: { classPropertyName: "disabledByInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, svgWrapperClass: { classPropertyName: "svgWrapperClass", publicName: "svgWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, svgClass: { classPropertyName: "svgClass", publicName: "svgClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggle()" }, properties: { "class": "_class()" } }, ngImport: i0, template: `
     <div class="grid grid-cols-[1fr]">
-      <input [id]="id()" [class]="classes()" [disabled]="disabled()" [name]="name()" type="radio" />
+      <input
+        [id]="id()"
+        [class]="_inputClass()"
+        [disabled]="disabled()"
+        [name]="name()"
+        type="radio"
+      />
 
       @if (checked() === true) {
-        <svg-circle-icon [class]="circleHostClass()" [svgClass]="circleClasses()" />
+        <span [class]="svgWrapperClass()">
+          <svg-circle-icon [class]="_svgClass()" />
+        </span>
       }
     </div>
 
     <label [for]="id()" sc-label><ng-content /></label>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCircleIcon, selector: "svg-circle-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCircleIcon, selector: "svg-circle-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScRadioItem, decorators: [{
             type: Component,
             args: [{ selector: 'sc-radio-item', imports: [SvgCircleIcon], template: `
     <div class="grid grid-cols-[1fr]">
-      <input [id]="id()" [class]="classes()" [disabled]="disabled()" [name]="name()" type="radio" />
+      <input
+        [id]="id()"
+        [class]="_inputClass()"
+        [disabled]="disabled()"
+        [name]="name()"
+        type="radio"
+      />
 
       @if (checked() === true) {
-        <svg-circle-icon [class]="circleHostClass()" [svgClass]="circleClasses()" />
+        <span [class]="svgWrapperClass()">
+          <svg-circle-icon [class]="_svgClass()" />
+        </span>
       }
     </div>
 
     <label [for]="id()" sc-label><ng-content /></label>
   `, host: {
-                        '[class]': 'hostClasses()',
+                        '[class]': '_class()',
                         '(click)': 'toggle()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
@@ -8712,7 +9070,7 @@ class ScInputOTPSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScInputOTPSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScInputOTPSeparator, isStandalone: true, selector: "sc-input-otp-separator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
     <svg-dot-icon />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgDotIcon, selector: "svg-dot-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgDotIcon, selector: "svg-dot-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScInputOTPSeparator, decorators: [{
             type: Component,
@@ -9231,33 +9589,33 @@ class ScAspectRatio {
       @if (priority()) {
         <img
           [class]="imageClasses()"
-          [ngSrc]="src()"
+          [src]="src()"
           [alt]="alt()"
           [style]="imageStyle()"
           fill
           priority
         />
       } @else {
-        <img [class]="imageClasses()" [ngSrc]="src()" [alt]="alt()" [style]="imageStyle()" fill />
+        <img [class]="imageClasses()" [src]="src()" [alt]="alt()" [style]="imageStyle()" fill />
       }
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAspectRatio, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-aspect-ratio', imports: [NgOptimizedImage], template: `
+            args: [{ selector: 'sc-aspect-ratio', imports: [], template: `
     <div [class]="wrapperClass()" [style]="wrapperStyle()">
       @if (priority()) {
         <img
           [class]="imageClasses()"
-          [ngSrc]="src()"
+          [src]="src()"
           [alt]="alt()"
           [style]="imageStyle()"
           fill
           priority
         />
       } @else {
-        <img [class]="imageClasses()" [ngSrc]="src()" [alt]="alt()" [style]="imageStyle()" fill />
+        <img [class]="imageClasses()" [src]="src()" [alt]="alt()" [style]="imageStyle()" fill />
       }
     </div>
   `, host: {
@@ -9550,7 +9908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class ScContextMenuTriggerFor {
     scContextMenuTriggerFor = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScContextMenuTriggerFor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScContextMenuTriggerFor, isStandalone: true, selector: "[scContextMenuTriggerFor]", inputs: { scContextMenuTriggerFor: { classPropertyName: "scContextMenuTriggerFor", publicName: "scContextMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i1$5.CdkContextMenuTrigger, inputs: ["cdkContextMenuTriggerFor", "scContextMenuTriggerFor"] }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScContextMenuTriggerFor, isStandalone: true, selector: "[scContextMenuTriggerFor]", inputs: { scContextMenuTriggerFor: { classPropertyName: "scContextMenuTriggerFor", publicName: "scContextMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i1$3.CdkContextMenuTrigger, inputs: ["cdkContextMenuTriggerFor", "scContextMenuTriggerFor"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScContextMenuTriggerFor, decorators: [{
             type: Directive,
@@ -9569,7 +9927,7 @@ class ScMenu {
     class = input('');
     classes = computed(() => cn('my-2 z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenu, isStandalone: true, selector: "div[sc-menu]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenu }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenu, isStandalone: true, selector: "div[sc-menu]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenu }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9639,9 +9997,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScMenuGroup {
     class = input('');
-    classes = computed(() => cn('', this.class()));
+    _class = computed(() => cn('', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuGroup, isStandalone: true, selector: "sc-menu-group", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuGroup, isStandalone: true, selector: "sc-menu-group", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9650,19 +10008,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ selector: 'sc-menu-group', imports: [], template: `
     <ng-content />
   `, host: {
-                        '[class]': 'classes()',
+                        '[class]': '_class()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
 class ScMenuItem {
     class = input('');
-    classes = computed(() => cn('w-full flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_.svg]:pointer-events-none [&_.svg]:size-4 [&_.svg]:shrink-0', this._inset() && 'pl-8', this.class()));
+    classes = computed(() => cn('w-full flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', this._inset() && 'pl-8', this.class()));
     _inset = input(false, {
         alias: 'inset',
         transform: booleanAttribute,
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuItem, isStandalone: true, selector: "button[sc-menu-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, _inset: { classPropertyName: "_inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuItem }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuItem, isStandalone: true, selector: "button[sc-menu-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, _inset: { classPropertyName: "_inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItem }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9692,14 +10050,14 @@ class ScMenuCheckboxItem {
     });
     scTriggered = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuCheckboxItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScMenuCheckboxItem, isStandalone: true, selector: "button[sc-menu-checkbox-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, scChecked: { classPropertyName: "scChecked", publicName: "scChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scTriggered: "scTriggered" }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "scChecked"], outputs: ["cdkMenuItemTriggered", "scTriggered"] }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScMenuCheckboxItem, isStandalone: true, selector: "button[sc-menu-checkbox-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, scChecked: { classPropertyName: "scChecked", publicName: "scChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scTriggered: "scTriggered" }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "scChecked"], outputs: ["cdkMenuItemTriggered", "scTriggered"] }], ngImport: i0, template: `
     @if (scChecked()) {
       <span class="absolute left-2 flex size-3.5 items-center justify-center">
         <svg-check-icon class="size-4" />
       </span>
     }
     <ng-content />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuCheckboxItem, decorators: [{
             type: Component,
@@ -9725,7 +10083,7 @@ class ScMenuRadioGroup {
     class = input('');
     classes = computed(() => cn('', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuRadioGroup, isStandalone: true, selector: "div[sc-menu-radio-group]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuGroup }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuRadioGroup, isStandalone: true, selector: "div[sc-menu-radio-group]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuGroup }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9743,13 +10101,13 @@ class ScMenuRadioItem {
     classes = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this.class()));
     value = input('');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuRadioItem, isStandalone: true, selector: "button[sc-menu-radio-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuItemRadio }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuRadioItem, isStandalone: true, selector: "button[sc-menu-radio-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItemRadio }], ngImport: i0, template: `
     <span class="absolute left-2 flex size-3.5 items-center justify-center">
       <svg-circle-icon class="size-2 fill-current" />
     </span>
 
     <ng-content />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCircleIcon, selector: "svg-circle-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCircleIcon, selector: "svg-circle-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuRadioItem, decorators: [{
             type: Component,
@@ -9767,7 +10125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class ScMenuTriggerFor {
     scMenuTriggerFor = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuTriggerFor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuTriggerFor, isStandalone: true, selector: "[scMenuTriggerFor]", inputs: { scMenuTriggerFor: { classPropertyName: "scMenuTriggerFor", publicName: "scMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i1$5.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "scMenuTriggerFor"] }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuTriggerFor, isStandalone: true, selector: "[scMenuTriggerFor]", inputs: { scMenuTriggerFor: { classPropertyName: "scMenuTriggerFor", publicName: "scMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i1$3.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "scMenuTriggerFor"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuTriggerFor, decorators: [{
             type: Directive,
@@ -9786,7 +10144,7 @@ class ScMenuCheckboxGroup {
     class = input('');
     classes = computed(() => cn('', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuCheckboxGroup, isStandalone: true, selector: "div[sc-menu-checkbox-group]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuGroup }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuCheckboxGroup, isStandalone: true, selector: "div[sc-menu-checkbox-group]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuGroup }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9803,7 +10161,7 @@ class ScMenuBar {
     class = input('');
     classes = computed(() => cn('flex h-10 items-center space-x-1 rounded-md border bg-background p-1', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuBar, isStandalone: true, selector: "div[sc-menu-bar]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuBar }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuBar, isStandalone: true, selector: "div[sc-menu-bar]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuBar }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9820,7 +10178,7 @@ class ScMenuBarItem {
     class = input('');
     classes = computed(() => cn('flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuBarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuBarItem, isStandalone: true, selector: "button[sc-menu-bar-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuItem }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuBarItem, isStandalone: true, selector: "button[sc-menu-bar-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItem }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9861,7 +10219,7 @@ class ScCommandInput {
       class="flex h-12 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
       [placeholder]="placeholder()"
     />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgSearchIcon, selector: "svg-search-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgSearchIcon, selector: "svg-search-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCommandInput, decorators: [{
             type: Component,
@@ -9949,7 +10307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScCommandItem {
     class = input('');
-    classes = computed(() => cn("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_.svg]:pointer-events-none [&_.svg]:size-4 [&_.svg]:shrink-0", this.class()));
+    classes = computed(() => cn("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", this.class()));
     disabled = input(false, {
         transform: booleanAttribute,
     });
@@ -10090,7 +10448,7 @@ class ScCollapsible {
         }
       </cdk-accordion-item>
     </cdk-accordion>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i1$4.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: i1$4.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i1$2.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: i1$2.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCollapsible, decorators: [{
             type: Component,
@@ -10188,7 +10546,7 @@ class ScSidebarToggler {
       <ng-content />
       <span class="sr-only">Toggle Sidebar</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebarToggler, decorators: [{
             type: Component,
@@ -10236,7 +10594,7 @@ class ScSidebarMobile {
 
       <ng-content />
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScSidebarToggler, selector: "sc-sidebar-toggler" }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScSidebarToggler, selector: "sc-sidebar-toggler" }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebarMobile, decorators: [{
             type: Component,
@@ -10398,7 +10756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScAutocompleteItem {
     class = input('');
-    classes = computed(() => cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none hover:bg-accent hover:text-accent-foreground data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_.svg]:pointer-events-none [&_.svg]:size-4 [&_.svg]:shrink-0', this.class()));
+    classes = computed(() => cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none hover:bg-accent hover:text-accent-foreground data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', this.class()));
     _disabled = input(false, {
         transform: booleanAttribute,
     });
@@ -10425,7 +10783,7 @@ class ScAutocompleteItem {
     @if (isSelected()) {
       <svg-check-icon class="ml-auto" />
     }
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAutocompleteItem, decorators: [{
             type: Component,
@@ -10620,7 +10978,7 @@ class ScTimeOption {
     }
 
     <ng-content />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimeOption, decorators: [{
             type: Component,
@@ -10657,6 +11015,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }] });
 
 class ScTimePicker {
+    settings = inject(ScSettings);
+    clock = input(undefined);
+    _clock = computed(() => {
+        if (this.clock() !== undefined) {
+            return this.clock();
+        }
+        return this.settings.clock();
+    });
     class = input('');
     classes = computed(() => cn('flex relative', this.class()));
     _overlay = inject(Overlay);
@@ -10948,11 +11314,11 @@ class ScTimePicker {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScTimePicker, isStandalone: true, selector: "sc-time-picker", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", opened: "opened", closed: "closed" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "_options", predicate: ScTimeOption, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScTimePicker, isStandalone: true, selector: "sc-time-picker", inputs: { clock: { classPropertyName: "clock", publicName: "clock", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", opened: "opened", closed: "closed" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "_options", predicate: ScTimeOption, descendants: true, isSignal: true }], ngImport: i0, template: `
     <button class="absolute inset-y-0 end-0 pe-4" (click)="open()" sc-button variant="ghost">
       <svg-clock-icon />
     </button>
-    <input #input scTimePickerInput type="text" placeholder="Select time" />
+    <input #input scTimePickerInput type="text" placeholder="hh:mm" />
 
     <ng-template #panelTemplate>
       <div
@@ -10969,7 +11335,7 @@ class ScTimePicker {
         }
       </div>
     </ng-template>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgClockIcon, selector: "svg-clock-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: ScTimeOption, selector: "sc-time-option", inputs: ["class", "disabled", "value"], outputs: ["selected"] }, { kind: "directive", type: ScTimePickerInput, selector: "[scTimePickerInput]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgClockIcon, selector: "svg-clock-icon", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: ScTimeOption, selector: "sc-time-option", inputs: ["class", "disabled", "value"], outputs: ["selected"] }, { kind: "directive", type: ScTimePickerInput, selector: "[scTimePickerInput]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimePicker, decorators: [{
             type: Component,
@@ -10977,7 +11343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
     <button class="absolute inset-y-0 end-0 pe-4" (click)="open()" sc-button variant="ghost">
       <svg-clock-icon />
     </button>
-    <input #input scTimePickerInput type="text" placeholder="Select time" />
+    <input #input scTimePickerInput type="text" placeholder="hh:mm" />
 
     <ng-template #panelTemplate>
       <div
@@ -11007,9 +11373,750 @@ function scrollOptionIntoView(option, position) {
     option._getHostElement().scrollIntoView({ block: position, inline: position });
 }
 
+class ScImage {
+    class = input('');
+    _class = computed(() => cn('', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScImage, isStandalone: true, selector: "img[sc-image]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScImage, decorators: [{
+            type: Component,
+            args: [{ selector: 'img[sc-image]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScFileUpload {
+    class = input('');
+    _class = computed(() => cn('', this.class()));
+    selectedFile = signal(undefined);
+    handleFileChange(event) {
+        const target = event.target;
+        const files = target.files;
+        console.log(files);
+        const file = files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                this.selectedFile.set(reader.result);
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScFileUpload, isStandalone: true, selector: "sc-file-upload", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <div class="grid w-full max-w-sm items-center gap-1.5">
+      <label sc-label for="picture">Picture</label>
+      <input id="picture" (change)="handleFileChange($event)" sc-input type="file" />
+      @if (selectedFile()) {
+        <div class="mt-2">
+          <img
+            class="rounded-md"
+            [src]="selectedFile()"
+            sc-image
+            alt="Preview"
+            width="500"
+            height="500"
+          />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScLabel, selector: "label[sc-label]", inputs: ["class"] }, { kind: "component", type: ScInput, selector: "input[sc-input]", inputs: ["class"] }, { kind: "component", type: ScImage, selector: "img[sc-image]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-file-upload', imports: [ScLabel, ScInput, ScImage], template: `
+    <div class="grid w-full max-w-sm items-center gap-1.5">
+      <label sc-label for="picture">Picture</label>
+      <input id="picture" (change)="handleFileChange($event)" sc-input type="file" />
+      @if (selectedFile()) {
+        <div class="mt-2">
+          <img
+            class="rounded-md"
+            [src]="selectedFile()"
+            sc-image
+            alt="Preview"
+            width="500"
+            height="500"
+          />
+        </div>
+      }
+    </div>
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScDropZone {
+    isDragActive = signal(false);
+    isDisabled = input(false);
+    class = input('');
+    _class = computed(() => cn('group relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed border-muted-foreground/25 px-5 py-2.5 text-center transition hover:bg-muted/25', 'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', this.isDragActive() && 'border-muted-foreground/50', this.isDisabled() && 'pointer-events-none opacity-60', this.class()));
+    handleDragOver(event) {
+        if (this.isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else {
+            this.isDragActive.set(true);
+        }
+    }
+    handleDragLeave(event) {
+        if (this.isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else {
+            this.isDragActive.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDropZone, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScDropZone, isStandalone: true, selector: "[scDropZone]", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "dragover": "handleDragOver($event)", "dragleave": "handleDragLeave($event)" }, properties: { "class": "_class()" } }, exportAs: ["scDropZone"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDropZone, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scDropZone]',
+                    exportAs: 'scDropZone',
+                    host: {
+                        '[class]': '_class()',
+                        '(dragover)': 'handleDragOver($event)',
+                        '(dragleave)': 'handleDragLeave($event)',
+                    },
+                }]
+        }] });
+
+class ScFilePreview {
+    file = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFilePreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScFilePreview, isStandalone: true, selector: "sc-file-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (file().file.type.startsWith('image/')) {
+      <img
+        class="aspect-square shrink-0 rounded-md object-cover"
+        [src]="file().preview"
+        [alt]="file().file.name"
+        width="48"
+        height="48"
+        loading="lazy"
+      />
+    } @else {
+      <svg-file-text-icon class="size-10 text-muted-foreground" aria-hidden="true" />
+    }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgFileTextIcon, selector: "svg-file-text-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFilePreview, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-file-preview', imports: [SvgFileTextIcon], template: `
+    @if (file().file.type.startsWith('image/')) {
+      <img
+        class="aspect-square shrink-0 rounded-md object-cover"
+        [src]="file().preview"
+        [alt]="file().file.name"
+        width="48"
+        height="48"
+        loading="lazy"
+      />
+    } @else {
+      <svg-file-text-icon class="size-10 text-muted-foreground" aria-hidden="true" />
+    }
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+function formatBytes(bytes, opts = {}) {
+    const { decimals = 0, sizeType = 'normal' } = opts;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const accurateSizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];
+    if (bytes === 0)
+        return '0 Byte';
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${sizeType === 'accurate' ? (accurateSizes[i] ?? 'Bytes') : (sizes[i] ?? 'Bytes')}`;
+}
+
+class ScFileCard {
+    index = input.required();
+    file = input.required();
+    progress = input(undefined);
+    removed = output();
+    formatedSize = computed(() => formatBytes(this.file().file.size));
+    remove() {
+        this.removed.emit(this.index());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFileCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScFileCard, isStandalone: true, selector: "sc-file-card", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: `
+    <div class="relative flex items-center gap-2.5">
+      <div class="flex flex-1 gap-2.5">
+        @if (file().preview) {
+          <sc-file-preview [file]="file()" />
+        }
+
+        <div class="flex w-full flex-col gap-2">
+          <div class="flex flex-col gap-px">
+            <p class="line-clamp-1 text-sm font-medium text-foreground/80">
+              {{ file().file.name }}
+            </p>
+            <p class="text-xs text-muted-foreground">
+              {{ formatedSize() }}
+            </p>
+          </div>
+
+          @let p = progress();
+          @if (p) {
+            <sc-progress [value]="p" />
+          }
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <button
+          class="size-7"
+          (click)="remove()"
+          sc-button
+          type="button"
+          variant="outline"
+          size="icon"
+        >
+          <svg-x-icon class="size-4" aria-hidden="true" />
+          <span class="sr-only">Remove file</span>
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: ScFilePreview, selector: "sc-file-preview", inputs: ["file"] }, { kind: "component", type: ScProgress, selector: "sc-progress", inputs: ["class", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFileCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-file-card', imports: [SvgXIcon, ScButton, ScFilePreview, ScProgress], template: `
+    <div class="relative flex items-center gap-2.5">
+      <div class="flex flex-1 gap-2.5">
+        @if (file().preview) {
+          <sc-file-preview [file]="file()" />
+        }
+
+        <div class="flex w-full flex-col gap-2">
+          <div class="flex flex-col gap-px">
+            <p class="line-clamp-1 text-sm font-medium text-foreground/80">
+              {{ file().file.name }}
+            </p>
+            <p class="text-xs text-muted-foreground">
+              {{ formatedSize() }}
+            </p>
+          </div>
+
+          @let p = progress();
+          @if (p) {
+            <sc-progress [value]="p" />
+          }
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <button
+          class="size-7"
+          (click)="remove()"
+          sc-button
+          type="button"
+          variant="outline"
+          size="icon"
+        >
+          <svg-x-icon class="size-4" aria-hidden="true" />
+          <span class="sr-only">Remove file</span>
+        </button>
+      </div>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScFileUploader {
+    class = input('');
+    _class = computed(() => cn('relative flex flex-col gap-6 overflow-hidden', this.class()));
+    maxSize = input(1024 * 1024 * 2);
+    maxFiles = input(1);
+    files = signal([]);
+    multiple = computed(() => this.maxFiles() > 1);
+    progresses = input();
+    uploadInfo() {
+        return this.maxFiles() > 1
+            ? ` ${this.maxFiles()} files (up to ${formatBytes(this.maxSize())} each)`
+            : ` a file with ${formatBytes(this.maxSize())}`;
+    }
+    onRemove(index) {
+        if (!this.files)
+            return;
+        this.files.update((files) => files.filter((_, i) => i !== index));
+    }
+    handleFileChange(event) {
+        const target = event.target;
+        const files = target.files;
+        const acceptedFiles = Array.from(files);
+        acceptedFiles.forEach((file) => {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const scFile = { file: file, preview: reader.result };
+                this.files.update((files) => [...files, scFile]);
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFileUploader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScFileUploader, isStandalone: true, selector: "sc-file-uploader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, progresses: { classPropertyName: "progresses", publicName: "progresses", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <!-- Dropzone -->
+    <div #scDropZone="scDropZone" scDropZone>
+      <input
+        class="absolute left-0 top-0 size-full cursor-pointer opacity-0"
+        [multiple]="multiple()"
+        (change)="handleFileChange($event)"
+        accept="image/*"
+        tabindex="-1"
+        type="file"
+      />
+
+      @if (scDropZone.isDragActive()) {
+        <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+          <div class="rounded-full border border-dashed p-3">
+            <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+          </div>
+          <p class="font-medium text-muted-foreground">Drop the files here</p>
+        </div>
+      } @else {
+        <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+          <div class="rounded-full border border-dashed p-3">
+            <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+          </div>
+          <div class="flex flex-col gap-px">
+            <p class="font-medium text-muted-foreground">
+              Drag 'n' drop your files here, or click to select files
+            </p>
+            <p class="text-sm text-muted-foreground/70">You can upload {{ uploadInfo() }}</p>
+          </div>
+        </div>
+      }
+    </div>
+    <!-- fin Dropzone -->
+
+    <div class="h-fit w-full px-3">
+      <div class="flex max-h-48 flex-col gap-4">
+        @for (file of files(); track $index; let index = $index) {
+          <sc-file-card
+            [file]="file"
+            [index]="index"
+            [progress]="progresses()?.[file.file.name]"
+            (removed)="onRemove($event)"
+          />
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgUploadIcon, selector: "svg-upload-icon", inputs: ["class"] }, { kind: "component", type: ScFileCard, selector: "sc-file-card", inputs: ["index", "file", "progress"], outputs: ["removed"] }, { kind: "directive", type: ScDropZone, selector: "[scDropZone]", inputs: ["isDisabled", "class"], exportAs: ["scDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFileUploader, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-file-uploader', imports: [SvgUploadIcon, ScFileCard, ScDropZone], template: `
+    <!-- Dropzone -->
+    <div #scDropZone="scDropZone" scDropZone>
+      <input
+        class="absolute left-0 top-0 size-full cursor-pointer opacity-0"
+        [multiple]="multiple()"
+        (change)="handleFileChange($event)"
+        accept="image/*"
+        tabindex="-1"
+        type="file"
+      />
+
+      @if (scDropZone.isDragActive()) {
+        <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+          <div class="rounded-full border border-dashed p-3">
+            <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+          </div>
+          <p class="font-medium text-muted-foreground">Drop the files here</p>
+        </div>
+      } @else {
+        <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+          <div class="rounded-full border border-dashed p-3">
+            <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+          </div>
+          <div class="flex flex-col gap-px">
+            <p class="font-medium text-muted-foreground">
+              Drag 'n' drop your files here, or click to select files
+            </p>
+            <p class="text-sm text-muted-foreground/70">You can upload {{ uploadInfo() }}</p>
+          </div>
+        </div>
+      }
+    </div>
+    <!-- fin Dropzone -->
+
+    <div class="h-fit w-full px-3">
+      <div class="flex max-h-48 flex-col gap-4">
+        @for (file of files(); track $index; let index = $index) {
+          <sc-file-card
+            [file]="file"
+            [index]="index"
+            [progress]="progresses()?.[file.file.name]"
+            (removed)="onRemove($event)"
+          />
+        }
+      </div>
+    </div>
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScSingleFileUploader {
+    dataService = inject(DataService);
+    class = input('');
+    _class = computed(() => cn('relative flex flex-col gap-6 overflow-hidden', this.class()));
+    file = signal(undefined);
+    fileUrl = computed(() => {
+        const file = this.file();
+        if (file) {
+            return URL.createObjectURL(file);
+        }
+        // return null or undefined
+        return file;
+    });
+    status = linkedSignal({
+        source: this.file,
+        computation: () => {
+            return 'init';
+        },
+    });
+    uploadProgress = signal(0);
+    maxSize = input(1024 * 1024 * 2);
+    uploadInfo() {
+        return ` a file with ${formatBytes(this.maxSize())}`;
+    }
+    handleFileChange(event) {
+        const target = event.target;
+        const files = target.files;
+        const file = files[0];
+        this.file.set(file);
+    }
+    removeFile() {
+        this.file.set(null);
+    }
+    uploadFile() {
+        const file = this.file();
+        if (!file) {
+            //TODO add message error
+            return;
+        }
+        this.status.set('uploading');
+        this.dataService
+            .uploadFile(file)
+            .pipe(catchError((error) => {
+            this.status.set('error');
+            // Quality control catches the problem
+            console.error('Delivery problem:', error);
+            // Send an apology note or fix the issue
+            return throwError(() => new Error('Oops! Something went wrong. Please try again later.'));
+        }))
+            .subscribe((event) => {
+            if (event.type === HttpEventType.UploadProgress) {
+                if (event.total) {
+                    this.uploadProgress.set(Math.round((100 * event.loaded) / event.total));
+                }
+                else {
+                    console.warn('event.total is undefined');
+                }
+            }
+            else if (event instanceof HttpResponse) {
+                this.uploadProgress.set(100);
+                this.status.set('success');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSingleFileUploader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScSingleFileUploader, isStandalone: true, selector: "sc-single-file-uploader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    @if (!fileUrl()) {
+      <!-- Dropzone -->
+      <div #scDropZone="scDropZone" scDropZone>
+        <input
+          class="absolute left-0 top-0 size-full cursor-pointer opacity-0"
+          (change)="handleFileChange($event)"
+          accept="image/*"
+          tabindex="-1"
+          type="file"
+        />
+
+        @if (scDropZone.isDragActive()) {
+          <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+            <div class="rounded-full border border-dashed p-3">
+              <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+            </div>
+            <p class="font-medium text-muted-foreground">Drop the files here</p>
+          </div>
+        } @else {
+          <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+            <div class="rounded-full border border-dashed p-3">
+              <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+            </div>
+            <div class="flex flex-col gap-px">
+              <p class="font-medium text-muted-foreground">
+                Drag 'n' drop your files here, or click to select files
+              </p>
+              <p class="text-sm text-muted-foreground/70">You can upload {{ uploadInfo() }}</p>
+            </div>
+          </div>
+        }
+      </div>
+      <!-- fin Dropzone -->
+    }
+
+    <!-- Start Preview Image -->
+    @if (fileUrl()) {
+      <sc-aspect-ratio [src]="fileUrl() ?? ''" ratio="16 / 9" alt="" />
+
+      <p>{{ file()?.name }}</p>
+
+      <sc-progress [value]="uploadProgress()" />
+
+      <div class="flex justify-start gap-3">
+        <button
+          [disabled]="status() === 'uploading'"
+          (click)="removeFile()"
+          sc-button
+          variant="destructive"
+          type="button"
+        >
+          Remove
+        </button>
+
+        @if (status() === 'init' || status() === 'error') {
+          <button
+            [disabled]="status() === 'uploading'"
+            (click)="uploadFile()"
+            sc-button
+            variant="primary"
+            type="button"
+          >
+            Upload
+          </button>
+        }
+
+        @if (status() === 'uploading') {
+          <button sc-button variant="secondary" type="button">Cancel</button>
+        }
+      </div>
+    }
+    <!-- End Preview Image -->
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScProgress, selector: "sc-progress", inputs: ["class", "value"] }, { kind: "component", type: SvgUploadIcon, selector: "svg-upload-icon", inputs: ["class"] }, { kind: "directive", type: ScDropZone, selector: "[scDropZone]", inputs: ["isDisabled", "class"], exportAs: ["scDropZone"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: ScAspectRatio, selector: "sc-aspect-ratio", inputs: ["imageClass", "hostClass", "wrapperClass", "ratio", "src", "alt", "priority"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSingleFileUploader, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-single-file-uploader', imports: [ScProgress, SvgUploadIcon, ScDropZone, ScButton, ScAspectRatio], template: `
+    @if (!fileUrl()) {
+      <!-- Dropzone -->
+      <div #scDropZone="scDropZone" scDropZone>
+        <input
+          class="absolute left-0 top-0 size-full cursor-pointer opacity-0"
+          (change)="handleFileChange($event)"
+          accept="image/*"
+          tabindex="-1"
+          type="file"
+        />
+
+        @if (scDropZone.isDragActive()) {
+          <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+            <div class="rounded-full border border-dashed p-3">
+              <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+            </div>
+            <p class="font-medium text-muted-foreground">Drop the files here</p>
+          </div>
+        } @else {
+          <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+            <div class="rounded-full border border-dashed p-3">
+              <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+            </div>
+            <div class="flex flex-col gap-px">
+              <p class="font-medium text-muted-foreground">
+                Drag 'n' drop your files here, or click to select files
+              </p>
+              <p class="text-sm text-muted-foreground/70">You can upload {{ uploadInfo() }}</p>
+            </div>
+          </div>
+        }
+      </div>
+      <!-- fin Dropzone -->
+    }
+
+    <!-- Start Preview Image -->
+    @if (fileUrl()) {
+      <sc-aspect-ratio [src]="fileUrl() ?? ''" ratio="16 / 9" alt="" />
+
+      <p>{{ file()?.name }}</p>
+
+      <sc-progress [value]="uploadProgress()" />
+
+      <div class="flex justify-start gap-3">
+        <button
+          [disabled]="status() === 'uploading'"
+          (click)="removeFile()"
+          sc-button
+          variant="destructive"
+          type="button"
+        >
+          Remove
+        </button>
+
+        @if (status() === 'init' || status() === 'error') {
+          <button
+            [disabled]="status() === 'uploading'"
+            (click)="uploadFile()"
+            sc-button
+            variant="primary"
+            type="button"
+          >
+            Upload
+          </button>
+        }
+
+        @if (status() === 'uploading') {
+          <button sc-button variant="secondary" type="button">Cancel</button>
+        }
+      </div>
+    }
+    <!-- End Preview Image -->
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScPageTitle {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('scroll-m-20 text-3xl font-bold tracking-tight', this.classInput()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScPageTitle, isStandalone: true, selector: "h1[sc-page-title]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageTitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'h1[sc-page-title]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScPageSubtitle {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0', this.classInput()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageSubtitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScPageSubtitle, isStandalone: true, selector: "h2[sc-page-subtitle]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageSubtitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'h2[sc-page-subtitle]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScPageDescription {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('text-base text-muted-foreground', this.classInput()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScPageDescription, isStandalone: true, selector: "p[sc-page-description]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageDescription, decorators: [{
+            type: Component,
+            args: [{ selector: 'p[sc-page-description]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class Section {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Section, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: Section, isStandalone: true, selector: "sc-section", ngImport: i0, template: `
+    <p>section works!</p>
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Section, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-section', imports: [], template: `
+    <p>section works!</p>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScCookieConsent {
+    open = signal(true);
+    hidden = signal(false);
+    class = signal(cn('fixed z-[200] bottom-0 left-0 right-0 sm:left-4 sm:bottom-4 w-full sm:max-w-md duration-700', !this.open()
+        ? 'transition-[opacity,transform] translate-y-8 opacity-0'
+        : 'transition-[opacity,transform] translate-y-0 opacity-100', this.hidden() && 'hidden'));
+    accept() {
+        console.log('accept');
+    }
+    decline() {
+        console.log('decline');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCookieConsent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScCookieConsent, isStandalone: true, selector: "sc-cookie-consent", ngImport: i0, template: `
+    <div [class]="class()">
+      <div class="m-3 dark:bg-card bg-background border border-border rounded-lg">
+        <div class="flex items-center justify-between p-3">
+          <h1 class="text-lg font-medium">We use cookies</h1>
+          <svg-cookie-icon class="h-[1.2rem] w-[1.2rem]" />
+        </div>
+        <div class="p-3 -mt-2">
+          <p class="text-sm text-left text-muted-foreground">
+            We use cookies to ensure you get the best experience on our website. For more
+            information on how we use cookies, please see our cookie policy.
+          </p>
+        </div>
+        <div class="p-3 flex items-center gap-2 mt-2 border-t">
+          <button class="w-full h-9 rounded-full" (click)="accept()" sc-button>accept</button>
+          <button class="w-full h-9 rounded-full" (click)="decline()" sc-button variant="outline">
+            decline
+          </button>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCookieIcon, selector: "svg-cookie-icon", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCookieConsent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-cookie-consent', imports: [SvgCookieIcon, ScButton], template: `
+    <div [class]="class()">
+      <div class="m-3 dark:bg-card bg-background border border-border rounded-lg">
+        <div class="flex items-center justify-between p-3">
+          <h1 class="text-lg font-medium">We use cookies</h1>
+          <svg-cookie-icon class="h-[1.2rem] w-[1.2rem]" />
+        </div>
+        <div class="p-3 -mt-2">
+          <p class="text-sm text-left text-muted-foreground">
+            We use cookies to ensure you get the best experience on our website. For more
+            information on how we use cookies, please see our cookie policy.
+          </p>
+        </div>
+        <div class="p-3 flex items-center gap-2 mt-2 border-t">
+          <button class="w-full h-9 rounded-full" (click)="accept()" sc-button>accept</button>
+          <button class="w-full h-9 rounded-full" (click)="decline()" sc-button variant="outline">
+            decline
+          </button>
+        </div>
+      </div>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FormFieldCustomControlComponent, ScAccordion, ScAccordionContent, ScAccordionHeader, ScAccordionItem, ScAccordionItemDescription, ScAccordionTrigger, ScAlert, ScAlertDescription, ScAlertDialog, ScAlertTitle, ScAspectRatio, ScAutocomplete, ScAvatar, ScBadge, ScBreadcrumb, ScBreadcrumbEllipsis, ScBreadcrumbItem, ScBreadcrumbLink, ScBreadcrumbList, ScBreadcrumbPage, ScBreadcrumbSeparator, ScButton, ScCalendar, ScCard, ScCardContent, ScCardDescription, ScCardFooter, ScCardHeader, ScCardTitle, ScCarousel, ScCarouselContainer, ScCarouselItem, ScCarouselItems, ScCarouselNext, ScCarouselPrevious, ScCheckbox, ScCollapsible, ScCollapsibleContent, ScCollapsibleTrigger, ScCommand, ScCommandDialog, ScCommandEmpty, ScCommandError, ScCommandGroup, ScCommandInput, ScCommandItem, ScCommandList, ScCommandLoading, ScCommandSeparator, ScCommandShortcut, ScContextMenuTriggerFor, ScDataTable, ScDatePicker, ScDialog, ScDialogClose, ScDialogContent, ScDialogDescription, ScDialogFooter, ScDialogHeader, ScDialogTitle, ScEditor, ScFullCalendar, ScHoverCard, ScHoverCardTriggerFor, ScInput, ScInputOTPGroup, ScInputOTPSeparator, ScInputOTPSlot, ScInputOtp, ScLabel, ScMenu, ScMenuBar, ScMenuBarItem, ScMenuCheckboxGroup, ScMenuCheckboxItem, ScMenuGroup, ScMenuItem, ScMenuLabel, ScMenuRadioGroup, ScMenuRadioItem, ScMenuSeparator, ScMenuShortcut, ScMenuTriggerFor, ScNav, ScNavItem, ScNavItemDropdown, ScNavLink, ScNavList, ScOption, ScPaginator, ScPopoverTriggerFor, ScProgress, ScRadioGroup, ScRadioItem, ScScrollArea, ScSelect, ScSettings, ScSheet, ScSheetClose, ScSheetConfig, ScSheetTrigger, ScSidebar, ScSidebarProvider, ScSidebarState, ScSidebarToggler, ScSkeleton, ScSlider, ScSwitch, ScTab, ScTabContent, ScTabLabel, ScTable, ScTableBody, ScTableCaption, ScTableCell, ScTableContainer, ScTableFooter, ScTableHead, ScTableHeader, ScTableRow, ScTabs, ScTextarea, ScThemeToggler, ScTimePicker, ScToast, ScToastExample, ScToggle, ScTooltip, TelInputComponent, TelModel, Toaster, buttonVariants, cn, scInputStyles, scThemeProvider };
+export { FormFieldCustomControlComponent, ScAccordion, ScAccordionContent, ScAccordionHeader, ScAccordionItem, ScAccordionItemDescription, ScAccordionTrigger, ScAlert, ScAlertDescription, ScAlertDialog, ScAlertTitle, ScArticle, ScAspectRatio, ScAutocomplete, ScAvatar, ScBadge, ScBlockquote, ScBreadcrumb, ScBreadcrumbEllipsis, ScBreadcrumbItem, ScBreadcrumbLink, ScBreadcrumbList, ScBreadcrumbPage, ScBreadcrumbSeparator, ScButton, ScCalendar, ScCard, ScCardContent, ScCardDescription, ScCardFooter, ScCardHeader, ScCardTitle, ScCarousel, ScCarouselContainer, ScCarouselItem, ScCarouselItems, ScCarouselNext, ScCarouselPrevious, ScCheckbox, ScCollapsible, ScCollapsibleContent, ScCollapsibleTrigger, ScCommand, ScCommandDialog, ScCommandEmpty, ScCommandError, ScCommandGroup, ScCommandInput, ScCommandItem, ScCommandList, ScCommandLoading, ScCommandSeparator, ScCommandShortcut, ScContextMenuTriggerFor, ScCookieConsent, ScDataTable, ScDatePicker, ScDialog, ScDialogClose, ScDialogContent, ScDialogDescription, ScDialogFooter, ScDialogHeader, ScDialogTitle, ScEditor, ScFileUpload, ScFileUploader, ScFullCalendar, ScHeading, ScHoverCard, ScHoverCardTriggerFor, ScInput, ScInputOTPGroup, ScInputOTPSeparator, ScInputOTPSlot, ScInputOtp, ScLabel, ScMenu, ScMenuBar, ScMenuBarItem, ScMenuCheckboxGroup, ScMenuCheckboxItem, ScMenuGroup, ScMenuItem, ScMenuLabel, ScMenuRadioGroup, ScMenuRadioItem, ScMenuSeparator, ScMenuShortcut, ScMenuTriggerFor, ScNav, ScNavItem, ScNavItemDropdown, ScNavLink, ScNavList, ScOption, ScPageDescription, ScPageSubtitle, ScPageTitle, ScPaginator, ScPopoverTriggerFor, ScProgress, ScRadioGroup, ScRadioItem, ScScrollArea, ScSelect, ScSeparator, ScSettings, ScSheet, ScSheetClose, ScSheetConfig, ScSheetTrigger, ScSidebar, ScSidebarProvider, ScSidebarState, ScSidebarToggler, ScSingleFileUploader, ScSkeleton, ScSlider, ScSwitch, ScTab, ScTabContent, ScTabContent2, ScTabGroup, ScTabItem, ScTabLabel, ScTabLabel2, ScTable, ScTableBody, ScTableCaption, ScTableCell, ScTableContainer, ScTableFooter, ScTableHead, ScTableHeader, ScTableRow, ScTabs, ScTextarea, ScThemeToggler, ScTimePicker, ScToast, ScToastExample, ScToggle, ScToggleGroup, ScToggleGroupItem, ScTooltip, Section, TelInputComponent, TelModel, Toaster, buttonVariants, scArticleClasses, scInputStyles, scThemeProvider };
 //# sourceMappingURL=semantic-components-ui.mjs.map