@echodial/deck 0.1.0

package/src/10-datepicker.css

@@ -0,0 +1,305 @@
+/* ==========================================================================
+   Deck — 10 Date picker
+   Popover calendar on desktop, bottom sheet on a phone. Single date, range,
+   and month/year jump. Behaviour lives in deck.js; this file is the skin.
+   ========================================================================== */
+
+@layer deck.components {
+
+  /* --- Trigger field ------------------------------------------------------ */
+  /* The trigger for a date picker: an input with a calendar icon inside its
+     starting edge and a clear button at the end. The input is readonly and
+     cursor: pointer, because the value comes from the calendar — which also
+     means a reader who knows the date cannot type it. */
+  .datefield { position: relative; display: flex; align-items: center; }
+  .datefield > .icon {
+    position: absolute;
+    inset-inline-start: var(--space-3);
+    color: var(--text-faint);
+    pointer-events: none;
+  }
+  .datefield > .input { padding-inline-start: var(--space-10); cursor: pointer; }
+  /* Clears the field. Hidden until .has-value is set by deck.js. */
+  .datefield > .datefield-clear {
+    position: absolute;
+    inset-inline-end: var(--space-2);
+    inline-size: 28px;
+    block-size: 28px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--r-full);
+    color: var(--text-faint);
+    cursor: pointer;
+  }
+  .datefield > .datefield-clear:hover { background: var(--surface-hover); color: var(--text); }
+  .datefield:not(.has-value) .datefield-clear { display: none; }
+
+  /* --- Panel -------------------------------------------------------------- */
+  /* The calendar panel: a native popover, anchored to its field by
+     25-anchor.css with the same fallback chain as a menu. Where there is no
+     room below it opens upward, and position-try-order: most-block-size picks
+     the direction with the most room rather than the first that fits — which
+     matters more for a calendar than for a menu. */
+  .datepicker {
+    position: absolute;
+    margin: 0;
+    inset: auto;
+    padding: 0;
+    inline-size: max-content;
+    max-inline-size: calc(100vw - var(--space-6));
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    box-shadow: var(--shadow-4);
+    color: var(--text);
+    opacity: 0;
+    translate: 0 -6px;
+    transition: opacity var(--dur-2) var(--ease-out),
+                translate var(--dur-2) var(--ease-out),
+                overlay var(--dur-2) allow-discrete,
+                display var(--dur-2) allow-discrete;
+  }
+  .datepicker:popover-open { opacity: 1; translate: 0; }
+  @starting-style { .datepicker:popover-open { opacity: 0; translate: 0 -6px; } }
+  .datepicker::backdrop { background: transparent; }
+
+  .datepicker-layout { display: flex; flex-direction: column; }
+  @media (min-width: 40rem) {
+    .datepicker-layout:has(.datepicker-presets) { flex-direction: row; }
+  }
+
+  /* --- Preset rail --------------------------------------------------------- */
+  /* The shortcut rail — "Last 7 days", "This month". A horizontal scroller
+     below 40rem and a column beside the calendar above it. */
+  .datepicker-presets {
+    display: flex;
+    gap: var(--space-1);
+    padding: var(--space-2);
+    overflow-x: auto;
+    scrollbar-width: none;
+    border-block-end: 1px solid var(--line);
+  }
+  .datepicker-presets::-webkit-scrollbar { display: none; }
+  @media (min-width: 40rem) {
+    .datepicker-presets {
+      flex-direction: column;
+      inline-size: 10.5rem;
+      overflow-x: visible;
+      border-block-end: 0;
+      border-inline-end: 1px solid var(--line);
+      background: var(--surface-2);
+    }
+  }
+  .datepicker-preset {
+    padding: var(--space-2) var(--space-3);
+    min-block-size: 36px;
+    border-radius: var(--r-xs);
+    font-size: var(--text-sm);
+    font-weight: 520;
+    color: var(--text-muted);
+    text-align: start;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
+  }
+  .datepicker-preset:hover { background: var(--surface-hover); color: var(--text); }
+  .datepicker-preset[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-soft-text); font-weight: 600; }
+
+  /* --- Calendar ----------------------------------------------------------- */
+  .datepicker-main { padding: var(--space-3); }
+
+  .datepicker-head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding-block-end: var(--space-2);
+  }
+  .datepicker-title {
+    flex: 1 1 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    min-block-size: 36px;
+    padding-inline: var(--space-3);
+    border-radius: var(--r-sm);
+    font-weight: 620;
+    font-size: var(--text-sm);
+    cursor: pointer;
+    letter-spacing: -.01em;
+  }
+  .datepicker-title:hover { background: var(--surface-hover); }
+  .datepicker-nav {
+    inline-size: 36px;
+    block-size: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--r-sm);
+    color: var(--text-muted);
+    cursor: pointer;
+  }
+  .datepicker-nav:hover { background: var(--surface-hover); color: var(--text); }
+  .datepicker-nav[disabled] { opacity: .35; pointer-events: none; }
+
+  .datepicker-months { display: flex; gap: var(--space-5); }
+  .datepicker-month { display: flex; flex-direction: column; }
+
+  .datepicker-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 1px;
+  }
+  .datepicker-dow {
+    text-align: center;
+    font-size: var(--text-2xs);
+    font-weight: 620;
+    color: var(--text-faint);
+    padding-block: var(--space-2);
+  }
+
+  /* One day cell. 38px, raised to 42px on a coarse pointer so it approaches
+     the touch target. Eight is- states compose on it, and the range band is
+     built from is-in-range plus logical corner radii on the two ends. */
+  .datepicker-day {
+    position: relative;
+    inline-size: 38px;
+    block-size: 38px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--r-sm);
+    font-size: var(--text-sm);
+    font-variant-numeric: tabular-nums;
+    color: var(--text);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
+  }
+  @media (pointer: coarse) { .datepicker-day { inline-size: 42px; block-size: 42px; } }
+
+  .datepicker-day:hover { background: var(--surface-hover); }
+  .datepicker-day.is-outside { color: var(--text-faint); opacity: .55; }
+  .datepicker-day[disabled], .datepicker-day.is-blocked {
+    color: var(--text-faint);
+    opacity: .4;
+    pointer-events: none;
+    text-decoration: line-through;
+  }
+
+  /* Today gets a marker, not a fill, so it never competes with the selection */
+  .datepicker-day.is-today::after {
+    content: "";
+    position: absolute;
+    inset-block-end: 5px;
+    inline-size: 4px;
+    block-size: 4px;
+    border-radius: var(--r-full);
+    background: var(--brand);
+  }
+
+  .datepicker-day.is-selected {
+    background: var(--brand-600);
+    color: var(--text-on-brand);
+    font-weight: 620;
+  }
+  .datepicker-day.is-selected::after { background: var(--text-on-brand); }
+
+  /* Range: the middle days get a continuous band, the ends get the caps */
+  .datepicker-day.is-in-range {
+    background: var(--brand-soft);
+    color: var(--brand-soft-text);
+    border-radius: 0;
+  }
+  .datepicker-day.is-range-start {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .datepicker-day.is-range-end {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .datepicker-day.is-range-start.is-range-end { border-radius: var(--r-sm); }
+  .datepicker-grid:has(.is-in-range) .datepicker-day.is-in-range:first-child {
+    border-start-start-radius: var(--r-sm); border-end-start-radius: var(--r-sm);
+  }
+  .datepicker-grid:has(.is-in-range) .datepicker-day.is-in-range:nth-child(7n) {
+    border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm);
+  }
+  .datepicker-day.is-preview { background: color-mix(in oklab, var(--brand-soft) 60%, transparent); }
+  .datepicker-day:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; z-index: 1; }
+
+  /* --- Month and year jump grid ------------------------------------------- */
+  /* Opens the month and year grid. A picker without one makes a reader press
+     the next-month arrow twenty-four times to reach a date two years out. */
+  .datepicker-jump {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-1);
+    padding-block: var(--space-2);
+  }
+  .datepicker-jump > button {
+    min-block-size: 40px;
+    padding-inline: var(--space-2);
+    border-radius: var(--r-sm);
+    font-size: var(--text-sm);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-muted);
+    cursor: pointer;
+  }
+  .datepicker-jump > button:hover { background: var(--surface-hover); color: var(--text); }
+  .datepicker-jump > button[aria-selected="true"] {
+    background: var(--brand-600);
+    color: var(--text-on-brand);
+    font-weight: 620;
+  }
+
+  /* --- Time row and footer ------------------------------------------------- */
+  .datepicker-time {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    border-block-start: 1px solid var(--line);
+  }
+  .datepicker-time .input { inline-size: auto; min-inline-size: 7.5rem; }
+
+  .datepicker-foot {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    border-block-start: 1px solid var(--line);
+    background: var(--surface-2);
+  }
+  .datepicker-readout {
+    flex: 1 1 auto;
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+    min-inline-size: 0;
+  }
+
+  /* --- Phone: the picker becomes a sheet ---------------------------------- */
+  @media (max-width: 30rem) {
+    .datepicker {
+      position: fixed;
+      inset: auto 0 0 0;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      border-radius: var(--r-lg) var(--r-lg) 0 0;
+      border-inline: 0;
+      border-block-end: 0;
+      translate: 0 100%;
+      padding-block-end: env(safe-area-inset-bottom);
+      transition: translate var(--dur-3) var(--ease-out),
+                  overlay var(--dur-3) allow-discrete,
+                  display var(--dur-3) allow-discrete;
+      opacity: 1;
+    }
+    .datepicker:popover-open { translate: 0; }
+    @starting-style { .datepicker:popover-open { translate: 0 100%; } }
+    .datepicker::backdrop { background: oklch(18% .02 var(--hue-neutral) / .45); }
+    .datepicker-months { flex-direction: column; }
+    .datepicker-day { inline-size: 100%; }
+    .datepicker-main { padding-inline: var(--space-4); }
+  }
+}

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