@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -5,7 +5,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LucideChevronDown } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PopupMenuGroupTemplateDirective, PopupMenuTemplateOrigin, PopupMenuGroupTemplateToken, PopupMenuIconTemplateDirective, PopupMenuIconTemplateToken, PopupMenuShortcutTemplateDirective, PopupMenuShortcutTemplateToken, PopupMenuTextTemplateDirective, PopupMenuTextTemplateToken, PopupMenuToken, PopupMenuComponent, PopupMenuItemType, PopupMenuTemplateType, ensurePopupComponentTypes, PopupMenuOrigin, ensurePopupTemplateTypes, PopupMenuCheckboxItemComponent, PopupMenuGroupComponent, PopupMenuItemComponent, PopupMenuRadioGroupComponent, PopupMenuRadioItemComponent, PopupMenuRadioItemToken, PopupMenuSeparatorComponent } from '@nanahoshi/mona-ui/popup-menu';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
@@ -137,10 +136,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const splitButtonVariants = cva(`
-        inline-flex flex-nowrap items-center
-        [&>button]:focus-visible:z-10
-        [&_svg]:w-5 [&_svg]:h-5
+const splitButtonThemeVariants = cva(`
+        inline-flex flex-nowrap items-center
+        [&>button]:focus-visible:z-10
+        [&_svg]:h-5 [&_svg]:w-5
     `, {
     variants: {
         look: {
@@ -148,46 +147,46 @@ const splitButtonVariants = cva(`
             error: "",
             ghost: "border-transparent",
             info: "",
-            outline: "[&>button:not(:last-child)]:border-r",
+            outline: "[&>button:not(:last-child)]:border-r [&>button:not(:last-child)]:border-input-border",
             primary: "",
             secondary: "",
             success: "",
             warning: ""
         },
         rounded: {
-            full: `
-                    rounded-full
-                    [&>button]:first:rounded-tl-full [&>button]:first:rounded-bl-full
-                    [&>button]:last:rounded-tr-full [&>button]:last:rounded-br-full
+            full: `
+                    rounded-full
+                    [&>button]:first:rounded-tl-full [&>button]:first:rounded-bl-full
+                    [&>button]:last:rounded-tr-full [&>button]:last:rounded-br-full
                 `,
-            large: `
-                    rounded-lg
-                    [&>button]:first:rounded-tl-lg [&>button]:first:rounded-bl-lg
-                    [&>button]:last:rounded-tr-lg [&>button]:last:rounded-br-lg
+            large: `
+                    rounded-lg
+                    [&>button]:first:rounded-tl-lg [&>button]:first:rounded-bl-lg
+                    [&>button]:last:rounded-tr-lg [&>button]:last:rounded-br-lg
                 `,
-            medium: `
-                    rounded-md
-                    [&>button]:first:rounded-tl-md [&>button]:first:rounded-bl-md
-                    [&>button]:last:rounded-tr-md [&>button]:last:rounded-br-md
+            medium: `
+                    rounded-md
+                    [&>button]:first:rounded-tl-md [&>button]:first:rounded-bl-md
+                    [&>button]:last:rounded-tr-md [&>button]:last:rounded-br-md
                 `,
-            none: `
-                    rounded-none
+            none: `
+                    rounded-none
                 `,
-            small: `
-                    rounded-sm
-                    [&>button]:first:rounded-tl-sm [&>button]:first:rounded-bl-sm
-                    [&>button]:last:rounded-tr-sm [&>button]:last:rounded-br-sm
+            small: `
+                    rounded-sm
+                    [&>button]:first:rounded-tl-sm [&>button]:first:rounded-bl-sm
+                    [&>button]:last:rounded-tr-sm [&>button]:last:rounded-br-sm
                 `
         },
         size: {
-            large: `
-                    [&_svg]:w-5 [&_svg]:h-5
+            large: `
+                    [&_svg]:h-5 [&_svg]:w-5
                 `,
-            medium: `
-                    [&_svg]:w-5 [&_svg]:h-5
+            medium: `
+                    [&_svg]:h-5 [&_svg]:w-5
                 `,
-            small: `
-                    [&_svg]:w-4 [&_svg]:h-4
+            small: `
+                    [&_svg]:h-4 [&_svg]:w-4
                 `
         }
     },
@@ -198,32 +197,20 @@ const splitButtonVariants = cva(`
     }
 });
 
-const splitButtonThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return splitButtonVariants;
-        default:
-            return splitButtonVariants; // Default to Mona styles
-    }
-};
-
 class SplitButtonComponent {
     #destroyRef;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
-        this.#themeService = inject(ThemeService);
         this.menuItemComponents = contentChildren(PopupMenuToken, { ...(ngDevMode ? { debugName: "menuItemComponents" } : /* istanbul ignore next */ {}), descendants: false });
         this.menuButtonRef = viewChild("menuButton", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "menuButtonRef" }] : /* istanbul ignore next */ []));
         this.popupMenuRef = viewChild("popupMenu", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popupMenuRef" }] : /* istanbul ignore next */ []));
         this.classes = computed(() => {
-            const theme = this.#themeService.theme();
             const look = this.look();
             const rounded = this.rounded();
             const size = this.size();
-            const classes = splitButtonThemeVariants(theme)({
+            const classes = splitButtonThemeVariants({
                 look,
                 rounded,
                 size
@@ -384,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\r\n    monaButton\r\n    (click)=\"buttonClick.emit($event)\"\r\n    [disabled]=\"disabled()\"\r\n    [look]=\"look()\"\r\n    [size]=\"size()\"\r\n    [rounded]=\"rounded()\"\r\n    class=\"rounded-tr-none rounded-br-none\"\r\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\r\n    [tabindex]=\"disabled() ? -1 : 0\"\r\n    #mainButton>\r\n    @if (mainButtonTextTemplate()) {\r\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\r\n    } @else {\r\n        <span>{{ text() }}</span>\r\n    }\r\n</button>\r\n<button\r\n    monaButton\r\n    [disabled]=\"disabled()\"\r\n    [iconOnly]=\"true\"\r\n    [look]=\"look()\"\r\n    [size]=\"size()\"\r\n    [rounded]=\"rounded()\"\r\n    class=\"rounded-tl-none rounded-bl-none border-l-0\"\r\n    [attr.aria-haspopup]=\"'menu'\"\r\n    [attr.aria-expanded]=\"menuOpen()\"\r\n    [attr.aria-controls]=\"menuId\"\r\n    [attr.aria-label]=\"menuButtonAriaLabel()\"\r\n    [tabindex]=\"disabled() ? -1 : 0\"\r\n    #menuButton>\r\n    @if (menuButtonTemplate()) {\r\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\r\n    } @else {\r\n        <svg lucideChevronDown [size]=\"16\"></svg>\r\n    }\r\n</button>\r\n\r\n<mona-popup-menu\r\n    [anchorConnectionPoint]=\"'bottomleft'\"\r\n    [anchor]=\"mainButton\"\r\n    [items]=\"menuItems()\"\r\n    (menuClick)=\"onMenuItemClick($event)\"\r\n    (open)=\"onMenuOpen()\"\r\n    (close)=\"onMenuClose()\"\r\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\r\n    [popupConnectionPoint]=\"'topleft'\"\r\n    [rounded]=\"popupMenuRounded()\"\r\n    [size]=\"size()\"\r\n    [target]=\"menuButton\"\r\n    [trigger]=\"'click'\"\r\n    [id]=\"menuId\"\r\n    [minWidth]=\"popupWidth() || undefined\"\r\n    #popupMenu>\r\n    @if (groupTemplate()) {\r\n        <ng-template monaPopupMenuGroupTemplate let-group>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"groupTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (iconTemplate()) {\r\n        <ng-template monaPopupMenuIconTemplate let-item>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"iconTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (shortcutTemplate()) {\r\n        <ng-template monaPopupMenuShortcutTemplate let-item>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (textTemplate()) {\r\n        <ng-template monaPopupMenuTextTemplate let-item>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"textTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n</mona-popup-menu>\r\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"], 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", "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"], 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,
@@ -399,7 +386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         LucideChevronDown
                     ], host: {
                         "[class]": "classes()"
-                    }, template: "<button\r\n    monaButton\r\n    (click)=\"buttonClick.emit($event)\"\r\n    [disabled]=\"disabled()\"\r\n    [look]=\"look()\"\r\n    [size]=\"size()\"\r\n    [rounded]=\"rounded()\"\r\n    class=\"rounded-tr-none rounded-br-none\"\r\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\r\n    [tabindex]=\"disabled() ? -1 : 0\"\r\n    #mainButton>\r\n    @if (mainButtonTextTemplate()) {\r\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\r\n    } @else {\r\n        <span>{{ text() }}</span>\r\n    }\r\n</button>\r\n<button\r\n    monaButton\r\n    [disabled]=\"disabled()\"\r\n    [iconOnly]=\"true\"\r\n    [look]=\"look()\"\r\n    [size]=\"size()\"\r\n    [rounded]=\"rounded()\"\r\n    class=\"rounded-tl-none rounded-bl-none border-l-0\"\r\n    [attr.aria-haspopup]=\"'menu'\"\r\n    [attr.aria-expanded]=\"menuOpen()\"\r\n    [attr.aria-controls]=\"menuId\"\r\n    [attr.aria-label]=\"menuButtonAriaLabel()\"\r\n    [tabindex]=\"disabled() ? -1 : 0\"\r\n    #menuButton>\r\n    @if (menuButtonTemplate()) {\r\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\r\n    } @else {\r\n        <svg lucideChevronDown [size]=\"16\"></svg>\r\n    }\r\n</button>\r\n\r\n<mona-popup-menu\r\n    [anchorConnectionPoint]=\"'bottomleft'\"\r\n    [anchor]=\"mainButton\"\r\n    [items]=\"menuItems()\"\r\n    (menuClick)=\"onMenuItemClick($event)\"\r\n    (open)=\"onMenuOpen()\"\r\n    (close)=\"onMenuClose()\"\r\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\r\n    [popupConnectionPoint]=\"'topleft'\"\r\n    [rounded]=\"popupMenuRounded()\"\r\n    [size]=\"size()\"\r\n    [target]=\"menuButton\"\r\n    [trigger]=\"'click'\"\r\n    [id]=\"menuId\"\r\n    [minWidth]=\"popupWidth() || undefined\"\r\n    #popupMenu>\r\n    @if (groupTemplate()) {\r\n        <ng-template monaPopupMenuGroupTemplate let-group>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"groupTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (iconTemplate()) {\r\n        <ng-template monaPopupMenuIconTemplate let-item>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"iconTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (shortcutTemplate()) {\r\n        <ng-template monaPopupMenuShortcutTemplate let-item>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (textTemplate()) {\r\n        <ng-template monaPopupMenuTextTemplate let-item>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"textTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n</mona-popup-menu>\r\n" }]
+                    }, 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" }]
         }], ctorParameters: () => [], propDecorators: { menuItemComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuToken), { ...{ descendants: false }, isSignal: true }] }], menuButtonRef: [{ type: i0.ViewChild, args: ["menuButton", { isSignal: true }] }], popupMenuRef: [{ type: i0.ViewChild, args: ["popupMenu", { isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuGroupTemplateDirective), { ...{
                             read: TemplateRef,
                             descendants: false

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

@@ -1,8 +1,7 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, input, Directive, model, viewChild, TemplateRef, Component, inject, output, DestroyRef, ElementRef, signal, afterNextRender, afterRenderEffect, contentChildren } from '@angular/core';
+import { computed, input, Directive, model, viewChild, TemplateRef, Component, output, inject, DestroyRef, ElementRef, signal, afterNextRender, afterRenderEffect, contentChildren } from '@angular/core';
 import { where, compact, from } from '@mirei/ts-collections';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { cva } from 'class-variance-authority';
 import { v4 } from 'uuid';
 import { Directionality } from '@angular/cdk/bidi';
@@ -105,8 +104,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], propDecorators: { pane: [{ type: i0.Input, args: [{ isSignal: true, alias: "pane", required: true }] }], paneList: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneList", required: true }] }] } });
 
-const splitterBaseVariants = cva(`
-        flex w-full h-full overflow-hidden min-w-0 min-h-0
+const splitterBaseThemeVariants = cva(`
+        flex h-full w-full min-h-0 min-w-0 overflow-hidden
     `, {
     variants: {
         orientation: {
@@ -118,13 +117,13 @@ const splitterBaseVariants = cva(`
         orientation: "horizontal"
     }
 });
-const splitterResizerVariants = cva(`
-        flex items-center justify-center
-        relative bg-accent
-        hover:bg-accent-hover
-        active:bg-primary/40
-        shrink-0 outline-none
-        focus-visible:bg-primary
+const splitterResizerThemeVariants = cva(`
+        relative flex shrink-0 items-center justify-center
+        bg-border-subtle outline-none
+        transition-colors
+        hover:bg-border-control active:bg-border-control-hover
+        focus-visible:bg-border-control
+        focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/35
     `, {
     variants: {
         orientation: {
@@ -132,7 +131,7 @@ const splitterResizerVariants = cva(`
             vertical: "h-0.5 flex-row"
         },
         resizing: {
-            true: "",
+            true: "bg-border-control-hover",
             false: ""
         }
     },
@@ -141,9 +140,9 @@ const splitterResizerVariants = cva(`
         resizing: false
     }
 });
-const splitterResizerHandleVariants = cva(`
-        flex items-center justify-center
-        [&_button]:p-0
+const splitterResizerHandleThemeVariants = cva(`
+        flex items-center justify-center
+        [&_button]:p-0
     `, {
     variants: {
         orientation: {
@@ -156,31 +155,6 @@ const splitterResizerHandleVariants = cva(`
     }
 });
 
-const splitterBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return splitterBaseVariants;
-        default:
-            return splitterBaseVariants;
-    }
-};
-const splitterResizerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return splitterResizerVariants;
-        default:
-            return splitterResizerVariants;
-    }
-};
-const splitterResizerHandleThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return splitterResizerHandleVariants;
-        default:
-            return splitterResizerHandleVariants;
-    }
-};
-
 class SplitterPaneComponent {
     constructor() {
         /**
@@ -218,31 +192,29 @@ class SplitterPaneComponent {
         this.uid = v4();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: SplitterPaneComponent, isStandalone: true, selector: "mona-splitter-pane", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", 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 }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", size: "sizeChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
-        <ng-template>
-            <ng-content></ng-content>
-        </ng-template>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: SplitterPaneComponent, isStandalone: true, selector: "mona-splitter-pane", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", 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 }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", size: "sizeChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
     `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterPaneComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "mona-splitter-pane",
-                    template: `
-        <ng-template>
-            <ng-content></ng-content>
-        </ng-template>
+                    template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
     `
                 }]
         }], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 class SplitterResizerHandleComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return splitterResizerHandleThemeVariants(theme)({ orientation });
+            return splitterResizerHandleThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.collapseNext = output();
@@ -256,19 +228,18 @@ class SplitterResizerHandleComponent {
         this.resizable = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     onPointerDown(event) {
         event.preventDefault();
         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\") {\r\n    @if (previousControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse previous pane\"\r\n            (click)=\"collapsePrevious.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronLeft [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n    @if (resizable()) {\r\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\r\n    }\r\n    @if (nextControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse next pane\"\r\n            (click)=\"collapseNext.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronRight [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n} @else {\r\n    @if (previousControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse pane above\"\r\n            (click)=\"collapsePrevious.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronUp [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n    @if (resizable()) {\r\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\r\n    }\r\n    @if (nextControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse pane below\"\r\n            (click)=\"collapseNext.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronDown [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n}\r\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", "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,
             args: [{ selector: "mona-splitter-resizer-handle", imports: [ButtonDirective, LucideChevronLeft, LucideChevronRight, LucideChevronUp, LucideChevronDown], host: {
                         "[class]": "baseClass()"
-                    }, template: "@if (orientation() === \"horizontal\") {\r\n    @if (previousControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse previous pane\"\r\n            (click)=\"collapsePrevious.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronLeft [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n    @if (resizable()) {\r\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\r\n    }\r\n    @if (nextControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse next pane\"\r\n            (click)=\"collapseNext.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronRight [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n} @else {\r\n    @if (previousControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse pane above\"\r\n            (click)=\"collapsePrevious.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronUp [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n    @if (resizable()) {\r\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\r\n    }\r\n    @if (nextControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse pane below\"\r\n            (click)=\"collapseNext.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronDown [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n}\r\n" }]
+                    }, 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" }]
         }], propDecorators: { collapseNext: [{ type: i0.Output, args: ["collapseNext"] }], collapsePrevious: [{ type: i0.Output, args: ["collapsePrevious"] }], nextControlsVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextControlsVisible", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], previousControlsVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousControlsVisible", required: true }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: true }] }] } });
 
 class SplitterResizerComponent {
@@ -277,14 +248,12 @@ class SplitterResizerComponent {
     #hostElementRef;
     #paneSizeMemory;
     #splitter;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#directionality = inject(Directionality);
         this.#hostElementRef = inject(ElementRef);
         this.#paneSizeMemory = new WeakMap();
         this.#splitter = inject(SplitterComponent);
-        this.#themeService = inject(ThemeService);
         this.ariaValueMax = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaValueMax" }] : /* istanbul ignore next */ []));
         this.ariaValueMin = signal(0, /* @ts-ignore */
@@ -292,10 +261,9 @@ class SplitterResizerComponent {
         this.ariaValueNow = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaValueNow" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
             const resizing = this.resizing();
-            return splitterResizerThemeVariants(theme)({ orientation, resizing });
+            return splitterResizerThemeVariants({ orientation, resizing });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.hovered = signal(false, /* @ts-ignore */
@@ -779,7 +747,7 @@ class SplitterResizerComponent {
         this.updatePaneSizes(`${previousPaneHeight}px`, `${nextPaneHeight}px`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: SplitterResizerComponent, isStandalone: true, selector: "mona-splitter-resizer", inputs: { nextPane: { classPropertyName: "nextPane", publicName: "nextPane", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousPane: { classPropertyName: "previousPane", publicName: "previousPane", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "separator" }, listeners: { "dblclick": "toggleCollapse()" }, properties: { "class": "baseClass()", "style.cursor": "resizable() ? (orientation()==='horizontal' ? 'ew-resize' : 'ns-resize') : 'auto'", "attr.aria-orientation": "orientation()", "attr.aria-valuemax": "ariaValueMax()", "attr.aria-valuemin": "ariaValueMin()", "attr.aria-valuenow": "ariaValueNow()", "attr.tabindex": "isInert() ? -1 : 0" } }, ngImport: i0, template: "<mona-splitter-resizer-handle\r\n    (collapseNext)=\"collapseNext($event)\"\r\n    (collapsePrevious)=\"collapsePrevious($event)\"\r\n    [nextControlsVisible]=\"nextCollapseControlsVisible()\"\r\n    [orientation]=\"orientation()\"\r\n    [previousControlsVisible]=\"previousCollapseControlsVisible()\"\r\n    [resizable]=\"resizable()\">\r\n</mona-splitter-resizer-handle>\r\n", dependencies: [{ kind: "component", type: SplitterResizerHandleComponent, selector: "mona-splitter-resizer-handle", inputs: ["nextControlsVisible", "orientation", "previousControlsVisible", "resizable"], outputs: ["collapseNext", "collapsePrevious"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: SplitterResizerComponent, isStandalone: true, selector: "mona-splitter-resizer", inputs: { nextPane: { classPropertyName: "nextPane", publicName: "nextPane", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousPane: { classPropertyName: "previousPane", publicName: "previousPane", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "separator" }, listeners: { "dblclick": "toggleCollapse()" }, properties: { "class": "baseClass()", "style.cursor": "resizable() ? (orientation()==='horizontal' ? 'ew-resize' : 'ns-resize') : 'auto'", "attr.aria-orientation": "orientation()", "attr.aria-valuemax": "ariaValueMax()", "attr.aria-valuemin": "ariaValueMin()", "attr.aria-valuenow": "ariaValueNow()", "attr.tabindex": "isInert() ? -1 : 0" } }, ngImport: i0, template: "<mona-splitter-resizer-handle\n    (collapseNext)=\"collapseNext($event)\"\n    (collapsePrevious)=\"collapsePrevious($event)\"\n    [nextControlsVisible]=\"nextCollapseControlsVisible()\"\n    [orientation]=\"orientation()\"\n    [previousControlsVisible]=\"previousCollapseControlsVisible()\"\n    [resizable]=\"resizable()\">\n</mona-splitter-resizer-handle>\n", dependencies: [{ kind: "component", type: SplitterResizerHandleComponent, selector: "mona-splitter-resizer-handle", inputs: ["nextControlsVisible", "orientation", "previousControlsVisible", "resizable"], outputs: ["collapseNext", "collapsePrevious"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerComponent, decorators: [{
             type: Component,
@@ -793,16 +761,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-valuemin]": "ariaValueMin()",
                         "[attr.aria-valuenow]": "ariaValueNow()",
                         "[attr.tabindex]": "isInert() ? -1 : 0"
-                    }, template: "<mona-splitter-resizer-handle\r\n    (collapseNext)=\"collapseNext($event)\"\r\n    (collapsePrevious)=\"collapsePrevious($event)\"\r\n    [nextControlsVisible]=\"nextCollapseControlsVisible()\"\r\n    [orientation]=\"orientation()\"\r\n    [previousControlsVisible]=\"previousCollapseControlsVisible()\"\r\n    [resizable]=\"resizable()\">\r\n</mona-splitter-resizer-handle>\r\n" }]
+                    }, template: "<mona-splitter-resizer-handle\n    (collapseNext)=\"collapseNext($event)\"\n    (collapsePrevious)=\"collapsePrevious($event)\"\n    [nextControlsVisible]=\"nextCollapseControlsVisible()\"\n    [orientation]=\"orientation()\"\n    [previousControlsVisible]=\"previousCollapseControlsVisible()\"\n    [resizable]=\"resizable()\">\n</mona-splitter-resizer-handle>\n" }]
         }], ctorParameters: () => [], propDecorators: { nextPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPane", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], previousPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPane", required: true }] }] } });
 
 class SplitterComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return splitterBaseThemeVariants(theme)({ orientation });
+            return splitterBaseThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.paneList = contentChildren(SplitterPaneComponent, /* @ts-ignore */
@@ -814,7 +780,6 @@ class SplitterComponent {
         this.orientation = input("horizontal", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     /**
      * @internal Used by SplitterResizerComponent to resolve sibling panes by id.
      */