{
  "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": "table",
  "family": "display",
  "maturity": "stable",
  "priority": "R1",
  "coverage": {
    "family": "display",
    "priority": "R1",
    "maturity": "stable",
    "specified": true,
    "demonstrated": true,
    "tested": true,
    "testImplemented": true,
    "states": 8
  },
  "title": "Table",
  "summary": "A native data table with a header rule, row dividers, hover and selection fills, sortable headers with a glyph, and static empty and loading rows.",
  "anchors": {
    "site": "https://j3w1.github.io/theme/reference/#c-table",
    "spec": "spec/components/table.md",
    "brief": "exports/components/table.brief.txt"
  },
  "native": true,
  "aria": {
    "pattern": "native table with caption, thead, th scope, aria-sort on sorted headers and aria-busy while loading"
  },
  "variants": [
    {
      "id": "default",
      "name": "Default",
      "description": "A 1px border.strong header rule on the panel surface."
    },
    {
      "id": "sticky-header",
      "name": "Sticky header",
      "description": "The header stays at the top of the scroll container with a 2px border.strong rule."
    },
    {
      "id": "numeric",
      "name": "Numeric",
      "description": "Right-aligned tabular numbers in numeric columns."
    },
    {
      "id": "with-caption",
      "name": "With caption",
      "description": "A visible caption above the table that names it."
    }
  ],
  "sizes": [
    "compact",
    "comfortable"
  ],
  "states": [
    "default",
    "hover",
    "selected",
    "selected+focus-visible",
    "selected+container-inactive",
    "sorted",
    "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.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.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": []
      }
    },
    "header.bg-sticky": {
      "alias": "color.surface.raised",
      "value": "#160b0b",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-027",
      "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": []
      }
    },
    "sort.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": []
      }
    },
    "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": []
      }
    },
    "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": []
      }
    },
    "selected.inactive-bg": {
      "alias": "color.interaction.selection.inactive-bg",
      "value": "#420f0c",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "selected.inactive-text": {
      "alias": "color.interaction.selection.inactive-text",
      "value": "#e99499",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "caption.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": []
      }
    },
    "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}",
      "channel": "cursor: default; only on hover-capable pointers",
      "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": "selected",
      "visual": "row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text}",
      "channel": "`aria-selected=\"true\"` on the row",
      "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 a ring in {color.interaction.focus.ring-container} around the row",
      "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": "selected+container-inactive",
      "visual": "row fill {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring",
      "channel": "lightness drop between the two fills",
      "tokens": {
        "fg": {
          "alias": "color.interaction.selection.inactive-text",
          "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.selection.inactive-bg",
          "value": "#420f0c",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "sorted",
      "visual": "the sorted header shows ▲ (ascending) or ▼ (descending) in {color.text.bright}",
      "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": "empty",
      "visual": "the body is one full-width cell in {color.text.muted}: \"No rows match.\"",
      "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": "the body is one full-width cell with the static `⋯` glyph in {color.text.muted}; 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 between the sort buttons and any controls inside cells; rows themselves are not tab stops in a plain table."
    },
    {
      "key": "Enter / Space",
      "action": "Toggles the sort of the focused header between ascending and descending."
    }
  ],
  "responsive": "The table sits in a container with overflow-x auto below 600px, with the first column sticky; the page never scrolls horizontally. Columns never truncate text by default; hosts that must truncate provide the full value on focus or hover. RTL mirrors the numeric alignment (end) and the sticky column.",
  "portability": {
    "web": "A native table with caption, thead and th scope=\"col\"; sortable headers wrap their label in a button and set aria-sort on the th; empty and loading rows are ordinary rows with one cell spanning every column; aria-busy=\"true\" on the table while loading; row selection through aria-selected on tr is the data-table's contract.",
    "nativeFallbacks": [
      "GTK4 ColumnView; the header rule and row dividers through css-name selectors.",
      "Qt QTableView stylesheet; QHeaderView::section draws the rule; ::item:selected the fill.",
      "Terminal UI: a header line underlined with a heavy rule; the selected row inverted; the empty message centred."
    ]
  },
  "fixtures": [
    "FX-LONG",
    "FX-320",
    "FX-ZOOM-200",
    "FX-I18N",
    "FX-RTL",
    "FX-RM",
    "FX-HC",
    "FX-DENSITY",
    "FX-OVERFLOW",
    "FX-STATE-MATRIX"
  ],
  "related": [
    "data-table",
    "list",
    "pagination",
    "badge",
    "filterable-table"
  ],
  "specimens": [
    "filterable-table",
    "settings-panel"
  ],
  "nonExamples": "Zebra striping. A rounded or bordered table frame. A selected row marked by\na left bar (that is navigation, not selection). Header text in caption size\nor uppercase. Sorting shown by colour alone without `aria-sort` and a glyph.\nAn animated spinner while loading. An empty state that removes the header.\nText truncated with no way to read the full value. A hover fill on a\ntouch device.",
  "contrast": [
    {
      "label": "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": "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": "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": "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": "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": "table selected+container-inactive text",
      "state": "selected+container-inactive",
      "kind": "text",
      "min": 4.5,
      "fg": "color.interaction.selection.inactive-text",
      "bg": "color.interaction.selection.inactive-bg",
      "fgHex": "#e99499",
      "bgHex": "#420f0c",
      "ratio": 7.02,
      "pass": true,
      "waiver": null
    },
    {
      "label": "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": "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": "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": "sticky header text on the raised surface",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.bright",
      "bg": "color.surface.raised",
      "fgHex": "#ffa2a7",
      "bgHex": "#160b0b",
      "ratio": 10.1,
      "pass": true,
      "waiver": null
    },
    {
      "label": "caption",
      "state": null,
      "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": "ring on a sort button",
      "state": null,
      "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": "header rule (decorative; thead carries the structure)",
      "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"
    }
  ]
}