@nanahoshi/mona-ui 0.7.0 → 0.8.0

package/fesm2022/nanahoshi-mona-ui-time-selector.mjs

@@ -630,7 +630,7 @@ class TimeSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TimeSelectorComponent, isStandalone: true, selector: "mona-time-selector", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, focusOnMount: { classPropertyName: "focusOnMount", publicName: "focusOnMount", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "blur": "onBlur()" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "class": "baseClass()" } }, viewQueries: [{ propertyName: "hourListRef", first: true, predicate: ["hourList"], descendants: true, isSignal: true }, { propertyName: "meridiemListRef", first: true, predicate: ["meridiemList"], descendants: true, isSignal: true }, { propertyName: "minuteListRef", first: true, predicate: ["minuteList"], descendants: true, isSignal: true }, { propertyName: "secondListRef", first: true, predicate: ["secondList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n    <div>Hr</div>\n    <div>Min</div>\n    @if (showSeconds()) {\n        <div>Sec</div>\n    }\n</div>\n\n<div [class]=\"infoContainerClass()\">\n    <span>{{ navigatedDateText() }}</span>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onNowClick($event)\"\n        (keydown.enter)=\"onNowClick($event)\"\n        (keydown.space)=\"onNowClick($event)\">\n        Now\n    </button>\n</div>\n\n<div [class]=\"listContainerClass()\">\n    <ol\n        #hourList\n        monaTimeSelectorList\n        aria-label=\"Hours\"\n        [attr.aria-activedescendant]=\"`${hourListId}${navigatedDate().hour}`\"\n        [active]=\"focusedList() === 'hours'\"\n        [id]=\"hourListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (h of viewHours() | timeLimiter: \"h\" : navigatedDate() : minDate() : maxDate(); track h) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"h.viewValue === hour()\"\n                [value]=\"h.value\"\n                [id]=\"`${hourListId}${h.value}`\"\n                (click)=\"onHourChange(h.value)\">\n                {{ h.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    <ol\n        #minuteList\n        monaTimeSelectorList\n        aria-label=\"Minutes\"\n        [attr.aria-activedescendant]=\"`${minuteListId}${navigatedDate().minute}`\"\n        [active]=\"focusedList() === 'minutes'\"\n        [id]=\"minuteListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (m of minutes() | timeLimiter: \"m\" : navigatedDate() : minDate() : maxDate(); track m) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"m.value === minute()\"\n                [value]=\"m.value\"\n                [id]=\"`${minuteListId}${m.value}`\"\n                (click)=\"onMinuteChange(m.value)\">\n                {{ m.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    @if (showSeconds()) {\n        <ol\n            #secondList\n            monaTimeSelectorList\n            aria-label=\"Seconds\"\n            [attr.aria-activedescendant]=\"`${secondListId}${navigatedDate().second}`\"\n            [active]=\"focusedList() === 'seconds'\"\n            [id]=\"secondListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @for (s of seconds() | timeLimiter: \"s\" : navigatedDate() : minDate() : maxDate(); track s) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"s.value === second()\"\n                    [value]=\"s.value\"\n                    [id]=\"`${secondListId}${s.value}`\"\n                    (click)=\"onSecondChange(s.value)\">\n                    {{ s.value | number: \"2.0\" }}\n                </li>\n            }\n        </ol>\n    }\n    @if (hourFormat() === \"12\") {\n        <ol\n            #meridiemList\n            monaTimeSelectorList\n            aria-label=\"AM/PM\"\n            [attr.aria-activedescendant]=\"`${meridiemListId}${meridiem()}`\"\n            [active]=\"focusedList() === 'meridiem'\"\n            [id]=\"meridiemListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @if (amMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'AM'\"\n                    [value]=\"'AM'\"\n                    (click)=\"onMeridiemClick('AM')\"\n                    [id]=\"`${meridiemListId}AM`\">\n                    AM\n                </li>\n            }\n            @if (pmMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'PM'\"\n                    [value]=\"'PM'\"\n                    (click)=\"onMeridiemClick('PM')\"\n                    [id]=\"`${meridiemListId}PM`\">\n                    PM\n                </li>\n            }\n        </ol>\n    }\n</div>\n\n@if (footer()) {\n    <div [class]=\"footerClass()\">\n        <button monaButton look=\"primary\" [rounded]=\"rounded()\" [size]=\"size()\" (click)=\"onSetTimeClick()\">Set</button>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: TimeSelectorItemDirective, selector: "li[monaTimeSelectorItem]", inputs: ["selected", "size", "value"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: TimeSelectorListDirective, selector: "ol[monaTimeSelectorList]", inputs: ["active", "popupHeight", "size"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: TimeLimiterPipe, name: "timeLimiter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TimeSelectorComponent, isStandalone: true, selector: "mona-time-selector", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, focusOnMount: { classPropertyName: "focusOnMount", publicName: "focusOnMount", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "blur": "onBlur()" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "class": "baseClass()" } }, viewQueries: [{ propertyName: "hourListRef", first: true, predicate: ["hourList"], descendants: true, isSignal: true }, { propertyName: "meridiemListRef", first: true, predicate: ["meridiemList"], descendants: true, isSignal: true }, { propertyName: "minuteListRef", first: true, predicate: ["minuteList"], descendants: true, isSignal: true }, { propertyName: "secondListRef", first: true, predicate: ["secondList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n    <div>Hr</div>\n    <div>Min</div>\n    @if (showSeconds()) {\n        <div>Sec</div>\n    }\n</div>\n\n<div [class]=\"infoContainerClass()\">\n    <span>{{ navigatedDateText() }}</span>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onNowClick($event)\"\n        (keydown.enter)=\"onNowClick($event)\"\n        (keydown.space)=\"onNowClick($event)\">\n        Now\n    </button>\n</div>\n\n<div [class]=\"listContainerClass()\">\n    <ol\n        #hourList\n        monaTimeSelectorList\n        aria-label=\"Hours\"\n        [attr.aria-activedescendant]=\"`${hourListId}${navigatedDate().hour}`\"\n        [active]=\"focusedList() === 'hours'\"\n        [id]=\"hourListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (h of viewHours() | timeLimiter: \"h\" : navigatedDate() : minDate() : maxDate(); track h) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"h.viewValue === hour()\"\n                [value]=\"h.value\"\n                [id]=\"`${hourListId}${h.value}`\"\n                (click)=\"onHourChange(h.value)\">\n                {{ h.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    <ol\n        #minuteList\n        monaTimeSelectorList\n        aria-label=\"Minutes\"\n        [attr.aria-activedescendant]=\"`${minuteListId}${navigatedDate().minute}`\"\n        [active]=\"focusedList() === 'minutes'\"\n        [id]=\"minuteListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (m of minutes() | timeLimiter: \"m\" : navigatedDate() : minDate() : maxDate(); track m) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"m.value === minute()\"\n                [value]=\"m.value\"\n                [id]=\"`${minuteListId}${m.value}`\"\n                (click)=\"onMinuteChange(m.value)\">\n                {{ m.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    @if (showSeconds()) {\n        <ol\n            #secondList\n            monaTimeSelectorList\n            aria-label=\"Seconds\"\n            [attr.aria-activedescendant]=\"`${secondListId}${navigatedDate().second}`\"\n            [active]=\"focusedList() === 'seconds'\"\n            [id]=\"secondListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @for (s of seconds() | timeLimiter: \"s\" : navigatedDate() : minDate() : maxDate(); track s) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"s.value === second()\"\n                    [value]=\"s.value\"\n                    [id]=\"`${secondListId}${s.value}`\"\n                    (click)=\"onSecondChange(s.value)\">\n                    {{ s.value | number: \"2.0\" }}\n                </li>\n            }\n        </ol>\n    }\n    @if (hourFormat() === \"12\") {\n        <ol\n            #meridiemList\n            monaTimeSelectorList\n            aria-label=\"AM/PM\"\n            [attr.aria-activedescendant]=\"`${meridiemListId}${meridiem()}`\"\n            [active]=\"focusedList() === 'meridiem'\"\n            [id]=\"meridiemListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @if (amMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'AM'\"\n                    [value]=\"'AM'\"\n                    (click)=\"onMeridiemClick('AM')\"\n                    [id]=\"`${meridiemListId}AM`\">\n                    AM\n                </li>\n            }\n            @if (pmMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'PM'\"\n                    [value]=\"'PM'\"\n                    (click)=\"onMeridiemClick('PM')\"\n                    [id]=\"`${meridiemListId}PM`\">\n                    PM\n                </li>\n            }\n        </ol>\n    }\n</div>\n\n@if (footer()) {\n    <div [class]=\"footerClass()\">\n        <button monaButton look=\"primary\" [rounded]=\"rounded()\" [size]=\"size()\" (click)=\"onSetTimeClick()\">Set</button>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: TimeSelectorItemDirective, selector: "li[monaTimeSelectorItem]", inputs: ["selected", "size", "value"] }, { 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: TimeSelectorListDirective, selector: "ol[monaTimeSelectorList]", inputs: ["active", "popupHeight", "size"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: TimeLimiterPipe, name: "timeLimiter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimeSelectorComponent, decorators: [{
             type: Component,

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

@@ -709,7 +709,7 @@ class WindowContentComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: WindowContentComponent, isStandalone: true, selector: "mona-window-content", host: { attributes: { "role": "dialog" }, properties: { "class": "baseClass()", "attr.aria-labelledby": "headerId", "attr.aria-modal": "windowData.modal ?? false" } }, viewQueries: [{ propertyName: "componentAnchor", first: true, predicate: ["componentAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "<div [class]=\"contentContainerClass()\">\n    <div\n        [class]=\"titleBarClass()\"\n        monaWindowDragHandler\n        (dblclick)=\"onMaximizeClick()\"\n        [draggable]=\"windowData.draggable\"\n        [windowRef]=\"windowData.windowReference\"\n        [attr.tabindex]=\"windowData.draggable ? 0 : null\"\n        [attr.aria-label]=\"windowData.draggable ? 'Move window. Use arrow keys to move.' : null\">\n        <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n            @if (windowData.titleTemplate) {\n                <ng-container [ngTemplateOutlet]=\"windowData.titleTemplate\"></ng-container>\n            } @else {\n                <span [class]=\"titleClass()\">{{ windowData.title ?? \"\" }}</span>\n            }\n        </div>\n        <div [class]=\"titleBarActionClass()\">\n            @if (windowData.actionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"windowData.actionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: windowData.windowReference.windowRef }\">\n                </ng-container>\n            }\n            @let maximizeTitle = maximized() || minimized() ? \"Restore\" : \"Maximize\";\n            @if (windowData.minimizable && !minimized()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"'Minimize'\"\n                    aria-label=\"Minimize\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMinimizeClick()\">\n                    <svg lucideMinus [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.maximizable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"maximizeTitle\"\n                    [attr.aria-label]=\"maximizeTitle\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMaximizeClick()\">\n                    <svg [lucideIcon]=\"maximizeIcon()\" [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.closable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    title=\"Close\"\n                    aria-label=\"Close window\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onCloseClick($event)\">\n                    <svg lucideX [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n        </div>\n    </div>\n    @if (!minimized()) {\n        <div [class]=\"contentClass()\">\n            @switch (contentType()) {\n                @case (\"template\") {\n                    <ng-container [ngTemplateOutlet]=\"contentTemplate()!\"></ng-container>\n                }\n                @case (\"component\") {\n                    <ng-container #componentAnchor></ng-container>\n                }\n            }\n        </div>\n        @if (windowData.footerTemplate) {\n            <div>\n                <ng-container [ngTemplateOutlet]=\"windowData.footerTemplate\"></ng-container>\n            </div>\n        }\n    }\n    @if (windowData.resizable && !maximized()) {\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"north\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top. Use arrow keys to resize.\"\n            [class]=\"'north' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"south\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom. Use arrow keys to resize.\"\n            [class]=\"'south' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"east\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the right. Use arrow keys to resize.\"\n            [class]=\"'east' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"west\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the left. Use arrow keys to resize.\"\n            [class]=\"'west' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northeast\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top-right corner. Use arrow keys to resize.\"\n            [class]=\"'northeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northwest\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top-left corner. Use arrow keys to resize.\"\n            [class]=\"'northwest' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southeast\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom-right corner. Use arrow keys to resize.\"\n            [class]=\"'southeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southwest\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom-left corner. Use arrow keys to resize.\"\n            [class]=\"'southwest' | monaResizePosition\"></div>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: WindowDragHandlerDirective, selector: "div[monaWindowDragHandler]", inputs: ["draggable", "windowRef"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: WindowResizeHandlerDirective, selector: "div[monaWindowResizeHandler]", inputs: ["direction", "maxHeight", "maxWidth", "minHeight", "minWidth", "windowRef"] }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "pipe", type: ResizePositionPipe, name: "monaResizePosition" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: WindowContentComponent, isStandalone: true, selector: "mona-window-content", host: { attributes: { "role": "dialog" }, properties: { "class": "baseClass()", "attr.aria-labelledby": "headerId", "attr.aria-modal": "windowData.modal ?? false" } }, viewQueries: [{ propertyName: "componentAnchor", first: true, predicate: ["componentAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "<div [class]=\"contentContainerClass()\">\n    <div\n        [class]=\"titleBarClass()\"\n        monaWindowDragHandler\n        (dblclick)=\"onMaximizeClick()\"\n        [draggable]=\"windowData.draggable\"\n        [windowRef]=\"windowData.windowReference\"\n        [attr.tabindex]=\"windowData.draggable ? 0 : null\"\n        [attr.aria-label]=\"windowData.draggable ? 'Move window. Use arrow keys to move.' : null\">\n        <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n            @if (windowData.titleTemplate) {\n                <ng-container [ngTemplateOutlet]=\"windowData.titleTemplate\"></ng-container>\n            } @else {\n                <span [class]=\"titleClass()\">{{ windowData.title ?? \"\" }}</span>\n            }\n        </div>\n        <div [class]=\"titleBarActionClass()\">\n            @if (windowData.actionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"windowData.actionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: windowData.windowReference.windowRef }\">\n                </ng-container>\n            }\n            @let maximizeTitle = maximized() || minimized() ? \"Restore\" : \"Maximize\";\n            @if (windowData.minimizable && !minimized()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"'Minimize'\"\n                    aria-label=\"Minimize\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMinimizeClick()\">\n                    <svg lucideMinus [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.maximizable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"maximizeTitle\"\n                    [attr.aria-label]=\"maximizeTitle\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMaximizeClick()\">\n                    <svg [lucideIcon]=\"maximizeIcon()\" [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.closable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    title=\"Close\"\n                    aria-label=\"Close window\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onCloseClick($event)\">\n                    <svg lucideX [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n        </div>\n    </div>\n    @if (!minimized()) {\n        <div [class]=\"contentClass()\">\n            @switch (contentType()) {\n                @case (\"template\") {\n                    <ng-container [ngTemplateOutlet]=\"contentTemplate()!\"></ng-container>\n                }\n                @case (\"component\") {\n                    <ng-container #componentAnchor></ng-container>\n                }\n            }\n        </div>\n        @if (windowData.footerTemplate) {\n            <div>\n                <ng-container [ngTemplateOutlet]=\"windowData.footerTemplate\"></ng-container>\n            </div>\n        }\n    }\n    @if (windowData.resizable && !maximized()) {\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"north\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top. Use arrow keys to resize.\"\n            [class]=\"'north' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"south\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom. Use arrow keys to resize.\"\n            [class]=\"'south' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"east\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the right. Use arrow keys to resize.\"\n            [class]=\"'east' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"west\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the left. Use arrow keys to resize.\"\n            [class]=\"'west' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northeast\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top-right corner. Use arrow keys to resize.\"\n            [class]=\"'northeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northwest\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top-left corner. Use arrow keys to resize.\"\n            [class]=\"'northwest' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southeast\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom-right corner. Use arrow keys to resize.\"\n            [class]=\"'southeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southwest\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom-left corner. Use arrow keys to resize.\"\n            [class]=\"'southwest' | monaResizePosition\"></div>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: WindowDragHandlerDirective, selector: "div[monaWindowDragHandler]", inputs: ["draggable", "windowRef"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: WindowResizeHandlerDirective, selector: "div[monaWindowResizeHandler]", inputs: ["direction", "maxHeight", "maxWidth", "minHeight", "minWidth", "windowRef"] }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "pipe", type: ResizePositionPipe, name: "monaResizePosition" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowContentComponent, decorators: [{
             type: Component,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.7.0",
+  "version": "0.8.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-button.d.ts

@@ -80,6 +80,12 @@ declare class ButtonDirective implements ButtonVariantsInput {
      * @default 0
      */
     readonly tabindex: _angular_core.InputSignalWithTransform<number, string | number>;
+    /**
+     * @description Native `type` attribute of the button. Defaults to `"button"` to prevent accidental
+     * form submission; set to `"submit"` or `"reset"` explicitly when that behavior is intended.
+     * @default "button"
+     */
+    readonly type: _angular_core.InputSignal<"button" | "reset" | "submit">;
     /**
      * @description Enables toggle behavior — each click flips the `selected` state and `aria-pressed` is managed.
      * Must use `[toggleable]="true"` binding syntax, not bare attribute form.
@@ -93,7 +99,7 @@ declare class ButtonDirective implements ButtonVariantsInput {
     readonly userClass: _angular_core.InputSignal<string>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ButtonDirective, "button[monaButton]", never, { "ariaHasPopup": { "alias": "aria-haspopup"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "loading": "loadingChange"; "look": "lookChange"; "selected": "selectedChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ButtonDirective, "button[monaButton]", never, { "ariaHasPopup": { "alias": "aria-haspopup"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "loading": "loadingChange"; "look": "lookChange"; "selected": "selectedChange"; }, never, never, true, never>;
 }
 
 declare class ButtonService {

package/types/nanahoshi-mona-ui-segmented.d.ts

@@ -0,0 +1,90 @@
+import * as _angular_core from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+
+type SegmentedValue = string | number;
+
+interface SegmentedOption<T extends SegmentedValue = SegmentedValue> {
+    readonly label: string;
+    readonly value: T;
+    readonly disabled?: boolean;
+}
+
+declare const segmentedContainerThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const segmentedOptionThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SegmentedContainerVariantProps = VariantProps<typeof segmentedContainerThemeVariants>;
+type SegmentedContainerVariantInput = VariantInputs<SegmentedContainerVariantProps>;
+type SegmentedOptionVariantProps = VariantProps<typeof segmentedOptionThemeVariants>;
+type SegmentedOptionVariantInput = VariantInputs<SegmentedOptionVariantProps>;
+type SegmentedVariantProps = SegmentedContainerVariantProps & SegmentedOptionVariantProps;
+type SegmentedVariantInput = SegmentedContainerVariantInput & SegmentedOptionVariantInput;
+
+declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> implements SegmentedVariantInput, FormValueControl<T | null> {
+    protected readonly containerClasses: _angular_core.Signal<string>;
+    protected readonly groupName: string;
+    protected readonly inputClasses: _angular_core.Signal<string>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly optionClasses: _angular_core.Signal<string>;
+    /**
+     * @description Accessible name for the radio group. Provide either `aria-label` or `aria-labelledby`.
+     * @default null
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /**
+     * @description ID of an external element that provides the accessible name for the radio group.
+     * @default null
+     */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string | null>;
+    /**
+     * @description Disables every option in the group and prevents value changes.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Marks the component as invalid. Error styling requires both `invalid` and `touched` to be `true`.
+     * When bound to a signal form field via `[formField]`, this is written by the signal forms `Field` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @description The list of selectable options. Exactly one option is selected at a time.
+     */
+    readonly options: _angular_core.InputSignal<readonly SegmentedOption<T>[]>;
+    /**
+     * @description Size preset controlling the height, horizontal padding, text size, and spacing of each option.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<"small" | "medium" | "large" | null | undefined>;
+    /**
+     * @description Emitted when the selected value changes or focus leaves a radio input.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Marks the component as touched. When bound to a signal form field via `[formField]`,
+     * this is written by the signal forms `Field` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description The currently selected value. When it matches no current option, no option is checked.
+     * A `null` value is allowed initially but cannot be restored through segmented interaction.
+     * @default null
+     */
+    readonly value: _angular_core.ModelSignal<T | null>;
+    protected onOptionBlur(): void;
+    protected onOptionChange(option: SegmentedOption<T>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent<any>, "mona-segmented", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { SegmentedComponent };
+export type { SegmentedOption, SegmentedValue, SegmentedVariantProps };

package/types/nanahoshi-mona-ui-tabs.d.ts

@@ -19,6 +19,8 @@ declare class TabSelectEvent extends PreventableEvent {
     get index(): number;
 }
 
+type TabsPosition = "top" | "bottom" | "left" | "right";
+
 declare class TabContentTemplateDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabContentTemplateDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabContentTemplateDirective, "ng-template[monaTabContentTemplate]", never, {}, {}, never, never, true, never>;
@@ -41,21 +43,23 @@ interface TabItem {
 }
 
 declare const tabListBaseThemeVariants: (props?: ({
-    rounded?: "small" | "medium" | "large" | "full" | "none" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
+    position?: "top" | "bottom" | "left" | "right" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const tabListListWrapperThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-declare const tabListListThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const tabListListThemeVariants: (props?: ({
+    position?: "top" | "bottom" | "left" | "right" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const tabListListItemThemeVariants: (props?: ({
     active?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
-    rounded?: "small" | "medium" | "large" | "full" | "none" | null | undefined;
+    position?: "top" | "bottom" | "left" | "right" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const tabListScrollButtonThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-declare const tabContentThemeVariants: (props?: ({
-    rounded?: "small" | "medium" | "large" | "full" | "none" | null | undefined;
+declare const tabContentThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const tabsBaseThemeVariants: (props?: ({
+    position?: "top" | "bottom" | "left" | "right" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const tabsBaseThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type TabListBaseVariantProps = VariantProps<typeof tabListBaseThemeVariants>;
 type TabListBaseVariantInput = VariantInputs<TabListBaseVariantProps>;
 type TabListListWrapperVariantProps = VariantProps<typeof tabListListWrapperThemeVariants>;
@@ -96,10 +100,10 @@ declare class TabsComponent implements TabsVariantInput {
      */
     readonly keepTabContent: _angular_core.InputSignal<boolean>;
     /**
-     * @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"
      */
-    readonly rounded: _angular_core.InputSignal<"small" | "medium" | "large" | "full" | "none" | null | undefined>;
+    readonly position: _angular_core.InputSignal<"top" | "bottom" | "left" | "right" | null | undefined>;
     /**
      * @description Size preset controlling the tabs' dimensions.
      * @default "medium"
@@ -120,7 +124,7 @@ declare class TabsComponent implements TabsVariantInput {
     readonly userClass: _angular_core.InputSignal<string>;
     protected handlePanelKeyDown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "mona-tabs", never, { "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "keepTabContent": { "alias": "keepTabContent"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "tabClose": "tabClose"; "tabSelect": "tabSelect"; }, ["tabs"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "mona-tabs", never, { "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "keepTabContent": { "alias": "keepTabContent"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "tabClose": "tabClose"; "tabSelect": "tabSelect"; }, ["tabs"], never, true, never>;
 }
 
 declare class TabComponent {
@@ -154,3 +158,4 @@ declare class TabComponent {
 }
 
 export { TabCloseEvent, TabComponent, TabContentTemplateDirective, TabSelectEvent, TabTitleTemplateDirective, TabsComponent };
+export type { TabsPosition };

package/types/nanahoshi-mona-ui-theme.d.ts

@@ -23,7 +23,7 @@ type ThemeEffectVariable = `--mona-effect-${ThemeEffectLevel}-background-color`
 type ThemeEffects = Readonly<Record<ThemeEffectVariable, string>>;
 type ThemeShapeVariable = "--radius-sm" | "--radius-md" | "--radius-lg";
 type ThemeShape = Readonly<Record<ThemeShapeVariable, string>>;
-type ThemeComponentVariable = "--mona-calendar-background" | "--mona-calendar-shadow" | "--mona-list-background" | "--mona-list-disabled-background" | "--mona-list-group-background" | "--mona-list-group-border-width" | "--mona-list-group-font-weight" | "--mona-menubar-background" | "--mona-menubar-shadow" | "--mona-pager-background" | "--mona-slider-handle-border-color" | "--mona-tab-list-background" | "--mona-tab-content-background";
+type ThemeComponentVariable = "--mona-calendar-background" | "--mona-calendar-shadow" | "--mona-list-background" | "--mona-list-disabled-background" | "--mona-list-group-background" | "--mona-list-group-border-width" | "--mona-list-group-font-weight" | "--mona-menubar-background" | "--mona-menubar-shadow" | "--mona-pager-background" | "--mona-slider-handle-border-color";
 type ThemeComponents = Readonly<Record<ThemeComponentVariable, string>>;
 interface ThemeProfile {
     readonly colors: ThemeColors;