@echodial/deck 0.1.0

package/src/12-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; }
+  }
+}

package/src/13-toasts.css

@@ -0,0 +1,201 @@
+/* ==========================================================================
+   Deck — 13 Toasts
+   A stack, not a list. Collapsed toasts sit behind the newest one and fan out
+   on hover or focus. Queue logic is in deck.js (Deck.toast).
+   ========================================================================== */
+
+@layer deck.components {
+
+  /* The fixed container. pointer-events: none on the region and auto on each
+     toast, so the empty area does not swallow clicks on the page beneath. Sits
+     above a .tabbar when the page has one, and clears the home indicator. */
+  .toast-region {
+    position: fixed;
+    z-index: var(--z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    inline-size: min(23rem, calc(100vw - var(--space-6)));
+    pointer-events: none;
+    /* the stack grows upward from the bottom by default */
+    inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom));
+    inset-inline-end: var(--space-4);
+  }
+  body:has(.tabbar) .toast-region {
+    inset-block-end: calc(var(--space-4) + var(--tap) + env(safe-area-inset-bottom));
+  }
+  @media (min-width: 48rem) {
+    body:has(.tabbar) .toast-region { inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom)); }
+  }
+
+  .toast-region-start { inset-inline: var(--space-4) auto; }
+  .toast-region-center { inset-inline: 0; margin-inline: auto; }
+  .toast-region-top {
+    inset-block: calc(var(--space-4) + env(safe-area-inset-top)) auto;
+    flex-direction: column-reverse;
+  }
+
+  /* On a phone the stack spans the width and sits above the thumb */
+  @media (max-width: 30rem) {
+    .toast-region { inset-inline: var(--space-3); inline-size: auto; }
+  }
+
+  /* --- The toast ----------------------------------------------------------- */
+  /* One notification. The accent colour is a single custom property,
+     --toast-accent, which paints the edge, the icon and the timer together, so
+     a kind is one declaration. Built by Deck.toast() rather than written by
+     hand; touch-action: pan-y lets a horizontal swipe dismiss it while a
+     vertical drag still scrolls the page. */
+  .toast {
+    --toast-accent: var(--ink-400);
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    box-shadow: var(--shadow-4);
+    font-size: var(--text-sm);
+    pointer-events: auto;
+    overflow: hidden;
+    touch-action: pan-y;
+    transform-origin: bottom center;
+    transition: translate var(--dur-3) var(--ease-out),
+                scale var(--dur-3) var(--ease-out),
+                opacity var(--dur-2) var(--ease-out),
+                margin var(--dur-3) var(--ease-out);
+  }
+  .toast::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: 3px;
+    background: var(--toast-accent);
+  }
+
+  /* The leading glyph, coloured by --toast-accent so it matches the kind
+     without a rule of its own. */
+  .toast-icon { color: var(--toast-accent); margin-block-start: 1px; flex: 0 0 auto; }
+  /* The text column of a toast. min-inline-size: 0 so a long unbroken string
+     cannot push the close button off the end. */
+  .toast-main { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
+  .toast-title { font-weight: 620; }
+  .toast-text { color: var(--text-muted); }
+  .toast-close {
+    flex: 0 0 auto;
+    inline-size: 26px;
+    block-size: 26px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--r-full);
+    color: var(--text-faint);
+    cursor: pointer;
+    margin-block-start: -2px;
+    margin-inline-end: -4px;
+  }
+  .toast-close:hover { background: var(--surface-hover); color: var(--text); }
+  .toast-actions { display: flex; gap: var(--space-2); margin-block-start: var(--space-2); }
+  .toast-action {
+    font-size: var(--text-sm);
+    font-weight: 620;
+    color: var(--brand);
+    cursor: pointer;
+    padding: var(--space-1) 0;
+  }
+  .toast-action:hover { text-decoration: underline; }
+
+  /* --- Kinds --------------------------------------------------------------- */
+  .toast-good { --toast-accent: var(--good-500); }
+  .toast-warn { --toast-accent: var(--warn-500); }
+  .toast-bad  { --toast-accent: var(--bad-500); }
+  .toast-info { --toast-accent: var(--brand-500); }
+  .toast-loading { --toast-accent: var(--brand-500); }
+
+  /* --- Auto-dismiss timer -------------------------------------------------- */
+  /* The auto-dismiss bar. A CSS animation rather than a JavaScript countdown,
+     which is what allows hovering or focusing the region to pause every timer
+     in it with one declaration — so a reader moving toward an Undo button does
+     not have it vanish as they arrive. */
+  .toast-timer {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    block-size: 2px;
+    inline-size: 100%;
+    background: var(--toast-accent);
+    opacity: .5;
+    transform-origin: left center;
+    animation: dk-toast-timer linear forwards;
+    animation-duration: var(--toast-duration, 5s);
+  }
+  @keyframes dk-toast-timer { to { scale: 0 1; } }
+  /* Hovering the stack pauses every timer in it */
+  .toast-region:is(:hover, :focus-within) .toast-timer { animation-play-state: paused; }
+
+  /* --- Enter and exit ------------------------------------------------------ */
+  .toast { animation: dk-toast-in var(--dur-3) var(--ease-spring); }
+  @keyframes dk-toast-in {
+    from { opacity: 0; translate: 0 16px; scale: .94; }
+  }
+  .toast-region-top .toast { animation-name: dk-toast-in-top; }
+  @keyframes dk-toast-in-top {
+    from { opacity: 0; translate: 0 -16px; scale: .94; }
+  }
+  .toast.is-leaving {
+    opacity: 0;
+    scale: .94;
+    translate: var(--toast-exit-x, 0) 8px;
+    margin-block-end: calc((var(--toast-h, 60px) + var(--space-2)) * -1);
+    pointer-events: none;
+  }
+
+  /* --- Collapsed stack -----------------------------------------------------
+     --i counts from the newest, which is the first child because push()
+     prepends. Beyond the third toast they hide behind.
+     ---------------------------------------------------------------------- */
+  @supports (animation-delay: calc(sibling-index() * 1ms)) {
+    .toast-region-stacked .toast { --i: calc(sibling-index() - 1); }
+  }
+  @supports not (animation-delay: calc(sibling-index() * 1ms)) {
+    .toast-region-stacked .toast:nth-child(1)   { --i: 0; }
+    .toast-region-stacked .toast:nth-child(2)   { --i: 1; }
+    .toast-region-stacked .toast:nth-child(3)   { --i: 2; }
+    .toast-region-stacked .toast:nth-child(4)   { --i: 3; }
+    .toast-region-stacked .toast:nth-child(5)   { --i: 4; }
+    .toast-region-stacked .toast:nth-child(6)   { --i: 5; }
+    .toast-region-stacked .toast:nth-child(7)   { --i: 6; }
+    .toast-region-stacked .toast:nth-child(8)   { --i: 7; }
+  }
+  .toast-region-stacked .toast {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    translate: 0 calc(var(--i) * -8px);
+    scale: calc(1 - var(--i) * .04);
+    opacity: calc(1 - var(--i) * .18);
+    z-index: calc(100 - var(--i));
+  }
+  .toast-region-stacked .toast:nth-child(n+4) { opacity: 0; pointer-events: none; }
+
+  .toast-region-stacked:is(:hover, :focus-within) .toast {
+    translate: 0 calc(var(--i) * (var(--toast-h, 68px) + var(--space-2)) * -1);
+    scale: 1;
+    opacity: 1;
+  }
+
+  /* --- Swipe to dismiss ---------------------------------------------------- */
+  .toast.is-dragging { transition: none; cursor: grabbing; user-select: none; }
+
+  /* --- Undo pattern -------------------------------------------------------- */
+  .toast-undo { --toast-accent: var(--ink-500); }
+  .toast-undo .toast-action { color: var(--text); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toast, .toast-region-stacked .toast { animation: none; transition: opacity var(--dur-1) linear; }
+    .toast-timer { animation: none; display: none; }
+  }
+}