npm - @microbit/ui - Versions diffs - 0.1.0-alpha.30 → 0.1.0-alpha.31 - Mend

@microbit/ui 0.1.0-alpha.30 → 0.1.0-alpha.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/README.md CHANGED Viewed

@@ -91,20 +91,31 @@ node_modules/@microbit/ui/lang/ui.fr.json --ast --out-file ...` (multiple
    their English catalog for those, and should then pass `en`, keeping the
    chosen language in their own settings for the embed. Everything downstream
    reads this locale as a statement about the rendered page — `<html lang>`
-   via `SharedUIProvider`, react-aria's text direction and built-in strings,
-   `Intl` number/date formatting and plural rules. A catalog that loads but
-   has per-message gaps (an incomplete translation) is still that language;
-   only a wholesale fallback to the English catalog should claim `en`.
+   and `<html dir>` via `SharedUIProvider`, react-aria's text direction and
+   built-in strings, `Intl` number/date formatting and plural rules. A catalog
+   that loads but has per-message gaps (an incomplete translation) is still
+   that language; only a wholesale fallback to the English catalog should
+   claim `en`.
 6. **`SharedUIProvider`** inside the `IntlProvider`, wrapping the app. It
    passes the locale on to react-aria, which translates its own built-in
    strings (see [Strings](#strings)); without it those follow the browser
-   rather than the app's language setting. It also keeps `<html lang>` in
-   step with the locale so assistive tech announces the page in the app's
-   language — pass `setDocumentLang={false}` where the app doesn't own the
-   document it's mounted in (an embedded widget). Also takes an optional
-   overlay-close registrar, so the app can dismiss open menus from outside
-   the tree (e.g. the Android hardware back button).
+   rather than the app's language setting. It also keeps `<html lang>` and
+   `<html dir>` in step with the locale, so assistive tech announces the page
+   in the app's language and an RTL language lays out the right way round —
+   pass `setDocumentLang={false}` where the app doesn't own the document it's
+   mounted in (an embedded widget). Also takes an optional overlay-close
+   registrar, so the app can dismiss open menus from outside the tree (e.g.
+   the Android hardware back button).
+   An app that passes `setDocumentLang={false}` **must set `dir` itself**,
+   on whatever element it mounts into, if it offers an RTL language. The two
+   halves of mirroring read the direction from different places: react-aria
+   takes it from the provider locale in JS and mirrors regardless of the DOM,
+   while logical properties and Panda's `_rtl` rules match on `dir`. With one
+   side mirrored and the other not, components that combine both come apart —
+   `Slider`'s thumb moves to the mirrored end while its filled track stays.
 7. **`ToastProvider`** once near the root, inside the two providers above.
 ## Upgrading in an app
@@ -176,6 +187,18 @@ To drop it all: raise `BUILD_TARGETS`/`browserslist` past the affected
 browsers, then remove the two PostCSS plugins (and this package's
 `postcss-legacy-safari` export).
+RTL is fine at this floor, with one thing to know. Panda's `_rtl` condition
+emits `:where([dir=rtl], :dir(rtl))`, and `:dir()` is Safari 16.4. At the
+pinned targets lightningcss rewrites that arm into a `:lang()` list, leaving
+the `[dir=rtl]` arm — which is the one `SharedUIProvider` sets — intact. So
+the legacy build matches on `dir` as intended, and additionally on
+`lang="ar"` and friends, which modern builds don't. Everything else the
+mirroring uses (logical longhands, `text-align: start`, custom properties in
+`calc()`) passes through untouched; only logical _shorthands_ need the shim,
+as before. `:where()` contributes no specificity, so the RTL rules win on
+source order — de-layering preserves it, since it pads later layers rather
+than reordering within one.
 ## The CSS-variable contract
 Panda emits every token as a CSS custom property with its default naming —
@@ -287,9 +310,9 @@ blank.
 Until this package's Crowdin project is wired up, the non-English catalogs are
 pre-Crowdin seeds — some strings AI-drafted, all of them for Crowdin to review
 — credited as follows. Translations of the same strings elsewhere in the
-micro:bit translation programme: ml-trainer and python-editor-v3, and
-MakeCode's editor strings, which are not in the pxt repo but can be fetched per
-locale from
+micro:bit translation programme: ml-trainer, python-editor-v3 and classroom,
+and MakeCode's editor strings, which are not in the pxt repo but can be fetched
+per locale from
 `https://makecode.microbit.org/api/translations?lang=<locale>&filename=strings.json&approved=true`.
 The `ui.toast-status-*` words come from Spectrum 2's InlineAlert catalogs
 (`@react-spectrum/s2/intl/*.json`, keys `inlinealert.informative` / `notice` /

package/lang/ui.ar.json ADDED Viewed

@@ -0,0 +1,62 @@
+{
+  "ui.breadcrumb": {
+    "defaultMessage": "مسار التنقل",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
+  "ui.close-action": {
+    "defaultMessage": "إغلاق",
+    "description": "Close button text or label"
+  },
+  "ui.combobox-listbox": {
+    "defaultMessage": "مقترحات",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "عرض المقترحات",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "جاري التحميل",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.new-tab-notice": {
+    "defaultMessage": "يفتح في علامة تبويب جديدة",
+    "description": "Visually hidden suffix on links that open a new tab, announced by screen readers"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "خفض {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "زيادة {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "حدد عنصرًا",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "تحديد",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, zero {لا إشعارات} one {إشعار واحد} two {إشعاران} few {# إشعارات} many {# إشعارًا} other {# إشعار}}.",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
+  "ui.toast-status-error": {
+    "defaultMessage": "خطأ",
+    "description": "Announced by screen readers before an error notification"
+  },
+  "ui.toast-status-info": {
+    "defaultMessage": "معلومات",
+    "description": "Announced by screen readers before an informational notification"
+  },
+  "ui.toast-status-success": {
+    "defaultMessage": "تم بنجاح",
+    "description": "Announced by screen readers before a success notification"
+  },
+  "ui.toast-status-warning": {
+    "defaultMessage": "تحذير",
+    "description": "Announced by screen readers before a warning notification"
+  }
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0-alpha.30",
+  "version": "0.1.0-alpha.31",
   "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
   "license": "MIT",
   "type": "module",

package/src/Avatar.recipe.ts CHANGED Viewed

@@ -65,6 +65,19 @@ export const avatar = defineSlotRecipe({
       borderWidth: "0.2em",
       borderStyle: "solid",
       borderColor: "white",
+      // The corner variants pin the badge with logical insets but nudge it
+      // out over the edge with a transform, which is physical — so the
+      // outward direction is a variable the RTL rule negates. Without it a
+      // `start` badge would sit at the right corner and nudge left, i.e.
+      // inwards over the avatar.
+      // Fallbacks carry a unit: `calc(-1 * 0)` is a number, which is invalid
+      // where a length is wanted, and would drop the RTL transform whole.
+      transform:
+        "translate(var(--avatar-badge-x, 0px), var(--avatar-badge-y, 0px))",
+      _rtl: {
+        transform:
+          "translate(calc(-1 * var(--avatar-badge-x, 0px)), var(--avatar-badge-y, 0px))",
+      },
     },
   },
   variants: {
@@ -141,21 +154,33 @@ export const avatar = defineSlotRecipe({
         badge: {
           top: "0",
           insetStart: "0",
-          transform: "translate(-25%, -25%)",
+          "--avatar-badge-x": "-25%",
+          "--avatar-badge-y": "-25%",
         },
       },
       "top-end": {
-        badge: { top: "0", insetEnd: "0", transform: "translate(25%, -25%)" },
+        badge: {
+          top: "0",
+          insetEnd: "0",
+          "--avatar-badge-x": "25%",
+          "--avatar-badge-y": "-25%",
+        },
       },
       "bottom-start": {
         badge: {
           bottom: "0",
           insetStart: "0",
-          transform: "translate(-25%, 25%)",
+          "--avatar-badge-x": "-25%",
+          "--avatar-badge-y": "25%",
         },
       },
       "bottom-end": {
-        badge: { bottom: "0", insetEnd: "0", transform: "translate(25%, 25%)" },
+        badge: {
+          bottom: "0",
+          insetEnd: "0",
+          "--avatar-badge-x": "25%",
+          "--avatar-badge-y": "25%",
+        },
       },
     },
   },

package/src/Breadcrumb.recipe.ts CHANGED Viewed

@@ -34,6 +34,12 @@ export const breadcrumb = defineSlotRecipe({
     },
     separator: {
       mx: "2",
+      // A chevron separator points along the trail, so it has to turn round
+      // in RTL. Scoped to an svg because the default separator is the text
+      // "/", which would become "\": a caller passing a glyph owns its
+      // direction, one passing an icon gets it handled. Override via the
+      // separator slot's css for an icon that shouldn't turn.
+      _rtl: { "& svg": { transform: "scaleX(-1)" } },
     },
   },
 });

package/src/Button.tsx CHANGED Viewed

@@ -48,9 +48,9 @@ export interface ButtonProps
   css?: SystemStyleObject;
   className?: string;
   /** Icon rendered before the label. */
-  leftIcon?: ReactNode;
+  startIcon?: ReactNode;
   /** Icon rendered after the label. */
-  rightIcon?: ReactNode;
+  endIcon?: ReactNode;
   /**
    * Show a spinner in place of the label and disable interaction: the label
    * stays in the layout but invisible, so the button keeps its size, and the
@@ -74,8 +74,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       tone,
       css: cssProp,
       className,
-      leftIcon,
-      rightIcon,
+      startIcon,
+      endIcon,
       isLoading,
       children,
       ...rest
@@ -84,12 +84,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ) {
     const label = (
       <>
-        {leftIcon ? (
-          <span className={buttonIcon({ side: "left" })}>{leftIcon}</span>
+        {startIcon ? (
+          <span className={buttonIcon({ side: "start" })}>{startIcon}</span>
         ) : null}
         {children}
-        {rightIcon ? (
-          <span className={buttonIcon({ side: "right" })}>{rightIcon}</span>
+        {endIcon ? (
+          <span className={buttonIcon({ side: "end" })}>{endIcon}</span>
         ) : null}
       </>
     );

package/src/Drawer.recipe.ts CHANGED Viewed

@@ -76,22 +76,34 @@ export const drawer = defineSlotRecipe({
     },
   },
   variants: {
+    // Reading-order sides, so a drawer keeps its relationship to the content
+    // in an RTL locale rather than its screen position. The slide-out
+    // transforms are physical, so each needs mirroring under `dir=rtl` to
+    // travel towards its own edge.
     placement: {
-      left: {
+      start: {
         content: {
-          left: 0,
+          insetStart: 0,
           "&[data-entering]": { transform: "translateX(-100%)" },
           "&[data-exiting]": { transform: "translateX(-100%)" },
+          _rtl: {
+            "&[data-entering]": { transform: "translateX(100%)" },
+            "&[data-exiting]": { transform: "translateX(100%)" },
+          },
         },
       },
-      right: {
+      end: {
         content: {
-          right: 0,
+          insetEnd: 0,
           "&[data-entering]": { transform: "translateX(100%)" },
           "&[data-exiting]": { transform: "translateX(100%)" },
+          _rtl: {
+            "&[data-entering]": { transform: "translateX(-100%)" },
+            "&[data-exiting]": { transform: "translateX(-100%)" },
+          },
         },
       },
     },
   },
-  defaultVariants: { placement: "left" },
+  defaultVariants: { placement: "start" },
 });

package/src/ExternalLink.tsx CHANGED Viewed

@@ -38,6 +38,6 @@ export const ExternalLink = ({ children, ...props }: ExternalLinkProps) => (
       {", "}
       <FormattedMessage {...uiMessage("ui.new-tab-notice")} />
     </VisuallyHidden>
-    <Icon as={RiExternalLinkLine} aria-hidden css={{ ml: 1 }} />
+    <Icon as={RiExternalLinkLine} aria-hidden css={{ ms: 1 }} />
   </Link>
 );

package/src/IconButton.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ import { forwardRef } from "react";
 import { Button, ButtonProps } from "./Button";
 export interface IconButtonProps
-  extends Omit<ButtonProps, "leftIcon" | "rightIcon"> {
+  extends Omit<ButtonProps, "startIcon" | "endIcon"> {
   /** Icon-only buttons have no visible label, so this is required. */
   "aria-label": string;
 }

package/src/InputGroup.tsx CHANGED Viewed

@@ -7,7 +7,8 @@ import { styled } from "styled-system/jsx";
 /**
  * InputGroup — relative wrapper for an Input with addon elements. Pad the
- * input (`pl`/`pr`) to make room for the elements.
+ * input (`ps`/`pe`) to make room for the elements; the elements sit on the
+ * reading-order sides, so physical padding lands opposite them in RTL.
  */
 export const InputGroup = styled("div", {
   base: { position: "relative", width: "100%", display: "flex" },
@@ -19,11 +20,11 @@ export const InputGroup = styled("div", {
 // size; pass the same `size` as the grouped Input.
 /** Element overlaying the start of an InputGroup. */
-export const InputLeftElement = styled("div", {
+export const InputStartElement = styled("div", {
   base: {
     position: "absolute",
     top: 0,
-    left: 0,
+    insetStart: 0,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -40,11 +41,11 @@ export const InputLeftElement = styled("div", {
 });
 /** Element overlaying the end of an InputGroup. */
-export const InputRightElement = styled("div", {
+export const InputEndElement = styled("div", {
   base: {
     position: "absolute",
     top: 0,
-    right: 0,
+    insetEnd: 0,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",

package/src/LinkButton.tsx CHANGED Viewed

@@ -20,9 +20,9 @@ export interface LinkButtonProps
   css?: SystemStyleObject;
   className?: string;
   /** Icon rendered before the label. */
-  leftIcon?: ReactNode;
+  startIcon?: ReactNode;
   /** Icon rendered after the label. */
-  rightIcon?: ReactNode;
+  endIcon?: ReactNode;
   children?: ReactNode;
 }
@@ -51,8 +51,8 @@ export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
       tone,
       css: cssProp,
       className,
-      leftIcon,
-      rightIcon,
+      startIcon,
+      endIcon,
       children,
       ...rest
     },
@@ -68,12 +68,12 @@ export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
         )}
         {...rest}
       >
-        {leftIcon ? (
-          <span className={buttonIcon({ side: "left" })}>{leftIcon}</span>
+        {startIcon ? (
+          <span className={buttonIcon({ side: "start" })}>{startIcon}</span>
         ) : null}
         {children}
-        {rightIcon ? (
-          <span className={buttonIcon({ side: "right" })}>{rightIcon}</span>
+        {endIcon ? (
+          <span className={buttonIcon({ side: "end" })}>{endIcon}</span>
         ) : null}
       </RACLink>
     );

package/src/Modal.recipe.ts CHANGED Viewed

@@ -33,6 +33,9 @@ const dialogBox = {
 };
 // The `full` variant also styles these slots; same symmetry requirement.
+// The header's padding stays physical to pair with that variant's
+// window-controls inset, which is a screen position rather than a
+// reading-order one; the base `px` covers the start side either way.
 const dialogSlots = {
   header: { pl: "6" },
   body: { overflowY: "visible" },

package/src/NativeSelect.tsx CHANGED Viewed

@@ -54,7 +54,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
               _disabled: { cursor: "not-allowed" },
             },
             // Room for the chevron overlay (constant across sizes).
-            hideChevron ? undefined : { paddingRight: "8" },
+            hideChevron ? undefined : { paddingEnd: "8" },
             cssProp,
           ),
           className,
@@ -83,7 +83,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           aria-hidden
           className={css({
             position: "absolute",
-            right: "2",
+            insetEnd: "2",
             top: "50%",
             transform: "translateY(-50%)",
             width: "5",

package/src/SharedUIProvider.tsx CHANGED Viewed

@@ -10,6 +10,7 @@ import {
   useEffect,
   useMemo,
 } from "react";
+import { isRTL } from "react-aria";
 import { I18nProvider } from "react-aria-components";
 import { IntlContext } from "react-intl";
 import { racLocale } from "./rac-locale";
@@ -37,11 +38,17 @@ export interface SharedUIProviderProps {
    */
   locale?: string;
   /**
-   * Keeps `<html lang>` in step with the locale, so assistive tech announces
-   * the page in the app's language. On by default; set false where the app
-   * doesn't own the document it's mounted in (an embedded widget), or when
-   * mounting more than one provider per page. The static `lang="en"` in
-   * index.html remains the pre-hydration default.
+   * Keeps `<html lang>` and `<html dir>` in step with the locale, so assistive
+   * tech announces the page in the app's language and the layout runs the
+   * right way round. On by default; set false where the app doesn't own the
+   * document it's mounted in (an embedded widget), or when mounting more than
+   * one provider per page. The static `lang="en"` in index.html remains the
+   * pre-hydration default.
+   *
+   * Turning it off in an RTL locale means the app must set `dir` itself above
+   * the components, or the UI half-mirrors: react-aria mirrors from the locale
+   * in JS whatever the DOM says, while logical properties and `_rtl` rules
+   * read `dir` (see the README's RTL note).
    *
    * Correct only when the IntlProvider locale is the language the app
    * actually renders in — an app falling back wholesale to its English
@@ -74,18 +81,23 @@ export const SharedUIProvider = ({
   // no IntlProvider: react-aria falls back to the browser locale, as before.
   const intlLocale = useContext(IntlContext)?.locale;
   const appLocale = locale ?? intlLocale;
+  // The tag react-aria gets, so the document's direction and the components'
+  // cannot disagree; also the only form isRTL can be handed safely, as it
+  // throws on a malformed tag.
+  const sanitizedLocale = racLocale(appLocale);
   useEffect(() => {
-    if (setDocumentLang && appLocale) {
+    if (setDocumentLang && appLocale && sanitizedLocale) {
       document.documentElement.lang = appLocale;
+      document.documentElement.dir = isRTL(sanitizedLocale) ? "rtl" : "ltr";
     }
-  }, [setDocumentLang, appLocale]);
+  }, [setDocumentLang, appLocale, sanitizedLocale]);
   const value = useMemo(
     () => ({ overlayCloseRegistrar }),
     [overlayCloseRegistrar],
   );
   return (
     <SharedUIContext.Provider value={value}>
-      <I18nProvider locale={racLocale(appLocale)}>{children}</I18nProvider>
+      <I18nProvider locale={sanitizedLocale}>{children}</I18nProvider>
     </SharedUIContext.Provider>
   );
 };

package/src/Slider.recipe.ts CHANGED Viewed

@@ -60,7 +60,9 @@ export const slider = defineSlotRecipe({
     filledTrack: {
       position: "absolute",
       top: 0,
-      left: 0,
+      // Logical, unlike the thumb: the fill grows from the track's start, so
+      // in RTL it fills from the right and the two still meet.
+      insetStart: 0,
       height: "100%",
       // Fill colour is set per call site via `filledTrackCss`.
       bg: "brand.500",

package/src/Slider.tsx CHANGED Viewed

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { ReactNode } from "react";
+import { useLocale } from "react-aria";
 import {
   Slider as RACSlider,
   SliderThumb,
@@ -40,8 +41,13 @@ export interface SliderProps {
   /**
    * Additional positioned overlays rendered inside the slider root
    * (always-visible value labels, threshold markers, ...). The root is
-   * position: relative; position children absolutely, typically with a
-   * percentage `left` for the track position.
+   * position: relative; position children absolutely.
+   *
+   * Anything sitting at a *value* along the track takes a percentage `left`,
+   * physical and mirrored by hand in RTL as the thumb is (see `offset`
+   * below), never `insetInlineStart`. Anything pinned to the track's *ends*
+   * — min/max labels and the like — is ordinary layout and should be
+   * logical, so `insetStart`/`insetEnd`.
    */
   children?: ReactNode;
   /**
@@ -76,7 +82,13 @@ export const Slider = ({
   onThumbFocusChange,
 }: SliderProps) => {
   const slots = slider();
+  const { direction } = useLocale();
   const percent = ((value - minValue) / (maxValue - minValue)) * 100;
+  // react-aria positions the thumb with a physical `left` that it mirrors
+  // itself in RTL (useSliderThumb), so anything tracking the thumb has to
+  // mirror the same way rather than going logical — `insetInlineStart` would
+  // put these on the opposite side of the track from the thumb.
+  const offset = direction === "rtl" ? 100 - percent : percent;
   return (
     <RACSlider
       value={value}
@@ -92,7 +104,7 @@ export const Slider = ({
         <div
           data-part="mark"
           className={cx(slots.mark, markCss ? css(markCss) : undefined)}
-          style={{ left: `${percent}%` }}
+          style={{ left: `${offset}%` }}
         >
           {mark}
         </div>
@@ -144,7 +156,7 @@ export const Slider = ({
               borderTopColor: "gray.700",
             },
           })}
-          style={{ left: `${percent}%` }}
+          style={{ left: `${offset}%` }}
         >
           {thumbTooltip}
         </div>

package/src/Switch.recipe.ts CHANGED Viewed

@@ -59,6 +59,19 @@ export const switchRecipe = defineSlotRecipe({
       transitionProperty: "transform",
       transitionDuration: "normal",
       borderRadius: "inherit",
+      // The thumb rests at the track's start and slides to its end, so the
+      // travel has to reverse in RTL — a transform is physical however the
+      // rest of the switch is laid out. Distance is per size, below.
+      // Fallbacks carry a unit: `calc(-1 * 0)` is a number, which is invalid
+      // where a length is wanted, and would drop the RTL transform whole.
+      "&[data-selected]": {
+        transform: "translateX(var(--switch-travel, 0px))",
+      },
+      _rtl: {
+        "&[data-selected]": {
+          transform: "translateX(calc(-1 * var(--switch-travel, 0px)))",
+        },
+      },
       _forcedColors: {
         bg: "ButtonText",
         "&[data-selected]": { bg: "SelectedItemText" },
@@ -89,32 +102,20 @@ export const switchRecipe = defineSlotRecipe({
         label: { marginStart: "0", marginEnd: "3" },
       },
     },
-    // Track width x height per size; the selected-thumb translate is the
-    // difference between them.
+    // Track width x height per size; the thumb's travel is the difference
+    // between them.
     size: {
       sm: {
         track: { width: "1.375rem", height: "3" },
-        thumb: {
-          width: "3",
-          height: "3",
-          "&[data-selected]": { transform: "translateX(0.625rem)" },
-        },
+        thumb: { width: "3", height: "3", "--switch-travel": "0.625rem" },
       },
       md: {
         track: { width: "1.875rem", height: "4" },
-        thumb: {
-          width: "4",
-          height: "4",
-          "&[data-selected]": { transform: "translateX(0.875rem)" },
-        },
+        thumb: { width: "4", height: "4", "--switch-travel": "0.875rem" },
       },
       lg: {
         track: { width: "2.875rem", height: "6" },
-        thumb: {
-          width: "6",
-          height: "6",
-          "&[data-selected]": { transform: "translateX(1.375rem)" },
-        },
+        thumb: { width: "6", height: "6", "--switch-travel": "1.375rem" },
       },
     },
   },

package/src/Toast.recipe.ts CHANGED Viewed

@@ -59,9 +59,9 @@ export const toast = defineSlotRecipe({
       p: "4",
       // Leave room for the absolutely-positioned close button plus breathing
       // space so its hover area never overlaps the title text (24px button at
-      // 4px inset spans ~4-28px from the right; content stops at 40px for a
-      // ~12px gap).
-      paddingRight: "10",
+      // 4px inset spans ~4-28px from the end edge; content stops at 40px for
+      // a ~12px gap). Logical, like the button's own inset.
+      paddingEnd: "10",
       borderRadius: "md",
       boxShadow: "lg",
       color: "white",

package/src/Tooltip.tsx CHANGED Viewed

@@ -19,15 +19,32 @@ export interface TooltipProps {
   label: ReactNode;
   /** A single focusable trigger element (e.g. a Button). */
   children: ReactElement;
+  /**
+   * Which side of the trigger the tooltip prefers. A preference, not a
+   * promise: react-aria flips it at runtime when the tooltip would leave the
+   * viewport, so pick the side that reads right rather than one that dodges
+   * an edge.
+   *
+   * `top`/`bottom` are direction-neutral and suit most tooltips.
+   * `start`/`end` follow reading order and mirror in RTL. `left`/`right` are
+   * screen sides and never mirror — reach for them only when the trigger is
+   * pinned to a physical edge.
+   */
   placement?:
     | "top"
     | "bottom"
+    | "start"
+    | "end"
     | "left"
     | "right"
     | "top start"
     | "top end"
     | "bottom start"
     | "bottom end"
+    | "start top"
+    | "start bottom"
+    | "end top"
+    | "end bottom"
     | "left top"
     | "left bottom"
     | "right top"

package/src/button-icon.ts CHANGED Viewed

@@ -15,8 +15,8 @@ export const buttonIcon = cva({
   },
   variants: {
     side: {
-      left: { marginEnd: "2" },
-      right: { marginStart: "2" },
+      start: { marginEnd: "2" },
+      end: { marginStart: "2" },
     },
   },
 });