@escape-game-over/atlas 0.1.94 → 0.1.95

package/docs/rich-text.md

@@ -252,6 +252,10 @@ per `[v:name]` and one for links — usually in a small wrapper
 </p>
 ```
 
+A `[tel]` link renders with `dir="ltr"`: a number has no letters to set its
+direction, and on a right-to-left page it would otherwise read "2227 0244 965+".
+A number on its own, outside copy, is `@escape-game-over/atlas/astro/phone`.
+
 `attrs` puts attributes on a variant's run, so a script can find it and rewrite
 its words — see [client-scripts.md](client-scripts.md). A variant with neither a
 class nor attrs still renders its words, and warns at build.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@escape-game-over/atlas",
-    "version": "0.1.94",
+    "version": "0.1.95",
     "type": "module",
     "description": "Typed, data-driven machinery for static multi-locale, multi-deployment Astro sites.",
     "private": false,
@@ -23,6 +23,7 @@
         "./astro/element": "./src/astro/AtlasElement.astro",
         "./astro/google-map": "./src/astro/GoogleMap.astro",
         "./astro/image": "./src/astro/Image.astro",
+        "./astro/phone": "./src/astro/Phone.astro",
         "./astro/rich-text": "./src/astro/RichText.astro"
     },
     "bin": {
@@ -50,7 +51,7 @@
         "check-fmt": "biome check . --error-on-warnings"
     },
     "dependencies": {
-        "@types/google.maps": "3.66.9"
+        "@types/google.maps": "3.66.10"
     },
     "peerDependencies": {
         "@types/node": ">=22",
@@ -59,7 +60,7 @@
         "vite": ">= 8"
     },
     "devDependencies": {
-        "@biomejs/biome": "2.6.5",
+        "@biomejs/biome": "2.6.6",
         "@types/node": "26.6.6",
         "@vitest/coverage-istanbul": "5.1.0",
         "astro": "7.4.7",

package/src/astro/Phone.astro

@@ -0,0 +1,34 @@
+---
+/**
+ * A phone number on the page, kept left to right on a right-to-left one.
+ *
+ * ```astro
+ * <a href={telHref(phone)}><Phone phone={phone} /></a>
+ * ```
+ *
+ * "+965 2227 0244" has no letters to set its direction, so on an Arabic page
+ * the browser would lay it out right to left and show "2227 0244 965+". Its own
+ * element with `dir="ltr"` keeps it whole, the way the page expects a number
+ * to read, and copies as just the number. An email needs none of this: its
+ * letters already make it read left to right.
+ *
+ * Where a number sits inside copy, the `[tel]` mark does the same; this is for
+ * a number on its own. `formatPhone` stays plain text, for an aria label or a
+ * sentence built as a string.
+ */
+import type { HTMLAttributes } from "astro/types";
+import { formatPhone, type PhoneNumber } from "../contact.ts";
+
+// Anything a span takes, but not `dir`: that is the point of the component.
+type Props = Omit<HTMLAttributes<"span">, "dir"> & {
+    readonly phone: PhoneNumber;
+};
+
+const { phone, ...rest } = Astro.props;
+---
+
+<span
+    {...rest}
+    dir="ltr"
+    >{formatPhone(phone)}</span
+>

package/src/astro/RichText.astro

@@ -74,10 +74,20 @@ const variantAttrs = (variant: string) =>
                 </a>
             );
         case "mail":
+            return (
+                <a
+                    href={span.href}
+                    class={link}>
+                    {span.text}
+                </a>
+            );
+        // A number has no letters to set its direction; on a right-to-left
+        // page it would read "2227 0244 965+". See `Phone.astro`.
         case "tel":
             return (
                 <a
                     href={span.href}
+                    dir='ltr'
                     class={link}>
                     {span.text}
                 </a>