@usefragments/ui 1.5.4 → 1.7.0

package/src/components/Switch/Switch.module.scss

@@ -0,0 +1,255 @@
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+@use "../../recipes/boolean-range" as boolean;
+@use "../../recipes/field" as field;
+@use "../../recipes/target" as target;
+@use "../../recipes/typography" as typography;
+
+.root {
+  --_switch-off-bg: light-dark(
+    color-mix(
+      in srgb,
+      var(--fui-bg-elevated, #{$fui-bg-elevated}) 92%,
+      var(--fui-text-primary, #{$fui-text-primary}) 8%
+    ),
+    color-mix(
+      in srgb,
+      var(--fui-bg-elevated, #{$fui-bg-elevated}) 82%,
+      var(--fui-text-primary, #{$fui-text-primary}) 18%
+    )
+  );
+  --_switch-off-bg-hover: light-dark(
+    color-mix(
+      in srgb,
+      var(--fui-bg-elevated, #{$fui-bg-elevated}) 88%,
+      var(--fui-text-primary, #{$fui-text-primary}) 12%
+    ),
+    color-mix(
+      in srgb,
+      var(--fui-bg-elevated, #{$fui-bg-elevated}) 76%,
+      var(--fui-text-primary, #{$fui-text-primary}) 24%
+    )
+  );
+  --_switch-off-border: light-dark(
+    color-mix(
+      in srgb,
+      var(--fui-border-strong, #{$fui-border-strong}) 72%,
+      var(--fui-text-primary, #{$fui-text-primary}) 28%
+    ),
+    color-mix(
+      in srgb,
+      var(--fui-border-strong, #{$fui-border-strong}) 58%,
+      var(--fui-text-primary, #{$fui-text-primary}) 42%
+    )
+  );
+  --_switch-off-border-hover: light-dark(
+    color-mix(
+      in srgb,
+      var(--fui-border-strong, #{$fui-border-strong}) 58%,
+      var(--fui-text-primary, #{$fui-text-primary}) 42%
+    ),
+    color-mix(
+      in srgb,
+      var(--fui-border-strong, #{$fui-border-strong}) 44%,
+      var(--fui-text-primary, #{$fui-text-primary}) 56%
+    )
+  );
+  --_switch-thumb-bg: light-dark(
+    color-mix(in srgb, var(--fui-bg-primary, #{$fui-bg-primary}) 98%, white 2%),
+    color-mix(
+      in srgb,
+      var(--fui-bg-primary, #{$fui-bg-primary}) 56%,
+      var(--fui-text-primary, #{$fui-text-primary}) 44%
+    )
+  );
+  --_switch-thumb-border: light-dark(
+    color-mix(
+      in srgb,
+      var(--fui-border-strong, #{$fui-border-strong}) 68%,
+      var(--fui-text-primary, #{$fui-text-primary}) 32%
+    ),
+    color-mix(
+      in srgb,
+      var(--fui-border-strong, #{$fui-border-strong}) 45%,
+      var(--fui-text-primary, #{$fui-text-primary}) 55%
+    )
+  );
+
+  @include target.hit-area("compact");
+
+  display: grid;
+  align-items: start;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+
+  &[data-size="sm"] {
+    grid-template-columns: boolean.switch-inline-size("sm") minmax(0, 1fr);
+    column-gap: boolean.label-gap("sm");
+    @include typography.role("ui-compact");
+  }
+
+  &[data-size="md"] {
+    grid-template-columns: boolean.switch-inline-size("md") minmax(0, 1fr);
+    column-gap: boolean.label-gap("md");
+    @include typography.role("ui-standard");
+  }
+
+  &[data-size="lg"] {
+    grid-template-columns: boolean.switch-inline-size("lg") minmax(0, 1fr);
+    column-gap: boolean.label-gap("lg");
+    @include typography.role("ui-standard");
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  @media (pointer: coarse) {
+    --_fui-target-hit-size: #{target.hit-size("touch")};
+  }
+}
+
+// iOS-style track: solid fill, clean pill shape
+.track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border-radius: var(--fui-radius-full, $fui-radius-full);
+  border: var(--fui-stroke-hairline, 1px) solid var(--_switch-off-border);
+  background-color: var(--_switch-off-bg);
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, white 26%, transparent),
+    inset 0 -1px 0 color-mix(in srgb, var(--fui-text-primary, $fui-text-primary) 5%, transparent);
+  transition:
+    background-color var(--fui-transition-normal, $fui-transition-normal),
+    border-color var(--fui-transition-normal, $fui-transition-normal),
+    box-shadow var(--fui-transition-normal, $fui-transition-normal);
+
+  .root[data-checked] & {
+    background-color: var(--fui-control-checked-bg, $fui-color-accent);
+    border-color: var(--fui-control-checked-border, $fui-color-accent);
+    box-shadow: inset 0 1px 0 color-mix(in srgb, white 24%, transparent);
+  }
+
+  .root:not([data-disabled]):not([data-checked]) &:hover {
+    background-color: var(--_switch-off-bg-hover);
+    border-color: var(--_switch-off-border-hover);
+  }
+
+  .root:not([data-disabled])[data-checked] &:hover {
+    background-color: var(--fui-control-checked-bg-hover, $fui-color-accent-hover);
+    border-color: var(--fui-control-checked-border-hover, $fui-color-accent-hover);
+  }
+
+  .root:focus-visible & {
+    @include field.focus-state;
+  }
+}
+
+.trackSm {
+  @include boolean.switch-track("sm");
+  margin-block-start: calc(
+    (#{typography.line-height("ui-compact")} - #{boolean.switch-block-size("sm")}) / 2
+  );
+}
+
+.trackLg {
+  @include boolean.switch-track("lg");
+  margin-block-start: calc(
+    (#{typography.line-height("ui-standard")} - #{boolean.switch-block-size("lg")}) / 2
+  );
+}
+
+.trackMd {
+  @include boolean.switch-track("md");
+  margin-block-start: calc(
+    (#{typography.line-height("ui-standard")} - #{boolean.switch-block-size("md")}) / 2
+  );
+}
+
+.thumb {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: var(--_fui-switch-inset);
+  box-sizing: border-box;
+  width: var(--_fui-switch-thumb-size);
+  height: var(--_fui-switch-thumb-size);
+  border-radius: var(--fui-radius-full, $fui-radius-full);
+  pointer-events: none;
+  background-color: var(--_switch-thumb-bg);
+  border: var(--fui-stroke-hairline, 1px) solid var(--_switch-thumb-border);
+  box-shadow:
+    0 1px 1px color-mix(in srgb, black 18%, transparent),
+    inset 0 1px 0 color-mix(in srgb, white 42%, transparent);
+  transform: translateY(-50%);
+  transition:
+    transform var(--fui-transition-normal, $fui-transition-normal),
+    background-color var(--fui-transition-normal, $fui-transition-normal),
+    border-color var(--fui-transition-normal, $fui-transition-normal),
+    box-shadow var(--fui-transition-fast, $fui-transition-fast);
+
+  .root[data-checked] & {
+    transform: translate(var(--_fui-switch-travel), -50%);
+    background-color: var(--fui-control-checked-color, $fui-color-on-accent);
+    border-color: color-mix(
+      in srgb,
+      var(--fui-control-checked-border, #{$fui-color-accent}) 28%,
+      transparent
+    );
+  }
+
+  .root:dir(rtl)[data-checked] & {
+    transform: translate(calc(-1 * var(--_fui-switch-travel)), -50%);
+  }
+
+  .root:active:not([data-disabled]) & {
+    box-shadow: var(--fui-shadow-md, $fui-shadow-md);
+  }
+}
+
+.content {
+  min-inline-size: 0;
+}
+
+.label {
+  color: var(--fui-text-primary, $fui-text-primary);
+  user-select: none;
+}
+
+.helper {
+  display: block;
+  @include field.helper;
+}
+
+// ============================================
+// Accessibility: High Contrast Mode
+// ============================================
+
+@media (prefers-contrast: more) {
+  .track {
+    border-color: var(--fui-text-primary, $fui-text-primary);
+    outline: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
+    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
+  }
+
+  .root[data-checked] .track {
+    border-color: var(--fui-control-checked-border, $fui-color-accent);
+  }
+}
+
+// ============================================
+// Accessibility: Reduced Motion
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+  .thumb {
+    transition: none;
+  }
+
+  .track {
+    transition: none;
+  }
+}

package/src/components/{Toggle → Switch}/index.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Switch as BaseSwitch } from "@base-ui/react/switch";
 import { useResolvedControlSize } from "../ComponentDefaults";
 import { mergeAriaIds } from "../../utils/aria";
-import styles from "./Toggle.module.scss";
+import styles from "./Switch.module.scss";
 
 /**
  * Binary on/off switch for settings and preferences.
@@ -40,8 +40,6 @@ export interface SwitchProps {
   "aria-describedby"?: string;
 }
 
-export type ToggleProps = SwitchProps;
-
 const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(function Switch(
   {
     checked,
@@ -80,19 +78,7 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(function Swi
 
   const thumbClasses = styles.thumb;
 
-  const labelClasses = [
-    styles.label,
-    size === "sm" && styles.labelSm,
-    size === "lg" && styles.labelLg,
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  const helperClasses = [styles.helper, size === "sm" && styles.helperSm].filter(Boolean).join(" ");
-
-  const rootClasses = [styles.root, resolvedHelperText && styles.rootWithHelper, className]
-    .filter(Boolean)
-    .join(" ");
+  const rootClasses = [styles.root, className].filter(Boolean).join(" ");
 
   return (
     <BaseSwitch.Root
@@ -110,6 +96,7 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(function Swi
       uncheckedValue={uncheckedValue}
       inputRef={inputRef}
       className={rootClasses}
+      data-size={size}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
       aria-describedby={mergeAriaIds(ariaDescribedBy, helperId)}
@@ -120,9 +107,9 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(function Swi
 
       {(label || resolvedHelperText) && (
         <div className={styles.content}>
-          {label && <span className={labelClasses}>{label}</span>}
+          {label && <span className={styles.label}>{label}</span>}
           {resolvedHelperText && (
-            <span id={helperId} className={helperClasses}>
+            <span id={helperId} className={styles.helper}>
               {resolvedHelperText}
             </span>
           )}
@@ -135,6 +122,3 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(function Swi
 export const Switch = Object.assign(SwitchRoot, {
   Root: SwitchRoot,
 });
-
-/** @deprecated Use `Switch` instead. */
-export const Toggle = Switch;

package/src/components/Table/Table.contract.json

@@ -1,14 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Table",
-  "description": "Semantic HTML table with compound API. For data-rich tables with sorting and selection, use DataTable.",
+  "description": "Renders tabular data as a real HTML table — headers, rows, footer.",
   "category": "display",
-  "tags": [
-    "table",
-    "semantic",
-    "html",
-    "layout"
-  ],
+  "tags": ["table", "semantic", "html", "layout"],
   "status": "stable",
   "sourcePath": "src/components/Table/index.tsx",
   "exportName": "Table",
@@ -26,10 +21,7 @@
       "description": "Table density",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md"
-      ]
+      "values": ["sm", "md"]
     },
     "striped": {
       "type": "boolean",
@@ -61,22 +53,19 @@
   },
   "usage": {
     "when": [
-      "Displaying simple tabular data with semantic HTML",
-      "Static data that does not need sorting or selection",
-      "Showing structured information with headers and rows",
-      "Tables with footers or captions"
+      "The data is static — read it, do not interact with it",
+      "You need real thead/tbody/tfoot semantics",
+      "The table needs a caption or a totals footer"
     ],
     "whenNot": [
-      "Data that needs sorting (use DataTable)",
-      "Data that needs row selection (use DataTable)",
-      "Data that needs clickable rows (use DataTable)",
-      "Simple lists (use List component)"
+      "Rows need sorting, selection, or clicking (use DataTable)",
+      "Content is a single column of items (use List)"
     ],
     "guidelines": [
-      "Use Table.HeaderCell for column headers (adds scope=\"col\" by default)",
-      "Use Table.Caption for table descriptions (can be visually hidden)",
-      "Keep tables simple — use DataTable for interactive features",
-      "Consider mobile responsiveness; table scrolls horizontally on small screens"
+      "Header cells go in Table.HeaderCell — it sets scope=\"col\" for you",
+      "Give every table a caption or aria-label; visuallyHidden keeps it off screen",
+      "Reach for density, not the deprecated size prop",
+      "Narrow viewports scroll the table sideways — keep column count low"
     ],
     "accessibility": [
       "Semantic HTML table elements (thead, tbody, tfoot, th, td)",
@@ -88,37 +77,42 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Basic semantic table",
+      "description": "Header row plus body rows, no extra styling.",
       "code": "<Table aria-label=\"Team members\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Role</Table.HeaderCell>\n      <Table.HeaderCell>Status</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Alice Johnson</Table.Cell>\n      <Table.Cell>Engineer</Table.Cell>\n      <Table.Cell>Active</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Bob Smith</Table.Cell>\n      <Table.Cell>Designer</Table.Cell>\n      <Table.Cell>Active</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Carol Williams</Table.Cell>\n      <Table.Cell>PM</Table.Cell>\n      <Table.Cell>Away</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
     },
+    {
+      "name": "Empty",
+      "description": "Keep the headers and fill one full-width cell so the layout holds.",
+      "code": "<Table aria-label=\"Team members\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Role</Table.HeaderCell>\n      <Table.HeaderCell>Status</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell colSpan={3}>No team members yet.</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
+    },
     {
       "name": "Striped",
-      "description": "Alternating row backgrounds for readability",
+      "description": "Row tint alternates so the eye tracks across wide rows.",
       "code": "<Table striped aria-label=\"Inventory\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Item</Table.HeaderCell>\n      <Table.HeaderCell>Category</Table.HeaderCell>\n      <Table.HeaderCell>Qty</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Widget A</Table.Cell>\n      <Table.Cell>Hardware</Table.Cell>\n      <Table.Cell>120</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Widget B</Table.Cell>\n      <Table.Cell>Software</Table.Cell>\n      <Table.Cell>85</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Widget C</Table.Cell>\n      <Table.Cell>Hardware</Table.Cell>\n      <Table.Cell>200</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Widget D</Table.Cell>\n      <Table.Cell>Software</Table.Cell>\n      <Table.Cell>50</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
     },
     {
       "name": "Bordered",
-      "description": "Table with bordered container",
+      "description": "A border wraps the data so it reads as one block on a busy page.",
       "code": "<Table bordered aria-label=\"Pricing\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Plan</Table.HeaderCell>\n      <Table.HeaderCell>Price</Table.HeaderCell>\n      <Table.HeaderCell>Features</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Basic</Table.Cell>\n      <Table.Cell>$9/mo</Table.Cell>\n      <Table.Cell>5 projects</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Pro</Table.Cell>\n      <Table.Cell>$29/mo</Table.Cell>\n      <Table.Cell>Unlimited</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
     },
     {
       "name": "Compact",
-      "description": "Small, dense table",
-      "code": "<Table size=\"sm\" aria-label=\"Shortcuts\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Key</Table.HeaderCell>\n      <Table.HeaderCell>Action</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Ctrl+S</Table.Cell>\n      <Table.Cell>Save</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Ctrl+Z</Table.Cell>\n      <Table.Cell>Undo</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Ctrl+C</Table.Cell>\n      <Table.Cell>Copy</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
+      "description": "Tighter rows fit more data in the same height.",
+      "code": "<Table density=\"compact\" aria-label=\"Shortcuts\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Key</Table.HeaderCell>\n      <Table.HeaderCell>Action</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Ctrl+S</Table.Cell>\n      <Table.Cell>Save</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Ctrl+Z</Table.Cell>\n      <Table.Cell>Undo</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Ctrl+C</Table.Cell>\n      <Table.Cell>Copy</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
     },
     {
       "name": "With Caption",
-      "description": "Table with visible caption",
+      "description": "A visible caption titles the data for every reader.",
       "code": "<Table aria-label=\"Q1 results\">\n  <Table.Caption>Quarterly Results (Q1 2026)</Table.Caption>\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Metric</Table.HeaderCell>\n      <Table.HeaderCell>Value</Table.HeaderCell>\n      <Table.HeaderCell>Change</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Revenue</Table.Cell>\n      <Table.Cell>$1.2M</Table.Cell>\n      <Table.Cell>+15%</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Users</Table.Cell>\n      <Table.Cell>24,500</Table.Cell>\n      <Table.Cell>+8%</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
     },
     {
       "name": "Screen Reader Caption",
-      "description": "Visually hidden caption for screen-reader context while keeping visual UI compact",
-      "code": "<Table\n  aria-label=\"API keys\"\n  wrapperProps={{ 'data-demo': 'table-wrapper' }}\n  wrapperClassName=\"demo-table-wrapper\"\n>\n  <Table.Caption visuallyHidden>API keys and last-used timestamps</Table.Caption>\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Prefix</Table.HeaderCell>\n      <Table.HeaderCell>Last Used</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Deploy</Table.Cell>\n      <Table.Cell>frg_live_...</Table.Cell>\n      <Table.Cell>2 hours ago</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>CI</Table.Cell>\n      <Table.Cell>frg_test_...</Table.Cell>\n      <Table.Cell>Yesterday</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
+      "description": "The caption reaches screen readers only; the layout stays tight.",
+      "code": "<Table aria-label=\"API keys\">\n  <Table.Caption visuallyHidden>API keys and last-used timestamps</Table.Caption>\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Prefix</Table.HeaderCell>\n      <Table.HeaderCell>Last Used</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Deploy</Table.Cell>\n      <Table.Cell>frg_live_...</Table.Cell>\n      <Table.Cell>2 hours ago</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>CI</Table.Cell>\n      <Table.Cell>frg_test_...</Table.Cell>\n      <Table.Cell>Yesterday</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
     },
     {
       "name": "With Footer",
-      "description": "Table with footer row for totals",
+      "description": "Totals sit in a footer that stays separate from the data.",
       "code": "<Table bordered aria-label=\"Expenses\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Category</Table.HeaderCell>\n      <Table.HeaderCell>Amount</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Marketing</Table.Cell>\n      <Table.Cell>$12,000</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Engineering</Table.Cell>\n      <Table.Cell>$45,000</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Operations</Table.Cell>\n      <Table.Cell>$8,000</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n  <Table.Footer>\n    <Table.Row>\n      <Table.Cell>Total</Table.Cell>\n      <Table.Cell>$65,000</Table.Cell>\n    </Table.Row>\n  </Table.Footer>\n</Table>"
     }
   ],
@@ -141,23 +135,11 @@
       "wrapperClassName/wrapperProps - customize outer scroll wrapper",
       "Table.Caption - caption with visuallyHidden prop (hidden is deprecated alias)"
     ],
-    "a11yRules": [
-      "A11Y_TABLE_HEADERS",
-      "A11Y_TABLE_CAPTION"
-    ]
+    "a11yRules": ["A11Y_TABLE_HEADERS", "A11Y_TABLE_CAPTION"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root",
-      "Head",
-      "Body",
-      "Footer",
-      "Row",
-      "Cell",
-      "HeaderCell",
-      "Caption"
-    ],
+    "subComponents": ["Root", "Head", "Body", "Footer", "Row", "Cell", "HeaderCell", "Caption"],
     "commonPatterns": [
       "<Table><Table.Head><Table.Row><Table.HeaderCell>Name</Table.HeaderCell></Table.Row></Table.Head><Table.Body><Table.Row><Table.Cell>Alice</Table.Cell></Table.Row></Table.Body></Table>"
     ]