@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -2,55 +2,56 @@ import * as i0 from '@angular/core';
 import { inject, DestroyRef, computed, contentChildren, input, model, effect, untracked, afterNextRender, Component } from '@angular/core';
 import { outputFromObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { ButtonService, ButtonDirective } from '@nanahoshi/mona-ui/button';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 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 buttonGroupThemeVariants = cva(`
+        inline-flex items-center justify-center
+        border border-input-border
+        [&>button]:border-0
+        [&>button]:shadow-none
+        [&>button:not(:last-child)]:border-r
+        [&>button:not(:last-child)]:border-border-subtle
+        [&>button]:rounded-none
+        [&>button]:focus-visible:ring-2
+        [&>button]:focus-visible:z-10
     `, {
     variants: {
         look: {
             default: "",
-            error: "",
-            ghost: "border-transparent",
-            info: "",
-            outline: "[&>button:not(:last-child)]:border-r",
-            primary: "",
-            secondary: "",
-            success: "",
-            warning: ""
+            error: "border-transparent",
+            ghost: "border-transparent [&>button:not(:last-child)]:border-r-0",
+            info: "border-transparent",
+            outline: "",
+            primary: "border-transparent",
+            secondary: "border-transparent",
+            success: "border-transparent",
+            warning: "border-transparent"
         },
         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: {
@@ -65,29 +66,17 @@ const buttonGroupVariants = cva(`
     }
 });
 
-const buttonGroupThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return buttonGroupVariants;
-        default:
-            return buttonGroupVariants;
-    }
-};
-
 class ButtonGroupComponent {
     #buttonService;
     #destroyRef;
-    #themeService;
     constructor() {
         this.#buttonService = inject(ButtonService, { self: true });
         this.#destroyRef = inject(DestroyRef);
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const look = this.look();
             const rounded = this.rounded();
             const size = this.size();
-            const variantClasses = buttonGroupThemeVariants(theme)({ look, rounded, size });
+            const variantClasses = buttonGroupThemeVariants({ look, rounded, size });
             const userClass = this.userClass();
             return twMerge(variantClasses, userClass);
         }, /* @ts-ignore */

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

@@ -2,10 +2,10 @@ import * as i0 from '@angular/core';
 import { signal, Injectable, inject, ApplicationRef, DestroyRef, ElementRef, Injector, Renderer2, computed, input, model, effect, untracked, afterNextRender, createComponent, Directive } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { Subject, fromEvent, takeWhile } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
+import { themeControlSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 class ButtonService {
     constructor() {
@@ -27,16 +27,20 @@ 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 buttonThemeVariants = cva(`
+        inline-flex items-center justify-center gap-2
+        cursor-pointer whitespace-nowrap
+        text-sm font-medium
+        outline-none
+        transition-colors duration-100 ease-in-out
     `, {
     variants: {
         disabled: {
-            true: "pointer-events-none opacity-50 cursor-not-allowed select-none",
+            true: `
+                    pointer-events-none cursor-not-allowed select-none
+                    disabled:border-disabled-border disabled:bg-disabled-background disabled:text-disabled-foreground
+                    disabled:shadow-none
+                `,
             false: ""
         },
         iconOnly: {
@@ -48,68 +52,70 @@ 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: `
+                    ${themeControlSurfaceClasses} text-foreground
+                    border border-input-border
+                    hover:bg-hover active:bg-active
+                    focus-visible:border-focus-indicator focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
-            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-focus-indicator/35
                 `,
-            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/35
                 `,
-            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/35
                 `,
-            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/35
                 `,
-            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/35
                 `,
-            outline: `
-                    border border-border
-                    hover:bg-accent
-                    active:bg-accent-dark
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            outline: `
+                    ${themeControlSurfaceClasses} text-foreground
+                    border border-input-border
+                    hover:bg-hover active:bg-active
+                    focus-visible:border-focus-indicator focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
-            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-focus-indicator/35
                 `,
-            ghost: `
-                    shadow-none
-                    hover:bg-secondary-hover
-                    active:bg-secondary-active
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            ghost: `
+                    bg-transparent text-foreground
+                    shadow-none
+                    hover:bg-hover active:bg-active
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
-            link: `
-                    shadow-none
-                    underline-offset-4 hover:underline
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            link: `
+                    bg-transparent text-foreground
+                    shadow-none
+                    underline-offset-4 hover:underline
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
-            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-focus-indicator/35
                 `
         },
         rounded: {
@@ -120,130 +126,135 @@ const buttonVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            large: "px-6 h-10",
-            medium: "px-4 h-9",
-            small: "px-3 text-xs h-8"
+            large: "h-10 px-6",
+            medium: "h-9 px-4",
+            small: "h-8 px-3 text-xs"
         },
         selected: {
-            true: "bg-accent text-accent-foreground hover:bg-accent/90 hover:text-accent-foreground"
+            true: ""
         }
     },
     compoundVariants: [
         {
             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-(--color-selected) text-(--color-selected-foreground)
+                    hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground)
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-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 hover:text-primary-foreground
+                    active:bg-primary-active 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 hover:text-secondary-foreground
+                    active:bg-secondary-active 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 hover:text-success-foreground
+                    active:bg-success-active 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 hover:text-error-foreground
+                    active:bg-error-active 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 hover:text-warning-foreground
+                    active:bg-warning-active 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 hover:text-info-foreground
+                    active:bg-info-active 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-(--color-selected) text-(--color-selected-foreground)
+                    hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground)
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-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-(--color-selected) text-(--color-selected-foreground)
+                    hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground)
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-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-(--color-selected) text-(--color-selected-foreground)
+                    hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground)
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-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
                 `
         },
+        {
+            disabled: true,
+            look: "ghost",
+            class: "disabled:bg-transparent disabled:text-disabled-foreground"
+        },
         {
             iconOnly: true,
             loading: false,
             size: "small",
-            class: "w-8 h-8 p-0"
+            class: "h-8 w-8 p-0"
         },
         {
             iconOnly: true,
             loading: false,
             size: "medium",
-            class: "w-9 h-9 p-0"
+            class: "h-9 w-9 p-0"
         },
         {
             iconOnly: true,
             loading: false,
             size: "large",
-            class: "w-10 h-10 p-0"
+            class: "h-10 w-10 p-0"
         }
     ],
     defaultVariants: {
@@ -253,15 +264,6 @@ const buttonVariants = cva(`
     }
 });
 
-const buttonThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return buttonVariants;
-        default:
-            return buttonVariants;
-    }
-};
-
 class ButtonDirective {
     #appRef;
     #buttonService;
@@ -269,7 +271,6 @@ class ButtonDirective {
     #hostElementRef;
     #injector;
     #renderer;
-    #themeService;
     #loaderComponentRef;
     #toggleSubscription;
     constructor() {
@@ -279,9 +280,10 @@ class ButtonDirective {
         this.#hostElementRef = inject(ElementRef);
         this.#injector = inject(Injector);
         this.#renderer = inject(Renderer2);
-        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 */ []));
@@ -303,8 +305,7 @@ class ButtonDirective {
             const size = this.effectiveSize();
             const selected = this.selected();
             const userClass = this.userClass();
-            const theme = this.#themeService.theme();
-            const variants = buttonThemeVariants(theme);
+            const variants = buttonThemeVariants;
             const variantClasses = variants({ disabled, iconOnly, loading, look, rounded, selected, size });
             return twMerge(variantClasses, userClass);
         }, /* @ts-ignore */
@@ -385,10 +386,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 +465,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 +475,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",