@raylang/elements 0.7.0 → 0.8.0

package/core/icons.js

@@ -13,6 +13,10 @@
 // setIcons({ close: … }) still changes every × and setIcons({ "ui.remove": … })
 // only the chips'.
 //
+// The roles that point along the text (ui.next, ui.previous, ui.disclosure…;
+// MIRRORED) are drawn mirrored in a right-to-left context, the glyph or the
+// app's own icon alike: the next page is to the left there.
+//
 // An icon may have a filled version, "<name>:filled", for a state: the active
 // tab, a favorite, unread. <ray-icon name="star" filled> draws it, and the
 // outline one when there is none. setIcons({ "star:filled": … }) adds one.
@@ -131,6 +135,14 @@ const ALIASES = {
   "ui.trend-flat": "minus",
 };
 
+/** The roles that point along the text: mirrored in a right-to-left context. */
+const MIRRORED = new Set(["ui.disclosure", "ui.previous", "ui.next", "ui.first", "ui.last", "ui.separator"]);
+
+/** Whether an icon is drawn mirrored right to left (a role that points along the text). */
+export function mirrorsInRtl(name) {
+  return MIRRORED.has(name);
+}
+
 const registry = new Map([...Object.entries(DEFAULTS), ...Object.entries(FILLED).map(([name, markup]) => [name + FILLED_SUFFIX, markup])]);
 const listeners = new Set();
 const warned = new Set();

package/core/position.js

@@ -5,12 +5,19 @@
 // side when it does not fit, and shifted to stay inside the viewport.
 // Done in JS rather than CSS anchor positioning, which not every webview
 // ships yet (WebKitGTK, older WKWebView).
+//
+// The sides top/bottom/left/right are sides of the screen; the alignments
+// -start/-end follow the writing direction of the floating element: right to
+// left, "bottom-start" lines up the right edges.
+
+import { isRtl } from "./direction.js";
 
 const OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" };
 
 /**
  * @typedef {object} PlaceOptions
- * @property {string} [placement]  side[-align]: top|bottom|left|right, -start|-end (default "bottom")
+ * @property {string} [placement]  side[-align]: top|bottom|left|right, -start|-end (default "bottom");
+ *   on top/bottom, -start/-end follow the writing direction
  * @property {number} [offset]     gap to the anchor in px (default 8)
  * @property {number} [padding]    minimum distance to the viewport edges (default 8)
  * @property {boolean} [flip]      try the opposite side when it does not fit (default true)
@@ -45,8 +52,9 @@ export function place(anchor, floating, { placement = "bottom", offset = 8, padd
   let y;
   if (side === "top" || side === "bottom") {
     y = side === "bottom" ? anchor.bottom + offset : anchor.top - offset - f.height;
-    x = align === "start" ? anchor.left
-      : align === "end" ? anchor.right - f.width
+    const rtl = align !== "center" && isRtl(floating);
+    x = align === (rtl ? "end" : "start") ? anchor.left
+      : align === (rtl ? "start" : "end") ? anchor.right - f.width
       : anchor.left + anchor.width / 2 - f.width / 2;
   } else {
     x = side === "right" ? anchor.right + offset : anchor.left - offset - f.width;

package/core/styles.js

@@ -154,7 +154,7 @@ export const loaderStyles = css`
     width: var(--_loader, 1em);
     height: var(--_loader, 1em);
     border: max(2px, calc(var(--_loader, 1em) / 8)) solid currentColor;
-    border-right-color: transparent;
+    border-right-color: transparent; /* physical */
     border-radius: 50%;
     animation: ray-spin 0.75s linear infinite;
   }

package/core.js

@@ -8,6 +8,7 @@ export { COLORS, VARIANT_TOKENS, applyColor, spaceValue, sizeStyles, radiusStyle
 export { place, pointRect, autoUpdate } from "./core/position.js";
 export { scrollerOf, watchScroll } from "./core/scroll.js";
 export { tabbables, focusFirst } from "./core/focus.js";
+export { isRtl, inlineKey } from "./core/direction.js";
 export { duration, motionAllowed, play, playAll, collapseOut, POP_OUT } from "./core/motion.js";
 export { dismissable } from "./core/dismiss.js";
 export { matchesHotkey, formatHotkey } from "./core/hotkey.js";

package/custom-elements.json

@@ -1504,11 +1504,11 @@
             {
               "name": "label-position",
               "type": {
-                "text": "\"right\" | \"left\""
+                "text": "\"end\" | \"start\" | \"right\" | \"left\""
               },
-              "description": "Side of the label.",
+              "description": "Side of the label: start/end follow the writing direction; left/right are sides of the screen.",
               "fieldName": "labelPosition",
-              "default": "right"
+              "default": "end"
             },
             {
               "name": "radius",
@@ -1654,12 +1654,12 @@
               "kind": "field",
               "name": "labelPosition",
               "type": {
-                "text": "\"right\" | \"left\""
+                "text": "\"end\" | \"start\" | \"right\" | \"left\""
               },
-              "description": "Side of the label.",
+              "description": "Side of the label: start/end follow the writing direction; left/right are sides of the screen.",
               "attribute": "label-position",
               "reflects": true,
-              "default": "right"
+              "default": "end"
             },
             {
               "kind": "field",
@@ -8238,11 +8238,11 @@
             {
               "name": "label-position",
               "type": {
-                "text": "\"right\" | \"left\""
+                "text": "\"end\" | \"start\" | \"right\" | \"left\""
               },
-              "description": "Side of the label.",
+              "description": "Side of the label: start/end follow the writing direction; left/right are sides of the screen.",
               "fieldName": "labelPosition",
-              "default": "right"
+              "default": "end"
             },
             {
               "name": "color",
@@ -8376,12 +8376,12 @@
               "kind": "field",
               "name": "labelPosition",
               "type": {
-                "text": "\"right\" | \"left\""
+                "text": "\"end\" | \"start\" | \"right\" | \"left\""
               },
-              "description": "Side of the label.",
+              "description": "Side of the label: start/end follow the writing direction; left/right are sides of the screen.",
               "attribute": "label-position",
               "reflects": true,
-              "default": "right"
+              "default": "end"
             },
             {
               "kind": "field",
@@ -10183,11 +10183,11 @@
             {
               "name": "side",
               "type": {
-                "text": "\"left\" | \"right\""
+                "text": "\"start\" | \"end\" | \"left\" | \"right\""
               },
-              "description": "The edge it sits on.",
+              "description": "The edge it sits on (its border faces the content, its narrow-screen drawer slides from there): start/end follow the writing direction; left/right are sides of the screen.",
               "fieldName": "side",
-              "default": "left"
+              "default": "start"
             },
             {
               "name": "variant",
@@ -10258,12 +10258,12 @@
               "kind": "field",
               "name": "side",
               "type": {
-                "text": "\"left\" | \"right\""
+                "text": "\"start\" | \"end\" | \"left\" | \"right\""
               },
-              "description": "The edge it sits on.",
+              "description": "The edge it sits on (its border faces the content, its narrow-screen drawer slides from there): start/end follow the writing direction; left/right are sides of the screen.",
               "attribute": "side",
               "reflects": true,
-              "default": "left"
+              "default": "start"
             },
             {
               "kind": "field",
@@ -10509,11 +10509,11 @@
             {
               "name": "icon-position",
               "type": {
-                "text": "\"left\" | \"top\""
+                "text": "\"start\" | \"top\" | \"left\""
               },
-              "description": "Label beside the number, or under it (narrow screens, many steps).",
+              "description": "Label beside the number (after it in the reading direction), or under it (narrow screens, many steps). \"left\", its former name, still works.",
               "fieldName": "iconPosition",
-              "default": "left"
+              "default": "start"
             },
             {
               "name": "allow-step-select",
@@ -10586,12 +10586,12 @@
               "kind": "field",
               "name": "iconPosition",
               "type": {
-                "text": "\"left\" | \"top\""
+                "text": "\"start\" | \"top\" | \"left\""
               },
-              "description": "Label beside the number, or under it (narrow screens, many steps).",
+              "description": "Label beside the number (after it in the reading direction), or under it (narrow screens, many steps). \"left\", its former name, still works.",
               "attribute": "icon-position",
               "reflects": true,
-              "default": "left"
+              "default": "start"
             },
             {
               "kind": "field",
@@ -11877,11 +11877,11 @@
             {
               "name": "position",
               "type": {
-                "text": "\"right\" | \"left\" | \"top\" | \"bottom\""
+                "text": "\"end\" | \"start\" | \"right\" | \"left\" | \"top\" | \"bottom\""
               },
-              "description": "The edge it slides from.",
+              "description": "The edge it slides from: start/end follow the writing direction; left/right are sides of the screen.",
               "fieldName": "position",
-              "default": "right"
+              "default": "end"
             },
             {
               "name": "size",
@@ -11968,12 +11968,12 @@
               "kind": "field",
               "name": "position",
               "type": {
-                "text": "\"right\" | \"left\" | \"top\" | \"bottom\""
+                "text": "\"end\" | \"start\" | \"right\" | \"left\" | \"top\" | \"bottom\""
               },
-              "description": "The edge it slides from.",
+              "description": "The edge it slides from: start/end follow the writing direction; left/right are sides of the screen.",
               "attribute": "position",
               "reflects": true,
-              "default": "right"
+              "default": "end"
             },
             {
               "kind": "field",
@@ -12147,7 +12147,7 @@
               "type": {
                 "text": "\"bottom-start\" | \"bottom\" | \"bottom-end\" | \"top-start\" | \"top\" | \"top-end\" | \"right-start\" | \"left-start\""
               },
-              "description": "Preferred side and alignment.",
+              "description": "Preferred side and alignment: top/bottom/left/right are sides of the screen; on top and bottom, -start/-end follow the writing direction (right to left, \"bottom-start\" lines up the right edges).",
               "fieldName": "placement",
               "default": "bottom-start"
             },
@@ -12202,7 +12202,7 @@
               "type": {
                 "text": "\"bottom-start\" | \"bottom\" | \"bottom-end\" | \"top-start\" | \"top\" | \"top-end\" | \"right-start\" | \"left-start\""
               },
-              "description": "Preferred side and alignment.",
+              "description": "Preferred side and alignment: top/bottom/left/right are sides of the screen; on top and bottom, -start/-end follow the writing direction (right to left, \"bottom-start\" lines up the right edges).",
               "attribute": "placement",
               "reflects": true,
               "default": "bottom-start"
@@ -12528,7 +12528,7 @@
               "type": {
                 "text": "\"bottom\" | \"bottom-start\" | \"bottom-end\" | \"top\" | \"top-start\" | \"top-end\" | \"left\" | \"left-start\" | \"left-end\" | \"right\" | \"right-start\" | \"right-end\""
               },
-              "description": "Preferred side and alignment.",
+              "description": "Preferred side and alignment: top/bottom/left/right are sides of the screen; on top and bottom, -start/-end follow the writing direction (right to left, \"bottom-start\" lines up the right edges).",
               "fieldName": "placement",
               "default": "bottom"
             },
@@ -12592,7 +12592,7 @@
               "type": {
                 "text": "\"bottom\" | \"bottom-start\" | \"bottom-end\" | \"top\" | \"top-start\" | \"top-end\" | \"left\" | \"left-start\" | \"left-end\" | \"right\" | \"right-start\" | \"right-end\""
               },
-              "description": "Preferred side and alignment.",
+              "description": "Preferred side and alignment: top/bottom/left/right are sides of the screen; on top and bottom, -start/-end follow the writing direction (right to left, \"bottom-start\" lines up the right edges).",
               "attribute": "placement",
               "reflects": true,
               "default": "bottom"
@@ -12750,7 +12750,7 @@
               "type": {
                 "text": "\"top\" | \"bottom\" | \"left\" | \"right\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\""
               },
-              "description": "Preferred side.",
+              "description": "Preferred side; -start/-end follow the writing direction.",
               "fieldName": "placement",
               "default": "top"
             },
@@ -12823,7 +12823,7 @@
               "type": {
                 "text": "\"top\" | \"bottom\" | \"left\" | \"right\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\""
               },
-              "description": "Preferred side.",
+              "description": "Preferred side; -start/-end follow the writing direction.",
               "attribute": "placement",
               "reflects": true,
               "default": "top"
@@ -12988,11 +12988,11 @@
             {
               "name": "chevron-position",
               "type": {
-                "text": "\"right\" | \"left\""
+                "text": "\"end\" | \"start\" | \"right\" | \"left\""
               },
-              "description": "Side of the chevron.",
+              "description": "Side of the chevron: start/end follow the writing direction; left/right are sides of the screen.",
               "fieldName": "chevronPosition",
-              "default": "right"
+              "default": "end"
             }
           ],
           "members": [
@@ -13031,12 +13031,12 @@
               "kind": "field",
               "name": "chevronPosition",
               "type": {
-                "text": "\"right\" | \"left\""
+                "text": "\"end\" | \"start\" | \"right\" | \"left\""
               },
-              "description": "Side of the chevron.",
+              "description": "Side of the chevron: start/end follow the writing direction; left/right are sides of the screen.",
               "attribute": "chevron-position",
               "reflects": true,
-              "default": "right"
+              "default": "end"
             },
             {
               "kind": "field",
@@ -14865,6 +14865,14 @@
               "description": "The filled version, for a state (active, selected, favorite, unread); the outline icon when there is none. Built in: user, info, circle-check, alert-triangle, circle-x, folder, bell, star, settings, home, message-circle.",
               "fieldName": "filled"
             },
+            {
+              "name": "mirror",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Mirrored in a right-to-left context (dir=\"rtl\"), for an icon that points along the text: back, forward, send, undo. The roles that do (ui.next, ui.previous, ui.first, ui.last, ui.disclosure, ui.separator) mirror by themselves.",
+              "fieldName": "mirror"
+            },
             {
               "name": "size",
               "type": {
@@ -14919,6 +14927,16 @@
               "attribute": "filled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "mirror",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Mirrored in a right-to-left context (dir=\"rtl\"), for an icon that points along the text: back, forward, send, undo. The roles that do (ui.next, ui.previous, ui.first, ui.last, ui.disclosure, ui.separator) mirror by themselves.",
+              "attribute": "mirror",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "size",
@@ -15871,11 +15889,11 @@
             {
               "name": "align",
               "type": {
-                "text": "\"left\" | \"right\""
+                "text": "\"start\" | \"end\" | \"left\" | \"right\""
               },
-              "description": "Side of the line.",
+              "description": "Side of the line: start/end follow the writing direction; left/right are sides of the screen.",
               "fieldName": "align",
-              "default": "left"
+              "default": "start"
             },
             {
               "name": "bullet-size",
@@ -15926,12 +15944,12 @@
               "kind": "field",
               "name": "align",
               "type": {
-                "text": "\"left\" | \"right\""
+                "text": "\"start\" | \"end\" | \"left\" | \"right\""
               },
-              "description": "Side of the line.",
+              "description": "Side of the line: start/end follow the writing direction; left/right are sides of the screen.",
               "attribute": "align",
               "reflects": true,
-              "default": "left"
+              "default": "start"
             },
             {
               "kind": "field",
@@ -16657,11 +16675,11 @@
             {
               "name": "position",
               "type": {
-                "text": "\"bottom-right\" | \"bottom-left\" | \"bottom-center\" | \"top-right\" | \"top-left\" | \"top-center\""
+                "text": "\"bottom-end\" | \"bottom-start\" | \"bottom-center\" | \"top-end\" | \"top-start\" | \"top-center\" | \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\""
               },
-              "description": "Corner of the stack.",
+              "description": "Corner of the stack: -start/-end follow the writing direction; -left/-right are sides of the screen.",
               "fieldName": "position",
-              "default": "bottom-right"
+              "default": "bottom-end"
             },
             {
               "name": "limit",
@@ -16704,12 +16722,12 @@
               "kind": "field",
               "name": "position",
               "type": {
-                "text": "\"bottom-right\" | \"bottom-left\" | \"bottom-center\" | \"top-right\" | \"top-left\" | \"top-center\""
+                "text": "\"bottom-end\" | \"bottom-start\" | \"bottom-center\" | \"top-end\" | \"top-start\" | \"top-center\" | \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\""
               },
-              "description": "Corner of the stack.",
+              "description": "Corner of the stack: -start/-end follow the writing direction; -left/-right are sides of the screen.",
               "attribute": "position",
               "reflects": true,
-              "default": "bottom-right"
+              "default": "bottom-end"
             },
             {
               "kind": "field",
@@ -19134,21 +19152,21 @@
             {
               "kind": "method",
               "name": "scrollToStart",
-              "description": "Scrolls to the top (left)."
+              "description": "Scrolls to the start: the top, or the left when horizontal (the right right to left)."
             },
             {
               "kind": "method",
               "name": "scrollToEnd",
-              "description": "Scrolls to the bottom (right when horizontal)."
+              "description": "Scrolls to the end: the bottom, or the right when horizontal (the left right to left)."
             }
           ],
           "events": [
             {
               "name": "ray-reach-end",
               "type": {
-                "text": "CustomEvent<{ edge: \"bottom\" | \"right\" }>"
+                "text": "CustomEvent<{ edge: \"bottom\" | \"right\" | \"left\" }>"
               },
-              "description": "The end came within threshold (once per arrival)."
+              "description": "The end came within threshold (once per arrival): the bottom, or the right when horizontal (the left right to left)."
             }
           ],
           "slots": [
@@ -19222,9 +19240,9 @@
             {
               "name": "label-position",
               "type": {
-                "text": "\"left\" | \"center\" | \"right\""
+                "text": "\"start\" | \"center\" | \"end\" | \"left\" | \"right\""
               },
-              "description": "Where the label sits.",
+              "description": "Where the label sits: start/end follow the writing direction; left/right are sides of the screen.",
               "fieldName": "labelPosition",
               "default": "center"
             },
@@ -19273,9 +19291,9 @@
               "kind": "field",
               "name": "labelPosition",
               "type": {
-                "text": "\"left\" | \"center\" | \"right\""
+                "text": "\"start\" | \"center\" | \"end\" | \"left\" | \"right\""
               },
-              "description": "Where the label sits.",
+              "description": "Where the label sits: start/end follow the writing direction; left/right are sides of the screen.",
               "attribute": "label-position",
               "reflects": true,
               "default": "center"