@semantic-components/ui 0.38.0 → 0.39.0

package/fesm2022/semantic-components-ui.mjs

@@ -6510,6 +6510,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+class CalendarService {
+    firstYear = signal(0);
+    lastYear = signal(0);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CalendarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CalendarService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CalendarService, decorators: [{
+            type: Injectable
+        }] });
+
 function getFirstDayOfWeek(localeId) {
     const locale = new Intl.Locale(localeId);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -6558,79 +6568,116 @@ function getMonthName(locale, yearMonth) {
 }
 
 class ScCalendarHeader {
+    calendarService = inject(CalendarService);
     classInput = input('', {
         alias: 'class',
     });
-    class = computed(() => cn('flex justify-between', this.classInput()));
+    class = computed(() => cn('flex', this.view() === 'months' && 'justify-center', this.view() !== 'months' && 'justify-between', this.classInput()));
     currentMonth = input.required();
-    disabled = input.required();
+    view = input.required();
+    firstYear = computed(() => this.calendarService.firstYear());
+    lastYear = computed(() => this.calendarService.lastYear());
     monthYearChange = output();
     viewToggled = output();
     localeId = inject(LOCALE_ID);
     monthName = computed(() => getMonthName(this.localeId, this.currentMonth()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", type: ScCalendarHeader, isStandalone: true, selector: "sc-calendar-header", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { monthYearChange: "monthYearChange", viewToggled: "viewToggled" }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
-    <button
-      [disabled]="disabled()"
-      (click)="monthYearChange.emit(-1)"
-      aria-label="Previous month"
-      sc-button
-      variant="outline"
-      type="button"
-      size="icon"
-    >
-      <svg si-chevron-left-icon></svg>
-    </button>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ScCalendarHeader, isStandalone: true, selector: "sc-calendar-header", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { monthYearChange: "monthYearChange", viewToggled: "viewToggled" }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
+    @if (view() !== 'months') {
+      <button
+        (click)="monthYearChange.emit(-1)"
+        aria-label="Previous month"
+        sc-button
+        variant="outline"
+        type="button"
+        size="icon"
+      >
+        <svg si-chevron-left-icon></svg>
+      </button>
+    }
 
-    <button (click)="viewToggled.emit()" sc-button variant="ghost" type="button">
-      {{ monthName() }} {{ currentMonth().year }}
-    </button>
+    @if (view() === 'days') {
+      <button (click)="viewToggled.emit()" sc-button variant="ghost" type="button">
+        {{ monthName() }} {{ currentMonth().year }}
+        <svg si-chevron-down-icon></svg>
+      </button>
+    }
 
-    <button
-      [disabled]="disabled()"
-      (click)="monthYearChange.emit(1)"
-      aria-label="Next month"
-      sc-button
-      variant="outline"
-      type="button"
-      size="icon"
-      type="button"
-    >
-      <svg si-chevron-right-icon></svg>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SiChevronRightIcon, selector: "svg[si-chevron-right-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiChevronLeftIcon, selector: "svg[si-chevron-left-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: ScButton, selector: "button[sc-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    @if (view() === 'months') {
+      <div>{{ monthName() }} {{ currentMonth().year }}</div>
+    }
+
+    @if (view() === 'years') {
+      <div class="flex items-center">
+        {{ firstYear() }}
+        <svg class="size-4" si-minus-icon></svg>
+        {{ lastYear() }}
+      </div>
+    }
+
+    @if (view() !== 'months') {
+      <button
+        (click)="monthYearChange.emit(1)"
+        aria-label="Next month"
+        sc-button
+        variant="outline"
+        type="button"
+        size="icon"
+        type="button"
+      >
+        <svg si-chevron-right-icon></svg>
+      </button>
+    }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SiChevronRightIcon, selector: "svg[si-chevron-right-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiChevronLeftIcon, selector: "svg[si-chevron-left-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: ScButton, selector: "button[sc-button]" }, { kind: "component", type: SiChevronDownIcon, selector: "svg[si-chevron-down-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiMinusIcon, selector: "svg[si-minus-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScCalendarHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-calendar-header', imports: [SiChevronRightIcon, SiChevronLeftIcon, ScButton], template: `
-    <button
-      [disabled]="disabled()"
-      (click)="monthYearChange.emit(-1)"
-      aria-label="Previous month"
-      sc-button
-      variant="outline"
-      type="button"
-      size="icon"
-    >
-      <svg si-chevron-left-icon></svg>
-    </button>
+            args: [{ selector: 'sc-calendar-header', imports: [SiChevronRightIcon, SiChevronLeftIcon, ScButton, SiChevronDownIcon, SiMinusIcon], template: `
+    @if (view() !== 'months') {
+      <button
+        (click)="monthYearChange.emit(-1)"
+        aria-label="Previous month"
+        sc-button
+        variant="outline"
+        type="button"
+        size="icon"
+      >
+        <svg si-chevron-left-icon></svg>
+      </button>
+    }
 
-    <button (click)="viewToggled.emit()" sc-button variant="ghost" type="button">
-      {{ monthName() }} {{ currentMonth().year }}
-    </button>
+    @if (view() === 'days') {
+      <button (click)="viewToggled.emit()" sc-button variant="ghost" type="button">
+        {{ monthName() }} {{ currentMonth().year }}
+        <svg si-chevron-down-icon></svg>
+      </button>
+    }
 
-    <button
-      [disabled]="disabled()"
-      (click)="monthYearChange.emit(1)"
-      aria-label="Next month"
-      sc-button
-      variant="outline"
-      type="button"
-      size="icon"
-      type="button"
-    >
-      <svg si-chevron-right-icon></svg>
-    </button>
+    @if (view() === 'months') {
+      <div>{{ monthName() }} {{ currentMonth().year }}</div>
+    }
+
+    @if (view() === 'years') {
+      <div class="flex items-center">
+        {{ firstYear() }}
+        <svg class="size-4" si-minus-icon></svg>
+        {{ lastYear() }}
+      </div>
+    }
+
+    @if (view() !== 'months') {
+      <button
+        (click)="monthYearChange.emit(1)"
+        aria-label="Next month"
+        sc-button
+        variant="outline"
+        type="button"
+        size="icon"
+        type="button"
+      >
+        <svg si-chevron-right-icon></svg>
+      </button>
+    }
   `, host: {
                         '[class]': 'class()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
@@ -6738,6 +6785,10 @@ class ScDaySelector {
     dateSelected = output();
     selectedDate = input();
     focusedDate = input();
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('grid grid-cols-7 gap-px', this.classInput()));
     getVariant(day) {
         if (this.isSelected(day.date)) {
             return 'primary';
@@ -6760,54 +6811,56 @@ class ScDaySelector {
         return this.focusedDate() ? date.equals(this.focusedDate()) : false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScDaySelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ScDaySelector, isStandalone: true, selector: "sc-day-selector", inputs: { calendarDays: { classPropertyName: "calendarDays", publicName: "calendarDays", isSignal: true, isRequired: true, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected" }, ngImport: i0, template: `
-    <div class="grid grid-cols-7 gap-5">
-      @for (weekday of weekdays(); track weekday) {
-        <abbr class="size-10 text-center text-muted-foreground">
-          {{ weekday }}
-        </abbr>
-      }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ScDaySelector, isStandalone: true, selector: "sc-day-selector", inputs: { calendarDays: { classPropertyName: "calendarDays", publicName: "calendarDays", isSignal: true, isRequired: true, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected" }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
+    @for (weekday of weekdays(); track weekday) {
+      <abbr class="size-10 text-center text-muted-foreground">
+        {{ weekday }}
+      </abbr>
+    }
 
-      @for (day of calendarDays(); track day.date) {
-        <button
-          [variant]="getVariant(day)"
-          [isFocused]="isFocused(day.date)"
-          (click)="selectDay(day); $event.stopPropagation()"
-          sc-day-button
-          size="icon"
-        >
-          {{ day.dayOfMonth }}
-        </button>
-      }
-    </div>
+    @for (day of calendarDays(); track day.date) {
+      <button
+        [variant]="getVariant(day)"
+        [isFocused]="isFocused(day.date)"
+        (click)="selectDay(day); $event.stopPropagation()"
+        sc-day-button
+        size="icon"
+      >
+        {{ day.dayOfMonth }}
+      </button>
+    }
   `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScDayButton, selector: "button[sc-day-button]", inputs: ["isFocused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScDaySelector, decorators: [{
             type: Component,
             args: [{ selector: 'sc-day-selector', imports: [ScDayButton], template: `
-    <div class="grid grid-cols-7 gap-5">
-      @for (weekday of weekdays(); track weekday) {
-        <abbr class="size-10 text-center text-muted-foreground">
-          {{ weekday }}
-        </abbr>
-      }
+    @for (weekday of weekdays(); track weekday) {
+      <abbr class="size-10 text-center text-muted-foreground">
+        {{ weekday }}
+      </abbr>
+    }
 
-      @for (day of calendarDays(); track day.date) {
-        <button
-          [variant]="getVariant(day)"
-          [isFocused]="isFocused(day.date)"
-          (click)="selectDay(day); $event.stopPropagation()"
-          sc-day-button
-          size="icon"
-        >
-          {{ day.dayOfMonth }}
-        </button>
-      }
-    </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+    @for (day of calendarDays(); track day.date) {
+      <button
+        [variant]="getVariant(day)"
+        [isFocused]="isFocused(day.date)"
+        (click)="selectDay(day); $event.stopPropagation()"
+        sc-day-button
+        size="icon"
+      >
+        {{ day.dayOfMonth }}
+      </button>
+    }
+  `, host: {
+                        '[class]': 'class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
 class ScMonthSelector {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('grid grid-cols-3 gap-1 w-full', this.classInput()));
     currentMonth = input.required();
     months = [];
     localeId = inject(LOCALE_ID);
@@ -6818,49 +6871,60 @@ class ScMonthSelector {
     selectMonth(monthIndex) {
         this.monthSelected.emit(Temporal.PlainYearMonth.from({ year: this.currentMonth().year, month: monthIndex + 1 }));
     }
+    getVariant(i) {
+        if (i === this.currentMonth().month - 1) {
+            return 'primary';
+        }
+        // if (this.isFocused(day.date)) {
+        //   return 'secondary';
+        // }
+        // if (isToday(day.date)) {
+        //   return 'outline';
+        // }
+        return 'ghost';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScMonthSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ScMonthSelector, isStandalone: true, selector: "sc-month-selector", inputs: { currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { monthSelected: "monthSelected" }, ngImport: i0, template: `
-    <div class="p-2 grid grid-cols-3 gap-1">
-      @for (m of months; track m; let i = $index) {
-        <button
-          class="p-2 text-sm rounded hover:bg-blue-100"
-          [class.bg-blue-500]="i === currentMonth().month - 1"
-          [class.text-white]="i === currentMonth().month - 1"
-          (click)="selectMonth(i); $event.stopPropagation()"
-        >
-          {{ m.substr(0, 3) }}
-        </button>
-      }
-    </div>
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ScMonthSelector, isStandalone: true, selector: "sc-month-selector", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { monthSelected: "monthSelected" }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
+    @for (month of months; track $index; let i = $index) {
+      <button
+        [variant]="getVariant(i)"
+        (click)="selectMonth(i); $event.stopPropagation()"
+        sc-button
+      >
+        {{ month }}
+      </button>
+    }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScMonthSelector, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-month-selector', imports: [], template: `
-    <div class="p-2 grid grid-cols-3 gap-1">
-      @for (m of months; track m; let i = $index) {
-        <button
-          class="p-2 text-sm rounded hover:bg-blue-100"
-          [class.bg-blue-500]="i === currentMonth().month - 1"
-          [class.text-white]="i === currentMonth().month - 1"
-          (click)="selectMonth(i); $event.stopPropagation()"
-        >
-          {{ m.substr(0, 3) }}
-        </button>
-      }
-    </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+            args: [{ selector: 'sc-month-selector', imports: [ScButton], template: `
+    @for (month of months; track $index; let i = $index) {
+      <button
+        [variant]="getVariant(i)"
+        (click)="selectMonth(i); $event.stopPropagation()"
+        sc-button
+      >
+        {{ month }}
+      </button>
+    }
+  `, host: {
+                        '[class]': 'class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
 class ScYearSelector {
-    currentYear = input.required();
-    year = linkedSignal(() => {
-        return this.currentYear();
+    classInput = input('', {
+        alias: 'class',
     });
+    class = computed(() => cn('grid grid-cols-4 gap-1 w-full', this.classInput()));
+    currentYear = input.required();
+    previewYear = input.required();
+    firstYear = computed(() => this.calendarService.firstYear());
+    lastYear = computed(() => this.calendarService.lastYear());
     years = computed(() => {
         const years = [];
-        // Generate years (current year - 9 to current year + 10)
-        for (let year = this.year() - 9; year <= this.year() + 10; year++) {
+        for (let year = this.firstYear(); year <= this.lastYear(); year++) {
             years.push(year);
         }
         return years;
@@ -6869,50 +6933,65 @@ class ScYearSelector {
     selectYear(year) {
         this.yearSelected.emit(year);
     }
+    calendarService = inject(CalendarService);
+    constructor() {
+        effect(() => {
+            this.calendarService.firstYear.set(this.previewYear() - 9);
+            this.calendarService.lastYear.set(this.previewYear() + 10);
+        });
+    }
+    getVariant(y) {
+        if (y === this.currentYear()) {
+            return 'primary';
+        }
+        // if (this.isFocused(day.date)) {
+        //   return 'secondary';
+        // }
+        // if (isToday(day.date)) {
+        //   return 'outline';
+        // }
+        return 'ghost';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScYearSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ScYearSelector, isStandalone: true, selector: "sc-year-selector", inputs: { currentYear: { classPropertyName: "currentYear", publicName: "currentYear", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { yearSelected: "yearSelected" }, ngImport: i0, template: `
-    <div class="p-2 grid grid-cols-4 gap-1">
-      @for (y of years(); track y) {
-        <button
-          class="p-2 text-sm rounded hover:bg-blue-100"
-          [class.bg-blue-500]="y === currentYear()"
-          [class.text-white]="y === currentYear()"
-          (click)="selectYear(y); $event.stopPropagation()"
-        >
-          {{ y }}
-        </button>
-      }
-    </div>
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ScYearSelector, isStandalone: true, selector: "sc-year-selector", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, currentYear: { classPropertyName: "currentYear", publicName: "currentYear", isSignal: true, isRequired: true, transformFunction: null }, previewYear: { classPropertyName: "previewYear", publicName: "previewYear", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { yearSelected: "yearSelected" }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
+    @for (year of years(); track $index) {
+      <button
+        [variant]="getVariant(year)"
+        (click)="selectYear(year); $event.stopPropagation()"
+        sc-button
+      >
+        {{ year }}
+      </button>
+    }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScYearSelector, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-year-selector', imports: [], template: `
-    <div class="p-2 grid grid-cols-4 gap-1">
-      @for (y of years(); track y) {
-        <button
-          class="p-2 text-sm rounded hover:bg-blue-100"
-          [class.bg-blue-500]="y === currentYear()"
-          [class.text-white]="y === currentYear()"
-          (click)="selectYear(y); $event.stopPropagation()"
-        >
-          {{ y }}
-        </button>
-      }
-    </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
+            args: [{ selector: 'sc-year-selector', imports: [ScButton], template: `
+    @for (year of years(); track $index) {
+      <button
+        [variant]="getVariant(year)"
+        (click)="selectYear(year); $event.stopPropagation()"
+        sc-button
+      >
+        {{ year }}
+      </button>
+    }
+  `, host: {
+                        '[class]': 'class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
 
 class ScCalendar {
     value = model();
-    minDate = input();
-    maxDate = input();
+    min = input();
+    max = input();
     classInput = input('', {
         alias: 'class',
     });
-    class = computed(() => cn('', this.classInput()));
+    class = computed(() => cn('block w-84', this.classInput()));
     today = signal(Temporal.Now.plainDateISO());
-    focusedDate = linkedSignal(() => {
+    date = computed(() => {
         if (this.value()) {
             return this.value();
         }
@@ -6920,21 +6999,22 @@ class ScCalendar {
             return this.today();
         }
     });
-    currentYear = linkedSignal(() => {
-        if (this.value()) {
-            return this.value().year;
-        }
-        else {
-            return this.today().year;
+    //if date is in the current month else focus first date of the current month
+    focusedDate = linkedSignal(() => {
+        if (this.date()?.year === this.currentMonth().year &&
+            this.date()?.month === this.currentMonth().month) {
+            return this.date();
         }
+        return new Temporal.PlainDate(this.currentMonth().year, this.currentMonth().month, 1);
+    });
+    currentYear = linkedSignal(() => {
+        return this.date().year;
+    });
+    previewYear = linkedSignal(() => {
+        return this.currentYear();
     });
     currentMonth = linkedSignal(() => {
-        if (this.value()) {
-            return this.value().toPlainYearMonth();
-        }
-        else {
-            return this.today().toPlainYearMonth();
-        }
+        return this.date().toPlainYearMonth();
     });
     firstDayOfMonth = computed(() => this.currentMonth().toPlainDate({
         day: 1,
@@ -6950,10 +7030,10 @@ class ScCalendar {
         return date.equals(today);
     }
     isDateDisabled(date) {
-        if (this.minDate() && Temporal.PlainDate.compare(date, this.minDate()) < 0) {
+        if (this.min() && Temporal.PlainDate.compare(date, this.min()) < 0) {
             return true;
         }
-        if (this.maxDate() && Temporal.PlainDate.compare(date, this.maxDate()) > 0) {
+        if (this.max() && Temporal.PlainDate.compare(date, this.max()) > 0) {
             return true;
         }
         return false;
@@ -6986,6 +7066,23 @@ class ScCalendar {
         this.focusedDate.set(newDate);
     }
     handleKeydown(event) {
+        if (this.view() === 'days') {
+            this.handleKeydown1(event);
+        }
+        if (this.view() === 'years') {
+            this.handleKeydown2(event);
+        }
+        if (this.view() === 'months') {
+            this.handleKeydown3(event);
+        }
+    }
+    handleKeydown2(event) {
+        console.log(event);
+    }
+    handleKeydown3(event) {
+        console.log(event);
+    }
+    handleKeydown1(event) {
         switch (event.key) {
             case 'ArrowLeft':
                 this.moveFocus(-1);
@@ -7057,10 +7154,9 @@ class ScCalendar {
         }
     }
     weekdays = getLocalizedDayNames(this.localeId);
-    scYearSelector = viewChild(ScYearSelector);
     setMonthYear(n) {
         if (this.view() === 'years') {
-            this.scYearSelector()?.year.update((value) => value + n * 20);
+            this.previewYear.update((value) => value + n * 20);
         }
         if (this.view() === 'days') {
             if (n === 1) {
@@ -7074,7 +7170,6 @@ class ScCalendar {
     selectYear(year) {
         this.currentYear.set(year);
         this.currentMonth.update((month) => Temporal.PlainYearMonth.from({ year: year, month: month.month }));
-        this.value.set(undefined);
         this.toggleView();
     }
     selectMonth(month) {
@@ -7104,18 +7199,19 @@ class ScCalendar {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ScCalendar, isStandalone: true, selector: "sc-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class": "class()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ScCalendar, isStandalone: true, selector: "sc-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class": "class()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ScCalendar),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "scYearSelector", first: true, predicate: ScYearSelector, descendants: true, isSignal: true }], ngImport: i0, template: `
+            CalendarService,
+        ], ngImport: i0, template: `
     <div sc-card>
       <div sc-card-header>
         <sc-calendar-header
           [currentMonth]="currentMonth()"
-          [disabled]="view() === 'months'"
+          [view]="view()"
           (monthYearChange)="setMonthYear($event)"
           (viewToggled)="toggleView()"
         />
@@ -7123,7 +7219,11 @@ class ScCalendar {
       <div sc-card-content>
         @switch (view()) {
           @case ('years') {
-            <sc-year-selector [currentYear]="currentYear()" (yearSelected)="selectYear($event)" />
+            <sc-year-selector
+              [currentYear]="currentYear()"
+              [previewYear]="previewYear()"
+              (yearSelected)="selectYear($event)"
+            />
           }
           @case ('months') {
             <sc-month-selector
@@ -7143,7 +7243,7 @@ class ScCalendar {
         }
       </div>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScYearSelector, selector: "sc-year-selector", inputs: ["currentYear"], outputs: ["yearSelected"] }, { kind: "component", type: ScMonthSelector, selector: "sc-month-selector", inputs: ["currentMonth"], outputs: ["monthSelected"] }, { kind: "component", type: ScDaySelector, selector: "sc-day-selector", inputs: ["calendarDays", "weekdays", "selectedDate", "focusedDate"], outputs: ["dateSelected"] }, { kind: "component", type: ScCard, selector: "div[sc-card]", inputs: ["class"] }, { kind: "component", type: ScCardHeader, selector: "div[sc-card-header]", inputs: ["class"] }, { kind: "component", type: ScCardContent, selector: "div[sc-card-content]", inputs: ["class"] }, { kind: "component", type: ScCalendarHeader, selector: "sc-calendar-header", inputs: ["class", "currentMonth", "disabled"], outputs: ["monthYearChange", "viewToggled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScYearSelector, selector: "sc-year-selector", inputs: ["class", "currentYear", "previewYear"], outputs: ["yearSelected"] }, { kind: "component", type: ScMonthSelector, selector: "sc-month-selector", inputs: ["class", "currentMonth"], outputs: ["monthSelected"] }, { kind: "component", type: ScDaySelector, selector: "sc-day-selector", inputs: ["calendarDays", "weekdays", "selectedDate", "focusedDate", "class"], outputs: ["dateSelected"] }, { kind: "component", type: ScCard, selector: "div[sc-card]", inputs: ["class"] }, { kind: "component", type: ScCardHeader, selector: "div[sc-card-header]", inputs: ["class"] }, { kind: "component", type: ScCardContent, selector: "div[sc-card-content]", inputs: ["class"] }, { kind: "component", type: ScCalendarHeader, selector: "sc-calendar-header", inputs: ["class", "currentMonth", "view"], outputs: ["monthYearChange", "viewToggled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScCalendar, decorators: [{
             type: Component,
@@ -7160,7 +7260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
       <div sc-card-header>
         <sc-calendar-header
           [currentMonth]="currentMonth()"
-          [disabled]="view() === 'months'"
+          [view]="view()"
           (monthYearChange)="setMonthYear($event)"
           (viewToggled)="toggleView()"
         />
@@ -7168,7 +7268,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
       <div sc-card-content>
         @switch (view()) {
           @case ('years') {
-            <sc-year-selector [currentYear]="currentYear()" (yearSelected)="selectYear($event)" />
+            <sc-year-selector
+              [currentYear]="currentYear()"
+              [previewYear]="previewYear()"
+              (yearSelected)="selectYear($event)"
+            />
           }
           @case ('months') {
             <sc-month-selector
@@ -7197,6 +7301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                             useExisting: forwardRef(() => ScCalendar),
                             multi: true,
                         },
+                        CalendarService,
                     ] }]
         }] });
 
@@ -7323,6 +7428,9 @@ class ScRangeCalendar {
             return this.today().year;
         }
     });
+    previewYear = linkedSignal(() => {
+        return this.currentYear();
+    });
     currentMonth = linkedSignal(() => {
         if (this.value()) {
             return this.value().start.toPlainYearMonth();
@@ -7461,10 +7569,9 @@ class ScRangeCalendar {
         }
     }
     weekdays = getLocalizedDayNames(this.localeId);
-    scYearSelector = viewChild(ScYearSelector);
     setMonthYear(n) {
         if (this.view() === 'years') {
-            this.scYearSelector()?.year.update((value) => value + n * 20);
+            this.previewYear.update((value) => value + n * 20);
         }
         if (this.view() === 'days') {
             if (n === 1) {
@@ -7514,12 +7621,12 @@ class ScRangeCalendar {
                 useExisting: forwardRef(() => ScRangeCalendar),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "scYearSelector", first: true, predicate: ScYearSelector, descendants: true, isSignal: true }], ngImport: i0, template: `
+        ], ngImport: i0, template: `
     <div sc-card>
       <div sc-card-header>
         <sc-calendar-header
           [currentMonth]="currentMonth()"
-          [disabled]="view() === 'months'"
+          [view]="view()"
           (monthYearChange)="setMonthYear($event)"
           (viewToggled)="toggleView()"
         />
@@ -7527,7 +7634,11 @@ class ScRangeCalendar {
       <div sc-card-content>
         @switch (view()) {
           @case ('years') {
-            <sc-year-selector [currentYear]="currentYear()" (yearSelected)="selectYear($event)" />
+            <sc-year-selector
+              [currentYear]="currentYear()"
+              [previewYear]="previewYear()"
+              (yearSelected)="selectYear($event)"
+            />
           }
           @case ('months') {
             <sc-month-selector
@@ -7546,7 +7657,7 @@ class ScRangeCalendar {
         }
       </div>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScYearSelector, selector: "sc-year-selector", inputs: ["currentYear"], outputs: ["yearSelected"] }, { kind: "component", type: ScMonthSelector, selector: "sc-month-selector", inputs: ["currentMonth"], outputs: ["monthSelected"] }, { kind: "component", type: ScDaysSelector, selector: "sc-days-selector", inputs: ["calendarDays", "weekdays", "selectedRange", "focusedDate"], outputs: ["rangeSelected"] }, { kind: "component", type: ScCard, selector: "div[sc-card]", inputs: ["class"] }, { kind: "component", type: ScCardHeader, selector: "div[sc-card-header]", inputs: ["class"] }, { kind: "component", type: ScCardContent, selector: "div[sc-card-content]", inputs: ["class"] }, { kind: "component", type: ScCalendarHeader, selector: "sc-calendar-header", inputs: ["class", "currentMonth", "disabled"], outputs: ["monthYearChange", "viewToggled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScYearSelector, selector: "sc-year-selector", inputs: ["class", "currentYear", "previewYear"], outputs: ["yearSelected"] }, { kind: "component", type: ScMonthSelector, selector: "sc-month-selector", inputs: ["class", "currentMonth"], outputs: ["monthSelected"] }, { kind: "component", type: ScDaysSelector, selector: "sc-days-selector", inputs: ["calendarDays", "weekdays", "selectedRange", "focusedDate"], outputs: ["rangeSelected"] }, { kind: "component", type: ScCard, selector: "div[sc-card]", inputs: ["class"] }, { kind: "component", type: ScCardHeader, selector: "div[sc-card-header]", inputs: ["class"] }, { kind: "component", type: ScCardContent, selector: "div[sc-card-content]", inputs: ["class"] }, { kind: "component", type: ScCalendarHeader, selector: "sc-calendar-header", inputs: ["class", "currentMonth", "view"], outputs: ["monthYearChange", "viewToggled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScRangeCalendar, decorators: [{
             type: Component,
@@ -7563,7 +7674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
       <div sc-card-header>
         <sc-calendar-header
           [currentMonth]="currentMonth()"
-          [disabled]="view() === 'months'"
+          [view]="view()"
           (monthYearChange)="setMonthYear($event)"
           (viewToggled)="toggleView()"
         />
@@ -7571,7 +7682,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
       <div sc-card-content>
         @switch (view()) {
           @case ('years') {
-            <sc-year-selector [currentYear]="currentYear()" (yearSelected)="selectYear($event)" />
+            <sc-year-selector
+              [currentYear]="currentYear()"
+              [previewYear]="previewYear()"
+              (yearSelected)="selectYear($event)"
+            />
           }
           @case ('months') {
             <sc-month-selector
@@ -11837,24 +11952,934 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 args: ['contentContainer']
             }] } });
 
-class ScTab {
-    class = input('');
-    classes = computed(() => cn('', this.class()));
-    active = signal(false);
-    label = viewChild.required('label');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ScTab, isStandalone: true, selector: "sc-tab", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <ng-template #label>
-      <ng-content select="sc-tab-label" />
-    </ng-template>
-
-    @if (active()) {
-      <ng-content select="sc-tab-content" />
+// scroll-area.component.ts
+class ScrollAreaComponent {
+    viewportRef;
+    thumbRef;
+    isScrolling = false;
+    isHovering = false;
+    isDragging = false;
+    scrollTimeout;
+    thumbHeight = 20;
+    thumbTop = 0;
+    startY = 0;
+    startScrollTop = 0;
+    constructor() {
+        // Add document-level event listeners for drag operations
+        document.addEventListener('mousemove', this.onMouseMove.bind(this));
+        document.addEventListener('mouseup', this.onMouseUp.bind(this));
     }
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScTab, decorators: [{
-            type: Component,
+    ngOnDestroy() {
+        // Clean up event listeners
+        document.removeEventListener('mousemove', this.onMouseMove.bind(this));
+        document.removeEventListener('mouseup', this.onMouseUp.bind(this));
+    }
+    ngAfterViewInit() {
+        this.updateThumb();
+    }
+    onScroll() {
+        this.updateThumb();
+        this.isScrolling = true;
+        clearTimeout(this.scrollTimeout);
+        this.scrollTimeout = setTimeout(() => {
+            this.isScrolling = false;
+        }, 300);
+    }
+    updateThumb() {
+        const viewport = this.viewportRef.nativeElement;
+        const scrollHeight = viewport.scrollHeight;
+        const clientHeight = viewport.clientHeight;
+        // Calculate thumb height as percentage of visible area
+        this.thumbHeight = (clientHeight / scrollHeight) * 100;
+        // Calculate thumb position
+        this.thumbTop = (viewport.scrollTop / (scrollHeight - clientHeight)) * (100 - this.thumbHeight);
+    }
+    startDragging(event) {
+        this.isDragging = true;
+        this.startY = event.clientY;
+        this.startScrollTop = this.viewportRef.nativeElement.scrollTop;
+        event.preventDefault();
+    }
+    onMouseMove(event) {
+        if (!this.isDragging)
+            return;
+        const viewport = this.viewportRef.nativeElement;
+        const deltaY = event.clientY - this.startY;
+        const scrollbarHeight = viewport.clientHeight;
+        const scrollContentHeight = viewport.scrollHeight;
+        // Calculate the scroll ratio
+        const scrollRatio = scrollContentHeight / scrollbarHeight;
+        // Update scroll position
+        viewport.scrollTop = this.startScrollTop + deltaY * scrollRatio;
+        event.preventDefault();
+    }
+    onMouseUp() {
+        this.isDragging = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: ScrollAreaComponent, isStandalone: true, selector: "sc-scroll-area3", viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true }, { propertyName: "thumbRef", first: true, predicate: ["thumb"], descendants: true }], ngImport: i0, template: `
+    <div class="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] relative">
+      <div
+        class="h-full overflow-y-scroll overscroll-contain rounded-md outline outline-1 -outline-offset-1 outline-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 scrollbar-hide"
+        #viewport
+        (scroll)="onScroll()"
+        (mouseenter)="isHovering = true"
+        (mouseleave)="isHovering = false"
+      >
+        <div class="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-900">
+          <p>
+            Vernacular architecture is building done outside any academic tradition, and without
+            professional guidance. It is not a particular architectural movement or style, but
+            rather a broad category, encompassing a wide range and variety of building types, with
+            differing methods of construction, from around the world, both historical and extant and
+            classical and modern. Vernacular architecture constitutes 95% of the world's built
+            environment, as estimated in 1995 by Amos Rapoport, as measured against the small
+            percentage of new buildings every year designed by architects and built by engineers.
+          </p>
+          <p>
+            This type of architecture usually serves immediate, local needs, is constrained by the
+            materials available in its particular region and reflects local traditions and cultural
+            practices. The study of vernacular architecture does not examine formally schooled
+            architects, but instead that of the design skills and tradition of local builders, who
+            were rarely given any attribution for the work. More recently, vernacular architecture
+            has been examined by designers and the building industry in an effort to be more energy
+            conscious with contemporary design and construction—part of a broader interest in
+            sustainable design.
+          </p>
+        </div>
+      </div>
+      <div
+        class="absolute top-0 right-1 w-1 h-[calc(100%-0.5rem)] my-1 rounded-full bg-gray-200 opacity-0 transition-opacity delay-300"
+        [ngClass]="{ 'opacity-100 delay-0 duration-75': isScrolling || isHovering }"
+      >
+        <div
+          class="absolute w-full rounded-full bg-gray-500 cursor-pointer"
+          #thumb
+          [style.height.%]="thumbHeight"
+          [style.top.%]="thumbTop"
+          (mousedown)="startDragging($event)"
+        ></div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScrollAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-scroll-area3', standalone: true, imports: [CommonModule], template: `
+    <div class="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] relative">
+      <div
+        class="h-full overflow-y-scroll overscroll-contain rounded-md outline outline-1 -outline-offset-1 outline-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 scrollbar-hide"
+        #viewport
+        (scroll)="onScroll()"
+        (mouseenter)="isHovering = true"
+        (mouseleave)="isHovering = false"
+      >
+        <div class="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-900">
+          <p>
+            Vernacular architecture is building done outside any academic tradition, and without
+            professional guidance. It is not a particular architectural movement or style, but
+            rather a broad category, encompassing a wide range and variety of building types, with
+            differing methods of construction, from around the world, both historical and extant and
+            classical and modern. Vernacular architecture constitutes 95% of the world's built
+            environment, as estimated in 1995 by Amos Rapoport, as measured against the small
+            percentage of new buildings every year designed by architects and built by engineers.
+          </p>
+          <p>
+            This type of architecture usually serves immediate, local needs, is constrained by the
+            materials available in its particular region and reflects local traditions and cultural
+            practices. The study of vernacular architecture does not examine formally schooled
+            architects, but instead that of the design skills and tradition of local builders, who
+            were rarely given any attribution for the work. More recently, vernacular architecture
+            has been examined by designers and the building industry in an effort to be more energy
+            conscious with contemporary design and construction—part of a broader interest in
+            sustainable design.
+          </p>
+        </div>
+      </div>
+      <div
+        class="absolute top-0 right-1 w-1 h-[calc(100%-0.5rem)] my-1 rounded-full bg-gray-200 opacity-0 transition-opacity delay-300"
+        [ngClass]="{ 'opacity-100 delay-0 duration-75': isScrolling || isHovering }"
+      >
+        <div
+          class="absolute w-full rounded-full bg-gray-500 cursor-pointer"
+          #thumb
+          [style.height.%]="thumbHeight"
+          [style.top.%]="thumbTop"
+          (mousedown)="startDragging($event)"
+        ></div>
+      </div>
+    </div>
+  `, styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { viewportRef: [{
+                type: ViewChild,
+                args: ['viewport']
+            }], thumbRef: [{
+                type: ViewChild,
+                args: ['thumb']
+            }] } });
+
+// horizontal-scroll-area.component.ts
+class HorizontalScrollAreaComponent {
+    viewportRef;
+    thumbRef;
+    isScrolling = false;
+    isHovering = false;
+    isDragging = false;
+    scrollTimeout;
+    thumbWidth = 20;
+    thumbLeft = 0;
+    startX = 0;
+    startScrollLeft = 0;
+    canScrollLeft = false;
+    canScrollRight = true;
+    // Sample items for demonstration
+    items = Array(15)
+        .fill(0)
+        .map((_, i) => ({
+        title: `Item ${i + 1}`,
+        description: `This is a description for item ${i + 1}. It contains some sample text to demonstrate the horizontal scrolling functionality.`,
+        category: ['Design', 'Development', 'Marketing', 'Research'][i % 4],
+    }));
+    constructor() {
+        // Add document-level event listeners for drag operations
+        document.addEventListener('mousemove', this.onMouseMove.bind(this));
+        document.addEventListener('mouseup', this.onMouseUp.bind(this));
+    }
+    ngOnDestroy() {
+        // Clean up event listeners
+        document.removeEventListener('mousemove', this.onMouseMove.bind(this));
+        document.removeEventListener('mouseup', this.onMouseUp.bind(this));
+    }
+    ngAfterViewInit() {
+        this.updateThumb();
+        // Initial check for scroll buttons
+        this.updateScrollButtonsState();
+    }
+    onScroll() {
+        this.updateThumb();
+        this.updateScrollButtonsState();
+        this.isScrolling = true;
+        clearTimeout(this.scrollTimeout);
+        this.scrollTimeout = setTimeout(() => {
+            this.isScrolling = false;
+        }, 300);
+    }
+    updateThumb() {
+        const viewport = this.viewportRef.nativeElement;
+        const scrollWidth = viewport.scrollWidth;
+        const clientWidth = viewport.clientWidth;
+        // Calculate thumb width as percentage of visible area
+        this.thumbWidth = (clientWidth / scrollWidth) * 100;
+        // Calculate thumb position
+        this.thumbLeft = (viewport.scrollLeft / (scrollWidth - clientWidth)) * (100 - this.thumbWidth);
+    }
+    updateScrollButtonsState() {
+        const viewport = this.viewportRef.nativeElement;
+        this.canScrollLeft = viewport.scrollLeft > 0;
+        this.canScrollRight = viewport.scrollLeft < viewport.scrollWidth - viewport.clientWidth;
+    }
+    startDragging(event) {
+        this.isDragging = true;
+        this.startX = event.clientX;
+        this.startScrollLeft = this.viewportRef.nativeElement.scrollLeft;
+        event.preventDefault();
+    }
+    onMouseMove(event) {
+        if (!this.isDragging)
+            return;
+        const viewport = this.viewportRef.nativeElement;
+        const deltaX = event.clientX - this.startX;
+        const scrollbarWidth = viewport.clientWidth;
+        const scrollContentWidth = viewport.scrollWidth;
+        // Calculate the scroll ratio
+        const scrollRatio = scrollContentWidth / scrollbarWidth;
+        // Update scroll position
+        viewport.scrollLeft = this.startScrollLeft + deltaX * scrollRatio;
+        event.preventDefault();
+    }
+    onMouseUp() {
+        this.isDragging = false;
+    }
+    scrollLeft() {
+        const viewport = this.viewportRef.nativeElement;
+        viewport.scrollBy({ left: -300, behavior: 'smooth' });
+    }
+    scrollRight() {
+        const viewport = this.viewportRef.nativeElement;
+        viewport.scrollBy({ left: 300, behavior: 'smooth' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HorizontalScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: HorizontalScrollAreaComponent, isStandalone: true, selector: "sc-horizontal-scroll-area", viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true }, { propertyName: "thumbRef", first: true, predicate: ["thumb"], descendants: true }], ngImport: i0, template: `
+    <div class="relative w-full max-w-4xl">
+      <!-- Horizontal scroll container -->
+      <div
+        class="overflow-x-scroll overflow-y-hidden overscroll-contain h-64 rounded-md outline outline-1 -outline-offset-1 outline-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 scrollbar-hide"
+        #viewport
+        (scroll)="onScroll()"
+        (mouseenter)="isHovering = true"
+        (mouseleave)="isHovering = false"
+      >
+        <!-- Content container -->
+        <div class="flex flex-row gap-4 p-4 min-w-max">
+          <!-- Cards -->
+          <div
+            class="bg-white rounded-lg shadow-md w-64 h-52 flex-shrink-0 border border-gray-200 hover:border-blue-500 transition-colors duration-200"
+            *ngFor="let item of items"
+          >
+            <div class="p-4 h-full flex flex-col">
+              <h3 class="text-lg font-medium text-gray-900 mb-2">{{ item.title }}</h3>
+              <p class="text-sm text-gray-600 flex-grow">{{ item.description }}</p>
+              <div class="mt-4 text-xs text-gray-500">{{ item.category }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Custom scroll bar -->
+      <div
+        class="absolute bottom-0 left-0 right-4 h-1 mx-2 rounded-full bg-gray-200 opacity-0 transition-opacity delay-300"
+        [ngClass]="{ 'opacity-100 delay-0 duration-75': isScrolling || isHovering }"
+      >
+        <div
+          class="absolute h-full rounded-full bg-gray-500 cursor-pointer"
+          #thumb
+          [style.width.%]="thumbWidth"
+          [style.left.%]="thumbLeft"
+          (mousedown)="startDragging($event)"
+        ></div>
+      </div>
+
+      <!-- Arrow navigation -->
+      <button
+        class="absolute top-1/2 left-2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full shadow-md p-2 opacity-0 transition-opacity duration-200"
+        [ngClass]="{ 'opacity-100': isHovering && canScrollLeft }"
+        [disabled]="!canScrollLeft"
+        (click)="scrollLeft()"
+        aria-label="Scroll left"
+      >
+        <svg
+          class="h-5 w-5 text-gray-700"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M15 19l-7-7 7-7"
+          />
+        </svg>
+      </button>
+
+      <button
+        class="absolute top-1/2 right-2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full shadow-md p-2 opacity-0 transition-opacity duration-200"
+        [ngClass]="{ 'opacity-100': isHovering && canScrollRight }"
+        [disabled]="!canScrollRight"
+        (click)="scrollRight()"
+        aria-label="Scroll right"
+      >
+        <svg
+          class="h-5 w-5 text-gray-700"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+    </div>
+  `, isInline: true, styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HorizontalScrollAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-horizontal-scroll-area', standalone: true, imports: [CommonModule], template: `
+    <div class="relative w-full max-w-4xl">
+      <!-- Horizontal scroll container -->
+      <div
+        class="overflow-x-scroll overflow-y-hidden overscroll-contain h-64 rounded-md outline outline-1 -outline-offset-1 outline-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 scrollbar-hide"
+        #viewport
+        (scroll)="onScroll()"
+        (mouseenter)="isHovering = true"
+        (mouseleave)="isHovering = false"
+      >
+        <!-- Content container -->
+        <div class="flex flex-row gap-4 p-4 min-w-max">
+          <!-- Cards -->
+          <div
+            class="bg-white rounded-lg shadow-md w-64 h-52 flex-shrink-0 border border-gray-200 hover:border-blue-500 transition-colors duration-200"
+            *ngFor="let item of items"
+          >
+            <div class="p-4 h-full flex flex-col">
+              <h3 class="text-lg font-medium text-gray-900 mb-2">{{ item.title }}</h3>
+              <p class="text-sm text-gray-600 flex-grow">{{ item.description }}</p>
+              <div class="mt-4 text-xs text-gray-500">{{ item.category }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Custom scroll bar -->
+      <div
+        class="absolute bottom-0 left-0 right-4 h-1 mx-2 rounded-full bg-gray-200 opacity-0 transition-opacity delay-300"
+        [ngClass]="{ 'opacity-100 delay-0 duration-75': isScrolling || isHovering }"
+      >
+        <div
+          class="absolute h-full rounded-full bg-gray-500 cursor-pointer"
+          #thumb
+          [style.width.%]="thumbWidth"
+          [style.left.%]="thumbLeft"
+          (mousedown)="startDragging($event)"
+        ></div>
+      </div>
+
+      <!-- Arrow navigation -->
+      <button
+        class="absolute top-1/2 left-2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full shadow-md p-2 opacity-0 transition-opacity duration-200"
+        [ngClass]="{ 'opacity-100': isHovering && canScrollLeft }"
+        [disabled]="!canScrollLeft"
+        (click)="scrollLeft()"
+        aria-label="Scroll left"
+      >
+        <svg
+          class="h-5 w-5 text-gray-700"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M15 19l-7-7 7-7"
+          />
+        </svg>
+      </button>
+
+      <button
+        class="absolute top-1/2 right-2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full shadow-md p-2 opacity-0 transition-opacity duration-200"
+        [ngClass]="{ 'opacity-100': isHovering && canScrollRight }"
+        [disabled]="!canScrollRight"
+        (click)="scrollRight()"
+        aria-label="Scroll right"
+      >
+        <svg
+          class="h-5 w-5 text-gray-700"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+    </div>
+  `, styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { viewportRef: [{
+                type: ViewChild,
+                args: ['viewport']
+            }], thumbRef: [{
+                type: ViewChild,
+                args: ['thumb']
+            }] } });
+
+// flexible-scroll-area.component.ts
+class FlexibleScrollAreaComponent {
+    orientation = 'vertical';
+    height = '8.5rem';
+    width = '96';
+    showNavButtons = true;
+    viewportRef;
+    isScrolling = false;
+    isHovering = false;
+    isDragging = false;
+    scrollTimeout;
+    thumbSize = 20;
+    thumbPosition = 0;
+    startPoint = 0;
+    startScrollPosition = 0;
+    canScrollStart = false;
+    canScrollEnd = true;
+    constructor() {
+        // Add document-level event listeners for drag operations
+        document.addEventListener('mousemove', this.onMouseMove.bind(this));
+        document.addEventListener('mouseup', this.onMouseUp.bind(this));
+    }
+    ngOnInit() {
+        // Initial check to make sure we have a valid orientation
+        if (this.orientation !== 'vertical' && this.orientation !== 'horizontal') {
+            this.orientation = 'vertical';
+        }
+    }
+    ngOnDestroy() {
+        // Clean up event listeners
+        document.removeEventListener('mousemove', this.onMouseMove.bind(this));
+        document.removeEventListener('mouseup', this.onMouseUp.bind(this));
+    }
+    ngAfterViewInit() {
+        this.updateThumb();
+        this.updateScrollButtonsState();
+    }
+    onScroll() {
+        this.updateThumb();
+        this.updateScrollButtonsState();
+        this.isScrolling = true;
+        clearTimeout(this.scrollTimeout);
+        this.scrollTimeout = setTimeout(() => {
+            this.isScrolling = false;
+        }, 300);
+    }
+    updateThumb() {
+        const viewport = this.viewportRef.nativeElement;
+        if (this.orientation === 'vertical') {
+            const scrollHeight = viewport.scrollHeight;
+            const clientHeight = viewport.clientHeight;
+            // Calculate thumb height as percentage of visible area
+            this.thumbSize = (clientHeight / scrollHeight) * 100;
+            // Calculate thumb position
+            this.thumbPosition =
+                (viewport.scrollTop / (scrollHeight - clientHeight)) * (100 - this.thumbSize);
+        }
+        else {
+            const scrollWidth = viewport.scrollWidth;
+            const clientWidth = viewport.clientWidth;
+            // Calculate thumb width as percentage of visible area
+            this.thumbSize = (clientWidth / scrollWidth) * 100;
+            // Calculate thumb position
+            this.thumbPosition =
+                (viewport.scrollLeft / (scrollWidth - clientWidth)) * (100 - this.thumbSize);
+        }
+    }
+    updateScrollButtonsState() {
+        const viewport = this.viewportRef.nativeElement;
+        if (this.orientation === 'vertical') {
+            this.canScrollStart = viewport.scrollTop > 0;
+            this.canScrollEnd = viewport.scrollTop < viewport.scrollHeight - viewport.clientHeight - 1; // -1 for rounding errors
+        }
+        else {
+            this.canScrollStart = viewport.scrollLeft > 0;
+            this.canScrollEnd = viewport.scrollLeft < viewport.scrollWidth - viewport.clientWidth - 1; // -1 for rounding errors
+        }
+    }
+    startDragging(event) {
+        this.isDragging = true;
+        if (this.orientation === 'vertical') {
+            this.startPoint = event.clientY;
+            this.startScrollPosition = this.viewportRef.nativeElement.scrollTop;
+        }
+        else {
+            this.startPoint = event.clientX;
+            this.startScrollPosition = this.viewportRef.nativeElement.scrollLeft;
+        }
+        event.preventDefault();
+    }
+    onMouseMove(event) {
+        if (!this.isDragging)
+            return;
+        const viewport = this.viewportRef.nativeElement;
+        if (this.orientation === 'vertical') {
+            const deltaY = event.clientY - this.startPoint;
+            const scrollbarHeight = viewport.clientHeight;
+            const scrollContentHeight = viewport.scrollHeight;
+            // Calculate the scroll ratio
+            const scrollRatio = scrollContentHeight / scrollbarHeight;
+            // Update scroll position
+            viewport.scrollTop = this.startScrollPosition + deltaY * scrollRatio;
+        }
+        else {
+            const deltaX = event.clientX - this.startPoint;
+            const scrollbarWidth = viewport.clientWidth;
+            const scrollContentWidth = viewport.scrollWidth;
+            // Calculate the scroll ratio
+            const scrollRatio = scrollContentWidth / scrollbarWidth;
+            // Update scroll position
+            viewport.scrollLeft = this.startScrollPosition + deltaX * scrollRatio;
+        }
+        event.preventDefault();
+    }
+    onMouseUp() {
+        this.isDragging = false;
+    }
+    scrollPrev() {
+        const viewport = this.viewportRef.nativeElement;
+        if (this.orientation === 'vertical') {
+            viewport.scrollBy({ top: -200, behavior: 'smooth' });
+        }
+        else {
+            viewport.scrollBy({ left: -300, behavior: 'smooth' });
+        }
+    }
+    scrollNext() {
+        const viewport = this.viewportRef.nativeElement;
+        if (this.orientation === 'vertical') {
+            viewport.scrollBy({ top: 200, behavior: 'smooth' });
+        }
+        else {
+            viewport.scrollBy({ left: 300, behavior: 'smooth' });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: FlexibleScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: FlexibleScrollAreaComponent, isStandalone: true, selector: "sc-flexible-scroll-area", inputs: { orientation: "orientation", height: "height", width: "width", showNavButtons: "showNavButtons" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true }], ngImport: i0, template: `
+    <div
+      class="relative"
+      [ngClass]="{
+        'w-full max-w-4xl': orientation === 'horizontal',
+        'h-[8.5rem] w-96 max-w-[calc(100vw-8rem)]': orientation === 'vertical',
+      }"
+    >
+      <!-- Main scroll container -->
+      <div
+        class="overscroll-contain rounded-md outline -outline-offset-1 outline-gray-200 focus-visible:outline  focus-visible:outline-blue-800 scrollbar-hide"
+        #viewport
+        [ngClass]="{
+          'overflow-x-scroll overflow-y-hidden h-64': orientation === 'horizontal',
+          'overflow-y-scroll overflow-x-hidden h-full': orientation === 'vertical',
+        }"
+        (scroll)="onScroll()"
+        (mouseenter)="isHovering = true"
+        (mouseleave)="isHovering = false"
+      >
+        <!-- Content container with proper layout based on orientation -->
+        <div
+          [ngClass]="{
+            'flex flex-row gap-4 p-4 min-w-max': orientation === 'horizontal',
+            'flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-900':
+              orientation === 'vertical',
+          }"
+        >
+          <!-- Projected content from parent component -->
+          <ng-content></ng-content>
+        </div>
+      </div>
+
+      <!-- Custom scrollbar for vertical orientation -->
+      <div
+        class="absolute top-0 right-1 w-1 h-[calc(100%-0.5rem)] my-1 rounded-full bg-gray-200 opacity-0 transition-opacity delay-300"
+        *ngIf="orientation === 'vertical'"
+        [ngClass]="{ 'opacity-100 delay-0 duration-75': isScrolling || isHovering }"
+      >
+        <div
+          class="absolute w-full rounded-full bg-gray-500 cursor-pointer"
+          #verticalThumb
+          [style.height.%]="thumbSize"
+          [style.top.%]="thumbPosition"
+          (mousedown)="startDragging($event)"
+        ></div>
+      </div>
+
+      <!-- Custom scrollbar for horizontal orientation -->
+      <div
+        class="absolute bottom-0 left-0 right-4 h-1 mx-2 rounded-full bg-gray-200 opacity-0 transition-opacity delay-300"
+        *ngIf="orientation === 'horizontal'"
+        [ngClass]="{ 'opacity-100 delay-0 duration-75': isScrolling || isHovering }"
+      >
+        <div
+          class="absolute h-full rounded-full bg-gray-500 cursor-pointer"
+          #horizontalThumb
+          [style.width.%]="thumbSize"
+          [style.left.%]="thumbPosition"
+          (mousedown)="startDragging($event)"
+        ></div>
+      </div>
+
+      <!-- Navigation buttons for horizontal scrolling -->
+      <ng-container *ngIf="orientation === 'horizontal' && showNavButtons">
+        <button
+          class="absolute top-1/2 left-2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full shadow-md p-2 opacity-0 transition-opacity duration-200"
+          [ngClass]="{ 'opacity-100': isHovering && canScrollStart }"
+          [disabled]="!canScrollStart"
+          (click)="scrollPrev()"
+          aria-label="Scroll left"
+        >
+          <svg
+            class="h-5 w-5 text-gray-700"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+        </button>
+
+        <button
+          class="absolute top-1/2 right-2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full shadow-md p-2 opacity-0 transition-opacity duration-200"
+          [ngClass]="{ 'opacity-100': isHovering && canScrollEnd }"
+          [disabled]="!canScrollEnd"
+          (click)="scrollNext()"
+          aria-label="Scroll right"
+        >
+          <svg
+            class="h-5 w-5 text-gray-700"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 5l7 7-7 7"
+            />
+          </svg>
+        </button>
+      </ng-container>
+
+      <!-- Navigation buttons for vertical scrolling -->
+      <ng-container *ngIf="orientation === 'vertical' && showNavButtons">
+        <button
+          class="absolute top-2 left-1/2 -translate-x-1/2 bg-white/80 hover:bg-white rounded-full shadow-md p-2 opacity-0 transition-opacity duration-200"
+          [ngClass]="{ 'opacity-100': isHovering && canScrollStart }"
+          [disabled]="!canScrollStart"
+          (click)="scrollPrev()"
+          aria-label="Scroll up"
+        >
+          <svg
+            class="h-5 w-5 text-gray-700"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M5 15l7-7 7 7"
+            />
+          </svg>
+        </button>
+
+        <button
+          class="absolute bottom-2 left-1/2 -translate-x-1/2 bg-white/80 hover:bg-white rounded-full shadow-md p-2 opacity-0 transition-opacity duration-200"
+          [ngClass]="{ 'opacity-100': isHovering && canScrollEnd }"
+          [disabled]="!canScrollEnd"
+          (click)="scrollNext()"
+          aria-label="Scroll down"
+        >
+          <svg
+            class="h-5 w-5 text-gray-700"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </button>
+      </ng-container>
+    </div>
+  `, isInline: true, styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: FlexibleScrollAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-flexible-scroll-area', standalone: true, imports: [CommonModule], template: `
+    <div
+      class="relative"
+      [ngClass]="{
+        'w-full max-w-4xl': orientation === 'horizontal',
+        'h-[8.5rem] w-96 max-w-[calc(100vw-8rem)]': orientation === 'vertical',
+      }"
+    >
+      <!-- Main scroll container -->
+      <div
+        class="overscroll-contain rounded-md outline -outline-offset-1 outline-gray-200 focus-visible:outline  focus-visible:outline-blue-800 scrollbar-hide"
+        #viewport
+        [ngClass]="{
+          'overflow-x-scroll overflow-y-hidden h-64': orientation === 'horizontal',
+          'overflow-y-scroll overflow-x-hidden h-full': orientation === 'vertical',
+        }"
+        (scroll)="onScroll()"
+        (mouseenter)="isHovering = true"
+        (mouseleave)="isHovering = false"
+      >
+        <!-- Content container with proper layout based on orientation -->
+        <div
+          [ngClass]="{
+            'flex flex-row gap-4 p-4 min-w-max': orientation === 'horizontal',
+            'flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-900':
+              orientation === 'vertical',
+          }"
+        >
+          <!-- Projected content from parent component -->
+          <ng-content></ng-content>
+        </div>
+      </div>
+
+      <!-- Custom scrollbar for vertical orientation -->
+      <div
+        class="absolute top-0 right-1 w-1 h-[calc(100%-0.5rem)] my-1 rounded-full bg-gray-200 opacity-0 transition-opacity delay-300"
+        *ngIf="orientation === 'vertical'"
+        [ngClass]="{ 'opacity-100 delay-0 duration-75': isScrolling || isHovering }"
+      >
+        <div
+          class="absolute w-full rounded-full bg-gray-500 cursor-pointer"
+          #verticalThumb
+          [style.height.%]="thumbSize"
+          [style.top.%]="thumbPosition"
+          (mousedown)="startDragging($event)"
+        ></div>
+      </div>
+
+      <!-- Custom scrollbar for horizontal orientation -->
+      <div
+        class="absolute bottom-0 left-0 right-4 h-1 mx-2 rounded-full bg-gray-200 opacity-0 transition-opacity delay-300"
+        *ngIf="orientation === 'horizontal'"
+        [ngClass]="{ 'opacity-100 delay-0 duration-75': isScrolling || isHovering }"
+      >
+        <div
+          class="absolute h-full rounded-full bg-gray-500 cursor-pointer"
+          #horizontalThumb
+          [style.width.%]="thumbSize"
+          [style.left.%]="thumbPosition"
+          (mousedown)="startDragging($event)"
+        ></div>
+      </div>
+
+      <!-- Navigation buttons for horizontal scrolling -->
+      <ng-container *ngIf="orientation === 'horizontal' && showNavButtons">
+        <button
+          class="absolute top-1/2 left-2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full shadow-md p-2 opacity-0 transition-opacity duration-200"
+          [ngClass]="{ 'opacity-100': isHovering && canScrollStart }"
+          [disabled]="!canScrollStart"
+          (click)="scrollPrev()"
+          aria-label="Scroll left"
+        >
+          <svg
+            class="h-5 w-5 text-gray-700"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+        </button>
+
+        <button
+          class="absolute top-1/2 right-2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full shadow-md p-2 opacity-0 transition-opacity duration-200"
+          [ngClass]="{ 'opacity-100': isHovering && canScrollEnd }"
+          [disabled]="!canScrollEnd"
+          (click)="scrollNext()"
+          aria-label="Scroll right"
+        >
+          <svg
+            class="h-5 w-5 text-gray-700"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 5l7 7-7 7"
+            />
+          </svg>
+        </button>
+      </ng-container>
+
+      <!-- Navigation buttons for vertical scrolling -->
+      <ng-container *ngIf="orientation === 'vertical' && showNavButtons">
+        <button
+          class="absolute top-2 left-1/2 -translate-x-1/2 bg-white/80 hover:bg-white rounded-full shadow-md p-2 opacity-0 transition-opacity duration-200"
+          [ngClass]="{ 'opacity-100': isHovering && canScrollStart }"
+          [disabled]="!canScrollStart"
+          (click)="scrollPrev()"
+          aria-label="Scroll up"
+        >
+          <svg
+            class="h-5 w-5 text-gray-700"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M5 15l7-7 7 7"
+            />
+          </svg>
+        </button>
+
+        <button
+          class="absolute bottom-2 left-1/2 -translate-x-1/2 bg-white/80 hover:bg-white rounded-full shadow-md p-2 opacity-0 transition-opacity duration-200"
+          [ngClass]="{ 'opacity-100': isHovering && canScrollEnd }"
+          [disabled]="!canScrollEnd"
+          (click)="scrollNext()"
+          aria-label="Scroll down"
+        >
+          <svg
+            class="h-5 w-5 text-gray-700"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </button>
+      </ng-container>
+    </div>
+  `, styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], showNavButtons: [{
+                type: Input
+            }], viewportRef: [{
+                type: ViewChild,
+                args: ['viewport']
+            }] } });
+
+class ScTab {
+    class = input('');
+    classes = computed(() => cn('', this.class()));
+    active = signal(false);
+    label = viewChild.required('label');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ScTab, isStandalone: true, selector: "sc-tab", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #label>
+      <ng-content select="sc-tab-label" />
+    </ng-template>
+
+    @if (active()) {
+      <ng-content select="sc-tab-content" />
+    }
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScTab, decorators: [{
+            type: Component,
             args: [{ selector: 'sc-tab', imports: [], template: `
     <ng-template #label>
       <ng-content select="sc-tab-label" />
@@ -11990,163 +13015,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-class ScTabContent2 {
-    template = viewChild.required('template');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScTabContent2, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.2", type: ScTabContent2, isStandalone: true, selector: "sc-tab-content2", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <ng-template #template>
-      <ng-content />
-    </ng-template>
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScTabContent2, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-tab-content2', imports: [], template: `
-    <ng-template #template>
-      <ng-content />
-    </ng-template>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScTabLabel2 {
-    template = viewChild.required('template');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScTabLabel2, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.2", type: ScTabLabel2, isStandalone: true, selector: "sc-tab-label2", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <ng-template #template>
-      <ng-content />
-    </ng-template>
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScTabLabel2, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-tab-label2', imports: [], template: `
-    <ng-template #template>
-      <ng-content />
-    </ng-template>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [] }]
-        }] });
-
-class ScTabGroup {
-    tabLabels = contentChildren(ScTabLabel2, { descendants: true });
-    tabContents = contentChildren(ScTabContent2, { descendants: true });
-    ngAfterViewInit() {
-        console.log(this.tabLabels());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ScTabGroup, isStandalone: true, selector: "sc-tab-group", queries: [{ propertyName: "tabLabels", predicate: ScTabLabel2, descendants: true, isSignal: true }, { propertyName: "tabContents", predicate: ScTabContent2, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="group relative my-4 flex flex-col space-y-2">
-      <div class="relative mr-auto w-full" dir="ltr" data-orientation="horizontal">
-        <div class="flex items-center justify-between pb-3">
-          <div
-            class="inline-flex h-9 w-full items-center justify-start rounded-none border-b bg-transparent p-0 text-muted-foreground"
-            style="outline: none;"
-            tabindex="0"
-            data-orientation="horizontal"
-          >
-            @for (tab of tabLabels(); track tab) {
-              <ng-container [ngTemplateOutlet]="tab.template()"></ng-container>
-            }
-          </div>
-        </div>
-        <div
-          class="relative mt-2 rounded-md border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-          id="radix-:r17g:-content-preview"
-          style="animation-duration: 0s;"
-          tabindex="0"
-          data-state="active"
-          data-orientation="horizontal"
-        >
-          <div class="theme-zinc w-full" style="--radius: 0.5rem;">
-            <div class="preview flex min-h-[350px] w-full items-center justify-center p-10">
-              <div
-                class="relative h-72 w-48 overflow-hidden rounded-md border"
-                dir="ltr"
-                style="position: relative; --radix-scroll-area-corner-width: 0px; --radix-scroll-area-corner-height: 0px;"
-              >
-                <div
-                  class="size-full rounded-[inherit]"
-                  style="overflow: hidden scroll;"
-                  data-radix-scroll-area-viewport=""
-                >
-                  @for (content of tabContents(); track content) {
-                    <ng-container [ngTemplateOutlet]="content.template()"></ng-container>
-                  }
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <ng-content />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScTabGroup, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-tab-group', imports: [NgTemplateOutlet], template: `
-    <div class="group relative my-4 flex flex-col space-y-2">
-      <div class="relative mr-auto w-full" dir="ltr" data-orientation="horizontal">
-        <div class="flex items-center justify-between pb-3">
-          <div
-            class="inline-flex h-9 w-full items-center justify-start rounded-none border-b bg-transparent p-0 text-muted-foreground"
-            style="outline: none;"
-            tabindex="0"
-            data-orientation="horizontal"
-          >
-            @for (tab of tabLabels(); track tab) {
-              <ng-container [ngTemplateOutlet]="tab.template()"></ng-container>
-            }
-          </div>
-        </div>
-        <div
-          class="relative mt-2 rounded-md border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-          id="radix-:r17g:-content-preview"
-          style="animation-duration: 0s;"
-          tabindex="0"
-          data-state="active"
-          data-orientation="horizontal"
-        >
-          <div class="theme-zinc w-full" style="--radius: 0.5rem;">
-            <div class="preview flex min-h-[350px] w-full items-center justify-center p-10">
-              <div
-                class="relative h-72 w-48 overflow-hidden rounded-md border"
-                dir="ltr"
-                style="position: relative; --radix-scroll-area-corner-width: 0px; --radix-scroll-area-corner-height: 0px;"
-              >
-                <div
-                  class="size-full rounded-[inherit]"
-                  style="overflow: hidden scroll;"
-                  data-radix-scroll-area-viewport=""
-                >
-                  @for (content of tabContents(); track content) {
-                    <ng-container [ngTemplateOutlet]="content.template()"></ng-container>
-                  }
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <ng-content />
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScTabItem {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScTabItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: ScTabItem, isStandalone: true, selector: "sc-tab-item", ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ScTabItem, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-tab-item', imports: [], template: `
-    <ng-content />
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
 const SC_TOAST_ID = new InjectionToken('SC_TOAST_ID');
 
 class ToastService {
@@ -18802,5 +19670,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { HoverScrollbarComponent, ScAccordion, ScAccordionContent, ScAccordionHeader, ScAccordionItem, ScAccordionItemDescription, ScAccordionTrigger, ScAlert, ScAlertDescription, ScAlertDialogTrigger, ScAlertTitle, ScArticle, ScAspectRatio, ScAutoResizeInput, ScAutocomplete, ScAvatar, ScBadge, ScBlockquote, ScBreadcrumb, ScBreadcrumbEllipsis, ScBreadcrumbItem, ScBreadcrumbLink, ScBreadcrumbList, ScBreadcrumbPage, ScBreadcrumbSeparator, ScButton, ScButtonBase, ScCalendar, ScCard, ScCardContent, ScCardDescription, ScCardFooter, ScCardHeader, ScCardTitle, ScCarousel, ScCarouselContainer, ScCarouselItem, ScCarouselItems, ScCarouselNext, ScCarouselPrevious, ScCheckbox, ScCheckbox2, ScCheckboxContainer, ScCheckboxField, ScCheckboxGroup, ScCheckboxItem, ScCircularProgress, ScClockPicker, ScClockPicker2, ScCodeHighlighter, ScCollapsible, ScCollapsibleContent, ScCollapsibleTrigger, ScColorPicker, ScCombobox, ScCommand, ScCommandDialog, ScCommandEmpty, ScCommandError, ScCommandGroup, ScCommandInput, ScCommandItem, ScCommandList, ScCommandLoading, ScCommandSeparator, ScCommandShortcut, ScComments, ScConfirmationDialog, ScContextMenuTriggerFor, ScCookieConsent, ScDataTable, ScDatePicker, ScDatePickerToggle, ScDateRangePicker, ScDescription, ScDialog, ScDialogClose, ScDialogContent, ScDialogDescription, ScDialogFooter, ScDialogHeader, ScDialogTitle, ScDualRangeSlider, ScEditor, ScEditorBlockquote, ScEditorBold, ScEditorBulletList, ScEditorCode, ScEditorGroup, ScEditorHighlight, ScEditorHorizontalRule, ScEditorItalic, ScEditorOrderedList, ScEditorParagraph, ScEditorRedo, ScEditorStrike, ScEditorTextAlignCenter, ScEditorTextAlignLeft, ScEditorTextAlignRight, ScEditorToolbar, ScEditorUnderline, ScEditorUndo, ScEditorUnsetLink, ScErrorMessage, ScExtensionColor, ScExtensionFontFamily, ScExtensionHeading, ScExtensionImage, ScExtensionLink, ScExtensionTable, ScExtensionTextStyle, ScExtensionYoutube, ScField, ScFieldset, ScFileUpload, ScFullCalendar, ScHeading, ScHoverCard, ScHoverCardTriggerFor, ScImagePlaceholder, ScInput, ScInputGroup, ScInputNumber, ScInputNumberDecrementer, ScInputNumberGroup, ScInputNumberIncrementer, ScInputOTPGroup, ScInputOTPSeparator, ScInputOTPSlot, ScInputOtp, ScInputPassword, ScLabel, ScLegend, ScLink, ScMenu, ScMenuBar, ScMenuBarItem, ScMenuCheckboxGroup, ScMenuCheckboxItem, ScMenuGroup, ScMenuItem, ScMenuLabel, ScMenuRadioGroup, ScMenuRadioItem, ScMenuSeparator, ScMenuShortcut, ScMenuTriggerFor, ScMobileCalendar, ScMultiSelect, ScNav, ScNavItem, ScNavItemDropdown, ScNavLink, ScNavList, ScOnThisPage, ScOption, ScPageDescription, ScPageSizeSelect, ScPageSubtitle, ScPageTitle, ScPagination, ScPaginationEllipsis, ScPaginationFirst, ScPaginationLast, ScPaginationLink, ScPaginationList, ScPaginationNext, ScPaginationPrevious, ScPaginator, ScPaginatorContainer, ScPlainInput, ScPopoverTriggerFor, ScProgress, ScRadioGroup, ScRadioItem, ScRangeCalendar, ScRangeSlider, ScRating, ScScrollArea, ScScrollSpy, ScScrollToTop, ScScrollToTopButton, ScSelect, ScSeparator, ScSettings, ScSheet, ScSheetClose, ScSheetConfig, ScSheetTrigger, ScSidebar, ScSidebarContent, ScSidebarGroup, ScSidebarGroupAction, ScSidebarGroupContent, ScSidebarGroupLabel, ScSidebarMenu, ScSidebarMenuButton, ScSidebarMenuItem, ScSidebarMenuLink, ScSidebarProvider, ScSidebarState, ScSidebarToggler, ScSkeleton, ScSlider, ScStep, ScStepper, ScSwitch, ScTab, ScTabContent, ScTabContent2, ScTabGroup, ScTabItem, ScTabLabel, ScTabLabel2, ScTable, ScTableBody, ScTableCaption, ScTableCell, ScTableContainer, ScTableFooter, ScTableHeader, ScTableHeaderGroup, ScTableOfContents, ScTableRow, ScTabs, ScTags, ScTextarea, ScThemeToggler, ScTimePicker, ScTimePicker2, ScToast, ScToastAction, ScToastClose, ScToastContent, ScToastDescription, ScToastTitle, ScToggle, ScToggleGroup, ScToggleGroupItem, ScToggleSwitch, ScTooltip, ScTouchArea, ScWeekView, Section, Toaster, buttonVariants, scArticleClasses, scInputStyles, scThemeProvider };
+export { FlexibleScrollAreaComponent, HorizontalScrollAreaComponent, HoverScrollbarComponent, ScAccordion, ScAccordionContent, ScAccordionHeader, ScAccordionItem, ScAccordionItemDescription, ScAccordionTrigger, ScAlert, ScAlertDescription, ScAlertDialogTrigger, ScAlertTitle, ScArticle, ScAspectRatio, ScAutoResizeInput, ScAutocomplete, ScAvatar, ScBadge, ScBlockquote, ScBreadcrumb, ScBreadcrumbEllipsis, ScBreadcrumbItem, ScBreadcrumbLink, ScBreadcrumbList, ScBreadcrumbPage, ScBreadcrumbSeparator, ScButton, ScButtonBase, ScCalendar, ScCard, ScCardContent, ScCardDescription, ScCardFooter, ScCardHeader, ScCardTitle, ScCarousel, ScCarouselContainer, ScCarouselItem, ScCarouselItems, ScCarouselNext, ScCarouselPrevious, ScCheckbox, ScCheckbox2, ScCheckboxContainer, ScCheckboxField, ScCheckboxGroup, ScCheckboxItem, ScCircularProgress, ScClockPicker, ScClockPicker2, ScCodeHighlighter, ScCollapsible, ScCollapsibleContent, ScCollapsibleTrigger, ScColorPicker, ScCombobox, ScCommand, ScCommandDialog, ScCommandEmpty, ScCommandError, ScCommandGroup, ScCommandInput, ScCommandItem, ScCommandList, ScCommandLoading, ScCommandSeparator, ScCommandShortcut, ScComments, ScConfirmationDialog, ScContextMenuTriggerFor, ScCookieConsent, ScDataTable, ScDatePicker, ScDatePickerToggle, ScDateRangePicker, ScDescription, ScDialog, ScDialogClose, ScDialogContent, ScDialogDescription, ScDialogFooter, ScDialogHeader, ScDialogTitle, ScDualRangeSlider, ScEditor, ScEditorBlockquote, ScEditorBold, ScEditorBulletList, ScEditorCode, ScEditorGroup, ScEditorHighlight, ScEditorHorizontalRule, ScEditorItalic, ScEditorOrderedList, ScEditorParagraph, ScEditorRedo, ScEditorStrike, ScEditorTextAlignCenter, ScEditorTextAlignLeft, ScEditorTextAlignRight, ScEditorToolbar, ScEditorUnderline, ScEditorUndo, ScEditorUnsetLink, ScErrorMessage, ScExtensionColor, ScExtensionFontFamily, ScExtensionHeading, ScExtensionImage, ScExtensionLink, ScExtensionTable, ScExtensionTextStyle, ScExtensionYoutube, ScField, ScFieldset, ScFileUpload, ScFullCalendar, ScHeading, ScHoverCard, ScHoverCardTriggerFor, ScImagePlaceholder, ScInput, ScInputGroup, ScInputNumber, ScInputNumberDecrementer, ScInputNumberGroup, ScInputNumberIncrementer, ScInputOTPGroup, ScInputOTPSeparator, ScInputOTPSlot, ScInputOtp, ScInputPassword, ScLabel, ScLegend, ScLink, ScMenu, ScMenuBar, ScMenuBarItem, ScMenuCheckboxGroup, ScMenuCheckboxItem, ScMenuGroup, ScMenuItem, ScMenuLabel, ScMenuRadioGroup, ScMenuRadioItem, ScMenuSeparator, ScMenuShortcut, ScMenuTriggerFor, ScMobileCalendar, ScMultiSelect, ScNav, ScNavItem, ScNavItemDropdown, ScNavLink, ScNavList, ScOnThisPage, ScOption, ScPageDescription, ScPageSizeSelect, ScPageSubtitle, ScPageTitle, ScPagination, ScPaginationEllipsis, ScPaginationFirst, ScPaginationLast, ScPaginationLink, ScPaginationList, ScPaginationNext, ScPaginationPrevious, ScPaginator, ScPaginatorContainer, ScPlainInput, ScPopoverTriggerFor, ScProgress, ScRadioGroup, ScRadioItem, ScRangeCalendar, ScRangeSlider, ScRating, ScScrollArea, ScScrollSpy, ScScrollToTop, ScScrollToTopButton, ScSelect, ScSeparator, ScSettings, ScSheet, ScSheetClose, ScSheetConfig, ScSheetTrigger, ScSidebar, ScSidebarContent, ScSidebarGroup, ScSidebarGroupAction, ScSidebarGroupContent, ScSidebarGroupLabel, ScSidebarMenu, ScSidebarMenuButton, ScSidebarMenuItem, ScSidebarMenuLink, ScSidebarProvider, ScSidebarState, ScSidebarToggler, ScSkeleton, ScSlider, ScStep, ScStepper, ScSwitch, ScTab, ScTabContent, ScTabLabel, ScTable, ScTableBody, ScTableCaption, ScTableCell, ScTableContainer, ScTableFooter, ScTableHeader, ScTableHeaderGroup, ScTableOfContents, ScTableRow, ScTabs, ScTags, ScTextarea, ScThemeToggler, ScTimePicker, ScTimePicker2, ScToast, ScToastAction, ScToastClose, ScToastContent, ScToastDescription, ScToastTitle, ScToggle, ScToggleGroup, ScToggleGroupItem, ScToggleSwitch, ScTooltip, ScTouchArea, ScWeekView, ScrollAreaComponent, Section, Toaster, buttonVariants, scArticleClasses, scInputStyles, scThemeProvider };
 //# sourceMappingURL=semantic-components-ui.mjs.map