{
  "schemaVersion": 1,
  "theme": "j3w1-theme",
  "version": "1.1.0",
  "profile": "default",
  "profileStatus": "approved",
  "release": {
    "version": "1.1.0",
    "stability": "release",
    "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
  },
  "sourceDigest": "sha256-C+iD5Q7l0XPU/boMj003wPbPLBOq3C3ZM7s4OfzJ6mc=",
  "id": "data-table",
  "family": "display",
  "maturity": "stable",
  "priority": "R1",
  "coverage": {
    "family": "display",
    "priority": "R1",
    "maturity": "stable",
    "specified": true,
    "demonstrated": true,
    "tested": false,
    "testImplemented": false,
    "states": 9
  },
  "title": "Data table",
  "summary": "A native table with controls: a selection column with a mixed select-all, sortable headers, row focus with the ring on the fill, and static resize handles.",
  "anchors": {
    "site": "https://j3w1.github.io/theme/reference/#c-data-table",
    "spec": "spec/components/data-table.md",
    "brief": "exports/components/data-table.brief.txt"
  },
  "native": true,
  "aria": {
    "pattern": "native table with aria-selected rows, a select-all checkbox in the mixed state, aria-sort headers and aria-busy while loading",
    "apg": "https://www.w3.org/WAI/ARIA/apg/patterns/grid/"
  },
  "variants": [
    {
      "id": "default",
      "name": "Default",
      "description": "Sortable headers and focusable rows."
    },
    {
      "id": "selectable",
      "name": "Selectable",
      "description": "A leading checkbox column; the header select-all shown in the mixed state."
    },
    {
      "id": "resizable",
      "name": "Resizable",
      "description": "A static resize handle at the end of every header cell."
    }
  ],
  "sizes": [
    "compact",
    "comfortable"
  ],
  "states": [
    "default",
    "hover",
    "focus-visible",
    "selected",
    "selected+focus-visible",
    "sorted",
    "mixed",
    "empty",
    "loading"
  ],
  "tokens": {
    "root.bg": {
      "alias": "color.surface.default",
      "value": "#100c0c",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-023",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "header.text": {
      "alias": "color.text.bright",
      "value": "#ffa2a7",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "header.rule": {
      "alias": "color.border.strong",
      "value": "#9e231f",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "sort.glyph": {
      "alias": "color.text.bright",
      "value": "#ffa2a7",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "row.text": {
      "alias": "color.text.default",
      "value": "#e99499",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "row.divider": {
      "alias": "color.border.divider",
      "value": "#2b0e0d",
      "status": "proposed",
      "deprecated": false,
      "decisionId": "D-008",
      "eligibility": {
        "action": "use-and-report",
        "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
        "decisionIds": [
          "D-008"
        ]
      }
    },
    "row.bg-hover": {
      "alias": "color.interaction.hover.bg",
      "value": "#1c0a09",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "row.ring": {
      "alias": "color.interaction.focus.ring",
      "value": "#e53935",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "selected.bg": {
      "alias": "color.interaction.selection.bg",
      "value": "#531310",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-027",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "selected.text": {
      "alias": "color.interaction.selection.text",
      "value": "#f4eeee",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "selected.ring": {
      "alias": "color.interaction.focus.ring-container",
      "value": "#ffa2a7",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "checkbox.bg": {
      "alias": "color.surface.input",
      "value": "#000000",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-023",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "checkbox.border": {
      "alias": "color.border.control",
      "value": "#a3676b",
      "status": "proposed",
      "deprecated": false,
      "decisionId": "D-007",
      "eligibility": {
        "action": "use-and-report",
        "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
        "decisionIds": [
          "D-007"
        ]
      }
    },
    "checkbox.checked-bg": {
      "alias": "color.action.primary.bg",
      "value": "#7d1310",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-026",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "checkbox.glyph": {
      "alias": "color.action.primary.text",
      "value": "#f4eeee",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "resize.handle": {
      "alias": "color.border.default",
      "value": "#531310",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "resize.handle-hover": {
      "alias": "color.border.active",
      "value": "#e53935",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "empty.text": {
      "alias": "color.text.muted",
      "value": "#bd787d",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "loading.glyph": {
      "alias": "color.text.muted",
      "value": "#bd787d",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    }
  },
  "stateRules": [
    {
      "state": "default",
      "visual": "rows on {color.surface.default}; header rule 1px {color.border.strong}",
      "channel": "—",
      "tokens": {
        "fg": {
          "alias": "color.text.default",
          "value": "#e99499",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.surface.default",
          "value": "#100c0c",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-023",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "hover",
      "visual": "row background → {color.interaction.hover.bg}; a resize handle → {color.border.active}",
      "channel": "cursor: default on rows, col-resize on handles",
      "tokens": {
        "fg": {
          "alias": "color.text.default",
          "value": "#e99499",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.interaction.hover.bg",
          "value": "#1c0a09",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "focus-visible",
      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px around the focused row or control",
      "channel": "the ring",
      "tokens": {
        "fg": {
          "alias": "color.text.default",
          "value": "#e99499",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.surface.default",
          "value": "#100c0c",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-023",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "outline": {
          "alias": "color.interaction.focus.ring",
          "value": "#e53935",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "selected",
      "visual": "row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text}; the row checkbox checked",
      "channel": "`aria-selected=\"true\"`; the checked box",
      "tokens": {
        "fg": {
          "alias": "color.interaction.selection.text",
          "value": "#f4eeee",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.interaction.selection.bg",
          "value": "#531310",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-027",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "selected+focus-visible",
      "visual": "the fill and the ring in {color.interaction.focus.ring-container}",
      "channel": "both visible at once",
      "tokens": {
        "fg": {
          "alias": "color.interaction.selection.text",
          "value": "#f4eeee",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.interaction.selection.bg",
          "value": "#531310",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-027",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "outline": {
          "alias": "color.interaction.focus.ring-container",
          "value": "#ffa2a7",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "sorted",
      "visual": "▲ or ▼ in {color.text.bright} on the sorted header",
      "channel": "`aria-sort`; the glyph",
      "tokens": {
        "fg": {
          "alias": "color.text.bright",
          "value": "#ffa2a7",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.surface.default",
          "value": "#100c0c",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-023",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "mixed",
      "visual": "the select-all on {color.action.primary.bg} with the – glyph",
      "channel": "`aria-checked=\"mixed\"`; the glyph",
      "tokens": {
        "fg": {
          "alias": "color.action.primary.text",
          "value": "#f4eeee",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.action.primary.bg",
          "value": "#7d1310",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-026",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "empty",
      "visual": "one full-width cell in {color.text.muted}: \"No rows match.\"; the header and controls stay",
      "channel": "the message text",
      "tokens": {
        "fg": {
          "alias": "color.text.muted",
          "value": "#bd787d",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.surface.default",
          "value": "#100c0c",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-023",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "loading",
      "visual": "one full-width cell with the static `⋯` glyph; the header stays",
      "channel": "`aria-busy=\"true\"`; the glyph; no animation",
      "tokens": {
        "fg": {
          "alias": "color.text.muted",
          "value": "#bd787d",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.surface.default",
          "value": "#100c0c",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-023",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    }
  ],
  "keyboard": [
    {
      "key": "Tab / Shift+Tab",
      "action": "Moves through the select-all, the sort buttons, then the rows (one row is the tab stop; roving tabindex) and any control inside the focused row."
    },
    {
      "key": "Down / Up",
      "action": "Moves row focus; in a single-select table the selection follows focus."
    },
    {
      "key": "Space",
      "action": "Toggles the focused row's selection (the same as its checkbox)."
    },
    {
      "key": "Shift+Down / Shift+Up",
      "action": "Extends the selection by one row."
    },
    {
      "key": "Ctrl+A",
      "action": "Selects every row; the select-all reflects it."
    },
    {
      "key": "Enter / Space",
      "action": "On a sort button, cycles the sort; on the select-all, toggles between all and none."
    },
    {
      "key": "Left / Right",
      "action": "Reserved for cell navigation in hosts that promote the table to a grid; not used here."
    }
  ],
  "responsive": "Below 600px the table scrolls horizontally inside its container with the selection column and the first data column sticky; the page never scrolls. Resize handles are hidden on touch pointers, where column widths come from the header menu. RTL mirrors the selection column and the handles to the inline start and end respectively.",
  "portability": {
    "web": "A native table; rows carry aria-selected and a roving tabindex; the selection column holds native checkboxes labelled by the row and a button with role checkbox and aria-checked mixed in the header; headers with aria-sort wrap a button; aria-busy on the table while loading; the APG grid pattern is cited for the keyboard model only, the markup stays a table.",
    "nativeFallbacks": [
      "GTK4 ColumnView with a selection model; the select-all through a header CheckButton.",
      "Qt QTableView with a selection model; a header checkbox drawn by a header delegate.",
      "Terminal UI: a check column of [x] and [ ] cells; the focused row in the ring colour; the selected rows inverted."
    ]
  },
  "fixtures": [
    "FX-LONG",
    "FX-320",
    "FX-ZOOM-200",
    "FX-I18N",
    "FX-RTL",
    "FX-RM",
    "FX-HC",
    "FX-DENSITY",
    "FX-OVERFLOW",
    "FX-TOUCH",
    "FX-STATE-MATRIX"
  ],
  "related": [
    "table",
    "checkbox",
    "pagination",
    "toolbar",
    "filterable-table"
  ],
  "specimens": [
    "filterable-table",
    "admin-form"
  ],
  "nonExamples": "A grid role on a table that is not navigated cell by cell. Zebra stripes.\nA select-all that is a native checkbox with a script-only indeterminate\nstate and no `aria-checked`. Rows selected by clicking anywhere with no\ncheckbox alternative. A selected row shown by a border alone. A resize\nhandle that is a tab stop. An animated loading skeleton. Rounded checkboxes.\nText truncated with no full-value affordance.",
  "contrast": [
    {
      "label": "data-table default text",
      "state": "default",
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.default",
      "bg": "color.surface.default",
      "fgHex": "#e99499",
      "bgHex": "#100c0c",
      "ratio": 8.48,
      "pass": true,
      "waiver": null
    },
    {
      "label": "data-table hover text",
      "state": "hover",
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.default",
      "bg": "color.interaction.hover.bg",
      "fgHex": "#e99499",
      "bgHex": "#1c0a09",
      "ratio": 8.35,
      "pass": true,
      "waiver": null
    },
    {
      "label": "data-table focus-visible text",
      "state": "focus-visible",
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.default",
      "bg": "color.surface.default",
      "fgHex": "#e99499",
      "bgHex": "#100c0c",
      "ratio": 8.48,
      "pass": true,
      "waiver": null
    },
    {
      "label": "data-table focus-visible outline",
      "state": "focus-visible",
      "kind": "ui",
      "min": 3,
      "fg": "color.interaction.focus.ring",
      "bg": "color.surface.default",
      "fgHex": "#e53935",
      "bgHex": "#100c0c",
      "ratio": 4.6,
      "pass": true,
      "waiver": null
    },
    {
      "label": "data-table selected text",
      "state": "selected",
      "kind": "text",
      "min": 4.5,
      "fg": "color.interaction.selection.text",
      "bg": "color.interaction.selection.bg",
      "fgHex": "#f4eeee",
      "bgHex": "#531310",
      "ratio": 12.47,
      "pass": true,
      "waiver": null
    },
    {
      "label": "data-table selected+focus-visible text",
      "state": "selected+focus-visible",
      "kind": "text",
      "min": 4.5,
      "fg": "color.interaction.selection.text",
      "bg": "color.interaction.selection.bg",
      "fgHex": "#f4eeee",
      "bgHex": "#531310",
      "ratio": 12.47,
      "pass": true,
      "waiver": null
    },
    {
      "label": "data-table selected+focus-visible outline",
      "state": "selected+focus-visible",
      "kind": "ui",
      "min": 3,
      "fg": "color.interaction.focus.ring-container",
      "bg": "color.interaction.selection.bg",
      "fgHex": "#ffa2a7",
      "bgHex": "#531310",
      "ratio": 7.48,
      "pass": true,
      "waiver": null
    },
    {
      "label": "data-table sorted text",
      "state": "sorted",
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.bright",
      "bg": "color.surface.default",
      "fgHex": "#ffa2a7",
      "bgHex": "#100c0c",
      "ratio": 10.17,
      "pass": true,
      "waiver": null
    },
    {
      "label": "data-table mixed text",
      "state": "mixed",
      "kind": "text",
      "min": 4.5,
      "fg": "color.action.primary.text",
      "bg": "color.action.primary.bg",
      "fgHex": "#f4eeee",
      "bgHex": "#7d1310",
      "ratio": 9.28,
      "pass": true,
      "waiver": null
    },
    {
      "label": "data-table empty text",
      "state": "empty",
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.muted",
      "bg": "color.surface.default",
      "fgHex": "#bd787d",
      "bgHex": "#100c0c",
      "ratio": 5.69,
      "pass": true,
      "waiver": null
    },
    {
      "label": "data-table loading text",
      "state": "loading",
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.muted",
      "bg": "color.surface.default",
      "fgHex": "#bd787d",
      "bgHex": "#100c0c",
      "ratio": 5.69,
      "pass": true,
      "waiver": null
    },
    {
      "label": "header text",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.bright",
      "bg": "color.surface.default",
      "fgHex": "#ffa2a7",
      "bgHex": "#100c0c",
      "ratio": 10.17,
      "pass": true,
      "waiver": null
    },
    {
      "label": "checkbox boundary",
      "state": null,
      "kind": "ui",
      "min": 3,
      "fg": "color.border.control",
      "bg": "color.surface.input",
      "fgHex": "#a3676b",
      "bgHex": "#000000",
      "ratio": 4.71,
      "pass": true,
      "waiver": null
    },
    {
      "label": "checked fill against the row (the glyph and the boundary carry the state)",
      "state": "mixed",
      "kind": "ui",
      "min": 1,
      "fg": "color.action.primary.bg",
      "bg": "color.surface.default",
      "fgHex": "#7d1310",
      "bgHex": "#100c0c",
      "ratio": 1.83,
      "pass": true,
      "waiver": "the mixed and checked states are the – and ✓ glyphs on the fill plus aria-checked; the fill's own edge is not the boundary"
    },
    {
      "label": "header rule (decorative)",
      "state": null,
      "kind": "ui",
      "min": 1,
      "fg": "color.border.strong",
      "bg": "color.surface.default",
      "fgHex": "#9e231f",
      "bgHex": "#100c0c",
      "ratio": 2.51,
      "pass": true,
      "waiver": "the rule separates header from body; the header cells and their bright text are the structure"
    },
    {
      "label": "row divider (decorative)",
      "state": null,
      "kind": "ui",
      "min": 1,
      "fg": "color.border.divider",
      "bg": "color.surface.default",
      "fgHex": "#2b0e0d",
      "bgHex": "#100c0c",
      "ratio": 1.08,
      "pass": true,
      "waiver": "rows are separated by their height; the divider is a reading aid"
    },
    {
      "label": "resize handle at rest (decorative; keyboard resizing is a header action)",
      "state": null,
      "kind": "ui",
      "min": 1,
      "fg": "color.border.default",
      "bg": "color.surface.default",
      "fgHex": "#531310",
      "bgHex": "#100c0c",
      "ratio": 1.36,
      "pass": true,
      "waiver": "the handle is a pointer affordance; it turns border.active on hover and the column width is also settable from the header's menu"
    }
  ]
}