/*
* Vendored from voice-assistant/board/hud/styles/table.css (Ultron HUD). Do not edit here: change the
* design system, then refresh with node tools/vendor.mjs.
*/
/*
* Ultron HUD, Table (after gauge.css in bundle.css).
* A data table: hairline rows, a header strip that stays at the top of its scrolling region, numerals in
* tabular figures, sortable headers, a current row and a total row, and the key-value list that tells one
* thing's details. The type comes from the classes in the markup (hud-label, hud-label-sm, hud-body,
* hud-display-xs, hud-mono-sm), a row's hover and selected look from hud-row and the dim tail of a number from
* hud-decimal, so this file sets the layout, the rules, the inks, the sticky header and the tick at the start
* of a hovered or current row. The one thing that moves is a sort chevron turning. Colours come only from
* tokens.
*
*
*
* - Model
- claude-sonnet-5-5
*
* modifier hud-table--dense, hud-table--kv
* parts __scroll, __caption, __head (--num), __sort, __row (--total), __cell (--num, --mono),
* __pair, __key, __value (--num, --mono)
* hooks --hud-table-max-height (the region), --hud-table-plane (the header's plane), --hud-table-key-max
*/
/* ---------- The table ---------- */
/*
* A table or a key-value list; both carry hud-table. The separate-borders model keeps a cell's rule on the
* cell, so the sticky header takes its rule along: a collapsed border stays behind in the grid.
*/
.hud-table {
/* the cells' padding above and below; --dense narrows it */
--hud-table-pad-y: var(--space-2);
width: 100%;
border-collapse: separate;
border-spacing: 0;
color: var(--ink);
}
/* tighter rows for a table of many lines (the header keeps its height: its buttons are targets) */
.hud-table--dense {
--hud-table-pad-y: var(--space-1);
}
/* ---------- The scroll region ---------- */
/*
* The focusable region around a table (hud-scroll gives it its overflow). It is the scroller that the sticky
* header sticks to, so it needs a height to scroll in: it grows to --hud-table-max-height and then the rows
* scroll under the header. A table wider than the region scrolls sideways in it, so the page never does.
*/
.hud-table__scroll {
/* how tall the region grows before its rows scroll */
--hud-table-max-height: 32rem;
min-width: 0;
max-width: 100%;
max-height: var(--hud-table-max-height);
}
/* what the table holds, flush with its rules; the region is named by it */
.hud-table__caption {
padding: 0 0 var(--space-2);
color: var(--ink-secondary);
text-align: left;
}
/* ---------- The header strip ---------- */
/*
* Sticky at the top of the region, on the panel plane, so rows that scroll under it are hidden. The plane is a
* hook: on any other plane, set --hud-table-plane to that plane's token so that the strip matches it.
*/
.hud-table__head {
position: sticky;
top: 0;
z-index: var(--layer-raised);
padding: var(--space-2) var(--space-3);
border-bottom: var(--stroke-hairline) solid var(--line);
background-color: var(--hud-table-plane, var(--surface-panel));
color: var(--ink-secondary);
text-align: left;
white-space: nowrap;
}
/* right-aligned over its numbers */
.hud-table__head--num {
text-align: right;
}
/* the sorted column reads up a step; its chevron says which way the rows run */
.hud-table__head:is([aria-sort='ascending'], [aria-sort='descending']) {
color: var(--ink);
}
/* ---------- Sorting ---------- */
/*
* A sortable header holds a native button that fills the cell and takes its padding, so the whole cell is the
* target. A button resets its case, tracking and white space, so it takes them back from the header: its
* type is the header's.
*/
.hud-table__head:has(> .hud-table__sort) {
padding: 0;
}
.hud-table__sort {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
margin: 0;
padding: var(--space-2) var(--space-3);
border: 0;
background-color: transparent;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
white-space: inherit;
cursor: pointer;
appearance: none;
}
.hud-table__head--num .hud-table__sort {
justify-content: flex-end;
}
.hud-table__sort:hover {
color: var(--ink);
}
/* the header is the top edge of a scroller, which would clip an outside ring: it is drawn inside the button */
.hud-table__sort:focus-visible {
outline-offset: var(--focus-offset-inset);
}
/* no chevron while a column is unsorted; the base chevron points down, which is descending */
.hud-table__head:not([aria-sort='ascending'], [aria-sort='descending']) .hud-chevron {
display: none;
}
.hud-table__head[aria-sort='ascending'] .hud-chevron {
rotate: -135deg;
translate: 0 25%;
}
/* over a number column the chevron comes first, so the label stays flush with its numbers when the column is sorted */
.hud-table__head--num .hud-chevron {
order: -1;
}
/* ---------- Rows and cells ---------- */
/* a cell holds the board's words, upright; its rule closes the row, and the last row of a body has none */
.hud-table__cell {
padding: var(--hud-table-pad-y) var(--space-3);
border-bottom: var(--stroke-hairline) solid var(--line-faint);
text-align: left;
vertical-align: baseline;
}
.hud-table__row:last-child > .hud-table__cell {
border-bottom-color: transparent;
}
/* numbers: right-aligned in figures of one width and never broken; the dim tail is hud-decimal in the markup */
.hud-table__cell--num {
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
/* ids, models and paths, as typed and never broken */
.hud-table__cell--mono {
white-space: nowrap;
}
/* the total row: a rule above it that is heavier than the rows', and ink */
.hud-table__row--total > .hud-table__cell {
border-top: var(--stroke-hairline) solid var(--line);
color: var(--ink);
}
/* ---------- The tick at a row's start ---------- */
/*
* A hovered row (hud-row) and the current row (aria-current) each carry a tick at their start. Some engines
* paint a table row's background image once for each cell, so the tick is drawn once, on the row's first cell,
* as base.css expects of Table for a current row; the row keeps its wash and its tint from hud-row.
*/
.hud-table__row:hover {
background-image: none;
}
.hud-table__row > :first-child {
background-repeat: no-repeat;
background-position: left center;
background-size: var(--stroke-mark) var(--tick-length);
}
/*
* The hovered row's tick. :where() keeps this rule level with the current row's below, which comes after it and
* so wins on a hovered current row, and a row that is aria-disabled gets no tick.
*/
.hud-table__row:where(.hud-row:not([aria-disabled='true'])):hover > :first-child {
background-image: linear-gradient(var(--line-strong), var(--line-strong));
}
.hud-table__row[aria-current='true'] > :first-child {
background-image: linear-gradient(var(--violet), var(--violet));
}
/*
* ink-decimal is never set on a dim tint or under the hover tint (tokens.json), so a current row's dim tails and a
* hovered row's step up to ink-secondary. An aria-disabled row takes no hover tint, so its tails stay as they are.
*/
.hud-table__row[aria-current='true'] .hud-decimal {
color: var(--ink-secondary);
}
.hud-table__row:where(.hud-row:not([aria-disabled='true'])):hover .hud-decimal {
color: var(--ink-secondary);
}
/* ---------- Key and value ---------- */
/*
* A of pairs: the keys in one column, as wide as the widest key up to --hud-table-key-max, and the values
* in the other. Each pair joins the list's two columns through subgrid, so the values line up down the whole
* list, and carries the rule under its row.
*/
.hud-table--kv {
/* the widest the key column grows; a longer key wraps inside it */
--hud-table-key-max: 14rem;
display: grid;
grid-template-columns: fit-content(var(--hud-table-key-max)) minmax(0, 1fr);
margin: 0;
}
.hud-table__pair {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: baseline;
border-bottom: var(--stroke-hairline) solid var(--line-faint);
}
.hud-table__pair:last-child {
border-bottom-color: transparent;
}
.hud-table__key {
padding: var(--hud-table-pad-y) var(--space-3);
color: var(--ink-secondary);
}
.hud-table__value {
min-width: 0;
margin: 0;
padding: var(--hud-table-pad-y) var(--space-3);
color: var(--ink);
overflow-wrap: break-word;
}
/* numbers keep their figures and stay on one line, as in a cell */
.hud-table__value--num {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* a path or an id may break anywhere rather than run out of its column */
.hud-table__value--mono {
overflow-wrap: anywhere;
}
/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
.hud-table__sort {
transition: color var(--timing-fast) var(--timing-ease);
}
/* a column sorted the other way turns its chevron and nudges it in one move, as Panel's toggle does */
.hud-table__sort .hud-chevron {
transition:
rotate var(--timing-fast) var(--timing-ease),
translate var(--timing-fast) var(--timing-ease);
}
}