@a4ui/core 0.38.1 → 0.39.0

package/dist/lib/anchored.d.ts

@@ -14,3 +14,10 @@ export interface AnchorReflowOptions {
  * from any ancestor container, and scroll events do not bubble to `window`.
  */
 export declare function createAnchorReflow(options: AnchorReflowOptions): () => void;
+/**
+ * Viewport `left` for a fixed panel aligned with its trigger's inline-start edge,
+ * kept 8px inside the viewport. Under `dir="rtl"` that is the trigger's right
+ * edge, so the panel extends leftwards. The direction is read from the trigger,
+ * which also works for a `dir` set by a provider or an ancestor element.
+ */
+export declare function anchoredLeft(anchor: HTMLElement, panelWidth: number): number;

package/dist/lib/direction.d.ts

@@ -0,0 +1,18 @@
+import { Accessor } from 'solid-js';
+/** Text direction supported by {@link DirectionProvider}. */
+export type Direction = 'ltr' | 'rtl';
+/** Accessor of the nearest provider's direction, or `undefined` outside one. */
+export declare const DirectionContext: import('solid-js').Context<Accessor<Direction> | undefined>;
+/**
+ * Maps a physical horizontal arrow key to the key that means the same thing in
+ * reading order: under `rtl`, ArrowLeft moves forward and ArrowRight back, so
+ * handlers written for LTR can run on the swapped key. Other keys pass through.
+ */
+export declare function readingKey(key: string, dir: Direction): string;
+/**
+ * `ref` for a portal container (Solid `Portal` or any Kobalte `*.Portal`).
+ * Copies the nearest `DirectionProvider`'s direction onto the container so the
+ * overlay renders in the same direction as the tree that opened it. Outside a
+ * provider it does nothing, so the overlay inherits from `<body>` as before.
+ */
+export declare function portalDir(el: Element): void;

package/dist/styles.css

@@ -134,11 +134,22 @@ body {
   animation: modal-content-out 0.15s ease-in;
 }
 
+/* Reading direction as a number, so horizontal slide offsets can mirror:
+   `translateX(calc(16px * var(--dir-x)))`. Inherited, so any element (including
+   portaled overlays, which get their own `dir`) sees the nearest `dir`. */
+:root,
+[dir='ltr'] {
+  --dir-x: 1;
+}
+[dir='rtl'] {
+  --dir-x: -1;
+}
+
 /* Toast — same animationend-only presence mechanism as Dialog. */
 @keyframes toast-in {
   from {
     opacity: 0;
-    transform: translateX(16px);
+    transform: translateX(calc(16px * var(--dir-x, 1)));
   }
   to {
     opacity: 1;
@@ -152,7 +163,7 @@ body {
   }
   to {
     opacity: 0;
-    transform: translateX(16px);
+    transform: translateX(calc(16px * var(--dir-x, 1)));
   }
 }
 .toast-item[data-opened] {
@@ -167,7 +178,7 @@ body {
    on every theme; the sweep is a pure CSS animation (no engine). */
 @keyframes skeleton-shimmer {
   100% {
-    transform: translateX(100%);
+    transform: translateX(calc(100% * var(--dir-x, 1)));
   }
 }
 .skeleton-shimmer {
@@ -178,8 +189,13 @@ body {
   content: '';
   position: absolute;
   inset: 0;
-  transform: translateX(-100%);
-  background: linear-gradient(90deg, transparent, hsl(var(--foreground) / 0.08), transparent);
+  transform: translateX(calc(-100% * var(--dir-x, 1)));
+  background: linear-gradient(
+    calc(90deg * var(--dir-x, 1)),
+    transparent,
+    hsl(var(--foreground) / 0.08),
+    transparent
+  );
   animation: skeleton-shimmer 1.5s ease-in-out infinite;
 }
 
@@ -298,7 +314,7 @@ body {
 @keyframes questionnaire-step-in {
   from {
     opacity: 0;
-    transform: translateX(16px);
+    transform: translateX(calc(16px * var(--dir-x, 1)));
   }
   to {
     opacity: 1;
@@ -308,7 +324,7 @@ body {
 @keyframes questionnaire-step-in-back {
   from {
     opacity: 0;
-    transform: translateX(-16px);
+    transform: translateX(calc(-16px * var(--dir-x, 1)));
   }
   to {
     opacity: 1;
@@ -342,7 +358,7 @@ body {
 @keyframes navmenu-from-start {
   from {
     opacity: 0;
-    transform: translateX(-2.5rem);
+    transform: translateX(calc(-2.5rem * var(--dir-x, 1)));
   }
   to {
     opacity: 1;
@@ -352,7 +368,7 @@ body {
 @keyframes navmenu-from-end {
   from {
     opacity: 0;
-    transform: translateX(2.5rem);
+    transform: translateX(calc(2.5rem * var(--dir-x, 1)));
   }
   to {
     opacity: 1;
@@ -367,7 +383,7 @@ body {
   to {
     opacity: 0;
     visibility: hidden;
-    transform: translateX(-2.5rem);
+    transform: translateX(calc(-2.5rem * var(--dir-x, 1)));
   }
 }
 @keyframes navmenu-to-end {
@@ -378,7 +394,7 @@ body {
   to {
     opacity: 0;
     visibility: hidden;
-    transform: translateX(2.5rem);
+    transform: translateX(calc(2.5rem * var(--dir-x, 1)));
   }
 }
 .navmenu-viewport[data-expanded] {