@12-apps/ui 6.19.0 → 6.20.0

package/src/components/layout/Container/Container.tsx

@@ -5,8 +5,8 @@ import React from 'react';
 
 import {
   CONTAINER_COMPACT_PADDING_UNITS,
-  CONTAINER_PADDED_VERTICAL_UNITS,
   containerPaddingUnits,
+  containerVerticalUnits,
   resolveContainerMaxWidth,
 } from './Container.metrics';
 import type { ContainerProps } from './Container.types';
@@ -38,14 +38,20 @@ export const Container: React.FC<ContainerProps> = ({
       justifyContent: 'center',
       minHeight: '100vh',
     }),
+    // The shorthand FIRST: a `paddingTop` declared before it is overridden by
+    // it, which is how `variant="padded"` painted no vertical inset at all.
+    padding: theme.spacing(containerPaddingUnits(padding, false)),
     ...(variant === 'padded' && {
-      paddingTop: theme.spacing(CONTAINER_PADDED_VERTICAL_UNITS),
-      paddingBottom: theme.spacing(CONTAINER_PADDED_VERTICAL_UNITS),
+      paddingTop: theme.spacing(containerVerticalUnits(variant, padding, false)),
+      paddingBottom: theme.spacing(containerVerticalUnits(variant, padding, false)),
     }),
-    padding: theme.spacing(containerPaddingUnits(padding, false)),
     ...(responsive && {
       [theme.breakpoints.down('sm')]: {
         padding: theme.spacing(CONTAINER_COMPACT_PADDING_UNITS),
+        ...(variant === 'padded' && {
+          paddingTop: theme.spacing(containerVerticalUnits(variant, padding, true)),
+          paddingBottom: theme.spacing(containerVerticalUnits(variant, padding, true)),
+        }),
       },
     }),
     ...(sx || {}),

package/src/components/layout/Container/NATIVE-NOTES.md

@@ -1,5 +1,3 @@
 # Container on React Native — known gaps
 
-- `variant="padded"` adds no vertical padding on either renderer: the web declares its 64px above and below BEFORE the `padding` shorthand, which overrides them, and native paints the same insets so the two agree. The fix is a web change (`Container.tsx` order) plus `containerPaddingUnits`, made together.
-- `padding="none"` paints the `md` inset on either renderer: the web reads its map with `||`, so `none`'s 0 falls through to the default. Same one-place fix.
 - `responsive` reads `useWindowDimensions().width < 600` in place of MUI's `sm` media query, and `centered` reads the window height in place of `100vh`; both track the window, as CSS would, but a container inside a narrower parent still measures the window, not the parent.

package/src/components/layout/Skeleton/NATIVE-NOTES.md

@@ -0,0 +1,8 @@
+# Skeleton on React Native
+
+Known rendering gaps, one bullet each; `pnpm native:ledger` reads them.
+
+- MUI's `wave` sweep and the `shimmer` overlay are gradient pseudo-elements travelling across the box; React Native core has neither, so both are drawn as the same wash (`action.hover` for the wave, `alpha(#fff, 0.3)` for the shimmer) fading in and out over the whole box on the web's own cadence — 1.6s linear after 0.5s for the wave, 2s for the shimmer.
+- `glassmorphism` paints the 135° gradient's first stop (`alpha(paper, 0.8)`) flat and keeps the hairline and the `0 8px 32px 0 rgba(0, 0, 0, 0.1)` shadow, but not the 20px backdrop blur — React Native has no backdrop filter.
+- The `text` variant is drawn at its FINAL height. MUI gives it a `1.2em` line box and squashes the box to 60% with `transform: scale(1, 0.6)`; React Native transforms do not change layout, so the two are multiplied out (11.52px at the theme's 16px body size) and the elliptical `4px/6.7px` radius the squash rounds off is drawn as the plain 4px it lands on.
+- `width`, `height` and `borderRadius` accept a number or a percentage; any other CSS length (`10rem`, `calc(…)`) has no React Native equivalent and leaves the box to size itself from its content.

package/src/components/layout/Skeleton/Skeleton.base.ts

@@ -0,0 +1,37 @@
+/**
+ * THE CONTRACT BOTH RENDERERS HONOUR — and nothing else.
+ *
+ * This file imports no MUI and no react-native, on purpose: it is in BOTH
+ * declaration outputs (`dist/types` and `dist/types-native`), and a native
+ * consumer has no `@mui/material` to resolve a type import against.
+ */
+export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'wave';
+export type SkeletonAnimation = 'pulse' | 'wave' | false;
+export type SkeletonIntensity = 'low' | 'medium' | 'high';
+
+/**
+ * The contract both renderers honour. `className` and a CSS `style` are the
+ * web's own and stay in `Skeleton.types.ts`; `style` on native is a
+ * `ViewStyle` and is declared in `Skeleton.types.native.ts`.
+ */
+export interface SkeletonBaseProps {
+  variant?: SkeletonVariant;
+  animation?: SkeletonAnimation;
+  width?: number | string;
+  height?: number | string;
+  count?: number;
+  /** Between instances, in SPACING UNITS — `theme.spacing(n)` on both sides. */
+  spacing?: number;
+  borderRadius?: number | string;
+  intensity?: SkeletonIntensity;
+  glassmorphism?: boolean;
+  shimmer?: boolean;
+  /**
+   * All three spellings of the same id: the web forwards `data-testid`, React
+   * Native calls it `testID`, and `dataTestId` is the house name. See
+   * `src/platform/test-id.ts`.
+   */
+  testID?: string;
+  dataTestId?: string;
+  'data-testid'?: string;
+}

package/src/components/layout/Skeleton/Skeleton.helpers.ts

@@ -1,4 +1,4 @@
-import type { SkeletonProps } from './Skeleton.types';
+import type { SkeletonBaseProps } from './Skeleton.base';
 
 type SkeletonDefaultedKeys =
   | 'variant'
@@ -9,10 +9,15 @@ type SkeletonDefaultedKeys =
   | 'glassmorphism'
   | 'shimmer';
 
-type ResolvedSkeletonProps = SkeletonProps &
-  Required<Pick<SkeletonProps, SkeletonDefaultedKeys>>;
+/**
+ * Generic over the renderer's own props: the web and the native `Skeleton`
+ * carry different extras (`className`/`style` against a `View`'s props), and
+ * both come back out untouched.
+ */
+type ResolvedSkeletonProps<P extends SkeletonBaseProps> = P &
+  Required<Pick<SkeletonBaseProps, SkeletonDefaultedKeys>>;
 
-const SKELETON_DEFAULTS: Pick<SkeletonProps, SkeletonDefaultedKeys> = {
+const SKELETON_DEFAULTS: Required<Pick<SkeletonBaseProps, SkeletonDefaultedKeys>> = {
   variant: 'text',
   animation: 'pulse',
   count: 1,
@@ -24,10 +29,21 @@ const SKELETON_DEFAULTS: Pick<SkeletonProps, SkeletonDefaultedKeys> = {
 
 // Strips explicitly-undefined props before the merge, so `count={undefined}` still
 // falls back to the default exactly as a destructuring default would.
-const definedProps = (props: SkeletonProps): Partial<SkeletonProps> =>
+const definedProps = <P extends SkeletonBaseProps>(props: P): Partial<P> =>
   Object.fromEntries(
     Object.entries(props).filter(([, value]) => value !== undefined),
-  ) as Partial<SkeletonProps>;
+  ) as Partial<P>;
 
-export const resolveSkeletonProps = (props: SkeletonProps): ResolvedSkeletonProps =>
-  ({ ...SKELETON_DEFAULTS, ...definedProps(props) }) as ResolvedSkeletonProps;
+export const resolveSkeletonProps = <P extends SkeletonBaseProps>(
+  props: P,
+): ResolvedSkeletonProps<P> =>
+  ({ ...SKELETON_DEFAULTS, ...definedProps(props) }) as ResolvedSkeletonProps<P>;
+
+/**
+ * The id of instance `index` when a caller asked for several. Unnamed
+ * skeletons stay unnamed — the web has always cloned `undefined` there.
+ */
+export const skeletonInstanceTestId = (
+  base: string | undefined,
+  index: number,
+): string | undefined => (base ? `${base}-${index}` : undefined);

package/src/components/layout/Skeleton/Skeleton.metrics.ts

@@ -0,0 +1,81 @@
+import type { SkeletonIntensity, SkeletonVariant } from './Skeleton.base';
+
+/**
+ * THE NUMBERS BOTH `Skeleton` RENDERERS DRAW WITH.
+ *
+ * `Skeleton.styles.ts` (web, emotion over MUI's own `Skeleton`) and
+ * `Skeleton.native.tsx` (React Native) read this one table. The web turns them
+ * into CSS strings — `blur(20px)`, `shimmer 2s infinite` — and native uses the
+ * numbers as they are, so neither renderer restates a value.
+ *
+ * Two groups live here. The first is what the web component WRITES (the
+ * intensity alphas, the default box, the glass and shimmer washes). The second
+ * is what MUI's own `Skeleton` contributes on the web and the native half
+ * therefore has to restate: its pulse keyframe, its wave cadence, and the
+ * geometry of the `text` variant. Those are MUI's DEFAULTS — a host that
+ * re-themes them moves the web only, which `NATIVE-NOTES.md` records.
+ */
+
+/** The tint's alpha over the ink, per intensity. */
+export const SKELETON_INTENSITY_OPACITY: Record<SkeletonIntensity, number> = {
+  low: 0.11,
+  medium: 0.13,
+  high: 0.15,
+};
+
+/** The box a variant draws when the caller gives no `width`/`height`. */
+export const SKELETON_DEFAULT_DIMENSIONS: Record<
+  SkeletonVariant,
+  { width: number | string; height: number | undefined }
+> = {
+  // `text` has no height of its own: MUI's line box gives it one (below).
+  text: { width: '100%', height: undefined },
+  circular: { width: 40, height: 40 },
+  rectangular: { width: '100%', height: 40 },
+  wave: { width: '100%', height: 40 },
+};
+
+/* ── `glassmorphism` ──────────────────────────────────────────────────────── */
+
+/** The 135° wash over `background.paper`, from the first stop to the last. */
+export const GLASS_BACKGROUND_ALPHA_FROM = 0.8;
+export const GLASS_BACKGROUND_ALPHA_TO = 0.4;
+export const GLASS_BLUR_PX = 20;
+export const GLASS_BORDER_ALPHA = 0.2;
+/** `0 8px 32px 0 rgba(0, 0, 0, 0.1)`. */
+export const GLASS_SHADOW = { offsetY: 8, blur: 32, alpha: 0.1 } as const;
+
+/* ── `shimmer` ────────────────────────────────────────────────────────────── */
+
+/** The sweep's middle stop, over white. */
+export const SHIMMER_ALPHA = 0.3;
+export const SHIMMER_DURATION_MS = 2000;
+
+/**
+ * MUI's `palette.common`, which is a pair of fixed hexes rather than anything
+ * derived — so the shared theme has no slot for them and they are named here.
+ */
+export const COMMON_BLACK = '#000';
+export const COMMON_WHITE = '#fff';
+
+/* ── MUI's own `Skeleton`, restated for the renderer that has no MUI ──────── */
+
+/**
+ * MUI's `pulseKeyframe`: opacity 1 → 0.4 → 1, `2s ease-in-out 0.5s infinite`.
+ * The delay runs once on the web; native replays it each lap unless the
+ * animation is sequenced, which `Skeleton.native.tsx` does.
+ */
+export const PULSE = { durationMs: 2000, delayMs: 500, dip: 0.4 } as const;
+
+/** MUI's `wave` sweep: `1.6s linear 0.5s infinite`, in `palette.action.hover`. */
+export const WAVE = { durationMs: 1600, delayMs: 500 } as const;
+
+/**
+ * The `text` variant, as MUI draws it: a line box `1.2em` tall squashed to 60%
+ * of its height (`transform: scale(1, 0.60)`), with a `4px/6.7px` elliptical
+ * radius that the same squash turns back into a round 4px. React Native has no
+ * `em`, and its transforms do not change layout, so the native half multiplies
+ * the two out into one height and draws the plain 4px radius the squash lands on.
+ */
+export const TEXT_LINE_HEIGHT_EM = 1.2;
+export const TEXT_SCALE_Y = 0.6;

package/src/components/layout/Skeleton/Skeleton.native.tsx

@@ -0,0 +1,271 @@
+import * as React from 'react';
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  View,
+  type DimensionValue,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+
+import { resolveSkeletonProps, skeletonInstanceTestId } from './Skeleton.helpers';
+import {
+  COMMON_BLACK,
+  COMMON_WHITE,
+  GLASS_BACKGROUND_ALPHA_FROM,
+  GLASS_BORDER_ALPHA,
+  GLASS_SHADOW,
+  PULSE,
+  SHIMMER_ALPHA,
+  SHIMMER_DURATION_MS,
+  SKELETON_DEFAULT_DIMENSIONS,
+  SKELETON_INTENSITY_OPACITY,
+  TEXT_LINE_HEIGHT_EM,
+  TEXT_SCALE_Y,
+  WAVE,
+} from './Skeleton.metrics';
+import type {
+  SkeletonAnimation,
+  SkeletonIntensity,
+  SkeletonProps,
+  SkeletonVariant,
+} from './Skeleton.types.native';
+import { useLoopedProgress } from '../../../platform/animation';
+import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import { alpha } from '../../../tokens/color';
+import type { UiTheme } from '../../../tokens/theme';
+
+/** MUI's `pulseKeyframe` runs `ease-in-out`. */
+const PULSE_EASING = Easing.inOut(Easing.ease);
+const PERCENT = /^-?\d+(?:\.\d+)?%$/;
+
+/**
+ * A width or a height, as React Native accepts one. The web takes any CSS
+ * length; here a number is dp and a percentage is a percentage — anything else
+ * (`10rem`, `calc(...)`) has no equivalent and sizes the box from its content,
+ * which `NATIVE-NOTES.md` records.
+ */
+export function dimension(value: number | string | undefined): DimensionValue | undefined {
+  if (value === undefined || typeof value === 'number') return value;
+  return PERCENT.test(value) ? (value as `${number}%`) : undefined;
+}
+
+/** The tint the web writes: the body ink at the intensity's alpha, white in dark mode. */
+export const skeletonTint = (theme: UiTheme, intensity: SkeletonIntensity): string =>
+  alpha(
+    theme.mode === 'dark' ? COMMON_WHITE : theme.palette.text.primary,
+    SKELETON_INTENSITY_OPACITY[intensity],
+  );
+
+/** MUI's radius per variant: a circle, a square rectangle, the theme's 4px on text. */
+const radiusFor = (theme: UiTheme, variant: SkeletonVariant): number => {
+  if (variant === 'circular') return theme.radius.full;
+  return variant === 'text' ? theme.radius.md : 0;
+};
+
+/**
+ * The `text` variant's height. MUI gives it a `1.2em` line box and squashes the
+ * whole box to 60%; React Native's transforms do not change layout, so the two
+ * are multiplied out into the height the web actually shows.
+ */
+export function textBoxHeight(
+  theme: UiTheme,
+  height: number | string | undefined,
+): DimensionValue | undefined {
+  if (typeof height === 'string') return dimension(height);
+  const box = height ?? theme.typography.sizes.md.fontSize * TEXT_LINE_HEIGHT_EM;
+  return box * TEXT_SCALE_Y;
+}
+
+/**
+ * `glassmorphism`: the gradient's first stop flat, the hairline, and the web's
+ * own box-shadow string — React Native 0.76+ takes CSS shadow syntax, so the
+ * two renderers draw the shadow from the same declaration. What is missing is
+ * the 20px backdrop blur, which React Native has no equivalent of.
+ */
+function glassStyle(theme: UiTheme): ViewStyle {
+  return {
+    backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_FROM),
+    borderWidth: 1,
+    borderColor: alpha(theme.palette.divider, GLASS_BORDER_ALPHA),
+    boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${alpha(COMMON_BLACK, GLASS_SHADOW.alpha)}`,
+  };
+}
+
+interface SkeletonBoxStyleArgs {
+  variant: SkeletonVariant;
+  intensity: SkeletonIntensity;
+  width?: number | string;
+  height?: number | string;
+  borderRadius?: number | string;
+  glassmorphism: boolean;
+  /** A box with a wash sliding over it clips, as MUI's `wave` and the shimmer do. */
+  clipped: boolean;
+}
+
+/** The box the web paints, in absolute numbers. */
+export function skeletonBoxStyle(theme: UiTheme, a: SkeletonBoxStyleArgs): ViewStyle {
+  const box = SKELETON_DEFAULT_DIMENSIONS[a.variant];
+  const height = a.height ?? box.height;
+  const style: ViewStyle = {
+    width: dimension(a.width ?? box.width),
+    height: a.variant === 'text' ? textBoxHeight(theme, height) : dimension(height),
+    borderRadius: dimension(a.borderRadius) ?? radiusFor(theme, a.variant),
+    backgroundColor: skeletonTint(theme, a.intensity),
+  };
+  if (a.clipped) style.overflow = 'hidden';
+  return a.glassmorphism ? { ...style, ...glassStyle(theme) } : style;
+}
+
+interface WashProps {
+  color: string;
+  durationMs: number;
+  delayMs: number;
+  testID?: string;
+}
+
+/**
+ * MUI's sweeping `::after`, standing still. React Native core has no gradient
+ * fill and no pseudo-elements, so the same wash covers the box and fades in and
+ * out on the same cadence instead of travelling across it. It carries no
+ * `aria-hidden` of its own: the box it sits in is already hidden, and the
+ * shared stories count the boxes by that attribute.
+ */
+function Wash({ color, durationMs, delayMs, testID }: WashProps): React.JSX.Element {
+  const progress = useLoopedProgress(true, { durationMs, delayMs, easing: Easing.linear });
+  return (
+    <Animated.View
+      testID={testID}
+      style={[
+        StyleSheet.absoluteFill,
+        {
+          pointerEvents: 'none',
+          backgroundColor: color,
+          opacity: progress.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, 1, 0] }),
+        },
+      ]}
+    />
+  );
+}
+
+interface SkeletonBoxProps extends SkeletonBoxStyleArgs {
+  animation: SkeletonAnimation;
+  shimmer: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  rest: ViewProps;
+}
+
+/** The web's `muiAnimationFor`: the `wave` VARIANT always animates as a wave. */
+const effectiveAnimation = (
+  variant: SkeletonVariant,
+  animation: SkeletonAnimation,
+): SkeletonAnimation => (variant === 'wave' ? 'wave' : animation);
+
+/** One skeleton box: the tint, the pulse, and the wash the sweep stands in for. */
+function SkeletonBox({
+  animation,
+  shimmer,
+  style,
+  testID,
+  rest,
+  ...styleArgs
+}: SkeletonBoxProps): React.JSX.Element {
+  const theme = useUiTheme();
+  const animates = effectiveAnimation(styleArgs.variant, animation);
+  const pulse = useLoopedProgress(animates === 'pulse', {
+    durationMs: PULSE.durationMs,
+    delayMs: PULSE.delayMs,
+    easing: PULSE_EASING,
+  });
+  const box = skeletonBoxStyle(theme, styleArgs);
+  const washId = testID ? `${testID}-wash` : undefined;
+
+  return (
+    <Animated.View
+      aria-hidden
+      testID={testID}
+      style={[
+        box,
+        animates === 'pulse'
+          ? { opacity: pulse.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, PULSE.dip, 1] }) }
+          : null,
+        style,
+      ]}
+      {...rest}
+    >
+      {shimmer ? (
+        <Wash
+          color={alpha(COMMON_WHITE, SHIMMER_ALPHA)}
+          durationMs={SHIMMER_DURATION_MS}
+          delayMs={0}
+          testID={washId}
+        />
+      ) : null}
+      {!shimmer && animates === 'wave' ? (
+        <Wash
+          color={theme.palette.action.hover}
+          durationMs={WAVE.durationMs}
+          delayMs={WAVE.delayMs}
+          testID={washId}
+        />
+      ) : null}
+    </Animated.View>
+  );
+}
+
+/**
+ * The native `Skeleton`: the same box, the same tint and the same default
+ * dimensions the MUI half draws, on a `View`.
+ */
+export const Skeleton: React.FC<SkeletonProps> = React.memo(function Skeleton(rawProps) {
+  const resolved = resolveSkeletonProps(rawProps);
+  const {
+    variant,
+    animation,
+    width,
+    height,
+    count,
+    spacing,
+    borderRadius,
+    intensity,
+    glassmorphism,
+    shimmer,
+    style,
+    ...others
+  } = resolved;
+  const theme = useUiTheme();
+  const testID = resolveTestId(others);
+  const box: Omit<SkeletonBoxProps, 'testID'> = {
+    variant,
+    animation,
+    intensity,
+    width,
+    height,
+    borderRadius,
+    glassmorphism,
+    shimmer,
+    clipped: shimmer || effectiveAnimation(variant, animation) === 'wave',
+    style,
+    rest: withoutTestIdProps(others),
+  };
+
+  // Handle edge case: count of 0 should render nothing
+  if (count === 0) return null;
+  if (count === 1) return <SkeletonBox {...box} testID={testID} />;
+
+  return (
+    <View style={{ gap: theme.spacing(spacing) }}>
+      {Array.from({ length: count }, (_, index) => (
+        <View key={`skeleton-${index}`}>
+          <SkeletonBox {...box} testID={skeletonInstanceTestId(testID, index)} />
+        </View>
+      ))}
+    </View>
+  );
+});
+
+Skeleton.displayName = 'Skeleton';

package/src/components/layout/Skeleton/Skeleton.styles.ts

@@ -2,6 +2,17 @@ import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { SkeletonProps } from './Skeleton.types';
+import {
+  GLASS_BACKGROUND_ALPHA_FROM,
+  GLASS_BACKGROUND_ALPHA_TO,
+  GLASS_BLUR_PX,
+  GLASS_BORDER_ALPHA,
+  GLASS_SHADOW,
+  SHIMMER_ALPHA,
+  SHIMMER_DURATION_MS,
+  SKELETON_DEFAULT_DIMENSIONS,
+  SKELETON_INTENSITY_OPACITY,
+} from './Skeleton.metrics';
 
 type SkeletonVariant = NonNullable<SkeletonProps['variant']>;
 type SkeletonIntensity = NonNullable<SkeletonProps['intensity']>;
@@ -29,36 +40,25 @@ export const muiAnimationFor = (
   return animation;
 };
 
+// Derived from the shared metrics, not restated: the native `Skeleton` reads
+// the same table, so the two renderers cannot disagree on a default box.
 export const defaultDimensions = (
   variant: SkeletonVariant,
-): { width: number | string; height: number | undefined } => {
-  switch (variant) {
-    case 'circular':
-      return { width: 40, height: 40 };
-    case 'rectangular':
-    case 'wave':
-      return { width: '100%', height: 40 };
-    default:
-      return { width: '100%', height: undefined };
-  }
-};
-
-const INTENSITY_OPACITY: Record<SkeletonIntensity, number> = {
-  low: 0.11,
-  medium: 0.13,
-  high: 0.15,
-};
+): { width: number | string; height: number | undefined } =>
+  // The `default:` arm the old switch had: an unrecognised variant used to fall
+  // back rather than hand `undefined` to a caller that then reads `.width`.
+  SKELETON_DEFAULT_DIMENSIONS[variant] ?? SKELETON_DEFAULT_DIMENSIONS.rectangular;
 
 const intensityOpacity = (intensity: SkeletonIntensity): number =>
-  INTENSITY_OPACITY[intensity] ?? INTENSITY_OPACITY.medium;
+  SKELETON_INTENSITY_OPACITY[intensity] ?? SKELETON_INTENSITY_OPACITY.medium;
 
 const glassmorphismStyles = (theme: Theme): CSSObject => ({
   background: `linear-gradient(135deg,
-        ${alpha(theme.palette.background.paper, 0.8)} 0%,
-        ${alpha(theme.palette.background.paper, 0.4)} 100%)`,
-  backdropFilter: 'blur(20px)',
-  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-  boxShadow: `0 8px 32px 0 ${alpha(theme.palette.common.black, 0.1)}`,
+        ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_FROM)} 0%,
+        ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_TO)} 100%)`,
+  backdropFilter: `blur(${GLASS_BLUR_PX}px)`,
+  border: `1px solid ${alpha(theme.palette.divider, GLASS_BORDER_ALPHA)}`,
+  boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${alpha(theme.palette.common.black, GLASS_SHADOW.alpha)}`,
 });
 
 // The sweep is a pseudo-element sliding across the box, so the box has to clip it
@@ -74,11 +74,11 @@ const shimmerStyles = (theme: Theme): CSSObject => ({
     background: `linear-gradient(
           90deg,
           transparent,
-          ${alpha(theme.palette.common.white, 0.3)},
+          ${alpha(theme.palette.common.white, SHIMMER_ALPHA)},
           transparent
         )`,
     transform: 'translateX(-100%)',
-    animation: 'shimmer 2s infinite',
+    animation: `shimmer ${SHIMMER_DURATION_MS / 1000}s infinite`,
   },
   '@keyframes shimmer': {
     '100%': {

package/src/components/layout/Skeleton/Skeleton.tsx

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
-import { resolveSkeletonProps } from './Skeleton.helpers';
+import { resolveSkeletonProps, skeletonInstanceTestId } from './Skeleton.helpers';
 import {
   defaultDimensions,
   muiAnimationFor,
@@ -12,6 +12,7 @@ import {
   skeletonStyles,
 } from './Skeleton.styles';
 import type { SkeletonProps } from './Skeleton.types';
+import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 
 export const Skeleton: React.FC<SkeletonProps> = React.memo((rawProps) => {
   const {
@@ -26,10 +27,13 @@ export const Skeleton: React.FC<SkeletonProps> = React.memo((rawProps) => {
     intensity,
     glassmorphism,
     shimmer,
-    'data-testid': dataTestId,
     style,
-    ...props
+    ...others
   } = resolveSkeletonProps(rawProps);
+  // `testID` and `dataTestId` are the shared contract's spellings; the DOM
+  // wants `data-testid`, and must not see the other two as attributes.
+  const dataTestId = resolveTestId(others);
+  const props = withoutTestIdProps(others);
   const theme = useTheme();
 
   const defaults = defaultDimensions(variant);
@@ -70,7 +74,7 @@ export const Skeleton: React.FC<SkeletonProps> = React.memo((rawProps) => {
       {Array.from({ length: count }).map((_, index) => (
         <Box key={`skeleton-${index}`}>
           {React.cloneElement(singleSkeleton, {
-            'data-testid': dataTestId ? `${dataTestId}-${index}` : undefined,
+            'data-testid': skeletonInstanceTestId(dataTestId, index),
           })}
         </Box>
       ))}
@@ -78,4 +82,4 @@ export const Skeleton: React.FC<SkeletonProps> = React.memo((rawProps) => {
   );
 });
 
-Skeleton.displayName = 'Skeleton';
+Skeleton.displayName = 'Skeleton';

package/src/components/layout/Skeleton/Skeleton.types.native.ts

@@ -0,0 +1,16 @@
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+import type { SkeletonBaseProps } from './Skeleton.base';
+
+export type {
+  SkeletonAnimation,
+  SkeletonBaseProps,
+  SkeletonIntensity,
+  SkeletonVariant,
+} from './Skeleton.base';
+
+/** The native `Skeleton`: the shared contract, plus a `View`'s own props. */
+export type SkeletonProps = SkeletonBaseProps &
+  Omit<ViewProps, keyof SkeletonBaseProps | 'style'> & {
+    style?: StyleProp<ViewStyle>;
+  };

package/src/components/layout/Skeleton/Skeleton.types.ts

@@ -1,19 +1,16 @@
-export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'wave';
-export type SkeletonAnimation = 'pulse' | 'wave' | false;
-export type SkeletonIntensity = 'low' | 'medium' | 'high';
+import type React from 'react';
 
-export interface SkeletonProps {
-  variant?: SkeletonVariant;
-  animation?: SkeletonAnimation;
-  width?: number | string;
-  height?: number | string;
-  count?: number;
-  spacing?: number;
-  borderRadius?: number | string;
+import type { SkeletonBaseProps } from './Skeleton.base';
+
+export type {
+  SkeletonAnimation,
+  SkeletonBaseProps,
+  SkeletonIntensity,
+  SkeletonVariant,
+} from './Skeleton.base';
+
+/** The web `Skeleton`: the shared contract, plus the DOM's own two styling hooks. */
+export interface SkeletonProps extends SkeletonBaseProps {
   className?: string;
-  intensity?: SkeletonIntensity;
-  glassmorphism?: boolean;
-  shimmer?: boolean;
-  'data-testid'?: string;
   style?: React.CSSProperties;
-}
+}