@nanahoshi/mona-ui 0.18.5 → 0.19.0

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

@@ -96,7 +96,7 @@ const segmentedOptionThemeVariants = cva(`
     }
 });
 const segmentedIndicatorThemeVariants = cva(`
-        pointer-events-none absolute top-0 left-0
+        pointer-events-none absolute top-0 start-0
         bg-primary shadow-sm ring-1 ring-selected-border
         data-[disabled='true']:opacity-50
         motion-reduce:transition-none

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

@@ -6,12 +6,17 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LucideX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { classInputToClass } from '@nanahoshi/mona-ui/common';
+import { MonaI18nService, mergeMessages } from '@nanahoshi/mona-ui/i18n';
 import { themeOverlaySurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { PopupService, PopupCloseEvent, PopupCloseSource, slideFromLeftPopupAnimation, slideFromBottomPopupAnimation, slideFromRightPopupAnimation, slideFromTopPopupAnimation } from '@nanahoshi/mona-ui/popup';
 import { take } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+const SHEET_DEFAULT_MESSAGES = {
+    closeSheet: "Close sheet"
+};
+
 /**
  * `overflow-clip` rather than `overflow-hidden` is deliberate. `hidden` would make the sheet a scroll
  * container, letting the browser scroll it to reveal content that takes focus while the enter animation
@@ -19,17 +24,18 @@ import { cva } from 'class-variance-authority';
  */
 const sheetBaseVariants = cva(`
         relative flex h-full w-full min-w-0 min-h-0 max-h-[inherit] flex-col overflow-clip
-        pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)]
-        pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)]
+        pt-[env(safe-area-inset-top)] pe-[env(safe-area-inset-right)]
+        pb-[env(safe-area-inset-bottom)] ps-[env(safe-area-inset-left)]
+        rtl:pe-[env(safe-area-inset-left)] rtl:ps-[env(safe-area-inset-right)]
         ${themeOverlaySurfaceClasses} text-foreground
         shadow-(--shadow-overlay) outline-none
     `, {
     variants: {
         side: {
             top: "border-b border-border",
-            right: "border-l border-border",
+            right: "border-s border-border rtl:border-e rtl:border-s-0",
             bottom: "border-t border-border",
-            left: "border-r border-border"
+            left: "border-e border-border rtl:border-s rtl:border-e-0"
         }
     },
     defaultVariants: {
@@ -49,7 +55,9 @@ const sheetCloseButtonVariants = cva(`min-h-11 min-w-11 shrink-0`);
 class SheetComponent {
     #destroyRef;
     #document;
+    #i18n;
     #injector;
+    #localeMessages;
     #popupService;
     #destroyed;
     #horizontal;
@@ -57,7 +65,9 @@ class SheetComponent {
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#document = inject(DOCUMENT);
+        this.#i18n = inject(MonaI18nService);
         this.#injector = inject(Injector);
+        this.#localeMessages = this.#i18n.componentMessages("sheet", SHEET_DEFAULT_MESSAGES);
         this.#popupService = inject(PopupService);
         this.#destroyed = false;
         this.#horizontal = false;
@@ -78,6 +88,10 @@ class SheetComponent {
         this.descriptionId = createElementControlId();
         this.headerClass = computed(() => sheetHeaderVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+        this.resolvedMessages = computed(() => {
+            return mergeMessages(this.#localeMessages(), this.messages());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedMessages" }] : /* istanbul ignore next */ []));
         this.titleClass = computed(() => sheetTitleVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
         this.titleId = createElementControlId();
@@ -88,6 +102,7 @@ class SheetComponent {
         this.closable = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
         /** @description Emitted before the sheet closes. Call preventDefault() to keep it open. */
+        // eslint-disable-next-line @angular-eslint/no-output-native
         this.close = output();
         /** @description Whether clicking the backdrop requests that the sheet close. @default true */
         this.closeOnBackdropClick = input(true, /* @ts-ignore */
@@ -103,6 +118,9 @@ class SheetComponent {
         /** @description Explicit sheet height. Numbers are interpreted as pixels. */
         this.height = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
+        /** @description Internationalization message overrides for accessible labels. */
+        this.messages = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "messages" }] : /* istanbul ignore next */ []));
         /** @description Edge of the viewport from which the sheet opens. @default "right" */
         this.side = input("right", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
@@ -225,14 +243,14 @@ class SheetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SheetComponent, isStandalone: true, selector: "mona-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed" }, host: { classAttribute: "hidden" }, viewQueries: [{ propertyName: "sheetTemplate", first: true, predicate: ["sheetTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #sheetTemplate>\n    <section\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"true\"\n        [class]=\"baseClass()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        [attr.aria-labelledby]=\"title() ? titleId : null\"\n        [attr.aria-describedby]=\"description() ? descriptionId : null\"\n        [attr.aria-label]=\"!title() ? ariaLabel() : null\">\n        @if (title() || description() || closable()) {\n            <header [class]=\"headerClass()\">\n                <div class=\"min-w-0 flex-1\">\n                    @if (title()) {\n                        <h2 [id]=\"titleId\" [class]=\"titleClass()\">{{ title() }}</h2>\n                    }\n                    @if (description()) {\n                        <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ description() }}</p>\n                    }\n                </div>\n                @if (closable()) {\n                    <button\n                        monaButton\n                        type=\"button\"\n                        look=\"ghost\"\n                        [iconOnly]=\"true\"\n                        aria-label=\"Close sheet\"\n                        size=\"small\"\n                        [class]=\"closeButtonClass()\"\n                        (click)=\"closeSheet()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </header>\n        }\n        <div [class]=\"contentClass()\">\n            <ng-content></ng-content>\n        </div>\n    </section>\n</ng-template>\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: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SheetComponent, isStandalone: true, selector: "mona-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed" }, host: { classAttribute: "hidden" }, viewQueries: [{ propertyName: "sheetTemplate", first: true, predicate: ["sheetTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #sheetTemplate>\n    <section\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"true\"\n        [class]=\"baseClass()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        [attr.aria-labelledby]=\"title() ? titleId : null\"\n        [attr.aria-describedby]=\"description() ? descriptionId : null\"\n        [attr.aria-label]=\"!title() ? ariaLabel() : null\">\n        @if (title() || description() || closable()) {\n            <header [class]=\"headerClass()\">\n                <div class=\"min-w-0 flex-1\">\n                    @if (title()) {\n                        <h2 [id]=\"titleId\" [class]=\"titleClass()\">{{ title() }}</h2>\n                    }\n                    @if (description()) {\n                        <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ description() }}</p>\n                    }\n                </div>\n                @if (closable()) {\n                    <button\n                        monaButton\n                        type=\"button\"\n                        look=\"ghost\"\n                        [iconOnly]=\"true\"\n                        [attr.aria-label]=\"resolvedMessages().closeSheet\"\n                        size=\"small\"\n                        [class]=\"closeButtonClass()\"\n                        (click)=\"closeSheet()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </header>\n        }\n        <div [class]=\"contentClass()\">\n            <ng-content></ng-content>\n        </div>\n    </section>\n</ng-template>\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: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SheetComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-sheet", imports: [ButtonDirective, CdkTrapFocus, LucideX], host: {
                         class: "hidden"
-                    }, template: "<ng-template #sheetTemplate>\n    <section\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"true\"\n        [class]=\"baseClass()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        [attr.aria-labelledby]=\"title() ? titleId : null\"\n        [attr.aria-describedby]=\"description() ? descriptionId : null\"\n        [attr.aria-label]=\"!title() ? ariaLabel() : null\">\n        @if (title() || description() || closable()) {\n            <header [class]=\"headerClass()\">\n                <div class=\"min-w-0 flex-1\">\n                    @if (title()) {\n                        <h2 [id]=\"titleId\" [class]=\"titleClass()\">{{ title() }}</h2>\n                    }\n                    @if (description()) {\n                        <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ description() }}</p>\n                    }\n                </div>\n                @if (closable()) {\n                    <button\n                        monaButton\n                        type=\"button\"\n                        look=\"ghost\"\n                        [iconOnly]=\"true\"\n                        aria-label=\"Close sheet\"\n                        size=\"small\"\n                        [class]=\"closeButtonClass()\"\n                        (click)=\"closeSheet()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </header>\n        }\n        <div [class]=\"contentClass()\">\n            <ng-content></ng-content>\n        </div>\n    </section>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { sheetTemplate: [{ type: i0.ViewChild, args: ["sheetTemplate", { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+                    }, template: "<ng-template #sheetTemplate>\n    <section\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"true\"\n        [class]=\"baseClass()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        [attr.aria-labelledby]=\"title() ? titleId : null\"\n        [attr.aria-describedby]=\"description() ? descriptionId : null\"\n        [attr.aria-label]=\"!title() ? ariaLabel() : null\">\n        @if (title() || description() || closable()) {\n            <header [class]=\"headerClass()\">\n                <div class=\"min-w-0 flex-1\">\n                    @if (title()) {\n                        <h2 [id]=\"titleId\" [class]=\"titleClass()\">{{ title() }}</h2>\n                    }\n                    @if (description()) {\n                        <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ description() }}</p>\n                    }\n                </div>\n                @if (closable()) {\n                    <button\n                        monaButton\n                        type=\"button\"\n                        look=\"ghost\"\n                        [iconOnly]=\"true\"\n                        [attr.aria-label]=\"resolvedMessages().closeSheet\"\n                        size=\"small\"\n                        [class]=\"closeButtonClass()\"\n                        (click)=\"closeSheet()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </header>\n        }\n        <div [class]=\"contentClass()\">\n            <ng-content></ng-content>\n        </div>\n    </section>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { sheetTemplate: [{ type: i0.ViewChild, args: ["sheetTemplate", { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/sheet
@@ -242,5 +260,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SheetComponent };
+export { SHEET_DEFAULT_MESSAGES, SheetComponent };
 //# sourceMappingURL=nanahoshi-mona-ui-sheet.mjs.map

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

@@ -3,6 +3,7 @@ import { CdkTrapFocus } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import { signal, computed, Service, InjectionToken, inject, PLATFORM_ID, linkedSignal, effect, untracked, ElementRef, Injector, input, model, afterNextRender, ChangeDetectionStrategy, Component, DestroyRef, Directive, makeEnvironmentProviders } from '@angular/core';
 import { classInputToClass } from '@nanahoshi/mona-ui/common';
+import { injectComponentDirection } from '@nanahoshi/mona-ui/i18n';
 import { twMerge } from 'tailwind-merge';
 import { createElementControlId, themeRaisedBackdropClasses } from '@nanahoshi/mona-ui/internal';
 import { isPlatformBrowser } from '@angular/common';
@@ -410,9 +411,19 @@ const sidebarBorderAllowance = Object.freeze({
  * split pane — overlays only that region, and a layout that fills the page behaves identically.
  */
 const sidebarLayoutBaseThemeVariants = cva(`
-        relative flex flex-row w-full h-screen h-dvh
+        relative flex w-full h-screen h-dvh
         overflow-hidden
-    `);
+    `, {
+    variants: {
+        reverse: {
+            true: "flex-row-reverse",
+            false: "flex-row"
+        }
+    },
+    defaultVariants: {
+        reverse: false
+    }
+});
 const sidebarContentThemeVariants = cva("flex-1", {
     variants: {
         iconOnly: {
@@ -615,13 +626,9 @@ const sidebarThemeVariants = cva(`
         motion-reduce:transition-none
     `, {
     variants: {
-        // `side` only decides placement; the border it implies is applied per variant below,
-        // so the `floating` and `inset` treatments are not left fighting a single edge border.
-        // Flex order is already direction-relative, which is why the borders below have to be
-        // logical too — a physical `border-r` would land on the wrong edge under RTL.
-        side: {
-            start: "order-first",
-            end: "order-last"
+        physicalSide: {
+            left: "order-first",
+            right: "order-last"
         },
         variant: {
             sidebar: `h-full ${themeRaisedBackdropClasses}`,
@@ -641,10 +648,10 @@ const sidebarThemeVariants = cva(`
             false: ""
         },
         /**
-         * The compact presentation. The panel leaves the flex flow and becomes an overlay pinned to
-         * one edge, sliding in on `translate` rather than `width` — a drawer that animated its width
-         * would reflow its own contents for the whole transition.
-         */
+          * The compact presentation. The panel leaves the flex flow and becomes an overlay pinned to
+          * one edge, sliding in on `translate` rather than `width` — a drawer that animated its width
+          * would reflow its own contents for the whole transition.
+          */
         drawer: {
             true: `
                     absolute inset-y-0 z-50 h-full m-0
@@ -660,19 +667,22 @@ const sidebarThemeVariants = cva(`
         }
     },
     compoundVariants: [
-        { drawer: false, variant: "sidebar", side: "start", class: "border-e border-(--color-sidebar-border)" },
-        { drawer: false, variant: "sidebar", side: "end", class: "border-s border-(--color-sidebar-border)" },
+        { drawer: false, variant: "sidebar", physicalSide: "left", class: "border-r border-(--color-sidebar-border)" },
+        { drawer: false, variant: "sidebar", physicalSide: "right", class: "border-l border-(--color-sidebar-border)" },
         { drawer: false, variant: "floating", flush: true, class: "h-full" },
         { drawer: false, variant: "inset", flush: true, class: "h-full" },
         // A drawer is a surface in its own right whatever the docked variant looks like, so the
         // variant's margins, rounding and transparency are all dropped for it.
-        { drawer: true, side: "start", class: "start-0" },
-        { drawer: true, side: "end", class: "end-0" },
-        { drawer: true, open: false, side: "start", class: "-translate-x-full" },
-        { drawer: true, open: false, side: "end", class: "translate-x-full" },
+        { drawer: true, physicalSide: "left", class: "left-0" },
+        { drawer: true, physicalSide: "right", class: "right-0" },
+        { drawer: true, open: false, physicalSide: "left", class: "-translate-x-full" },
+        { drawer: true, open: false, physicalSide: "right", class: "translate-x-full" },
         { drawer: true, variant: "floating", class: "rounded-none" },
         { drawer: true, variant: "inset", class: "bg-(--color-sidebar)" }
-    ]
+    ],
+    defaultVariants: {
+        physicalSide: "left"
+    }
 });
 /**
  * The scrim behind an open drawer. Fades rather than sliding, so it is not competing with the panel's
@@ -713,12 +723,15 @@ const sidebarRailThemeVariants = cva(`
         sm:flex
     `, {
     variants: {
-        // The rail sits on the sidebar's inner edge, which is the opposite one to the side it is
-        // docked against. Logical, so it stays on the inner edge under RTL.
-        side: {
-            start: "end-0",
-            end: "start-0"
+        // The rail sits on the sidebar's inner edge, which is the opposite one to the physical side it is
+        // docked against.
+        physicalSide: {
+            left: "right-0",
+            right: "left-0"
         }
+    },
+    defaultVariants: {
+        physicalSide: "left"
     }
 });
 const sidebarSeparatorThemeVariants = cva(`
@@ -745,6 +758,7 @@ const sidebarSeparatorThemeVariants = cva(`
  * `role` and `ariaLabel` if the whole region is navigation.
  */
 class SidebarComponent {
+    #direction;
     #focusTrap;
     #host;
     #injector;
@@ -752,17 +766,28 @@ class SidebarComponent {
     #sidebarService;
     #restoreFocusTo;
     constructor() {
+        this.#direction = injectComponentDirection();
         this.#focusTrap = inject(CdkTrapFocus);
         this.#host = inject(ElementRef);
         this.#injector = inject(Injector);
         this.#layoutService = inject(SidebarLayoutService, { optional: true });
         this.#sidebarService = inject(SidebarService);
         this.#restoreFocusTo = null;
+        this.physicalSide = computed(() => {
+            const isRtl = this.#direction() === "rtl";
+            const side = this.#sidebarService.side();
+            if (side === "start") {
+                return isRtl ? "right" : "left";
+            }
+            return isRtl ? "left" : "right";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "physicalSide" }] : /* istanbul ignore next */ []));
+        this.drawerPhysicalSide = this.physicalSide;
         this.baseClass = computed(() => {
             const variantClass = sidebarThemeVariants({
                 drawer: this.drawer(),
+                physicalSide: this.physicalSide(),
                 open: this.#sidebarService.mobileOpen(),
-                side: this.#sidebarService.side(),
                 variant: this.variant(),
                 flush: this.offCanvasClosed()
             });
@@ -1010,6 +1035,40 @@ function toCssLength(value) {
     return typeof value === "number" ? `${value}px` : value;
 }
 
+function resolveSidebarLayoutReverse(options) {
+    const effectiveDirection = options.browserCssDirection ?? options.semanticDirection;
+    return effectiveDirection === "rtl";
+}
+function resolveSidebarLayoutBaseClass(options) {
+    const reverse = resolveSidebarLayoutReverse(options);
+    return twMerge(sidebarLayoutBaseThemeVariants({ reverse }), options.userClass ?? "");
+}
+
+function getComposedAncestors(startElement) {
+    const chain = [];
+    let current = startElement;
+    while (current) {
+        if (current instanceof Element) {
+            chain.push(current);
+        }
+        if (current.parentElement) {
+            current = current.parentElement;
+        }
+        else if (current.parentNode) {
+            const parent = current.parentNode;
+            if ("host" in parent && parent.host instanceof Element) {
+                current = parent.host;
+            }
+            else {
+                current = parent;
+            }
+        }
+        else {
+            break;
+        }
+    }
+    return chain;
+}
 /**
  * @description
  * Lays its children out in a row and owns what they share. Project one or more `mona-sidebar`
@@ -1023,15 +1082,28 @@ function toCssLength(value) {
  * closes any other, and they share the single backdrop this layout paints behind them.
  */
 class SidebarLayoutComponent {
+    #destroyRef;
+    #direction;
+    #host;
     #layoutService;
     #matches;
+    #browserCssDirection;
     constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#direction = injectComponentDirection();
+        this.#host = inject(ElementRef);
         this.#layoutService = inject(SidebarLayoutService);
         this.#matches = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#matches" }] : /* istanbul ignore next */ []));
+        this.#browserCssDirection = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#browserCssDirection" }] : /* istanbul ignore next */ []));
         this.backdropClass = computed(() => sidebarBackdropThemeVariants({ open: this.mobileOpen() }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
-        this.baseClass = computed(() => twMerge(sidebarLayoutBaseThemeVariants(), this.userClass()), /* @ts-ignore */
+        this.baseClass = computed(() => resolveSidebarLayoutBaseClass({
+            semanticDirection: this.#direction(),
+            browserCssDirection: this.#browserCssDirection(),
+            userClass: this.userClass()
+        }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.compact = this.#layoutService.compact;
         /** One backdrop serves every sidebar, because only one of their drawers is ever open. */
@@ -1050,6 +1122,7 @@ class SidebarLayoutComponent {
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
             transform: value => classInputToClass(value) });
         this.#watchBreakpoint();
+        this.#watchCssDirection();
     }
     onBackdropClick() {
         this.#layoutService.closeAll();
@@ -1097,6 +1170,116 @@ class SidebarLayoutComponent {
             });
         });
     }
+    /**
+     * CSS direction compensation contract:
+     * Reads computed CSS `direction` to compensate flex-row orientation so that semantic
+     * start/end docking matches physical left/right edges.
+     * Reactive updates are supported for:
+     * 1. Host and composed ancestor `class`, `style`, and `dir` mutations (including through `ShadowRoot` boundaries);
+     * 2. Viewport-responsive media query threshold changes via window resize.
+     * Dynamic modification of arbitrary stylesheet rules or adoptedStyleSheets without attribute or resize triggers is out of scope.
+     */
+    #watchCssDirection() {
+        let updateAncestorObservers = () => { };
+        const updateCssDirection = () => {
+            if (typeof window === "undefined") {
+                this.#browserCssDirection.set(null);
+                return;
+            }
+            const el = this.#host.nativeElement;
+            if (!el) {
+                this.#browserCssDirection.set(null);
+                return;
+            }
+            try {
+                const computedDir = window.getComputedStyle(el).direction;
+                if (computedDir === "rtl" || computedDir === "ltr") {
+                    this.#browserCssDirection.set(computedDir);
+                }
+                else {
+                    this.#browserCssDirection.set(null);
+                }
+            }
+            catch {
+                this.#browserCssDirection.set(null);
+            }
+            updateAncestorObservers();
+        };
+        updateCssDirection();
+        effect(() => {
+            this.#direction();
+            updateCssDirection();
+        });
+        afterNextRender(() => {
+            updateCssDirection();
+        });
+        if (typeof MutationObserver !== "undefined") {
+            let observedElements = new Set();
+            const observer = new MutationObserver(() => {
+                updateCssDirection();
+            });
+            updateAncestorObservers = () => {
+                const el = this.#host.nativeElement;
+                if (!el) {
+                    return;
+                }
+                const currentAncestors = getComposedAncestors(el);
+                const nextSet = new Set(currentAncestors);
+                let changed = nextSet.size !== observedElements.size;
+                if (!changed) {
+                    for (const item of nextSet) {
+                        if (!observedElements.has(item)) {
+                            changed = true;
+                            break;
+                        }
+                    }
+                }
+                if (changed) {
+                    observer.disconnect();
+                    observedElements = nextSet;
+                    for (const node of nextSet) {
+                        observer.observe(node, {
+                            attributes: true,
+                            attributeFilter: ["style", "class", "dir"]
+                        });
+                    }
+                }
+            };
+            updateAncestorObservers();
+            afterNextRender(() => {
+                updateAncestorObservers();
+                updateCssDirection();
+            });
+            this.#destroyRef.onDestroy(() => {
+                observer.disconnect();
+            });
+        }
+        if (typeof window !== "undefined") {
+            let resizeRafId = null;
+            const onResize = () => {
+                if (resizeRafId !== null) {
+                    return;
+                }
+                if (typeof window.requestAnimationFrame === "function") {
+                    resizeRafId = window.requestAnimationFrame(() => {
+                        resizeRafId = null;
+                        updateCssDirection();
+                    });
+                }
+                else {
+                    updateCssDirection();
+                }
+            };
+            window.addEventListener("resize", onResize, { passive: true });
+            this.#destroyRef.onDestroy(() => {
+                if (resizeRafId !== null && typeof window.cancelAnimationFrame === "function") {
+                    window.cancelAnimationFrame(resizeRafId);
+                    resizeRafId = null;
+                }
+                window.removeEventListener("resize", onResize);
+            });
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SidebarLayoutComponent, isStandalone: true, selector: "mona-sidebar-layout", inputs: { mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape($event)" }, properties: { "attr.data-compact": "compact() ? 'true' : null", "class": "baseClass()" } }, providers: [SidebarLayoutService], ngImport: i0, template: `
         <ng-content></ng-content>
@@ -1830,12 +2013,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  */
 class SidebarRailDirective {
     constructor() {
+        this.#direction = injectComponentDirection();
         this.#sidebarService = inject(SidebarService);
-        this.baseClass = computed(() => sidebarRailThemeVariants({ side: this.#sidebarService.side() }), /* @ts-ignore */
+        this.physicalSide = computed(() => {
+            const isRtl = this.#direction() === "rtl";
+            const side = this.#sidebarService.side();
+            if (side === "start") {
+                return isRtl ? "right" : "left";
+            }
+            return isRtl ? "left" : "right";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "physicalSide" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => sidebarRailThemeVariants({ physicalSide: this.physicalSide() }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.expanded = this.#sidebarService.expanded;
         this.sidebarId = this.#sidebarService.sidebarId;
     }
+    #direction;
     #sidebarService;
     onClick() {
         this.#sidebarService.toggle();