@eagami/ui 4.6.0 → 4.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "4.6.0",
+  "version": "4.8.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

@@ -7,7 +7,7 @@ import * as _eagami_ui from '@eagami/ui';
  * BCP 47 locale tags supported out of the box. Consumers select one of these
  * via `provideEagamiUi({ locale })` or `EagamiI18nService.setLocale()`.
  */
-type EagamiLocale = 'en' | 'de' | 'es-ES' | 'fr-FR' | 'is' | 'nl' | 'pl' | 'pt-BR' | 'el' | 'ru' | 'uk' | 'zh-CN';
+type EagamiLocale = 'en' | 'de' | 'es-ES' | 'fr-FR' | 'is' | 'nl' | 'pl' | 'pt-BR' | 'el' | 'ru' | 'uk' | 'he' | 'ar' | 'hi' | 'zh-CN';
 /**
  * Display metadata for a built-in locale: the language's name in its own
  * language and a representative flag emoji.
@@ -16,6 +16,8 @@ interface EagamiLocaleMeta {
     locale: EagamiLocale;
     label: string;
     flag: string;
+    /** Reading direction of the locale's script, for consumers wiring `dir`. */
+    dir: 'ltr' | 'rtl';
 }
 /**
  * Display metadata for every built-in locale. The single source the Storybook
@@ -1575,8 +1577,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 +2276,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;