@nanahoshi/mona-ui 0.18.5 → 0.19.0

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

@@ -1,12 +1,18 @@
 import * as i0 from '@angular/core';
-import { computed, input, Component, output, inject, ApplicationRef, DOCUMENT, Injector, RendererFactory2, createComponent, Injectable } from '@angular/core';
+import { inject, computed, input, Component, output, ApplicationRef, DOCUMENT, Injector, RendererFactory2, createComponent, Injectable } from '@angular/core';
 import { LucideLoader, LucideDynamicIcon } from '@lucide/angular';
 import { classInputToClass } from '@nanahoshi/mona-ui/common';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { Subject, defer, finalize } from 'rxjs';
 import { v4 } from 'uuid';
 
+const SPINNER_DEFAULT_MESSAGES = {
+    cancel: "Cancel",
+    loading: "Loading"
+};
+
 const spinnerThemeVariants = cva("inline-flex items-center justify-center flex-none aspect-square relative text-current select-none", {
     variants: {
         size: {
@@ -27,12 +33,14 @@ const spinnerThemeVariants = cva("inline-flex items-center justify-center flex-n
  */
 class SpinnerComponent {
     constructor() {
+        this.#i18n = inject(MonaI18nService);
         this.baseClass = computed(() => {
             const variantClass = spinnerThemeVariants({ size: this.size() });
             return twMerge(variantClass, this.userClass());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.loaderIcon = LucideLoader;
+        this.messages = this.#i18n.componentMessages("spinner", SPINNER_DEFAULT_MESSAGES);
         this.pixelSize = computed(() => {
             switch (this.size()) {
                 case "small":
@@ -53,9 +61,10 @@ class SpinnerComponent {
         ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
         /**
          * @description Accessible text announced by assistive technology when the spinner is not decorative.
-         * @default "Loading"
+         * When not set, falls back to the localized loading text.
+         * @default undefined
          */
-        this.ariaLabel = input("Loading", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        this.ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
         /**
          * @description When `true`, removes the `status` role and hides the spinner from assistive technology with `aria-hidden="true"`.
          * Useful when a parent element already manages loading semantics (such as `aria-busy="true"` on a button).
@@ -76,14 +85,15 @@ class SpinnerComponent {
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
             transform: value => classInputToClass(value) });
     }
+    #i18n;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SpinnerComponent, isStandalone: true, selector: "mona-spinner", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", 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 } }, host: { properties: { "attr.aria-hidden": "decorative() ? 'true' : null", "attr.aria-label": "decorative() ? null : (ariaLabel() || 'Loading')", "attr.role": "decorative() ? null : 'status'", "class": "baseClass()" } }, ngImport: i0, template: "@switch (appearance()) {\n    @case (\"default\") {\n        <svg [lucideIcon]=\"loaderIcon\" [size]=\"pixelSize()\" class=\"animate-[spin_1.5s_linear_infinite] motion-reduce:animate-none\"></svg>\n    }\n    @case (\"pulsing\") {\n        <span class=\"mona-spinner-pulsing-container\">\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-2\"></span>\n        </span>\n    }\n    @case (\"pulsing-triad\") {\n        <span class=\"mona-spinner-pulsing-triad-container\">\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-3\"></span>\n        </span>\n    }\n    @case (\"pulsing-ring\") {\n        <span class=\"mona-spinner-pulsing-ring-container\">\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-3\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-4\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-5\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-6\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-7\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-8\"></span>\n        </span>\n    }\n    @case (\"converging-spinner\") {\n        <span class=\"mona-spinner-converge-container\">\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-1\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-2\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-3\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-4\"></span>\n        </span>\n    }\n}\n", styles: [":host{display:inline-flex;vertical-align:middle}.mona-spinner-pulsing-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.mona-spinner-pulsing-segment{position:absolute;inset:0;border-radius:9999px;background-color:currentColor;opacity:.6;animation:mona-spinner-pulse 1.2s cubic-bezier(0,.2,.8,1) infinite}.mona-spinner-pulsing-2{animation-delay:-.6s}@keyframes mona-spinner-pulse{0%{transform:scale(.1);opacity:.9}50%{transform:scale(.6);opacity:.5}to{transform:scale(1);opacity:0}}.mona-spinner-pulsing-triad-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-triad-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.4s ease-in-out infinite}.mona-spinner-pulsing-triad-1{top:0;left:34%;animation-delay:-.933s}.mona-spinner-pulsing-triad-2{bottom:0;left:0;animation-delay:-.467s}.mona-spinner-pulsing-triad-3{bottom:0;right:0;animation-delay:0s}@keyframes mona-spinner-dot-pulse{0%,to{transform:scale(.4);opacity:.4}50%{transform:scale(1);opacity:1}}.mona-spinner-pulsing-ring-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-ring-segment{position:absolute;width:22%;height:22%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.6s ease-in-out infinite}.mona-spinner-pulsing-ring-1{top:5%;left:39%;animation-delay:0s}.mona-spinner-pulsing-ring-2{top:14.96%;left:63.04%;animation-delay:-.2s}.mona-spinner-pulsing-ring-3{top:39%;left:73%;animation-delay:-.4s}.mona-spinner-pulsing-ring-4{top:63.04%;left:63.04%;animation-delay:-.6s}.mona-spinner-pulsing-ring-5{top:73%;left:39%;animation-delay:-.8s}.mona-spinner-pulsing-ring-6{top:63.04%;left:14.96%;animation-delay:-1s}.mona-spinner-pulsing-ring-7{top:39%;left:5%;animation-delay:-1.2s}.mona-spinner-pulsing-ring-8{top:14.96%;left:14.96%;animation-delay:-1.4s}.mona-spinner-converge-container{position:relative;width:100%;height:100%;animation:mona-spinner-rotate 1.5s linear infinite}.mona-spinner-converge-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-converge 1.5s ease-in-out infinite}.mona-spinner-converge-1{top:0;left:0}.mona-spinner-converge-2{top:0;right:0}.mona-spinner-converge-3{bottom:0;right:0}.mona-spinner-converge-4{bottom:0;left:0}@keyframes mona-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes mona-spinner-converge{0%,to{transform:scale(1)}50%{transform:scale(.4)}}@media(prefers-reduced-motion:reduce){.mona-spinner-pulsing-segment,.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment,.mona-spinner-converge-container,.mona-spinner-converge-segment{animation:none!important}.mona-spinner-pulsing-segment{opacity:.6;transform:scale(.85)}.mona-spinner-pulsing-2{opacity:.3;transform:scale(.5)}.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment{opacity:.7;transform:scale(.8)}}\n"], dependencies: [{ kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SpinnerComponent, isStandalone: true, selector: "mona-spinner", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", 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 } }, host: { properties: { "attr.aria-hidden": "decorative() ? 'true' : null", "attr.aria-label": "decorative() ? null : (ariaLabel() || messages().loading)", "attr.role": "decorative() ? null : 'status'", "class": "baseClass()" } }, ngImport: i0, template: "@switch (appearance()) {\n    @case (\"default\") {\n        <svg [lucideIcon]=\"loaderIcon\" [size]=\"pixelSize()\" class=\"animate-[spin_1.5s_linear_infinite] motion-reduce:animate-none\"></svg>\n    }\n    @case (\"pulsing\") {\n        <span class=\"mona-spinner-pulsing-container\">\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-2\"></span>\n        </span>\n    }\n    @case (\"pulsing-triad\") {\n        <span class=\"mona-spinner-pulsing-triad-container\">\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-3\"></span>\n        </span>\n    }\n    @case (\"pulsing-ring\") {\n        <span class=\"mona-spinner-pulsing-ring-container\">\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-3\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-4\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-5\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-6\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-7\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-8\"></span>\n        </span>\n    }\n    @case (\"converging-spinner\") {\n        <span class=\"mona-spinner-converge-container\">\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-1\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-2\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-3\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-4\"></span>\n        </span>\n    }\n}\n", styles: [":host{display:inline-flex;vertical-align:middle}.mona-spinner-pulsing-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.mona-spinner-pulsing-segment{position:absolute;inset:0;border-radius:9999px;background-color:currentColor;opacity:.6;animation:mona-spinner-pulse 1.2s cubic-bezier(0,.2,.8,1) infinite}.mona-spinner-pulsing-2{animation-delay:-.6s}@keyframes mona-spinner-pulse{0%{transform:scale(.1);opacity:.9}50%{transform:scale(.6);opacity:.5}to{transform:scale(1);opacity:0}}.mona-spinner-pulsing-triad-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-triad-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.4s ease-in-out infinite}.mona-spinner-pulsing-triad-1{top:0;left:34%;animation-delay:-.933s}.mona-spinner-pulsing-triad-2{bottom:0;left:0;animation-delay:-.467s}.mona-spinner-pulsing-triad-3{bottom:0;right:0;animation-delay:0s}@keyframes mona-spinner-dot-pulse{0%,to{transform:scale(.4);opacity:.4}50%{transform:scale(1);opacity:1}}.mona-spinner-pulsing-ring-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-ring-segment{position:absolute;width:22%;height:22%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.6s ease-in-out infinite}.mona-spinner-pulsing-ring-1{top:5%;left:39%;animation-delay:0s}.mona-spinner-pulsing-ring-2{top:14.96%;left:63.04%;animation-delay:-.2s}.mona-spinner-pulsing-ring-3{top:39%;left:73%;animation-delay:-.4s}.mona-spinner-pulsing-ring-4{top:63.04%;left:63.04%;animation-delay:-.6s}.mona-spinner-pulsing-ring-5{top:73%;left:39%;animation-delay:-.8s}.mona-spinner-pulsing-ring-6{top:63.04%;left:14.96%;animation-delay:-1s}.mona-spinner-pulsing-ring-7{top:39%;left:5%;animation-delay:-1.2s}.mona-spinner-pulsing-ring-8{top:14.96%;left:14.96%;animation-delay:-1.4s}.mona-spinner-converge-container{position:relative;width:100%;height:100%;animation:mona-spinner-rotate 1.5s linear infinite}.mona-spinner-converge-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-converge 1.5s ease-in-out infinite}.mona-spinner-converge-1{top:0;left:0}.mona-spinner-converge-2{top:0;right:0}.mona-spinner-converge-3{bottom:0;right:0}.mona-spinner-converge-4{bottom:0;left:0}@keyframes mona-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes mona-spinner-converge{0%,to{transform:scale(1)}50%{transform:scale(.4)}}@media(prefers-reduced-motion:reduce){.mona-spinner-pulsing-segment,.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment,.mona-spinner-converge-container,.mona-spinner-converge-segment{animation:none!important}.mona-spinner-pulsing-segment{opacity:.6;transform:scale(.85)}.mona-spinner-pulsing-2{opacity:.3;transform:scale(.5)}.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment{opacity:.7;transform:scale(.8)}}\n"], dependencies: [{ kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-spinner", imports: [LucideDynamicIcon], host: {
                         "[attr.aria-hidden]": "decorative() ? 'true' : null",
-                        "[attr.aria-label]": "decorative() ? null : (ariaLabel() || 'Loading')",
+                        "[attr.aria-label]": "decorative() ? null : (ariaLabel() || messages().loading)",
                         "[attr.role]": "decorative() ? null : 'status'",
                         "[class]": "baseClass()"
                     }, template: "@switch (appearance()) {\n    @case (\"default\") {\n        <svg [lucideIcon]=\"loaderIcon\" [size]=\"pixelSize()\" class=\"animate-[spin_1.5s_linear_infinite] motion-reduce:animate-none\"></svg>\n    }\n    @case (\"pulsing\") {\n        <span class=\"mona-spinner-pulsing-container\">\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-2\"></span>\n        </span>\n    }\n    @case (\"pulsing-triad\") {\n        <span class=\"mona-spinner-pulsing-triad-container\">\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-3\"></span>\n        </span>\n    }\n    @case (\"pulsing-ring\") {\n        <span class=\"mona-spinner-pulsing-ring-container\">\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-3\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-4\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-5\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-6\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-7\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-8\"></span>\n        </span>\n    }\n    @case (\"converging-spinner\") {\n        <span class=\"mona-spinner-converge-container\">\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-1\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-2\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-3\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-4\"></span>\n        </span>\n    }\n}\n", styles: [":host{display:inline-flex;vertical-align:middle}.mona-spinner-pulsing-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.mona-spinner-pulsing-segment{position:absolute;inset:0;border-radius:9999px;background-color:currentColor;opacity:.6;animation:mona-spinner-pulse 1.2s cubic-bezier(0,.2,.8,1) infinite}.mona-spinner-pulsing-2{animation-delay:-.6s}@keyframes mona-spinner-pulse{0%{transform:scale(.1);opacity:.9}50%{transform:scale(.6);opacity:.5}to{transform:scale(1);opacity:0}}.mona-spinner-pulsing-triad-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-triad-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.4s ease-in-out infinite}.mona-spinner-pulsing-triad-1{top:0;left:34%;animation-delay:-.933s}.mona-spinner-pulsing-triad-2{bottom:0;left:0;animation-delay:-.467s}.mona-spinner-pulsing-triad-3{bottom:0;right:0;animation-delay:0s}@keyframes mona-spinner-dot-pulse{0%,to{transform:scale(.4);opacity:.4}50%{transform:scale(1);opacity:1}}.mona-spinner-pulsing-ring-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-ring-segment{position:absolute;width:22%;height:22%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.6s ease-in-out infinite}.mona-spinner-pulsing-ring-1{top:5%;left:39%;animation-delay:0s}.mona-spinner-pulsing-ring-2{top:14.96%;left:63.04%;animation-delay:-.2s}.mona-spinner-pulsing-ring-3{top:39%;left:73%;animation-delay:-.4s}.mona-spinner-pulsing-ring-4{top:63.04%;left:63.04%;animation-delay:-.6s}.mona-spinner-pulsing-ring-5{top:73%;left:39%;animation-delay:-.8s}.mona-spinner-pulsing-ring-6{top:63.04%;left:14.96%;animation-delay:-1s}.mona-spinner-pulsing-ring-7{top:39%;left:5%;animation-delay:-1.2s}.mona-spinner-pulsing-ring-8{top:14.96%;left:14.96%;animation-delay:-1.4s}.mona-spinner-converge-container{position:relative;width:100%;height:100%;animation:mona-spinner-rotate 1.5s linear infinite}.mona-spinner-converge-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-converge 1.5s ease-in-out infinite}.mona-spinner-converge-1{top:0;left:0}.mona-spinner-converge-2{top:0;right:0}.mona-spinner-converge-3{bottom:0;right:0}.mona-spinner-converge-4{bottom:0;left:0}@keyframes mona-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes mona-spinner-converge{0%,to{transform:scale(1)}50%{transform:scale(.4)}}@media(prefers-reduced-motion:reduce){.mona-spinner-pulsing-segment,.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment,.mona-spinner-converge-container,.mona-spinner-converge-segment{animation:none!important}.mona-spinner-pulsing-segment{opacity:.6;transform:scale(.85)}.mona-spinner-pulsing-2{opacity:.3;transform:scale(.5)}.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment{opacity:.7;transform:scale(.8)}}\n"] }]
@@ -113,10 +123,15 @@ const spinnerOverlayThemeVariants = cva(`
  */
 class SpinnerOverlayComponent {
     constructor() {
+        this.#i18n = inject(MonaI18nService);
         this.baseClass = computed(() => {
             return spinnerOverlayThemeVariants({ fullPage: this.fullPage() });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.effectiveCancelText = computed(() => {
+            return this.cancelText() ?? this.messages().cancel;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveCancelText" }] : /* istanbul ignore next */ []));
         this.effectiveZIndex = computed(() => {
             const customZIndex = this.zIndex();
             if (customZIndex !== undefined) {
@@ -125,6 +140,7 @@ class SpinnerOverlayComponent {
             return this.fullPage() ? 50 : 1;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveZIndex" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("spinner", SPINNER_DEFAULT_MESSAGES);
         /**
          * @description Visual appearance of the nested spinner animation.
          * @default "default"
@@ -134,19 +150,21 @@ class SpinnerOverlayComponent {
         /**
          * @description Emits when the consumer clicks the cancellation action button.
          */
+        // eslint-disable-next-line @angular-eslint/no-output-native
         this.cancel = output();
+        /**
+         * @description Label text displayed inside the cancellation button.
+         * When not set, falls back to the localized cancel text.
+         * @default undefined
+         */
+        this.cancelText = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cancelText" }] : /* istanbul ignore next */ []));
         /**
          * @description Whether the cancellation button is displayed in the overlay.
          * @default false
          */
         this.cancellable = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "cancellable" }] : /* istanbul ignore next */ []));
-        /**
-         * @description Label text displayed inside the cancellation button.
-         * @default "Cancel"
-         */
-        this.cancelText = input("Cancel", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "cancelText" }] : /* istanbul ignore next */ []));
         /**
          * @description Whether the overlay is fixed across the viewport or absolute within a target container.
          * @default false
@@ -172,19 +190,20 @@ class SpinnerOverlayComponent {
         this.zIndex = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
     }
+    #i18n;
     onCancel() {
         this.cancel.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SpinnerOverlayComponent, isStandalone: true, selector: "mona-spinner-overlay", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, cancellable: { classPropertyName: "cancellable", publicName: "cancellable", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, fullPage: { classPropertyName: "fullPage", publicName: "fullPage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel" }, host: { properties: { "class": "baseClass()", "style.z-index": "effectiveZIndex()" } }, ngImport: i0, template: "<div class=\"flex flex-col items-center justify-center gap-2.5 p-4 text-sm font-medium text-foreground text-center\" role=\"status\" aria-live=\"polite\">\n    <mona-spinner [appearance]=\"appearance()\" [size]=\"size()\" [decorative]=\"true\"></mona-spinner>\n\n    @if (text()) {\n        <span class=\"max-w-xs truncate\">{{ text() }}</span>\n    } @else {\n        <span class=\"sr-only\">Loading</span>\n    }\n\n    @if (cancellable()) {\n        <button\n            type=\"button\"\n            (click)=\"onCancel()\"\n            class=\"mt-1 inline-flex items-center justify-center rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer transition-colors\"\n        >\n            {{ cancelText() }}\n        </button>\n    }\n</div>\n", dependencies: [{ kind: "component", type: SpinnerComponent, selector: "mona-spinner", inputs: ["appearance", "aria-label", "decorative", "size", "class"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SpinnerOverlayComponent, isStandalone: true, selector: "mona-spinner-overlay", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, cancellable: { classPropertyName: "cancellable", publicName: "cancellable", isSignal: true, isRequired: false, transformFunction: null }, fullPage: { classPropertyName: "fullPage", publicName: "fullPage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel" }, host: { properties: { "class": "baseClass()", "style.z-index": "effectiveZIndex()" } }, ngImport: i0, template: "<div class=\"flex flex-col items-center justify-center gap-2.5 p-4 text-sm font-medium text-foreground text-center\" role=\"status\" aria-live=\"polite\">\n    <mona-spinner [appearance]=\"appearance()\" [size]=\"size()\" [decorative]=\"true\"></mona-spinner>\n\n    @if (text()) {\n        <span class=\"max-w-xs truncate\">{{ text() }}</span>\n    } @else {\n        <span class=\"sr-only\">{{ messages().loading }}</span>\n    }\n\n    @if (cancellable()) {\n        <button\n            type=\"button\"\n            (click)=\"onCancel()\"\n            class=\"mt-1 inline-flex items-center justify-center rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer transition-colors\"\n        >\n            {{ effectiveCancelText() }}\n        </button>\n    }\n</div>\n", dependencies: [{ kind: "component", type: SpinnerComponent, selector: "mona-spinner", inputs: ["appearance", "aria-label", "decorative", "size", "class"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-spinner-overlay", imports: [SpinnerComponent], host: {
                         "[class]": "baseClass()",
                         "[style.z-index]": "effectiveZIndex()"
-                    }, template: "<div class=\"flex flex-col items-center justify-center gap-2.5 p-4 text-sm font-medium text-foreground text-center\" role=\"status\" aria-live=\"polite\">\n    <mona-spinner [appearance]=\"appearance()\" [size]=\"size()\" [decorative]=\"true\"></mona-spinner>\n\n    @if (text()) {\n        <span class=\"max-w-xs truncate\">{{ text() }}</span>\n    } @else {\n        <span class=\"sr-only\">Loading</span>\n    }\n\n    @if (cancellable()) {\n        <button\n            type=\"button\"\n            (click)=\"onCancel()\"\n            class=\"mt-1 inline-flex items-center justify-center rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer transition-colors\"\n        >\n            {{ cancelText() }}\n        </button>\n    }\n</div>\n" }]
-        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], cancel: [{ type: i0.Output, args: ["cancel"] }], cancellable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancellable", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], fullPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullPage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }] } });
+                    }, template: "<div class=\"flex flex-col items-center justify-center gap-2.5 p-4 text-sm font-medium text-foreground text-center\" role=\"status\" aria-live=\"polite\">\n    <mona-spinner [appearance]=\"appearance()\" [size]=\"size()\" [decorative]=\"true\"></mona-spinner>\n\n    @if (text()) {\n        <span class=\"max-w-xs truncate\">{{ text() }}</span>\n    } @else {\n        <span class=\"sr-only\">{{ messages().loading }}</span>\n    }\n\n    @if (cancellable()) {\n        <button\n            type=\"button\"\n            (click)=\"onCancel()\"\n            class=\"mt-1 inline-flex items-center justify-center rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer transition-colors\"\n        >\n            {{ effectiveCancelText() }}\n        </button>\n    }\n</div>\n" }]
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], cancel: [{ type: i0.Output, args: ["cancel"] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], cancellable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancellable", required: false }] }], fullPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullPage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }] } });
 
 class SpinnerService {
     #appRef = inject(ApplicationRef);
@@ -576,5 +595,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SpinnerComponent, SpinnerService };
+export { SPINNER_DEFAULT_MESSAGES, SpinnerComponent, SpinnerService };
 //# sourceMappingURL=nanahoshi-mona-ui-spinner.mjs.map

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

@@ -1,11 +1,12 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, forwardRef, inject, DestroyRef, contentChildren, viewChild, computed, contentChild, TemplateRef, signal, input, output, afterNextRender, Component, effect } from '@angular/core';
+import { Directive, forwardRef, inject, DestroyRef, contentChildren, computed, contentChild, TemplateRef, viewChild, signal, input, output, afterNextRender, Component, effect } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LucideChevronDown } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PopupMenuGroupTemplateDirective, PopupMenuTemplateOrigin, PopupMenuGroupTemplateToken, PopupMenuIconTemplateDirective, PopupMenuIconTemplateToken, PopupMenuShortcutTemplateDirective, PopupMenuShortcutTemplateToken, PopupMenuTextTemplateDirective, PopupMenuTextTemplateToken, PopupMenuToken, PopupMenuComponent, PopupMenuItemType, PopupMenuTemplateType, ensurePopupComponentTypes, PopupMenuOrigin, ensurePopupTemplateTypes, PopupMenuCheckboxItemComponent, PopupMenuGroupComponent, PopupMenuItemComponent, PopupMenuRadioGroupComponent, PopupMenuRadioItemComponent, PopupMenuRadioItemToken, PopupMenuSeparatorComponent } from '@nanahoshi/mona-ui/popup-menu';
 import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -136,6 +137,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+const SPLIT_BUTTON_DEFAULT_MESSAGES = {
+    menuButtonAriaLabel: "Show menu options",
+    splitButton: (text) => (text ? `${text} splitbutton` : "Split button")
+};
+
 const splitButtonThemeVariants = cva(`
         inline-flex flex-nowrap items-center
         [&>button]:focus-visible:z-10
@@ -147,7 +153,7 @@ const splitButtonThemeVariants = cva(`
             error: "",
             ghost: "border-transparent",
             info: "",
-            outline: "[&>button:not(:last-child)]:border-r [&>button:not(:last-child)]:border-input-border",
+            outline: "[&>button:not(:last-child)]:border-e [&>button:not(:last-child)]:border-input-border",
             primary: "",
             secondary: "",
             success: "",
@@ -156,26 +162,26 @@ const splitButtonThemeVariants = cva(`
         rounded: {
             full: `
                     rounded-full
-                    [&>button]:first:rounded-tl-full [&>button]:first:rounded-bl-full
-                    [&>button]:last:rounded-tr-full [&>button]:last:rounded-br-full
+                    [&>button]:first:rounded-s-full
+                    [&>button]:last:rounded-e-full
                 `,
             large: `
                     rounded-lg
-                    [&>button]:first:rounded-tl-lg [&>button]:first:rounded-bl-lg
-                    [&>button]:last:rounded-tr-lg [&>button]:last:rounded-br-lg
+                    [&>button]:first:rounded-s-lg
+                    [&>button]:last:rounded-e-lg
                 `,
             medium: `
                     rounded-md
-                    [&>button]:first:rounded-tl-md [&>button]:first:rounded-bl-md
-                    [&>button]:last:rounded-tr-md [&>button]:last:rounded-br-md
+                    [&>button]:first:rounded-s-md
+                    [&>button]:last:rounded-e-md
                 `,
             none: `
                     rounded-none
                 `,
             small: `
                     rounded-sm
-                    [&>button]:first:rounded-tl-sm [&>button]:first:rounded-bl-sm
-                    [&>button]:last:rounded-tr-sm [&>button]:last:rounded-br-sm
+                    [&>button]:first:rounded-s-sm
+                    [&>button]:last:rounded-e-sm
                 `
         },
         size: {
@@ -199,13 +205,11 @@ const splitButtonThemeVariants = cva(`
 
 class SplitButtonComponent {
     #destroyRef;
+    #i18n;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
+        this.#i18n = inject(MonaI18nService);
         this.menuItemComponents = contentChildren(PopupMenuToken, { ...(ngDevMode ? { debugName: "menuItemComponents" } : /* istanbul ignore next */ {}), descendants: false });
-        this.menuButtonRef = viewChild("menuButton", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "menuButtonRef" }] : /* istanbul ignore next */ []));
-        this.popupMenuRef = viewChild("popupMenu", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "popupMenuRef" }] : /* istanbul ignore next */ []));
         this.classes = computed(() => {
             const look = this.look();
             const rounded = this.rounded();
@@ -219,11 +223,17 @@ class SplitButtonComponent {
             return twMerge(classes, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.effectiveMenuButtonAriaLabel = computed(() => {
+            return this.menuButtonAriaLabel() || this.messages().menuButtonAriaLabel;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveMenuButtonAriaLabel" }] : /* istanbul ignore next */ []));
         this.groupTemplate = contentChild(SplitButtonMenuGroupTemplateDirective, { ...(ngDevMode ? { debugName: "groupTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
             descendants: false });
         this.iconTemplate = contentChild(SplitButtonMenuItemIconTemplateDirective, { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
             descendants: false });
         this.mainButtonTextTemplate = contentChild(SplitButtonTextTemplateDirective, { ...(ngDevMode ? { debugName: "mainButtonTextTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.menuButtonRef = viewChild("menuButton", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuButtonRef" }] : /* istanbul ignore next */ []));
         this.menuButtonTemplate = contentChild(SplitButtonMenuButtonTemplateDirective, { ...(ngDevMode ? { debugName: "menuButtonTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.menuId = createElementControlId();
         this.menuItems = computed(() => {
@@ -234,6 +244,9 @@ class SplitButtonComponent {
         ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
         this.menuOpen = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("splitButton", SPLIT_BUTTON_DEFAULT_MESSAGES);
+        this.popupMenuRef = viewChild("popupMenu", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupMenuRef" }] : /* istanbul ignore next */ []));
         this.popupMenuRounded = computed(() => {
             const rounded = this.rounded();
             return rounded === "full" ? "large" : rounded;
@@ -243,8 +256,11 @@ class SplitButtonComponent {
             descendants: false });
         this.splitButtonAriaLabel = computed(() => {
             const ariaLabel = this.ariaLabel();
+            if (ariaLabel) {
+                return ariaLabel;
+            }
             const text = this.text();
-            return ariaLabel || `${text} splitbutton`;
+            return this.messages().splitButton(text);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "splitButtonAriaLabel" }] : /* istanbul ignore next */ []));
         this.textTemplate = contentChild(SplitButtonMenuItemTextTemplateDirective, { ...(ngDevMode ? { debugName: "textTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
@@ -280,10 +296,10 @@ class SplitButtonComponent {
         ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
         /**
          * @description Accessible name for the menu toggle button.
-         * Override to provide a localized label for non-English applications.
-         * @default "Show menu options"
+         * If not provided, falls back to the localized default message.
+         * @default ""
          */
-        this.menuButtonAriaLabel = input("Show menu options", /* @ts-ignore */
+        this.menuButtonAriaLabel = input("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "menuButtonAriaLabel" }] : /* istanbul ignore next */ []));
         /**
          * @description Emitted when a menu item in the popup is clicked.
@@ -371,7 +387,7 @@ class SplitButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitButtonComponent, isStandalone: true, selector: "mona-split-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", 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 }, menuButtonAriaLabel: { classPropertyName: "menuButtonAriaLabel", publicName: "menuButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", menuItemClick: "menuItemClick" }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SplitButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: SplitButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "mainButtonTextTemplate", first: true, predicate: SplitButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "menuButtonTemplate", first: true, predicate: SplitButtonMenuButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "shortcutTemplate", first: true, predicate: SplitButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: SplitButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "menuButtonRef", first: true, predicate: ["menuButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    (click)=\"buttonClick.emit($event)\"\n    [disabled]=\"disabled()\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-tr-none rounded-br-none\"\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #mainButton>\n    @if (mainButtonTextTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\n    } @else {\n        <span>{{ text() }}</span>\n    }\n</button>\n<button\n    monaButton\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"true\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-tl-none rounded-bl-none border-l-0\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"menuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"menuButtonAriaLabel()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #menuButton>\n    @if (menuButtonTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\n    } @else {\n        <svg lucideChevronDown [size]=\"16\"></svg>\n    }\n</button>\n\n<mona-popup-menu\n    [anchorConnectionPoint]=\"'bottomleft'\"\n    [anchor]=\"mainButton\"\n    [items]=\"menuItems()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    (close)=\"onMenuClose()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topleft'\"\n    [rounded]=\"popupMenuRounded()\"\n    [size]=\"size()\"\n    [target]=\"menuButton\"\n    [trigger]=\"'click'\"\n    [id]=\"menuId\"\n    [minWidth]=\"popupWidth() || undefined\"\n    #popupMenu>\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (iconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (shortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (textTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"textTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\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: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitButtonComponent, isStandalone: true, selector: "mona-split-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", 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 }, menuButtonAriaLabel: { classPropertyName: "menuButtonAriaLabel", publicName: "menuButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", menuItemClick: "menuItemClick" }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SplitButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: SplitButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "mainButtonTextTemplate", first: true, predicate: SplitButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "menuButtonTemplate", first: true, predicate: SplitButtonMenuButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "shortcutTemplate", first: true, predicate: SplitButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: SplitButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "menuButtonRef", first: true, predicate: ["menuButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    (click)=\"buttonClick.emit($event)\"\n    [disabled]=\"disabled()\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-e-none\"\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #mainButton>\n    @if (mainButtonTextTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\n    } @else {\n        <span>{{ text() }}</span>\n    }\n</button>\n<button\n    monaButton\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"true\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-s-none border-s-0\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"menuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"effectiveMenuButtonAriaLabel()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #menuButton>\n    @if (menuButtonTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\n    } @else {\n        <svg lucideChevronDown [size]=\"16\"></svg>\n    }\n</button>\n\n<mona-popup-menu\n    [anchorConnectionPoint]=\"'bottomleft'\"\n    [anchor]=\"mainButton\"\n    [items]=\"menuItems()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    (close)=\"onMenuClose()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topleft'\"\n    [rounded]=\"popupMenuRounded()\"\n    [size]=\"size()\"\n    [target]=\"menuButton\"\n    [trigger]=\"'click'\"\n    [id]=\"menuId\"\n    [minWidth]=\"popupWidth() || undefined\"\n    #popupMenu>\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (iconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (shortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (textTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"textTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\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: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
@@ -386,14 +402,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         LucideChevronDown
                     ], host: {
                         "[class]": "classes()"
-                    }, template: "<button\n    monaButton\n    (click)=\"buttonClick.emit($event)\"\n    [disabled]=\"disabled()\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-tr-none rounded-br-none\"\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #mainButton>\n    @if (mainButtonTextTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\n    } @else {\n        <span>{{ text() }}</span>\n    }\n</button>\n<button\n    monaButton\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"true\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-tl-none rounded-bl-none border-l-0\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"menuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"menuButtonAriaLabel()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #menuButton>\n    @if (menuButtonTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\n    } @else {\n        <svg lucideChevronDown [size]=\"16\"></svg>\n    }\n</button>\n\n<mona-popup-menu\n    [anchorConnectionPoint]=\"'bottomleft'\"\n    [anchor]=\"mainButton\"\n    [items]=\"menuItems()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    (close)=\"onMenuClose()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topleft'\"\n    [rounded]=\"popupMenuRounded()\"\n    [size]=\"size()\"\n    [target]=\"menuButton\"\n    [trigger]=\"'click'\"\n    [id]=\"menuId\"\n    [minWidth]=\"popupWidth() || undefined\"\n    #popupMenu>\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (iconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (shortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (textTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"textTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n" }]
-        }], ctorParameters: () => [], propDecorators: { menuItemComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuToken), { ...{ descendants: false }, isSignal: true }] }], menuButtonRef: [{ type: i0.ViewChild, args: ["menuButton", { isSignal: true }] }], popupMenuRef: [{ type: i0.ViewChild, args: ["popupMenu", { isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuGroupTemplateDirective), { ...{
+                    }, template: "<button\n    monaButton\n    (click)=\"buttonClick.emit($event)\"\n    [disabled]=\"disabled()\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-e-none\"\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #mainButton>\n    @if (mainButtonTextTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\n    } @else {\n        <span>{{ text() }}</span>\n    }\n</button>\n<button\n    monaButton\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"true\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-s-none border-s-0\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"menuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"effectiveMenuButtonAriaLabel()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #menuButton>\n    @if (menuButtonTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\n    } @else {\n        <svg lucideChevronDown [size]=\"16\"></svg>\n    }\n</button>\n\n<mona-popup-menu\n    [anchorConnectionPoint]=\"'bottomleft'\"\n    [anchor]=\"mainButton\"\n    [items]=\"menuItems()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    (close)=\"onMenuClose()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topleft'\"\n    [rounded]=\"popupMenuRounded()\"\n    [size]=\"size()\"\n    [target]=\"menuButton\"\n    [trigger]=\"'click'\"\n    [id]=\"menuId\"\n    [minWidth]=\"popupWidth() || undefined\"\n    #popupMenu>\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (iconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (shortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (textTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"textTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n" }]
+        }], ctorParameters: () => [], propDecorators: { menuItemComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuToken), { ...{ descendants: false }, isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuGroupTemplateDirective), { ...{
                             read: TemplateRef,
                             descendants: false
                         }, isSignal: true }] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuItemIconTemplateDirective), { ...{
                             read: TemplateRef,
                             descendants: false
-                        }, isSignal: true }] }], mainButtonTextTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonTextTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], menuButtonTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuButtonTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], shortcutTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuItemShortcutTemplateDirective), { ...{
+                        }, isSignal: true }] }], mainButtonTextTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonTextTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], menuButtonRef: [{ type: i0.ViewChild, args: ["menuButton", { isSignal: true }] }], menuButtonTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuButtonTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], popupMenuRef: [{ type: i0.ViewChild, args: ["popupMenu", { isSignal: true }] }], shortcutTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuItemShortcutTemplateDirective), { ...{
                             read: TemplateRef,
                             descendants: false
                         }, isSignal: true }] }], textTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuItemTextTemplateDirective), { ...{
@@ -619,5 +635,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SplitButtonCheckboxItemComponent, SplitButtonComponent, SplitButtonGroupComponent, SplitButtonItemComponent, SplitButtonMenuButtonTemplateDirective, SplitButtonMenuGroupTemplateDirective, SplitButtonMenuItemIconTemplateDirective, SplitButtonMenuItemShortcutTemplateDirective, SplitButtonMenuItemTextTemplateDirective, SplitButtonRadioGroupComponent, SplitButtonRadioItemComponent, SplitButtonSeparatorComponent, SplitButtonTextTemplateDirective };
+export { SPLIT_BUTTON_DEFAULT_MESSAGES, SplitButtonCheckboxItemComponent, SplitButtonComponent, SplitButtonGroupComponent, SplitButtonItemComponent, SplitButtonMenuButtonTemplateDirective, SplitButtonMenuGroupTemplateDirective, SplitButtonMenuItemIconTemplateDirective, SplitButtonMenuItemShortcutTemplateDirective, SplitButtonMenuItemTextTemplateDirective, SplitButtonRadioGroupComponent, SplitButtonRadioItemComponent, SplitButtonSeparatorComponent, SplitButtonTextTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-split-button.mjs.map