@nanahoshi/mona-ui 0.7.0 → 0.8.0

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

@@ -0,0 +1,159 @@
+import * as i0 from '@angular/core';
+import { computed, input, output, model, Component } from '@angular/core';
+import { themeControlSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+const segmentedContainerThemeVariants = cva(`
+        inline-flex items-center gap-0.5
+        ${themeControlSurfaceClasses}
+        border border-input-border
+        rounded-lg
+        p-1
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        transition-colors duration-(--mona-motion-fast)
+    `);
+const segmentedOptionThemeVariants = cva(`
+        relative flex flex-1 cursor-pointer items-center justify-center gap-1
+        whitespace-nowrap
+        rounded-md
+        transition-colors duration-(--mona-motion-fast)
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:text-disabled-foreground
+        data-[selected='true']:bg-primary data-[selected='true']:text-primary-foreground
+        data-[selected='true']:shadow-sm data-[selected='true']:ring-1 data-[selected='true']:ring-selected-border
+        data-[selected='false']:text-muted-foreground
+        data-[selected='false']:hover:bg-hover data-[selected='false']:hover:text-foreground
+    `, {
+    variants: {
+        size: {
+            small: "h-6 px-1.5 text-sm",
+            medium: "h-8 px-2.5 text-sm",
+            large: "h-10 px-3.5 text-base"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+const segmentedInputThemeVariants = cva(`
+        peer absolute inset-0 z-10 h-full w-full
+        cursor-pointer appearance-none opacity-0
+        outline-none
+        disabled:cursor-not-allowed
+    `);
+
+class SegmentedComponent {
+    constructor() {
+        this.containerClasses = computed(() => {
+            const classes = segmentedContainerThemeVariants();
+            return twMerge(classes, this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+        this.groupName = createElementControlId();
+        this.inputClasses = computed(() => segmentedInputThemeVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.optionClasses = computed(() => {
+            const size = this.size();
+            return segmentedOptionThemeVariants({ size });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionClasses" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name for the radio group. Provide either `aria-label` or `aria-labelledby`.
+         * @default null
+         */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description ID of an external element that provides the accessible name for the radio group.
+         * @default null
+         */
+        this.ariaLabelledBy = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: "aria-labelledby" });
+        /**
+         * @description Disables every option in the group and prevents value changes.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @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
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The list of selectable options. Exactly one option is selected at a time.
+         */
+        this.options = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the height, horizontal padding, text size, and spacing of each option.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the selected value changes or focus leaves a radio input.
+         */
+        this.touch = output();
+        /**
+         * @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
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @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
+         */
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    onOptionBlur() {
+        this.touch.emit();
+    }
+    onOptionChange(option) {
+        if (this.disabled() || option.disabled) {
+            return;
+        }
+        this.value.set(option.value);
+        this.touch.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SegmentedComponent, isStandalone: true, selector: "mona-segmented", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled() || undefined", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.role": "'radiogroup'", "class": "containerClasses()" } }, ngImport: i0, template: "@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label [class]=\"optionClasses()\" [attr.data-selected]=\"selected\" [attr.data-disabled]=\"optionDisabled\">\n        <input\n            type=\"radio\"\n            [name]=\"groupName\"\n            [value]=\"option.value\"\n            [checked]=\"selected\"\n            [disabled]=\"optionDisabled\"\n            [class]=\"inputClasses()\"\n            (change)=\"onOptionChange(option)\"\n            (blur)=\"onOptionBlur()\" />\n\n        <span\n            class=\"pointer-events-none absolute inset-0 flex items-center justify-center gap-1 rounded-md peer-focus-visible:ring-2 peer-focus-visible:ring-focus-indicator/35\">\n            {{ option.label }}\n        </span>\n    </label>\n}\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SegmentedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-segmented", host: {
+                        "[attr.aria-disabled]": "disabled() || undefined",
+                        "[attr.aria-invalid]": "invalidState() ? 'true' : null",
+                        "[attr.aria-label]": "ariaLabel()",
+                        "[attr.aria-labelledby]": "ariaLabelledBy()",
+                        "[attr.data-disabled]": "disabled()",
+                        "[attr.data-invalid]": "invalidState() || null",
+                        "[attr.role]": "'radiogroup'",
+                        "[class]": "containerClasses()"
+                    }, template: "@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label [class]=\"optionClasses()\" [attr.data-selected]=\"selected\" [attr.data-disabled]=\"optionDisabled\">\n        <input\n            type=\"radio\"\n            [name]=\"groupName\"\n            [value]=\"option.value\"\n            [checked]=\"selected\"\n            [disabled]=\"optionDisabled\"\n            [class]=\"inputClasses()\"\n            (change)=\"onOptionChange(option)\"\n            (blur)=\"onOptionBlur()\" />\n\n        <span\n            class=\"pointer-events-none absolute inset-0 flex items-center justify-center gap-1 rounded-md peer-focus-visible:ring-2 peer-focus-visible:ring-focus-indicator/35\">\n            {{ option.label }}\n        </span>\n    </label>\n}\n" }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/segmented
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SegmentedComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-segmented.mjs.map

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

@@ -225,7 +225,7 @@ class SheetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SheetComponent, isStandalone: true, selector: "mona-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed" }, host: { classAttribute: "hidden" }, viewQueries: [{ propertyName: "sheetTemplate", first: true, predicate: ["sheetTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #sheetTemplate>\n    <section\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"true\"\n        [class]=\"baseClass()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        [attr.aria-labelledby]=\"title() ? titleId : null\"\n        [attr.aria-describedby]=\"description() ? descriptionId : null\"\n        [attr.aria-label]=\"!title() ? ariaLabel() : null\">\n        @if (title() || description() || closable()) {\n            <header [class]=\"headerClass()\">\n                <div class=\"min-w-0 flex-1\">\n                    @if (title()) {\n                        <h2 [id]=\"titleId\" [class]=\"titleClass()\">{{ title() }}</h2>\n                    }\n                    @if (description()) {\n                        <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ description() }}</p>\n                    }\n                </div>\n                @if (closable()) {\n                    <button\n                        monaButton\n                        type=\"button\"\n                        look=\"ghost\"\n                        [iconOnly]=\"true\"\n                        aria-label=\"Close sheet\"\n                        size=\"small\"\n                        [class]=\"closeButtonClass()\"\n                        (click)=\"closeSheet()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </header>\n        }\n        <div [class]=\"contentClass()\">\n            <ng-content></ng-content>\n        </div>\n    </section>\n</ng-template>\n", dependencies: [{ 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: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SheetComponent, isStandalone: true, selector: "mona-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed" }, host: { classAttribute: "hidden" }, viewQueries: [{ propertyName: "sheetTemplate", first: true, predicate: ["sheetTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #sheetTemplate>\n    <section\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"true\"\n        [class]=\"baseClass()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        [attr.aria-labelledby]=\"title() ? titleId : null\"\n        [attr.aria-describedby]=\"description() ? descriptionId : null\"\n        [attr.aria-label]=\"!title() ? ariaLabel() : null\">\n        @if (title() || description() || closable()) {\n            <header [class]=\"headerClass()\">\n                <div class=\"min-w-0 flex-1\">\n                    @if (title()) {\n                        <h2 [id]=\"titleId\" [class]=\"titleClass()\">{{ title() }}</h2>\n                    }\n                    @if (description()) {\n                        <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ description() }}</p>\n                    }\n                </div>\n                @if (closable()) {\n                    <button\n                        monaButton\n                        type=\"button\"\n                        look=\"ghost\"\n                        [iconOnly]=\"true\"\n                        aria-label=\"Close sheet\"\n                        size=\"small\"\n                        [class]=\"closeButtonClass()\"\n                        (click)=\"closeSheet()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </header>\n        }\n        <div [class]=\"contentClass()\">\n            <ng-content></ng-content>\n        </div>\n    </section>\n</ng-template>\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: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SheetComponent, decorators: [{
             type: Component,

package/fesm2022/nanahoshi-mona-ui-split-button.mjs

@@ -371,7 +371,7 @@ class SplitButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitButtonComponent, isStandalone: true, selector: "mona-split-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, menuButtonAriaLabel: { classPropertyName: "menuButtonAriaLabel", publicName: "menuButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", 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 }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", menuItemClick: "menuItemClick" }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SplitButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: SplitButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "mainButtonTextTemplate", first: true, predicate: SplitButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "menuButtonTemplate", first: true, predicate: SplitButtonMenuButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "shortcutTemplate", first: true, predicate: SplitButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: SplitButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "menuButtonRef", first: true, predicate: ["menuButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    (click)=\"buttonClick.emit($event)\"\n    [disabled]=\"disabled()\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-tr-none rounded-br-none\"\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #mainButton>\n    @if (mainButtonTextTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\n    } @else {\n        <span>{{ text() }}</span>\n    }\n</button>\n<button\n    monaButton\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"true\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-tl-none rounded-bl-none border-l-0\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"menuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"menuButtonAriaLabel()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #menuButton>\n    @if (menuButtonTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\n    } @else {\n        <svg lucideChevronDown [size]=\"16\"></svg>\n    }\n</button>\n\n<mona-popup-menu\n    [anchorConnectionPoint]=\"'bottomleft'\"\n    [anchor]=\"mainButton\"\n    [items]=\"menuItems()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    (close)=\"onMenuClose()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topleft'\"\n    [rounded]=\"popupMenuRounded()\"\n    [size]=\"size()\"\n    [target]=\"menuButton\"\n    [trigger]=\"'click'\"\n    [id]=\"menuId\"\n    [minWidth]=\"popupWidth() || undefined\"\n    #popupMenu>\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (iconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (shortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (textTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"textTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n", dependencies: [{ 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitButtonComponent, isStandalone: true, selector: "mona-split-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, menuButtonAriaLabel: { classPropertyName: "menuButtonAriaLabel", publicName: "menuButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", 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 }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", menuItemClick: "menuItemClick" }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SplitButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: SplitButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "mainButtonTextTemplate", first: true, predicate: SplitButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "menuButtonTemplate", first: true, predicate: SplitButtonMenuButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "shortcutTemplate", first: true, predicate: SplitButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: SplitButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "menuButtonRef", first: true, predicate: ["menuButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    (click)=\"buttonClick.emit($event)\"\n    [disabled]=\"disabled()\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-tr-none rounded-br-none\"\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #mainButton>\n    @if (mainButtonTextTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\n    } @else {\n        <span>{{ text() }}</span>\n    }\n</button>\n<button\n    monaButton\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"true\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-tl-none rounded-bl-none border-l-0\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"menuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"menuButtonAriaLabel()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #menuButton>\n    @if (menuButtonTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\n    } @else {\n        <svg lucideChevronDown [size]=\"16\"></svg>\n    }\n</button>\n\n<mona-popup-menu\n    [anchorConnectionPoint]=\"'bottomleft'\"\n    [anchor]=\"mainButton\"\n    [items]=\"menuItems()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    (close)=\"onMenuClose()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topleft'\"\n    [rounded]=\"popupMenuRounded()\"\n    [size]=\"size()\"\n    [target]=\"menuButton\"\n    [trigger]=\"'click'\"\n    [id]=\"menuId\"\n    [minWidth]=\"popupWidth() || undefined\"\n    #popupMenu>\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (iconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (shortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (textTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"textTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\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: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,

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

@@ -233,7 +233,7 @@ class SplitterResizerHandleComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitterResizerHandleComponent, isStandalone: true, selector: "mona-splitter-resizer-handle", inputs: { nextControlsVisible: { classPropertyName: "nextControlsVisible", publicName: "nextControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousControlsVisible: { classPropertyName: "previousControlsVisible", publicName: "previousControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { collapseNext: "collapseNext", collapsePrevious: "collapsePrevious" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (orientation() === \"horizontal\") {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse previous pane\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronLeft [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse next pane\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronRight [size]=\"12\"></svg>\n        </button>\n    }\n} @else {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse pane above\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronUp [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse pane below\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronDown [size]=\"12\"></svg>\n        </button>\n    }\n}\n", dependencies: [{ 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: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitterResizerHandleComponent, isStandalone: true, selector: "mona-splitter-resizer-handle", inputs: { nextControlsVisible: { classPropertyName: "nextControlsVisible", publicName: "nextControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousControlsVisible: { classPropertyName: "previousControlsVisible", publicName: "previousControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { collapseNext: "collapseNext", collapsePrevious: "collapsePrevious" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (orientation() === \"horizontal\") {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse previous pane\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronLeft [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse next pane\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronRight [size]=\"12\"></svg>\n        </button>\n    }\n} @else {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse pane above\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronUp [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse pane below\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronDown [size]=\"12\"></svg>\n        </button>\n    }\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: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerHandleComponent, decorators: [{
             type: Component,