@echodial/deck 0.1.0

package/dist/layers/tokens.css

@@ -0,0 +1,229 @@
+/* ==========================================================================
+   Deck — 01 Tokens
+   Everything is a custom property. Change a hue, retheme the whole app.
+   No build step. No purge. No config file.
+   ========================================================================== */
+
+/* Layer order is declared in 00-layers.css. */
+
+@layer deck.tokens {
+
+  :root {
+    color-scheme: light dark;
+
+    /* --- Hue control -------------------------------------------------------
+       These six numbers are the whole palette. Set --hue-brand to 12 and the
+       framework becomes rust. Set it to 265 and it becomes violet. Buttons,
+       focus rings, links, charts, and shadows all follow.
+       ---------------------------------------------------------------------- */
+    --hue-brand: 196;   /* harbor teal   */
+    --hue-accent: 42;   /* signal amber  */
+    --hue-good: 152;    /* starboard     */
+    --hue-warn: 74;     /* caution       */
+    --hue-bad: 24;      /* port light    */
+    --hue-neutral: 232; /* chart ink     */
+
+    --chroma-brand: .118;
+    --chroma-accent: .142;
+    --chroma-status: .132;
+    --chroma-neutral: .012; /* neutrals carry a trace of the ink hue */
+
+    /* --- Brand ramp -------------------------------------------------------- */
+    --brand-50:  oklch(97.4% calc(var(--chroma-brand) * .16) var(--hue-brand));
+    --brand-100: oklch(94.2% calc(var(--chroma-brand) * .30) var(--hue-brand));
+    --brand-200: oklch(88.6% calc(var(--chroma-brand) * .48) var(--hue-brand));
+    --brand-300: oklch(80.4% calc(var(--chroma-brand) * .70) var(--hue-brand));
+    --brand-400: oklch(70.2% calc(var(--chroma-brand) * .90) var(--hue-brand));
+    --brand-500: oklch(60.8% var(--chroma-brand) var(--hue-brand));
+    --brand-600: oklch(51.6% var(--chroma-brand) var(--hue-brand));
+    --brand-700: oklch(43.4% calc(var(--chroma-brand) * .92) var(--hue-brand));
+    --brand-800: oklch(35.6% calc(var(--chroma-brand) * .78) var(--hue-brand));
+    --brand-900: oklch(28.2% calc(var(--chroma-brand) * .62) var(--hue-brand));
+    --brand-950: oklch(20.4% calc(var(--chroma-brand) * .46) var(--hue-brand));
+
+    /* --- Neutral ramp ------------------------------------------------------ */
+    --ink-0:   oklch(100% 0 0);
+    --ink-25:  oklch(99.1% calc(var(--chroma-neutral) * .5) var(--hue-neutral));
+    --ink-50:  oklch(97.8% var(--chroma-neutral) var(--hue-neutral));
+    --ink-100: oklch(95.4% calc(var(--chroma-neutral) * 1.4) var(--hue-neutral));
+    --ink-200: oklch(91.2% calc(var(--chroma-neutral) * 1.8) var(--hue-neutral));
+    --ink-300: oklch(84.6% calc(var(--chroma-neutral) * 2.2) var(--hue-neutral));
+    --ink-400: oklch(70.8% calc(var(--chroma-neutral) * 2.6) var(--hue-neutral));
+    --ink-500: oklch(58.4% calc(var(--chroma-neutral) * 2.8) var(--hue-neutral));
+    --ink-600: oklch(47.6% calc(var(--chroma-neutral) * 2.8) var(--hue-neutral));
+    --ink-700: oklch(38.2% calc(var(--chroma-neutral) * 2.6) var(--hue-neutral));
+    --ink-800: oklch(29.4% calc(var(--chroma-neutral) * 2.4) var(--hue-neutral));
+    --ink-900: oklch(22.6% calc(var(--chroma-neutral) * 2.2) var(--hue-neutral));
+    --ink-950: oklch(16.2% calc(var(--chroma-neutral) * 2.0) var(--hue-neutral));
+    --ink-1000: oklch(11.4% calc(var(--chroma-neutral) * 1.8) var(--hue-neutral));
+
+    /* --- Status ------------------------------------------------------------ */
+    --good-100: oklch(94% calc(var(--chroma-status) * .3) var(--hue-good));
+    --good-500: oklch(62% var(--chroma-status) var(--hue-good));
+    --good-600: oklch(52% var(--chroma-status) var(--hue-good));
+    --good-700: oklch(44% var(--chroma-status) var(--hue-good));
+    --warn-100: oklch(95% calc(var(--chroma-status) * .32) var(--hue-warn));
+    --warn-500: oklch(76% var(--chroma-status) var(--hue-warn));
+    --warn-700: oklch(50% var(--chroma-status) var(--hue-warn));
+    --bad-100:  oklch(94.5% calc(var(--chroma-status) * .3) var(--hue-bad));
+    --bad-500:  oklch(58% calc(var(--chroma-status) * 1.25) var(--hue-bad));
+    --bad-600:  oklch(52% calc(var(--chroma-status) * 1.25) var(--hue-bad));
+    --bad-700:  oklch(44% calc(var(--chroma-status) * 1.1) var(--hue-bad));
+    --accent-100: oklch(95% calc(var(--chroma-accent) * .3) var(--hue-accent));
+    --accent-500: oklch(74% var(--chroma-accent) var(--hue-accent));
+    --accent-700: oklch(52% calc(var(--chroma-accent) * .9) var(--hue-accent));
+
+    /* --- Semantic surfaces (auto light/dark) -------------------------------- */
+    --bg:          light-dark(var(--ink-50),  var(--ink-1000));
+    --bg-sunken:   light-dark(var(--ink-100), oklch(8.6% .012 var(--hue-neutral)));
+    --surface:     light-dark(var(--ink-0),   var(--ink-950));
+    --surface-2:   light-dark(var(--ink-25),  var(--ink-900));
+    --surface-hover:light-dark(var(--ink-50), var(--ink-900));
+    --line:        light-dark(var(--ink-200), oklch(28% .016 var(--hue-neutral)));
+    --line-strong: light-dark(var(--ink-300), oklch(36% .018 var(--hue-neutral)));
+
+    --text:        light-dark(var(--ink-900), var(--ink-100));
+    --text-muted:  light-dark(var(--ink-600), var(--ink-400));
+    --text-faint:  light-dark(var(--ink-500), var(--ink-500));
+    /* --- Ink on a coloured surface ----------------------------------------
+       One per saturated surface. These are the static values: they are correct
+       for the shipped hues but they are guesses about any hue you set, which
+       is what the @supports block below fixes.
+       -------------------------------------------------------------------- */
+    --text-on-brand:  oklch(99% .01 var(--hue-brand));
+    --text-on-accent: oklch(24% .06 var(--hue-accent));
+    --text-on-good:   oklch(99% .01 var(--hue-good));
+    --text-on-warn:   oklch(24% .06 var(--hue-warn));
+    --text-on-bad:    oklch(99% .01 var(--hue-bad));
+
+    --brand:       light-dark(var(--brand-600), var(--brand-400));
+    --brand-hover: light-dark(var(--brand-700), var(--brand-300));
+    --brand-soft:  light-dark(var(--brand-50),  oklch(26% .05 var(--hue-brand)));
+    --brand-soft-text: light-dark(var(--brand-800), var(--brand-200));
+
+    --focus: light-dark(var(--brand-500), var(--brand-300));
+
+    /* --- Space: 4px base, plus fluid steps for page rhythm ------------------ */
+    --space-0: 0;
+    --space-px: 1px;
+    --space-1: .25rem;
+    --space-2: .5rem;
+    --space-3: .75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+    --space-16: 4rem;
+    --space-20: 5rem;
+    --space-24: 6rem;
+    --space-section: clamp(2.5rem, 1.4rem + 5.5vw, 6rem);
+    --space-gutter: clamp(1rem, .55rem + 2.2vw, 2rem);
+
+    /* --- Radius: intentionally not one value ------------------------------- */
+    --r-xs: 4px;    /* chips, tags, kbd            */
+    --r-sm: 7px;    /* inputs, buttons             */
+    --r-md: 12px;   /* cards, menus                */
+    --r-lg: 18px;   /* sheets, modals, hero panels */
+    --r-full: 999px;
+
+    /* --- Elevation: tinted with the ink hue, never flat black -------------- */
+    --shadow-color: var(--hue-neutral);
+    --shadow-1: 0 1px 2px oklch(20% .03 var(--shadow-color) / .06),
+                0 1px 1px oklch(20% .03 var(--shadow-color) / .04);
+    --shadow-2: 0 2px 4px oklch(20% .03 var(--shadow-color) / .05),
+                0 4px 12px oklch(20% .03 var(--shadow-color) / .07);
+    --shadow-3: 0 4px 8px oklch(20% .03 var(--shadow-color) / .06),
+                0 12px 28px oklch(20% .03 var(--shadow-color) / .10);
+    --shadow-4: 0 8px 16px oklch(20% .03 var(--shadow-color) / .08),
+                0 24px 56px oklch(20% .03 var(--shadow-color) / .14);
+    --shadow-inset: inset 0 1px 0 oklch(100% 0 0 / .6);
+
+    /* A legible floor for text over a photo. Eased rather than a flat wash: a
+       50% black overlay dulls the whole image, while this only darkens where
+       the text actually sits. Shared by .g-scrim and .carousel-caption so the
+       two cannot drift apart. */
+    --scrim: linear-gradient(to top,
+             oklch(12% .02 var(--hue-neutral) / .82) 0%,
+             oklch(12% .02 var(--hue-neutral) / .62) 22%,
+             oklch(12% .02 var(--hue-neutral) / .28) 48%,
+             transparent 78%);
+
+    /* --- Type -------------------------------------------------------------- */
+    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
+                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
+                 Menlo, Consolas, monospace;
+    --font-display: var(--font-sans);
+
+    --text-2xs: .6875rem;
+    --text-xs:  .75rem;
+    --text-sm:  .8125rem;
+    --text-base: .9375rem;
+    --text-md:  1.0625rem;
+    --text-lg:  clamp(1.125rem, 1.06rem + .32vw, 1.3125rem);
+    --text-xl:  clamp(1.3125rem, 1.19rem + .62vw, 1.625rem);
+    --text-2xl: clamp(1.5625rem, 1.33rem + 1.16vw, 2.125rem);
+    --text-3xl: clamp(1.875rem, 1.44rem + 2.16vw, 2.875rem);
+    --text-4xl: clamp(2.25rem, 1.5rem + 3.75vw, 3.75rem);
+
+    --leading-tight: 1.12;
+    --leading-snug: 1.3;
+    --leading-normal: 1.55;
+    --leading-loose: 1.72;
+    --measure: 68ch;
+
+    /* --- Motion ------------------------------------------------------------ */
+    --ease-out: cubic-bezier(.22, 1, .36, 1);
+    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
+    --ease-spring: linear(0, .18 6%, .53 14%, .89 24%, 1.04 32%, 1.06 40%, 1);
+    --dur-1: 110ms;
+    --dur-2: 190ms;
+    --dur-3: 300ms;
+
+    /* --- Controls ---------------------------------------------------------- */
+    --tap: 44px;             /* minimum touch target, everywhere */
+    --control-h-sm: 34px;
+    --control-h: 42px;
+    --control-h-lg: 50px;
+    --ring: 0 0 0 3px light-dark(oklch(from var(--focus) l c h / .32),
+                                 oklch(from var(--focus) l c h / .42));
+
+    --z-sticky: 100;
+    --z-nav: 200;
+    --z-sheet: 300;
+    --z-modal: 400;
+    --z-toast: 500;
+  }
+
+  /* contrast-color() resolves against the colour as it actually computes, so
+     these follow --hue-brand and friends wherever they are dragged. It returns
+     only black or white and it aims at AA (4.5:1), which is why every surface
+     that carries text is kept out of the 55-65% lightness band -- see
+     --good-600 and --bad-600 above. Baseline Newly Available, so the static
+     values in :root stand in where it is missing. */
+  @supports (color: contrast-color(red)) {
+    :root {
+      --text-on-brand:  contrast-color(var(--brand-600));
+      --text-on-accent: contrast-color(var(--accent-500));
+      --text-on-good:   contrast-color(var(--good-600));
+      --text-on-warn:   contrast-color(var(--warn-500));
+      --text-on-bad:    contrast-color(var(--bad-600));
+    }
+  }
+
+  /* Explicit theme override beats the OS setting */
+  [data-theme="light"] { color-scheme: light; }
+  [data-theme="dark"]  { color-scheme: dark; }
+
+  /* Dark mode wants slightly less shadow and slightly more border */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --shadow-2: 0 2px 4px oklch(0% 0 0 / .3), 0 4px 12px oklch(0% 0 0 / .34);
+      --shadow-3: 0 4px 10px oklch(0% 0 0 / .34), 0 14px 30px oklch(0% 0 0 / .4);
+      --shadow-4: 0 10px 20px oklch(0% 0 0 / .4), 0 28px 60px oklch(0% 0 0 / .5);
+      --shadow-inset: inset 0 1px 0 oklch(100% 0 0 / .06);
+    }
+  }
+}

package/dist/layers/type.css

@@ -0,0 +1,114 @@
+/* ==========================================================================
+   Deck — 03 Type
+   ========================================================================== */
+
+@layer deck.type {
+
+  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
+    font-family: var(--font-display);
+    font-weight: 640;
+    line-height: var(--leading-tight);
+    letter-spacing: -.021em;
+    color: var(--text);
+  }
+
+  h1, .h1 { font-size: var(--text-3xl); letter-spacing: -.031em; }
+  h2, .h2 { font-size: var(--text-2xl); letter-spacing: -.026em; }
+  h3, .h3 { font-size: var(--text-xl); }
+  h4, .h4 { font-size: var(--text-lg); letter-spacing: -.014em; }
+  h5, .h5 { font-size: var(--text-md); letter-spacing: -.008em; font-weight: 620; }
+  h6, .h6 { font-size: var(--text-base); letter-spacing: 0; font-weight: 640; }
+
+  .display {
+    font-size: var(--text-4xl);
+    font-weight: 700;
+    line-height: 1.04;
+    letter-spacing: -.036em;
+  }
+
+  .lede {
+    font-size: var(--text-md);
+    line-height: var(--leading-loose);
+    color: var(--text-muted);
+    max-inline-size: var(--measure);
+  }
+
+  small { font-size: var(--text-sm); }
+
+  strong, b { font-weight: 640; }
+
+  a {
+    color: var(--brand);
+    text-decoration-thickness: 1px;
+    text-underline-offset: .18em;
+    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
+    transition: color var(--dur-1) var(--ease-out),
+                text-decoration-color var(--dur-1) var(--ease-out);
+  }
+  a:hover { color: var(--brand-hover); text-decoration-color: currentColor; }
+
+  .link-quiet { color: var(--text); text-decoration: none; }
+  .link-quiet:hover { color: var(--brand); text-decoration: underline; }
+
+  code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }
+
+  :not(pre) > code {
+    background: var(--surface-2);
+    border: 1px solid var(--line);
+    border-radius: var(--r-xs);
+    padding: .12em .38em;
+    color: light-dark(var(--brand-800), var(--brand-200));
+  }
+
+  pre {
+    background: var(--ink-950);
+    color: var(--ink-100);
+    padding: var(--space-4);
+    border-radius: var(--r-md);
+    overflow-x: auto;
+    line-height: 1.6;
+    font-size: var(--text-sm);
+    -webkit-overflow-scrolling: touch;
+  }
+  pre code { background: none; border: 0; padding: 0; color: inherit; }
+
+  kbd {
+    display: inline-block;
+    background: var(--surface);
+    border: 1px solid var(--line-strong);
+    border-block-end-width: 2px;
+    border-radius: var(--r-xs);
+    padding: .1em .42em;
+    font-size: var(--text-xs);
+    line-height: 1.5;
+    color: var(--text-muted);
+  }
+
+  blockquote {
+    border-inline-start: 3px solid var(--brand-300);
+    padding-inline-start: var(--space-4);
+    color: var(--text-muted);
+    font-size: var(--text-md);
+    line-height: var(--leading-loose);
+  }
+
+  mark {
+    background: var(--accent-100);
+    color: light-dark(var(--ink-900), var(--ink-900));
+    padding: .05em .2em;
+    border-radius: var(--r-xs);
+  }
+
+  abbr[title] { text-decoration: underline dotted; cursor: help; }
+
+  /* Prose: for anything that came out of a WYSIWYG or markdown */
+  .prose { max-inline-size: var(--measure); }
+  .prose > * + * { margin-block-start: var(--space-4); }
+  .prose > * + :is(h2, h3, h4) { margin-block-start: var(--space-8); }
+  .prose :is(ul, ol) { padding-inline-start: var(--space-6); display: grid; gap: var(--space-2); }
+  .prose ul { list-style: disc; }
+  .prose ol { list-style: decimal; }
+  .prose li::marker { color: var(--text-faint); }
+  .prose img { border-radius: var(--r-md); }
+  .prose hr { margin-block: var(--space-8); }
+}

package/dist/layers/utilities.css

@@ -0,0 +1,241 @@
+/* ==========================================================================
+   Deck — 09 Utilities
+   A short list on purpose. Utilities are for the last 10 percent of a layout,
+   not for rebuilding a button out of fourteen class names.
+   ========================================================================== */
+
+@layer deck.utilities {
+
+  /* --- Display ------------------------------------------------------------ */
+  .hidden { display: none; }
+  .block { display: block; }
+  .inline-block { display: inline-block; }
+  .flex { display: flex; }
+  .inline-flex { display: inline-flex; }
+  .contents { display: contents; }
+
+  /* --- Flex and grid ------------------------------------------------------ */
+  .flex-row { flex-direction: row; }
+  .flex-col { flex-direction: column; }
+  .wrap { flex-wrap: wrap; }
+  .nowrap { flex-wrap: nowrap; white-space: nowrap; }
+  .items-start { align-items: flex-start; }
+  .items-center { align-items: center; }
+  .items-end { align-items: flex-end; }
+  .items-stretch { align-items: stretch; }
+  .items-baseline { align-items: baseline; }
+  .justify-start { justify-content: flex-start; }
+  .justify-center { justify-content: center; }
+  .justify-end { justify-content: flex-end; }
+  .justify-between { justify-content: space-between; }
+  .place-center { place-items: center; }
+  .grow { flex: 1 1 auto; min-inline-size: 0; }
+  .shrink-0 { flex: 0 0 auto; }
+  /* Pushes this element and everything after it to the far end of a flex
+     row. The one-class replacement for a spacer div. */
+  .push { margin-inline-start: auto; }
+
+  .gap-0 { gap: 0; }
+  .gap-1 { gap: var(--space-1); }
+  .gap-2 { gap: var(--space-2); }
+  .gap-3 { gap: var(--space-3); }
+  .gap-4 { gap: var(--space-4); }
+  .gap-6 { gap: var(--space-6); }
+  .gap-8 { gap: var(--space-8); }
+
+  /* --- Spacing ------------------------------------------------------------ */
+  /* The scale is 0 1 2 3 4 6 8, declared in 04-layout.css. Every family below
+     implements all seven, so a step that exists anywhere exists everywhere. */
+  .p-0 { padding: 0; }                       .p-1 { padding: var(--space-1); }
+  .p-2 { padding: var(--space-2); }          .p-3 { padding: var(--space-3); }
+  .p-4 { padding: var(--space-4); }          .p-6 { padding: var(--space-6); }
+  .p-8 { padding: var(--space-8); }
+
+  .px-0 { padding-inline: 0; }               .px-1 { padding-inline: var(--space-1); }
+  .px-2 { padding-inline: var(--space-2); }  .px-3 { padding-inline: var(--space-3); }
+  .px-4 { padding-inline: var(--space-4); }  .px-6 { padding-inline: var(--space-6); }
+  .px-8 { padding-inline: var(--space-8); }
+
+  .py-0 { padding-block: 0; }                .py-1 { padding-block: var(--space-1); }
+  .py-2 { padding-block: var(--space-2); }   .py-3 { padding-block: var(--space-3); }
+  .py-4 { padding-block: var(--space-4); }   .py-6 { padding-block: var(--space-6); }
+  .py-8 { padding-block: var(--space-8); }
+
+  .m-0 { margin: 0; }
+  .mt-0 { margin-block-start: 0; }              .mt-1 { margin-block-start: var(--space-1); }
+  .mt-2 { margin-block-start: var(--space-2); } .mt-3 { margin-block-start: var(--space-3); }
+  .mt-4 { margin-block-start: var(--space-4); } .mt-6 { margin-block-start: var(--space-6); }
+  .mt-8 { margin-block-start: var(--space-8); }
+  .mb-0 { margin-block-end: 0; }                .mb-1 { margin-block-end: var(--space-1); }
+  .mb-2 { margin-block-end: var(--space-2); }   .mb-3 { margin-block-end: var(--space-3); }
+  .mb-4 { margin-block-end: var(--space-4); }   .mb-6 { margin-block-end: var(--space-6); }
+  .mb-8 { margin-block-end: var(--space-8); }
+  .mx-auto { margin-inline: auto; }
+
+  /* --- Sizing ------------------------------------------------------------- */
+  .w-full { inline-size: 100%; }
+  .w-auto { inline-size: auto; }
+  .h-full { block-size: 100%; }
+  .min-h-screen { min-block-size: 100dvh; }
+  .max-w-prose { max-inline-size: var(--measure); }
+  .max-w-sm { max-inline-size: 24rem; }
+  .max-w-md { max-inline-size: 34rem; }
+  .max-w-lg { max-inline-size: 48rem; }
+  .square { aspect-ratio: 1; }
+
+  /* --- Type --------------------------------------------------------------- */
+  .text-2xs { font-size: var(--text-2xs); }
+  .text-xs { font-size: var(--text-xs); }
+  /* One step down the type scale, for secondary text and dense rows. */
+  .text-sm { font-size: var(--text-sm); }
+  .text-base { font-size: var(--text-base); }
+  .text-md { font-size: var(--text-md); }
+  .text-lg { font-size: var(--text-lg); }
+  .text-xl { font-size: var(--text-xl); }
+  .text-2xl { font-size: var(--text-2xl); }
+
+  .fw-normal { font-weight: 400; }
+  .fw-medium { font-weight: 540; }
+  /* Semibold. The weight for a label or a name that needs to lead without
+     becoming a heading. */
+  .fw-semi { font-weight: 620; }
+  .fw-bold { font-weight: 700; }
+
+  .text-start { text-align: start; }
+  .text-center { text-align: center; }
+  .text-end { text-align: end; }
+
+  /* Secondary text colour. Still meets contrast against every surface Deck
+     defines, so it is safe for body copy rather than decoration only. */
+  .text-muted { color: var(--text-muted); }
+  .text-faint { color: var(--text-faint); }
+  .text-brand { color: var(--brand); }
+  .text-good { color: var(--good-700); }
+  .text-warn { color: var(--warn-700); }
+  .text-bad { color: var(--bad-700); }
+  .text-inherit { color: inherit; }
+
+  /* Tabular figures, so numbers line up in a column and do not jitter when
+     they change. */
+  .nums { font-variant-numeric: tabular-nums; }
+  .mono { font-family: var(--font-mono); }
+  .uppercase { text-transform: uppercase; letter-spacing: .04em; }
+  .capitalize { text-transform: capitalize; }
+  .no-underline { text-decoration: none; }
+
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-inline-size: 0;
+  }
+  .clamp-2, .clamp-3 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
+  .clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
+
+  /* --- Surfaces ----------------------------------------------------------- */
+  .bg-surface { background: var(--surface); }
+  .bg-sunken { background: var(--bg-sunken); }
+  .bg-brand { background: var(--brand-600); color: var(--text-on-brand); }
+  .bg-soft { background: var(--brand-soft); color: var(--brand-soft-text); }
+  .bg-none { background: none; }
+
+  .border { border: 1px solid var(--line); }
+  .border-t { border-block-start: 1px solid var(--line); }
+  .border-b { border-block-end: 1px solid var(--line); }
+  .border-brand { border-color: var(--brand-400); }
+  .border-0 { border: 0; }
+
+  .r-xs { border-radius: var(--r-xs); }
+  .r-sm { border-radius: var(--r-sm); }
+  .r-md { border-radius: var(--r-md); }
+  .r-lg { border-radius: var(--r-lg); }
+  .r-full { border-radius: var(--r-full); }
+
+  .shadow-0 { box-shadow: none; }
+  .shadow-1 { box-shadow: var(--shadow-1); }
+  .shadow-2 { box-shadow: var(--shadow-2); }
+  .shadow-3 { box-shadow: var(--shadow-3); }
+  .shadow-4 { box-shadow: var(--shadow-4); }
+
+  /* --- Position and overflow ---------------------------------------------- */
+  .relative { position: relative; }
+  .absolute { position: absolute; }
+  .fixed { position: fixed; }
+  .sticky { position: sticky; }
+  .inset-0 { inset: 0; }
+  .z-1 { z-index: 1; }
+  .overflow-hidden { overflow: hidden; }
+  .overflow-auto { overflow: auto; }
+  .overflow-clip { overflow: clip; }
+
+  .opacity-60 { opacity: .6; }
+  .pointer-none { pointer-events: none; }
+  .no-select { user-select: none; }
+  .cursor-pointer { cursor: pointer; }
+
+  /* --- Accessibility ------------------------------------------------------ */
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  .skip-link {
+    position: absolute;
+    inset-block-start: -100%;
+    inset-inline-start: var(--space-4);
+    z-index: var(--z-toast);
+    background: var(--brand-600);
+    color: var(--text-on-brand);
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--r-sm);
+  }
+  .skip-link:focus { inset-block-start: var(--space-4); }
+
+  /* --- Responsive variants (mobile first: these turn ON at the breakpoint) - */
+  @media (min-width: 40rem) {
+    .sm\:hidden { display: none; }
+    .sm\:block { display: block; }
+    .sm\:flex { display: flex; }
+    .sm\:row { flex-direction: row; }
+    .sm\:w-auto { inline-size: auto; }
+    .sm\:text-start { text-align: start; }
+  }
+  @media (min-width: 48rem) {
+    .md\:hidden { display: none; }
+    .md\:block { display: block; }
+    .md\:flex { display: flex; }
+    .md\:grid-d { display: grid; }
+    .md\:row { flex-direction: row; }
+    .md\:col { flex-direction: column; }
+    .md\:items-center { align-items: center; }
+    .md\:justify-between { justify-content: space-between; }
+    .md\:w-auto { inline-size: auto; }
+    .md\:text-center { text-align: center; }
+    .md\:p-8 { padding: var(--space-8); }
+    .md\:gap-6 { gap: var(--space-6); }
+  }
+  @media (min-width: 64rem) {
+    .lg\:hidden { display: none; }
+    .lg\:block { display: block; }
+    .lg\:flex { display: flex; }
+    .lg\:grid-d { display: grid; }
+    .lg\:row { flex-direction: row; }
+    .lg\:gap-8 { gap: var(--space-8); }
+  }
+
+  /* Show only to one input type */
+  @media (pointer: fine) { .touch-only { display: none; } }
+  @media (pointer: coarse) { .mouse-only { display: none; } }
+  @media print { .no-print { display: none !important; } }
+}

package/dist/sizes.json

@@ -0,0 +1,52 @@
+{
+  "version": "0.1.0",
+  "note": "Generated by build.mjs. Do not edit. Brotli is quality 11 with a size hint.",
+  "files": {
+    "deck.min.css": {
+      "raw": 172846,
+      "gzip": 32710,
+      "brotli": 26693
+    },
+    "deck-icons.svg": {
+      "raw": 110032,
+      "gzip": 33559,
+      "brotli": 27148
+    },
+    "deck.min.js": {
+      "raw": 32556,
+      "gzip": 10003,
+      "brotli": 8897
+    },
+    "deck-extras.min.js": {
+      "raw": 15854,
+      "gzip": 6497,
+      "brotli": 5692
+    },
+    "deck-adapters.min.js": {
+      "raw": 11294,
+      "gzip": 4518,
+      "brotli": 3974
+    },
+    "deck.bundle.min.js": {
+      "raw": 59728,
+      "gzip": 19515,
+      "brotli": 17297
+    }
+  },
+  "totals": {
+    "core": {
+      "gzip": 76272,
+      "brotli": 62738
+    },
+    "bundle": {
+      "gzip": 85784,
+      "brotli": 71138
+    }
+  },
+  "sample": {
+    "icons": 12,
+    "raw": 19419,
+    "gzip": 6927,
+    "brotli": 5705
+  }
+}