@nanahoshi/mona-ui 0.1.0 → 0.1.1

package/fesm2022/nanahoshi-mona-ui-auto-complete.mjs

@@ -16,12 +16,12 @@ import { Subject, filter, debounceTime, identity, take, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const autoCompleteBaseVariants = cva(`
-        flex
-        border border-input-border outline-none
-        bg-background shadow-xs
-        focus-within:ring-1 focus-within:ring-primary/40
-        transition-[color,box-shadow,border] ease-in-out duration-300
+const autoCompleteBaseVariants = cva(`
+        flex
+        border border-input-border outline-none
+        bg-background shadow-xs text-foreground
+        focus-within:ring-1 focus-within:ring-primary/40
+        transition-[color,box-shadow,border] ease-in-out duration-300
     `, {
     variants: {
         disabled: {
@@ -58,11 +58,11 @@ const autoCompleteBaseVariants = cva(`
         size: "medium"
     }
 });
-const autoCompleteTextInputVariants = cva(`
-        border-none outline-none
-        bg-transparent shadow-none
-        px-2 h-full w-full text-ellipsis
-        focus-within:ring-0 focus-visible:ring-0
+const autoCompleteTextInputVariants = cva(`
+        border-none outline-none
+        bg-transparent shadow-none
+        px-2 h-full w-full text-ellipsis
+        focus-within:ring-0 focus-visible:ring-0
     `, {
     variants: {
         rounded: {

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

@@ -6,10 +6,10 @@ import { twMerge } from 'tailwind-merge';
 import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { cva } from 'class-variance-authority';
 
-const breadcrumbListVariants = cva(`
-        flex items-center
-        overflow-hidden gap-1
-        list-none select-none py-1 px-2
+const breadcrumbListVariants = cva(`
+        flex items-center
+        overflow-hidden gap-1
+        list-none select-none py-1 px-2
     `, {
     variants: {
         disabled: {
@@ -18,15 +18,15 @@ const breadcrumbListVariants = cva(`
         }
     }
 });
-const breadcrumbListItemVariants = cva(`
-        flex items-center
-        truncate cursor-pointer
-        h-full text-primary/70
-        bg-transparent border-0
-        outline-none rounded-sm px-1
-        hover:text-primary
-        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40
-        transition-colors duration-100 ease-in-out
+const breadcrumbListItemVariants = cva(`
+        flex items-center
+        truncate cursor-pointer
+        h-full text-primary/70
+        bg-transparent border-0
+        outline-none rounded-sm px-1
+        hover:text-primary
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40
+        transition-colors duration-100 ease-in-out
     `, {
     variants: {
         disabled: {
@@ -144,11 +144,11 @@ class BreadcrumbItemComponent {
         ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: BreadcrumbItemComponent, isStandalone: true, selector: "mona-breadcrumb-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: BreadcrumbItemComponent, isStandalone: true, selector: "mona-breadcrumb-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-breadcrumb-item", template: "<ng-template>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n" }]
+            args: [{ selector: "mona-breadcrumb-item", template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 class BreadcrumbComponent {
@@ -196,14 +196,14 @@ class BreadcrumbComponent {
         item.itemClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: BreadcrumbComponent, isStandalone: true, selector: "mona-breadcrumb", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()" } }, queries: [{ propertyName: "itemComponents", predicate: BreadcrumbItemComponent, isSignal: true }, { propertyName: "separatorTemplate", first: true, predicate: BreadcrumbSeparatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol role=\"list\" [class]=\"listClass()\">\r\n    @for (item of itemComponents(); track item) {\r\n        <li>\r\n            @if ($last) {\r\n                <span aria-current=\"page\" [class]=\"currentItemClass()\">\r\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\r\n                </span>\r\n            } @else {\r\n                <button\r\n                    type=\"button\"\r\n                    monaBreadcrumbItem\r\n                    [disabled]=\"disabled() || item.disabled()\"\r\n                    (click)=\"onItemClick(item)\">\r\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\r\n                </button>\r\n            }\r\n        </li>\r\n\r\n        @if (!$last) {\r\n            <li aria-hidden=\"true\" role=\"presentation\">\r\n                @if (separatorTemplate()) {\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"separatorTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: $index }\"></ng-container>\r\n                } @else {\r\n                    <svg lucideChevronRight [size]=\"18\"></svg>\r\n                }\r\n            </li>\r\n        }\r\n    }\r\n</ol>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BreadcrumbItemDirective, selector: "button[monaBreadcrumbItem]", inputs: ["disabled", "listDisabled", "class"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: BreadcrumbComponent, isStandalone: true, selector: "mona-breadcrumb", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()" } }, queries: [{ propertyName: "itemComponents", predicate: BreadcrumbItemComponent, isSignal: true }, { propertyName: "separatorTemplate", first: true, predicate: BreadcrumbSeparatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol role=\"list\" [class]=\"listClass()\">\n    @for (item of itemComponents(); track item) {\n        <li>\n            @if ($last) {\n                <span aria-current=\"page\" [class]=\"currentItemClass()\">\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\n                </span>\n            } @else {\n                <button\n                    type=\"button\"\n                    monaBreadcrumbItem\n                    [disabled]=\"disabled() || item.disabled()\"\n                    (click)=\"onItemClick(item)\">\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\n                </button>\n            }\n        </li>\n\n        @if (!$last) {\n            <li aria-hidden=\"true\" role=\"presentation\">\n                @if (separatorTemplate()) {\n                    <ng-container\n                        [ngTemplateOutlet]=\"separatorTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: $index }\"></ng-container>\n                } @else {\n                    <svg lucideChevronRight [size]=\"18\"></svg>\n                }\n            </li>\n        }\n    }\n</ol>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BreadcrumbItemDirective, selector: "button[monaBreadcrumbItem]", inputs: ["disabled", "listDisabled", "class"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-breadcrumb", imports: [NgTemplateOutlet, BreadcrumbItemDirective, LucideChevronRight], host: {
                         role: "navigation",
                         "[attr.aria-label]": "ariaLabel()"
-                    }, template: "<ol role=\"list\" [class]=\"listClass()\">\r\n    @for (item of itemComponents(); track item) {\r\n        <li>\r\n            @if ($last) {\r\n                <span aria-current=\"page\" [class]=\"currentItemClass()\">\r\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\r\n                </span>\r\n            } @else {\r\n                <button\r\n                    type=\"button\"\r\n                    monaBreadcrumbItem\r\n                    [disabled]=\"disabled() || item.disabled()\"\r\n                    (click)=\"onItemClick(item)\">\r\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\r\n                </button>\r\n            }\r\n        </li>\r\n\r\n        @if (!$last) {\r\n            <li aria-hidden=\"true\" role=\"presentation\">\r\n                @if (separatorTemplate()) {\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"separatorTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: $index }\"></ng-container>\r\n                } @else {\r\n                    <svg lucideChevronRight [size]=\"18\"></svg>\r\n                }\r\n            </li>\r\n        }\r\n    }\r\n</ol>\r\n" }]
+                    }, template: "<ol role=\"list\" [class]=\"listClass()\">\n    @for (item of itemComponents(); track item) {\n        <li>\n            @if ($last) {\n                <span aria-current=\"page\" [class]=\"currentItemClass()\">\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\n                </span>\n            } @else {\n                <button\n                    type=\"button\"\n                    monaBreadcrumbItem\n                    [disabled]=\"disabled() || item.disabled()\"\n                    (click)=\"onItemClick(item)\">\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\n                </button>\n            }\n        </li>\n\n        @if (!$last) {\n            <li aria-hidden=\"true\" role=\"presentation\">\n                @if (separatorTemplate()) {\n                    <ng-container\n                        [ngTemplateOutlet]=\"separatorTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: $index }\"></ng-container>\n                } @else {\n                    <svg lucideChevronRight [size]=\"18\"></svg>\n                }\n            </li>\n        }\n    }\n</ol>\n" }]
         }], propDecorators: { itemComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BreadcrumbItemComponent), { isSignal: true }] }], separatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BreadcrumbSeparatorTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });

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

@@ -7,14 +7,14 @@ import { map, pairwise } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const buttonGroupVariants = cva(`
-        inline-flex items-center justify-center
-        border border-border shadow-xs
-        [&>button]:border-0
-        [&>button]:focus-visible:ring-2
-        [&>button]:focus-visible:z-10
-        [&>button]:rounded-none
-        [&>button]:shadow-none
+const buttonGroupVariants = cva(`
+        inline-flex items-center justify-center
+        border border-border shadow-xs
+        [&>button]:border-0
+        [&>button]:focus-visible:ring-2
+        [&>button]:focus-visible:z-10
+        [&>button]:rounded-none
+        [&>button]:shadow-none
     `, {
     variants: {
         look: {
@@ -29,28 +29,28 @@ const buttonGroupVariants = cva(`
             warning: ""
         },
         rounded: {
-            full: `
-                    rounded-full
-                    [&>button]:first:rounded-ss-full [&>button]:first:rounded-es-full
-                    [&>button]:last:rounded-se-full [&>button]:last:rounded-ee-full
+            full: `
+                    rounded-full
+                    [&>button]:first:rounded-ss-full [&>button]:first:rounded-es-full
+                    [&>button]:last:rounded-se-full [&>button]:last:rounded-ee-full
                 `,
-            large: `
-                    rounded-lg
-                    [&>button]:first:rounded-ss-lg [&>button]:first:rounded-es-lg
-                    [&>button]:last:rounded-se-lg [&>button]:last:rounded-ee-lg
+            large: `
+                    rounded-lg
+                    [&>button]:first:rounded-ss-lg [&>button]:first:rounded-es-lg
+                    [&>button]:last:rounded-se-lg [&>button]:last:rounded-ee-lg
                 `,
-            medium: `
-                    rounded-md
-                    [&>button]:first:rounded-ss-md [&>button]:first:rounded-es-md
-                    [&>button]:last:rounded-se-md [&>button]:last:rounded-ee-md
+            medium: `
+                    rounded-md
+                    [&>button]:first:rounded-ss-md [&>button]:first:rounded-es-md
+                    [&>button]:last:rounded-se-md [&>button]:last:rounded-ee-md
                 `,
-            none: `
-                    rounded-none
+            none: `
+                    rounded-none
                 `,
-            small: `
-                    rounded-sm
-                    [&>button]:first:rounded-ss-sm [&>button]:first:rounded-es-sm
-                    [&>button]:last:rounded-se-sm [&>button]:last:rounded-ee-sm
+            small: `
+                    rounded-sm
+                    [&>button]:first:rounded-ss-sm [&>button]:first:rounded-es-sm
+                    [&>button]:last:rounded-se-sm [&>button]:last:rounded-ee-sm
                 `
         },
         size: {

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

@@ -27,12 +27,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }] });
 
-const buttonVariants = cva(`
-        inline-flex items-center justify-center gap-2
-        text-sm font-medium cursor-pointer whitespace-nowrap
-        outline-none shadow-xs
-        focus-visible:outline-none focus-visible:shadow
-        transition-colors duration-100 ease-in-out
+const buttonVariants = cva(`
+        inline-flex items-center justify-center gap-2
+        text-sm font-medium cursor-pointer whitespace-nowrap
+        outline-none shadow-xs
+        focus-visible:outline-none focus-visible:shadow
+        transition-colors duration-100 ease-in-out
     `, {
     variants: {
         disabled: {
@@ -48,68 +48,68 @@ const buttonVariants = cva(`
             false: ""
         },
         look: {
-            default: `
-                    bg-background text-foreground
-                    border border-input-border
-                    hover:bg-hover active:bg-active
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            default: `
+                    bg-background text-foreground
+                    border border-input-border
+                    hover:bg-hover active:bg-active
+                    focus-visible:ring-2 focus-visible:ring-primary/40
                 `,
-            primary: `
-                    bg-primary text-primary-foreground
-                    hover:bg-primary-hover active:bg-primary-active
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            primary: `
+                    bg-primary text-primary-foreground
+                    hover:bg-primary-hover active:bg-primary-active
+                    focus-visible:ring-2 focus-visible:ring-primary/40
                 `,
-            success: `
-                    bg-success text-success-foreground
-                    hover:bg-success-hover
-                    active:bg-success-active
-                    focus-visible:ring-2 focus-visible:ring-success/40
+            success: `
+                    bg-success text-success-foreground
+                    hover:bg-success-hover
+                    active:bg-success-active
+                    focus-visible:ring-2 focus-visible:ring-success/40
                 `,
-            error: `
-                    bg-error text-error-foreground
-                    hover:bg-error-hover
-                    active:bg-error-active
-                    focus-visible:ring-2 focus-visible:ring-error/40
+            error: `
+                    bg-error text-error-foreground
+                    hover:bg-error-hover
+                    active:bg-error-active
+                    focus-visible:ring-2 focus-visible:ring-error/40
                 `,
-            warning: `
-                    bg-warning text-warning-foreground
-                    hover:bg-warning-hover
-                    active:bg-warning-active
-                    focus-visible:ring-2 focus-visible:ring-warning/40
+            warning: `
+                    bg-warning text-warning-foreground
+                    hover:bg-warning-hover
+                    active:bg-warning-active
+                    focus-visible:ring-2 focus-visible:ring-warning/40
                 `,
-            info: `
-                    bg-info text-info-foreground
-                    hover:bg-info-hover
-                    active:bg-info-active
-                    focus-visible:ring-2 focus-visible:ring-info/40
+            info: `
+                    bg-info text-info-foreground
+                    hover:bg-info-hover
+                    active:bg-info-active
+                    focus-visible:ring-2 focus-visible:ring-info/40
                 `,
-            outline: `
-                    border border-border
-                    hover:bg-accent
-                    active:bg-accent-dark
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            outline: `
+                    border border-border
+                    hover:bg-accent
+                    active:bg-accent-dark
+                    focus-visible:ring-2 focus-visible:ring-primary/40
                 `,
-            secondary: `
-                    bg-secondary text-secondary-foreground
-                    hover:bg-secondary-hover
-                    active:bg-secondary-active
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            secondary: `
+                    bg-secondary text-secondary-foreground
+                    hover:bg-secondary-hover
+                    active:bg-secondary-active
+                    focus-visible:ring-2 focus-visible:ring-primary/40
                 `,
-            ghost: `
-                    shadow-none
-                    hover:bg-secondary-hover
-                    active:bg-secondary-active
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            ghost: `
+                    shadow-none
+                    hover:bg-secondary-hover
+                    active:bg-secondary-active
+                    focus-visible:ring-2 focus-visible:ring-primary/40
                 `,
-            link: `
-                    shadow-none
-                    underline-offset-4 hover:underline
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            link: `
+                    shadow-none
+                    underline-offset-4 hover:underline
+                    focus-visible:ring-2 focus-visible:ring-primary/40
                 `,
-            clear: `
-                    bg-transparent border-0 shadow-none
-                    hover:bg-transparent active:bg-transparent
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            clear: `
+                    bg-transparent border-0 shadow-none
+                    hover:bg-transparent active:bg-transparent
+                    focus-visible:ring-2 focus-visible:ring-primary/40
                 `
         },
         rounded: {
@@ -132,99 +132,99 @@ const buttonVariants = cva(`
         {
             look: "default",
             selected: true,
-            class: `
-                    bg-selected text-foreground
-                     hover:bg-selected/95 hover:text-foreground
-                    active:bg-selected/100 active:text-foreground
+            class: `
+                    bg-selected text-foreground
+                     hover:bg-selected/95 hover:text-foreground
+                    active:bg-selected/100 active:text-foreground
                 `
         },
         {
             look: "primary",
             selected: true,
-            class: `
-                    bg-primary-selected text-primary-foreground
-                    hover:bg-primary-selected/95 hover:text-primary-foreground
-                    active:bg-primary-selected/100 active:text-primary-foreground
+            class: `
+                    bg-primary-selected text-primary-foreground
+                    hover:bg-primary-selected/95 hover:text-primary-foreground
+                    active:bg-primary-selected/100 active:text-primary-foreground
                 `
         },
         {
             look: "secondary",
             selected: true,
-            class: `
-                    bg-secondary-selected text-secondary-foreground
-                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
-                    active:bg-secondary-selected/100 active:text-secondary-foreground
+            class: `
+                    bg-secondary-selected text-secondary-foreground
+                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
+                    active:bg-secondary-selected/100 active:text-secondary-foreground
                 `
         },
         {
             look: "success",
             selected: true,
-            class: `
-                    bg-success-selected text-success-foreground
-                    hover:bg-success-selected/95 hover:text-success-foreground
-                    active:bg-success-selected/100 active:text-success-foreground
+            class: `
+                    bg-success-selected text-success-foreground
+                    hover:bg-success-selected/95 hover:text-success-foreground
+                    active:bg-success-selected/100 active:text-success-foreground
                 `
         },
         {
             look: "error",
             selected: true,
-            class: `
-                    bg-error-selected text-error-foreground
-                    hover:bg-error-selected/95 hover:text-error-foreground
-                    active:bg-error-selected/100 active:text-error-foreground
+            class: `
+                    bg-error-selected text-error-foreground
+                    hover:bg-error-selected/95 hover:text-error-foreground
+                    active:bg-error-selected/100 active:text-error-foreground
                 `
         },
         {
             look: "warning",
             selected: true,
-            class: `
-                    bg-warning-selected text-warning-foreground
-                    hover:bg-warning-selected/95 hover:text-warning-foreground
-                    active:bg-warning-selected/100 active:text-warning-foreground
+            class: `
+                    bg-warning-selected text-warning-foreground
+                    hover:bg-warning-selected/95 hover:text-warning-foreground
+                    active:bg-warning-selected/100 active:text-warning-foreground
                 `
         },
         {
             look: "info",
             selected: true,
-            class: `
-                    bg-info-selected text-info-foreground
-                    hover:bg-info-selected/95 hover:text-info-foreground
-                    active:bg-info-selected/100 active:text-info-foreground
+            class: `
+                    bg-info-selected text-info-foreground
+                    hover:bg-info-selected/95 hover:text-info-foreground
+                    active:bg-info-selected/100 active:text-info-foreground
                 `
         },
         {
             look: "outline",
             selected: true,
-            class: `
-                    bg-primary-selected text-primary-foreground
-                    hover:bg-primary-selected/95 hover:text-primary-foreground
-                    active:bg-primary-selected/100 active:text-primary-foreground
+            class: `
+                    bg-primary-selected text-primary-foreground
+                    hover:bg-primary-selected/95 hover:text-primary-foreground
+                    active:bg-primary-selected/100 active:text-primary-foreground
                 `
         },
         {
             look: "ghost",
             selected: true,
-            class: `
-                    bg-secondary-selected text-secondary-foreground
-                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
-                    active:bg-secondary-selected/100 active:text-secondary-foreground
+            class: `
+                    bg-secondary-selected text-secondary-foreground
+                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
+                    active:bg-secondary-selected/100 active:text-secondary-foreground
                 `
         },
         {
             look: "link",
             selected: true,
-            class: `
-                    bg-secondary-selected text-secondary-foreground
-                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
-                    active:bg-secondary-selected/100 active:text-secondary-foreground
+            class: `
+                    bg-secondary-selected text-secondary-foreground
+                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
+                    active:bg-secondary-selected/100 active:text-secondary-foreground
                 `
         },
         {
             look: "clear",
             selected: true,
-            class: `
-                    bg-transparent border-0
-                    hover:bg-transparent active:bg-transparent
+            class: `
+                    bg-transparent border-0
+                    hover:bg-transparent active:bg-transparent
                 `
         },
         {
@@ -282,6 +282,8 @@ class ButtonDirective {
         this.#themeService = inject(ThemeService);
         this.#loaderComponentRef = null;
         this.#toggleSubscription = null;
+        this.displaysPressedState = computed(() => this.isInButtonGroup() || !!this.toggleable(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displaysPressedState" }] : /* istanbul ignore next */ []));
         this.effectiveDisabled = computed(() => this.#buttonService?.groupDisabled() || this.disabled(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
         this.effectiveLook = computed(() => this.#buttonService?.groupLook() ?? this.look(), /* @ts-ignore */
@@ -290,7 +292,7 @@ class ButtonDirective {
         ...(ngDevMode ? [{ debugName: "effectiveRounded" }] : /* istanbul ignore next */ []));
         this.effectiveSize = computed(() => this.#buttonService?.groupSize() ?? this.size(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
-        this.effectiveToggleable = computed(() => this.isInButtonGroup() || this.toggleable(), /* @ts-ignore */
+        this.effectiveToggleable = computed(() => this.toggleable() ?? this.isInButtonGroup(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveToggleable" }] : /* istanbul ignore next */ []));
         this.isInButtonGroup = computed(() => !!this.#buttonService, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isInButtonGroup" }] : /* istanbul ignore next */ []));
@@ -385,10 +387,10 @@ class ButtonDirective {
         /**
          * @description Enables toggle behavior — each click flips the `selected` state and `aria-pressed` is managed.
          * Must use `[toggleable]="true"` binding syntax, not bare attribute form.
-         * @default false
+         * @default undefined
          */
-        this.toggleable = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "toggleable" }] : /* istanbul ignore next */ []));
+        this.toggleable = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "toggleable" }] : /* istanbul ignore next */ []));
         /**
          * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
          * @default ""
@@ -464,7 +466,7 @@ class ButtonDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ButtonDirective, isStandalone: true, selector: "button[monaButton]", inputs: { ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "aria-haspopup", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", loading: "loadingChange", look: "lookChange", selected: "selectedChange" }, host: { properties: { "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-disabled": "effectiveDisabled() || loading() ? 'true' : undefined", "attr.aria-haspopup": "ariaHasPopup() !== 'false' ? ariaHasPopup() : null", "attr.aria-pressed": "effectiveToggleable() ? (selected() ? 'true' : 'false') : undefined", "attr.data-look": "effectiveLook()", "attr.data-size": "effectiveSize()", "attr.disabled": "effectiveDisabled() || loading() ? '' : undefined", "attr.tabindex": "effectiveDisabled() || loading() ? -1 : tabindex()", "attr.type": "'button'", "class": "baseClass()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ButtonDirective, isStandalone: true, selector: "button[monaButton]", inputs: { ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "aria-haspopup", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", loading: "loadingChange", look: "lookChange", selected: "selectedChange" }, host: { properties: { "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-disabled": "effectiveDisabled() || loading() ? 'true' : undefined", "attr.aria-haspopup": "ariaHasPopup() !== 'false' ? ariaHasPopup() : null", "attr.aria-pressed": "displaysPressedState() ? (selected() ? 'true' : 'false') : undefined", "attr.data-look": "effectiveLook()", "attr.data-size": "effectiveSize()", "attr.disabled": "effectiveDisabled() || loading() ? '' : undefined", "attr.tabindex": "effectiveDisabled() || loading() ? -1 : tabindex()", "attr.type": "'button'", "class": "baseClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
@@ -474,7 +476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-busy]": "loading() ? 'true' : undefined",
                         "[attr.aria-disabled]": "effectiveDisabled() || loading() ? 'true' : undefined",
                         "[attr.aria-haspopup]": "ariaHasPopup() !== 'false' ? ariaHasPopup() : null",
-                        "[attr.aria-pressed]": "effectiveToggleable() ? (selected() ? 'true' : 'false') : undefined",
+                        "[attr.aria-pressed]": "displaysPressedState() ? (selected() ? 'true' : 'false') : undefined",
                         "[attr.data-look]": "effectiveLook()",
                         "[attr.data-size]": "effectiveSize()",
                         "[attr.disabled]": "effectiveDisabled() || loading() ? '' : undefined",