@colixsystems/widget-sdk 0.233.0 → 0.235.0

package/dist/datetimepicker-view.js

@@ -0,0 +1,221 @@
+// REQ-WSDK-PLATFORM §6 — the ONE `<DateTimePicker>` field both hosts render.
+// The field (icon, value in the viewer's language, clear button) is shared;
+// what opens when it is pressed is the host's `Surface`: a themed calendar
+// sheet on the web, the operating system's own picker on a device.
+
+import React from "react";
+import { useHostLocale, useHostTheme } from "./hooks.js";
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { Icon } from "./icon.js";
+import { FIELD_OUTLINE_OFF, fieldStateStyle, resolveFormControlTokens } from "./form-control-tokens.js";
+import {
+  formatDisplayLabel,
+  normaliseMode,
+  partsToIso,
+  valueToParts,
+} from "./datetimepicker-format.js";
+import { resolveBounds, resolvePickerLocale } from "./datetimepicker-calendar.js";
+
+const h = React.createElement;
+const CLEAR_ICON_SIZE = 18;
+
+function isSet(value) {
+  return value != null && value !== "";
+}
+
+/**
+ * Bind the shared field to one platform's primitives and picking surface.
+ *
+ * @param {{View: any, Text: any, Pressable: any, Platform: any, Surface: any}} rn
+ */
+export function makeDateTimePicker(rn) {
+  const { View, Text, Pressable, Platform, Surface } = rn;
+
+  function focusNode(node) {
+    if (Platform.OS === "web" && node && typeof node.focus === "function") node.focus();
+  }
+
+  function ClearButton({ t, label, onPress, testID }) {
+    return h(
+      Pressable,
+      {
+        onPress,
+        accessibilityRole: "button",
+        accessibilityLabel: label,
+        hitSlop: 8,
+        testID: testID ? `${testID}-clear` : undefined,
+        style: ({ pressed }) => [
+          {
+            alignItems: "center",
+            justifyContent: "center",
+            alignSelf: "stretch",
+            paddingHorizontal: t.paddingHorizontal,
+          },
+          FIELD_OUTLINE_OFF,
+          pressed ? { opacity: 0.6 } : null,
+        ],
+      },
+      h(Icon, { name: "x", size: CLEAR_ICON_SIZE, color: t.placeholderColor }),
+    );
+  }
+
+  function Trigger({ t, triggerRef, open, canEdit, hasValue, shown, mode, spoken, onOpen, onFocusChange, testID }) {
+    const ink = hasValue ? t.textColor : t.placeholderColor;
+    return h(
+      Pressable,
+      {
+        ref: triggerRef,
+        onPress: () => {
+          if (canEdit) onOpen();
+        },
+        onKeyDown: (event) => {
+          if (canEdit && event.key === "ArrowDown") {
+            event.preventDefault();
+            onOpen();
+          }
+        },
+        onFocus: () => onFocusChange(true),
+        onBlur: () => onFocusChange(false),
+        disabled: !canEdit,
+        accessibilityRole: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-disabled": !canEdit,
+        accessibilityLabel: spoken,
+        testID,
+        style: [
+          {
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "center",
+            gap: t.rowGap,
+            minHeight: t.height,
+            paddingLeft: t.paddingHorizontal,
+            paddingRight: hasValue && canEdit ? 0 : t.paddingHorizontal,
+            paddingVertical: t.paddingVertical,
+          },
+          FIELD_OUTLINE_OFF,
+        ],
+      },
+      h(Icon, { name: mode === "time" ? "clock" : "calendar", size: CLEAR_ICON_SIZE, color: ink }),
+      h(
+        Text,
+        { numberOfLines: 1, style: { flexShrink: 1, color: ink, fontFamily: t.fontFamily, fontSize: t.fontSize } },
+        shown,
+      ),
+    );
+  }
+
+  function DateTimePicker({
+    value,
+    onChange,
+    mode,
+    minimumDate,
+    maximumDate,
+    disabled = false,
+    accessibilityLabel,
+    placeholder,
+    clearLabel = "Clear",
+    doneLabel = "Done",
+    closeAccessibilityLabel,
+    testID,
+  }) {
+    const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
+    const t = resolveFormControlTokens(theme);
+    const appLocale = useHostLocale();
+    const locale = React.useMemo(() => resolvePickerLocale(appLocale), [appLocale]);
+    const effectiveMode = normaliseMode(mode);
+    const [open, setOpen] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
+    const triggerRef = React.useRef(null);
+    const parts = React.useMemo(() => valueToParts(value, effectiveMode), [value, effectiveMode]);
+    const bounds = React.useMemo(
+      () => resolveBounds(minimumDate, maximumDate, effectiveMode),
+      [minimumDate, maximumDate, effectiveMode],
+    );
+    const hasValue = isSet(value);
+    const shown =
+      !hasValue && isSet(placeholder) ? placeholder : formatDisplayLabel(value, effectiveMode, locale);
+    const canEdit = !disabled && typeof onChange === "function";
+
+    const emit = (next) => {
+      if (typeof onChange === "function") onChange(partsToIso(next, effectiveMode));
+    };
+    // Back to the field once the sheet is gone, or its focus trap pulls it in.
+    const wasOpen = React.useRef(false);
+    React.useEffect(() => {
+      if (wasOpen.current && !open) focusNode(triggerRef.current);
+      wasOpen.current = open;
+    }, [open]);
+
+    const trigger = h(Trigger, {
+      t,
+      triggerRef,
+      open,
+      canEdit,
+      hasValue,
+      shown,
+      mode: effectiveMode,
+      spoken: [accessibilityLabel, shown].filter(Boolean).join(", "),
+      onOpen: () => setOpen(true),
+      onFocusChange: setFocused,
+      testID,
+    });
+
+    const field = h(
+      View,
+      {
+        style: [
+          {
+            flexDirection: "row",
+            alignItems: "center",
+            borderWidth: 1,
+            borderColor: t.borderColor,
+            borderRadius: t.radius,
+            backgroundColor: t.background,
+          },
+          fieldStateStyle(t, { focused, invalid: false }),
+          disabled ? { opacity: t.disabledOpacity } : null,
+        ],
+      },
+      trigger,
+      hasValue && canEdit
+        ? h(ClearButton, {
+            t,
+            label: clearLabel,
+            testID,
+            onPress: () => {
+              emit(null);
+              // The button unmounts once cleared; focus stays on the field.
+              focusNode(triggerRef.current);
+            },
+          })
+        : null,
+    );
+
+    // A sibling of the field: iOS draws its picker inline, below it.
+    return h(
+      React.Fragment,
+      null,
+      field,
+      h(Surface, {
+        open,
+        onClose: () => setOpen(false),
+        mode: effectiveMode,
+        parts,
+        bounds,
+        locale,
+        onPick: emit,
+        title: accessibilityLabel || shown,
+        heading: accessibilityLabel,
+        doneLabel,
+        closeAccessibilityLabel,
+        testID,
+        t,
+      }),
+    );
+  }
+
+  DateTimePicker.displayName = "DateTimePicker";
+  return DateTimePicker;
+}

package/dist/datetimepicker.js

@@ -1,166 +1,15 @@
-// REQ-WSDK-PLATFORM §6 — `<DateTimePicker>` SDK primitive (web implementation).
-//
-// `@react-native-community/datetimepicker` ships iOS / Android only — it has
-// no react-native-web mapping, so importing it in the browser yields no
-// rendered control. The web build therefore uses the browser's native
-// `<input type="date" | "time" | "datetime-local">` directly and keeps the
-// public contract identical to the native build: the value prop and the
-// onChange callback both speak ISO 8601 strings (the datastore wire format),
-// so a widget's JSX is byte-for-byte the same on both platforms.
-//
-// Props (mirrors datetimepicker.native.js):
-//   value: string | null   — ISO 8601 (`2026-05-28` for date mode,
-//                            `14:30` for time mode,
-//                            `2026-05-28T14:30:00.000Z` for datetime mode).
-//                            `null` / "" leaves the input blank.
-//   onChange: (iso: string) => void
-//   mode:    "date" | "time" | "datetime"  — default "date"
-//   minimumDate / maximumDate: string | null  — ISO bounds
-//   disabled: boolean
-//   accessibilityLabel: string | undefined  — written to the DOM input as
-//                            `aria-label`. The shared form-field renderer
-//                            in `frontend/src/components/widgets/_shared/
-//                            formFields.jsx` passes the column's label
-//                            through this prop so Playwright / screen
-//                            readers can locate the input by its label.
+// `<DateTimePicker>` (web). Binds ./datetimepicker-view.js to react-native-web
+// and the themed calendar sheet; see ./primitives.js for why not the bare
+// specifier.
 
-import React from "react";
-import { useHostTheme } from "./hooks.js";
-import {
-  isDarkColor,
-  isoToDateTimeLocalInput,
-  dateTimeLocalInputToIso,
-} from "./datetimepicker-format.js";
-import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { View, Text, Pressable, ScrollView, Platform } from "react-native-web";
+import { makeDateTimePicker } from "./datetimepicker-view.js";
+import { makeDateTimeSheet } from "./datetimepicker-sheet.js";
+import { Overlay } from "./overlay.js";
 
-const MODE_TO_INPUT_TYPE = {
-  date: "date",
-  time: "time",
-  datetime: "datetime-local",
-};
+const primitives = { View, Text, Pressable, ScrollView, Platform };
 
-// Render the saved ISO value in the format each `<input>` accepts.
-//
-// `date` and `time` are already local / timezone-free in the SDK contract,
-// so they pass through verbatim. `datetime-local` needs `YYYY-MM-DDTHH:mm`
-// in LOCAL time — we round-trip through Date to convert a stored UTC ISO
-// (e.g. `2026-05-28T13:30:00.000Z`) to the user's local clock.
-function _isoToInputValue(value, mode) {
-  if (value == null || value === "") return "";
-  if (mode === "date") {
-    // Strip any time portion if a datetime ISO accidentally lands in a
-    // date-mode picker — keep the YYYY-MM-DD head.
-    return String(value).slice(0, 10);
-  }
-  if (mode === "time") {
-    return String(value).slice(0, 5);
-  }
-  return isoToDateTimeLocalInput(value);
-}
-
-// Translate the input's typed string back to the ISO format the wire wants.
-// `date` and `time` are already in the right shape; `datetime-local` is
-// parsed as local time and serialized as the full UTC ISO so the value
-// round-trips into a DATE column unchanged.
-function _inputValueToIso(raw, mode) {
-  if (raw == null || raw === "") return "";
-  if (mode === "date" || mode === "time") return raw;
-  return dateTimeLocalInputToIso(raw);
-}
-
-export function DateTimePicker({
-  value,
-  onChange,
-  mode,
-  minimumDate,
-  maximumDate,
-  disabled,
-  accessibilityLabel,
-}) {
-  const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
-  const effectiveMode = mode === "time" || mode === "datetime" ? mode : "date";
-  const inputType = MODE_TO_INPUT_TYPE[effectiveMode];
-  const inputValue = _isoToInputValue(value, effectiveMode);
-
-  const handleChange = (event) => {
-    if (typeof onChange !== "function") return;
-    const iso = _inputValueToIso(event.target.value, effectiveMode);
-    onChange(iso);
-  };
-
-  // The min/max props accept ISO strings too — pass them through in the
-  // input-friendly representation. Undefined when not provided so the
-  // browser doesn't show an empty constraint chip.
-  const min =
-    minimumDate != null && minimumDate !== ""
-      ? _isoToInputValue(minimumDate, effectiveMode)
-      : undefined;
-  const max =
-    maximumDate != null && maximumDate !== ""
-      ? _isoToInputValue(maximumDate, effectiveMode)
-      : undefined;
-
-  // sc-1878 — clicking the formatted date text (or focusing it and pressing
-  // Enter / Space) opens the native calendar, not just the small built-in
-  // calendar icon. `showPicker()` requires a user gesture; click/keydown both
-  // qualify. Guarded: not every browser/build exposes it, and calling it while
-  // the picker is already open throws — neither should break the field.
-  const openPicker = (target) => {
-    if (disabled || !target || typeof target.showPicker !== "function") return;
-    try {
-      target.showPicker();
-    } catch {
-      // Already open, or blocked outside a user gesture — leave the input as-is.
-    }
-  };
-
-  const handleClick = (event) => openPicker(event.currentTarget);
-
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
-      event.preventDefault();
-      openPicker(event.currentTarget);
-    }
-  };
-
-  // Inline styles match the SDK's other web-only primitives — the host's
-  // form widgets wrap this in their own labelled field, so the input just
-  // needs to look like a normal text input. `cursor: pointer` signals the
-  // whole field is the click affordance (sc-1878). Colours come from the
-  // theme so the field is legible on any surface (sc-3370); `colorScheme`
-  // steers the browser's built-in date UI (edit segments + calendar icon).
-  // The scheme keys off the theme's TEXT colour (onSurface, which the host
-  // already picked to contrast the surface) rather than re-deriving dark-vs-
-  // light from the surface with a second luminance formula that could disagree
-  // with the host: light text ⇒ dark surface ⇒ dark scheme.
-  const style = {
-    boxSizing: "border-box",
-    width: "100%",
-    minHeight: 44,
-    padding: "8px 12px",
-    fontSize: 16,
-    fontFamily: "inherit",
-    color: theme.colors.onSurface,
-    backgroundColor: "transparent",
-    colorScheme: isDarkColor(theme.colors.onSurface) ? "light" : "dark",
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderColor: theme.colors.border,
-    borderRadius: 6,
-    outline: "none",
-    cursor: disabled ? "default" : "pointer",
-  };
-
-  return React.createElement("input", {
-    type: inputType,
-    value: inputValue,
-    onChange: handleChange,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    min,
-    max,
-    disabled: !!disabled,
-    style,
-    "aria-label": accessibilityLabel || undefined,
-  });
-}
+export const DateTimePicker = makeDateTimePicker({
+  ...primitives,
+  Surface: makeDateTimeSheet({ ...primitives, Overlay }),
+});

package/dist/datetimepicker.native.js

@@ -1,131 +1,43 @@
-// REQ-WSDK-PLATFORM §6 — `<DateTimePicker>` SDK primitive (native).
-//
-// Wraps `@react-native-community/datetimepicker`. That library is imperative
-// on Android — rendering it shows the dialog immediately and re-mounting is
-// the only way to reopen it — so the primitive owns a small open/closed state
-// and renders a tappable, formatted-date trigger (sc-1878). Tapping the
-// formatted date (the trigger is an accessible button, reachable by keyboard /
-// screen-reader) opens the picker; choosing a value closes it and emits the
-// ISO string. This mirrors the web build, where clicking the `<input>` text
-// calls `showPicker()` — both hosts: tap the date, the picker opens.
-//
-// Props (mirrors datetimepicker.js):
-//   value: string | null   — ISO 8601 (`2026-05-28` for date mode,
-//                            `14:30` for time mode,
-//                            `2026-05-28T14:30:00.000Z` for datetime mode).
-//                            `null` / "" shows the placeholder, opens at "now".
-//   onChange: (iso: string) => void
-//   mode:    "date" | "time" | "datetime"  — default "date"
-//   minimumDate / maximumDate: string | null  — ISO bounds
-//   disabled: boolean
-//   accessibilityLabel: string | undefined  — names the trigger button so the
-//                            shared form-field renderer's column label reaches
-//                            screen readers / test tooling, matching the web
-//                            input's `aria-label`.
+// `<DateTimePicker>` (native). Binds ./datetimepicker-view.js to React Native
+// with the operating system's own picker as its surface, via
+// `@react-native-community/datetimepicker`. That library is imperative on
+// Android — rendering it opens the dialog — so it mounts only while open.
 
-import React, { useMemo, useState } from "react";
+import React from "react";
 // eslint-disable-next-line no-restricted-syntax
 import RNDateTimePicker from "@react-native-community/datetimepicker";
-import { Pressable, Text, StyleSheet } from "react-native";
-import {
-  parseToDate,
-  formatToIso,
-  formatDisplayLabel,
-} from "./datetimepicker-format.js";
-import { useHostTheme } from "./hooks.js";
-import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
-
-const styles = StyleSheet.create({
-  trigger: {
-    minHeight: 44,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderWidth: 1,
-    borderRadius: 6,
-    justifyContent: "center",
-  },
-  triggerDisabled: { opacity: 0.5 },
-  label: { fontSize: 16 },
-  placeholder: { fontSize: 16, opacity: 0.5 },
-});
-
-export function DateTimePicker({
-  value,
-  onChange,
-  mode,
-  minimumDate,
-  maximumDate,
-  disabled,
-  accessibilityLabel,
-}) {
-  const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
-  const effectiveMode = mode === "time" || mode === "datetime" ? mode : "date";
-  const [open, setOpen] = useState(false);
-  const dateValue = useMemo(() => parseToDate(value), [value]);
-  const min = useMemo(
-    () => (minimumDate ? parseToDate(minimumDate) : undefined),
-    [minimumDate],
-  );
-  const max = useMemo(
-    () => (maximumDate ? parseToDate(maximumDate) : undefined),
-    [maximumDate],
-  );
-
-  const isEmpty = value == null || value === "";
-
-  const handleChange = (event, picked) => {
-    // Android fires "dismissed" when the user cancels; close without emitting.
-    setOpen(false);
-    if (event?.type === "dismissed") return;
-    if (typeof onChange !== "function") return;
-    if (!(picked instanceof Date)) return;
-    const iso = formatToIso(picked, effectiveMode);
-    if (iso != null) onChange(iso);
-  };
+import { View, Text, Pressable, Platform } from "react-native";
+import { makeDateTimePicker } from "./datetimepicker-view.js";
+import { nowParts, partsToDate, valueToParts } from "./datetimepicker-format.js";
+import { clampToBounds } from "./datetimepicker-calendar.js";
+
+function boundDate(parts, mode) {
+  if (!parts || mode === "time") return undefined;
+  return partsToDate(parts);
+}
 
-  const trigger = React.createElement(
-    Pressable,
-    {
-      onPress: () => { if (!disabled) setOpen(true); },
-      disabled: !!disabled,
-      accessibilityRole: "button",
-      accessibilityLabel,
-      accessibilityState: { disabled: !!disabled },
-      // Themed border + text so the trigger is legible on any surface (sc-3370).
-      style: [
-        styles.trigger,
-        { borderColor: theme.colors.border },
-        disabled && styles.triggerDisabled,
-      ],
+function OsPicker({ open, onClose, mode, parts, bounds, onPick }) {
+  if (!open) return null;
+  const start = parts ? { ...nowParts(), ...dropEmpty(parts) } : clampToBounds(nowParts(), bounds);
+  return React.createElement(RNDateTimePicker, {
+    value: partsToDate(start),
+    // iOS honours "datetime"; Android shows its date dialog for it.
+    mode,
+    minimumDate: boundDate(bounds.min, mode),
+    maximumDate: boundDate(bounds.max, mode),
+    onChange: (event, picked) => {
+      onClose();
+      // Android reports a cancelled dialog as "dismissed".
+      if (event && event.type === "dismissed") return;
+      if (!(picked instanceof Date)) return;
+      // Android's time dialog cannot be bounded, so a pick is clamped here.
+      onPick(clampToBounds(valueToParts(picked.toISOString(), "datetime"), bounds));
     },
-    React.createElement(
-      Text,
-      {
-        style: [
-          isEmpty ? styles.placeholder : styles.label,
-          { color: theme.colors.onSurface },
-        ],
-      },
-      formatDisplayLabel(value, effectiveMode),
-    ),
-  );
-
-  if (!open) return trigger;
+  });
+}
 
-  // The RN library's `mode` is "date" / "time"; iOS also honours "datetime",
-  // Android falls back to date-only for it (a pre-existing limit, unchanged
-  // here). The web build uses datetimepicker.js, so this file is never web.
-  return React.createElement(
-    React.Fragment,
-    null,
-    trigger,
-    React.createElement(RNDateTimePicker, {
-      value: dateValue,
-      mode: effectiveMode,
-      minimumDate: min,
-      maximumDate: max,
-      disabled: !!disabled,
-      onChange: handleChange,
-    }),
-  );
+function dropEmpty(parts) {
+  return Object.fromEntries(Object.entries(parts).filter(([, v]) => v != null));
 }
+
+export const DateTimePicker = makeDateTimePicker({ View, Text, Pressable, Platform, Surface: OsPicker });

package/dist/hooks.js

@@ -238,6 +238,14 @@ export function useHostNavigation() {
   return ctx ? ctx.navigation : undefined;
 }
 
+// @internal — the app's language, read WITHOUT asserting a widget context so
+// `<DateTimePicker>` can name months in it wherever it renders.
+export function useHostLocale() {
+  const ctx = useContext(HostWidgetContext);
+  const locale = ctx && ctx.i18n ? ctx.i18n.locale : undefined;
+  return typeof locale === "string" && locale ? locale : undefined;
+}
+
 // A host translation, or null on a miss: both hosts answer a miss with the
 // key itself or a `{{t:…}}` placeholder.
 function hostTranslation(hostT, key) {

package/dist/host.d.ts

@@ -275,9 +275,11 @@ export interface FooterTokens {
   shape: "floating" | "docked";
   /** A floating bar's corner radius, px (0–40). */
   radius: number;
-  /** A tab's corner radius, px: a floating bar's curve one row inset in
+  /** A tab's corner radius, px: a floating bar's curve one padding in
    *  (min 6) for a filled tab; 6 for an accent tab or a docked bar. */
   itemRadius: number;
+  /** sc-11703: the space around the tabs, px (0–12, default 4). */
+  padding: number;
   /** A floating bar's distance from the screen's sides, px (0–48). */
   sideMargin: number;
   /** Space below the tabs, px (0–32), on top of the system's clearance. */
@@ -286,14 +288,14 @@ export interface FooterTokens {
 
 /** sc-11678: each bar measurement's upper bound and default, px (min 0). */
 export const FOOTER_SIZES: Readonly<
-  Record<"radius" | "sideMargin" | "bottomSpacing", Readonly<{ max: number; fallback: number }>>
+  Record<"radius" | "sideMargin" | "bottomSpacing" | "padding", Readonly<{ max: number; fallback: number }>>
 >;
 
 /** sc-11678: one bar measurement clamped onto its `FOOTER_SIZES` range, or
  *  `undefined` when the value is not a finite number. */
 export function clampFooterSize(
   value: unknown,
-  key: "radius" | "sideMargin" | "bottomSpacing",
+  key: "radius" | "sideMargin" | "bottomSpacing" | "padding",
 ): number | undefined;
 
 /** sc-11678: the part of the iOS bottom inset a bar keeps clear (the home
@@ -624,10 +626,12 @@ export function isoToDateTimeLocalInput(value: unknown): string;
 export function dateTimeLocalInputToIso(raw: unknown): string;
 
 /**
- * sc-8448 — the `<DateTimePicker>` trigger label: for `"datetime"` the stored
- * instant as `YYYY-MM-DD HH:mm` local time, falling back to the raw string.
+ * The `<DateTimePicker>` field's label: the value in `locale` (default: the
+ * runtime's), a `"datetime"` instant on the viewer's clock (sc-8448, sc-11777).
+ * Empty gives the mode's placeholder; an unreadable value is returned as is.
  */
 export function formatDateTimeLabel(
   value: unknown,
   mode: "date" | "time" | "datetime",
+  locale?: string,
 ): string;

package/dist/navigation.cjs

@@ -87,7 +87,7 @@ function menuItemCap(menuType) {
 // `backgroundColor`, `textColor`, `tabActiveBackgroundColor`,
 // `tabActiveTextColor`, `borderColor`, `borderWidth`, `activeStyle`,
 // `tabLayout`, (sc-11678) `shape`, `radius`, `sideMargin`, `bottomSpacing`
-// and (sc-11692) `glass`.
+// (sc-11692) `glass` and (sc-11703) `padding`.
 function resolveFooterTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const footer = isPlainObject(config.footer) ? config.footer : {};
@@ -106,6 +106,7 @@ function resolveFooterTokens(theme) {
   const divider = borderWidth > 0;
   const floats = footer.shape !== "docked";
   const radius = footerSizeOr(footer, "radius");
+  const padding = footerSizeOr(footer, "padding");
   const backgroundColor = hexOr(footer.backgroundColor, DEFAULT_FOOTER_SURFACE);
   // sc-11692: frosted unless switched off; only a floating bar has a page
   // behind it to frost.
@@ -141,11 +142,12 @@ function resolveFooterTokens(theme) {
     // sc-11678: unset floats, so every app gets the rounded, inset bar.
     shape: floats ? "floating" : "docked",
     radius,
-    // A filled tab follows a floating bar's curve one row inset (8px) in,
-    // never sharper than the docked 6px chip. An accent tab paints no surface,
+    // A filled tab follows a floating bar's curve one padding in, never
+    // sharper than the docked 6px chip. An accent tab paints no surface,
     // and a curved top edge would bend its marker into an arc.
     itemRadius:
-      floats && !accent ? Math.max(DOCKED_TAB_RADIUS, radius - 8) : DOCKED_TAB_RADIUS,
+      floats && !accent ? Math.max(DOCKED_TAB_RADIUS, radius - padding) : DOCKED_TAB_RADIUS,
+    padding,
     sideMargin: footerSizeOr(footer, "sideMargin"),
     bottomSpacing: footerSizeOr(footer, "bottomSpacing"),
   };
@@ -157,6 +159,8 @@ const FOOTER_SIZES = Object.freeze({
   radius: Object.freeze({ max: 40, fallback: 28 }),
   sideMargin: Object.freeze({ max: 48, fallback: 12 }),
   bottomSpacing: Object.freeze({ max: 32, fallback: 8 }),
+  // sc-11703: the space around the tabs; 4 makes a 48pt bar (40pt tabs).
+  padding: Object.freeze({ max: 12, fallback: 4 }),
 });
 const DOCKED_TAB_RADIUS = 6;