@multiplatform.one/components 6.7.0 → 7.0.0

package/src/Quote/Quote.lc50.spec.tsx

@@ -0,0 +1,53 @@
+/**
+ * LC-82 TEXT-RIDES-TEXT (catalog arm): Quote's body and cite slots wrap ALL
+ * bare string/number children — runs of adjacent strings coalesce into the
+ * slot's own SizableText — so `{label}{cond ? suffix : ""}` renders the
+ * concatenated text instead of tripping the native "Text strings must be
+ * rendered within a <Text> component" invariant.
+ *
+ * A wrapped run renders a Text element (<span>/<cite>); a bare run's direct
+ * text holder would be the <blockquote>/<div> frame — asserting the
+ * getByText match is not the frame proves the string rides a Text component.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Quote } from "./index";
+
+describe("Quote LC-82 TEXT-RIDES-TEXT", () => {
+  it("renders array-of-strings body children as one concatenated wrapped run", () => {
+    renderWithProviders(
+      <Quote>
+        {"Invent"}
+        {" the future."}
+      </Quote>,
+    );
+    const body = screen.getByText("Invent the future.");
+    expect(body).toBeInTheDocument();
+    expect(body.tagName).not.toBe("BLOCKQUOTE");
+    expect(body.tagName).not.toBe("DIV");
+  });
+
+  it('renders the origin shape `{label}{cond ? suffix : ""}` when the condition is false', () => {
+    const suffix: number = 0;
+    renderWithProviders(
+      <Quote>
+        {"Invent the future."}
+        {suffix !== 0 ? ` (${suffix})` : ""}
+      </Quote>,
+    );
+    const body = screen.getByText("Invent the future.");
+    expect(body.tagName).not.toBe("BLOCKQUOTE");
+    expect(body.tagName).not.toBe("DIV");
+  });
+
+  it("renders an array-of-strings cite wrapped with the attribution dash", () => {
+    const { container } = renderWithProviders(
+      <Quote cite={["Alan", " Kay"]}>Invent the future.</Quote>,
+    );
+    const cite = screen.getByText("— Alan Kay");
+    expect(cite.tagName).not.toBe("DIV");
+    expect(container.querySelector("cite")).toBeTruthy();
+  });
+});

package/src/Quote/Quote.spec.tsx

@@ -9,9 +9,16 @@ describe("Quote", () => {
     expect(container.textContent).toContain("Invent the future.");
   });
 
-  it("renders cite attribution", () => {
+  it("renders cite attribution outside the quotation", () => {
     const { container } = renderWithProviders(<Quote cite="Alan Kay">Invent the future.</Quote>);
     expect(container.textContent).toContain("Alan Kay");
-    expect(container.querySelector("cite")).toBeTruthy();
+    const cite = container.querySelector("cite");
+    const blockquote = container.querySelector("blockquote");
+    const figcaption = container.querySelector("figcaption");
+    expect(cite).toBeTruthy();
+    expect(container.querySelector("figure")).toBeTruthy();
+    expect(figcaption).toBeTruthy();
+    expect(blockquote?.contains(cite)).toBe(false);
+    expect(figcaption?.contains(cite)).toBe(true);
   });
 });

package/src/Quote/Quote.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof Quote> = {
     docs: {
       description: {
         component:
-          "Standalone pull / block quote with logical-start accent bar (RTL-safe). Same chrome as markdown Blockquote, usable outside MDX.",
+          "Standalone pull / block quote: figure > blockquote + figcaption > cite, flush logical-start rail (RTL-safe). Same chrome as markdown Blockquote, usable outside MDX.",
       },
     },
   },

package/src/Quote/index.tsx

@@ -1,15 +1,16 @@
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import type { GetProps } from "tamagui";
-import { SizableText, View, YStack, getTokens, isWeb, styled, useTheme } from "tamagui";
+import { SizableText, View, XStack, YStack, styled } from "tamagui";
 import { componentColors } from "../componentColors";
+import { wrapBareTextChildren } from "../shared/textRidesText";
 
 // ── Types ─────────────────────────────────────────────────────
 
 export interface QuoteProps extends Omit<GetProps<typeof QuoteFrame>, "children"> {
   /** Quote body. */
   children: ReactNode;
-  /** Attribution / cite line. */
+  /** Attribution / cite line (rendered outside the quotation). */
   cite?: ReactNode;
   /** Compact padding / type. */
   compact?: boolean;
@@ -17,84 +18,100 @@ export interface QuoteProps extends Omit<GetProps<typeof QuoteFrame>, "children"
 
 // ── Styled ────────────────────────────────────────────────────
 
-const QuoteFrame = styled(YStack, {
+const QuoteFrame = styled(XStack, {
   name: "Quote",
   width: "100%",
+  alignItems: "stretch",
 });
 
+const QuoteRail = styled(View, {
+  name: "QuoteRail",
+  flexGrow: 0,
+  flexShrink: 0,
+  alignSelf: "stretch",
+  backgroundColor: componentColors.indicator.track,
+});
+
+const QuoteBody = styled(YStack, {
+  name: "QuoteBody",
+  flexGrow: 1,
+  flexShrink: 1,
+  minWidth: 0,
+});
+
+const QuoteBlock = styled(YStack, {
+  name: "QuoteBlock",
+  margin: 0,
+  padding: 0,
+  backgroundColor: "transparent",
+});
+
+// Primer / GitHub / GOV.UK inset-text: a start-edge rail ~0.25em at body
+// size (4px). Thickness tracks the borderWidth knob (none → 0; large → 8)
+// so LC-18 totality still reaches the quote's identity mark.
+function quoteRailWidth(borderWidth: number): number {
+  if (borderWidth <= 0) return 0;
+  return Math.max(4, borderWidth * 4);
+}
+
 // ── Component ─────────────────────────────────────────────────
 
 /**
- * Standalone pull / block quote. Mirrors the markdown Blockquote chrome
- * (logical-start accent bar) for use outside MDX.
+ * Standalone pull / block quote. HTML: `figure > blockquote + figcaption > cite`
+ * (attribution lives outside the quotation per the spec). Chrome: flush
+ * logical-start rail (XStack reverses in RTL) + SF-CARD frame.
  */
 export function Quote({ children, cite, compact = false, ...props }: QuoteProps) {
   const { knobProps } = useResolvedKnobs({ component: "Quote", compact });
-  const theme = useTheme();
-  const padToken = (compact ? "$3" : knobProps.panelPadding.padding) as number | string;
-  const pad =
-    typeof padToken === "number"
-      ? padToken
-      : ((getTokens().space as any)?.[padToken]?.val ?? padToken);
+  const railWidth = quoteRailWidth(knobProps.borderRadius.borderWidth);
+  const citeColor =
+    knobProps.textAccentColor === "$color" ? componentColors.text.muted : knobProps.textAccentColor;
 
   return (
     <QuoteFrame
-      render="blockquote"
+      render="figure"
       backgroundColor={componentColors.surface.background}
-      // Padded card frame: radius follows the knob with the Axiom 1
-      // child-clip cap (R-SCALE + cap, Blockquote contract).
+      overflow="hidden"
+      // R-SCALE quote frame (Axiom 1 child-clip cap). Padding lives on the
+      // content stack so the rail stays flush to the start edge.
       {...knobProps.containerRadius}
-      paddingVertical={compact ? "$2" : knobProps.gap.gap}
-      marginVertical={compact ? "$2" : "$3"}
-      {...(isWeb
-        ? {
-            style: {
-              borderInlineStartWidth: 4,
-              borderInlineStartStyle: "solid",
-              borderInlineStartColor: theme.color8?.val ?? theme.color8?.get() ?? "#999",
-              paddingInlineStart: pad,
-              marginInlineStart: 0,
-              marginInlineEnd: 0,
-            } as Record<string, unknown>,
-          }
-        : {
-            borderStartWidth: 4,
-            borderStartColor: componentColors.indicator.track,
-            paddingStart: padToken,
-          })}
+      marginVertical={knobProps.gap.gap}
       {...props}
     >
-      {typeof children === "string" ? (
-        <SizableText
-          {...knobProps.body}
-          // Quote body scales with the size knob (compact already steps the
-          // resolved sizeToken down one level via useResolvedKnobs).
-          fontSize={knobProps.sizeToken as any}
-          color={componentColors.text.primary}
-          fontStyle="italic"
-          lineHeight={knobProps.sizeToken as any}
-        >
-          {children}
-        </SizableText>
-      ) : (
-        children
-      )}
-      {cite != null ? (
-        <View marginTop={compact ? "$1.5" : "$2"}>
-          {typeof cite === "string" ? (
+      {railWidth > 0 ? <QuoteRail width={railWidth} minWidth={railWidth} aria-hidden /> : null}
+      <QuoteBody {...knobProps.panelPadding} {...knobProps.gap}>
+        <QuoteBlock render="blockquote">
+          {/* LC-82 TEXT-RIDES-TEXT: wrap ALL bare string/number children
+              (coalesced runs), not just the singleton case. Quote body
+              scales with the size knob; compact tightens layout gaps only
+              (it does not step sizeToken down). */}
+          {wrapBareTextChildren(children, (label, key) => (
             <SizableText
-              render="cite"
-              fontSize={compact ? "$1" : "$2"}
-              color={componentColors.text.muted}
-              fontStyle="normal"
+              key={key}
+              {...knobProps.body}
+              color={componentColors.text.primary}
+              fontStyle="italic"
             >
-              — {cite}
+              {label}
             </SizableText>
-          ) : (
-            cite
-          )}
-        </View>
-      ) : null}
+          ))}
+        </QuoteBlock>
+        {cite != null ? (
+          <View render="figcaption">
+            {wrapBareTextChildren(cite, (label, key) => (
+              <SizableText
+                key={key}
+                render="cite"
+                {...knobProps.label}
+                color={citeColor}
+                fontStyle="normal"
+              >
+                — {label}
+              </SizableText>
+            ))}
+          </View>
+        ) : null}
+      </QuoteBody>
     </QuoteFrame>
   );
 }

package/src/SheetModal/index.native.tsx

@@ -1,20 +1,13 @@
 /**
  * SheetModal (native) — React Native Modal bottom sheet.
  *
- * The web implementation (./index.tsx) renders a tamagui `Sheet modal`. On
- * device (Expo Go, tamagui 2.0.0-rc.41) the modal Sheet's portal/animation
- * machinery never (re)presents from a trigger tap — flipping `open` shows
- * nothing (mount-time opens present once, then the sheet is dead). This twin
- * swaps the overlay for a core React Native `Modal`, a native
- * view-controller presentation: no portal host, no animation driver — the
- * exact workaround proven by forms' FloatingPanel (index.native.tsx).
+ * Web twin (./index.tsx) is a tamagui `Sheet modal`. On device (Expo Go,
+ * tamagui 2.0.0-rc.41) that Sheet never (re)presents from a trigger tap.
+ * This twin uses a core RN `Modal` — same workaround as FloatingPanel.
  *
- * Semantics preserved:
- * - `open` presents; slide-up from the bottom, themed surface, drag-handle
- *   affordance, safe-area padding
- * - backdrop tap and the Android back button dismiss (onOpenChange(false))
- * - VoiceOver escape gesture (two-finger Z) dismisses
- * - opening tap cannot instantly self-dismiss (backdrop arms after onShow)
+ * Apple / gorhom anatomy: grabber, themed surface, top-only radius, backdrop
+ * tap + Android back + VoiceOver escape dismiss, keyboard avoiding, content
+ * height with a large-detent cap. LC-71: the frame is not a control.
  */
 
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -28,16 +21,16 @@ import {
   useWindowDimensions,
 } from "react-native";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import { View, YStack } from "tamagui";
+import { DialogRegionContext } from "../surfaces";
 
 import type { SheetModalProps } from "./index";
 export type { SheetModalProps } from "./index";
 
 const sheetMaxHeightRatio = 0.85;
-// Home-indicator / gesture-bar clearance (no react-native-safe-area-context
-// dependency in this package).
 const bottomInset = Platform.OS === "ios" ? 24 : 16;
+const IN_DIALOG_REGION = { inDialogRegion: true } as const;
 
 export function SheetModal({
   open,
@@ -61,7 +54,6 @@ export function SheetModal({
 
   const handleModalShow = useCallback(() => {
     if (armTimerRef.current) clearTimeout(armTimerRef.current);
-    // One frame + small delay so the opening tap cannot dismiss immediately.
     armTimerRef.current = setTimeout(() => setBackdropArmed(true), 280);
   }, []);
 
@@ -99,40 +91,50 @@ export function SheetModal({
           accessibilityRole="button"
           accessibilityLabel={t("Close")}
         >
-          <View flex={1} backgroundColor="rgba(0,0,0,0.4)" />
+          <View flex={1} backgroundColor="$shadow6" />
         </Pressable>
-        {/* Sheet sits above the absoluteFill backdrop in z-order (later
-            sibling). Do NOT claim the responder on a wrapper here — that
-            steals presses from content controls. */}
         <YStack
-          backgroundColor="$background"
-          borderTopLeftRadius="$6"
-          borderTopRightRadius="$6"
+          {...knobProps.surface}
+          {...knobProps.borderRadius}
+          borderBottomLeftRadius={0}
+          borderBottomRightRadius={0}
+          elevation={knobProps.elevation}
           maxHeight={maxHeight}
           paddingTop="$2"
           paddingBottom={bottomInset}
-          elevation="$4"
-          // VoiceOver escape gesture (two-finger Z) dismisses the sheet.
+          overflow="hidden"
+          outlineWidth={0}
+          focusStyle={{ outlineWidth: 0 }}
+          focusVisibleStyle={{ outlineWidth: 0 }}
+          accessibilityViewIsModal
           onAccessibilityEscape={close}
         >
           <View
             alignSelf="center"
-            width={40}
-            height={4}
-            borderRadius={2}
+            width={36}
+            height={5}
+            borderRadius={100}
             backgroundColor="$color8"
+            opacity={0.45}
             marginBottom="$2"
+            accessible={false}
           />
-          <YStack padding={knobProps.panelPadding.padding} gap={knobProps.gap.gap} flexShrink={1}>
-            {header}
-            {scrollable ? (
-              <RNScrollView style={{ flexGrow: 0 }} keyboardShouldPersistTaps="handled">
-                {children}
-              </RNScrollView>
-            ) : (
-              children
-            )}
-          </YStack>
+          <DialogRegionContext.Provider value={IN_DIALOG_REGION}>
+            <YStack
+              padding={knobProps.panelPadding.padding}
+              gap={knobProps.gap.gap}
+              flexShrink={1}
+            >
+              {header}
+              {scrollable ? (
+                <RNScrollView style={{ flexGrow: 0 }} keyboardShouldPersistTaps="handled">
+                  {children}
+                </RNScrollView>
+              ) : (
+                children
+              )}
+            </YStack>
+          </DialogRegionContext.Provider>
         </YStack>
       </KeyboardAvoidingView>
     </Modal>

package/src/SheetModal/index.tsx

@@ -1,21 +1,19 @@
 /**
- * SheetModal — modal bottom sheet presentation (web).
+ * SheetModal — modal bottom sheet (web).
  *
- * Thin wrapper over the tamagui `Sheet modal` grammar (Overlay + Handle +
- * SheetFrame) so catalog surfaces present the same sheet everywhere. The
- * native twin (./index.native.tsx) swaps the tamagui Sheet for a core RN
- * `Modal`: on device (Expo Go, tamagui 2.0.0-rc.41) the modal Sheet's
- * portal/animation machinery never (re)presents from a trigger tap — the
- * same upstream issue FloatingPanel's RN-Modal variant works around.
+ * Anatomy follows Apple HIG sheets (grabber, medium detent, swipe-to-dismiss),
+ * Radix Dialog (role=dialog, aria-modal, focus in/trap/return, Escape), and
+ * gorhom Bottom Sheet (overlay tap, snap-to-bottom, header + scroll body).
  *
- * Dismissal intent on web stays with the consumer (Escape wiring, LC-21):
- * the Sheet itself only dismisses on overlay tap / snap-to-bottom.
+ * Native twin: ./index.native.tsx (RN Modal — tamagui Sheet cannot re-present
+ * on device). Dismissal: overlay tap / snap-to-bottom / Escape (LC-21).
  */
 
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import type { ReactNode } from "react";
-import { Sheet } from "tamagui";
-import { SheetFrame } from "../surfaces";
+import { useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
+import { zIndex } from "@multiplatform.one/forms";
+import { useEffect, useId, useRef, type ReactNode, type RefObject } from "react";
+import { isWeb, Sheet, View } from "tamagui";
+import { DialogRegionContext, SheetFrame } from "../surfaces";
 
 export interface SheetModalProps {
   open: boolean;
@@ -29,6 +27,109 @@ export interface SheetModalProps {
   scrollable?: boolean;
 }
 
+const FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+const IN_DIALOG_REGION = { inDialogRegion: true } as const;
+
+/** LC-71: the sheet frame is not a control. Auto-focus must not paint a ring. */
+const frameRingReset = {
+  outlineWidth: 0,
+  outlineStyle: "none" as const,
+  focusStyle: { outlineWidth: 0, outlineStyle: "none" as const },
+  focusVisibleStyle: { outlineWidth: 0, outlineStyle: "none" as const },
+};
+
+function useSheetFrameFocus(open: boolean, frameRef: RefObject<HTMLElement | null>) {
+  const prevRef = useRef<HTMLElement | null>(null);
+  const wasOpenRef = useRef(false);
+  if (isWeb && typeof document !== "undefined") {
+    if (open && !wasOpenRef.current) {
+      prevRef.current = document.activeElement as HTMLElement | null;
+    }
+    wasOpenRef.current = open;
+  }
+
+  useEffect(() => {
+    if (!isWeb || typeof document === "undefined" || !open) return;
+    const frame = frameRef.current;
+    const restore = () => {
+      if (typeof document === "undefined") return;
+      const target = prevRef.current;
+      if (!target || !target.isConnected) return;
+      const ae = document.activeElement;
+      const dropped =
+        !ae || ae === document.body || ae === document.documentElement || !!frameRef.current?.contains(ae);
+      if (dropped) {
+        target.focus({
+          preventScroll: true,
+          focusVisible: wasKeyboardFocus(),
+        } as FocusOptions);
+      }
+    };
+    if (!frame || typeof frame.addEventListener !== "function") {
+      return () => {
+        requestAnimationFrame(() => requestAnimationFrame(restore));
+        setTimeout(restore, 320);
+      };
+    }
+
+    const focusIn = () => {
+      if (typeof document === "undefined") return;
+      if (frame.contains(document.activeElement)) return;
+      const first = frame.querySelector<HTMLElement>(FOCUSABLE);
+      (first ?? frame).focus({ preventScroll: true, focusVisible: false } as FocusOptions);
+    };
+    let innerRaf = 0;
+    const raf = requestAnimationFrame(() => {
+      innerRaf = requestAnimationFrame(focusIn);
+    });
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+      const focusables = Array.from(frame.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
+        (el) => el.offsetWidth > 0 || el.offsetHeight > 0,
+      );
+      if (!focusables.length) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const current = document.activeElement;
+      if (e.shiftKey && (current === first || current === frame)) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && current === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    frame.addEventListener("keydown", onKeyDown);
+    return () => {
+      cancelAnimationFrame(raf);
+      cancelAnimationFrame(innerRaf);
+      frame.removeEventListener("keydown", onKeyDown);
+      requestAnimationFrame(() => requestAnimationFrame(restore));
+      setTimeout(restore, 320);
+    };
+  }, [open, frameRef]);
+}
+
+function useSheetEscapeDismiss(open: boolean, onDismiss: () => void) {
+  const onDismissRef = useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+  useEffect(() => {
+    if (!isWeb || !open) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      onDismissRef.current();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+}
+
 export function SheetModal({
   open,
   onOpenChange,
@@ -38,8 +139,13 @@ export function SheetModal({
   scrollable,
 }: SheetModalProps) {
   const { knobProps } = useResolvedKnobs();
-  // LC-24: Sheet slide + overlay fade need a transition token (animation=none → undefined).
   const transition = knobProps.transition;
+  const titleId = useId();
+  const frameRef = useRef<HTMLElement | null>(null);
+
+  useSheetFrameFocus(open, frameRef);
+  useSheetEscapeDismiss(open, () => onOpenChange(false));
+
   return (
     <Sheet
       modal
@@ -49,6 +155,7 @@ export function SheetModal({
       snapPointsMode="percent"
       snapPoints={[snapPoint]}
       transition={transition}
+      zIndex={zIndex.sheet}
     >
       <Sheet.Overlay
         backgroundColor="$shadow6"
@@ -56,10 +163,34 @@ export function SheetModal({
         enterStyle={{ opacity: 0 }}
         exitStyle={{ opacity: 0 }}
       />
-      <Sheet.Handle />
-      <SheetFrame>
-        {header}
-        {scrollable ? <Sheet.ScrollView>{children}</Sheet.ScrollView> : children}
+      {/* Apple grabber: 36×5 capsule, muted fill, VoiceOver resize affordance. */}
+      <Sheet.Handle
+        backgroundColor="$color8"
+        opacity={0.45}
+        height={5}
+        width={36}
+        borderRadius={100}
+        aria-label="Resize"
+      />
+      <SheetFrame
+        ref={frameRef as never}
+        {...({
+          tabIndex: -1,
+          role: "dialog",
+          "aria-modal": true,
+          "aria-labelledby": header ? titleId : undefined,
+        } as Record<string, unknown>)}
+        {...knobProps.gap}
+        borderBottomLeftRadius={0}
+        borderBottomRightRadius={0}
+        overflow="hidden"
+        {...frameRingReset}
+      >
+        <DialogRegionContext.Provider value={IN_DIALOG_REGION}>
+          {header ? <View id={titleId}>{header}</View> : null}
+          {scrollable ? <Sheet.ScrollView>{children}</Sheet.ScrollView> : children}
+          <View style={{ height: "env(safe-area-inset-bottom)" }} />
+        </DialogRegionContext.Provider>
       </SheetFrame>
     </Sheet>
   );