@semantic-components/ui 0.67.0 → 0.68.0

package/esm2022/lib/components/index.js

@@ -10,8 +10,8 @@ export * from './button';
 export * from './button-group';
 export * from './calendar';
 export * from './card';
-export * from './collapsible';
 export * from './checkbox';
+export * from './collapsible';
 export * from './date-picker';
 export * from './dialog';
 export * from './drawer';
@@ -33,21 +33,23 @@ export * from './pagination';
 export * from './popover';
 export * from './progress';
 export * from './radio-group';
+export * from './range-slider';
+export * from './scroll-area';
 export * from './select';
 export * from './separator';
 export * from './sheet';
 export * from './skeleton';
-export * from './range-slider';
 export * from './slider';
 export * from './spinner';
 export * from './switch';
-export * from './time-picker';
 export * from './table';
 export * from './tabs';
 export * from './textarea';
+export * from './time-picker';
+export * from './toast';
 export * from './toggle';
 export * from './toggle-group';
 export * from './toolbar';
-export * from './toast';
 export * from './tooltip';
+export * from './typography';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC","sourcesContent":["export * from './accordion';\nexport * from './alert';\nexport * from './alert-dialog';\nexport * from './aspect-ratio';\nexport * from './avatar';\nexport * from './backdrop';\nexport * from './badge';\nexport * from './breadcrumb';\nexport * from './button';\nexport * from './button-group';\nexport * from './calendar';\nexport * from './card';\nexport * from './collapsible';\nexport * from './checkbox';\nexport * from './date-picker';\nexport * from './dialog';\nexport * from './drawer';\nexport * from './empty';\nexport * from './field';\nexport * from './file-upload';\nexport * from './hover-card';\nexport * from './input';\nexport * from './input-group';\nexport * from './item';\nexport * from './kbd';\nexport * from './label';\nexport * from './link';\nexport * from './menu';\nexport * from './menu-bar';\nexport * from './native-select';\nexport * from './navigation-menu';\nexport * from './pagination';\nexport * from './popover';\nexport * from './progress';\nexport * from './radio-group';\nexport * from './select';\nexport * from './separator';\nexport * from './sheet';\nexport * from './skeleton';\nexport * from './range-slider';\nexport * from './slider';\nexport * from './spinner';\nexport * from './switch';\nexport * from './time-picker';\nexport * from './table';\nexport * from './tabs';\nexport * from './textarea';\nexport * from './toggle';\nexport * from './toggle-group';\nexport * from './toolbar';\nexport * from './toast';\nexport * from './tooltip';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC","sourcesContent":["export * from './accordion';\nexport * from './alert';\nexport * from './alert-dialog';\nexport * from './aspect-ratio';\nexport * from './avatar';\nexport * from './backdrop';\nexport * from './badge';\nexport * from './breadcrumb';\nexport * from './button';\nexport * from './button-group';\nexport * from './calendar';\nexport * from './card';\nexport * from './checkbox';\nexport * from './collapsible';\nexport * from './date-picker';\nexport * from './dialog';\nexport * from './drawer';\nexport * from './empty';\nexport * from './field';\nexport * from './file-upload';\nexport * from './hover-card';\nexport * from './input';\nexport * from './input-group';\nexport * from './item';\nexport * from './kbd';\nexport * from './label';\nexport * from './link';\nexport * from './menu';\nexport * from './menu-bar';\nexport * from './native-select';\nexport * from './navigation-menu';\nexport * from './pagination';\nexport * from './popover';\nexport * from './progress';\nexport * from './radio-group';\nexport * from './range-slider';\nexport * from './scroll-area';\nexport * from './select';\nexport * from './separator';\nexport * from './sheet';\nexport * from './skeleton';\nexport * from './slider';\nexport * from './spinner';\nexport * from './switch';\nexport * from './table';\nexport * from './tabs';\nexport * from './textarea';\nexport * from './time-picker';\nexport * from './toast';\nexport * from './toggle';\nexport * from './toggle-group';\nexport * from './toolbar';\nexport * from './tooltip';\nexport * from './typography';\n"]}

package/esm2022/lib/components/navigation-menu/index.js

@@ -1,5 +1,6 @@
 export { ScNavigationMenu } from './navigation-menu';
 export { ScNavigationMenuContent } from './navigation-menu-content';
+export { ScNavigationMenuGrid } from './navigation-menu-grid';
 export { ScNavigationMenuItem } from './navigation-menu-item';
 export { ScNavigationMenuLink } from './navigation-menu-link';
 export { ScNavigationMenuList } from './navigation-menu-list';

package/esm2022/lib/components/navigation-menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/navigation-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export { ScNavigationMenu } from './navigation-menu';\nexport { ScNavigationMenuContent } from './navigation-menu-content';\nexport { ScNavigationMenuItem } from './navigation-menu-item';\nexport { ScNavigationMenuLink } from './navigation-menu-link';\nexport { ScNavigationMenuList } from './navigation-menu-list';\nexport { ScNavigationMenuPortal } from './navigation-menu-portal';\nexport { ScNavigationMenuTrigger } from './navigation-menu-trigger';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/navigation-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export { ScNavigationMenu } from './navigation-menu';\nexport { ScNavigationMenuContent } from './navigation-menu-content';\nexport { ScNavigationMenuGrid } from './navigation-menu-grid';\nexport { ScNavigationMenuItem } from './navigation-menu-item';\nexport { ScNavigationMenuLink } from './navigation-menu-link';\nexport { ScNavigationMenuList } from './navigation-menu-list';\nexport { ScNavigationMenuPortal } from './navigation-menu-portal';\nexport { ScNavigationMenuTrigger } from './navigation-menu-trigger';\n"]}

package/esm2022/lib/components/navigation-menu/navigation-menu-grid.js

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScNavigationMenuGrid {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuGrid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScNavigationMenuGrid, isStandalone: true, selector: "ul[scNavigationMenuGrid]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu-grid" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuGrid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ul[scNavigationMenuGrid]',
+                    host: {
+                        'data-slot': 'navigation-menu-grid',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=navigation-menu-grid.js.map

package/esm2022/lib/components/navigation-menu/navigation-menu-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu-grid.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/navigation-menu/navigation-menu-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AASjC,MAAM,OAAO,oBAAoB;IACtB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,mEAAmE,EACnE,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGARS,oBAAoB;2FAApB,oBAAoB;;2FAApB,oBAAoB;kBAPhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,0BAA0B;oBACpC,IAAI,EAAE;wBACJ,WAAW,EAAE,sBAAsB;wBACnC,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'ul[scNavigationMenuGrid]',\n  host: {\n    'data-slot': 'navigation-menu-grid',\n    '[class]': 'class()',\n  },\n})\nexport class ScNavigationMenuGrid {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/scroll-area/index.js

@@ -0,0 +1,2 @@
+export * from './scroll-area';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/scroll-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/scroll-area/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './scroll-area';\n"]}

package/esm2022/lib/components/scroll-area/scroll-area.js

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScScrollArea {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('overflow-auto', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScScrollArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScScrollArea, isStandalone: true, selector: "div[scScrollArea]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "scroll-area" }, properties: { "class": "class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: ["[data-slot=scroll-area]{scrollbar-width:thin;scrollbar-color:transparent transparent}[data-slot=scroll-area]:hover{scrollbar-color:var(--color-border) transparent}[data-slot=scroll-area]::-webkit-scrollbar{width:8px;height:8px}[data-slot=scroll-area]::-webkit-scrollbar-thumb{background-color:transparent;border-radius:9999px}[data-slot=scroll-area]:hover::-webkit-scrollbar-thumb{background-color:var(--color-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScScrollArea, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[scScrollArea]', host: {
+                        'data-slot': 'scroll-area',
+                        '[class]': 'class()',
+                    }, template: `
+    <ng-content />
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["[data-slot=scroll-area]{scrollbar-width:thin;scrollbar-color:transparent transparent}[data-slot=scroll-area]:hover{scrollbar-color:var(--color-border) transparent}[data-slot=scroll-area]::-webkit-scrollbar{width:8px;height:8px}[data-slot=scroll-area]::-webkit-scrollbar-thumb{background-color:transparent;border-radius:9999px}[data-slot=scroll-area]:hover::-webkit-scrollbar-thumb{background-color:var(--color-border)}\n"] }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=scroll-area.js.map

package/esm2022/lib/components/scroll-area/scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/scroll-area/scroll-area.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAkCjC,MAAM,OAAO,YAAY;IACd,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACvC,CAAC;uGALS,YAAY;2FAAZ,YAAY,qTA1Bb;;GAET;;2FAwBU,YAAY;kBAhCxB,SAAS;+BACE,mBAAmB,QACvB;wBACJ,WAAW,EAAE,aAAa;wBAC1B,SAAS,EAAE,SAAS;qBACrB,YACS;;GAET,iBAqBc,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\n@Component({\n  selector: 'div[scScrollArea]',\n  host: {\n    'data-slot': 'scroll-area',\n    '[class]': 'class()',\n  },\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    [data-slot='scroll-area'] {\n      scrollbar-width: thin;\n      scrollbar-color: transparent transparent;\n    }\n    [data-slot='scroll-area']:hover {\n      scrollbar-color: var(--color-border) transparent;\n    }\n    [data-slot='scroll-area']::-webkit-scrollbar {\n      width: 8px;\n      height: 8px;\n    }\n    [data-slot='scroll-area']::-webkit-scrollbar-thumb {\n      background-color: transparent;\n      border-radius: 9999px;\n    }\n    [data-slot='scroll-area']:hover::-webkit-scrollbar-thumb {\n      background-color: var(--color-border);\n    }\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScScrollArea {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('overflow-auto', this.classInput()),\n  );\n}\n"]}

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

@@ -0,0 +1,43 @@
+import { computed, Directive, ElementRef, inject, input } from '@angular/core';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export const headingVariants = cva('scroll-m-20 tracking-tight', {
+    variants: {
+        level: {
+            h1: 'text-4xl font-extrabold',
+            h2: 'text-3xl font-semibold first:mt-0',
+            h3: 'text-2xl font-semibold',
+            h4: 'text-xl font-semibold',
+        },
+        underline: {
+            true: 'border-b pb-2',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        underline: false,
+    },
+});
+export class ScHeading {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    underline = input(false, ...(ngDevMode ? [{ debugName: "underline" }] : []));
+    elementRef = inject(ElementRef);
+    class = computed(() => {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScHeading, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'h1[scHeading], h2[scHeading], h3[scHeading], h4[scHeading]',
+                    host: {
+                        'data-slot': 'heading',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], underline: [{ type: i0.Input, args: [{ isSignal: true, alias: "underline", required: false }] }] } });
+//# sourceMappingURL=heading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/typography/heading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAEjC,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,4BAA4B,EAAE;IAC/D,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,EAAE,EAAE,yBAAyB;YAC7B,EAAE,EAAE,mCAAmC;YACvC,EAAE,EAAE,wBAAwB;YAC5B,EAAE,EAAE,uBAAuB;SAC5B;QACD,SAAS,EAAE;YACT,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,EAAE;SACV;KACF;IACD,eAAe,EAAE;QACf,SAAS,EAAE,KAAK;KACjB;CACF,CAAC,CAAC;AAWH,MAAM,OAAO,SAAS;IACX,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,SAAS,GAAG,KAAK,CAAiC,KAAK,qDAAC,CAAC;IAEjD,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC;IAEvD,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,MAAM,KAAK,GACT,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,EAAgC,CAAC;QACpF,OAAO,EAAE,CACP,eAAe,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,EACvD,IAAI,CAAC,UAAU,EAAE,CAClB,CAAC;IACJ,CAAC,iDAAC,CAAC;uGAbQ,SAAS;2FAAT,SAAS;;2FAAT,SAAS;kBAPrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,4DAA4D;oBACtE,IAAI,EAAE;wBACJ,WAAW,EAAE,SAAS;wBACtB,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, ElementRef, inject, input } from '@angular/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nexport const headingVariants = cva('scroll-m-20 tracking-tight', {\n  variants: {\n    level: {\n      h1: 'text-4xl font-extrabold',\n      h2: 'text-3xl font-semibold first:mt-0',\n      h3: 'text-2xl font-semibold',\n      h4: 'text-xl font-semibold',\n    },\n    underline: {\n      true: 'border-b pb-2',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    underline: false,\n  },\n});\n\nexport type ScHeadingVariants = VariantProps<typeof headingVariants>;\n\n@Directive({\n  selector: 'h1[scHeading], h2[scHeading], h3[scHeading], h4[scHeading]',\n  host: {\n    'data-slot': 'heading',\n    '[class]': 'class()',\n  },\n})\nexport class ScHeading {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly underline = input<ScHeadingVariants['underline']>(false);\n\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  protected readonly class = computed(() => {\n    const level =\n      this.elementRef.nativeElement.tagName.toLowerCase() as ScHeadingVariants['level'];\n    return cn(\n      headingVariants({ level, underline: this.underline() }),\n      this.classInput(),\n    );\n  });\n}\n"]}

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

@@ -0,0 +1,2 @@
+export { ScHeading, headingVariants } from './heading';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAA0B,MAAM,WAAW,CAAC","sourcesContent":["export { ScHeading, headingVariants, type ScHeadingVariants } from './heading';\n"]}

package/lib/components/index.d.ts

@@ -10,8 +10,8 @@ export * from './button';
 export * from './button-group';
 export * from './calendar';
 export * from './card';
-export * from './collapsible';
 export * from './checkbox';
+export * from './collapsible';
 export * from './date-picker';
 export * from './dialog';
 export * from './drawer';
@@ -33,20 +33,22 @@ export * from './pagination';
 export * from './popover';
 export * from './progress';
 export * from './radio-group';
+export * from './range-slider';
+export * from './scroll-area';
 export * from './select';
 export * from './separator';
 export * from './sheet';
 export * from './skeleton';
-export * from './range-slider';
 export * from './slider';
 export * from './spinner';
 export * from './switch';
-export * from './time-picker';
 export * from './table';
 export * from './tabs';
 export * from './textarea';
+export * from './time-picker';
+export * from './toast';
 export * from './toggle';
 export * from './toggle-group';
 export * from './toolbar';
-export * from './toast';
 export * from './tooltip';
+export * from './typography';

package/lib/components/navigation-menu/index.d.ts

@@ -1,5 +1,6 @@
 export { ScNavigationMenu } from './navigation-menu';
 export { ScNavigationMenuContent } from './navigation-menu-content';
+export { ScNavigationMenuGrid } from './navigation-menu-grid';
 export { ScNavigationMenuItem } from './navigation-menu-item';
 export { ScNavigationMenuLink } from './navigation-menu-link';
 export { ScNavigationMenuList } from './navigation-menu-list';

package/lib/components/navigation-menu/navigation-menu-grid.d.ts

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

package/lib/components/scroll-area/index.d.ts

@@ -0,0 +1 @@
+export * from './scroll-area';

package/lib/components/scroll-area/scroll-area.d.ts

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

package/lib/components/typography/heading.d.ts

@@ -0,0 +1,15 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as i0 from "@angular/core";
+export declare const headingVariants: (props?: ({
+    level?: "h1" | "h2" | "h3" | "h4" | null | undefined;
+    underline?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ScHeadingVariants = VariantProps<typeof headingVariants>;
+export declare class ScHeading {
+    readonly classInput: import("@angular/core").InputSignal<string>;
+    readonly underline: import("@angular/core").InputSignal<boolean | null | undefined>;
+    private readonly elementRef;
+    protected readonly class: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScHeading, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ScHeading, "h1[scHeading], h2[scHeading], h3[scHeading], h4[scHeading]", never, { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; "underline": { "alias": "underline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1 @@
+export { ScHeading, headingVariants, type ScHeadingVariants } from './heading';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semantic-components/ui",
-  "version": "0.67.0",
+  "version": "0.68.0",
   "private": false,
   "publishConfig": {
     "access": "public"