@nanahoshi/mona-ui 0.18.5 → 0.19.0

package/README.md

@@ -1,25 +1,83 @@
-# MonaUi
+# Mona UI
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.0.
+A modern, high-performance, accessible UI component library built for Angular and styled with Tailwind CSS.
 
-## Code scaffolding
+---
 
-Run `ng generate component component-name --project mona-ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project mona-ui`.
+## Features
 
-> Note: Don't forget to add `--project mona-ui` or else it will be added to the default project in your `angular.json` file.
+- **Signal-Based State & Reactive Architecture:** First-class Angular Signals architecture for fine-grained reactivity.
+- **Standalone Components:** Designed exclusively with modern Angular standalone components.
+- **Comprehensive Internationalization (i18n):** Zero-config English defaults with full runtime locale switching, typed message namespaces, and message override precedence.
+- **RTL-Ready:** Fully prepared for right-to-left layout direction with CSS Logical Properties and CDK-driven directionality.
+- **High-Grade Accessibility (a11y):** Strict adherence to WCAG AA minimums, dynamic ARIA attributes, and zero AXE violations.
+- **40+ Rich Components:** Data grids, interactive charts, calendar/pickers, rich text editor, scroll view, dialogs, dropdowns, and more.
 
-## Build
+---
 
-Run `ng build mona-ui` to build the project. The build artifacts will be stored in the `dist/` directory.
+## Documentation
 
-## Publishing
+- [Internationalization (i18n) & RTL Guide](docs/i18n.md)
+- [Component Migration Inventory](docs/internal/i18n-rtl-migration-inventory.md)
 
-After building your library with `ng build mona-ui`, go to the dist folder `cd dist/mona-ui` and run `npm publish`.
+---
 
-## Running unit tests
+## Quick Start
 
-Run `ng test mona-ui` to execute the unit tests via [Karma](https://karma-runner.github.io).
+### Installation
 
-## Further help
+```bash
+npm install @nanahoshi/mona-ui
+```
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+### Setup Internationalization
+
+Mona UI works out-of-the-box in English without configuration. To provide a customized locale or configure runtime language switching, import `provideMonaI18n`:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideMonaI18n } from '@nanahoshi/mona-ui/i18n';
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideMonaI18n()
+    ]
+};
+```
+
+For complete details on localization, locale switching, and RTL support, refer to the [i18n & RTL Guide](docs/i18n.md).
+
+---
+
+## Development
+
+### Building the Library
+
+```bash
+npm run build:metadata
+npm run build:prod
+```
+
+### Running Tests
+
+```bash
+# Run unit tests for the component library
+npm run test:lib
+
+# Run unit tests for the tester app
+npm run test:app
+```
+
+### i18n & RTL Quality Audit
+
+Mona UI includes an automated AST-based scanner to verify that no hard-coded English text, static ARIA labels, or physical CSS properties are introduced:
+
+```bash
+npm run audit:i18n-rtl:strict
+```
+
+---
+
+## License
+
+MIT

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

@@ -11,10 +11,15 @@ import { ListService, ListComponent, ListGroupHeaderTemplateDirective, ListFoote
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownSuffixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DropdownPopupInputToken, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
 import { TextBoxDirective } from '@nanahoshi/mona-ui/text-box';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { Subject, filter, debounceTime, identity, take, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+const AUTO_COMPLETE_DEFAULT_MESSAGES = {
+    clear: "Clear"
+};
+
 const autoCompleteBaseThemeVariants = cva(`
         flex
         ${themeControlSurfaceClasses} text-foreground
@@ -95,12 +100,14 @@ class AutoCompleteComponent {
     #destroyRef;
     #dropdownService;
     #hostElementRef;
+    #i18n;
     #listService;
     #popupRef;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#dropdownService = inject(DropdownService);
         this.#hostElementRef = inject((ElementRef));
+        this.#i18n = inject(MonaI18nService);
         this.#listService = inject(ListService);
         this.#popupRef = this.#dropdownService.popupRef;
         this.activeDescendant = computed(() => {
@@ -161,6 +168,7 @@ class AutoCompleteComponent {
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listPopupClass" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("autoComplete", AUTO_COMPLETE_DEFAULT_MESSAGES);
         this.noDataTemplate = contentChild(DropdownNoDataTemplateDirective, { ...(ngDevMode ? { debugName: "noDataTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.popupTemplate = viewChild.required("popupTemplate", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popupTemplate" }] : /* istanbul ignore next */ []));
@@ -518,7 +526,7 @@ class AutoCompleteComponent {
                 useExisting: forwardRef(() => AutoCompleteComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: DropdownSuffixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    role=\"combobox\"\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [ngModel]=\"autoCompleteValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    (ngModelChange)=\"autoCompleteValue$.next($event)\"\n    (blur)=\"onInputBlur()\" />\n\n@if (showClearButton() && autoCompleteValue() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n@if (suffixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n    </span>\n}\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["invalid", "rounded", "size", "touched", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: DropdownSuffixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    role=\"combobox\"\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [ngModel]=\"autoCompleteValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    (ngModelChange)=\"autoCompleteValue$.next($event)\"\n    (blur)=\"onInputBlur()\" />\n\n@if (showClearButton() && autoCompleteValue() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        [label]=\"messages().clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n@if (suffixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n    </span>\n}\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["invalid", "rounded", "size", "touched", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
@@ -558,7 +566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-readonly]": "readonly() || null",
                         "[attr.tabindex]": "-1",
                         "[class]": "baseClass()"
-                    }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    role=\"combobox\"\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [ngModel]=\"autoCompleteValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    (ngModelChange)=\"autoCompleteValue$.next($event)\"\n    (blur)=\"onInputBlur()\" />\n\n@if (showClearButton() && autoCompleteValue() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n@if (suffixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n    </span>\n}\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n" }]
+                    }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    role=\"combobox\"\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [ngModel]=\"autoCompleteValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    (ngModelChange)=\"autoCompleteValue$.next($event)\"\n    (blur)=\"onInputBlur()\" />\n\n@if (showClearButton() && autoCompleteValue() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        [label]=\"messages().clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n@if (suffixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n    </span>\n}\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownGroupHeaderTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], suffixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownSuffixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], highlightFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightFirst", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
@@ -571,5 +579,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AutoCompleteComponent };
+export { AUTO_COMPLETE_DEFAULT_MESSAGES, AutoCompleteComponent };
 //# sourceMappingURL=nanahoshi-mona-ui-auto-complete.mjs.map

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

@@ -1,7 +1,8 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, input, Directive, output, viewChild, TemplateRef, Component, contentChildren, contentChild } from '@angular/core';
+import { computed, input, Directive, output, viewChild, TemplateRef, Component, inject, contentChildren, contentChild } from '@angular/core';
 import { LucideChevronRight } from '@lucide/angular';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -96,6 +97,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+const BREADCRUMB_DEFAULT_MESSAGES = {
+    breadcrumb: "Breadcrumb"
+};
+
 class BreadcrumbItemComponent {
     constructor() {
         /**
@@ -123,12 +128,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class BreadcrumbComponent {
     constructor() {
-        this.itemComponents = contentChildren(BreadcrumbItemComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "itemComponents" }] : /* istanbul ignore next */ []));
+        this.#i18n = inject(MonaI18nService);
         this.currentItemClass = computed(() => {
             return breadcrumbCurrentItemThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentItemClass" }] : /* istanbul ignore next */ []));
+        this.itemComponents = contentChildren(BreadcrumbItemComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemComponents" }] : /* istanbul ignore next */ []));
         this.listClass = computed(() => {
             const disabled = this.disabled();
             const userClass = this.userClass();
@@ -136,13 +142,14 @@ class BreadcrumbComponent {
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("breadcrumb", BREADCRUMB_DEFAULT_MESSAGES);
         this.separatorTemplate = contentChild(BreadcrumbSeparatorTemplateDirective, { ...(ngDevMode ? { debugName: "separatorTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /**
          * @description Accessible name for the breadcrumb navigation landmark.
          * Override when multiple breadcrumb components appear on the same page.
-         * @default "Breadcrumb"
+         * @default ""
          */
-        this.ariaLabel = input("Breadcrumb", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
         /**
          * @description Renders the entire breadcrumb with reduced visual emphasis and removes pointer interaction from all items.
          * @default false
@@ -155,6 +162,7 @@ class BreadcrumbComponent {
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
     }
+    #i18n;
     onItemClick(item) {
         if (this.disabled() || item.disabled()) {
             return;
@@ -162,14 +170,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()\">\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]" }] }); }
+    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() || messages().breadcrumb" } }, 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\" class=\"rtl:rotate-180\"></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()\">\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" }]
+                        "[attr.aria-label]": "ariaLabel() || messages().breadcrumb"
+                    }, 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\" class=\"rtl:rotate-180\"></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 }] }] } });
@@ -182,5 +190,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbSeparatorTemplateDirective };
+export { BREADCRUMB_DEFAULT_MESSAGES, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbSeparatorTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-breadcrumb.mjs.map

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

@@ -2,16 +2,21 @@ 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 { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { map, pairwise } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+const BUTTON_GROUP_DEFAULT_MESSAGES = {
+    buttonGroup: "Button group"
+};
+
 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-e
         [&>button:not(:last-child)]:border-border-subtle
         [&>button]:rounded-none
         [&>button]:focus-visible:ring-2
@@ -21,7 +26,7 @@ const buttonGroupThemeVariants = cva(`
         look: {
             default: "",
             error: "border-transparent",
-            ghost: "border-transparent [&>button:not(:last-child)]:border-r-0",
+            ghost: "border-transparent [&>button:not(:last-child)]:border-e-0",
             info: "border-transparent",
             outline: "",
             primary: "border-transparent",
@@ -69,9 +74,11 @@ const buttonGroupThemeVariants = cva(`
 class ButtonGroupComponent {
     #buttonService;
     #destroyRef;
+    #i18n;
     constructor() {
         this.#buttonService = inject(ButtonService, { self: true });
         this.#destroyRef = inject(DestroyRef);
+        this.#i18n = inject(MonaI18nService);
         this.baseClass = computed(() => {
             const look = this.look();
             const rounded = this.rounded();
@@ -83,6 +90,9 @@ class ButtonGroupComponent {
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.buttons = contentChildren(ButtonDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("buttonGroup", BUTTON_GROUP_DEFAULT_MESSAGES);
+        this.effectiveAriaLabel = computed(() => this.ariaLabel() ?? this.messages().buttonGroup, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
         /**
          * @description When `false` and `selection` is `"single"`, at least one button must remain selected;
          * the active button cannot be deselected. Has no effect in `"multiple"` mode.
@@ -93,9 +103,8 @@ class ButtonGroupComponent {
         /**
          * @description Accessible name for the host element. Override when multiple button groups appear on the same page
          * so screen reader users can distinguish them.
-         * @default "Button group"
          */
-        this.ariaLabel = input("Button group", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        this.ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
         /**
          * @description Emitted when any child button in the group is clicked.
          * Use `[(selected)]` on child buttons to observe the resulting selection state.
@@ -191,12 +200,12 @@ class ButtonGroupComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: ButtonGroupComponent, isStandalone: true, selector: "mona-button-group", inputs: { allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", disabled: "disabledChange", selection: "selectionChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()", "class": "baseClass()" } }, providers: [ButtonService], queries: [{ propertyName: "buttons", predicate: ButtonDirective, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[monaButton]\"></ng-content>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: ButtonGroupComponent, isStandalone: true, selector: "mona-button-group", inputs: { allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", disabled: "disabledChange", selection: "selectionChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "effectiveAriaLabel()", "class": "baseClass()" } }, providers: [ButtonService], queries: [{ propertyName: "buttons", predicate: ButtonDirective, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[monaButton]\"></ng-content>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-button-group", providers: [ButtonService], host: {
-                        "[attr.aria-label]": "ariaLabel()",
+                        "[attr.aria-label]": "effectiveAriaLabel()",
                         "[class]": "baseClass()",
                         role: "group"
                     }, template: "<ng-content select=\"[monaButton]\"></ng-content>\n" }]
@@ -210,5 +219,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonGroupComponent };
+export { BUTTON_GROUP_DEFAULT_MESSAGES, ButtonGroupComponent };
 //# sourceMappingURL=nanahoshi-mona-ui-button-group.mjs.map