@echodial/deck 0.1.0

package/dist/layers/container.css

@@ -0,0 +1,199 @@
+/* ==========================================================================
+   Deck — 18 Container queries
+   A component should respond to the space it was given, not to the size of the
+   window. A card in a narrow sidebar and the same card in a wide main column
+   are the same markup and should lay out differently without either one
+   knowing where it was placed.
+   ========================================================================== */
+
+@layer deck.layout {
+
+  /* --- Declaring a container ----------------------------------------------
+     .cq is the plain one. The named versions let a nested component query a
+     specific ancestor instead of the closest one.
+     ---------------------------------------------------------------------- */
+  .cq        { container-type: inline-size; }
+  .cq-size   { container-type: size; }
+  .cq-normal { container-type: normal; }
+
+  .cq-panel  { container: panel / inline-size; }
+  .cq-pane   { container: pane / inline-size; }
+  .cq-row    { container: row / inline-size; }
+  .cq-shell  { container: shell / inline-size; }
+
+  /* Every layout primitive can become a container without extra markup */
+  .card.cq, .panel.cq, .list.cq, .split > .cq, .grid > .cq { container-type: inline-size; }
+
+  /* --- Container query units -----------------------------------------------
+     cqi is 1% of the container's inline size. Type that scales with its column
+     rather than with the viewport — a heading in a sidebar stays small even on
+     a 32 inch monitor.
+     ---------------------------------------------------------------------- */
+  .cq :is(.text-cq) { font-size: clamp(var(--text-sm), 3.4cqi, var(--text-lg)); }
+  .cq :is(.display-cq) {
+    font-size: clamp(1.5rem, 8cqi, 3.25rem);
+    line-height: 1.05;
+    letter-spacing: -.03em;
+  }
+  .cq :is(.pad-cq) { padding: clamp(var(--space-3), 4cqi, var(--space-8)); }
+  .cq :is(.gap-cq) { gap: clamp(var(--space-2), 2.5cqi, var(--space-6)); }
+
+  /* --- Container-driven components ---------------------------------------- */
+
+  /* A card that turns into a horizontal media object once it has the room */
+  .card-flex { display: flex; flex-direction: column; }
+  .card-flex .card-media { flex: 0 0 auto; }
+  .card-flex .card-media img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
+
+  @container (min-width: 30rem) {
+    .card-flex { flex-direction: row; }
+    .card-flex .card-media { inline-size: 40%; max-inline-size: 15rem; }
+    .card-flex .card-media img { block-size: 100%; aspect-ratio: auto; }
+  }
+
+  /* A stat block that stacks tight, then spreads, then goes inline */
+  .stat-cq { display: flex; flex-direction: column; gap: var(--space-1); }
+  @container (min-width: 18rem) {
+    .stat-cq .stat-value { font-size: var(--text-2xl); }
+  }
+  @container (min-width: 28rem) {
+    .stat-cq {
+      flex-direction: row;
+      align-items: baseline;
+      gap: var(--space-3);
+      flex-wrap: wrap;
+    }
+    .stat-cq .stat-label { order: -1; min-inline-size: 100%; }
+  }
+
+  /* List rows that reveal their metadata as space allows */
+  .metarow { display: flex; align-items: center; gap: var(--space-3); }
+  .metarow .row-meta { display: none; }
+  @container (min-width: 26rem) {
+    .metarow .row-meta { display: block; color: var(--text-muted); font-size: var(--text-sm); }
+  }
+  @container (min-width: 38rem) {
+    .metarow .row-meta-wide { display: block; }
+  }
+  .metarow .row-meta-wide { display: none; }
+
+  /* Form fields that pair up inside their own container, not the viewport.
+     This is the one that keeps biting people: a two-up field row inside a
+     narrow modal should stay stacked even on a desktop. */
+  .field-row-cq { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
+  @container (min-width: 32rem) {
+    .field-row-cq { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
+  }
+
+  /* Button rows that go full width when cramped */
+  .actions-cq { display: flex; flex-direction: column; gap: var(--space-2); }
+  .actions-cq > .btn { inline-size: 100%; }
+  @container (min-width: 24rem) {
+    .actions-cq { flex-direction: row; }
+    .actions-cq > .btn { inline-size: auto; }
+  }
+
+  /* A data grid that drops to cards based on its own width. This is strictly
+     better than the media-query version, because a grid inside a sheet is
+     narrow no matter how wide the screen is. */
+  @container (max-width: 44rem) {
+    .dg-cq thead, .dg-cq tfoot { display: none; }
+    .dg-cq, .dg-cq tbody, .dg-cq tr, .dg-cq td { display: block; inline-size: 100%; }
+    .dg-cq tr {
+      background: var(--surface);
+      border: 1px solid var(--line);
+      border-radius: var(--r-md);
+      margin-block-end: var(--space-3);
+      overflow: hidden;
+    }
+    .dg-cq td {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--space-4);
+      block-size: auto;
+      min-block-size: var(--tap);
+      text-align: end;
+      white-space: normal;
+      position: static !important;
+      box-shadow: none !important;
+      clip-path: none !important;
+    }
+    .dg-cq td::before {
+      content: attr(data-label);
+      font-size: var(--text-xs);
+      font-weight: 620;
+      color: var(--text-muted);
+      text-align: start;
+    }
+  }
+
+  /* Named-container example: a sidebar nav that collapses to icons when the
+     shell is narrow, regardless of what is nested inside it. */
+  /* FINDINGS 64: display:none removes the label from the accessibility tree,
+     not just from the screen. The icon inside the link is aria-hidden by
+     convention, so a collapsed .sidebar-link has NO accessible name -- a
+     screen reader announces "link" for every destination in the app's primary
+     navigation.
+
+     Note that .sidebar-group two lines down gets it right: font-size: 0 hides
+     the heading visually and keeps it in the tree. The link rule should hide
+     the span the same way, or with an .sr-only clip. Until it does, authors
+     have to put aria-label on every .sidebar-link by hand. */
+  @container shell (max-width: 15rem) {
+    .sidebar-link span { display: none; }
+    .sidebar-link { justify-content: center; }
+    .sidebar-group { text-align: center; font-size: 0; }
+  }
+
+  /* --- Container breakpoint utilities --------------------------------------
+     Same idea as the responsive utilities, but keyed to the container.
+     ---------------------------------------------------------------------- */
+  @container (min-width: 24rem) {
+    .cq-sm\:row { flex-direction: row; }
+    .cq-sm\:flex { display: flex; }
+    .cq-sm\:hidden { display: none; }
+    .cq-sm\:block { display: block; }
+    .cq-sm\:w-auto { inline-size: auto; }
+  }
+  @container (min-width: 32rem) {
+    .cq-md\:row { flex-direction: row; }
+    .cq-md\:col { flex-direction: column; }
+    .cq-md\:flex { display: flex; }
+    .cq-md\:grid { display: grid; }
+    .cq-md\:hidden { display: none; }
+    .cq-md\:block { display: block; }
+    .cq-md\:items-center { align-items: center; }
+    .cq-md\:justify-between { justify-content: space-between; }
+  }
+  @container (min-width: 44rem) {
+    .cq-lg\:row { flex-direction: row; }
+    .cq-lg\:flex { display: flex; }
+    .cq-lg\:hidden { display: none; }
+    .cq-lg\:block { display: block; }
+    .cq-lg\:grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
+  }
+
+  /* --- Style queries -------------------------------------------------------
+     Query a custom property rather than a size. Set --tone on a container and
+     everything inside it adapts, with no extra classes on the children.
+     Supported in current Chrome and Safari; the fallback is simply no change.
+     ---------------------------------------------------------------------- */
+  .cq-tone { container-type: inline-size; }
+
+  @container style(--tone: critical) {
+    .tone-surface { background: var(--bad-100); border-color: color-mix(in oklab, var(--bad-500) 35%, transparent); }
+    .tone-text { color: var(--bad-700); }
+    .tone-icon { color: var(--bad-500); }
+  }
+  @container style(--tone: caution) {
+    .tone-surface { background: var(--warn-100); border-color: color-mix(in oklab, var(--warn-500) 35%, transparent); }
+    .tone-text { color: var(--warn-700); }
+    .tone-icon { color: var(--warn-500); }
+  }
+  @container style(--tone: clear) {
+    .tone-surface { background: var(--good-100); border-color: color-mix(in oklab, var(--good-500) 35%, transparent); }
+    .tone-text { color: var(--good-700); }
+    .tone-icon { color: var(--good-500); }
+  }
+}

package/dist/layers/datagrid.css

@@ -0,0 +1,335 @@
+/* ==========================================================================
+   Deck — 12 Data grid
+   A real table with a frozen header and pinned columns. Add .dg-pin-start to
+   the cells of a column you want frozen on the left, .dg-pin-end for the
+   right. Set --dg-pin-start to the pinned column's width.
+   ========================================================================== */
+
+@layer deck.components {
+
+  .dg-wrap {
+    --dg-pin-start: 0px;
+    --dg-pin-end: 0px;
+    --dg-row-h: 44px;
+    position: relative;
+    inline-size: 100%;
+    max-block-size: var(--dg-height, 70dvh);
+    overflow: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+  }
+
+  /* A real table with a frozen header and pinned columns. Use it when the
+     reader operates on data — sorts, selects, scans — rather than reads it;
+     .table is lighter for presentation. Must sit inside .dg-wrap, which
+     carries the scroll container and every custom property these rules read. */
+  .dg {
+    inline-size: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: var(--text-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .dg :is(th, td) {
+    padding: 0 var(--space-4);
+    block-size: var(--dg-row-h);
+    text-align: start;
+    white-space: nowrap;
+    background: var(--surface);
+    border-block-end: 1px solid var(--line);
+  }
+
+  /* --- Frozen header ------------------------------------------------------- */
+  .dg thead th {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 3;
+    background: var(--surface-2);
+    font-size: var(--text-xs);
+    font-weight: 620;
+    color: var(--text-muted);
+    border-block-end: 1px solid var(--line-strong);
+  }
+
+  /* --- Pinned columns ------------------------------------------------------ */
+  .dg :is(th, td).dg-pin-start {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: 2;
+  }
+  .dg thead th.dg-pin-start { z-index: 4; }
+
+  .dg :is(th, td).dg-pin-start-2 {
+    position: sticky;
+    inset-inline-start: var(--dg-pin-start);
+    z-index: 2;
+  }
+  .dg thead th.dg-pin-start-2 { z-index: 4; }
+
+  .dg :is(th, td).dg-pin-end {
+    position: sticky;
+    inset-inline-end: 0;
+    z-index: 2;
+  }
+  .dg thead th.dg-pin-end { z-index: 4; }
+
+  /* The shadow only appears once the grid is actually scrolled sideways.
+     A box-shadow offset is physical, so the geometry lives here and 19-logical
+     mirrors it for RTL once, rather than once per branch below. */
+  .dg-wrap {
+    --dg-pin-shadow-start: 6px 0 8px -6px oklch(20% .03 var(--hue-neutral) / .28);
+    --dg-pin-shadow-end: -6px 0 8px -6px oklch(20% .03 var(--hue-neutral) / .28);
+    --dg-pin-clip-start: inset(0 -12px 0 0);
+    --dg-pin-clip-end: inset(0 0 0 -12px);
+  }
+
+  /* Ask the scroll container directly. No scroll handler, no class to keep in
+     sync, and the query is already logical so RTL needs nothing here. */
+  @supports (container-type: scroll-state) {
+    .dg-wrap { container-type: scroll-state; }
+    @container scroll-state(scrollable: inline-start) {
+      .dg :is(th, td).dg-pin-start:last-of-type,
+      .dg :is(th, td).dg-pin-start-2,
+      .dg :is(th, td).dg-pin-start:not(:has(~ .dg-pin-start-2)) {
+        box-shadow: var(--dg-pin-shadow-start);
+        clip-path: var(--dg-pin-clip-start);
+      }
+    }
+    @container scroll-state(scrollable: inline-end) {
+      .dg :is(th, td).dg-pin-end {
+        box-shadow: var(--dg-pin-shadow-end);
+        clip-path: var(--dg-pin-clip-end);
+      }
+    }
+  }
+
+  /* Where it is missing, Grid.shadows() in deck.js toggles these two classes. */
+  @supports not (container-type: scroll-state) {
+    .dg-wrap.is-scrolled-x .dg :is(th, td).dg-pin-start:last-of-type,
+    .dg-wrap.is-scrolled-x .dg :is(th, td).dg-pin-start-2,
+    .dg-wrap.is-scrolled-x .dg :is(th, td).dg-pin-start:not(:has(~ .dg-pin-start-2)) {
+      box-shadow: var(--dg-pin-shadow-start);
+      clip-path: var(--dg-pin-clip-start);
+    }
+    .dg-wrap.is-scrolled-end .dg :is(th, td).dg-pin-end {
+      box-shadow: var(--dg-pin-shadow-end);
+      clip-path: var(--dg-pin-clip-end);
+    }
+  }
+
+  /* --- Rows ---------------------------------------------------------------- */
+  .dg tbody tr:hover :is(td) { background: var(--surface-hover); }
+  .dg tbody tr:last-child td { border-block-end: 0; }
+
+  .dg tbody tr[aria-selected="true"] td {
+    background: var(--brand-soft);
+    color: var(--brand-soft-text);
+  }
+  .dg tbody tr[aria-selected="true"]:hover td {
+    background: color-mix(in oklab, var(--brand-soft) 80%, var(--brand-200));
+  }
+
+  /* Zebra is opt-in, and it never fights the pinned column background */
+  .dg-zebra tbody tr:nth-child(even) td { background: var(--surface-2); }
+  .dg-zebra tbody tr:nth-child(even):hover td { background: var(--surface-hover); }
+
+  .dg tbody tr.is-new td { animation: dg-flash 1.4s var(--ease-out); }
+  @keyframes dg-flash { from { background: var(--good-100); } }
+
+  /* --- Cell variants ------------------------------------------------------- */
+  /* A numeric column in the data grid: aligned to the end edge, and sorted
+     numerically when the header carries data-sort="num". */
+  /* A numeric column: aligned to the end edge, and sorted numerically when
+     the header carries data-sort="num". */
+  .dg .dg-num { text-align: end; }
+  /* A centred column. */
+  .dg .dg-center { text-align: center; }
+  .dg .dg-wrap-text { white-space: normal; min-inline-size: 16rem; }
+  .dg .dg-tight { padding-inline: var(--space-2); }
+  /* The selection column. 44px wide, and the one place Deck strips .check of
+     its min-block-size — a dense grid of 34px rows cannot also have 44px
+     checkboxes. The checkbox still needs its own accessible name. */
+  .dg .dg-check { inline-size: 44px; padding-inline: 0; text-align: center; }
+  .dg .dg-check .check { justify-content: center; min-block-size: auto; padding: 0; }
+  /* A column shrunk to its content, for a row menu or a pair of buttons. */
+  .dg .dg-actions { inline-size: 1%; padding-inline: var(--space-2); }
+
+  /* --- Density ------------------------------------------------------------- */
+  /* 34px rows and smaller text, for scanning many rows at once. */
+  .dg-compact { --dg-row-h: 34px; font-size: var(--text-xs); }
+  .dg-compact :is(th, td) { padding-inline: var(--space-3); }
+  /* 56px rows, for a grid with two lines of content per cell. */
+  .dg-comfy { --dg-row-h: 56px; }
+
+  /* --- Sortable headers ---------------------------------------------------- */
+  /* The button deck.js builds inside a th[data-sort]. The styling keys off
+     th[aria-sort], so the arrow direction and the announced sort state are
+     the same value and cannot drift apart. */
+  .dg-sort {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    inline-size: 100%;
+    block-size: 100%;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    user-select: none;
+  }
+  .dg-num .dg-sort { justify-content: flex-end; }
+  .dg-sort:hover { color: var(--text); }
+  .dg-sort .dg-sort-icon {
+    inline-size: 14px;
+    block-size: 14px;
+    opacity: 0;
+    flex: 0 0 auto;
+    transition: opacity var(--dur-1) var(--ease-out), rotate var(--dur-2) var(--ease-out);
+  }
+  .dg-sort:hover .dg-sort-icon { opacity: .4; }
+  th[aria-sort] .dg-sort { color: var(--brand); }
+  th[aria-sort] .dg-sort-icon { opacity: 1; }
+  th[aria-sort="descending"] .dg-sort-icon { rotate: 180deg; }
+
+  /* Column resize grip. deck.js writes the width to the th. */
+  .dg-resize {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: -3px;
+    inline-size: 7px;
+    cursor: col-resize;
+    z-index: 1;
+    touch-action: none;
+  }
+  .dg-resize::after {
+    content: "";
+    position: absolute;
+    inset-block: 8px;
+    inset-inline-start: 3px;
+    inline-size: 1px;
+    background: var(--line-strong);
+    opacity: 0;
+    transition: opacity var(--dur-1) var(--ease-out);
+  }
+  .dg-resize:hover::after, .dg-wrap.is-resizing .dg-resize::after { opacity: 1; background: var(--brand); }
+  .dg thead th { position: sticky; }
+  .dg thead th:has(.dg-resize) { position: sticky; }
+
+  /* --- Footer totals ------------------------------------------------------- */
+  .dg tfoot td {
+    position: sticky;
+    inset-block-end: 0;
+    z-index: 3;
+    background: var(--surface-2);
+    border-block-start: 1px solid var(--line-strong);
+    border-block-end: 0;
+    font-weight: 640;
+    color: var(--text);
+  }
+  .dg tfoot td.dg-pin-start { z-index: 4; }
+
+  /* --- Toolbar and status bar ---------------------------------------------- */
+  .dg-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+    padding-block-end: var(--space-3);
+  }
+  .dg-toolbar .search { flex: 1 1 14rem; }
+
+  .dg-statusbar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+    padding-block-start: var(--space-3);
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+  }
+
+  /* Selection bar that slides in once rows are checked */
+  .dg-selection {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--r-sm);
+    background: var(--brand-soft);
+    color: var(--brand-soft-text);
+    font-size: var(--text-sm);
+    font-weight: 560;
+    animation: dk-combo-in var(--dur-2) var(--ease-out);
+  }
+
+  /* --- Loading and empty --------------------------------------------------- */
+  .dg-wrap.is-loading { pointer-events: none; }
+  .dg-wrap.is-loading .dg tbody { opacity: .45; }
+  .dg-wrap.is-loading::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    block-size: 2px;
+    background: linear-gradient(90deg, transparent, var(--brand-500), transparent);
+    background-size: 40% 100%;
+    background-repeat: no-repeat;
+    animation: dg-bar 1.1s var(--ease-in-out) infinite;
+    z-index: 5;
+  }
+  @keyframes dg-bar {
+    from { background-position: -40% 0; }
+    to   { background-position: 140% 0; }
+  }
+
+  /* The row that holds an empty state, with its height and padding released
+     so the state can be any size. */
+  .dg-empty td { block-size: auto; padding: 0; }
+
+  /* --- Phone: swap to cards ------------------------------------------------
+     Add .dg-cards and put the column name in data-label on each td.
+     ---------------------------------------------------------------------- */
+  @media (max-width: 44rem) {
+    .dg-cards-wrap { max-block-size: none; overflow: visible; border: 0; background: none; }
+    .dg-cards thead, .dg-cards tfoot { display: none; }
+    /* Below a breakpoint, restacks each row into a labelled card, taking the
+       column name from data-label on the cell. Costs the column alignment that
+       makes a grid comparable; prefer .dg-cq, which asks the container rather
+       than the viewport. */
+    .dg-cards, .dg-cards tbody, .dg-cards tr, .dg-cards td { display: block; inline-size: 100%; }
+    .dg-cards tr {
+      background: var(--surface);
+      border: 1px solid var(--line);
+      border-radius: var(--r-md);
+      margin-block-end: var(--space-3);
+      overflow: hidden;
+    }
+    .dg-cards td {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--space-4);
+      block-size: auto;
+      min-block-size: var(--tap);
+      padding: var(--space-2) var(--space-4);
+      white-space: normal;
+      text-align: end;
+      position: static !important;
+      box-shadow: none !important;
+      clip-path: none !important;
+    }
+    .dg-cards td::before {
+      content: attr(data-label);
+      font-size: var(--text-xs);
+      font-weight: 620;
+      color: var(--text-muted);
+      text-align: start;
+      flex: 0 0 auto;
+    }
+    .dg-cards td:empty { display: none; }
+    .dg-cards td.dg-num { text-align: end; }
+  }
+}