@nanahoshi/mona-ui 0.18.5 → 0.19.0

package/fesm2022/nanahoshi-mona-ui-check-box.mjs

@@ -8,7 +8,7 @@ import { themeControlSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 const checkboxInputThemeVariants = cva(`sr-only appearance-none outline-none peer`);
 const checkmarkThemeVariants = cva(`
         flex items-center justify-center
-        h-4.5 w-4.5 pl-0.25
+        h-4.5 w-4.5 ps-0.25
         cursor-pointer overflow-hidden
         ${themeControlSurfaceClasses}
         border border-input-border

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

@@ -2,13 +2,19 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Directive, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, input, output, model, afterNextRender, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { RouterLink } from '@angular/router';
 import { LucideCircleX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { fromEvent, filter } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { themeRaisedSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
+const CHIP_DEFAULT_MESSAGES = {
+    removeLabel: (label) => (label ? `Remove, ${label}` : "Remove, item")
+};
+
 /**
  * @description Apply to an `<ng-template>` directly inside `<mona-chip>` to render prefix content
  * (e.g., an avatar or icon) before the chip label or projected content. The template receives no context.
@@ -26,7 +32,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 const chipThemeVariants = cva(`
         inline-flex shrink-0 items-center justify-between gap-1.5
-        cursor-pointer text-xs font-medium
+        text-xs font-medium
         shadow-(--shadow-control) outline-none
         transition-colors duration-(--mona-motion-fast) ease-in-out
     `, {
@@ -35,63 +41,23 @@ const chipThemeVariants = cva(`
             true: "pointer-events-none opacity-50 cursor-not-allowed select-none",
             false: ""
         },
+        interactive: {
+            true: "cursor-pointer",
+            false: ""
+        },
         look: {
             default: `
                     ${themeRaisedSurfaceClasses} text-foreground
                     border border-border
-                    hover:bg-hover hover:text-foreground
-                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
-                `,
-            primary: `
-                    bg-primary text-primary-foreground
-                    hover:bg-primary-hover hover:text-primary-foreground
-                    active:bg-primary-active active:text-primary-foreground
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
-            success: `
-                    bg-success text-success-foreground
-                    hover:bg-success-hover hover:text-success-foreground
-                    active:bg-success-active active:text-success-foreground
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
-                `,
-            error: `
-                    bg-error text-error-foreground
-                    hover:bg-error-hover hover:text-error-foreground
-                    active:bg-error-active active:text-error-foreground
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
-                `,
-            warning: `
-                    bg-warning text-warning-foreground
-                    hover:bg-warning-hover hover:text-warning-foreground
-                    active:bg-warning-active active:text-warning-foreground
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
-                `,
-            info: `
-                    bg-info text-info-foreground
-                    hover:bg-info-hover hover:text-info-foreground
-                    active:bg-info-active active:text-info-foreground
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
-                `,
-            outline: `
-                    bg-transparent text-foreground
-                    border border-input-border
-                    hover:bg-hover hover:text-foreground
-                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
-                `,
-            secondary: `
-                    bg-secondary text-secondary-foreground
-                    hover:bg-secondary-hover hover:text-secondary-foreground
-                    active:bg-secondary-active active:text-secondary-foreground
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
-                `,
-            ghost: `
-                    bg-transparent text-foreground shadow-none
-                    hover:bg-hover hover:text-foreground
-                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
-                `
+            primary: "bg-primary text-primary-foreground",
+            success: "bg-success text-success-foreground",
+            error: "bg-error text-error-foreground",
+            warning: "bg-warning text-warning-foreground",
+            info: "bg-info text-info-foreground",
+            outline: "bg-transparent text-foreground border border-input-border",
+            secondary: "bg-secondary text-secondary-foreground",
+            ghost: "bg-transparent text-foreground shadow-none"
         },
         rounded: {
             full: "rounded-full",
@@ -102,17 +68,17 @@ const chipThemeVariants = cva(`
         },
         size: {
             small: `
-                    ps-1 pe-1 py-0.5
+                    px-1 py-0.5
                     [&_button[data-chip-remove='true']]:w-3
                     [&_button[data-chip-remove='true']]:h-3
                 `,
             medium: `
-                    ps-1.5 pe-1.5 py-1
+                    px-1.5 py-1
                     [&_button[data-chip-remove='true']]:w-4
                     [&_button[data-chip-remove='true']]:h-4
                 `,
             large: `
-                    ps-2 pe-2 py-1.5
+                    px-2 py-1.5
                     [&_button[data-chip-remove='true']]:w-5
                     [&_button[data-chip-remove='true']]:h-5
                 `
@@ -126,86 +92,231 @@ const chipThemeVariants = cva(`
         {
             look: "default",
             selected: true,
+            class: "bg-(--color-selected) text-(--color-selected-foreground)"
+        },
+        {
+            look: "primary",
+            selected: true,
+            class: "bg-primary-selected text-primary-foreground"
+        },
+        {
+            look: "secondary",
+            selected: true,
+            class: "bg-secondary-selected text-secondary-foreground"
+        },
+        {
+            look: "success",
+            selected: true,
+            class: "bg-success-selected text-success-foreground"
+        },
+        {
+            look: "error",
+            selected: true,
+            class: "bg-error-selected text-error-foreground"
+        },
+        {
+            look: "warning",
+            selected: true,
+            class: "bg-warning-selected text-warning-foreground"
+        },
+        {
+            look: "info",
+            selected: true,
+            class: "bg-info-selected text-info-foreground"
+        },
+        {
+            look: "outline",
+            selected: true,
+            class: "bg-(--color-selected) text-(--color-selected-foreground)"
+        },
+        {
+            look: "ghost",
+            selected: true,
+            class: "bg-(--color-selected) text-(--color-selected-foreground)"
+        },
+        {
+            look: "default",
+            interactive: true,
+            selected: false,
+            class: `
+                    hover:bg-hover hover:text-foreground
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+                `
+        },
+        {
+            look: "primary",
+            interactive: true,
+            selected: false,
+            class: `
+                    hover:bg-primary-hover hover:text-primary-foreground
+                    active:bg-primary-active active:text-primary-foreground
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+                `
+        },
+        {
+            look: "secondary",
+            interactive: true,
+            selected: false,
+            class: `
+                    hover:bg-secondary-hover hover:text-secondary-foreground
+                    active:bg-secondary-active active:text-secondary-foreground
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+                `
+        },
+        {
+            look: "success",
+            interactive: true,
+            selected: false,
+            class: `
+                    hover:bg-success-hover hover:text-success-foreground
+                    active:bg-success-active active:text-success-foreground
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+                `
+        },
+        {
+            look: "error",
+            interactive: true,
+            selected: false,
+            class: `
+                    hover:bg-error-hover hover:text-error-foreground
+                    active:bg-error-active active:text-error-foreground
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+                `
+        },
+        {
+            look: "warning",
+            interactive: true,
+            selected: false,
+            class: `
+                    hover:bg-warning-hover hover:text-warning-foreground
+                    active:bg-warning-active active:text-warning-foreground
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+                `
+        },
+        {
+            look: "info",
+            interactive: true,
+            selected: false,
+            class: `
+                    hover:bg-info-hover hover:text-info-foreground
+                    active:bg-info-active active:text-info-foreground
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+                `
+        },
+        {
+            look: "outline",
+            interactive: true,
+            selected: false,
+            class: `
+                    hover:bg-hover hover:text-foreground
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+                `
+        },
+        {
+            look: "ghost",
+            interactive: true,
+            selected: false,
+            class: `
+                    hover:bg-hover hover:text-foreground
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+                `
+        },
+        {
+            look: "default",
+            interactive: true,
+            selected: true,
             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)
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `
         },
         {
             look: "primary",
+            interactive: true,
             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
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `
         },
         {
             look: "secondary",
+            interactive: true,
             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
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `
         },
         {
             look: "success",
+            interactive: true,
             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
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `
         },
         {
             look: "error",
+            interactive: true,
             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
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `
         },
         {
             look: "warning",
+            interactive: true,
             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
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `
         },
         {
             look: "info",
+            interactive: true,
             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
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `
         },
         {
             look: "outline",
+            interactive: true,
             selected: true,
             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)
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `
         },
         {
             look: "ghost",
+            interactive: true,
             selected: true,
             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)
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `
         }
     ],
     defaultVariants: {
+        interactive: false,
         rounded: "medium",
         selected: false
     }
@@ -214,9 +325,13 @@ const chipThemeVariants = cva(`
 class ChipComponent {
     #destroyRef;
     #elementRef;
+    #i18n;
+    #routerLink;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
+        this.#routerLink = inject(RouterLink, { optional: true });
         this.ariaChecked = computed(() => {
             if (!this.toggleable()) {
                 return undefined;
@@ -226,15 +341,18 @@ class ChipComponent {
         ...(ngDevMode ? [{ debugName: "ariaChecked" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
             const disabled = this.disabled();
+            const interactive = this.bodyInteractive();
             const look = this.look();
             const rounded = this.rounded();
             const size = this.size();
             const selected = this.selected();
             const userClass = this.userClass();
-            const variantClasses = chipThemeVariants({ disabled, look, rounded, size, selected });
+            const variantClasses = chipThemeVariants({ disabled, interactive, look, rounded, size, selected });
             return twMerge(variantClasses, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.bodyInteractive = computed(() => !this.disabled() && (this.toggleable() || this.isLink()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bodyInteractive" }] : /* istanbul ignore next */ []));
         this.effectiveAriaLabel = computed(() => {
             const explicitLabel = this.ariaLabel();
             if (explicitLabel) {
@@ -255,7 +373,7 @@ class ChipComponent {
             if (explicitTabindex != null) {
                 return explicitTabindex;
             }
-            if (this.toggleable() || this.removable()) {
+            if (this.toggleable() || this.isLink()) {
                 return 0;
             }
             return -1;
@@ -275,6 +393,9 @@ class ChipComponent {
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+        this.isLink = computed(() => !!this.#routerLink, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLink" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("chip", CHIP_DEFAULT_MESSAGES);
         this.prefixTemplate = contentChild(ChipPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.role = computed(() => {
             if (this.toggleable()) {
@@ -290,8 +411,8 @@ class ChipComponent {
          */
         this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
         /**
-         * @description Emitted when the chip body is clicked or activated via Enter or Space.
-         * Not emitted when the remove button is activated.
+         * @description Emitted when a toggleable chip body is activated via click, Enter, or Space.
+         * Not emitted when the remove button is activated or for non-toggleable chips.
          */
         this.contentClick = output();
         /**
@@ -358,7 +479,7 @@ class ChipComponent {
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
          * @description Tab index override for the chip host element. When not set, computed automatically:
-         * `0` when `toggleable` or `removable` is `true`, `-1` otherwise. Overridden to `-1` when `disabled` is `true`.
+         * `0` when `toggleable` is `true` or functioning as a link, `-1` otherwise. Overridden to `-1` when `disabled` is `true`.
          * @default undefined
          */
         this.tabindex = input(/* @ts-ignore */
@@ -394,15 +515,16 @@ class ChipComponent {
         this.remove.emit(event);
     }
     #handleActivation() {
-        if (this.toggleable()) {
-            this.selected.set(!this.selected());
+        if (!this.toggleable() || this.disabled()) {
+            return;
         }
+        this.selected.set(!this.selected());
         this.contentClick.emit();
     }
     #setSubscriptions() {
         const element = this.#elementRef.nativeElement;
         fromEvent(element, "keydown")
-            .pipe(filter(event => !this.disabled() && (event.key === "Enter" || event.key === " ")), takeUntilDestroyed(this.#destroyRef))
+            .pipe(filter(event => !this.disabled() && this.toggleable() && (event.key === "Enter" || event.key === " ")), takeUntilDestroyed(this.#destroyRef))
             .subscribe(event => {
             const target = event.target;
             if (target.closest("button[data-chip-remove]")) {
@@ -412,13 +534,13 @@ class ChipComponent {
             this.#handleActivation();
         });
         fromEvent(element, "click")
-            .pipe(filter(() => !this.disabled()), takeUntilDestroyed(this.#destroyRef))
+            .pipe(filter(() => !this.disabled() && this.toggleable()), takeUntilDestroyed(this.#destroyRef))
             .subscribe(() => {
             this.#handleActivation();
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChipComponent, isStandalone: true, selector: "mona-chip", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTabIndex: { classPropertyName: "removeTabIndex", publicName: "removeTabIndex", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentClick: "contentClick", remove: "remove", selected: "selectedChange" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "effectiveTabIndex()", "attr.aria-disabled": "disabled() ? 'true' : undefined", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-label": "effectiveAriaLabel()" } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ChipPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? \"Remove, \" + (label() || \"item\");\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChipComponent, isStandalone: true, selector: "mona-chip", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTabIndex: { classPropertyName: "removeTabIndex", publicName: "removeTabIndex", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentClick: "contentClick", remove: "remove", selected: "selectedChange" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "effectiveTabIndex()", "attr.aria-disabled": "disabled() ? 'true' : undefined", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-label": "effectiveAriaLabel()" } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ChipPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? messages().removeLabel(label());\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
@@ -429,7 +551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.role]": "role()",
                         "[attr.aria-checked]": "ariaChecked()",
                         "[attr.aria-label]": "effectiveAriaLabel()"
-                    }, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? \"Remove, \" + (label() || \"item\");\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\n" }]
+                    }, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? messages().removeLabel(label());\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChipPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], contentClick: [{ type: i0.Output, args: ["contentClick"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removeTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeTabIndex", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 /*
@@ -440,5 +562,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ChipComponent, ChipPrefixTemplateDirective };
+export { CHIP_DEFAULT_MESSAGES, ChipComponent, ChipPrefixTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-chip.mjs.map

package/fesm2022/nanahoshi-mona-ui-circular-progress-bar.mjs

@@ -22,9 +22,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 const circularProgressBarBaseThemeVariants = cva(`
         relative flex items-center justify-center select-none
         text-foreground
-        [&_svg]:absolute [&_svg]:top-1/2 [&_svg]:left-1/2
+        [&_svg]:absolute [&_svg]:inset-0
         [&_svg]:h-full [&_svg]:w-full
-        [&_svg]:-translate-x-1/2 [&_svg]:-translate-y-1/2
         [&_svg_circle]:origin-center
         [&_svg_circle]:-rotate-90
         [&_svg_circle]:transition-[stroke-dashoffset,stroke] duration-(--mona-motion-fast) ease-in