@semantic-components/ui 0.68.0 → 0.70.0

package/esm2022/lib/components/toast/toast-description.js

@@ -4,10 +4,10 @@ import * as i0 from "@angular/core";
 export class ScToastDescription {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('text-sm opacity-90', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToastDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScToastDescription, isStandalone: true, selector: "[scToastDescription]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toast-description" }, properties: { "class": "class()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToastDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScToastDescription, isStandalone: true, selector: "[scToastDescription]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toast-description" }, properties: { "class": "class()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToastDescription, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToastDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[scToastDescription]',

package/esm2022/lib/components/toast/toast-stack.js

@@ -34,8 +34,8 @@ export class ScToastStack {
             this.toastService.remove(id);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToastStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ScToastStack, isStandalone: true, selector: "sc-toast-stack", host: { attributes: { "data-slot": "toast-stack" }, properties: { "class": "class()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToastStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ScToastStack, isStandalone: true, selector: "sc-toast-stack", host: { attributes: { "data-slot": "toast-stack" }, properties: { "class": "class()" } }, ngImport: i0, template: `
     @for (toast of toastService.toasts(); track toast.id) {
       <div
         scToast
@@ -93,9 +93,9 @@ export class ScToastStack {
         </button>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: SiXIcon, selector: "svg[siXIcon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiCircleCheckIcon, selector: "svg[siCircleCheckIcon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiInfoIcon, selector: "svg[siInfoIcon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiLoaderCircleIcon, selector: "svg[siLoaderCircleIcon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiOctagonXIcon, selector: "svg[siOctagonXIcon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiTriangleAlertIcon, selector: "svg[siTriangleAlertIcon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: ScToast, selector: "div[scToast]", inputs: ["class", "variant", "position"], outputs: ["pointerEnter", "pointerLeave"] }, { kind: "directive", type: ScToastTitle, selector: "[scToastTitle]", inputs: ["class"] }, { kind: "directive", type: ScToastDescription, selector: "[scToastDescription]", inputs: ["class"] }, { kind: "directive", type: ScToastClose, selector: "button[scToastClose]", inputs: ["class"], outputs: ["close"] }, { kind: "directive", type: ScToastAction, selector: "button[scToastAction]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: SiXIcon, selector: "svg[siXIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiCircleCheckIcon, selector: "svg[siCircleCheckIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiInfoIcon, selector: "svg[siInfoIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiLoaderCircleIcon, selector: "svg[siLoaderCircleIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiOctagonXIcon, selector: "svg[siOctagonXIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiTriangleAlertIcon, selector: "svg[siTriangleAlertIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: ScToast, selector: "div[scToast]", inputs: ["class", "variant", "position"], outputs: ["pointerEnter", "pointerLeave"] }, { kind: "directive", type: ScToastTitle, selector: "[scToastTitle]", inputs: ["class"] }, { kind: "directive", type: ScToastDescription, selector: "[scToastDescription]", inputs: ["class"] }, { kind: "directive", type: ScToastClose, selector: "button[scToastClose]", inputs: ["class"], outputs: ["close"] }, { kind: "directive", type: ScToastAction, selector: "button[scToastAction]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToastStack, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToastStack, decorators: [{
             type: Component,
             args: [{
                     selector: 'sc-toast-stack',

package/esm2022/lib/components/toast/toast-stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-stack.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/toast/toast-stack.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScToastPosition } from './toast.types';\nimport {\n  SiCircleCheckIcon,\n  SiInfoIcon,\n  SiLoaderCircleIcon,\n  SiOctagonXIcon,\n  SiTriangleAlertIcon,\n  SiXIcon,\n} from '@semantic-icons/lucide-icons';\nimport { ScToast } from './toast';\nimport { ScToastAction } from './toast-action';\nimport { ScToastClose } from './toast-close';\nimport { ScToastDescription } from './toast-description';\nimport { ScToastTitle } from './toast-title';\nimport { ScToaster } from './toaster';\n\n@Component({\n  selector: 'sc-toast-stack',\n  imports: [\n    SiXIcon,\n    SiCircleCheckIcon,\n    SiInfoIcon,\n    SiLoaderCircleIcon,\n    SiOctagonXIcon,\n    SiTriangleAlertIcon,\n    ScToast,\n    ScToastTitle,\n    ScToastDescription,\n    ScToastClose,\n    ScToastAction,\n  ],\n  template: `\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        scToast\n        [variant]=\"toast.variant ?? 'default'\"\n        [position]=\"toastService.position()\"\n        [attr.data-state]=\"toast.state ?? 'open'\"\n        (animationend)=\"onAnimationEnd($event, toast.id)\"\n        (pointerEnter)=\"toastService.pause(toast.id)\"\n        (pointerLeave)=\"toastService.resume(toast.id)\"\n      >\n        @switch (toast.variant) {\n          @case ('success') {\n            <svg\n              siCircleCheckIcon\n              class=\"size-4 shrink-0 text-green-600 dark:text-green-400\"\n            ></svg>\n          }\n          @case ('info') {\n            <svg\n              siInfoIcon\n              class=\"size-4 shrink-0 text-blue-600 dark:text-blue-400\"\n            ></svg>\n          }\n          @case ('warning') {\n            <svg\n              siTriangleAlertIcon\n              class=\"size-4 shrink-0 text-yellow-600 dark:text-yellow-400\"\n            ></svg>\n          }\n          @case ('error') {\n            <svg siOctagonXIcon class=\"size-4 shrink-0\"></svg>\n          }\n          @case ('loading') {\n            <svg siLoaderCircleIcon class=\"size-4 shrink-0 animate-spin\"></svg>\n          }\n        }\n        <div class=\"grid gap-1\">\n          @if (toast.title) {\n            <div scToastTitle>{{ toast.title }}</div>\n          }\n          @if (toast.description) {\n            <div scToastDescription>{{ toast.description }}</div>\n          }\n        </div>\n        @if (toast.action) {\n          <button\n            scToastAction\n            (click)=\"onAction(toast.id, toast.action.onClick)\"\n          >\n            {{ toast.action.label }}\n          </button>\n        }\n        <button scToastClose (close)=\"dismiss(toast.id)\">\n          <svg siXIcon class=\"size-4\"></svg>\n        </button>\n      </div>\n    }\n  `,\n  host: {\n    'data-slot': 'toast-stack',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScToastStack {\n  protected readonly toastService = inject(ScToaster);\n\n  private readonly positionClasses: Record<ScToastPosition, string> = {\n    'top-left': 'fixed top-0 left-0 flex-col-reverse',\n    'top-center': 'fixed top-0 left-1/2 -translate-x-1/2 flex-col-reverse',\n    'top-right': 'fixed top-0 right-0 flex-col-reverse',\n    'bottom-left': 'fixed bottom-0 left-0 flex-col',\n    'bottom-center': 'fixed bottom-0 left-1/2 -translate-x-1/2 flex-col',\n    'bottom-right': 'fixed bottom-0 right-0 flex-col',\n  };\n\n  protected readonly class = computed(() =>\n    cn(\n      'z-100 flex max-h-screen w-full gap-2 p-4 md:max-w-[420px]',\n      this.positionClasses[this.toastService.position()],\n    ),\n  );\n\n  protected dismiss(id: string): void {\n    this.toastService.dismiss(id);\n  }\n\n  protected onAction(id: string, onClick: () => void): void {\n    onClick();\n    this.toastService.dismiss(id);\n  }\n\n  protected onAnimationEnd(event: AnimationEvent, id: string): void {\n    if (event.target !== event.currentTarget) return;\n\n    const toast = this.toastService.toasts().find((t) => t.id === id);\n    if (toast?.state === 'closed') {\n      this.toastService.remove(id);\n    }\n  }\n}\n"]}
+{"version":3,"file":"toast-stack.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/toast/toast-stack.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScToastPosition } from './toast.types';\nimport {\n  SiCircleCheckIcon,\n  SiInfoIcon,\n  SiLoaderCircleIcon,\n  SiOctagonXIcon,\n  SiTriangleAlertIcon,\n  SiXIcon,\n} from '@semantic-icons/lucide-icons';\nimport { ScToast } from './toast';\nimport { ScToastAction } from './toast-action';\nimport { ScToastClose } from './toast-close';\nimport { ScToastDescription } from './toast-description';\nimport { ScToastTitle } from './toast-title';\nimport { ScToaster } from './toaster';\n\n@Component({\n  selector: 'sc-toast-stack',\n  imports: [\n    SiXIcon,\n    SiCircleCheckIcon,\n    SiInfoIcon,\n    SiLoaderCircleIcon,\n    SiOctagonXIcon,\n    SiTriangleAlertIcon,\n    ScToast,\n    ScToastTitle,\n    ScToastDescription,\n    ScToastClose,\n    ScToastAction,\n  ],\n  template: `\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        scToast\n        [variant]=\"toast.variant ?? 'default'\"\n        [position]=\"toastService.position()\"\n        [attr.data-state]=\"toast.state ?? 'open'\"\n        (animationend)=\"onAnimationEnd($event, toast.id)\"\n        (pointerEnter)=\"toastService.pause(toast.id)\"\n        (pointerLeave)=\"toastService.resume(toast.id)\"\n      >\n        @switch (toast.variant) {\n          @case ('success') {\n            <svg\n              siCircleCheckIcon\n              class=\"size-4 shrink-0 text-green-600 dark:text-green-400\"\n            ></svg>\n          }\n          @case ('info') {\n            <svg\n              siInfoIcon\n              class=\"size-4 shrink-0 text-blue-600 dark:text-blue-400\"\n            ></svg>\n          }\n          @case ('warning') {\n            <svg\n              siTriangleAlertIcon\n              class=\"size-4 shrink-0 text-yellow-600 dark:text-yellow-400\"\n            ></svg>\n          }\n          @case ('error') {\n            <svg siOctagonXIcon class=\"size-4 shrink-0\"></svg>\n          }\n          @case ('loading') {\n            <svg siLoaderCircleIcon class=\"size-4 shrink-0 animate-spin\"></svg>\n          }\n        }\n        <div class=\"grid gap-1\">\n          @if (toast.title) {\n            <div scToastTitle>{{ toast.title }}</div>\n          }\n          @if (toast.description) {\n            <div scToastDescription>{{ toast.description }}</div>\n          }\n        </div>\n        @if (toast.action) {\n          <button\n            scToastAction\n            (click)=\"onAction(toast.id, toast.action.onClick)\"\n          >\n            {{ toast.action.label }}\n          </button>\n        }\n        <button scToastClose (close)=\"dismiss(toast.id)\">\n          <svg siXIcon class=\"size-4\"></svg>\n        </button>\n      </div>\n    }\n  `,\n  host: {\n    'data-slot': 'toast-stack',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScToastStack {\n  protected readonly toastService = inject(ScToaster);\n\n  private readonly positionClasses: Record<ScToastPosition, string> = {\n    'top-left': 'fixed top-0 left-0 flex-col-reverse',\n    'top-center': 'fixed top-0 left-1/2 -translate-x-1/2 flex-col-reverse',\n    'top-right': 'fixed top-0 right-0 flex-col-reverse',\n    'bottom-left': 'fixed bottom-0 left-0 flex-col',\n    'bottom-center': 'fixed bottom-0 left-1/2 -translate-x-1/2 flex-col',\n    'bottom-right': 'fixed bottom-0 right-0 flex-col',\n  };\n\n  protected readonly class = computed(() =>\n    cn(\n      'z-100 flex max-h-screen w-full gap-2 p-4 md:max-w-[420px]',\n      this.positionClasses[this.toastService.position()],\n    ),\n  );\n\n  protected dismiss(id: string): void {\n    this.toastService.dismiss(id);\n  }\n\n  protected onAction(id: string, onClick: () => void): void {\n    onClick();\n    this.toastService.dismiss(id);\n  }\n\n  protected onAnimationEnd(event: AnimationEvent, id: string): void {\n    if (event.target !== event.currentTarget) return;\n\n    const toast = this.toastService.toasts().find((t) => t.id === id);\n    if (toast?.state === 'closed') {\n      this.toastService.remove(id);\n    }\n  }\n}\n"]}

package/esm2022/lib/components/toast/toast-title.js

@@ -4,10 +4,10 @@ import * as i0 from "@angular/core";
 export class ScToastTitle {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('text-sm font-semibold', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToastTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScToastTitle, isStandalone: true, selector: "[scToastTitle]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toast-title" }, properties: { "class": "class()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToastTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScToastTitle, isStandalone: true, selector: "[scToastTitle]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toast-title" }, properties: { "class": "class()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToastTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToastTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[scToastTitle]',

package/esm2022/lib/components/toast/toast.js

@@ -30,12 +30,12 @@ export class ScToast {
     onPointerLeave() {
         this.pointerLeave.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToast, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScToast, isStandalone: true, selector: "div[scToast]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointerEnter: "pointerEnter", pointerLeave: "pointerLeave" }, host: { attributes: { "data-slot": "toast", "role": "status", "aria-live": "polite", "aria-atomic": "true" }, listeners: { "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "class": "class()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToast, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScToast, isStandalone: true, selector: "div[scToast]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointerEnter: "pointerEnter", pointerLeave: "pointerLeave" }, host: { attributes: { "data-slot": "toast", "role": "status", "aria-live": "polite", "aria-atomic": "true" }, listeners: { "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "class": "class()" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToast, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[scToast]',

package/esm2022/lib/components/toast/toaster.js

@@ -137,10 +137,10 @@ export class ScToaster {
         const portal = new ComponentPortal(ScToastStack);
         this.overlayRef.attach(portal);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToaster, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToaster, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToaster, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToaster, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToaster, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToaster, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/esm2022/lib/components/toggle/toggle.js

@@ -31,10 +31,10 @@ export class ScToggle {
             this.pressed.update((v) => !v);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScToggle, isStandalone: true, selector: "button[scToggle]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange" }, host: { attributes: { "data-slot": "toggle", "type": "button" }, listeners: { "click": "toggle()" }, properties: { "class": "class()", "attr.aria-pressed": "pressed()", "attr.data-state": "pressed() ? \"on\" : \"off\"", "disabled": "disabled()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScToggle, isStandalone: true, selector: "button[scToggle]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange" }, host: { attributes: { "data-slot": "toggle", "type": "button" }, listeners: { "click": "toggle()" }, properties: { "class": "class()", "attr.aria-pressed": "pressed()", "attr.data-state": "pressed() ? \"on\" : \"off\"", "disabled": "disabled()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToggle, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[scToggle]',

package/esm2022/lib/components/toggle-group/toggle-group-item.js

@@ -21,10 +21,10 @@ export class ScToggleGroupItem {
             this.group.toggle(this.value());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToggleGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScToggleGroupItem, isStandalone: true, selector: "button[scToggleGroupItem]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toggle-group-item", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "attr.data-variant": "group.variant() || variant()", "attr.data-size": "group.size() || size()", "attr.data-spacing": "group.spacing()", "attr.aria-pressed": "isSelected()", "attr.data-state": "isSelected() ? \"on\" : \"off\"", "disabled": "isDisabled()", "class": "class()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToggleGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScToggleGroupItem, isStandalone: true, selector: "button[scToggleGroupItem]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toggle-group-item", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "attr.data-variant": "group.variant() || variant()", "attr.data-size": "group.size() || size()", "attr.data-spacing": "group.spacing()", "attr.aria-pressed": "isSelected()", "attr.data-state": "isSelected() ? \"on\" : \"off\"", "disabled": "isDisabled()", "class": "class()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToggleGroupItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToggleGroupItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[scToggleGroupItem]',

package/esm2022/lib/components/toggle-group/toggle-group.js

@@ -37,10 +37,10 @@ export class ScToggleGroup {
             this.value.set(arr);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScToggleGroup, isStandalone: true, selector: "div[scToggleGroup]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "toggle-group", "role": "group" }, properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-spacing": "spacing()", "attr.data-orientation": "orientation()", "attr.data-horizontal": "orientation() === \"horizontal\" ? \"\" : null", "attr.data-vertical": "orientation() === \"vertical\" ? \"\" : null", "style.--gap": "spacing()", "class": "class()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScToggleGroup, isStandalone: true, selector: "div[scToggleGroup]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "toggle-group", "role": "group" }, properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-spacing": "spacing()", "attr.data-orientation": "orientation()", "attr.data-horizontal": "orientation() === \"horizontal\" ? \"\" : null", "attr.data-vertical": "orientation() === \"vertical\" ? \"\" : null", "style.--gap": "spacing()", "class": "class()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToggleGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToggleGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[scToggleGroup]',

package/esm2022/lib/components/toolbar/toolbar-separator.js

@@ -10,10 +10,10 @@ export class ScToolbarSeparator {
         const isVertical = this.separatorOrientation() === 'vertical';
         return cn('shrink-0 bg-border', isVertical ? 'mx-1 h-full w-px' : 'my-1 h-px w-full', this.classInput());
     }, ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToolbarSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScToolbarSeparator, isStandalone: true, selector: "div[scToolbarSeparator]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toolbar-separator", "role": "separator" }, properties: { "attr.aria-orientation": "separatorOrientation()", "attr.data-orientation": "separatorOrientation()", "class": "class()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToolbarSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScToolbarSeparator, isStandalone: true, selector: "div[scToolbarSeparator]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toolbar-separator", "role": "separator" }, properties: { "attr.aria-orientation": "separatorOrientation()", "attr.data-orientation": "separatorOrientation()", "class": "class()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToolbarSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToolbarSeparator, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[scToolbarSeparator]',

package/esm2022/lib/components/toolbar/toolbar-widget-group.js

@@ -6,12 +6,12 @@ import * as i1 from "@angular/aria/toolbar";
 export class ScToolbarWidgetGroup {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('flex items-center gap-0.5', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToolbarWidgetGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScToolbarWidgetGroup, isStandalone: true, selector: "div[scToolbarWidgetGroup]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toolbar-widget-group" }, properties: { "class": "class()" } }, hostDirectives: [{ directive: i1.ToolbarWidgetGroup, inputs: ["disabled", "disabled", "multi", "multi"] }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToolbarWidgetGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScToolbarWidgetGroup, isStandalone: true, selector: "div[scToolbarWidgetGroup]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toolbar-widget-group" }, properties: { "class": "class()" } }, hostDirectives: [{ directive: i1.ToolbarWidgetGroup, inputs: ["disabled", "disabled", "multi", "multi"] }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToolbarWidgetGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToolbarWidgetGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[scToolbarWidgetGroup]',

package/esm2022/lib/components/toolbar/toolbar-widget.js

@@ -8,12 +8,12 @@ export class ScToolbarWidget {
     widget = inject(ToolbarWidget);
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn(toggleVariants({ variant: 'default', size: 'default' }), 'data-[state=on]:bg-muted', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToolbarWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScToolbarWidget, isStandalone: true, selector: "button[scToolbarWidget]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toolbar-widget", "type": "button" }, properties: { "attr.data-state": "widget.selected() ? \"on\" : \"off\"", "class": "class()" } }, hostDirectives: [{ directive: i1.ToolbarWidget, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToolbarWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScToolbarWidget, isStandalone: true, selector: "button[scToolbarWidget]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toolbar-widget", "type": "button" }, properties: { "attr.data-state": "widget.selected() ? \"on\" : \"off\"", "class": "class()" } }, hostDirectives: [{ directive: i1.ToolbarWidget, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToolbarWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToolbarWidget, decorators: [{
             type: Component,
             args: [{
                     selector: 'button[scToolbarWidget]',

package/esm2022/lib/components/toolbar/toolbar.js

@@ -7,12 +7,12 @@ export class ScToolbar {
     toolbar = inject(Toolbar);
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('flex w-fit items-center gap-1 rounded-lg border bg-background p-1', this.toolbar.orientation() === 'vertical' && 'flex-col items-stretch', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScToolbar, isStandalone: true, selector: "div[scToolbar]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toolbar" }, properties: { "attr.data-orientation": "toolbar.orientation()", "class": "class()" } }, hostDirectives: [{ directive: i1.Toolbar, inputs: ["orientation", "orientation", "disabled", "disabled", "wrap", "wrap", "values", "values", "softDisabled", "softDisabled"], outputs: ["valuesChange", "valuesChange"] }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScToolbar, isStandalone: true, selector: "div[scToolbar]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toolbar" }, properties: { "attr.data-orientation": "toolbar.orientation()", "class": "class()" } }, hostDirectives: [{ directive: i1.Toolbar, inputs: ["orientation", "orientation", "disabled", "disabled", "wrap", "wrap", "values", "values", "softDisabled", "softDisabled"], outputs: ["valuesChange", "valuesChange"] }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToolbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScToolbar, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[scToolbar]',

package/esm2022/lib/components/tooltip/tooltip-manager.js

@@ -155,10 +155,10 @@ export class ScTooltipManager {
     isTooltipVisible(tooltipId) {
         return this.currentTooltipId === tooltipId;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTooltipManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTooltipManager, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScTooltipManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScTooltipManager, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTooltipManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScTooltipManager, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });

package/esm2022/lib/components/tooltip/tooltip-trigger.js

@@ -96,10 +96,10 @@ export class ScTooltipTrigger {
             this.hideTimeout = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScTooltipTrigger, isStandalone: true, selector: "[scTooltipTrigger]", inputs: { content: { classPropertyName: "content", publicName: "scTooltipTrigger", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "tooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "tooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.aria-describedby": "ariaDescribedBy()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScTooltipTrigger, isStandalone: true, selector: "[scTooltipTrigger]", inputs: { content: { classPropertyName: "content", publicName: "scTooltipTrigger", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "tooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "tooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.aria-describedby": "ariaDescribedBy()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTooltipTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScTooltipTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[scTooltipTrigger]',

package/esm2022/lib/components/tooltip/tooltip.js

@@ -19,20 +19,16 @@ export class ScTooltip {
     close() {
         this.state.set('closed');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: ScTooltip, isStandalone: true, selector: "sc-tooltip", outputs: { animationComplete: "animationComplete" }, host: { attributes: { "data-slot": "tooltip", "role": "tooltip", "aria-live": "polite", "aria-atomic": "true" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "id": "data.tooltipId", "class": "hostClass()", "attr.data-open": "state() === \"open\" ? true : null", "attr.data-closed": "state() === \"closed\" ? true : null", "attr.data-side": "side()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ScTooltip, isStandalone: true, selector: "sc-tooltip", outputs: { animationComplete: "animationComplete" }, host: { attributes: { "data-slot": "tooltip", "role": "tooltip", "aria-live": "polite", "aria-atomic": "true" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "id": "data.tooltipId", "class": "hostClass()", "attr.data-open": "state() === \"open\" ? true : null", "attr.data-closed": "state() === \"closed\" ? true : null", "attr.data-side": "side()" } }, ngImport: i0, template: `
     {{ data.content }}
     <span
       [attr.data-side]="side()"
-      class="absolute size-2.5 rotate-45 rounded-[2px] bg-primary z-50
-             data-[side=top]:-bottom-[5px] data-[side=top]:left-1/2 data-[side=top]:-translate-x-1/2
-             data-[side=bottom]:-top-[5px] data-[side=bottom]:left-1/2 data-[side=bottom]:-translate-x-1/2
-             data-[side=left]:-right-[5px] data-[side=left]:top-1/2 data-[side=left]:-translate-y-1/2
-             data-[side=right]:-left-[5px] data-[side=right]:top-1/2 data-[side=right]:-translate-y-1/2"
+      class="bg-primary absolute z-50 size-2.5 rotate-45 rounded-[2px] data-[side=bottom]:-top-[5px] data-[side=bottom]:left-1/2 data-[side=bottom]:-translate-x-1/2 data-[side=left]:top-1/2 data-[side=left]:-right-[5px] data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2 data-[side=right]:-left-[5px] data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-[5px] data-[side=top]:left-1/2 data-[side=top]:-translate-x-1/2"
     ></span>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScTooltip, decorators: [{
             type: Component,
             args: [{
                     selector: 'sc-tooltip',
@@ -40,11 +36,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     {{ data.content }}
     <span
       [attr.data-side]="side()"
-      class="absolute size-2.5 rotate-45 rounded-[2px] bg-primary z-50
-             data-[side=top]:-bottom-[5px] data-[side=top]:left-1/2 data-[side=top]:-translate-x-1/2
-             data-[side=bottom]:-top-[5px] data-[side=bottom]:left-1/2 data-[side=bottom]:-translate-x-1/2
-             data-[side=left]:-right-[5px] data-[side=left]:top-1/2 data-[side=left]:-translate-y-1/2
-             data-[side=right]:-left-[5px] data-[side=right]:top-1/2 data-[side=right]:-translate-y-1/2"
+      class="bg-primary absolute z-50 size-2.5 rotate-45 rounded-[2px] data-[side=bottom]:-top-[5px] data-[side=bottom]:left-1/2 data-[side=bottom]:-translate-x-1/2 data-[side=left]:top-1/2 data-[side=left]:-right-[5px] data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2 data-[side=right]:-left-[5px] data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-[5px] data-[side=top]:left-1/2 data-[side=top]:-translate-x-1/2"
     ></span>
   `,
                     host: {

package/esm2022/lib/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,MAAM,EACN,cAAc,EACd,MAAM,EACN,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAOjC,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,cAAc,CAC/C,iBAAiB,CAClB,CAAC;AAiCF,MAAM,OAAO,SAAS;IACH,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAExC,IAAI,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IAC/B,KAAK,GAAG,MAAM,CAAiB,MAAM,iDAAC,CAAC;IACvC,IAAI,GAAG,MAAM,CAAgB,KAAK,gDAAC,CAAC;IACpC,iBAAiB,GAAG,MAAM,EAAQ,CAAC;IAEzB,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC3C,EAAE,CACA,uFAAuF,EACvF,+DAA+D,EAC/D,wEAAwE,EACxE,6JAA6J,CAC9J,qDACF,CAAC;IAEQ,cAAc,CAAC,KAAqB;QAC5C,2CAA2C;QAC3C,IACE,IAAI,CAAC,KAAK,EAAE,KAAK,QAAQ;YACzB,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,aAAa,EAC9C,CAAC;YACD,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC;uGA7BU,SAAS;2FAAT,SAAS,ufA1BV;;;;;;;;;;GAUT;;2FAgBU,SAAS;kBA5BrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,QAAQ,EAAE;;;;;;;;;;GAUT;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,SAAS;wBACtB,IAAI,EAAE,SAAS;wBACf,WAAW,EAAE,QAAQ;wBACrB,aAAa,EAAE,MAAM;wBACrB,MAAM,EAAE,gBAAgB;wBACxB,SAAS,EAAE,aAAa;wBACxB,kBAAkB,EAAE,kCAAkC;wBACtD,oBAAoB,EAAE,oCAAoC;wBAC1D,kBAAkB,EAAE,QAAQ;wBAC5B,gBAAgB,EAAE,wBAAwB;qBAC3C;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  InjectionToken,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\nexport interface ScTooltipData {\n  content: string;\n  tooltipId: string;\n}\n\nexport const SC_TOOLTIP_DATA = new InjectionToken<ScTooltipData>(\n  'SC_TOOLTIP_DATA',\n);\n\ntype ScTooltipState = 'open' | 'closed';\ntype ScTooltipSide = 'top' | 'right' | 'bottom' | 'left';\n\n@Component({\n  selector: 'sc-tooltip',\n  template: `\n    {{ data.content }}\n    <span\n      [attr.data-side]=\"side()\"\n      class=\"absolute size-2.5 rotate-45 rounded-[2px] bg-primary z-50\n             data-[side=top]:-bottom-[5px] data-[side=top]:left-1/2 data-[side=top]:-translate-x-1/2\n             data-[side=bottom]:-top-[5px] data-[side=bottom]:left-1/2 data-[side=bottom]:-translate-x-1/2\n             data-[side=left]:-right-[5px] data-[side=left]:top-1/2 data-[side=left]:-translate-y-1/2\n             data-[side=right]:-left-[5px] data-[side=right]:top-1/2 data-[side=right]:-translate-y-1/2\"\n    ></span>\n  `,\n  host: {\n    'data-slot': 'tooltip',\n    role: 'tooltip',\n    'aria-live': 'polite',\n    'aria-atomic': 'true',\n    '[id]': 'data.tooltipId',\n    '[class]': 'hostClass()',\n    '[attr.data-open]': 'state() === \"open\" ? true : null',\n    '[attr.data-closed]': 'state() === \"closed\" ? true : null',\n    '[attr.data-side]': 'side()',\n    '(animationend)': 'onAnimationEnd($event)',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScTooltip {\n  private readonly elementRef = inject(ElementRef);\n\n  readonly data = inject(SC_TOOLTIP_DATA);\n  readonly state = signal<ScTooltipState>('open');\n  readonly side = signal<ScTooltipSide>('top');\n  readonly animationComplete = output<void>();\n\n  protected readonly hostClass = computed(() =>\n    cn(\n      'bg-primary text-primary-foreground z-50 rounded-md px-3 py-1.5 text-xs w-fit max-w-xs',\n      'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',\n      'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n      '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',\n    ),\n  );\n\n  protected onAnimationEnd(event: AnimationEvent): void {\n    // Only emit when close animation completes\n    if (\n      this.state() === 'closed' &&\n      event.target === this.elementRef.nativeElement\n    ) {\n      this.animationComplete.emit();\n    }\n  }\n\n  close(): void {\n    this.state.set('closed');\n  }\n}\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,MAAM,EACN,cAAc,EACd,MAAM,EACN,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAOjC,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,cAAc,CAC/C,iBAAiB,CAClB,CAAC;AA6BF,MAAM,OAAO,SAAS;IACH,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAExC,IAAI,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IAC/B,KAAK,GAAG,MAAM,CAAiB,MAAM,iDAAC,CAAC;IACvC,IAAI,GAAG,MAAM,CAAgB,KAAK,gDAAC,CAAC;IACpC,iBAAiB,GAAG,MAAM,EAAQ,CAAC;IAEzB,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC3C,EAAE,CACA,uFAAuF,EACvF,+DAA+D,EAC/D,wEAAwE,EACxE,6JAA6J,CAC9J,qDACF,CAAC;IAEQ,cAAc,CAAC,KAAqB;QAC5C,2CAA2C;QAC3C,IACE,IAAI,CAAC,KAAK,EAAE,KAAK,QAAQ;YACzB,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,aAAa,EAC9C,CAAC;YACD,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC;uGA7BU,SAAS;2FAAT,SAAS,ufAtBV;;;;;;GAMT;;2FAgBU,SAAS;kBAxBrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,QAAQ,EAAE;;;;;;GAMT;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,SAAS;wBACtB,IAAI,EAAE,SAAS;wBACf,WAAW,EAAE,QAAQ;wBACrB,aAAa,EAAE,MAAM;wBACrB,MAAM,EAAE,gBAAgB;wBACxB,SAAS,EAAE,aAAa;wBACxB,kBAAkB,EAAE,kCAAkC;wBACtD,oBAAoB,EAAE,oCAAoC;wBAC1D,kBAAkB,EAAE,QAAQ;wBAC5B,gBAAgB,EAAE,wBAAwB;qBAC3C;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  InjectionToken,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\nexport interface ScTooltipData {\n  content: string;\n  tooltipId: string;\n}\n\nexport const SC_TOOLTIP_DATA = new InjectionToken<ScTooltipData>(\n  'SC_TOOLTIP_DATA',\n);\n\ntype ScTooltipState = 'open' | 'closed';\ntype ScTooltipSide = 'top' | 'right' | 'bottom' | 'left';\n\n@Component({\n  selector: 'sc-tooltip',\n  template: `\n    {{ data.content }}\n    <span\n      [attr.data-side]=\"side()\"\n      class=\"bg-primary absolute z-50 size-2.5 rotate-45 rounded-[2px] data-[side=bottom]:-top-[5px] data-[side=bottom]:left-1/2 data-[side=bottom]:-translate-x-1/2 data-[side=left]:top-1/2 data-[side=left]:-right-[5px] data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2 data-[side=right]:-left-[5px] data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-[5px] data-[side=top]:left-1/2 data-[side=top]:-translate-x-1/2\"\n    ></span>\n  `,\n  host: {\n    'data-slot': 'tooltip',\n    role: 'tooltip',\n    'aria-live': 'polite',\n    'aria-atomic': 'true',\n    '[id]': 'data.tooltipId',\n    '[class]': 'hostClass()',\n    '[attr.data-open]': 'state() === \"open\" ? true : null',\n    '[attr.data-closed]': 'state() === \"closed\" ? true : null',\n    '[attr.data-side]': 'side()',\n    '(animationend)': 'onAnimationEnd($event)',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScTooltip {\n  private readonly elementRef = inject(ElementRef);\n\n  readonly data = inject(SC_TOOLTIP_DATA);\n  readonly state = signal<ScTooltipState>('open');\n  readonly side = signal<ScTooltipSide>('top');\n  readonly animationComplete = output<void>();\n\n  protected readonly hostClass = computed(() =>\n    cn(\n      'bg-primary text-primary-foreground z-50 rounded-md px-3 py-1.5 text-xs w-fit max-w-xs',\n      'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',\n      'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n      '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',\n    ),\n  );\n\n  protected onAnimationEnd(event: AnimationEvent): void {\n    // Only emit when close animation completes\n    if (\n      this.state() === 'closed' &&\n      event.target === this.elementRef.nativeElement\n    ) {\n      this.animationComplete.emit();\n    }\n  }\n\n  close(): void {\n    this.state.set('closed');\n  }\n}\n"]}

package/esm2022/lib/components/typography/heading.js

@@ -27,10 +27,10 @@ export class ScHeading {
         const level = this.elementRef.nativeElement.tagName.toLowerCase();
         return cn(headingVariants({ level, underline: this.underline() }), this.classInput());
     }, ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScHeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScHeading, isStandalone: true, selector: "h1[scHeading], h2[scHeading], h3[scHeading], h4[scHeading]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "heading" }, properties: { "class": "class()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScHeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScHeading, isStandalone: true, selector: "h1[scHeading], h2[scHeading], h3[scHeading], h4[scHeading]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "heading" }, properties: { "class": "class()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScHeading, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScHeading, decorators: [{
             type: Directive,
             args: [{
                     selector: 'h1[scHeading], h2[scHeading], h3[scHeading], h4[scHeading]',

package/lib/components/index.d.ts

@@ -34,10 +34,12 @@ export * from './popover';
 export * from './progress';
 export * from './radio-group';
 export * from './range-slider';
+export * from './resizable';
 export * from './scroll-area';
 export * from './select';
 export * from './separator';
 export * from './sheet';
+export * from './sidebar';
 export * from './skeleton';
 export * from './slider';
 export * from './spinner';

package/lib/components/menu/menu-trigger.d.ts

@@ -4,11 +4,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/aria/menu";
 import * as i2 from "@angular/cdk/overlay";
 export declare class ScMenuTrigger {
-    readonly classInput: import("@angular/core").InputSignal<string>;
     readonly trigger: MenuTrigger<any>;
     readonly overlayOrigin: CdkOverlayOrigin;
     readonly expanded: import("@angular/core").Signal<boolean>;
-    protected readonly class: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ScMenuTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ScMenuTrigger, "[scMenuTrigger]", ["scMenuTrigger"], { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.MenuTrigger; inputs: {}; outputs: {}; }, { directive: typeof i2.CdkOverlayOrigin; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ScMenuTrigger, "[scMenuTrigger]", ["scMenuTrigger"], {}, {}, never, never, true, [{ directive: typeof i1.MenuTrigger; inputs: {}; outputs: {}; }, { directive: typeof i2.CdkOverlayOrigin; inputs: {}; outputs: {}; }]>;
 }

package/lib/components/menu/menu.d.ts

@@ -8,5 +8,5 @@ export declare class ScMenu<V = string> {
     protected readonly class: import("@angular/core").Signal<string>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<ScMenu<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ScMenu<any>, "[scMenu]", ["scMenu"], { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.Menu; inputs: { "id": "id"; "wrap": "wrap"; "disabled": "disabled"; "typeaheadDelay": "typeaheadDelay"; "expansionDelay": "expansionDelay"; }; outputs: { "onSelect": "onSelect"; }; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ScMenu<any>, "[scMenu]", ["scMenu"], { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.Menu; inputs: { "id": "id"; "wrap": "wrap"; "disabled": "disabled"; "typeaheadDelay": "typeaheadDelay"; "expansionDelay": "expansionDelay"; }; outputs: { "itemSelected": "itemSelected"; }; }]>;
 }

package/lib/components/pagination/pagination.d.ts

@@ -34,5 +34,5 @@ export declare class ScPagination {
     changePageSize(newPageSize: number): void;
     private generatePageNumbers;
     static ɵfac: i0.ɵɵFactoryDeclaration<ScPagination, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ScPagination, "nav[scPagination]", ["scPagination"], { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; "currentPageInput": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSizeInput": { "alias": "pageSize"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "pageSizes": { "alias": "pageSizes"; "required": false; "isSignal": true; }; }, { "change": "change"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ScPagination, "nav[scPagination], div[scPagination]", ["scPagination"], { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; "currentPageInput": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSizeInput": { "alias": "pageSize"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "pageSizes": { "alias": "pageSizes"; "required": false; "isSignal": true; }; }, { "change": "change"; }, never, never, true, never>;
 }

package/lib/components/range-slider/range-slider-thumb-base.d.ts

@@ -1,2 +1,2 @@
 export declare const MIN_THUMB_CLASSES: readonly ["pointer-events-none absolute top-0 h-full w-full cursor-pointer appearance-none bg-transparent", "disabled:pointer-events-none disabled:opacity-50", "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:transition-shadow", "[&::-webkit-slider-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]", "[&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:transition-shadow", "[&::-moz-range-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]", "focus-visible:outline-none [&:focus-visible::-webkit-slider-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]", "[&:focus-visible::-moz-range-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]", "z-10", "[&::-webkit-slider-thumb]:-mt-1.5", "[&::-webkit-slider-runnable-track]:appearance-none [&::-webkit-slider-runnable-track]:h-0 [&::-webkit-slider-runnable-track]:bg-transparent", "[&::-moz-range-track]:h-0 [&::-moz-range-track]:bg-transparent"];
-export declare const MAX_THUMB_CLASSES: readonly ["pointer-events-none absolute top-0 h-full w-full cursor-pointer appearance-none bg-transparent", "disabled:pointer-events-none disabled:opacity-50", "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:transition-shadow", "[&::-webkit-slider-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]", "[&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:transition-shadow", "[&::-moz-range-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]", "focus-visible:outline-none [&:focus-visible::-webkit-slider-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]", "[&:focus-visible::-moz-range-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]", "[&::-webkit-slider-thumb]:-mt-1", "[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[image:linear-gradient(to_right,var(--muted)_var(--min-percent),var(--primary)_var(--min-percent)_var(--max-percent),var(--muted)_var(--max-percent))]", "[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[image:linear-gradient(to_right,var(--muted)_var(--min-percent),var(--primary)_var(--min-percent)_var(--max-percent),var(--muted)_var(--max-percent))]"];
+export declare const MAX_THUMB_CLASSES: readonly ["pointer-events-none absolute top-0 h-full w-full cursor-pointer appearance-none bg-transparent", "disabled:pointer-events-none disabled:opacity-50", "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:transition-shadow", "[&::-webkit-slider-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]", "[&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:transition-shadow", "[&::-moz-range-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]", "focus-visible:outline-none [&:focus-visible::-webkit-slider-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]", "[&:focus-visible::-moz-range-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]", "[&::-webkit-slider-thumb]:-mt-1", "[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--muted)_var(--min-percent),var(--primary)_var(--min-percent)_var(--max-percent),var(--muted)_var(--max-percent))]", "[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[linear-gradient(to_right,var(--muted)_var(--min-percent),var(--primary)_var(--min-percent)_var(--max-percent),var(--muted)_var(--max-percent))]"];

package/lib/components/resizable/index.d.ts

@@ -0,0 +1,5 @@
+export * from './resizable.types';
+export * from './resizable-panel-group';
+export * from './resizable-panel';
+export * from './resizable-handle';
+export * from './resizable-handle-indicator';

package/lib/components/resizable/resizable-handle-indicator.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class ScResizableHandleIndicator {
+    readonly classInput: import("@angular/core").InputSignal<string>;
+    protected readonly class: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScResizableHandleIndicator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ScResizableHandleIndicator, "[scResizableHandleIndicator]", never, { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/resizable/resizable-handle.d.ts

@@ -0,0 +1,18 @@
+import { ScResizablePanelGroup } from './resizable-panel-group';
+import * as i0 from "@angular/core";
+export declare class ScResizableHandle {
+    readonly group: ScResizablePanelGroup;
+    private readonly elementRef;
+    readonly classInput: import("@angular/core").InputSignal<string>;
+    readonly withHandle: import("@angular/core").InputSignal<boolean>;
+    private dragging;
+    private startPos;
+    private startSizes;
+    protected readonly class: import("@angular/core").Signal<string>;
+    protected onMouseDown(event: MouseEvent): void;
+    protected onTouchStart(event: TouchEvent): void;
+    private startDrag;
+    private onDrag;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScResizableHandle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ScResizableHandle, "[scResizableHandle]", never, { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; "withHandle": { "alias": "withHandle"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/resizable/resizable-panel-group.d.ts

@@ -0,0 +1,17 @@
+import { ScResizableDirection } from './resizable.types';
+import { ScResizablePanel } from './resizable-panel';
+import { ScResizableHandle } from './resizable-handle';
+import * as i0 from "@angular/core";
+export declare class ScResizablePanelGroup {
+    readonly classInput: import("@angular/core").InputSignal<string>;
+    readonly direction: import("@angular/core").InputSignal<ScResizableDirection>;
+    private readonly allPanels;
+    private readonly allHandles;
+    private readonly ownPanels;
+    private readonly ownHandles;
+    protected readonly class: import("@angular/core").Signal<string>;
+    getPanels(): ScResizablePanel[];
+    getHandles(): ScResizableHandle[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScResizablePanelGroup, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ScResizablePanelGroup, "[scResizablePanelGroup]", never, { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, {}, ["allPanels", "allHandles"], never, true, never>;
+}

package/lib/components/resizable/resizable-panel.d.ts

@@ -0,0 +1,16 @@
+import { ScResizablePanelGroup } from './resizable-panel-group';
+import * as i0 from "@angular/core";
+export declare class ScResizablePanel {
+    readonly group: ScResizablePanelGroup;
+    readonly classInput: import("@angular/core").InputSignal<string>;
+    readonly defaultSize: import("@angular/core").InputSignal<number>;
+    readonly minSize: import("@angular/core").InputSignal<number>;
+    readonly maxSize: import("@angular/core").InputSignal<number>;
+    readonly size: import("@angular/core").WritableSignal<number>;
+    protected readonly class: import("@angular/core").Signal<string>;
+    protected readonly minSizePx: import("@angular/core").Signal<string>;
+    protected readonly maxSizePx: import("@angular/core").Signal<string>;
+    setSize(newSize: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScResizablePanel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ScResizablePanel, "[scResizablePanel]", never, { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; "defaultSize": { "alias": "defaultSize"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/resizable/resizable.types.d.ts

@@ -0,0 +1 @@
+export type ScResizableDirection = 'horizontal' | 'vertical';

package/lib/components/select/index.d.ts

@@ -1,7 +1,7 @@
 export { ScSelect } from './select';
 export { ScSelectItemIcon } from './select-item-icon';
 export { ScSelectTrigger } from './select-trigger';
-export { ScSelectValue } from './select-value';
+export { ScSelectLabel } from './select-label';
 export { ScSelectPortal } from './select-portal';
 export { ScSelectPopup } from './select-popup';
 export { ScSelectList } from './select-list';

package/lib/components/select/select-item.d.ts

@@ -4,6 +4,8 @@ export declare class ScSelectItem {
     readonly classInput: import("@angular/core").InputSignal<string>;
     private readonly option;
     private readonly elementRef;
+    readonly itemValue: import("@angular/core").Signal<any>;
+    readonly itemLabel: import("@angular/core").Signal<string>;
     constructor();
     protected readonly class: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ScSelectItem, never>;