@nanahoshi/mona-ui 0.7.1 → 0.9.0

package/fesm2022/nanahoshi-mona-ui-tabs.mjs

@@ -5,11 +5,11 @@ import { NgTemplateOutlet } from '@angular/common';
 import { firstOrDefault, select } from '@mirei/ts-collections';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
-import { themeRaisedBackdropClasses, themeRaisedSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { LucideChevronLeft, LucideChevronRight, LucideX } from '@lucide/angular';
+import { LucideChevronDown, LucideChevronLeft, LucideChevronRight, LucideChevronUp, LucideX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { Subject, switchMap, EMPTY, timer, interval, tap, asapScheduler } from 'rxjs';
+import { createElementControlId } from '@nanahoshi/mona-ui/internal';
 
 class TabCloseEvent extends PreventableEvent {
     #index;
@@ -63,104 +63,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }] });
 
 const tabListBaseThemeVariants = cva(`
-        flex w-fit max-w-full overflow-hidden
-        text-sm font-medium
-        bg-(--mona-tab-list-background) ${themeRaisedBackdropClasses}
+        flex max-w-full min-w-0 overflow-hidden
     `, {
     variants: {
-        rounded: {
-            small: "rounded-sm",
-            medium: "rounded-md",
-            large: "rounded-lg",
-            full: "rounded-full",
-            none: "rounded-none"
-        },
-        size: {
-            small: "h-8",
-            medium: "h-9",
-            large: "h-10"
+        position: {
+            top: "flex-row border-b border-border",
+            bottom: "flex-row border-t border-border",
+            left: "flex-col max-h-full min-h-0 border-r border-border",
+            right: "flex-col max-h-full min-h-0 border-l border-border"
         }
+    },
+    defaultVariants: {
+        position: "top"
     }
 });
-const tabListListWrapperThemeVariants = cva(`h-full w-full overflow-hidden`);
+const tabListListWrapperThemeVariants = cva(`flex-1 min-w-0 min-h-0 overflow-hidden`);
 const tabListListThemeVariants = cva(`
-        flex h-full w-full list-none overflow-hidden p-[3px]
+        flex list-none overflow-hidden
         cursor-default select-none whitespace-nowrap
         transition-colors duration-(--mona-motion-standard) ease-out
-    `);
+    `, {
+    variants: {
+        position: {
+            top: "flex-row max-w-full min-w-0",
+            bottom: "flex-row max-w-full min-w-0",
+            left: "flex-col max-h-full min-h-0",
+            right: "flex-col max-h-full min-h-0"
+        }
+    },
+    defaultVariants: {
+        position: "top"
+    }
+});
 const tabListListItemThemeVariants = cva(`
-        flex items-center justify-center px-2
-        cursor-pointer outline-none
+        relative flex shrink-0 cursor-pointer outline-none
         focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+        transition-colors duration-(--mona-motion-standard) ease-out
     `, {
     variants: {
         active: {
-            true: `${themeRaisedSurfaceClasses} font-semibold text-foreground shadow-(--shadow-control) inset-ring-1 inset-ring-border-subtle`,
-            false: ""
+            true: `
+                    text-foreground font-semibold
+                    after:absolute after:content-[''] after:bg-primary
+                `,
+            false: "text-muted-foreground hover:bg-hover hover:text-foreground"
         },
         disabled: {
-            true: "pointer-events-none cursor-not-allowed select-none text-disabled-foreground",
+            true: "pointer-events-none cursor-not-allowed select-none text-disabled-foreground after:hidden",
             false: ""
         },
-        rounded: {
-            small: "rounded-sm",
-            medium: "rounded-md",
-            large: "rounded-lg",
-            full: "rounded-full",
-            none: "rounded-none"
+        position: {
+            top: "items-center justify-center whitespace-nowrap after:inset-x-0 after:bottom-0 after:h-[2px]",
+            bottom: "items-center justify-center whitespace-nowrap after:inset-x-0 after:top-0 after:h-[2px]",
+            left: "w-full items-center justify-start text-start after:inset-y-0 after:right-0 after:w-[2px]",
+            right: "w-full items-center justify-start text-start after:inset-y-0 after:left-0 after:w-[2px]"
+        },
+        size: {
+            small: "h-8 px-2 text-xs",
+            medium: "h-9 px-3 text-sm",
+            large: "h-10 px-4 text-sm"
         }
     },
     defaultVariants: {
-        rounded: "medium"
+        position: "top",
+        size: "medium"
     }
 });
 const tabListScrollButtonThemeVariants = cva(`
-        flex h-full items-center justify-center px-2
+        flex self-stretch items-center justify-center px-2
         text-muted-foreground
         hover:bg-hover hover:text-foreground
         active:bg-active
     `);
 const tabContentThemeVariants = cva(`
-        flex-1 w-full overflow-auto
+        flex-1 min-w-0 min-h-0 overflow-auto
         [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
-        bg-(--mona-tab-content-background) ${themeRaisedBackdropClasses} text-foreground
-        border border-border shadow-(--shadow-raised)
+        text-foreground
+    `);
+const tabsBaseThemeVariants = cva(`
+        flex max-w-full min-w-0 min-h-0
     `, {
     variants: {
-        rounded: {
-            small: "rounded-sm",
-            medium: "rounded-md",
-            large: "rounded-lg",
-            full: "rounded-full",
-            none: "rounded-none"
+        position: {
+            top: "flex-col",
+            bottom: "flex-col-reverse",
+            left: "flex-row",
+            right: "flex-row-reverse"
         }
     },
     defaultVariants: {
-        rounded: "medium"
+        position: "top"
     }
 });
-const tabsBaseThemeVariants = cva(`
-        flex max-w-full flex-col gap-2
-    `);
 
 class TabListItemDirective {
     constructor() {
         this.listItemClass = computed(() => {
             const active = this.active();
             const disabled = this.disabled();
-            const rounded = this.rounded();
-            return tabListListItemThemeVariants({ active, disabled, rounded });
+            const position = this.position();
+            const size = this.size();
+            return tabListListItemThemeVariants({ active, disabled, position, size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listItemClass" }] : /* istanbul ignore next */ []));
         this.active = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
         this.disabled = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.rounded = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        this.position = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        this.size = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TabListItemDirective, isStandalone: true, selector: "li[monaTabListItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "listItemClass()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TabListItemDirective, isStandalone: true, selector: "li[monaTabListItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "listItemClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListItemDirective, decorators: [{
             type: Directive,
@@ -170,34 +186,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[class]": "listItemClass()"
                     }
                 }]
-        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }] } });
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
+
+function getTabOrientation(position) {
+    return position === "left" || position === "right"
+        ? "vertical"
+        : "horizontal";
+}
 
 class TabListComponent {
     #destroyRef;
     #keydown$;
-    #resizeObserver;
     #scrollIntent$;
+    #resizeObserver;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#keydown$ = new Subject();
-        this.#resizeObserver = null;
         this.#scrollIntent$ = new Subject();
+        this.#resizeObserver = null;
         this.baseClass = computed(() => {
-            const rounded = this.rounded();
-            const size = this.size();
-            return tabListBaseThemeVariants({ rounded, size });
+            return tabListBaseThemeVariants({ position: this.position() });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.listClass = computed(() => {
-            return tabListListThemeVariants();
+            return tabListListThemeVariants({ position: this.position() });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+        this.listWrapperClass = computed(() => {
+            return tabListListWrapperThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listWrapperClass" }] : /* istanbul ignore next */ []));
+        this.orientation = computed(() => {
+            return getTabOrientation(this.position() ?? "top");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.overflowControlsVisible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overflowControlsVisible" }] : /* istanbul ignore next */ []));
         this.scrollButtonClass = computed(() => {
             return tabListScrollButtonThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "scrollButtonClass" }] : /* istanbul ignore next */ []));
-        this.scrollsVisible = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "scrollsVisible" }] : /* istanbul ignore next */ []));
         this.tabListElement = viewChild.required("tabListElement", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tabListElement" }] : /* istanbul ignore next */ []));
         this.tabListItems = viewChildren(TabListItemDirective, { ...(ngDevMode ? { debugName: "tabListItems" } : /* istanbul ignore next */ {}), read: ElementRef });
@@ -205,19 +233,28 @@ class TabListComponent {
         ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.rounded = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Placement of the tab list relative to the tab content.
+         * @default "top"
+         */
+        this.position = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
         this.selectedTabId = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedTabId" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the tabs' dimensions.
+         * @default "medium"
+         */
         this.size = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.tabClose = output();
-        this.tabSelect = output();
         this.tabList = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tabList" }] : /* istanbul ignore next */ []));
+        this.tabSelect = output();
         afterRenderEffect({
             read: () => {
                 this.tabList();
+                this.position();
                 untracked(() => {
                     this.updateScrollVisibility();
                 });
@@ -261,7 +298,7 @@ class TabListComponent {
         window.setTimeout(() => {
             const listElement = tabListElement.querySelector("li[data-selected='true']");
             if (listElement) {
-                listElement.scrollIntoView({ behavior: "auto", block: "center" });
+                listElement.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" });
             }
         });
     }
@@ -299,16 +336,18 @@ class TabListComponent {
         }
         const selectedEnabledIndex = enabledTabs.indexOf(selectedTab);
         const selectedIndex = selectedEnabledIndex === -1 ? 0 : selectedEnabledIndex;
-        let nextIndex = selectedIndex;
+        const navigationDirection = this.getNavigationDirection(event);
+        if (navigationDirection === "previous") {
+            event.preventDefault();
+            this.activateTab(enabledTabs[selectedIndex === 0 ? enabledTabs.length - 1 : selectedIndex - 1], event);
+            return;
+        }
+        if (navigationDirection === "next") {
+            event.preventDefault();
+            this.activateTab(enabledTabs[selectedIndex === enabledTabs.length - 1 ? 0 : selectedIndex + 1], event);
+            return;
+        }
         switch (event.key) {
-            case "ArrowLeft":
-                nextIndex = selectedIndex === 0 ? enabledTabs.length - 1 : selectedIndex - 1;
-                this.activateTab(enabledTabs[nextIndex], event);
-                break;
-            case "ArrowRight":
-                nextIndex = selectedIndex === enabledTabs.length - 1 ? 0 : selectedIndex + 1;
-                this.activateTab(enabledTabs[nextIndex], event);
-                break;
             case "Home":
                 this.activateTab(enabledTabs[0], event);
                 break;
@@ -346,6 +385,24 @@ class TabListComponent {
         const tabListItem = tabListItems.find(t => t.nativeElement.getAttribute("data-tab-id") === tab.id);
         tabListItem?.nativeElement.focus();
     }
+    getNavigationDirection(event) {
+        if (this.orientation() === "vertical") {
+            if (event.key === "ArrowUp") {
+                return "previous";
+            }
+            if (event.key === "ArrowDown") {
+                return "next";
+            }
+            return null;
+        }
+        if (event.key === "ArrowLeft") {
+            return "previous";
+        }
+        if (event.key === "ArrowRight") {
+            return "next";
+        }
+        return null;
+    }
     handleTabKey(tab, event) {
         event.preventDefault();
         const panelId = tab.id + "-panel";
@@ -355,17 +412,12 @@ class TabListComponent {
         }
     }
     performScroll(element, direction) {
-        let left = 0;
-        switch (direction) {
-            case "left":
-                left = Math.max(element.scrollLeft - 100, 0);
-                element.scrollTo({ left, behavior: "smooth" });
-                break;
-            case "right":
-                left = Math.min(element.scrollLeft + 100, element.scrollWidth);
-                element.scrollTo({ left, behavior: "smooth" });
-                break;
+        const offset = direction === "previous" ? -100 : 100;
+        if (this.orientation() === "vertical") {
+            element.scrollBy({ top: offset, behavior: "smooth" });
+            return;
         }
+        element.scrollBy({ left: offset, behavior: "smooth" });
     }
     selectTab(tab) {
         this.selectedTabId.set(tab.id);
@@ -398,19 +450,30 @@ class TabListComponent {
     }
     updateScrollVisibility() {
         asapScheduler.schedule(() => {
-            this.scrollsVisible.set(this.tabListElement().nativeElement.scrollWidth > this.tabListElement().nativeElement.clientWidth);
+            const element = this.tabListElement().nativeElement;
+            const isVertical = this.orientation() === "vertical";
+            this.overflowControlsVisible.set(isVertical ? element.scrollHeight > element.clientHeight : element.scrollWidth > element.clientWidth);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabListComponent, isStandalone: true, selector: "mona-tab-list", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, tabList: { classPropertyName: "tabList", publicName: "tabList", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedTabId: "selectedTabIdChange", tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "tabListElement", first: true, predicate: ["tabListElement"], descendants: true, isSignal: true }, { propertyName: "tabListItems", predicate: TabListItemDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (scrollsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'left', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'left')\"\n        (pointerup)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        <svg lucideChevronLeft [size]=\"16\"></svg>\n    </button>\n}\n<div class=\"w-full h-full overflow-hidden\">\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\">\n        @for (tab of tabList(); track tab) {\n            @let selected = tab.id === selectedTabId();\n            @let itemDisabled = tab.disabled || disabled();\n            <li\n                monaTabListItem\n                [id]=\"tab.id + '-tab'\"\n                [active]=\"selected\"\n                [disabled]=\"itemDisabled\"\n                [rounded]=\"rounded()\"\n                role=\"tab\"\n                [tabindex]=\"selected ? 0 : -1\"\n                [attr.aria-selected]=\"selected\"\n                [attr.aria-disabled]=\"itemDisabled\"\n                [attr.aria-controls]=\"tab.id + '-panel'\"\n                [attr.data-selected]=\"selected\"\n                [attr.data-tab-id]=\"tab.id\"\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\n                <div>\n                    @if (tab.titleTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\n                    } @else {\n                        <span>{{ tab.title }}</span>\n                    }\n                </div>\n                @if (tab.closable || closable()) {\n                    <button\n                        monaButton\n                        look=\"link\"\n                        [disabled]=\"itemDisabled\"\n                        (click)=\"onTabClose(tab, $event)\"\n                        class=\"px-0 h-fit ml-1 w-min\"\n                        tabindex=\"-1\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</div>\n@if (scrollsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'right', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'right')\"\n        (pointerup)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        <svg lucideChevronRight [size]=\"16\"></svg>\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TabListItemDirective, selector: "li[monaTabListItem]", inputs: ["active", "disabled", "rounded"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabListComponent, isStandalone: true, selector: "mona-tab-list", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, tabList: { classPropertyName: "tabList", publicName: "tabList", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedTabId: "selectedTabIdChange", tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "tabListElement", first: true, predicate: ["tabListElement"], descendants: true, isSignal: true }, { propertyName: "tabListItems", predicate: TabListItemDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'previous', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'previous')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronUp [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronLeft [size]=\"16\"></svg>\n        }\n    </button>\n}\n<div [class]=\"listWrapperClass()\">\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\n        @for (tab of tabList(); track tab) {\n            @let selected = tab.id === selectedTabId();\n            @let itemDisabled = tab.disabled || disabled();\n            <li\n                monaTabListItem\n                [id]=\"tab.id + '-tab'\"\n                [active]=\"selected\"\n                [disabled]=\"itemDisabled\"\n                [position]=\"position()\"\n                [size]=\"size()\"\n                role=\"tab\"\n                [tabindex]=\"selected ? 0 : -1\"\n                [attr.aria-selected]=\"selected\"\n                [attr.aria-disabled]=\"itemDisabled\"\n                [attr.aria-controls]=\"tab.id + '-panel'\"\n                [attr.data-selected]=\"selected\"\n                [attr.data-tab-id]=\"tab.id\"\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\n                <div>\n                    @if (tab.titleTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\n                    } @else {\n                        <span>{{ tab.title }}</span>\n                    }\n                </div>\n                @if (tab.closable || closable()) {\n                    <button\n                        monaButton\n                        look=\"link\"\n                        [disabled]=\"itemDisabled\"\n                        (click)=\"onTabClose(tab, $event)\"\n                        class=\"px-0 h-fit ml-1 w-min\"\n                        tabindex=\"-1\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</div>\n@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'next', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'next')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronDown [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronRight [size]=\"16\"></svg>\n        }\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TabListItemDirective, selector: "li[monaTabListItem]", inputs: ["active", "disabled", "position", "size"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-tab-list", imports: [ButtonDirective, NgTemplateOutlet, TabListItemDirective, LucideChevronLeft, LucideChevronRight, LucideX], host: {
+            args: [{ selector: "mona-tab-list", imports: [
+                        ButtonDirective,
+                        NgTemplateOutlet,
+                        TabListItemDirective,
+                        LucideChevronDown,
+                        LucideChevronLeft,
+                        LucideChevronRight,
+                        LucideChevronUp,
+                        LucideX
+                    ], host: {
                         "[class]": "baseClass()",
                         "(keydown)": "onKeydown($event)"
-                    }, template: "@if (scrollsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'left', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'left')\"\n        (pointerup)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        <svg lucideChevronLeft [size]=\"16\"></svg>\n    </button>\n}\n<div class=\"w-full h-full overflow-hidden\">\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\">\n        @for (tab of tabList(); track tab) {\n            @let selected = tab.id === selectedTabId();\n            @let itemDisabled = tab.disabled || disabled();\n            <li\n                monaTabListItem\n                [id]=\"tab.id + '-tab'\"\n                [active]=\"selected\"\n                [disabled]=\"itemDisabled\"\n                [rounded]=\"rounded()\"\n                role=\"tab\"\n                [tabindex]=\"selected ? 0 : -1\"\n                [attr.aria-selected]=\"selected\"\n                [attr.aria-disabled]=\"itemDisabled\"\n                [attr.aria-controls]=\"tab.id + '-panel'\"\n                [attr.data-selected]=\"selected\"\n                [attr.data-tab-id]=\"tab.id\"\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\n                <div>\n                    @if (tab.titleTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\n                    } @else {\n                        <span>{{ tab.title }}</span>\n                    }\n                </div>\n                @if (tab.closable || closable()) {\n                    <button\n                        monaButton\n                        look=\"link\"\n                        [disabled]=\"itemDisabled\"\n                        (click)=\"onTabClose(tab, $event)\"\n                        class=\"px-0 h-fit ml-1 w-min\"\n                        tabindex=\"-1\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</div>\n@if (scrollsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'right', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'right')\"\n        (pointerup)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        <svg lucideChevronRight [size]=\"16\"></svg>\n    </button>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { tabListElement: [{ type: i0.ViewChild, args: ["tabListElement", { isSignal: true }] }], tabListItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => TabListItemDirective), { ...{ read: ElementRef }, isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], selectedTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTabId", required: false }] }, { type: i0.Output, args: ["selectedTabIdChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], tabList: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabList", required: true }] }] } });
+                    }, template: "@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'previous', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'previous')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronUp [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronLeft [size]=\"16\"></svg>\n        }\n    </button>\n}\n<div [class]=\"listWrapperClass()\">\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\n        @for (tab of tabList(); track tab) {\n            @let selected = tab.id === selectedTabId();\n            @let itemDisabled = tab.disabled || disabled();\n            <li\n                monaTabListItem\n                [id]=\"tab.id + '-tab'\"\n                [active]=\"selected\"\n                [disabled]=\"itemDisabled\"\n                [position]=\"position()\"\n                [size]=\"size()\"\n                role=\"tab\"\n                [tabindex]=\"selected ? 0 : -1\"\n                [attr.aria-selected]=\"selected\"\n                [attr.aria-disabled]=\"itemDisabled\"\n                [attr.aria-controls]=\"tab.id + '-panel'\"\n                [attr.data-selected]=\"selected\"\n                [attr.data-tab-id]=\"tab.id\"\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\n                <div>\n                    @if (tab.titleTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\n                    } @else {\n                        <span>{{ tab.title }}</span>\n                    }\n                </div>\n                @if (tab.closable || closable()) {\n                    <button\n                        monaButton\n                        look=\"link\"\n                        [disabled]=\"itemDisabled\"\n                        (click)=\"onTabClose(tab, $event)\"\n                        class=\"px-0 h-fit ml-1 w-min\"\n                        tabindex=\"-1\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</div>\n@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'next', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'next')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronDown [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronRight [size]=\"16\"></svg>\n        }\n    </button>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { tabListElement: [{ type: i0.ViewChild, args: ["tabListElement", { isSignal: true }] }], tabListItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => TabListItemDirective), { ...{ read: ElementRef }, isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], selectedTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTabId", required: false }] }, { type: i0.Output, args: ["selectedTabIdChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], tabList: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabList", required: true }] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }] } });
 
 class TabComponent {
     constructor() {
@@ -488,14 +551,13 @@ class TabsComponent {
         this.tabs = contentChildren(TabComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const variantClass = tabsBaseThemeVariants();
+            const variantClass = tabsBaseThemeVariants({ position: this.position() });
             const userClass = this.userClass();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.contentClass = computed(() => {
-            const rounded = this.rounded() === "full" ? "large" : this.rounded();
-            return tabContentThemeVariants({ rounded });
+            return tabContentThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
         this.selectedTabId = linkedSignal({ ...(ngDevMode ? { debugName: "selectedTabId" } : /* istanbul ignore next */ {}), source: () => this.tabList(),
@@ -532,11 +594,11 @@ class TabsComponent {
         this.keepTabContent = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "keepTabContent" }] : /* istanbul ignore next */ []));
         /**
-         * @description Border-radius preset applied to the tabs and the tab content area.
-         * @default "medium"
+         * @description Placement of the tab list relative to the tab content.
+         * @default "top"
          */
-        this.rounded = input("medium", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        this.position = input("top", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
         /**
          * @description Size preset controlling the tabs' dimensions.
          * @default "medium"
@@ -567,14 +629,14 @@ class TabsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabsComponent, isStandalone: true, selector: "mona-tabs", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keepTabContent: { classPropertyName: "keepTabContent", publicName: "keepTabContent", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: TabListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<mona-tab-list\n    [closable]=\"closable()\"\n    [disabled]=\"disabled()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [tabList]=\"tabList()\"\n    [selectedTabId]=\"selectedTabId()\"\n    (selectedTabIdChange)=\"selectedTabId.set($event)\"\n    (tabClose)=\"tabClose.emit($event)\"\n    (tabSelect)=\"tabSelect.emit($event)\"></mona-tab-list>\n<div [class]=\"contentClass()\">\n    @for (tab of tabList(); track tab) {\n        @let selected = tab.id === selectedTabId();\n        @let tabLoaded = keepTabContent() || selected;\n        @let tabHidden = keepTabContent() && !selected;\n        @if (tabLoaded) {\n            <div\n                class=\"w-full h-full outline-none\"\n                [class.hidden]=\"tabHidden\"\n                role=\"tabpanel\"\n                [id]=\"tab.id + '-panel'\"\n                tabindex=\"0\"\n                (keydown)=\"handlePanelKeyDown($event)\"\n                [attr.aria-hidden]=\"tabHidden\"\n                [attr.aria-labelledby]=\"tab.id + '-tab'\">\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n            </div>\n        }\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TabListComponent, selector: "mona-tab-list", inputs: ["closable", "disabled", "rounded", "selectedTabId", "size", "tabList"], outputs: ["selectedTabIdChange", "tabClose", "tabSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabsComponent, isStandalone: true, selector: "mona-tabs", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keepTabContent: { classPropertyName: "keepTabContent", publicName: "keepTabContent", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: TabListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<mona-tab-list\n    [closable]=\"closable()\"\n    [disabled]=\"disabled()\"\n    [position]=\"position()\"\n    [size]=\"size()\"\n    [tabList]=\"tabList()\"\n    [selectedTabId]=\"selectedTabId()\"\n    (selectedTabIdChange)=\"selectedTabId.set($event)\"\n    (tabClose)=\"tabClose.emit($event)\"\n    (tabSelect)=\"tabSelect.emit($event)\"></mona-tab-list>\n<div [class]=\"contentClass()\">\n    @for (tab of tabList(); track tab) {\n        @let selected = tab.id === selectedTabId();\n        @let tabLoaded = keepTabContent() || selected;\n        @let tabHidden = keepTabContent() && !selected;\n        @if (tabLoaded) {\n            <div\n                class=\"w-full h-full outline-none rounded-sm focus-visible:outline-2 focus-visible:outline-focus-indicator focus-visible:outline-offset-2\"\n                [class.hidden]=\"tabHidden\"\n                role=\"tabpanel\"\n                [id]=\"tab.id + '-panel'\"\n                tabindex=\"0\"\n                (keydown)=\"handlePanelKeyDown($event)\"\n                [attr.aria-hidden]=\"tabHidden\"\n                [attr.aria-labelledby]=\"tab.id + '-tab'\">\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n            </div>\n        }\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TabListComponent, selector: "mona-tab-list", inputs: ["closable", "disabled", "position", "selectedTabId", "size", "tabList"], outputs: ["selectedTabIdChange", "tabClose", "tabSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-tabs", changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TabListComponent], host: {
                         "[class]": "baseClass()"
-                    }, template: "<mona-tab-list\n    [closable]=\"closable()\"\n    [disabled]=\"disabled()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [tabList]=\"tabList()\"\n    [selectedTabId]=\"selectedTabId()\"\n    (selectedTabIdChange)=\"selectedTabId.set($event)\"\n    (tabClose)=\"tabClose.emit($event)\"\n    (tabSelect)=\"tabSelect.emit($event)\"></mona-tab-list>\n<div [class]=\"contentClass()\">\n    @for (tab of tabList(); track tab) {\n        @let selected = tab.id === selectedTabId();\n        @let tabLoaded = keepTabContent() || selected;\n        @let tabHidden = keepTabContent() && !selected;\n        @if (tabLoaded) {\n            <div\n                class=\"w-full h-full outline-none\"\n                [class.hidden]=\"tabHidden\"\n                role=\"tabpanel\"\n                [id]=\"tab.id + '-panel'\"\n                tabindex=\"0\"\n                (keydown)=\"handlePanelKeyDown($event)\"\n                [attr.aria-hidden]=\"tabHidden\"\n                [attr.aria-labelledby]=\"tab.id + '-tab'\">\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n            </div>\n        }\n    }\n</div>\n" }]
-        }], propDecorators: { tabListComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TabListComponent), { isSignal: true }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], keepTabContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepTabContent", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+                    }, template: "<mona-tab-list\n    [closable]=\"closable()\"\n    [disabled]=\"disabled()\"\n    [position]=\"position()\"\n    [size]=\"size()\"\n    [tabList]=\"tabList()\"\n    [selectedTabId]=\"selectedTabId()\"\n    (selectedTabIdChange)=\"selectedTabId.set($event)\"\n    (tabClose)=\"tabClose.emit($event)\"\n    (tabSelect)=\"tabSelect.emit($event)\"></mona-tab-list>\n<div [class]=\"contentClass()\">\n    @for (tab of tabList(); track tab) {\n        @let selected = tab.id === selectedTabId();\n        @let tabLoaded = keepTabContent() || selected;\n        @let tabHidden = keepTabContent() && !selected;\n        @if (tabLoaded) {\n            <div\n                class=\"w-full h-full outline-none rounded-sm focus-visible:outline-2 focus-visible:outline-focus-indicator focus-visible:outline-offset-2\"\n                [class.hidden]=\"tabHidden\"\n                role=\"tabpanel\"\n                [id]=\"tab.id + '-panel'\"\n                tabindex=\"0\"\n                (keydown)=\"handlePanelKeyDown($event)\"\n                [attr.aria-hidden]=\"tabHidden\"\n                [attr.aria-labelledby]=\"tab.id + '-tab'\">\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n            </div>\n        }\n    }\n</div>\n" }]
+        }], propDecorators: { tabListComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TabListComponent), { isSignal: true }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], keepTabContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepTabContent", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/tabs

package/fesm2022/nanahoshi-mona-ui-theme.mjs

@@ -359,9 +359,7 @@ const components = Object.freeze({
     "--mona-menubar-background": "var(--color-surface-muted)",
     "--mona-menubar-shadow": "none",
     "--mona-pager-background": "var(--color-surface-muted)",
-    "--mona-slider-handle-border-color": "var(--color-focus-indicator)",
-    "--mona-tab-list-background": "var(--color-surface-muted)",
-    "--mona-tab-content-background": "transparent"
+    "--mona-slider-handle-border-color": "var(--color-focus-indicator)"
 });
 const annaTheme = Object.freeze({
     name: "anna",
@@ -601,9 +599,7 @@ const lunaTheme = Object.freeze({
                 "--mona-menubar-background": "var(--mona-effect-control-background-color)",
                 "--mona-menubar-shadow": "var(--shadow-control)",
                 "--mona-pager-background": "var(--mona-effect-raised-background-color)",
-                "--mona-slider-handle-border-color": "var(--color-border-control)",
-                "--mona-tab-list-background": "#f5f5f6",
-                "--mona-tab-content-background": "var(--color-surface)"
+                "--mona-slider-handle-border-color": "var(--color-border-control)"
             })
         }),
         dark: Object.freeze({
@@ -648,9 +644,7 @@ const lunaTheme = Object.freeze({
                 "--mona-menubar-background": "var(--mona-effect-control-background-color)",
                 "--mona-menubar-shadow": "var(--shadow-control)",
                 "--mona-pager-background": "var(--mona-effect-raised-background-color)",
-                "--mona-slider-handle-border-color": "var(--color-border-control)",
-                "--mona-tab-list-background": "var(--mona-effect-raised-background-color)",
-                "--mona-tab-content-background": "var(--color-surface)"
+                "--mona-slider-handle-border-color": "var(--color-border-control)"
             })
         })
     }
@@ -876,9 +870,7 @@ function createComponents() {
         "--mona-menubar-background": "var(--color-surface-muted)",
         "--mona-menubar-shadow": "var(--shadow-raised)",
         "--mona-pager-background": "var(--color-surface-muted)",
-        "--mona-slider-handle-border-color": "color-mix(in srgb, var(--color-focus-indicator) 50%, transparent)",
-        "--mona-tab-list-background": "var(--color-surface-muted)",
-        "--mona-tab-content-background": "var(--color-surface)"
+        "--mona-slider-handle-border-color": "color-mix(in srgb, var(--color-focus-indicator) 50%, transparent)"
     });
 }
 const monaTheme = Object.freeze({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -265,6 +265,10 @@
       "types": "./types/nanahoshi-mona-ui-scroll-view.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-scroll-view.mjs"
     },
+    "./segmented": {
+      "types": "./types/nanahoshi-mona-ui-segmented.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-segmented.mjs"
+    },
     "./sheet": {
       "types": "./types/nanahoshi-mona-ui-sheet.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-sheet.mjs"

package/segmented/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/nanahoshi-mona-ui-segmented.mjs",
+  "typings": "../types/nanahoshi-mona-ui-segmented.d.ts"
+}

package/types/nanahoshi-mona-ui-check-box.d.ts

@@ -103,9 +103,8 @@ declare class CheckBoxComponent implements CheckboxVariantInput, CheckmarkVarian
      * @default ""
      */
     readonly userClass: _angular_core.InputSignal<string>;
-    protected onCheckedChange(checked: boolean): void;
-    protected onInputChange(event: Event): void;
     protected onInputBlur(event: FocusEvent): void;
+    protected onInputChange(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckBoxComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckBoxComponent, "mona-check-box", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labelSize": { "alias": "labelSize"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "inputBlur": "inputBlur"; "inputChange": "inputChange"; "inputFocus": "inputFocus"; "touch": "touch"; }, never, ["*"], true, never>;
 }