@eagami/ui 4.6.0 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/src/styles/_rtl.scss

@@ -0,0 +1,38 @@
+// Sign multiplier for horizontal translate animations: +1 in LTR, -1 in RTL, so
+// a single `translateX(calc(<x> * var(--ea-rtl-sign)))` mirrors automatically.
+:where(:root) {
+  --ea-rtl-sign: 1;
+}
+
+[dir='rtl'] {
+  --ea-rtl-sign: -1;
+}
+
+// Horizontally mirrors directional glyphs (prev/next chevrons, breadcrumb
+// separators, transfer arrows) when an ancestor sets dir="rtl". Opt in by
+// adding the `ea-rtl-flip` class to the icon element.
+[dir='rtl'] .ea-rtl-flip {
+  transform: scaleX(-1);
+}
+
+// background-position has no logical keyword, so flip the paginator select's
+// native chevron from the inline-end to the inline-start edge under RTL.
+[dir='rtl'] .ea-paginator__select {
+  background-position: left 6px center;
+}
+
+// The tree disclosure chevron points toward the inline-start (left) when
+// collapsed in RTL; the open state still rotates down. A 180deg turn keeps it in
+// pure-rotation space so the expand transition stays smooth. Must live here, not
+// the component, because the dir ancestor is outside its encapsulation scope.
+[dir='rtl'] .ea-tree-node__chevron:not(.ea-tree-node__chevron--open) {
+  transform: rotate(180deg);
+}
+
+// Native fields use dir="auto" so typed LTR text stays LTR, but that resolves
+// an empty field to LTR and parks its placeholder on the left. Pin them to the
+// inline-end edge so every RTL field reads from the right like the others.
+[dir='rtl'] input[dir='auto'],
+[dir='rtl'] textarea[dir='auto'] {
+  text-align: right;
+}

package/src/styles/eagami-ui.scss

@@ -4,3 +4,4 @@
 @use 'tokens/index';
 @use 'reset';
 @use 'tooltip';
+@use 'rtl';

package/types/eagami-ui.d.ts

@@ -1575,8 +1575,11 @@ declare class DividerComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<DividerComponent, "ea-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "thick": { "alias": "thick"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** Edge of the viewport from which the drawer slides in. */
-type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Edge of the viewport from which the drawer slides in. `start`/`end` are
+ * direction-aware (start = left in LTR, right in RTL); `left`/`right` are fixed.
+ */
+type DrawerPosition = 'left' | 'right' | 'top' | 'bottom' | 'start' | 'end';
 /** Width of the drawer panel along its primary axis. */
 type DrawerWidth = EaWidth;
 /**
@@ -2271,6 +2274,8 @@ interface PopoverPositionOptions {
     readonly margin?: number;
     /** Set the popover's width to match the anchor's. Useful for dropdown-style menus. */
     readonly matchAnchorWidth?: boolean;
+    /** Right-to-left context. Swaps `-start`/`-end` alignment so they track the reading direction. */
+    readonly rtl?: boolean;
 }
 interface Rect {
     readonly width: number;