@echodial/deck 0.1.0

package/dist/layers/layout.css

@@ -0,0 +1,235 @@
+/* ==========================================================================
+   Deck — 04 Layout
+   Composable primitives. You lay out with about eight classes, not forty.
+   ========================================================================== */
+
+@layer deck.layout {
+
+  /* Centres content and caps it at --container, with the responsive page
+     gutter already applied. Nest one inside another and the inner one adds
+     a second gutter, so use .container-full instead. */
+  .container {
+    inline-size: 100%;
+    max-inline-size: var(--container, 76rem);
+    margin-inline: auto;
+    padding-inline: var(--space-gutter);
+  }
+  /* A single column of prose: about 70 characters at the body size,
+     which is inside the maximum line length WCAG recommends. */
+  .container-sm { --container: 40rem; }
+  /* An article with a rail, or a form. */
+  .container-md { --container: 56rem; }
+  /* The same 76rem as the bare .container, named. Use it when a page
+     should say which width it means rather than rely on the default. */
+  .container-lg { --container: 76rem; }
+  /* A wide dashboard or a data grid. */
+  .container-xl { --container: 90rem; }
+  /* Keeps the page gutter, drops the max width. This is what to nest
+     inside another container — a second .container would apply the
+     gutter twice. */
+  .container-full { --container: none; }
+
+  /* --- The spacing scale ----------------------------------------------------
+     Every spacing utility in Deck uses the same seven steps:
+
+       0    1        2       3       4      6        8
+       0    .25rem   .5rem   .75rem  1rem   1.5rem   2rem
+
+     .stack, .cluster, .gap-*, the padding utilities and the margin utilities
+     all implement exactly these, so a step that exists in one family exists in
+     all of them. There is deliberately no 5: at 1.25rem it is indistinguishable
+     from 4 and 6 in a real layout, and a half step between two neighbours is
+     the step people reach for when they are not sure, which is how .stack-5
+     came to be used in the demo when no such class existed.
+
+     The --space-* tokens keep their full range (0 through 24). Tokens are the
+     palette a component composes from; the utilities are the smaller set you
+     author markup with. Those are different jobs, so they are different sizes.
+     ---------------------------------------------------------------------- */
+
+  /* Vertical rhythm without margin collapse surprises */
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap, var(--space-4));
+  }
+  /* No gap. For two elements that must touch. */
+  .stack-0 { --gap: 0; }
+  /* A hairline. A label and the control it names, when the two read as
+     one thing. */
+  .stack-1 { --gap: var(--space-1); }
+  /* Tight vertical rhythm, for a label and its control or a title and its
+     subtitle. */
+  .stack-2 { --gap: var(--space-2); }
+  /* The default rhythm for related blocks inside a card or a section. */
+  .stack-3 { --gap: var(--space-3); }
+  /* The default, named. Same as .stack with no step class. */
+  .stack-4 { --gap: var(--space-4); }
+  /* Loose vertical rhythm, for separating whole sections of a page. */
+  .stack-6 { --gap: var(--space-6); }
+  /* Very loose, for whole sections of a page where .section is too much. */
+  .stack-8 { --gap: var(--space-8); }
+
+  /* Horizontal group that wraps instead of overflowing on a phone */
+  .cluster {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--gap, var(--space-3));
+  }
+  /* Kept as the readable name for step 2, which is what most clusters want */
+  .cluster-tight { --gap: var(--space-2); }
+  /* Packs the row against the end edge, which follows the writing
+     direction rather than always being the right. */
+  .cluster-end { justify-content: flex-end; }
+  /* Centres the row. */
+  .cluster-center { justify-content: center; }
+  /* First item to one end, last to the other. Beware of combining it
+     with wrapping: each line is justified separately, so a lone item on
+     the second line jumps to the far end and looks stranded. .bar with
+     .push is the predictable version. */
+  .cluster-between { justify-content: space-between; }
+
+  /* Push the last child away from the rest */
+  .bar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+  .bar > .push { margin-inline-start: auto; }
+
+  /* Auto-fitting grid: no breakpoints needed, it responds to its own width */
+  .grid {
+    display: grid;
+    gap: var(--gap, var(--space-4));
+    grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 17rem), 100%), 1fr));
+  }
+  /* Two-ish columns: an auto-fit grid with a 24rem floor. Identical in
+     effect to .grid-wide, but it writes grid-template-columns directly
+     rather than setting --min, so --min cannot adjust it afterwards.
+     Prefer .grid-wide. */
+  .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
+  /* Narrows the auto-fit column floor to 12rem, so the grid packs more
+     columns in before it wraps. */
+  .grid-tight { --min: 12rem; }
+  /* Widens the auto-fit column floor to 24rem, so the grid packs fewer,
+     wider columns before it wraps. For cards with a paragraph in them. */
+  .grid-wide { --min: 24rem; }
+  /* Exactly two equal columns at every width, including a phone. Only
+     for a count that is part of the meaning — a 2x2 comparison. It does
+     not reflow, so it does not satisfy the reflow criterion on its own. */
+  .grid-fixed-2 { grid-template-columns: 1fr 1fr; }
+  /* Exactly three equal columns at every width. See .grid-fixed-2. */
+  .grid-fixed-3 { grid-template-columns: repeat(3, 1fr); }
+  /* Exactly four equal columns at every width. On a phone that is four
+     70px columns; reach for .grid with a --min instead. */
+  .grid-fixed-4 { grid-template-columns: repeat(4, 1fr); }
+
+  /* Content + rail. Collapses to one column below the width it needs. */
+  .split {
+    display: grid;
+    gap: var(--gap, var(--space-6));
+    grid-template-columns: 1fr;
+  }
+  /* A grid item's min-inline-size is auto, so a child that cannot shrink — a
+     form row, a wide table, a long code block — makes the whole column wider
+     than its track and pushes the page sideways. This is the single most
+     common grid bug there is; the two-column form in the demo overflowed a
+     375px viewport by 16px until this line existed. */
+  .split > * { min-inline-size: 0; }
+  @media (min-width: 64rem) {
+    .split { grid-template-columns: minmax(0, 1fr) var(--rail, 20rem); }
+    /* Puts the rail on the starting edge without touching markup order, so
+       the main column stays first for a screen reader and for the keyboard.
+       Use it for supplementary navigation; not for a rail holding the first
+       thing a reader needs. */
+    .split-rail-start { grid-template-columns: var(--rail, 20rem) minmax(0, 1fr); }
+  }
+
+  /* Center a thing with a max width and no side effects */
+  .center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: var(--gap, var(--space-4));
+  }
+
+  /* Vertical page rhythm: a block of --space-section, which is a clamp that
+     grows with the viewport. For spacing inside a component reach for
+     .stack instead. */
+  .section { padding-block: var(--space-section); }
+
+  /* Everything stays on one line and scrolls sideways — cards, chips, dates */
+  .scroller {
+    display: flex;
+    gap: var(--gap, var(--space-3));
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
+    padding-block-end: var(--space-2);
+    margin-inline: calc(var(--space-gutter) * -1);
+    padding-inline: var(--space-gutter);
+  }
+  .scroller::-webkit-scrollbar { display: none; }
+  .scroller > * { scroll-snap-align: start; flex: 0 0 auto; }
+
+  /* A sticky header. Where scroll-state container queries are supported
+     the blur and shadow live on an ::after that is transparent until the
+     header actually sticks, so in flow it looks like part of the page.
+     The treatment rides on a pseudo-element because a scroll-state
+     container can style its descendants but not itself. */
+  .sticky-top {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--z-sticky);
+    background: color-mix(in oklab, var(--bg) 82%, transparent);
+    backdrop-filter: saturate(1.6) blur(12px);
+    -webkit-backdrop-filter: saturate(1.6) blur(12px);
+  }
+
+  /* Sitting in flow it needs no treatment at all; it earns the blur and the
+     shadow at the moment it actually sticks. A scroll-state container cannot
+     style itself, so the treatment rides on ::after, which is inside it. */
+  @supports (container-type: scroll-state) {
+    .sticky-top {
+      container-type: scroll-state;
+      background: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+    .sticky-top::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      opacity: 0;
+      background: color-mix(in oklab, var(--bg) 82%, transparent);
+      backdrop-filter: saturate(1.6) blur(12px);
+      -webkit-backdrop-filter: saturate(1.6) blur(12px);
+      transition: opacity var(--dur-2) var(--ease-out);
+    }
+    @container scroll-state(stuck: block-start) {
+      .sticky-top::after { opacity: 1; box-shadow: var(--shadow-2); }
+    }
+  }
+
+  /* Header, content, footer in a 100dvh grid whose middle row takes the
+     remaining height — the sticky footer, without the hacks. dvh rather
+     than vh so it tracks a phone browser hiding its chrome. It expects
+     exactly three children. */
+  .app-shell {
+    display: grid;
+    min-block-size: 100dvh;
+    grid-template-rows: auto 1fr auto;
+  }
+
+  /* Aspect boxes for media */
+  .ratio-16x9 { aspect-ratio: 16 / 9; object-fit: cover; inline-size: 100%; }
+  .ratio-4x3  { aspect-ratio: 4 / 3;  object-fit: cover; inline-size: 100%; }
+  .ratio-1x1  { aspect-ratio: 1;      object-fit: cover; inline-size: 100%; }
+
+  /* Container queries: components respond to their slot, not the viewport */
+  .cq { container-type: inline-size; }
+}

package/dist/layers/logical.css

@@ -0,0 +1,226 @@
+/* ==========================================================================
+   Deck — 19 Logical properties and direction
+   The framework is written in logical properties end to end: inline-size,
+   block-size, inset-inline-start, padding-block, margin-inline, border-start-
+   start-radius. That means Deck already lays out correctly in Arabic, Hebrew,
+   Urdu, and Farsi with nothing but dir="rtl" on the html element.
+
+   What logical properties cannot fix by themselves is content: icons that
+   point somewhere, characters that are inherently one-directional, and the few
+   places where a physical direction is genuinely meant. That is what this file
+   handles.
+   ========================================================================== */
+
+@layer deck.utilities {
+
+  /* --- Logical spacing utilities -------------------------------------------
+     The short physical-looking names in the utility layer (.mt-4, .px-3) are
+     already logical underneath — .mt-4 sets margin-block-start. These are the
+     explicitly named versions for when the distinction matters in review.
+     ---------------------------------------------------------------------- */
+  .mis-auto { margin-inline-start: auto; }
+  .mie-auto { margin-inline-end: auto; }
+
+  /* Same seven steps as every other spacing family: 0 1 2 3 4 6 8. */
+  .mis-0 { margin-inline-start: 0; }
+  .mis-1 { margin-inline-start: var(--space-1); }
+  .mis-2 { margin-inline-start: var(--space-2); }
+  .mis-3 { margin-inline-start: var(--space-3); }
+  .mis-4 { margin-inline-start: var(--space-4); }
+  .mis-6 { margin-inline-start: var(--space-6); }
+  .mis-8 { margin-inline-start: var(--space-8); }
+  .mie-0 { margin-inline-end: 0; }
+  .mie-1 { margin-inline-end: var(--space-1); }
+  .mie-2 { margin-inline-end: var(--space-2); }
+  .mie-3 { margin-inline-end: var(--space-3); }
+  .mie-4 { margin-inline-end: var(--space-4); }
+  .mie-6 { margin-inline-end: var(--space-6); }
+  .mie-8 { margin-inline-end: var(--space-8); }
+
+
+  .pis-0 { padding-inline-start: 0; }
+  .pis-1 { padding-inline-start: var(--space-1); }
+  .pis-2 { padding-inline-start: var(--space-2); }
+  .pis-3 { padding-inline-start: var(--space-3); }
+  .pis-4 { padding-inline-start: var(--space-4); }
+  .pis-6 { padding-inline-start: var(--space-6); }
+  .pis-8 { padding-inline-start: var(--space-8); }
+  .pie-0 { padding-inline-end: 0; }
+  .pie-1 { padding-inline-end: var(--space-1); }
+  .pie-2 { padding-inline-end: var(--space-2); }
+  .pie-3 { padding-inline-end: var(--space-3); }
+  .pie-4 { padding-inline-end: var(--space-4); }
+  .pie-6 { padding-inline-end: var(--space-6); }
+  .pie-8 { padding-inline-end: var(--space-8); }
+
+  .pbs-0 { padding-block-start: 0; }
+  .pbs-1 { padding-block-start: var(--space-1); }
+  .pbs-2 { padding-block-start: var(--space-2); }
+  .pbs-3 { padding-block-start: var(--space-3); }
+  .pbs-4 { padding-block-start: var(--space-4); }
+  .pbs-6 { padding-block-start: var(--space-6); }
+  .pbs-8 { padding-block-start: var(--space-8); }
+  .pbe-0 { padding-block-end: 0; }
+  .pbe-1 { padding-block-end: var(--space-1); }
+  .pbe-2 { padding-block-end: var(--space-2); }
+  .pbe-3 { padding-block-end: var(--space-3); }
+  .pbe-4 { padding-block-end: var(--space-4); }
+  .pbe-6 { padding-block-end: var(--space-6); }
+  .pbe-8 { padding-block-end: var(--space-8); }
+
+  .bis { border-inline-start: 1px solid var(--line); }
+  .bie { border-inline-end: 1px solid var(--line); }
+
+  .min-is-0 { min-inline-size: 0; }
+
+  .inset-is-0 { inset-inline-start: 0; }
+  .inset-ie-0 { inset-inline-end: 0; }
+  .inset-bs-0 { inset-block-start: 0; }
+  .inset-be-0 { inset-block-end: 0; }
+
+  /* Radius on the leading and trailing edges, not left and right */
+  .r-start { border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); }
+  .r-end { border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); }
+
+  /* --- Writing mode --------------------------------------------------------
+     Vertical text for a table header that would otherwise need a 40 character
+     column, or for a sidebar label.
+     ---------------------------------------------------------------------- */
+  .writing-vertical {
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+  }
+  .writing-vertical-lr { writing-mode: vertical-lr; }
+  .writing-upright { text-orientation: upright; letter-spacing: .1em; }
+  .writing-sideways { writing-mode: sideways-lr; }
+  .writing-normal { writing-mode: horizontal-tb; }
+
+  /* A rotated column header that still measures and aligns correctly */
+  .th-vertical {
+    writing-mode: vertical-rl;
+    rotate: 180deg;
+    white-space: nowrap;
+    block-size: 8rem;
+    padding-block: var(--space-3);
+    text-align: start;
+  }
+
+  /* --- Explicit direction --------------------------------------------------
+     Sometimes a value has one true direction regardless of the page. An order
+     number, an account number, a URL, and a code block read left to right even
+     on an Arabic page. Isolate them so they do not scramble the text around
+     them.
+     ---------------------------------------------------------------------- */
+  .dir-ltr { direction: ltr; unicode-bidi: isolate; }
+  .dir-rtl { direction: rtl; unicode-bidi: isolate; }
+  .bidi-isolate { unicode-bidi: isolate; }
+  .bidi-plaintext { unicode-bidi: plaintext; }
+
+  /* Identifiers read left to right in every language: an order number, a commit
+     hash, an API key, a part code. Keep them LTR wherever they appear, and keep
+     them from scrambling the text around them. */
+  .mono, code, kbd, samp, .nums { unicode-bidi: isolate; }
+  .code-ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }
+}
+
+@layer deck.rtl {
+
+  /* --- Icons that point ----------------------------------------------------
+     An arrow, a chevron, a reply glyph, and a back button all mean "the
+     direction of reading". They must mirror. A checkmark, a clock, a wrench,
+     and a logo must not. Mark the ones that point.
+     ---------------------------------------------------------------------- */
+  [dir="rtl"] .mirror-rtl { scale: -1 1; }
+
+  /* The pointing icons in Deck's own sprite, mirrored automatically */
+  [dir="rtl"] :is(
+    .icon:has(use[href$="#chevron-left"]),
+    .icon:has(use[href$="#chevron-right"]),
+    .icon:has(use[href$="#arrow-left"]),
+    .icon:has(use[href$="#arrow-right"]),
+    .icon:has(use[href$="#arrow-up-right"]),
+    .icon:has(use[href$="#external"]),
+    .icon:has(use[href$="#log-out"]),
+    .icon:has(use[href$="#send"]),
+    .icon:has(use[href$="#trend-up"]),
+    .icon:has(use[href$="#trend-down"])
+  ) { scale: -1 1; }
+
+  /* Things that must never mirror, even inside a flipped ancestor */
+  [dir="rtl"] .no-flip { scale: 1 1; }
+
+  /* --- Direction-aware motion ---------------------------------------------
+     The entrance animations move toward the reader. In RTL the start edge is
+     on the right, so the keyframes flip too.
+     ---------------------------------------------------------------------- */
+  @media (prefers-reduced-motion: no-preference) {
+    [dir="rtl"] .enter-start { animation-name: dk-in-start-rtl; }
+    [dir="rtl"] .enter-end { animation-name: dk-in-end-rtl; }
+    @keyframes dk-in-start-rtl { from { opacity: 0; translate: calc(var(--travel) * 1.6) 0; } }
+    @keyframes dk-in-end-rtl { from { opacity: 0; translate: calc(var(--travel) * -1.6) 0; } }
+
+    [dir="rtl"] .icon-follow { transition: translate var(--dur-2) var(--ease-spring); }
+    [dir="rtl"] .btn:hover .icon-follow,
+    [dir="rtl"] .list-row:hover .icon-follow,
+    [dir="rtl"] .card-link:hover .icon-follow { translate: -3px 0; }
+
+    [dir="rtl"] .sweep { background-position: 100% 100%; }
+    [dir="rtl"] .marquee-track { animation-name: dk-marquee-rtl; }
+    @keyframes dk-marquee-rtl { to { translate: 100% 0; } }
+  }
+
+  /* --- Components that hard-code a direction ------------------------------- */
+
+  /* The select arrow is drawn with background-position from the right edge */
+  [dir="rtl"] .select {
+    background-position: 19px calc(50% + 1px), 14px calc(50% + 1px);
+    background-image: linear-gradient(135deg, transparent 50%, currentColor 50%),
+                      linear-gradient(45deg, currentColor 50%, transparent 50%);
+    padding-inline: var(--space-10) var(--space-3);
+  }
+
+  /* Search icon sits on the start edge, which is the right in RTL */
+  [dir="rtl"] .search > .icon { inset-inline-start: var(--space-3); }
+
+  /* Pinned grid columns and their shadows. Which edge is "start" is already
+     logical in both branches of 12-datagrid; only the offsets are physical,
+     so mirroring the four variables flips the scroll-state path and the
+     class-based fallback at the same time. */
+  [dir="rtl"] .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 0 0 -12px);
+    --dg-pin-clip-end: inset(0 -12px 0 0);
+  }
+
+  /* Switch knob travels toward the end edge */
+  [dir="rtl"] .switch input::after { translate: 0 0; }
+  [dir="rtl"] .switch input:checked::after { translate: -18px 0; }
+
+  /* Toast swipe and chart bars grow from the start edge, and transform-origin
+     has no logical form.
+
+     FINDINGS 59: .progress::-webkit-progress-value is also in this list and
+     does nothing. A pseudo-element is not valid inside :is(), and :is() parses
+     forgivingly -- the browser drops the invalid item and keeps the rest, so
+     this rule serialises as [dir="rtl"] :is(.chart-bar-fill, .toast-timer).
+     No warning, no failed rule, no visual difference. It is harmless here
+     because the progress fill animates inline-size rather than a transform,
+     and because the engine mirrors <progress> under dir="rtl" on its own.
+
+     Due for deletion. If a vendor pseudo-element ever does need a logical
+     flip, it has to be its own rule -- grouping it will fail silently. */
+  [dir="rtl"] :is(.chart-bar-fill, .progress::-webkit-progress-value, .toast-timer) {
+    transform-origin: right center;
+  }
+  [dir="rtl"] .scroll-progress { transform-origin: right center; }
+
+  /* Breadcrumb separator */
+  [dir="rtl"] .breadcrumb li + li::before { content: "\\\\"; }
+
+  /* Timeline rail and dots */
+  [dir="rtl"] .timeline-item:not(:last-child)::before { inset-inline-start: 10px; }
+
+  /* Mixed-direction pages: a block that is LTR inside an RTL document */
+  [dir="ltr"] [dir="rtl"], [dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; }
+}