@semantic-components/ui 0.33.0 → 0.34.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Khalil LAGRIDA
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/fesm2022/semantic-components-ui.mjs

@@ -29,6 +29,8 @@ import * as i1$3 from '@angular/cdk/accordion';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { BreakpointObserver, LayoutModule } from '@angular/cdk/layout';
+import * as i1$4 from '@angular/router';
+import { RouterLinkActive } from '@angular/router';
 import { HttpEventType, HttpResponse } from '@angular/common/http';
 import { DataService } from '@semantic-components/supabase';
 import { debounceTime as debounceTime$1, distinctUntilChanged } from 'rxjs/operators';
@@ -8375,6 +8377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class InputOtpHandler {
     inputIndex = signal(-1);
+    length = signal(0);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InputOtpHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InputOtpHandler });
 }
@@ -8384,17 +8387,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class ScInputOTPSlot {
     inputOtpHandler = inject(InputOtpHandler);
-    class = input('');
-    classes = computed(() => cn('flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', this.isActive() && 'z-10 ring-2 ring-ring ring-offset-background', this.class()));
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', this.isActive() && 'z-10 ring-2 ring-ring ring-offset-background', this.classInput()));
     formControl = signal(null);
     index = 0;
     isActive = signal(false);
     input = viewChild.required('input');
-    _handleInput() {
-        this.inputOtpHandler.inputIndex.set(this.index);
+    handleKeydown(event) {
+        if (event.key === 'Backspace') {
+            this.autoFocusPrev();
+        }
+        else {
+            this.autoFocusNext();
+        }
+    }
+    autoFocusNext() {
+        if (this.inputOtpHandler.inputIndex() < this.inputOtpHandler.length() - 1) {
+            this.isActive.set(false);
+            this.inputOtpHandler.inputIndex.update((index) => index + 1);
+        }
+    }
+    autoFocusPrev() {
+        //TODO remove old data
+        if (this.inputOtpHandler.inputIndex() > 0) {
+            this.isActive.set(false);
+            this.inputOtpHandler.inputIndex.update((index) => index - 1);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScInputOTPSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ScInputOTPSlot, isStandalone: true, selector: "sc-input-otp-slot", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ScInputOTPSlot, isStandalone: true, selector: "sc-input-otp-slot", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @let control = formControl();
     @if (control !== null) {
       <input
@@ -8402,7 +8425,7 @@ class ScInputOTPSlot {
         #input
         [formControl]="control"
         [readonly]="!isActive()"
-        (input)="_handleInput()"
+        (keydown)="handleKeydown($event)"
         type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
@@ -8422,7 +8445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
         #input
         [formControl]="control"
         [readonly]="!isActive()"
-        (input)="_handleInput()"
+        (keydown)="handleKeydown($event)"
         type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
@@ -8431,17 +8454,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
       />
     }
   `, host: {
-                        '[class]': 'classes()',
+                        '[class]': 'class()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
 class ScInputOtp {
     inputOtpHandler = inject(InputOtpHandler);
-    _focusMonitor = inject(FocusMonitor);
-    _cdr = inject(ChangeDetectorRef);
-    class = input('');
-    classes = computed(() => cn('flex items-center gap-2 has-[:disabled]:opacity-50', this.class()));
-    _required = input(false, {
+    focusMonitor = inject(FocusMonitor);
+    changeDetectorRef = inject(ChangeDetectorRef);
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('flex items-center gap-2 has-[:disabled]:opacity-50', this.classInput()));
+    required = input(false, {
         alias: 'required',
         transform: booleanAttribute,
     });
@@ -8454,28 +8479,24 @@ class ScInputOtp {
     slots = contentChildren(ScInputOTPSlot, { descendants: true });
     constructor() {
         effect(() => {
-            if (this.inputOtpHandler.inputIndex() !== -1 &&
-                this.inputOtpHandler.inputIndex() < this.slots().length - 1 &&
-                this.slots().length > 1) {
+            if (this.inputOtpHandler.inputIndex() !== -1) {
                 const index = this.inputOtpHandler.inputIndex();
-                const currentSlot = this.slots()[index];
-                currentSlot.isActive.set(false);
-                const nextSlot = this.slots()[index + 1];
-                nextSlot.isActive.set(true);
-                this._focusMonitor.focusVia(nextSlot.input(), 'program');
+                const slot = this.slots()[index];
+                //TODO remove old data
+                slot.isActive.set(true);
+                this.focusMonitor.focusVia(slot.input(), 'program');
             }
         });
         afterNextRender(() => {
             for (let i = 0; i < this.slots().length; i++) {
                 const slot = this.slots()[i];
-                if (i === 0) {
-                    slot.isActive.set(true);
-                }
                 const formControl = new FormControl('', Validators.required);
                 slot.index = i;
                 slot.formControl.set(formControl);
                 this.inputs.push(formControl);
             }
+            this.inputOtpHandler.length.set(this.slots().length);
+            this.inputOtpHandler.inputIndex.set(0);
         });
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         this.formGroup.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
@@ -8495,7 +8516,7 @@ class ScInputOtp {
         // }
         this._value.set(tel);
         this.onChange(tel);
-        this._cdr.markForCheck();
+        this.changeDetectorRef.markForCheck();
     }
     _value = model(null, { alias: 'value' });
     disabledByInput = input(false, {
@@ -8527,10 +8548,10 @@ class ScInputOtp {
     stateChanges = new Subject();
     ngOnDestroy() {
         this.stateChanges.complete();
-        this._focusMonitor.stopMonitoring(this._elementRef);
+        this.focusMonitor.stopMonitoring(this._elementRef);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScInputOtp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: ScInputOtp, isStandalone: true, selector: "sc-input-otp", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, _value: { classPropertyName: "_value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledByInput: { classPropertyName: "disabledByInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _value: "valueChange" }, host: { properties: { "class": "classes()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: ScInputOtp, isStandalone: true, selector: "sc-input-otp", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, _value: { classPropertyName: "_value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledByInput: { classPropertyName: "disabledByInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _value: "valueChange" }, host: { properties: { "class": "class()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ScInputOtp),
@@ -8550,7 +8571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
     <ng-content />
   `,
                     host: {
-                        '[class]': 'classes()',
+                        '[class]': 'class()',
                     },
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -8566,10 +8587,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
         }], ctorParameters: () => [] });
 
 class ScInputOTPGroup {
-    class = input('');
-    classes = computed(() => cn('flex items-center', this.class()));
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('flex items-center', this.classInput()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScInputOTPGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ScInputOTPGroup, isStandalone: true, selector: "sc-input-otp-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.1.4", type: ScInputOTPGroup, isStandalone: true, selector: "sc-input-otp-group", 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 });
 }
@@ -8578,15 +8601,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             args: [{ selector: 'sc-input-otp-group', imports: [], template: `
     <ng-content />
   `, host: {
-                        '[class]': 'classes()',
+                        '[class]': 'class()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
 class ScInputOTPSeparator {
-    class = input('');
-    classes = computed(() => cn('', this.class()));
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('', this.classInput()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScInputOTPSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ScInputOTPSeparator, isStandalone: true, selector: "sc-input-otp-separator", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
     <svg si-dot-icon></svg>
   `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SiDotIcon, selector: "svg[si-dot-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -8595,7 +8620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             args: [{ selector: 'sc-input-otp-separator', imports: [SiDotIcon], template: `
     <svg si-dot-icon></svg>
   `, host: {
-                        '[class]': 'classes()',
+                        '[class]': 'class()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
@@ -12428,6 +12453,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [] }]
         }] });
 
+class ScSidebarGroup {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('relative flex w-full min-w-0 flex-col p-2', this.classInput()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ScSidebarGroup, isStandalone: true, selector: "sc-sidebar-group", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "attr.data-sidebar": "\"group\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-sidebar-group', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'class()',
+                        '[attr.data-sidebar]': '"group"',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScSidebarGroupLabel {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', this.classInput()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ScSidebarGroupLabel, isStandalone: true, selector: "sc-sidebar-group-label", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "attr.data-sidebar": "\"group-label\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarGroupLabel, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-sidebar-group-label', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'class()',
+                        '[attr.data-sidebar]': '"group-label"',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScSidebarGroupAction {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+    // Increases the hit area of the button on mobile.
+    'after:absolute after:-inset-2 after:md:hidden', 'group-data-[collapsible=icon]:hidden', this.classInput()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarGroupAction, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ScSidebarGroupAction, isStandalone: true, selector: "sc-sidebar-group-action", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "attr.data-sidebar": "\"group-action\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarGroupAction, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-sidebar-group-action', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'class()',
+                        '[attr.data-sidebar]': '"group-action"',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScSidebarGroupContent {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('w-full text-sm', this.classInput()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarGroupContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ScSidebarGroupContent, isStandalone: true, selector: "div[sc-sidebar-group-content]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "attr.data-sidebar": "\"group-content\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarGroupContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[sc-sidebar-group-content]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'class()',
+                        '[attr.data-sidebar]': '"group-content"',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScSidebarMenu {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('flex w-full min-w-0 flex-col gap-1', this.classInput()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ScSidebarMenu, isStandalone: true, selector: "ul[sc-sidebar-menu]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "attr.data-sidebar": "\"menu\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'ul[sc-sidebar-menu]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'class()',
+                        '[attr.data-sidebar]': '"menu"',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScSidebarMenuItem {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('group/menu-item relative', this.classInput()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ScSidebarMenuItem, isStandalone: true, selector: "li[sc-sidebar-menu-item]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "attr.data-sidebar": "\"menu-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.1.4", ngImport: i0, type: ScSidebarMenuItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[sc-sidebar-menu-item]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'class()',
+                        '[attr.data-sidebar]': '"menu-item"',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+            outline: 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+        },
+        size: {
+            default: 'h-8 text-sm',
+            sm: 'h-7 text-xs',
+            lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+class ScSidebarMenuBase {
+    classInput = input('', {
+        alias: 'class',
+    });
+    variant = input('default');
+    size = input('default');
+    class = computed(() => cn(sidebarMenuButtonVariants({ variant: this.variant(), size: this.size() }), this.classInput()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarMenuBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: ScSidebarMenuBase, isStandalone: true, inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarMenuBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[class]': 'class()',
+                    },
+                }]
+        }] });
+
+class ScSidebarMenuLink extends ScSidebarMenuBase {
+    routerLinkActive = inject(RouterLinkActive);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarMenuLink, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ScSidebarMenuLink, isStandalone: true, selector: "a[sc-sidebar-menu-link]", host: { properties: { "attr.data-sidebar": "\"menu-link\"", "attr.data-active": "routerLinkActive.isActive" } }, usesInheritance: true, hostDirectives: [{ directive: i1$4.RouterLinkActive }], ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarMenuLink, decorators: [{
+            type: Component,
+            args: [{ selector: 'a[sc-sidebar-menu-link]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[attr.data-sidebar]': '"menu-link"',
+                        '[attr.data-active]': 'routerLinkActive.isActive',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [RouterLinkActive] }]
+        }] });
+
+class ScSidebarMenuButton extends ScSidebarMenuBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarMenuButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ScSidebarMenuButton, isStandalone: true, selector: "button[sc-sidebar-menu-button]", host: { properties: { "attr.data-sidebar": "\"menu-button\"" } }, usesInheritance: true, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScSidebarMenuButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[sc-sidebar-menu-button]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[attr.data-sidebar]': '"menu-button"',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
 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()));
@@ -15295,7 +15510,7 @@ class ShikiService {
         if (!this.highlighter) {
             this.highlighter = await createHighlighter({
                 themes: ['github-dark'],
-                langs: ['angular-html'],
+                langs: ['angular-html', 'typescript'], //TODO provider langs and themes
             });
         }
         return this.highlighter;
@@ -15318,6 +15533,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
         }] });
 
 class ScCodeHighlighter {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('block', this.classInput()));
     shikiService = inject(ShikiService);
     sanitizer = inject(DomSanitizer);
     code = input.required();
@@ -15329,15 +15548,14 @@ class ScCodeHighlighter {
         this.highlightedCode.set(this.sanitizer.bypassSecurityTrustHtml(highlighted));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScCodeHighlighter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ScCodeHighlighter, isStandalone: true, selector: "sc-code-highlighter", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="code-block" [innerHTML]="highlightedCode()"></div>
-  `, isInline: true, styles: [".code-block{background:#24292e;border-radius:6px;padding:16px 16px 40px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ScCodeHighlighter, isStandalone: true, selector: "sc-code-highlighter", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "innerHTML": "highlightedCode()" } }, ngImport: i0, template: ``, isInline: true, styles: ["pre{overflow:auto;border-radius:.375rem;padding-left:1rem;padding-right:1rem;padding-bottom:1.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScCodeHighlighter, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-code-highlighter', imports: [], template: `
-    <div class="code-block" [innerHTML]="highlightedCode()"></div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".code-block{background:#24292e;border-radius:6px;padding:16px 16px 40px}\n"] }]
+            args: [{ selector: 'sc-code-highlighter', imports: [], template: ``, host: {
+                        '[class]': 'class()',
+                        '[innerHTML]': 'highlightedCode()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["pre{overflow:auto;border-radius:.375rem;padding-left:1rem;padding-right:1rem;padding-bottom:1.5rem}\n"] }]
         }] });
 
 class ScChat {
@@ -15444,5 +15662,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FormFieldCustomControlComponent, ScAccordion, ScAccordionContent, ScAccordionHeader, ScAccordionItem, ScAccordionItemDescription, ScAccordionTrigger, ScAlert, ScAlertDescription, ScAlertDialogTrigger, ScAlertTitle, ScArticle, ScAspectRatio, ScAutoResizeInput, 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, ScChat, ScCheckbox, ScCheckboxGroup, ScCheckboxItem, ScCircularProgress, ScClockPicker, ScClockPicker2, ScCodeHighlighter, ScCollapsible, ScCollapsibleContent, ScCollapsibleTrigger, ScCombobox, ScCommand, ScCommandDialog, ScCommandEmpty, ScCommandError, ScCommandGroup, ScCommandInput, ScCommandItem, ScCommandList, ScCommandLoading, ScCommandSeparator, ScCommandShortcut, ScComments, ScConfirmationDialog, ScContextMenuTriggerFor, ScCookieConsent, ScCursor, ScDataTable, ScDatePicker, ScDialog, ScDialogClose, ScDialogContent, ScDialogDescription, ScDialogFooter, ScDialogHeader, ScDialogTitle, ScEditor, ScFileUpload, ScFileUploader, ScFullCalendar, ScHeading, ScHoverCard, ScHoverCardTriggerFor, ScImagePlaceholder, ScInput, ScInputOTPGroup, ScInputOTPSeparator, ScInputOTPSlot, ScInputOtp, ScInputPassword, ScLabel, ScMenu, ScMenuBar, ScMenuBarItem, ScMenuCheckboxGroup, ScMenuCheckboxItem, ScMenuGroup, ScMenuItem, ScMenuLabel, ScMenuRadioGroup, ScMenuRadioItem, ScMenuSeparator, ScMenuShortcut, ScMenuTriggerFor, ScMobileCalendar, ScNav, ScNavItem, ScNavItemDropdown, ScNavLink, ScNavList, ScOption, ScPageDescription, ScPageSubtitle, ScPageTitle, ScPaginator, ScPlainInput, ScPopoverTriggerFor, ScProgress, ScRTL, 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, ScTags, ScTextarea, ScThemeToggler, ScTimePicker, ScTimePicker2, ScToast, ScToastExample, ScToggle, ScToggleGroup, ScToggleGroupItem, ScTooltip, ScWeekView, Section, TelInputComponent, TelModel, Toaster, buttonVariants, scArticleClasses, scInputStyles, scThemeProvider };
+export { FormFieldCustomControlComponent, ScAccordion, ScAccordionContent, ScAccordionHeader, ScAccordionItem, ScAccordionItemDescription, ScAccordionTrigger, ScAlert, ScAlertDescription, ScAlertDialogTrigger, ScAlertTitle, ScArticle, ScAspectRatio, ScAutoResizeInput, 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, ScChat, ScCheckbox, ScCheckboxGroup, ScCheckboxItem, ScCircularProgress, ScClockPicker, ScClockPicker2, ScCodeHighlighter, ScCollapsible, ScCollapsibleContent, ScCollapsibleTrigger, ScCombobox, ScCommand, ScCommandDialog, ScCommandEmpty, ScCommandError, ScCommandGroup, ScCommandInput, ScCommandItem, ScCommandList, ScCommandLoading, ScCommandSeparator, ScCommandShortcut, ScComments, ScConfirmationDialog, ScContextMenuTriggerFor, ScCookieConsent, ScCursor, ScDataTable, ScDatePicker, ScDialog, ScDialogClose, ScDialogContent, ScDialogDescription, ScDialogFooter, ScDialogHeader, ScDialogTitle, ScEditor, ScFileUpload, ScFileUploader, ScFullCalendar, ScHeading, ScHoverCard, ScHoverCardTriggerFor, ScImagePlaceholder, ScInput, ScInputOTPGroup, ScInputOTPSeparator, ScInputOTPSlot, ScInputOtp, ScInputPassword, ScLabel, ScMenu, ScMenuBar, ScMenuBarItem, ScMenuCheckboxGroup, ScMenuCheckboxItem, ScMenuGroup, ScMenuItem, ScMenuLabel, ScMenuRadioGroup, ScMenuRadioItem, ScMenuSeparator, ScMenuShortcut, ScMenuTriggerFor, ScMobileCalendar, ScNav, ScNavItem, ScNavItemDropdown, ScNavLink, ScNavList, ScOption, ScPageDescription, ScPageSubtitle, ScPageTitle, ScPaginator, ScPlainInput, ScPopoverTriggerFor, ScProgress, ScRTL, ScRadioGroup, ScRadioItem, ScScrollArea, ScSelect, ScSeparator, ScSettings, ScSheet, ScSheetClose, ScSheetConfig, ScSheetTrigger, ScSidebar, ScSidebarGroup, ScSidebarGroupAction, ScSidebarGroupContent, ScSidebarGroupLabel, ScSidebarMenu, ScSidebarMenuButton, ScSidebarMenuItem, ScSidebarMenuLink, ScSidebarProvider, ScSidebarState, ScSidebarToggler, ScSingleFileUploader, ScSkeleton, ScSlider, ScSwitch, ScTab, ScTabContent, ScTabContent2, ScTabGroup, ScTabItem, ScTabLabel, ScTabLabel2, ScTable, ScTableBody, ScTableCaption, ScTableCell, ScTableContainer, ScTableFooter, ScTableHead, ScTableHeader, ScTableRow, ScTabs, ScTags, ScTextarea, ScThemeToggler, ScTimePicker, ScTimePicker2, ScToast, ScToastExample, ScToggle, ScToggleGroup, ScToggleGroupItem, ScTooltip, ScWeekView, Section, TelInputComponent, TelModel, Toaster, buttonVariants, scArticleClasses, scInputStyles, scThemeProvider };
 //# sourceMappingURL=semantic-components-ui.mjs.map