@multiplatform.one/theme 6.0.4 → 6.3.0

package/src/theme/defaults/builderOptions.ts

@@ -0,0 +1,174 @@
+import type { CreateThemesBuilderOptions, GetThemeProps } from "../createThemes";
+import {
+  contrastRatio,
+  minContrastRatio,
+  normalizeToHex,
+  pickReadableForeground,
+  relativeLuminance,
+} from "../colorRules";
+
+/**
+ * DG-A11Y-01 / Axiom 12 — resolve a solid `$outlineColor` for the keyboard
+ * focus-visible ring that clears the ≥3:1 contrast floor against BOTH page
+ * surfaces (color1/color2) in this scheme's own ramp. The house themes never
+ * set `$outlineColor`, so it fell through to Tamagui's stock 20%-alpha ink
+ * (measured 1.36:1) — every keyboard user got a near-invisible ring (DF-03).
+ *
+ * Steps are tried strongest-visible-first; the first that clears 3:1 vs both
+ * page steps wins, else the highest-contrast candidate. The ring sits offset
+ * outside the control on the page, so page contrast is the governing pair.
+ */
+function pickFocusRingColorFromSteps(step: (n: number) => string | undefined): string {
+  const fallback = step(11) ?? step(12) ?? step(9) ?? "transparent";
+  const bg1 = normalizeToHex(step(1) ?? "");
+  const bg2 = normalizeToHex(step(2) ?? "");
+  if (!bg1 || !bg2) return fallback;
+  const l1 = relativeLuminance(bg1);
+  const l2 = relativeLuminance(bg2);
+  // Prefer a strong-but-not-ink neutral so the ring is clearly visible in both
+  // schemes without reading as heavy black/white text.
+  const candidates = [11, 10, 9, 12, 8];
+  let best = fallback;
+  let bestMin = 0;
+  for (const key of candidates) {
+    const raw = step(key);
+    const hex = raw ? normalizeToHex(raw) : null;
+    if (!raw || !hex) continue;
+    const l = relativeLuminance(hex);
+    const minC = Math.min(contrastRatio(l, l1), contrastRatio(l, l2));
+    if (minC >= minContrastRatio) return raw;
+    if (minC > bestMin) {
+      bestMin = minC;
+      best = raw;
+    }
+  }
+  return best;
+}
+
+function pickFocusRingColor(theme: Record<string, string>): string {
+  return pickFocusRingColorFromSteps((n) => theme[`color${n}`]);
+}
+
+function getBaseTheme(theme: Record<string, string>) {
+  return {
+    // DG-A11Y-01: solid, scheme-aware focus ring (≥3:1 vs page surfaces).
+    outlineColor: pickFocusRingColor(theme),
+    // Normalize interaction ramp across components:
+    // background: 5 -> 6 -> 4, border: 5 -> 6 -> 7.
+    backgroundPress: theme.color5,
+    backgroundFocus: theme.color6,
+    backgroundActive: theme.color4,
+    // Align placeholder/disabled text with the dedicated muted slot.
+    placeholderColor: theme.color10,
+    // Subtle default borders; focus/press one step deeper than hover.
+    borderColor: theme.color5,
+    borderColorHover: theme.color6,
+    borderColorFocus: theme.color7,
+    borderColorPress: theme.color7,
+    // Project-level semantic aliases for palette slots not covered by Tamagui defaults.
+    // textMuted sits on the $color11 tier: the lowest ramp step that keeps
+    // secondary text AA-readable on color1/2 surfaces (SB-R contrast sweep).
+    textMuted: theme.color11,
+    textSubtle: theme.color6,
+    borderStrong: theme.color7,
+    borderStrongHover: theme.color8,
+    borderStrongPress: theme.color6,
+    surfaceStrong: theme.color7,
+    surfaceMuted: theme.color10,
+    surfacePressStrong: theme.color6,
+  };
+}
+
+// Semantic intents whose Buttons render SOLID (one emphasis system with
+// accent — SB-E-01). The accent theme is solid by palette shape already.
+const solidIntentParents = new Set(["error", "warning", "success"]);
+
+/**
+ * Adjust a background's lightness until it clears WCAG AA (4.5:1) against
+ * the given foreground. Steps away from the foreground's lightness 1.5% at a
+ * time; bails (returns the original) on unparseable colors.
+ */
+function clampBgForReadableText(bgRaw: string, fgRaw: string): string {
+  const fgHex = normalizeToHex(fgRaw);
+  let bgHex = normalizeToHex(bgRaw);
+  if (!fgHex || !bgHex) return bgRaw;
+  const fgLum = relativeLuminance(fgHex);
+  const hslMatch = bgRaw.match(/hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%/);
+  if (!hslMatch) return bgRaw;
+  const h = Number(hslMatch[1]);
+  const s = Number(hslMatch[2]);
+  let l = Number(hslMatch[3]);
+  const dir = fgLum > relativeLuminance(bgHex) ? -1 : 1;
+  for (let i = 0; i < 24; i++) {
+    if (contrastRatio(fgLum, relativeLuminance(bgHex)) >= 4.5) break;
+    l = Math.min(100, Math.max(0, l + dir * 1.5));
+    const next = normalizeToHex(`hsl(${h}, ${s}%, ${l}%)`);
+    if (!next) return bgRaw;
+    bgHex = next;
+  }
+  return `hsl(${h}, ${s}%, ${l}%)`;
+}
+
+export const defaultBuilderOptions: CreateThemesBuilderOptions = {
+  getTheme: ({ name, theme, palette }: GetThemeProps): Record<string, string> => {
+    // Component sub-themes (t_Card, t_ListItem, t_Button, ...) are narrow
+    // templates -- background/color steps only, NO colorN/border tokens. An
+    // element inside one that sets borderColor="$borderColor" resolves
+    // nothing and CSS falls back to currentColor: near-black borders on
+    // every bordered card/row. Anchor border tokens from the scheme
+    // palette (padded shape: [(len-12)/2 alpha anchors] + 12 colors +
+    // [anchors]; colorN = colors[N-1]).
+    if (!theme.color5) {
+      if (!palette) return {};
+      const colors0 = Math.max(0, Math.floor((palette.length - 12) / 2));
+      const step = (i: number): string => palette[colors0 + i] ?? "transparent";
+      // DF-03: component sub-theme templates (t_Input, t_Button, ...) carry
+      // Tamagui's stock 20%-alpha `outlineColor`, which silently overrides the
+      // base theme's solid ring inside those scopes. Re-derive the solid,
+      // scheme-aware ring from this sub-theme's own palette steps.
+      const outlineColor = pickFocusRingColorFromSteps((n) => step(n - 1));
+
+      // Solid semantic-intent Buttons (light_error_Button, dark_warning_Button,
+      // ...): surface on the hue's step 11 with a LUMINANCE-COMPUTED foreground
+      // (Axiom 15 / LC-05) — the hue's step-1 or step-12 anchor, whichever
+      // reads better on the resting fill. The sub-theme `color` carries it so
+      // labels ($color via useResolvedKnobs), icons (currentColor) and any
+      // inherited text all pair correctly. Every interaction fill is then
+      // darkened/lightened until it holds that foreground at the 4.5 AA floor.
+      const parts = name.split("_");
+      if (parts[parts.length - 1] === "Button" && solidIntentParents.has(parts[parts.length - 2])) {
+        const scheme = parts[0];
+        // Luminance-computed on-fill foreground (Axiom 15): the hue's step-1
+        // (pale) or step-12 (deep) anchor, whichever reads better on the fill.
+        const fg = pickReadableForeground(step(10), step(0), step(11));
+        const bg = clampBgForReadableText(step(10), fg);
+        const hover = clampBgForReadableText(scheme === "light" ? step(9) : step(11), fg);
+        const press = clampBgForReadableText(scheme === "light" ? step(11) : step(9), fg);
+        return {
+          outlineColor,
+          background: bg,
+          backgroundHover: hover,
+          backgroundPress: press,
+          backgroundFocus: hover,
+          color: fg,
+          colorHover: fg,
+          colorPress: fg,
+          colorFocus: fg,
+          borderColor: bg,
+          borderColorHover: hover,
+          borderColorFocus: hover,
+          borderColorPress: press,
+        };
+      }
+
+      return {
+        outlineColor,
+        borderColor: step(4),
+        borderColorHover: step(5),
+        borderColorFocus: step(6),
+        borderColorPress: step(6),
+      };
+    }
+    return getBaseTheme(theme);
+  },
+};

package/src/theme/defaults/fonts.spec.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from "vitest";
+import { defaultBodyFont, defaultHeadingFont, interTrackingPx } from "./fonts";
+
+type NumTable = Record<string, number>;
+
+/** Unwrap a font table whose values may be tamagui Variables. */
+function table(font: unknown, key: "size" | "lineHeight" | "letterSpacing"): NumTable {
+  const raw = (font as Record<string, Record<string, number | { val: number }>>)[key] ?? {};
+  const out: NumTable = {};
+  for (const [k, v] of Object.entries(raw)) {
+    const num = typeof v === "number" ? v : v && typeof v.val === "number" ? v.val : undefined;
+    if (num !== undefined) out[k.replace(/^\$/, "")] = num;
+  }
+  return out;
+}
+
+describe("default heading/body fonts — tracking-by-size (Axiom 15 OPTICS, LC-11)", () => {
+  for (const [name, font] of [
+    ["heading", defaultHeadingFont],
+    ["body", defaultBodyFont],
+  ] as const) {
+    describe(`${name} font`, () => {
+      const size = table(font, "size");
+      const letterSpacing = table(font, "letterSpacing");
+
+      it("defines tracking for every size key, computed from the rendered size", () => {
+        expect(Object.keys(size).length).toBeGreaterThan(0);
+        for (const [key, px] of Object.entries(size)) {
+          expect(letterSpacing[key], `letterSpacing[${key}]`).toBe(interTrackingPx(px));
+        }
+      });
+
+      it("is looser at caption sizes and tighter at display sizes", () => {
+        // caption end (≤12px rendered) is neutral-to-loose, never tighter
+        for (const [key, px] of Object.entries(size)) {
+          if (px <= 12) expect(letterSpacing[key]).toBeGreaterThanOrEqual(0);
+          if (px >= 28) expect(letterSpacing[key]).toBeLessThanOrEqual(-0.55);
+        }
+      });
+
+      it("tracking decreases monotonically as size grows", () => {
+        const bySize = Object.entries(size)
+          .filter(([key]) => key !== "true")
+          .sort((a, b) => a[1] - b[1]);
+        for (let i = 1; i < bySize.length; i++) {
+          const [prevKey, prevPx] = bySize[i - 1] as [string, number];
+          const [key, px] = bySize[i] as [string, number];
+          if (px === prevPx) continue;
+          expect(letterSpacing[key], `letterSpacing[${key}]`).toBeLessThan(
+            letterSpacing[prevKey] as number,
+          );
+        }
+      });
+    });
+  }
+
+  it("heading H1–H4 land on the expected optical tracking (snapshot)", () => {
+    const size = table(defaultHeadingFont, "size");
+    const letterSpacing = table(defaultHeadingFont, "letterSpacing");
+    // H1 $10=64px, H2 $9=42px, H3 $8=32px, H4 $7=28px on the 1.4x scale
+    expect({
+      h1: { size: size["10"], tracking: letterSpacing["10"] },
+      h2: { size: size["9"], tracking: letterSpacing["9"] },
+      h3: { size: size["8"], tracking: letterSpacing["8"] },
+      h4: { size: size["7"], tracking: letterSpacing["7"] },
+    }).toMatchInlineSnapshot(`
+      {
+        "h1": {
+          "size": 64,
+          "tracking": -1.43,
+        },
+        "h2": {
+          "size": 42,
+          "tracking": -0.93,
+        },
+        "h3": {
+          "size": 32,
+          "tracking": -0.69,
+        },
+        "h4": {
+          "size": 28,
+          "tracking": -0.59,
+        },
+      }
+    `);
+  });
+});

package/src/theme/defaults/fonts.ts

@@ -0,0 +1,89 @@
+import { createInterFont } from "@tamagui/font-inter";
+
+// Default purpose fonts for components that reference $heading / $body
+// directly, both backed by Inter.
+// Tables match @tamagui/config/v4 (the scale Bento is authored against):
+// headings 1.4x the base size scale (H1 $10 = 64px, H2 $9 = 42, H3 $8 = 32,
+// H4 $7 = 28) at default weight with zero tracking — large and light, not
+// small and bold — and body at the unscaled 14px/$true with lineHeight
+// size+10. No uppercase transforms.
+//
+// Tracking-by-size (Axiom 15 OPTICS + LC-11): letter-spacing is a function
+// of the rendered size, not a constant — slightly loose at caption sizes,
+// increasingly tight at display sizes (the same optical behavior Apple's SF
+// implements per point size). The curve is Inter's own dynamic-metrics
+// model (rsms.me/inter/dynmetrics): tracking(em) = a + b·e^(c·size).
+// These values are Inter-specific: when the headingFont/bodyFont knob picks
+// another family, FontKnobStyles' per-category metrics (LC-11) neutralize
+// this table for fixed-pitch and connected-script categories.
+
+const TRACKING_A = -0.0223;
+const TRACKING_B = 0.185;
+const TRACKING_C = -0.1745;
+
+/** Inter dynamic tracking for a rendered `sizePx`, in em. */
+export function interTrackingEm(sizePx: number): number {
+  return TRACKING_A + TRACKING_B * Math.exp(TRACKING_C * sizePx);
+}
+
+/** Inter dynamic tracking for a rendered `sizePx`, in px (2-decimal). */
+export function interTrackingPx(sizePx: number): number {
+  return Math.round(interTrackingEm(sizePx) * sizePx * 100) / 100;
+}
+
+// Mirrors @tamagui/font-inter's default size table (pinned 2.0.0-rc.41) so
+// tracking can be computed per size key. The fonts.spec.ts invariant test
+// (letterSpacing[k] === interTrackingPx(size[k]) on the BUILT font) catches
+// any upstream drift.
+const interBaseSizes: Record<string, number> = {
+  1: 11,
+  2: 12,
+  3: 13,
+  4: 14,
+  true: 14,
+  5: 16,
+  6: 18,
+  7: 20,
+  8: 23,
+  9: 30,
+  10: 46,
+  11: 55,
+  12: 62,
+  13: 72,
+  14: 92,
+  15: 114,
+  16: 134,
+};
+
+function trackingTable(scaleSize: (size: number) => number): Record<string, number> {
+  return Object.fromEntries(
+    Object.entries(interBaseSizes).map(([key, size]) => [key, interTrackingPx(scaleSize(size))]),
+  );
+}
+
+const headingSizeOf = (size: number) => Math.round(size * 1.4);
+
+export const defaultHeadingFont = createInterFont(
+  {
+    face: {
+      700: { normal: "InterBold" },
+    },
+    letterSpacing: trackingTable(headingSizeOf),
+  },
+  {
+    sizeSize: headingSizeOf,
+    sizeLineHeight: (size) => size + 10,
+  },
+);
+
+export const defaultBodyFont = createInterFont(
+  {
+    face: {
+      700: { normal: "InterBold" },
+    },
+    letterSpacing: trackingTable((size) => size),
+  },
+  {
+    sizeLineHeight: (size) => size + 10,
+  },
+);

package/src/theme/defaults/index.ts

@@ -0,0 +1,4 @@
+export * from "./accent";
+export * from "./base";
+export * from "./builderOptions";
+export * from "./fonts";

package/src/theme/devtools/ThemeDevtoolsPanel.tsx

@@ -6,8 +6,12 @@
  * Controls:
  *  - Color scheme (system / light / dark) via @vxrn/color-scheme
  *  - Preset picker (using registered presets)
- *  - All knobs: fillStyle, borderRadius, borderWidth, elevation, space, size,
- *    textAccent, headingFont, bodyFont, fontWeight, animation
+ *  - All knobs: fillStyle, borderRadius, cornerSmoothing, borderWidth,
+ *    elevation, space, size, density, textAccent, headingFont, bodyFont,
+ *    fontWeight, animation,
+ *    plus house decisions (fieldLabelPlacement, requiredMarking, tableZebra,
+ *    bulkBarPlacement, selectAllScope, timestampStyle, disabledStyle,
+ *    formAutofocus)
  *
  * This panel is rendered *inside* the TanStack Devtools shell so it shares
  * the same React tree and can call hooks like `useTheme` / `useUserScheme`.
@@ -48,14 +52,24 @@ import {
   defaultKnobs,
   FillStyle,
   BorderRadius,
+  CornerSmoothing,
   BorderWidth,
   Elevation,
   Space,
   Size,
+  Density,
   TextAccent,
   HeadingFont,
   BodyFont,
   FontWeight,
+  FieldLabelPlacement,
+  RequiredMarking,
+  TableZebra,
+  BulkBarPlacement,
+  SelectAllScope,
+  TimestampStyle,
+  DisabledStyle,
+  FormAutofocus,
   interactionStates,
 } from "../knobs";
 import { animationNames } from "../animations/index";
@@ -66,7 +80,9 @@ import {
   fillIcon as _fillIcon,
   spaceIcon as _spaceIcon,
   sizeIcon as _sizeIcon,
+  densityIcon as _densityIcon,
   borderRadiusIcon as _borderRadiusIcon,
+  cornerSmoothingIcon as _cornerSmoothingIcon,
   borderWidthIcon as _borderWidthIcon,
   elevationIcon as _elevationIcon,
   textAccentIcon as _textAccentIcon,
@@ -74,6 +90,14 @@ import {
   bodyFontIcon as _bodyFontIcon,
   fontWeightIcon as _fontWeightIcon,
   modeIcon as _modeIcon,
+  fieldLabelPlacementIcon as _fieldLabelPlacementIcon,
+  requiredMarkingIcon as _requiredMarkingIcon,
+  tableZebraIcon as _tableZebraIcon,
+  bulkBarPlacementIcon as _bulkBarPlacementIcon,
+  selectAllScopeIcon as _selectAllScopeIcon,
+  timestampStyleIcon as _timestampStyleIcon,
+  disabledStyleIcon as _disabledStyleIcon,
+  formAutofocusIcon as _formAutofocusIcon,
 } from "./knobIcons";
 
 function extractAnimationNames(tamaguiConfig: unknown): string[] {
@@ -111,15 +135,25 @@ const stateDisplayLabels: Record<InteractionState, string> = {
 const knobKeys: (keyof Knobs)[] = [
   "fillStyle",
   "borderRadius",
+  "cornerSmoothing",
   "borderWidth",
   "elevation",
   "space",
   "size",
+  "density",
   "textAccent",
   "headingFont",
   "bodyFont",
   "fontWeight",
   "animation",
+  "fieldLabelPlacement",
+  "requiredMarking",
+  "tableZebra",
+  "bulkBarPlacement",
+  "selectAllScope",
+  "timestampStyle",
+  "disabledStyle",
+  "formAutofocus",
 ];
 
 /** Knob keys that support per-state overrides. */
@@ -685,10 +719,18 @@ function sizeIcon(v: string, active: boolean, dark: boolean): ReactNode {
   return _sizeIcon(v, ic(active, dark));
 }
 
+function densityIcon(v: string, active: boolean, dark: boolean): ReactNode {
+  return _densityIcon(v, ic(active, dark));
+}
+
 function borderRadiusIcon(v: string, active: boolean, dark: boolean): ReactNode {
   return _borderRadiusIcon(v, ic(active, dark));
 }
 
+function cornerSmoothingIcon(v: string, active: boolean, dark: boolean): ReactNode {
+  return _cornerSmoothingIcon(v, ic(active, dark));
+}
+
 function borderWidthIcon(v: string, active: boolean, dark: boolean): ReactNode {
   return _borderWidthIcon(v, ic(active, dark));
 }
@@ -713,6 +755,38 @@ function fontWeightIcon(v: string, active: boolean, dark: boolean): ReactNode {
   return _fontWeightIcon(v, ic(active, dark));
 }
 
+function fieldLabelPlacementIcon(v: string, active: boolean, dark: boolean): ReactNode {
+  return _fieldLabelPlacementIcon(v, ic(active, dark));
+}
+
+function requiredMarkingIcon(v: string, active: boolean, dark: boolean): ReactNode {
+  return _requiredMarkingIcon(v, ic(active, dark));
+}
+
+function tableZebraIcon(v: string, active: boolean, dark: boolean): ReactNode {
+  return _tableZebraIcon(v, ic(active, dark));
+}
+
+function bulkBarPlacementIcon(v: string, active: boolean, dark: boolean): ReactNode {
+  return _bulkBarPlacementIcon(v, ic(active, dark));
+}
+
+function selectAllScopeIcon(v: string, active: boolean, dark: boolean): ReactNode {
+  return _selectAllScopeIcon(v, ic(active, dark));
+}
+
+function timestampStyleIcon(v: string, active: boolean, dark: boolean): ReactNode {
+  return _timestampStyleIcon(v, ic(active, dark));
+}
+
+function disabledStyleIcon(v: string, active: boolean, dark: boolean): ReactNode {
+  return _disabledStyleIcon(v, ic(active, dark));
+}
+
+function formAutofocusIcon(v: string, active: boolean, dark: boolean): ReactNode {
+  return _formAutofocusIcon(v, ic(active, dark));
+}
+
 // ---------------------------------------------------------------------------
 // Main panel
 // ---------------------------------------------------------------------------
@@ -1365,6 +1439,18 @@ export function ThemeDevtoolsPanel({
         >
           {stateRows("space", Object.values(Space), spaceIcon)}
         </IconGroup>
+        <IconGroup
+          label="Density"
+          options={Object.values(Density)}
+          value={getOverride("density")}
+          onChange={(v) => set("density", v)}
+          icon={densityIcon}
+          styles={styles}
+          isDark={isDark}
+          pinned={pinnedKnobs.has("density")}
+          onTogglePin={() => togglePin("density")}
+          onUnset={() => unset("density")}
+        />
         <IconGroup
           label="Radius"
           options={Object.values(BorderRadius)}
@@ -1381,6 +1467,18 @@ export function ThemeDevtoolsPanel({
         >
           {stateRows("borderRadius", Object.values(BorderRadius), borderRadiusIcon)}
         </IconGroup>
+        <IconGroup
+          label="Smoothing"
+          options={Object.values(CornerSmoothing)}
+          value={getOverride("cornerSmoothing")}
+          onChange={(v) => set("cornerSmoothing", v)}
+          icon={cornerSmoothingIcon}
+          styles={styles}
+          isDark={isDark}
+          pinned={pinnedKnobs.has("cornerSmoothing")}
+          onTogglePin={() => togglePin("cornerSmoothing")}
+          onUnset={() => unset("cornerSmoothing")}
+        />
         <IconGroup
           label="Border"
           options={Object.values(BorderWidth)}
@@ -1488,6 +1586,102 @@ export function ThemeDevtoolsPanel({
           onTogglePin={() => togglePin("animation")}
           isDark={isDark}
         />
+        <IconGroup
+          label="Label place"
+          options={Object.values(FieldLabelPlacement)}
+          value={getOverride("fieldLabelPlacement")}
+          onChange={(v) => set("fieldLabelPlacement", v)}
+          icon={fieldLabelPlacementIcon}
+          styles={styles}
+          isDark={isDark}
+          pinned={pinnedKnobs.has("fieldLabelPlacement")}
+          onTogglePin={() => togglePin("fieldLabelPlacement")}
+          onUnset={() => unset("fieldLabelPlacement")}
+        />
+        <IconGroup
+          label="Required mark"
+          options={Object.values(RequiredMarking)}
+          value={getOverride("requiredMarking")}
+          onChange={(v) => set("requiredMarking", v)}
+          icon={requiredMarkingIcon}
+          styles={styles}
+          isDark={isDark}
+          pinned={pinnedKnobs.has("requiredMarking")}
+          onTogglePin={() => togglePin("requiredMarking")}
+          onUnset={() => unset("requiredMarking")}
+        />
+        <IconGroup
+          label="Zebra"
+          options={Object.values(TableZebra)}
+          value={getOverride("tableZebra")}
+          onChange={(v) => set("tableZebra", v)}
+          icon={tableZebraIcon}
+          styles={styles}
+          isDark={isDark}
+          pinned={pinnedKnobs.has("tableZebra")}
+          onTogglePin={() => togglePin("tableZebra")}
+          onUnset={() => unset("tableZebra")}
+        />
+        <IconGroup
+          label="Bulk bar"
+          options={Object.values(BulkBarPlacement)}
+          value={getOverride("bulkBarPlacement")}
+          onChange={(v) => set("bulkBarPlacement", v)}
+          icon={bulkBarPlacementIcon}
+          styles={styles}
+          isDark={isDark}
+          pinned={pinnedKnobs.has("bulkBarPlacement")}
+          onTogglePin={() => togglePin("bulkBarPlacement")}
+          onUnset={() => unset("bulkBarPlacement")}
+        />
+        <IconGroup
+          label="Select all"
+          options={Object.values(SelectAllScope)}
+          value={getOverride("selectAllScope")}
+          onChange={(v) => set("selectAllScope", v)}
+          icon={selectAllScopeIcon}
+          styles={styles}
+          isDark={isDark}
+          pinned={pinnedKnobs.has("selectAllScope")}
+          onTogglePin={() => togglePin("selectAllScope")}
+          onUnset={() => unset("selectAllScope")}
+        />
+        <IconGroup
+          label="Timestamp"
+          options={Object.values(TimestampStyle)}
+          value={getOverride("timestampStyle")}
+          onChange={(v) => set("timestampStyle", v)}
+          icon={timestampStyleIcon}
+          styles={styles}
+          isDark={isDark}
+          pinned={pinnedKnobs.has("timestampStyle")}
+          onTogglePin={() => togglePin("timestampStyle")}
+          onUnset={() => unset("timestampStyle")}
+        />
+        <IconGroup
+          label="Disabled"
+          options={Object.values(DisabledStyle)}
+          value={getOverride("disabledStyle")}
+          onChange={(v) => set("disabledStyle", v)}
+          icon={disabledStyleIcon}
+          styles={styles}
+          isDark={isDark}
+          pinned={pinnedKnobs.has("disabledStyle")}
+          onTogglePin={() => togglePin("disabledStyle")}
+          onUnset={() => unset("disabledStyle")}
+        />
+        <IconGroup
+          label="Autofocus"
+          options={Object.values(FormAutofocus)}
+          value={getOverride("formAutofocus")}
+          onChange={(v) => set("formAutofocus", v)}
+          icon={formAutofocusIcon}
+          styles={styles}
+          isDark={isDark}
+          pinned={pinnedKnobs.has("formAutofocus")}
+          onTogglePin={() => togglePin("formAutofocus")}
+          onUnset={() => unset("formAutofocus")}
+        />
         <div
           style={{
             ...styles.card,

package/src/theme/devtools/buildSnapshot.ts

@@ -3,14 +3,25 @@ import { semanticGroups } from "../colorRules";
 const knobKeys = [
   "fillStyle",
   "borderRadius",
+  "cornerSmoothing",
   "borderWidth",
   "elevation",
   "space",
+  "size",
+  "density",
   "textAccent",
   "headingFont",
   "bodyFont",
   "fontWeight",
   "animation",
+  "fieldLabelPlacement",
+  "requiredMarking",
+  "tableZebra",
+  "bulkBarPlacement",
+  "selectAllScope",
+  "timestampStyle",
+  "disabledStyle",
+  "formAutofocus",
 ];
 
 const stateKnobKeys = ["elevation", "borderWidth", "borderRadius"] as const;