@nanahoshi/mona-ui 0.24.1 → 0.24.2

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

@@ -1,9 +1,15 @@
 import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantInputs } from '@nanahoshi/mona-ui/internal';
 import { VariantProps } from 'class-variance-authority';
 import { Subject } from 'rxjs';
 
+/**
+ * Values accepted by the `aria-haspopup` input of `ButtonDirective`. `"false"` (the default) omits the attribute.
+ */
+type ButtonAriaHasPopup = "dialog" | "false" | "grid" | "listbox" | "menu" | "tree" | "true";
+
 declare const buttonThemeVariants: (props?: ({
     disabled?: boolean | null | undefined;
     iconOnly?: boolean | null | undefined;
@@ -18,41 +24,44 @@ type ButtonVariantsInput = VariantInputs<ButtonVariantProps>;
 
 declare class ButtonDirective implements ButtonVariantsInput {
     #private;
-    protected readonly displaysPressedState: _angular_core.Signal<boolean>;
+    protected readonly baseClass: _angular_core.Signal<string>;
     protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
     protected readonly effectiveLook: _angular_core.Signal<"default" | "primary" | "success" | "error" | "warning" | "info" | "outline" | "secondary" | "ghost" | "link" | "clear" | null | undefined>;
     protected readonly effectiveRounded: _angular_core.Signal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
     protected readonly effectiveSize: _angular_core.Signal<"large" | "medium" | "small" | null | undefined>;
     protected readonly effectiveToggleable: _angular_core.Signal<boolean>;
-    protected readonly isInButtonGroup: _angular_core.Signal<boolean>;
-    protected readonly baseClass: _angular_core.Signal<string>;
     protected readonly loadingSize: _angular_core.Signal<12 | 16 | 14>;
     /**
      * @description Value forwarded to the `aria-haspopup` attribute. Set when this button triggers a popup, menu,
      * listbox, tree, grid, or dialog. Omit or leave as `"false"` for plain action buttons.
      * @default "false"
      */
-    readonly ariaHasPopup: _angular_core.InputSignal<string>;
+    readonly ariaHasPopup: _angular_core.InputSignal<ButtonAriaHasPopup>;
     /**
      * @description Renders the component with reduced visual emphasis and removes pointer interaction.
-     * When inside a `ButtonGroup`, the group's disabled state takes precedence.
+     * Accepts the bare attribute form (`<button monaButton disabled>`).
+     * When inside a `ButtonGroup`, the button is disabled when either it or the group is disabled.
      * @default false
      */
-    readonly disabled: _angular_core.ModelSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Removes horizontal padding and fixes a square aspect ratio sized to match `size`.
-     * Provide `aria-label` on the host when using icon-only buttons.
+     * Provide `aria-label` on the host when using icon-only buttons; in dev mode, an icon-only button without an
+     * accessible name logs a warning.
      * @default false
      */
-    readonly iconOnly: _angular_core.InputSignal<boolean>;
+    readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Displays a loading indicator and prevents interaction while an operation is in progress.
-     * Sets `aria-busy="true"` on the host.
+     * Sets `aria-busy="true"` and `aria-disabled="true"` on the host. The button stays focusable, so keyboard focus
+     * isn't lost when loading starts, and clicks (including form submission) are blocked until it ends.
      * @default false
      */
-    readonly loading: _angular_core.ModelSignal<boolean>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Visual style variant of the button. When inside a `ButtonGroup`, the group's look takes precedence.
+     * `"outline"` looks the same as `"default"`. `"clear"` shows no selected state, so use another look for
+     * toggle buttons.
      * @default "default"
      */
     readonly look: _angular_core.ModelSignal<"default" | "primary" | "success" | "error" | "warning" | "info" | "outline" | "secondary" | "ghost" | "link" | "clear" | null | undefined>;
@@ -75,23 +84,23 @@ declare class ButtonDirective implements ButtonVariantsInput {
      */
     readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
     /**
-     * @description Tab index of the host element. Automatically overridden to `-1` when the button is disabled or loading.
-     * Accepts a numeric string and converts it to a number.
+     * @description Tab index of the host element. Automatically overridden to `-1` when the button is disabled.
+     * Accepts a numeric string and converts it to a number; a value that is not a number falls back to `0`.
      * @default 0
      */
     readonly tabindex: _angular_core.InputSignalWithTransform<number, string | number>;
+    /**
+     * @description Enables toggle behavior — each click flips the `selected` state and `aria-pressed` is managed.
+     * Accepts the bare attribute form. Buttons in a `ButtonGroup` are toggleable unless this is set to `false`.
+     * @default undefined
+     */
+    readonly toggleable: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
     /**
      * @description Native `type` attribute of the button. Defaults to `"button"` to prevent accidental
      * form submission; set to `"submit"` or `"reset"` explicitly when that behavior is intended.
      * @default "button"
      */
     readonly type: _angular_core.InputSignal<"button" | "reset" | "submit">;
-    /**
-     * @description Enables toggle behavior — each click flips the `selected` state and `aria-pressed` is managed.
-     * Must use `[toggleable]="true"` binding syntax, not bare attribute form.
-     * @default undefined
-     */
-    readonly toggleable: _angular_core.InputSignal<boolean | undefined>;
     /**
      * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
      * @default ""
@@ -99,19 +108,34 @@ declare class ButtonDirective implements ButtonVariantsInput {
     readonly userClass: _angular_core.InputSignal<string>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ButtonDirective, "button[monaButton]", never, { "ariaHasPopup": { "alias": "aria-haspopup"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "loading": "loadingChange"; "look": "lookChange"; "selected": "selectedChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ButtonDirective, "button[monaButton]", never, { "ariaHasPopup": { "alias": "aria-haspopup"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "look": "lookChange"; "selected": "selectedChange"; }, never, never, true, never>;
 }
 
+/**
+ * Coordinates a `mona-button-group` with its buttons: the group publishes its look, size, rounding, disabled state
+ * and members here, and buttons report clicks and receive selection changes through it. It is public so the
+ * button-group entry point can provide it; applications don't need to use it directly.
+ */
 declare class ButtonService {
+    #private;
     readonly buttonClick$: Subject<[ButtonDirective, boolean]>;
     readonly buttonSelect$: Subject<[ButtonDirective, boolean]>;
     readonly groupDisabled: _angular_core.WritableSignal<boolean>;
     readonly groupLook: _angular_core.WritableSignal<"default" | "primary" | "success" | "error" | "warning" | "info" | "outline" | "secondary" | "ghost" | "link" | "clear" | null | undefined>;
     readonly groupRounded: _angular_core.WritableSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
     readonly groupSize: _angular_core.WritableSignal<"large" | "medium" | "small" | null | undefined>;
+    /**
+     * The buttons that belong to the group. Only these follow the group's look, size, rounding, disabled state and
+     * selection; other buttons that can inject this service ignore it.
+     */
+    readonly members: Signal<readonly ButtonDirective[]>;
+    /**
+     * Sets the source of the group's members, such as the group's `contentChildren(ButtonDirective)` query.
+     */
+    setMembers(members: Signal<readonly ButtonDirective[]>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ButtonService>;
 }
 
 export { ButtonDirective, ButtonService };
-export type { ButtonVariantProps, ButtonVariantsInput };
+export type { ButtonAriaHasPopup, ButtonVariantProps, ButtonVariantsInput };