@echodial/deck 0.1.0

package/dist/layers/charts.css

@@ -0,0 +1,337 @@
+/* ==========================================================================
+   Deck — 14 Charts
+   No charting library. Bars and donuts are plain CSS driven by a --value
+   custom property. Lines and areas are inline SVG that you style with these
+   classes. Everything reads the brand palette, so charts retheme with the
+   rest of the app.
+   ========================================================================== */
+
+@layer deck.components {
+
+  /* The frame, and the palette. Six series colours are computed by rotating
+     --hue-brand, so charts retheme with the rest of the app and stay in one
+     family. That also makes them hard to tell apart for a colour-blind
+     reader — label the marks directly rather than relying on hue. */
+  .chart {
+    --c1: var(--brand-500);
+    --c2: oklch(64% .13 calc(var(--hue-brand) + 48));
+    --c3: oklch(70% .14 calc(var(--hue-brand) + 96));
+    --c4: oklch(62% .13 calc(var(--hue-brand) - 52));
+    --c5: oklch(74% .12 calc(var(--hue-brand) + 148));
+    --c6: oklch(56% .10 calc(var(--hue-brand) + 200));
+    --chart-h: 240px;
+    --chart-grid: color-mix(in oklab, var(--line) 90%, transparent);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    min-inline-size: 0;
+  }
+  .chart-sm { --chart-h: 150px; }
+  .chart-lg { --chart-h: 340px; }
+
+  .chart-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
+  .chart-title { font-size: var(--text-sm); font-weight: 620; }
+  .chart-note { font-size: var(--text-xs); color: var(--text-muted); }
+
+  /* --- Legend -------------------------------------------------------------- */
+  /* The key. Built from real buttons it gets a working toggle state for free,
+     because the faded style keys off [aria-pressed="false"]. */
+  .chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
+  .chart-legend > * { display: inline-flex; align-items: center; gap: var(--space-2); }
+  .chart-legend > *::before {
+    content: "";
+    inline-size: 10px;
+    block-size: 10px;
+    border-radius: 3px;
+    background: var(--series, var(--c1));
+    flex: 0 0 auto;
+  }
+  .chart-legend [aria-pressed="false"] { opacity: .4; }
+  .chart-legend button { cursor: pointer; }
+
+  /* --- Columns (vertical bars) --------------------------------------------
+     <div class="chart-columns">
+       <div class="chart-col" style="--value:68" data-label="Mar" data-value="68"></div>
+     ---------------------------------------------------------------------- */
+  .chart-columns {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--gap, 6px);
+    block-size: var(--chart-h);
+    padding-block-end: 22px;
+    position: relative;
+    background:
+      repeating-linear-gradient(to top,
+        var(--chart-grid) 0 1px,
+        transparent 1px calc((100% - 22px) / 4));
+    background-position: 0 -22px;
+    background-size: 100% calc(100% - 22px);
+    background-repeat: no-repeat;
+  }
+  /* A column. Its height is calc(var(--value) * 1%), so rendering a chart is
+     writing numbers into style attributes. data-label and data-value are drawn
+     as generated content, which means they are for sighted readers only. */
+  .chart-col {
+    flex: 1 1 0;
+    min-inline-size: 6px;
+    block-size: calc(var(--value) * 1%);
+    background: var(--series, var(--c1));
+    border-radius: var(--r-xs) var(--r-xs) 2px 2px;
+    position: relative;
+    transform-origin: bottom;
+    animation: chart-rise var(--dur-3) var(--ease-out);
+    transition: filter var(--dur-1) var(--ease-out);
+  }
+  .chart-col:hover { filter: brightness(1.08) saturate(1.1); }
+
+  /* A label placed inside a bar gets ink chosen for that series rather than
+     the page's --text. contrast-color() is written directly on the elements
+     that carry the fill, not hoisted into a custom property: var() is
+     substituted where a property is declared, so a shared --text-on-series
+     token would read --series from .chart and get it wrong for the usual
+     markup, which puts .s1 .. .s6 on the bar itself.
+
+     Only inside @supports: with six hue-derived series there is no single
+     static answer, and guessing one would be worse than the inheritance it
+     replaced. Series colours are chosen for discriminability and some sit in
+     the 55-65% band, so this raises the floor rather than guaranteeing AA. */
+  @supports (color: contrast-color(red)) {
+    .chart-col, .chart-col-stack > span, .chart-bar-fill, .chart-meter > span {
+      color: contrast-color(var(--series, var(--c1)));
+    }
+  }
+  .chart-col[data-label]::after {
+    content: attr(data-label);
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline: 0;
+    padding-block-start: 6px;
+    text-align: center;
+    font-size: var(--text-2xs);
+    color: var(--text-faint);
+    white-space: nowrap;
+  }
+  .chart-col[data-value]::before {
+    content: attr(data-value);
+    position: absolute;
+    inset-block-end: calc(100% + 6px);
+    inset-inline-start: 50%;
+    translate: -50% 0;
+    padding: 3px 7px;
+    background: var(--ink-900);
+    color: var(--ink-50);
+    border-radius: var(--r-xs);
+    font-size: var(--text-2xs);
+    font-weight: 620;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--dur-1) var(--ease-out);
+    z-index: 2;
+  }
+  .chart-col:hover::before { opacity: 1; }
+  @keyframes chart-rise { from { scale: 1 0; } }
+
+  /* Stacked columns: nest segments inside a .chart-col-stack */
+  .chart-col-stack {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column-reverse;
+    block-size: calc(var(--value) * 1%);
+    border-radius: var(--r-xs) var(--r-xs) 2px 2px;
+    overflow: hidden;
+    position: relative;
+    animation: chart-rise var(--dur-3) var(--ease-out);
+  }
+  .chart-col-stack > span { block-size: calc(var(--part) * 1%); background: var(--series, var(--c1)); }
+
+  /* Grouped columns */
+  .chart-group { flex: 1 1 0; display: flex; align-items: flex-end; gap: 2px; block-size: 100%; position: relative; }
+  .chart-group > .chart-col { border-radius: 2px 2px 1px 1px; }
+
+  /* --- Bars (horizontal) --------------------------------------------------- */
+  .chart-bars { display: flex; flex-direction: column; gap: var(--space-3); }
+  .chart-bar {
+    display: grid;
+    grid-template-columns: minmax(4.5rem, auto) 1fr auto;
+    align-items: center;
+    gap: var(--space-3);
+    font-size: var(--text-sm);
+  }
+  .chart-bar-label { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .chart-bar-track {
+    block-size: 10px;
+    border-radius: var(--r-full);
+    background: var(--bg-sunken);
+    overflow: hidden;
+  }
+  /* The filled part of a horizontal bar, sized from --value. It grows from
+     the starting edge, which needs transform-origin — a physical property —
+     flipped for RTL in 19-logical.css. */
+  .chart-bar-fill {
+    display: block;
+    block-size: 100%;
+    inline-size: calc(var(--value) * 1%);
+    border-radius: var(--r-full);
+    background: var(--series, var(--c1));
+    transform-origin: left;
+    animation: chart-grow var(--dur-3) var(--ease-out);
+  }
+  /* The value printed beside a bar rather than inside it. Prefer this over
+     text on the fill: contrast-color() raises the floor for text on a series
+     colour but does not guarantee AA. */
+  .chart-bar-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
+  @keyframes chart-grow { from { scale: 0 1; } }
+
+  /* --- Line and area (inline SVG) ------------------------------------------
+     <svg class="chart-svg" viewBox="0 0 300 100" preserveAspectRatio="none">
+       <path class="chart-area" d="..."/>
+       <path class="chart-line" d="..."/>
+     ---------------------------------------------------------------------- */
+  .chart-svg {
+    inline-size: 100%;
+    block-size: var(--chart-h);
+    overflow: visible;
+  }
+  .chart-line {
+    fill: none;
+    stroke: var(--series, var(--c1));
+    stroke-width: var(--stroke, 2);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+    stroke-dasharray: 1200;
+    stroke-dashoffset: 1200;
+    animation: chart-draw 1s var(--ease-out) forwards;
+  }
+  @keyframes chart-draw { to { stroke-dashoffset: 0; } }
+  .chart-line-dashed { stroke-dasharray: 5 4; animation: none; stroke-dashoffset: 0; opacity: .6; }
+
+  .chart-area {
+    fill: var(--series, var(--c1));
+    opacity: .14;
+    stroke: none;
+    animation: chart-fade var(--dur-3) var(--ease-out);
+  }
+  @keyframes chart-fade { from { opacity: 0; } }
+
+  .chart-dot {
+    fill: var(--surface);
+    stroke: var(--series, var(--c1));
+    stroke-width: 2;
+    vector-effect: non-scaling-stroke;
+  }
+  .chart-dot-active { fill: var(--series, var(--c1)); }
+
+  .chart-gridline {
+    stroke: var(--chart-grid);
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
+  }
+  .chart-baseline { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
+
+  /* --- Axis labels --------------------------------------------------------- */
+  .chart-x {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--text-2xs);
+    color: var(--text-faint);
+    padding-block-start: var(--space-2);
+  }
+  .chart-y {
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: space-between;
+    font-size: var(--text-2xs);
+    color: var(--text-faint);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    padding-inline-end: var(--space-2);
+    min-inline-size: 2.5rem;
+  }
+  .chart-plot { display: grid; grid-template-columns: auto 1fr; }
+
+  /* --- Sparkline ----------------------------------------------------------- */
+  /* A tiny inline chart for a table cell or a stat block. */
+  .sparkline {
+    inline-size: var(--spark-w, 88px);
+    block-size: var(--spark-h, 28px);
+    overflow: visible;
+    vertical-align: middle;
+  }
+  .sparkline .chart-line { stroke-width: 1.75; animation: none; stroke-dashoffset: 0; }
+  .sparkline-good .chart-line { stroke: var(--good-500); }
+  .sparkline-bad .chart-line { stroke: var(--bad-500); }
+
+  /* --- Donut --------------------------------------------------------------- */
+  /* A conic gradient driven by --value, with .donut-center holding a figure
+     in the hole. One element, no SVG. Give it role="img" and a label — the
+     shape carries the meaning and nothing else conveys it. */
+  .donut {
+    --size: 128px;
+    --thickness: 18px;
+    inline-size: var(--size);
+    block-size: var(--size);
+    border-radius: var(--r-full);
+    background: conic-gradient(var(--stops, var(--c1) 0 100%));
+    mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 1px));
+    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 1px));
+    animation: dk-spin-in var(--dur-3) var(--ease-out);
+  }
+  @keyframes dk-spin-in { from { rotate: -40deg; opacity: 0; } }
+  .donut-wrap { position: relative; display: inline-grid; place-items: center; }
+  .donut-center {
+    position: absolute;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    line-height: 1.15;
+  }
+  .donut-center .donut-value { font-size: var(--text-xl); font-weight: 660; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
+  .donut-center .donut-label { font-size: var(--text-2xs); color: var(--text-muted); }
+
+  /* --- Progress-style comparison ------------------------------------------- */
+  .chart-meter {
+    display: flex;
+    block-size: 12px;
+    border-radius: var(--r-full);
+    overflow: hidden;
+    background: var(--bg-sunken);
+  }
+  .chart-meter > span {
+    inline-size: calc(var(--value) * 1%);
+    background: var(--series, var(--c1));
+    transition: inline-size var(--dur-3) var(--ease-out);
+  }
+  .chart-meter > span + span { border-inline-start: 1px solid var(--surface); }
+
+  /* --- Heat cells ---------------------------------------------------------- */
+  /* A grid of --cols columns whose cells mix the series colour with the
+     sunken background by --value, interpolated in oklab. */
+  .chart-heat { display: grid; grid-template-columns: repeat(var(--cols, 7), 1fr); gap: 3px; }
+  .chart-heat > * {
+    aspect-ratio: 1;
+    border-radius: 3px;
+    background: color-mix(in oklab, var(--c1) calc(var(--value) * 1%), var(--bg-sunken));
+  }
+  .chart-heat > *:hover { outline: 2px solid var(--brand); outline-offset: 1px; }
+
+  /* --- Series color helpers ------------------------------------------------ */
+  /* Series 1. Every chart mark reads --series, so a colour is set once on
+     the element and the fill, stroke and legend swatch all follow. */
+  .s1 { --series: var(--c1); }
+  .s2 { --series: var(--c2); }
+  .s3 { --series: var(--c3); }
+  .s4 { --series: var(--c4); }
+  .s5 { --series: var(--c5); }
+  .s6 { --series: var(--c6); }
+  .s-good { --series: var(--good-500); }
+  .s-warn { --series: var(--warn-500); }
+  .s-bad  { --series: var(--bad-500); }
+  .s-muted { --series: var(--ink-300); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chart-col, .chart-col-stack, .chart-bar-fill, .chart-line, .chart-area, .donut { animation: none; }
+    .chart-line { stroke-dashoffset: 0; }
+  }
+}

package/dist/layers/combobox.css

@@ -0,0 +1,248 @@
+/* ==========================================================================
+   Deck — 11 Combobox / autocomplete
+   Type to filter, arrow keys to move, enter to pick. Single and multi select.
+   ========================================================================== */
+
+@layer deck.components {
+
+  /* A filtering select. It wraps a real <select> that stays in the DOM and
+     stays in sync, so an ordinary form post works with no server-side
+     handling, server-side rendering is just marking options selected, and
+     without JavaScript the reader still gets a working control. */
+  .combo { position: relative; display: flex; flex-direction: column; }
+
+  /* --- Control ------------------------------------------------------------ */
+  /* The box, styled to match .input so a combobox in a form does not look
+     like a different species. Focus is handled twice — :has(.combo-input:focus)
+     and :focus-within — so a token's remove button lights the box too. */
+  .combo-control {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    inline-size: 100%;
+    min-block-size: var(--control-h);
+    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
+    background: var(--surface);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--r-sm);
+    box-shadow: var(--shadow-1);
+    cursor: text;
+    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
+  }
+  .combo-control:hover { border-color: var(--ink-400); }
+  .combo:has(.combo-input:focus) .combo-control,
+  .combo-control:focus-within {
+    border-color: var(--focus);
+    box-shadow: var(--ring);
+  }
+  .combo.is-invalid .combo-control { border-color: var(--bad-500); }
+  .combo.is-disabled .combo-control {
+    background: var(--bg-sunken);
+    color: var(--text-faint);
+    pointer-events: none;
+  }
+
+  /* The text field. deck.js gives it role="combobox" and keeps aria-expanded
+     in step; arrow keys move .is-active rather than focus, so the reader can
+     keep typing while the highlight moves. */
+  .combo-input {
+    flex: 1 1 6rem;
+    min-inline-size: 4rem;
+    border: 0;
+    outline: none;
+    background: none;
+    padding: var(--space-2) 0;
+    font-size: var(--text-base);
+    color: inherit;
+  }
+  @media (pointer: coarse) { .combo-input { font-size: 16px; } }
+  .combo-input::placeholder { color: var(--text-faint); }
+
+  .combo-toggle {
+    inline-size: 30px;
+    block-size: 30px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--r-xs);
+    color: var(--text-faint);
+    cursor: pointer;
+    flex: 0 0 auto;
+  }
+  .combo-toggle:hover { background: var(--surface-hover); color: var(--text); }
+  .combo-toggle .icon { transition: rotate var(--dur-2) var(--ease-out); }
+  .combo.is-open .combo-toggle .icon { rotate: 180deg; }
+  .combo-clear { color: var(--text-faint); }
+
+  /* --- Selected tokens (multi select) -------------------------------------- */
+  .combo-tokens { display: contents; }
+  .combo-token {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    min-block-size: 26px;
+    padding-inline: var(--space-1) var(--space-2);
+    padding-inline-start: var(--space-2);
+    border-radius: var(--r-xs);
+    background: var(--brand-soft);
+    color: var(--brand-soft-text);
+    font-size: var(--text-sm);
+    font-weight: 540;
+    max-inline-size: 14rem;
+    flex: 0 0 auto;
+  }
+  .combo-token > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .combo-token > button {
+    display: grid;
+    place-items: center;
+    inline-size: 18px;
+    block-size: 18px;
+    border-radius: var(--r-full);
+    opacity: .65;
+    cursor: pointer;
+    flex: 0 0 auto;
+  }
+  .combo-token > button:hover { opacity: 1; background: color-mix(in oklab, currentColor 16%, transparent); }
+  .combo-count {
+    font-size: var(--text-xs);
+    font-weight: 620;
+    color: var(--text-muted);
+    flex: 0 0 auto;
+  }
+
+  /* --- Listbox ------------------------------------------------------------- */
+  /* The option list. A positioned sibling by default, which a clipping
+     ancestor can cut off; 25-anchor.css moves it to the top layer where
+     anchor positioning exists, which is the fix for the combobox-inside-a-modal
+     bug. */
+  .combo-list {
+    position: absolute;
+    inset-block-start: calc(100% + 4px);
+    inset-inline: 0;
+    z-index: var(--z-modal);
+    margin: 0;
+    padding: var(--space-1);
+    max-block-size: min(20rem, 50dvh);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    box-shadow: var(--shadow-4);
+    display: none;
+  }
+  .combo.is-open .combo-list { display: block; animation: dk-combo-in var(--dur-2) var(--ease-out); }
+  @keyframes dk-combo-in { from { opacity: 0; translate: 0 -4px; } }
+
+  /* Open upward when there is no room below */
+  .combo-list.is-above { inset-block: auto calc(100% + 4px); }
+
+  .combo-option {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    inline-size: 100%;
+    min-block-size: 40px;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--r-xs);
+    font-size: var(--text-sm);
+    color: var(--text);
+    text-align: start;
+    cursor: pointer;
+    scroll-margin-block: var(--space-1);
+  }
+  /* The text column of an option. min-inline-size: 0 so a long value cannot
+     push the tick off the end. */
+  .combo-option .combo-option-main { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 1px; }
+  .combo-option .combo-option-sub { font-size: var(--text-xs); color: var(--text-muted); }
+  .combo-option .combo-option-trail { color: var(--text-faint); font-size: var(--text-xs); flex: 0 0 auto; }
+
+  /* Keyboard highlight and mouse hover use the same state, set by deck.js */
+  .combo-option.is-active { background: var(--surface-hover); }
+  .combo-option[aria-selected="true"] {
+    background: var(--brand-soft);
+    color: var(--brand-soft-text);
+    font-weight: 560;
+  }
+  .combo-option[aria-selected="true"].is-active { background: color-mix(in oklab, var(--brand-soft) 78%, var(--brand-300)); }
+  .combo-option[aria-disabled="true"] { opacity: .45; pointer-events: none; }
+  /* The tick on a selected option, revealed by [aria-selected="true"]. */
+  .combo-option .combo-check { margin-inline-start: auto; opacity: 0; flex: 0 0 auto; }
+  .combo-option[aria-selected="true"] .combo-check { opacity: 1; }
+
+  /* The matched substring, wrapped by deck.js */
+  .combo-option mark {
+    background: none;
+    color: inherit;
+    font-weight: 700;
+    padding: 0;
+    text-decoration: underline;
+    text-decoration-color: color-mix(in oklab, var(--brand) 55%, transparent);
+    text-underline-offset: .16em;
+  }
+
+  /* A sticky heading above a group of options. */
+  .combo-group {
+    padding: var(--space-3) var(--space-3) var(--space-1);
+    font-size: var(--text-2xs);
+    font-weight: 700;
+    color: var(--text-faint);
+    position: sticky;
+    inset-block-start: calc(var(--space-1) * -1);
+    background: var(--surface);
+  }
+  .combo-sep { block-size: 1px; background: var(--line); margin: var(--space-1) 0; }
+
+  /* The no-matches row. Name what was searched for — "No repositories match
+     'deckk'" tells a reader who mistyped what they actually typed. */
+  .combo-empty, .combo-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-6) var(--space-4);
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    text-align: center;
+  }
+
+  /* Sticky "create new" row for tag-style inputs */
+  .combo-create {
+    position: sticky;
+    inset-block-end: calc(var(--space-1) * -1);
+    background: var(--surface);
+    border-block-start: 1px solid var(--line);
+    margin: var(--space-1) calc(var(--space-1) * -1) calc(var(--space-1) * -1);
+    padding: var(--space-1);
+  }
+  .combo-create .combo-option { color: var(--brand); font-weight: 560; }
+
+  .combo-hint {
+    display: none;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border-block-start: 1px solid var(--line);
+    font-size: var(--text-2xs);
+    color: var(--text-faint);
+  }
+  @media (pointer: fine) { .combo.is-open .combo-hint { display: flex; } }
+
+  /* --- Phone: the list takes over the screen ------------------------------- */
+  @media (max-width: 30rem) {
+    .combo.is-open .combo-list {
+      position: fixed;
+      inset: auto 0 0 0;
+      max-block-size: 70dvh;
+      border-radius: var(--r-lg) var(--r-lg) 0 0;
+      border-inline: 0;
+      border-block-end: 0;
+      padding-block-end: calc(var(--space-2) + env(safe-area-inset-bottom));
+      animation: dk-combo-up var(--dur-3) var(--ease-out);
+    }
+    .combo-option { min-block-size: var(--tap); }
+    @keyframes dk-combo-up { from { translate: 0 100%; } }
+  }
+}