Components we don't use anymore but haven't deleted. Each entry preserves the demo, the class names, and a note about why it's archived and what — if anything — replaces it. Most CSS rules are still live in components.css so existing screens keep rendering; the entry's CSS status says whether the rules are kept, removed, or aliased.
Add a new entry by copying one of the <section class="entry"> blocks below and editing the title / meta / demo / class table. Order: newest archived at the top.
| Class | Description |
|---|---|
| .task-row | 44px flex row — assigned or in-progress, no urgency signal. |
| .task-row.needs-review / .stalled / .failed / .selected | State modifiers — amber wash / lighter amber / red / accent wash. |
| .task-row-type / -name / -title / -sub / -meta / -actions | Layout slots — type chip · name block · meta badges · hover actions. |
| .task-row-id / .task-row-game / .task-row-aud | Mono sub-labels in the name block second row + auditor name. |
| Class | Description |
|---|---|
| .count-badge | Numeric count chip — bg-sunken / ink-soft / radius-full |
| .count-badge.accent | Accent-colored count for active or important numbers |
| Class | Description |
|---|---|
| .phase-tag | Pipeline phase label — neutral pill with border. Equivalent to .tag.tag--pill.tag--outline in the unified system. |
| Class | Description |
|---|---|
| .filter-pill | Rounded filter button — icon + label + optional close ×. Active state: accent border / accent-wash bg / accent-dark text. |
| Class | Description |
|---|---|
| .popover / .popover--demo | Container — tooltip-card shell with shadow + rounded corners |
| .pop-head / .pop-title / .pop-close / .pop-tier-badge | Header row — chip + name + close button |
| .pop-body / .pop-row / .pop-key / .pop-val | Key-value detail rows in the body |
| .pop-foot / .pop-btn (+ .primary) | Footer action row — secondary buttons + primary Open CTA |
| Class | Description |
|---|---|
| .sidebar / .sidebar.collapsed | Full-height shell. Adds .collapsed to drop to 48px rail. |
| .sidebar-brand / .sidebar-brand-text / .brand-name / .brand-sub | Top brand row + chevron toggle button. |
| .sidebar-toggle / .toggle-icon-collapse / .toggle-icon-expand | 24px ghost button; swaps the chevron icon based on the collapsed state. |
| .sidebar-nav | Nav item list; centers icon-only when collapsed. |
| .sidebar-footer / .user-row / .user-name / .user-role | Footer identity row; hides label content when collapsed. |
| Class | Description |
|---|---|
| .alert + .alert-info / -success / -warning / -danger | Base + variant. Always pair the base with a variant. |
| .alert-body / .alert-title / .alert-desc | Content wrapper / bold heading / softer description (omit in dense surfaces). |
Archived from index.html showcase. CSS rules (.mq-dialog, .mq-row, .mq-input, .mq-footer, etc.) remain in components.css for live consumers.
Full-screen backdrop overlay + centered dialog for editing per-game weekly quota targets. One row per game: game name (truncated), read-only monthly target, and an editable weekly-quota number input. Dirty rows highlight in accent-wash. A footer shows an unsaved-changes count and Save / Cancel buttons.
V-quota auto-sync semantics: on dialog open, the host page reads the current quota slot count per game from the live panel list. On save, the new weekly targets are written back; blank quota slots are added or removed to match the new target value.
In production the overlay is hidden; add .open to show it. The demo renders the dialog inline without the backdrop so all three states are visible.
| Class | State / Variant | Description |
|---|---|---|
| .mq-overlay | default (hidden) | Fixed full-screen backdrop. blurred ink overlay, display:none by default |
| .mq-overlay.open | state | Shows the backdrop and centers the dialog (display:flex) |
| .mq-dialog | structure | Centered dialog. max-width 620px, max-height 80vh, bg-panel, shadow-lg, radius-lg, flex column |
| .mq-header | structure | Title row. space-between flex; contains .mq-title and .mq-close |
| .mq-title | element | Display-font dialog heading. text-md, 700, letter-spacing -0.02em |
| .mq-close | element | 28px circular close button. transparent, hover sunken |
| .mq-search-row | structure | Search row below the header. padded, bottom border |
| .mq-search-wrap | element | Search input wrapper. sunken bg, line border, focus ring on :focus-within |
| .mq-search-input | element | Borderless text input inside the wrapper |
| .mq-col-head | structure | 3-column grid column headers (Game / Monthly / Weekly quota). 9.5px mono caps |
| .mq-col-label | element | Individual column label. Add .centered for text-align:center columns. |
| .mq-list | structure | Scrollable game list. flex:1, thin scrollbar |
| .mq-row | element | One game row. 3-col grid matching .mq-col-head, min-height 44px, hover sunken |
| .mq-row.dirty | state | Accent-wash highlight. row has an unsaved change |
| .mq-game-name | element | Game name. text-sm/500, truncates with ellipsis |
| .mq-monthly | element | Read-only monthly target. 11px mono, ink-muted, centered |
| .mq-input-cell | element | Center-aligned cell wrapping .mq-input |
| .mq-input | element | 48px number input. mono font, radius-sm, line border, accent focus ring |
| .mq-input.has-value | state | Stronger border (line-strong) when the field has a value |
| .mq-footer | structure | Bottom action bar. space-between, bg-panel, top border |
| .mq-dirty-count | element | Unsaved-change count. mono xs, ink-muted by default |
| .mq-dirty-count.has-changes | state | Ink-soft. visible when there are pending changes |
| .mq-footer-actions | element | Flex row of .mq-btn buttons |
| .mq-btn | element | Secondary-style dialog button. radius-sm, shadow-xs |
| .mq-btn.save | variant | Accent-filled Save button |
Three entity types — Playable, Game, and Auditor — each represented at two scales: a compact task row for dense lists, and a collapsible entity card for grouped views. All states shown.
Groups all tasks for a game. Expandable — collapsed shows summary stats, expanded shows individual task rows. Square avatar with partner badge.
Add .selected to the card when its detail panel is open — accent border replaces the default line border, and the header takes a faint accent wash. This mirrors the .ply-card.dp-selected treatment so selection intent is consistent across both card types.
Groups tasks by auditor. Shows capacity bar inline in the header. Circle avatar (person). Used in TL Dispatch and TL Pulse.
| Class | State / Variant | Description |
|---|---|---|
| .task-list | base | Container for task rows — bordered, rounded, clips overflow |
| .task-row family ARCHIVED 2026-05-03 | - | Pulse/delivery flat row variants. See archive.html. CSS retained. |
| .entity-card | default | Collapsible group card — expanded by default |
| .entity-card.collapsed | state | Hides .entity-card-body; chevron rotates -90 degrees |
| .entity-card.selected | state | Accent border + accent-wash header — card linked to open detail panel |
| .entity-card-head / -body | structure | Always-visible header / hideable content area |
| .entity-av / .entity-av-sq / .entity-av-badge / .entity-av-circle | element | Avatar wrapper — .entity-av-sq for games (square), .entity-av-circle for people, .entity-av-badge for partner overlay |
| .entity-name / .entity-sub | element | Primary label (14px/600) and secondary descriptor line (11px muted) |
| .entity-stats / .entity-stat | element | Stat cluster in header — flex row of number+label pairs |
| .entity-stat-n | element | Numeric value — add .warn / .danger / .good to apply semantic color |
| .entity-stat-l | element | Label below the number (10px muted) |
| .entity-chevron | element | Collapse/expand indicator — rotates -90 degrees when .collapsed is on the card |
| .entity-detail-btn | element | Panel-open icon button in card header — use stopPropagation to avoid triggering collapse |
| .cap-bar / .cap-bar-track / .cap-bar-fill | element | Inline capacity bar — add .ok / .warn / .over to .cap-bar-fill for semantic fill color |
A single component for every label, badge, and status pill in the system. .tag takes modifiers across four axes — tone, size, shape, and treatment — and any combination is valid. The full mapping of which recipe encodes which real-world value (each of the 13 canonical statuses, T1/T2/T3/VIP/FDE tiers, V/R/Done counters, age severities, fail-loud) lives in the tag spec. This section is the component.
Legacy aliases still live. The previous tag families — .tag-on-track, .status-tag.*, .tier-badge, .tag-v/.tag-r/.tag-done, .tag-tier, .tag-age — remain in components.css as direct aliases so wireframes and older prototypes keep rendering unchanged. New work uses .tag with modifiers.
Seven tones cover every label in the system. Default (no tone modifier) is neutral — used for unstarted, queued, "no signal yet" states. Each tone has a paired bg + text color drawn from the cream/green/amber/red/build/orange/ink ramps.
Default is 10px / 3px 7px padding. .tag--sm drops to 9px / 2px 5px for dense group-header meta rows and per-card counters.
.tag--square renders as an 18x18 chip; .tag--square-lg bumps to 24x24 for detail views. .tag--pill swaps the radius to fully-rounded for pipeline-phase labels.
Optional modifiers that change weight or affordance. .tag--outline swaps the fill for a border (used by T3, age default). .tag--alert adds a 1px currentColor border on top of a tone — used for stuck / waiting-for-fix to make the amber stand out further. .tag--fail is the dashed-red fail-loud fallback for unrecognized data. .tag--cased preserves the source casing instead of forcing uppercase — needed for "5V quota" and similar mixed-case labels.
Drop any element inside the tag — an SVG, a Lucide icon, a status dot — and it picks up the gap and current text color. Use sparingly; the pill shape carries enough identity on its own.
| Class | Axis | Effect |
|---|---|---|
| .tag | base | Mono uppercase 10px / 3px 7px / radius-xs. Default tone is neutral (bg-sunken / ink-soft). |
| .tag--green | tone | green-100 / green-600 — success, on-track, V quota, approved, build-complete, completed |
| .tag--amber | tone | amber-100 / amber-600 — at-risk, R revision, pending-tl, pending-pg, age-warn |
| .tag--red | tone | red-100 / red-600 — behind, build-failed, age-over, FDE |
| .tag--blue | tone | build-100 / build-600 — in-progress, building, delivered |
| .tag--orange | tone | orange-100 / orange-700 — VIP partner |
| .tag--ink | tone | ink-700 / cream-100 — T1 partner, high-emphasis dark |
| .tag--ink-mid | tone | ink-500 / cream-100 — T2 partner |
| .tag--sm | size | 9px / 2px 5px / tighter letter-spacing — dense meta rows |
| .tag--square | shape | 18x18 chip, no padding, larger weight — tier badges |
| .tag--square-lg | shape | 24x24 chip / radius-sm / 11px — detail views |
| .tag--pill | shape | radius-full — pipeline phase labels |
| .tag--outline | treatment | bg-raised + 1px line border. Combined with a tone, softens to the tone's -200 border + -100 bg. |
| .tag--alert | treatment | 1px currentColor border + tighter padding — emphasizes a tone (stuck, waiting-for-fix) |
| .tag--fail | treatment | red-100 bg + dashed red-500 border + red-600 text — fail-loud fallback for unrecognized status keys |
| .tag--cased | treatment | Preserves source casing + drops letter-spacing — for "5V quota", "2 done", and other mixed-case labels |
Composition examples.
| Recipe | Encodes |
|---|---|
| .tag.tag--ink.tag--square | T1 tier badge |
| .tag.tag--green.tag--sm.tag--cased | "3V" / "5V quota" counter |
| .tag.tag--amber.tag--alert | "Stuck" / "Waiting for fix" alert status |
| .tag.tag--outline.tag--sm | Default age tag (e.g. "2d") |
| .tag.tag--red.tag--outline.tag--sm | Age over (e.g. "9d") |
| .tag.tag--fail | "?" / "Unknown" fail-loud fallback |
See the tag spec for the full mapping of every real-world status, tier, counter, and age value to its tag recipe.