@nanahoshi/mona-ui 0.18.5 → 0.19.0

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

@@ -1,12 +1,12 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, input, Directive, model, viewChild, TemplateRef, Component, output, inject, DestroyRef, ElementRef, signal, afterNextRender, afterRenderEffect, contentChildren } from '@angular/core';
+import { computed, input, Directive, model, viewChild, TemplateRef, Component, inject, output, DestroyRef, ElementRef, signal, afterNextRender, afterRenderEffect, contentChildren } from '@angular/core';
 import { where, compact, from } from '@mirei/ts-collections';
 import { cva } from 'class-variance-authority';
 import { v4 } from 'uuid';
-import { Directionality } from '@angular/cdk/bidi';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent, map, merge, filter, tap, skipUntil, takeUntil } from 'rxjs';
+import { MonaI18nService, injectComponentDirection } from '@nanahoshi/mona-ui/i18n';
 import { LucideChevronLeft, LucideChevronRight, LucideChevronUp, LucideChevronDown } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 
@@ -36,6 +36,9 @@ class SplitterPaneStyleDirective {
         ...(ngDevMode ? [{ debugName: "paneList" }] : /* istanbul ignore next */ []));
     }
     #autoSizedPane;
+    getPaneFlexShrink(pane) {
+        return pane.collapsible() && pane.collapsed() ? "0" : "1";
+    }
     getFractionalWeight(size) {
         if (typeof size !== "string") {
             return null;
@@ -71,9 +74,6 @@ class SplitterPaneStyleDirective {
         }
         return size === null ? "1" : "0";
     }
-    getPaneFlexShrink(pane) {
-        return pane.collapsible() && pane.collapsed() ? "0" : "1";
-    }
     getPaneSize(pane) {
         const size = pane.size();
         if (size === "" || size === undefined || size === null) {
@@ -157,16 +157,16 @@ const splitterResizerHandleThemeVariants = cva(`
 
 class SplitterPaneComponent {
     constructor() {
-        /**
-         * @description Whether the pane is collapsible.
-         */
-        this.collapsible = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
         /**
          * @description Whether the pane is collapsed.
          */
         this.collapsed = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the pane is collapsible.
+         */
+        this.collapsible = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
         /**
          * @description The maximum size of the pane.
          */
@@ -192,7 +192,7 @@ class SplitterPaneComponent {
         this.uid = v4();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: SplitterPaneComponent, isStandalone: true, selector: "mona-splitter-pane", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", size: "sizeChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: SplitterPaneComponent, isStandalone: true, selector: "mona-splitter-pane", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", size: "sizeChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
         <ng-template>
             <ng-content></ng-content>
         </ng-template>
@@ -208,15 +208,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         </ng-template>
     `
                 }]
-        }], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+const SPLITTER_DEFAULT_MESSAGES = {
+    collapseDown: "Collapse pane below",
+    collapseNext: "Collapse next pane",
+    collapsePrevious: "Collapse previous pane",
+    collapseUp: "Collapse pane above",
+    resizer: "Resizer"
+};
 
 class SplitterResizerHandleComponent {
     constructor() {
+        this.#i18n = inject(MonaI18nService);
         this.baseClass = computed(() => {
             const orientation = this.orientation();
             return splitterResizerHandleThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("splitter", SPLITTER_DEFAULT_MESSAGES);
         this.collapseNext = output();
         this.collapsePrevious = output();
         this.nextControlsVisible = input.required(/* @ts-ignore */
@@ -228,32 +238,37 @@ class SplitterResizerHandleComponent {
         this.resizable = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
     }
+    #i18n;
     onPointerDown(event) {
         event.preventDefault();
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitterResizerHandleComponent, isStandalone: true, selector: "mona-splitter-resizer-handle", inputs: { nextControlsVisible: { classPropertyName: "nextControlsVisible", publicName: "nextControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousControlsVisible: { classPropertyName: "previousControlsVisible", publicName: "previousControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { collapseNext: "collapseNext", collapsePrevious: "collapsePrevious" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (orientation() === \"horizontal\") {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse previous pane\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronLeft [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse next pane\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronRight [size]=\"12\"></svg>\n        </button>\n    }\n} @else {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse pane above\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronUp [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse pane below\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronDown [size]=\"12\"></svg>\n        </button>\n    }\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitterResizerHandleComponent, isStandalone: true, selector: "mona-splitter-resizer-handle", inputs: { nextControlsVisible: { classPropertyName: "nextControlsVisible", publicName: "nextControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousControlsVisible: { classPropertyName: "previousControlsVisible", publicName: "previousControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { collapseNext: "collapseNext", collapsePrevious: "collapsePrevious" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (orientation() === \"horizontal\") {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapsePrevious\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronLeft [size]=\"12\" class=\"rtl:rotate-180\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapseNext\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronRight [size]=\"12\" class=\"rtl:rotate-180\"></svg>\n        </button>\n    }\n} @else {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapseUp\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronUp [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapseDown\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronDown [size]=\"12\"></svg>\n        </button>\n    }\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerHandleComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-splitter-resizer-handle", imports: [ButtonDirective, LucideChevronLeft, LucideChevronRight, LucideChevronUp, LucideChevronDown], host: {
                         "[class]": "baseClass()"
-                    }, template: "@if (orientation() === \"horizontal\") {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse previous pane\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronLeft [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse next pane\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronRight [size]=\"12\"></svg>\n        </button>\n    }\n} @else {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse pane above\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronUp [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse pane below\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronDown [size]=\"12\"></svg>\n        </button>\n    }\n}\n" }]
+                    }, template: "@if (orientation() === \"horizontal\") {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapsePrevious\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronLeft [size]=\"12\" class=\"rtl:rotate-180\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapseNext\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronRight [size]=\"12\" class=\"rtl:rotate-180\"></svg>\n        </button>\n    }\n} @else {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapseUp\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronUp [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapseDown\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronDown [size]=\"12\"></svg>\n        </button>\n    }\n}\n" }]
         }], propDecorators: { collapseNext: [{ type: i0.Output, args: ["collapseNext"] }], collapsePrevious: [{ type: i0.Output, args: ["collapsePrevious"] }], nextControlsVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextControlsVisible", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], previousControlsVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousControlsVisible", required: true }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: true }] }] } });
 
 class SplitterResizerComponent {
     #destroyRef;
-    #directionality;
+    #direction;
     #hostElementRef;
+    #i18n;
     #paneSizeMemory;
     #splitter;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
-        this.#directionality = inject(Directionality);
+        this.#direction = injectComponentDirection();
         this.#hostElementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
         this.#paneSizeMemory = new WeakMap();
         this.#splitter = inject(SplitterComponent);
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.ariaValueMax = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaValueMax" }] : /* istanbul ignore next */ []));
         this.ariaValueMin = signal(0, /* @ts-ignore */
@@ -272,6 +287,7 @@ class SplitterResizerComponent {
             return !this.resizable() && this.getCollapsibleTargetPane() === null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isInert" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("splitter", SPLITTER_DEFAULT_MESSAGES);
         this.nextCollapseControlsVisible = computed(() => {
             return this.hovered() && this.nextPane().collapsible() && !this.nextPane().collapsed();
         }, /* @ts-ignore */
@@ -286,6 +302,11 @@ class SplitterResizerComponent {
         ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
         this.resizing = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible label for the separator element.
+         * @default ""
+         */
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
         this.nextPane = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nextPane" }] : /* istanbul ignore next */ []));
         this.orientation = input.required(/* @ts-ignore */
@@ -378,7 +399,7 @@ class SplitterResizerComponent {
         this.togglePane(target.pane, target.element, target.direction);
     }
     distributeSpaceToNeighbors(space, neighbors) {
-        let remaining = space;
+        const remaining = space;
         const capacities = neighbors.map(neighbor => {
             const max = this.getMaxSize(neighbor.pane);
             const capacity = max === Number.POSITIVE_INFINITY ? Number.POSITIVE_INFINITY : Math.max(0, max - neighbor.size);
@@ -392,7 +413,7 @@ class SplitterResizerComponent {
             });
             return;
         }
-        let available = capacities.reduce((sum, c) => sum + c.capacity, 0);
+        const available = capacities.reduce((sum, c) => sum + c.capacity, 0);
         if (available <= 0) {
             return;
         }
@@ -544,7 +565,7 @@ class SplitterResizerComponent {
     handleCollapserKeys(key) {
         const orientation = this.orientation();
         if (orientation === "horizontal") {
-            const isRtl = this.#directionality.value === "rtl";
+            const isRtl = this.isRtl();
             if (key === "ArrowLeft") {
                 this.collapsePane(isRtl ? "next" : "previous");
                 return true;
@@ -589,7 +610,7 @@ class SplitterResizerComponent {
             return false;
         }
         if (orientation === "horizontal") {
-            const isRtl = this.#directionality.value === "rtl";
+            const isRtl = this.isRtl();
             if (key === "ArrowLeft") {
                 this.nudgeSplitter(isRtl ? step : -step);
                 return true;
@@ -729,7 +750,10 @@ class SplitterResizerComponent {
     updateHorizontalPaneSizes(event) {
         const [previousRect, nextRect] = this.getPaneRectangles();
         const maxWidth = previousRect.width + nextRect.width;
-        const desiredPrevWidth = Math.min(Math.max(event.clientX - previousRect.left, 0), maxWidth);
+        const isRtl = this.isRtl();
+        const desiredPrevWidth = isRtl
+            ? Math.min(Math.max(previousRect.right - event.clientX, 0), maxWidth)
+            : Math.min(Math.max(event.clientX - previousRect.left, 0), maxWidth);
         const [previousPaneWidth, nextPaneWidth] = this.clampPaneSizes(maxWidth, desiredPrevWidth, this.previousPane(), this.nextPane());
         this.updatePaneSizes(`${previousPaneWidth}px`, `${nextPaneWidth}px`);
     }
@@ -747,7 +771,7 @@ class SplitterResizerComponent {
         this.updatePaneSizes(`${previousPaneHeight}px`, `${nextPaneHeight}px`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: SplitterResizerComponent, isStandalone: true, selector: "mona-splitter-resizer", inputs: { nextPane: { classPropertyName: "nextPane", publicName: "nextPane", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousPane: { classPropertyName: "previousPane", publicName: "previousPane", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "separator" }, listeners: { "dblclick": "toggleCollapse()" }, properties: { "class": "baseClass()", "style.cursor": "resizable() ? (orientation()==='horizontal' ? 'ew-resize' : 'ns-resize') : 'auto'", "attr.aria-orientation": "orientation()", "attr.aria-valuemax": "ariaValueMax()", "attr.aria-valuemin": "ariaValueMin()", "attr.aria-valuenow": "ariaValueNow()", "attr.tabindex": "isInert() ? -1 : 0" } }, ngImport: i0, template: "<mona-splitter-resizer-handle\n    (collapseNext)=\"collapseNext($event)\"\n    (collapsePrevious)=\"collapsePrevious($event)\"\n    [nextControlsVisible]=\"nextCollapseControlsVisible()\"\n    [orientation]=\"orientation()\"\n    [previousControlsVisible]=\"previousCollapseControlsVisible()\"\n    [resizable]=\"resizable()\">\n</mona-splitter-resizer-handle>\n", dependencies: [{ kind: "component", type: SplitterResizerHandleComponent, selector: "mona-splitter-resizer-handle", inputs: ["nextControlsVisible", "orientation", "previousControlsVisible", "resizable"], outputs: ["collapseNext", "collapsePrevious"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: SplitterResizerComponent, isStandalone: true, selector: "mona-splitter-resizer", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, nextPane: { classPropertyName: "nextPane", publicName: "nextPane", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousPane: { classPropertyName: "previousPane", publicName: "previousPane", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "separator" }, listeners: { "dblclick": "toggleCollapse()" }, properties: { "class": "baseClass()", "style.cursor": "resizable() ? (orientation()==='horizontal' ? 'ew-resize' : 'ns-resize') : 'auto'", "attr.aria-label": "ariaLabel() || messages().resizer", "attr.aria-orientation": "orientation()", "attr.aria-valuemax": "ariaValueMax()", "attr.aria-valuemin": "ariaValueMin()", "attr.aria-valuenow": "ariaValueNow()", "attr.tabindex": "isInert() ? -1 : 0" } }, ngImport: i0, template: "<mona-splitter-resizer-handle\n    (collapseNext)=\"collapseNext($event)\"\n    (collapsePrevious)=\"collapsePrevious($event)\"\n    [nextControlsVisible]=\"nextCollapseControlsVisible()\"\n    [orientation]=\"orientation()\"\n    [previousControlsVisible]=\"previousCollapseControlsVisible()\"\n    [resizable]=\"resizable()\">\n</mona-splitter-resizer-handle>\n", dependencies: [{ kind: "component", type: SplitterResizerHandleComponent, selector: "mona-splitter-resizer-handle", inputs: ["nextControlsVisible", "orientation", "previousControlsVisible", "resizable"], outputs: ["collapseNext", "collapsePrevious"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerComponent, decorators: [{
             type: Component,
@@ -756,13 +780,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[style.cursor]": "resizable() ? (orientation()==='horizontal' ? 'ew-resize' : 'ns-resize') : 'auto'",
                         "(dblclick)": "toggleCollapse()",
                         role: "separator",
+                        "[attr.aria-label]": "ariaLabel() || messages().resizer",
                         "[attr.aria-orientation]": "orientation()",
                         "[attr.aria-valuemax]": "ariaValueMax()",
                         "[attr.aria-valuemin]": "ariaValueMin()",
                         "[attr.aria-valuenow]": "ariaValueNow()",
                         "[attr.tabindex]": "isInert() ? -1 : 0"
                     }, template: "<mona-splitter-resizer-handle\n    (collapseNext)=\"collapseNext($event)\"\n    (collapsePrevious)=\"collapsePrevious($event)\"\n    [nextControlsVisible]=\"nextCollapseControlsVisible()\"\n    [orientation]=\"orientation()\"\n    [previousControlsVisible]=\"previousCollapseControlsVisible()\"\n    [resizable]=\"resizable()\">\n</mona-splitter-resizer-handle>\n" }]
-        }], ctorParameters: () => [], propDecorators: { nextPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPane", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], previousPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPane", required: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], nextPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPane", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], previousPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPane", required: true }] }] } });
 
 class SplitterComponent {
     constructor() {
@@ -787,7 +812,7 @@ class SplitterComponent {
         return from(this.paneList()).firstOrDefault(pane => pane.uid === uid);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitterComponent, isStandalone: true, selector: "mona-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "paneList", predicate: SplitterPaneComponent, isSignal: true }], ngImport: i0, template: "@for (pane of paneList(); track pane.uid) {\n    <div\n        class=\"overflow-hidden min-w-0 min-h-0\"\n        [attr.data-pid]=\"pane.uid\"\n        [attr.data-px]=\"$index\"\n        monaSplitterPaneStyle\n        [pane]=\"pane\"\n        [paneList]=\"paneList()\">\n        <ng-container [ngTemplateOutlet]=\"pane.template()\"></ng-container>\n    </div>\n    @if ($index !== $count - 1) {\n        <mona-splitter-resizer\n            [nextPane]=\"paneList()[$index + 1]\"\n            [orientation]=\"orientation()!\"\n            [previousPane]=\"paneList()[$index]\">\n        </mona-splitter-resizer>\n    }\n}\n", dependencies: [{ kind: "component", type: SplitterResizerComponent, selector: "mona-splitter-resizer", inputs: ["nextPane", "orientation", "previousPane"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SplitterPaneStyleDirective, selector: "div[monaSplitterPaneStyle]", inputs: ["pane", "paneList"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitterComponent, isStandalone: true, selector: "mona-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "paneList", predicate: SplitterPaneComponent, isSignal: true }], ngImport: i0, template: "@for (pane of paneList(); track pane.uid) {\n    <div\n        class=\"overflow-hidden min-w-0 min-h-0\"\n        [attr.data-pid]=\"pane.uid\"\n        [attr.data-px]=\"$index\"\n        monaSplitterPaneStyle\n        [pane]=\"pane\"\n        [paneList]=\"paneList()\">\n        <ng-container [ngTemplateOutlet]=\"pane.template()\"></ng-container>\n    </div>\n    @if ($index !== $count - 1) {\n        <mona-splitter-resizer\n            [nextPane]=\"paneList()[$index + 1]\"\n            [orientation]=\"orientation()!\"\n            [previousPane]=\"paneList()[$index]\">\n        </mona-splitter-resizer>\n    }\n}\n", dependencies: [{ kind: "component", type: SplitterResizerComponent, selector: "mona-splitter-resizer", inputs: ["aria-label", "nextPane", "orientation", "previousPane"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SplitterPaneStyleDirective, selector: "div[monaSplitterPaneStyle]", inputs: ["pane", "paneList"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterComponent, decorators: [{
             type: Component,
@@ -804,5 +829,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SplitterComponent, SplitterPaneComponent };
+export { SPLITTER_DEFAULT_MESSAGES, SplitterComponent, SplitterPaneComponent };
 //# sourceMappingURL=nanahoshi-mona-ui-splitter.mjs.map

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

@@ -4,6 +4,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { select } from '@mirei/ts-collections';
 import { fromEvent } from 'rxjs';
+import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 
 /**
@@ -77,7 +78,7 @@ const stepperStepListThemeVariants = cva(`
                 `,
             vertical: `
                     h-full w-max flex-col
-                    -translate-x-3
+                    -translate-x-3 rtl:translate-x-3
                 `
         }
     },
@@ -137,7 +138,7 @@ const stepperTrackThemeVariants = cva(`
     }
 });
 const stepperTrackLineThemeVariants = cva(`
-        absolute bg-primary
+        absolute start-0 top-0 bg-primary
     `, {
     variants: {
         orientation: {
@@ -151,11 +152,11 @@ const stepperTrackLineThemeVariants = cva(`
 });
 
 class StepperIndicatorDirective {
-    #wasFocused;
     #host;
+    #wasFocused;
     constructor() {
-        this.#wasFocused = false;
         this.#host = inject(ElementRef);
+        this.#wasFocused = false;
         this.stepIndicatorClass = computed(() => {
             const active = this.active();
             const focused = this.focused();
@@ -192,14 +193,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }] } });
 
+const STEPPER_DEFAULT_MESSAGES = {
+    stepProgress: "Step progress",
+    stepper: "Progress"
+};
+
 class StepperComponent {
     #destroyRef;
+    #direction;
     #hostElementRef;
+    #i18n;
     #trackItemSize;
     #trackLength;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
+        this.#direction = injectComponentDirection();
         this.#hostElementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.#trackItemSize = computed(() => {
             const stepCount = this.viewSteps().length;
             return stepCount !== 0 ? 100 / stepCount : 0;
@@ -251,6 +263,7 @@ class StepperComponent {
             return stepperStepListItemThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listItemClass" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("stepper", STEPPER_DEFAULT_MESSAGES);
         this.progressMax = computed(() => Math.max(this.viewSteps().length - 1, 0), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "progressMax" }] : /* istanbul ignore next */ []));
         this.stepTemplate = contentChild(StepperStepTemplateDirective, {
@@ -301,9 +314,9 @@ class StepperComponent {
         ...(ngDevMode ? [{ debugName: "viewSteps" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the accessible label for the stepper group.
-         * @default "Progress"
+         * @default ""
          */
-        this.ariaLabel = input("Progress", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
         /**
          * @description Sets the flow of the stepper.
          * If set to true, the user will only be able to navigate to the previous or the next step.
@@ -318,9 +331,9 @@ class StepperComponent {
         ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the accessible label for the progress bar element.
-         * @default "Step progress"
+         * @default ""
          */
-        this.progressAriaLabel = input("Step progress", /* @ts-ignore */
+        this.progressAriaLabel = input("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "progressAriaLabel" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the roundness of the stepper steps.
@@ -417,8 +430,13 @@ class StepperComponent {
             .pipe(takeUntilDestroyed(this.#destroyRef))
             .subscribe(event => {
             const orientation = this.orientation();
-            const previousKey = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
-            const nextKey = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+            const isRtl = this.isRtl();
+            let previousKey = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+            let nextKey = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+            if (orientation === "horizontal" && isRtl) {
+                previousKey = "ArrowRight";
+                nextKey = "ArrowLeft";
+            }
             if (event.key === previousKey) {
                 event.preventDefault();
                 this.moveHighlight(-1);
@@ -446,16 +464,16 @@ class StepperComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: StepperComponent, isStandalone: true, selector: "mona-stepper", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, progressAriaLabel: { classPropertyName: "progressAriaLabel", publicName: "progressAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { step: "stepChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()", "class": "baseClass()", "style": "hostStyles()" } }, queries: [{ propertyName: "indicatorTemplate", first: true, predicate: StepperIndicatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: StepperLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "stepTemplate", first: true, predicate: StepperStepTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ step.index + 1 }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel()\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StepperIndicatorDirective, selector: "span[monaStepperIndicator]", inputs: ["active", "focused", "rounded"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: StepperComponent, isStandalone: true, selector: "mona-stepper", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, progressAriaLabel: { classPropertyName: "progressAriaLabel", publicName: "progressAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { step: "stepChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() || messages().stepper", "class": "baseClass()", "style": "hostStyles()" } }, queries: [{ propertyName: "indicatorTemplate", first: true, predicate: StepperIndicatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: StepperLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "stepTemplate", first: true, predicate: StepperStepTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ step.index + 1 }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel() || messages().stepProgress\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StepperIndicatorDirective, selector: "span[monaStepperIndicator]", inputs: ["active", "focused", "rounded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-stepper", imports: [NgTemplateOutlet, StepperIndicatorDirective], host: {
                         role: "group",
-                        "[attr.aria-label]": "ariaLabel()",
+                        "[attr.aria-label]": "ariaLabel() || messages().stepper",
                         "[class]": "baseClass()",
                         "[style]": "hostStyles()"
-                    }, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ step.index + 1 }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel()\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n" }]
+                    }, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ step.index + 1 }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel() || messages().stepProgress\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { indicatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperIndicatorTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], labelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], stepTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperStepTemplateDirective), { ...{
@@ -470,5 +488,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { StepperComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperStepTemplateDirective };
+export { STEPPER_DEFAULT_MESSAGES, StepperComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperStepTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-stepper.mjs.map

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

@@ -86,7 +86,7 @@ const switchHandleThemeVariants = cva(`
         ${themeRaisedSurfaceClasses} text-foreground
         border border-border-subtle shadow-(--shadow-control)
         outline-none
-        transition-[left,background] duration-(--mona-motion-standard) ease-in-out
+        transition-[inset-inline-start,background] duration-(--mona-motion-standard) ease-in-out
         data-[active='true']:bg-primary-foreground
         group-data-[disabled='true']:border-disabled-border
         group-data-[disabled='true']:bg-disabled-background
@@ -102,18 +102,18 @@ const switchHandleThemeVariants = cva(`
         size: {
             large: `
                     h-6 w-6
-                    data-[active='true']:left-[calc(100%-26px)]
-                    data-[active='false']:left-0.5
+                    data-[active='true']:start-[calc(100%-26px)]
+                    data-[active='false']:start-0.5
                 `,
             medium: `
                     h-5 w-5
-                    data-[active='true']:left-[calc(100%-22px)]
-                    data-[active='false']:left-0.5
+                    data-[active='true']:start-[calc(100%-22px)]
+                    data-[active='false']:start-0.5
                 `,
             small: `
                     h-4 w-4
-                    data-[active='true']:left-[calc(100%-18px)]
-                    data-[active='false']:left-0.5
+                    data-[active='true']:start-[calc(100%-18px)]
+                    data-[active='false']:start-0.5
                 `
         }
     }
@@ -135,8 +135,6 @@ class SwitchComponent {
             return twMerge(classes, this.userClass());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.checked())), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.handleClasses = computed(() => {
             const rounded = this.rounded();
             const size = this.size();
@@ -145,6 +143,8 @@ class SwitchComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "handleClasses" }] : /* istanbul ignore next */ []));
         this.handleContentTemplate = contentChild(SwitchHandleContentTemplateDirective, { ...(ngDevMode ? { debugName: "handleContentTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.checked())), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.labelClasses = computed(() => {
             const classes = switchLabelThemeVariants();
             return twMerge(classes);