@multiplatform.one/components 6.7.0 → 7.1.0

package/src/Skeleton/Skeleton.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { XStack, YStack, Text, View, Card } from "tamagui";
+import { XStack, YStack, Text, View } from "tamagui";
+import { Card } from "../surfaces";
 import { Skeleton, type SkeletonVariant } from "./index";
 
 const meta: Meta<typeof Skeleton> = {
@@ -43,7 +44,7 @@ export const Variants: Story = {
             <Skeleton
               variant={variant}
               width={variant === "circular" ? 48 : 200}
-              height={variant === "circular" ? 48 : 48}
+              height={variant === "circular" ? 48 : variant === "text" ? undefined : 48}
             />
           </XStack>
         ))}
@@ -67,6 +68,10 @@ export const TextLines: Story = {
         <Text fontWeight="600">Paragraph (5 lines)</Text>
         <Skeleton.Text lines={5} />
       </YStack>
+      <YStack gap="$2">
+        <Text fontWeight="600">Display (title)</Text>
+        <Skeleton.Text size="display" lines={1} lastLineWidth={180} />
+      </YStack>
     </YStack>
   ),
 };
@@ -126,125 +131,136 @@ export const NoAnimation: Story = {
 
 export const CardSkeleton: Story = {
   render: () => (
-    <Card padding="$4" width={320} bordered>
-      <XStack gap="$3" alignItems="flex-start">
-        <Skeleton.Circle size={48} />
-        <YStack flex={1} gap="$2">
-          <Skeleton width="60%" height={14} />
-          <Skeleton width="40%" height={12} />
-        </YStack>
-      </XStack>
-      <YStack marginTop="$4" gap="$2">
+    <Skeleton.Group>
+      <Card tier="elevated" width={320}>
+        <XStack gap="$3" alignItems="flex-start">
+          <Skeleton.Circle size={48} />
+          <YStack flex={1} gap="$2">
+            <Skeleton.Text size="display" lines={1} lastLineWidth="60%" />
+            <Skeleton width="40%" />
+          </YStack>
+        </XStack>
         <Skeleton.Text lines={3} />
-      </YStack>
-      <XStack marginTop="$4" gap="$2">
-        <Skeleton variant="rounded" width={80} height={32} />
-        <Skeleton variant="rounded" width={80} height={32} />
-      </XStack>
-    </Card>
+        <XStack gap="$2">
+          <Skeleton variant="rounded" width={80} height="$4" />
+          <Skeleton variant="rounded" width={80} height="$4" />
+        </XStack>
+      </Card>
+    </Skeleton.Group>
   ),
 };
 
 export const ListSkeleton: Story = {
   render: () => (
-    <YStack gap="$3" width={400}>
-      {Array.from({ length: 4 }).map((_, i) => (
-        <XStack key={i} gap="$3" alignItems="center">
-          <Skeleton.Circle size={40} />
-          <YStack flex={1} gap="$1">
-            <Skeleton width="70%" height={14} />
-            <Skeleton width="40%" height={12} />
-          </YStack>
-        </XStack>
-      ))}
-    </YStack>
+    <Skeleton.Group>
+      <YStack gap="$3" width={400}>
+        {Array.from({ length: 4 }).map((_, i) => (
+          <XStack key={i} gap="$3" alignItems="center">
+            <Skeleton.Circle size={40} />
+            <YStack flex={1} gap="$1">
+              <Skeleton width="70%" />
+              <Skeleton width="40%" />
+            </YStack>
+          </XStack>
+        ))}
+      </YStack>
+    </Skeleton.Group>
   ),
 };
 
 export const TableSkeleton: Story = {
   render: () => (
-    <YStack gap="$2" width={500}>
-      {/* Header */}
-      <XStack gap="$3" paddingBottom="$2" borderBottomWidth={1} borderColor="$color5">
-        <Skeleton width={120} height={14} />
-        <Skeleton width={100} height={14} />
-        <Skeleton width={80} height={14} />
-        <Skeleton width={60} height={14} />
-      </XStack>
-      {/* Rows */}
-      {Array.from({ length: 5 }).map((_, i) => (
-        <XStack key={i} gap="$3" paddingVertical="$2">
-          <Skeleton width={120} height={14} />
-          <Skeleton width={100} height={14} />
-          <Skeleton width={80} height={14} />
-          <Skeleton width={60} height={14} />
+    <Skeleton.Group>
+      <YStack gap="$2" width={500}>
+        <XStack gap="$3" paddingBottom="$2" borderBottomWidth={1} borderColor="$color5">
+          <Skeleton width={120} />
+          <Skeleton width={100} />
+          <Skeleton width={80} />
+          <Skeleton width={60} />
         </XStack>
-      ))}
-    </YStack>
+        {Array.from({ length: 5 }).map((_, i) => (
+          <XStack key={i} gap="$3" paddingVertical="$2">
+            <Skeleton width={120} />
+            <Skeleton width={100} />
+            <Skeleton width={80} />
+            <Skeleton width={60} />
+          </XStack>
+        ))}
+      </YStack>
+    </Skeleton.Group>
   ),
 };
 
 export const FormSkeleton: Story = {
   render: () => (
-    <YStack gap="$4" width={320}>
-      <YStack gap="$2">
-        <Skeleton width={60} height={12} />
-        <Skeleton variant="rounded" width="100%" height={40} />
-      </YStack>
-      <YStack gap="$2">
-        <Skeleton width={80} height={12} />
-        <Skeleton variant="rounded" width="100%" height={40} />
-      </YStack>
-      <YStack gap="$2">
-        <Skeleton width={100} height={12} />
-        <Skeleton variant="rounded" width="100%" height={80} />
+    <Skeleton.Group>
+      <YStack gap="$4" width={320}>
+        <YStack gap="$2">
+          <Skeleton width={60} />
+          <Skeleton variant="rounded" width="100%" height="$4" />
+        </YStack>
+        <YStack gap="$2">
+          <Skeleton width={80} />
+          <Skeleton variant="rounded" width="100%" height="$4" />
+        </YStack>
+        <YStack gap="$2">
+          <Skeleton width={100} />
+          <Skeleton variant="rounded" width="100%" height="$8" />
+        </YStack>
+        <Skeleton variant="rounded" width={100} height="$4" />
       </YStack>
-      <Skeleton variant="rounded" width={100} height={36} />
-    </YStack>
+    </Skeleton.Group>
   ),
 };
 
 export const AllStates: Story = {
   render: () => (
-    <YStack gap="$6">
-      <YStack gap="$2">
-        <Text fontWeight="600">Variants</Text>
-        <XStack gap="$4" alignItems="center">
-          <Skeleton variant="text" width={100} />
-          <Skeleton variant="circular" width={40} height={40} />
-          <Skeleton variant="rectangular" width={100} height={40} />
-          <Skeleton variant="rounded" width={100} height={40} />
-        </XStack>
-      </YStack>
+    <Skeleton.Group>
+      <YStack gap="$6">
+        <YStack gap="$2">
+          <Text fontWeight="600">Display</Text>
+          <Skeleton.Text size="display" lines={1} lastLineWidth={220} />
+        </YStack>
 
-      <YStack gap="$2">
-        <Text fontWeight="600">Text lines</Text>
-        <View maxWidth={300}>
-          <Skeleton.Text lines={3} />
-        </View>
-      </YStack>
+        <YStack gap="$2">
+          <Text fontWeight="600">Variants</Text>
+          <XStack gap="$4" alignItems="center">
+            <Skeleton variant="text" width={100} />
+            <Skeleton variant="circular" width={40} height={40} />
+            <Skeleton variant="rectangular" width={100} height={40} />
+            <Skeleton variant="rounded" width={100} height={40} />
+          </XStack>
+        </YStack>
 
-      <YStack gap="$2">
-        <Text fontWeight="600">Circles (avatars)</Text>
-        <XStack gap="$3">
-          <Skeleton.Circle size={32} />
-          <Skeleton.Circle size={48} />
-          <Skeleton.Circle size={64} />
-        </XStack>
-      </YStack>
+        <YStack gap="$2">
+          <Text fontWeight="600">Text lines</Text>
+          <View maxWidth={300}>
+            <Skeleton.Text lines={3} />
+          </View>
+        </YStack>
 
-      <YStack gap="$2">
-        <Text fontWeight="600">Card example</Text>
-        <Card padding="$3" width={280} bordered>
+        <YStack gap="$2">
+          <Text fontWeight="600">Circles (avatars)</Text>
           <XStack gap="$3">
-            <Skeleton.Circle size={40} />
-            <YStack flex={1} gap="$1">
-              <Skeleton width="80%" />
-              <Skeleton width="50%" height={12} />
-            </YStack>
+            <Skeleton.Circle size={32} />
+            <Skeleton.Circle size={48} />
+            <Skeleton.Circle size={64} />
           </XStack>
-        </Card>
+        </YStack>
+
+        <YStack gap="$2">
+          <Text fontWeight="600">Card example</Text>
+          <Card tier="elevated" width={280}>
+            <XStack gap="$3" alignItems="center">
+              <Skeleton.Circle size={40} />
+              <YStack flex={1} gap="$1">
+                <Skeleton.Text size="display" lines={1} lastLineWidth="80%" />
+                <Skeleton width="50%" />
+              </YStack>
+            </XStack>
+          </Card>
+        </YStack>
       </YStack>
-    </YStack>
+    </Skeleton.Group>
   ),
 };

package/src/Skeleton/SkeletonText.stories.tsx

@@ -24,10 +24,12 @@ const meta: Meta<typeof SkeletonText> = {
     animate: { control: "boolean" },
     width: { control: "text" },
     height: { control: "text" },
+    size: { control: "select", options: ["body", "display"] },
   },
   args: {
     lines: 3,
     animate: true,
+    size: "body",
   },
 };
 export default meta;
@@ -100,6 +102,15 @@ export const CustomMetricsNarrow: Story = {
   ),
 };
 
+export const Display: Story = {
+  args: { lines: 1, size: "display", lastLineWidth: 180 },
+  render: (args) => (
+    <YStack maxWidth={400}>
+      <SkeletonText {...args} />
+    </YStack>
+  ),
+};
+
 export const Static: Story = {
   args: { lines: 3, animate: false },
   render: (args) => (

package/src/Skeleton/index.tsx

@@ -1,8 +1,257 @@
-export {
-  Skeleton,
-  SkeletonText,
-  SkeletonCircle,
-  type SkeletonProps,
-  type SkeletonVariant,
-  type SkeletonFrameProps,
-} from "@multiplatform.one/forms";
+import { createContext, useContext, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { radiusClassProps, sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
+import type { GetProps } from "tamagui";
+import { View, styled, isWeb } from "tamagui";
+
+function clampTextRadius(radiusToken: string | undefined) {
+  if (!radiusToken) return "$2";
+  if (radiusToken === "$0") return 0;
+  if (radiusToken.startsWith("$")) {
+    const num = Number.parseInt(radiusToken.slice(1), 10);
+    return Number.isFinite(num) && num > 2 ? "$2" : radiusToken;
+  }
+  return radiusToken;
+}
+
+export type SkeletonVariant = "text" | "circular" | "rectangular" | "rounded";
+export type SkeletonTextSize = "body" | "display";
+
+const AnnounceCtx = createContext(true);
+
+// Primer: the bone tracks type size, not the 44px control floor (LC-73).
+// DERIVED from the generated size recipe (LC-80): a body bone is the token's
+// recipe fontSize − 2 (the ink box inside the line box), display is 2× body,
+// and the circle bone is the medallion one height step above the control
+// ramp. $3/$4 are lossless vs the old handwritten map; $5 moves with the
+// recipe's larger lg type (body 14→16, display 28→32).
+const SKELETON_SIZE_TOKENS = ["$3", "$4", "$5"] as const;
+const skeletonCircleTokenUp: Record<string, string> = { $3: "$4", $4: "$5", $5: "$6" };
+
+function skeletonCircleSize(sizeToken: string): number {
+  return sizeRecipeForToken(skeletonCircleTokenUp[sizeToken] ?? "$5").height;
+}
+
+const SHIMMER_STYLE_ID = "__mp-skeleton-shimmer";
+function ensureShimmerStyles() {
+  if (!isWeb || typeof document === "undefined") return;
+  if (document.getElementById(SHIMMER_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = SHIMMER_STYLE_ID;
+  style.textContent = [
+    "@keyframes mp-skeleton-shimmer{from{mask-position:200%}to{mask-position:0%}}",
+    ".mp-skeleton-pulse{mask-image:linear-gradient(75deg,#000 30%,rgb(0,0,0,.65) 80%);mask-size:200%;animation:mp-skeleton-shimmer 1.2s ease-in-out infinite}",
+    ".mp-skeleton-static{animation:none!important;mask-image:none}",
+    "@media (prefers-reduced-motion:reduce){.mp-skeleton-pulse{animation:none!important;mask-image:none}}",
+    "@media (forced-colors:active){.mp-skeleton-bone{outline:1px solid transparent;outline-offset:-1px}}",
+  ].join("");
+  document.head.appendChild(style);
+}
+
+const SkeletonFrame = styled(View, {
+  name: "Skeleton",
+  backgroundColor: "$color5",
+  overflow: "hidden",
+  pointerEvents: "none",
+  flexShrink: 0,
+
+  variants: {
+    variant: {
+      text: {},
+      circular: {},
+      rectangular: {
+        borderRadius: 0,
+      },
+      rounded: {},
+    },
+  } as const,
+
+  defaultVariants: {
+    variant: "text",
+  },
+});
+
+export interface SkeletonProps extends Omit<GetProps<typeof SkeletonFrame>, "variant"> {
+  variant?: SkeletonVariant;
+  /** Width of the skeleton. Can be a number (pixels) or string (e.g., "100%") */
+  width?: number | string;
+  /** Height of the skeleton. Can be a number (pixels) or string */
+  height?: number | string;
+  /** Whether to animate the skeleton */
+  animate?: boolean;
+  /** Accessible name for a root loading region. Ignored on decorative bones. */
+  label?: string;
+}
+
+function resolveTextHeight(sizeToken: string, textSize: SkeletonTextSize) {
+  const known = (SKELETON_SIZE_TOKENS as readonly string[]).includes(sizeToken) ? sizeToken : "$4";
+  const body = sizeRecipeForToken(known).fontSize - 2;
+  return textSize === "display" ? body * 2 : body;
+}
+
+export function Skeleton({
+  variant = "text",
+  width,
+  height,
+  animate = true,
+  style,
+  label,
+  className,
+  ...props
+}: SkeletonProps) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs({ component: "Skeleton" });
+  const shouldAnnounce = useContext(AnnounceCtx);
+  const pulsing = Boolean(animate && knobProps.transition);
+  if (isWeb) ensureShimmerStyles();
+
+  const decorative = props["aria-hidden"] === true || !shouldAnnounce;
+  const boneClass = [
+    "mp-skeleton-bone",
+    pulsing ? "mp-skeleton-pulse" : "mp-skeleton-static",
+    variant !== "rectangular" ? knobProps.borderRadius.className : undefined,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const textRadius = knobProps.pointy ? 0 : clampTextRadius(knobProps.borderRadius.borderRadius);
+  const radiusProps =
+    variant === "circular"
+      ? { borderRadius: 1000, ...radiusClassProps("R-PILL", "SkeletonCircle") }
+      : variant === "rectangular"
+        ? { borderRadius: 0 }
+        : variant === "rounded"
+          ? { borderRadius: knobProps.borderRadius.borderRadius }
+          : { borderRadius: textRadius };
+
+  return (
+    <SkeletonFrame
+      variant={variant}
+      width={width}
+      height={
+        height ?? (variant === "text" ? resolveTextHeight(knobProps.sizeToken, "body") : undefined)
+      }
+      {...radiusProps}
+      {...props}
+      {...(isWeb ? { className: boneClass } : undefined)}
+      {...(style ? { style } : undefined)}
+      pointerEvents="none"
+      data-skeleton=""
+      aria-hidden={decorative ? true : undefined}
+      role={decorative ? undefined : "status"}
+      aria-busy={decorative ? undefined : true}
+      aria-live={decorative ? undefined : "polite"}
+      aria-label={decorative ? undefined : (label ?? t("Loading"))}
+      accessibilityElementsHidden={decorative}
+    />
+  );
+}
+
+export function SkeletonText({
+  lines = 1,
+  gap: gapProp,
+  lastLineWidth = "70%",
+  size: textSize = "body",
+  label,
+  width,
+  height,
+  animate,
+  style,
+  variant: _variant,
+  ...props
+}: SkeletonProps & {
+  lines?: number;
+  gap?: string | number;
+  lastLineWidth?: string | number;
+  size?: SkeletonTextSize;
+}) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs({ component: "Skeleton" });
+  const shouldAnnounce = useContext(AnnounceCtx);
+  const count = Math.max(0, Math.floor(Number(lines) || 0));
+  const lineHeight = height ?? resolveTextHeight(knobProps.sizeToken, textSize);
+  const gap = gapProp ?? knobProps.gap.gap;
+  const decorative = !shouldAnnounce;
+
+  if (count === 0) {
+    return null;
+  }
+
+  return (
+    <AnnounceCtx.Provider value={false}>
+      <View
+        {...props}
+        width={width ?? "100%"}
+        gap={gap}
+        data-skeleton-text=""
+        aria-hidden={decorative ? true : undefined}
+        role={decorative ? undefined : "status"}
+        aria-busy={decorative ? undefined : true}
+        aria-live={decorative ? undefined : "polite"}
+        aria-label={decorative ? undefined : (label ?? t("Loading"))}
+      >
+        {Array.from({ length: count }, (_, i) => (
+          <Skeleton
+            key={i}
+            variant="text"
+            animate={animate}
+            style={style}
+            height={lineHeight}
+            width={
+              count === 1 ? (width ?? lastLineWidth) : i === count - 1 ? lastLineWidth : "100%"
+            }
+          />
+        ))}
+      </View>
+    </AnnounceCtx.Provider>
+  );
+}
+
+export function SkeletonCircle({
+  size: sizeProp,
+  label,
+  ...props
+}: SkeletonProps & { size?: number }) {
+  const { knobProps } = useResolvedKnobs({ component: "Skeleton" });
+  const diameter = Math.max(0, sizeProp ?? skeletonCircleSize(knobProps.sizeToken));
+  return (
+    <Skeleton
+      variant="circular"
+      label={label}
+      {...props}
+      width="100%"
+      maxWidth={diameter}
+      aspectRatio={1}
+      alignSelf="flex-start"
+    />
+  );
+}
+
+export function SkeletonGroup({
+  children,
+  label,
+  ...props
+}: GetProps<typeof View> & { children?: ReactNode; label?: string }) {
+  const { t } = useTranslation();
+  return (
+    <AnnounceCtx.Provider value={false}>
+      <View
+        {...props}
+        role="status"
+        aria-busy={true}
+        aria-live="polite"
+        aria-label={label ?? t("Loading")}
+        data-skeleton-group=""
+      >
+        {children}
+      </View>
+    </AnnounceCtx.Provider>
+  );
+}
+
+Skeleton.Text = SkeletonText;
+Skeleton.Circle = SkeletonCircle;
+Skeleton.Group = SkeletonGroup;
+
+export type SkeletonFrameProps = GetProps<typeof SkeletonFrame>;

package/src/SkipLink/SkipLink.spec.tsx

@@ -20,6 +20,16 @@ describe("SkipLink", () => {
     expect(anchor?.textContent).toContain("Skip to content");
   });
 
+  it("is a real hash link with the skip-link class (GOV.UK / Primer)", () => {
+    const { container } = renderWithTarget();
+    const anchor = container.querySelector("a.mp-skip-link") as HTMLAnchorElement;
+    expect(anchor).toBeTruthy();
+    expect(anchor.getAttribute("href")).toBe("#main-content");
+    expect(anchor.closest("nav")).toBeNull();
+    expect(document.getElementById("mp-skip-link-css")?.textContent).toContain(":focus-visible");
+    expect(document.getElementById("mp-skip-link-css")?.textContent).toContain("outline-offset");
+  });
+
   it("moves focus to the target on activation", () => {
     const { container } = renderWithTarget();
     const anchor = container.querySelector('a[href="#main-content"]') as HTMLElement;
@@ -29,6 +39,31 @@ describe("SkipLink", () => {
     expect(document.activeElement).toBe(target);
   });
 
+  it("strips the temporary tabindex and target class on blur (GOV.UK VoiceOver)", () => {
+    const { container } = renderWithTarget();
+    fireEvent.click(container.querySelector('a[href="#main-content"]') as HTMLElement);
+    const target = document.getElementById("main-content") as HTMLElement;
+    expect(target.classList.contains("mp-skip-link-target")).toBe(true);
+    fireEvent.blur(target);
+    expect(target.hasAttribute("tabindex")).toBe(false);
+    expect(target.classList.contains("mp-skip-link-target")).toBe(false);
+  });
+
+  it("does not strip an existing tabindex on the target", () => {
+    const { container } = renderWithProviders(
+      <div>
+        <SkipLink targetId="kept">Skip</SkipLink>
+        <div id="kept" tabIndex={-1}>
+          Kept
+        </div>
+      </div>,
+    );
+    const target = document.getElementById("kept") as HTMLElement;
+    fireEvent.click(container.querySelector('a[href="#kept"]') as HTMLElement);
+    fireEvent.blur(target);
+    expect(target.getAttribute("tabindex")).toBe("-1");
+  });
+
   it("reports the focused target through onSkip", () => {
     const onSkip = vi.fn();
     const { container } = renderWithProviders(

package/src/SkipLink/SkipLink.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof SkipLink> = {
     docs: {
       description: {
         component:
-          "Keyboard-only 'Skip to content' link: visually hidden until it receives focus (first Tab on the page), then revealed fixed top-left on a themed elevated surface. Activating it (Enter) moves focus and scroll to the target element. Intended consumer: DeskShell, rendered as the first child so Tab #1 lets keyboard users jump past the sidebar/toolbar straight to the form.",
+          "Keyboard-only 'Skip to content' link: visually hidden until it receives focus (first Tab on the page), then revealed fixed top-start on a themed elevated surface with the LC-71 ring on the <a>. Activating it (Enter) moves focus to the target (GOV.UK VoiceOver pattern). Intended consumer: DeskShell, rendered as the first child so Tab #1 lets keyboard users jump past the sidebar/toolbar straight to the form.",
       },
     },
   },