@echodial/deck 0.1.0

package/src/24-media.css

@@ -0,0 +1,400 @@
+/* ==========================================================================
+   Deck — 24 Media and messaging
+   ========================================================================== */
+
+@layer deck.components {
+
+  /* --- Video ---------------------------------------------------------------
+     A responsive frame for a native video or an embed, plus styling for the
+     native controls where the browser allows it.
+     ---------------------------------------------------------------------- */
+  .video {
+    position: relative;
+    inline-size: 100%;
+    aspect-ratio: var(--ratio, 16 / 9);
+    background: var(--ink-950);
+    border-radius: var(--r-md);
+    overflow: clip;
+    isolation: isolate;
+  }
+  .video > :is(video, iframe, embed, object) {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    border: 0;
+    object-fit: contain;
+  }
+  .video-cover > video { object-fit: cover; }
+  .video-square { --ratio: 1; }
+  .video-portrait { --ratio: 9 / 16; }
+  .video-wide { --ratio: 21 / 9; }
+
+  .video video::-webkit-media-controls-panel { background-image: none; }
+  .video video { accent-color: var(--brand-500); }
+
+  /* Poster overlay with a play button, for a click-to-load embed */
+  .video-poster {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    border: 0;
+    padding: 0;
+    background: none;
+  }
+  .video-poster img { inline-size: 100%; block-size: 100%; object-fit: cover; }
+  .video-poster::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to top, oklch(12% .02 var(--hue-neutral) / .55), transparent 60%);
+  }
+  .video-play {
+    position: relative;
+    z-index: 1;
+    inline-size: 64px;
+    block-size: 64px;
+    border-radius: var(--r-full);
+    display: grid;
+    place-items: center;
+    background: color-mix(in oklab, var(--surface) 90%, transparent);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    color: var(--text);
+    box-shadow: var(--shadow-3);
+    transition: scale var(--dur-2) var(--ease-spring), background-color var(--dur-1) var(--ease-out);
+  }
+  .video-poster:hover .video-play { scale: 1.08; background: var(--surface); }
+  .video-meta {
+    position: absolute;
+    inset-block-end: var(--space-3);
+    inset-inline-start: var(--space-3);
+    z-index: 2;
+    display: flex;
+    gap: var(--space-2);
+    color: oklch(98% 0 0);
+    font-size: var(--text-xs);
+    text-shadow: 0 1px 3px oklch(0% 0 0 / .6);
+  }
+  .video-duration {
+    padding: 2px 6px;
+    border-radius: var(--r-xs);
+    background: oklch(12% 0 0 / .72);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* --- Masonry gallery -----------------------------------------------------
+     Two implementations. Columns is universal and good for photos where the
+     reading order down each column is fine. Grid masonry is the real thing
+     and preserves row order; it is used automatically where supported.
+     ---------------------------------------------------------------------- */
+  .masonry {
+    columns: var(--cols, 1);
+    column-gap: var(--gap, var(--space-3));
+  }
+  @media (min-width: 30rem) { .masonry { --cols: 2; } }
+  @media (min-width: 48rem) { .masonry { --cols: 3; } }
+  @media (min-width: 72rem) { .masonry { --cols: 4; } }
+  .masonry-2 { --cols: 2; }
+  .masonry-3 { --cols: 3; }
+
+  .masonry > * {
+    break-inside: avoid;
+    margin-block-end: var(--gap, var(--space-3));
+    border-radius: var(--r-md);
+    overflow: clip;
+    display: block;
+  }
+  .masonry img { inline-size: 100%; block-size: auto; display: block; }
+
+  @supports (grid-template-rows: masonry) {
+    .masonry {
+      columns: auto;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
+      grid-template-rows: masonry;
+      gap: var(--gap, var(--space-3));
+    }
+    .masonry > * { margin-block-end: 0; }
+  }
+
+  /* A simple gallery grid, when equal tiles are wanted instead */
+  .gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
+    gap: var(--space-2);
+  }
+  .gallery > * {
+    aspect-ratio: 1;
+    border-radius: var(--r-sm);
+    overflow: clip;
+    position: relative;
+  }
+  .gallery img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--dur-3) var(--ease-out); }
+  .gallery a:hover img { scale: 1.05; }
+  /* Let one tile take a bigger cell */
+  .gallery .span-2 { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
+  .gallery .span-wide { grid-column: span 2; aspect-ratio: 2; }
+
+  /* --- Lazy loading --------------------------------------------------------
+     A placeholder that holds the space so nothing shifts, and fades the image
+     in once it decodes. Set the aspect ratio on the frame and the layout is
+     stable before a byte arrives.
+     ---------------------------------------------------------------------- */
+  .lazy {
+    position: relative;
+    display: block;
+    background: var(--bg-sunken);
+    overflow: clip;
+    aspect-ratio: var(--ratio, 3 / 2);
+  }
+  .lazy > img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity var(--dur-3) var(--ease-out);
+  }
+  .lazy > img.is-loaded, .lazy > img[data-loaded] { opacity: 1; }
+  /* Two things about this shimmer are recorded in FINDINGS.md:
+
+     67: it runs the same dk-shimmer keyframes as .skeleton, for the same
+     purpose, but .lazy::after is NOT in 02-reset.css's reduced-motion
+     exemption list -- so it freezes where .skeleton slows to 2.4s. The
+     durations differ too (1.6s here, 1.4s there). One of the two is wrong.
+
+     66: deck-extras.js adds .is-error to the wrapper when an image fails to
+     load, and nothing in src/ styles that class. So the shimmer carries on
+     forever and a broken image is indistinguishable from a loading one. */
+  .lazy::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(100deg, transparent 20%,
+      color-mix(in oklab, var(--ink-300) 40%, transparent) 45%, transparent 70%);
+    background-size: 250% 100%;
+    background-repeat: no-repeat;
+    animation: dk-shimmer 1.6s var(--ease-in-out) infinite;
+    pointer-events: none;
+  }
+  .lazy:has(img.is-loaded)::after, .lazy:has(img[data-loaded])::after { display: none; }
+
+  /* A blurred low-res preview underneath, if you have one */
+  .lazy-blur { background-size: cover; background-position: center; }
+  .lazy-blur::before {
+    content: "";
+    position: absolute;
+    inset: -8px;
+    background: inherit;
+    filter: blur(14px);
+    transition: opacity var(--dur-3) var(--ease-out);
+  }
+  .lazy-blur:has(img.is-loaded)::before { opacity: 0; }
+
+  /* Generic content placeholder while a region streams in */
+  .lazy-block {
+    display: grid;
+    place-items: center;
+    min-block-size: 8rem;
+    border: 1px dashed var(--line);
+    border-radius: var(--r-md);
+    color: var(--text-faint);
+    gap: var(--space-2);
+  }
+
+  /* --- Chat bubbles --------------------------------------------------------
+     Conversation view. Consecutive messages from one side group together and
+     only the last one in a run gets the tail.
+     ---------------------------------------------------------------------- */
+  .chat {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-4);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  /* A centred date pill between days. Styling, not structure — a screen
+     reader hears ordinary text. */
+  .chat-day {
+    align-self: center;
+    margin-block: var(--space-4) var(--space-2);
+    padding: var(--space-1) var(--space-3);
+    border-radius: var(--r-full);
+    background: var(--surface-2);
+    color: var(--text-faint);
+    font-size: var(--text-xs);
+    font-weight: 560;
+  }
+
+  /* One message row. .msg-out flips it to the other edge and reverses the row
+     so the avatar swaps sides. The incoming/outgoing distinction is position
+     and colour only, so name the sender in text for anyone not seeing it. */
+  .msg {
+    display: flex;
+    gap: var(--space-2);
+    align-items: flex-end;
+    max-inline-size: min(80%, 34rem);
+    align-self: flex-start;
+  }
+  .msg-out { align-self: flex-end; flex-direction: row-reverse; }
+
+  /* The message body. Its corner radii are logical, which is what lets the
+     grouping flatten the correct side in either writing direction. */
+  .bubble {
+    position: relative;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--r-md);
+    background: var(--surface-2);
+    border: 1px solid var(--line);
+    font-size: var(--text-sm);
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+    border-end-start-radius: var(--r-xs);
+  }
+  .msg-out .bubble {
+    background: var(--brand-600);
+    color: var(--text-on-brand);
+    border-color: transparent;
+    border-end-start-radius: var(--r-md);
+    border-end-end-radius: var(--r-xs);
+  }
+  /* Grouping: only the last bubble of a run keeps its tail */
+  .msg:not(:last-of-type) + .msg .bubble { border-start-start-radius: var(--r-xs); }
+  .msg-out:not(:last-of-type) + .msg-out .bubble { border-start-end-radius: var(--r-xs); }
+
+  .bubble-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    margin-block-start: 2px;
+    font-size: var(--text-2xs);
+    opacity: .7;
+    justify-content: flex-end;
+    font-variant-numeric: tabular-nums;
+  }
+  .msg:not(.msg-out) .bubble-meta { justify-content: flex-start; }
+  .bubble-name { font-weight: 620; font-size: var(--text-xs); margin-block-end: 2px; color: var(--brand); }
+  .msg-out .bubble-name { color: inherit; }
+
+  .bubble-attachment {
+    margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1) var(--space-2);
+    border-start-start-radius: var(--r-md);
+    border-start-end-radius: var(--r-md);
+    overflow: clip;
+  }
+  .bubble-attachment img { inline-size: 100%; display: block; }
+
+  .msg .avatar { --size: 28px; align-self: flex-end; margin-block-end: 2px; }
+  .msg:not(:last-of-type) + .msg .avatar { visibility: hidden; }
+
+  .bubble-system {
+    align-self: center;
+    background: none;
+    border: 0;
+    color: var(--text-faint);
+    font-size: var(--text-xs);
+    text-align: center;
+    max-inline-size: 42ch;
+  }
+
+  /* Typing indicator */
+  .bubble-typing { display: inline-flex; gap: 4px; padding-block: var(--space-3); }
+  .bubble-typing > span {
+    inline-size: 6px;
+    block-size: 6px;
+    border-radius: var(--r-full);
+    background: var(--text-faint);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .bubble-typing > span { animation: dk-typing 1.2s var(--ease-in-out) infinite; }
+    .bubble-typing > span:nth-child(2) { animation-delay: .16s; }
+    .bubble-typing > span:nth-child(3) { animation-delay: .32s; }
+    @keyframes dk-typing {
+      0%, 60%, 100% { translate: 0 0; opacity: .45; }
+      30% { translate: 0 -4px; opacity: 1; }
+    }
+  }
+
+  /* Composer pinned to the bottom */
+  .chat-composer {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    padding-block-end: max(var(--space-3), env(safe-area-inset-bottom));
+    border-block-start: 1px solid var(--line);
+    background: var(--surface);
+  }
+  .chat-composer .textarea {
+    min-block-size: var(--control-h);
+    max-block-size: 8rem;
+    field-sizing: content;
+    border-radius: var(--r-lg);
+    resize: none;
+  }
+
+  /* --- QR code -------------------------------------------------------------
+     deck.js renders the modules into this frame. Kept square, with a quiet
+     zone, so it stays scannable at any size.
+     ---------------------------------------------------------------------- */
+  .qr {
+    display: inline-grid;
+    place-items: center;
+    padding: var(--qr-quiet, 12px);
+    background: var(--qr-bg, #fff);
+    border-radius: var(--r-sm);
+    border: 1px solid var(--line);
+    inline-size: fit-content;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  .qr svg { display: block; inline-size: var(--qr-size, 160px); block-size: var(--qr-size, 160px); }
+  .qr svg rect { fill: var(--qr-fg, #000); shape-rendering: crispEdges; }
+  .qr-lg { --qr-size: 240px; }
+  .qr-sm { --qr-size: 104px; }
+  /* A logo punched out of the middle. Only safe at error correction Q or H. */
+  .qr-logo {
+    position: relative;
+  }
+  .qr-logo > .qr-logo-mark {
+    position: absolute;
+    inset: 50%;
+    translate: -50% -50%;
+    inline-size: 22%;
+    block-size: 22%;
+    display: grid;
+    place-items: center;
+    background: var(--qr-bg, #fff);
+    border-radius: var(--r-xs);
+    padding: 4px;
+  }
+  .qr-caption {
+    margin-block-start: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    text-align: center;
+    max-inline-size: var(--qr-size, 160px);
+    overflow-wrap: anywhere;
+  }
+}
+
+@layer deck.print {
+  @media print {
+    /* A QR code is often the whole point of printing the page */
+    .qr { border: 0; break-inside: avoid; }
+    .video, .chat-composer, .carousel-arrow, .carousel-dots,
+    .speed-dial, .drawer, .mega, .banner { display: none !important; }
+    .masonry { columns: 2; }
+    .chat { overflow: visible; max-block-size: none; }
+    .msg { break-inside: avoid; }
+    .bubble { border: 1px solid #bbb !important; background: #fff !important; color: #000 !important; }
+    .msg-out .bubble { background: #f2f2f2 !important; }
+    .lazy::after { display: none !important; }
+    .editor-toolbar, .editor-footer { display: none !important; }
+    .editor-content { max-block-size: none !important; overflow: visible !important; }
+  }
+}

package/src/25-anchor.css

@@ -0,0 +1,192 @@
+/* ==========================================================================
+   Deck — 25 Anchor positioning
+   Every floating thing in Deck was positioned by hand with
+   getBoundingClientRect, which does not flip when it hits the bottom of the
+   window, does not shift back inside when it hits an edge, and does not
+   follow its anchor inside a scrolling container. Those are exactly the
+   problems Floating UI solves, and they are also exactly what CSS anchor
+   positioning solves natively — with no JavaScript, on the compositor, and
+   without a resize or scroll listener.
+
+   So Deck uses anchor positioning where the browser has it, and hands off to
+   Floating UI where it does not, if you have loaded it. Neither is required.
+   ========================================================================== */
+
+@layer deck.components {
+
+  @supports (anchor-name: --a) {
+
+    /* --- Naming an anchor --------------------------------------------------
+       Put .anchor on the trigger and --anchor on both trigger and panel.
+       Each pair needs a unique name, so generate it server-side in Keel:
+         <button class="anchor" style="--anchor:--menu-<?= $id ?>">
+       ---------------------------------------------------------------------- */
+    .anchor { anchor-name: var(--anchor); }
+
+    /* --- Menus and mega menus ---------------------------------------------- */
+    .menu, .mega, .datepicker {
+      position-anchor: var(--anchor);
+      position-area: block-end span-inline-end;
+      position-try-fallbacks:
+        block-end span-inline-start,
+        block-start span-inline-end,
+        block-start span-inline-start,
+        flip-block, flip-inline;
+      position-try-order: most-block-size;
+      margin-block: var(--space-2);
+      /* stay inside the viewport no matter which fallback wins */
+      max-block-size: calc(100dvh - var(--space-8));
+      max-inline-size: calc(100vw - var(--space-6));
+      inset: auto;
+    }
+    .menu { min-inline-size: max(12rem, anchor-size(inline)); }
+
+    .mega {
+      position-area: block-end;
+      justify-self: anchor-center;
+    }
+
+    /* A dropdown that should match the width of the field it belongs to */
+    .menu-match { inline-size: anchor-size(inline); min-inline-size: 0; }
+
+    /* --- Combobox list ------------------------------------------------------
+       The listbox is a sibling today, positioned with absolute. With anchor
+       positioning it can go in the top layer and escape overflow:hidden
+       ancestors, which is the bug that bites every combobox inside a modal.
+       ---------------------------------------------------------------------- */
+    .combo-control { anchor-name: var(--anchor, --combo); }
+    .combo-list {
+      position-anchor: var(--anchor, --combo);
+      position-area: block-end;
+      position-try-fallbacks: flip-block;
+      inline-size: anchor-size(inline);
+      inset: auto;
+      margin-block: 4px;
+    }
+    .combo-list.is-above { inset: auto; }
+
+    /* --- Tooltips -----------------------------------------------------------
+       The ::after tooltip could never flip. This one can, and it can carry a
+       real arrow that stays pointed at the anchor.
+       ---------------------------------------------------------------------- */
+    .tip {
+      position: fixed;
+      position-anchor: var(--anchor);
+      position-area: block-start;
+      position-try-fallbacks: flip-block, flip-inline;
+      justify-self: anchor-center;
+      margin: var(--space-2);
+      inline-size: max-content;
+      max-inline-size: 16rem;
+      padding: var(--space-2) var(--space-3);
+      border: 0;
+      border-radius: var(--r-xs);
+      background: var(--ink-900);
+      color: var(--ink-50);
+      font-size: var(--text-xs);
+      line-height: 1.4;
+      box-shadow: var(--shadow-3);
+      opacity: 0;
+      transition: opacity var(--dur-2) var(--ease-out),
+                  overlay var(--dur-2) allow-discrete,
+                  display var(--dur-2) allow-discrete;
+    }
+    .tip:popover-open { opacity: 1; }
+    @starting-style { .tip:popover-open { opacity: 0; } }
+    .tip::backdrop { background: transparent; }
+
+    /* The arrow on a .tip. background: inherit takes the tip's colour, and
+       justify-self: anchor-center keeps it pointed at the trigger whichever way
+       the tip has flipped. */
+    .tip-arrow {
+      position: absolute;
+      inline-size: 8px;
+      block-size: 8px;
+      rotate: 45deg;
+      background: inherit;
+      position-anchor: var(--anchor);
+      justify-self: anchor-center;
+    }
+
+    /* --- Popover card -------------------------------------------------------
+       A richer tooltip: a heading, body copy, and actions. Used for the
+       "what does this labor code mean" pattern.
+       ---------------------------------------------------------------------- */
+    .pop {
+      position: fixed;
+      position-anchor: var(--anchor);
+      position-area: block-end;
+      position-try-fallbacks: flip-block, flip-inline, block-start span-inline-start;
+      justify-self: anchor-center;
+      margin: var(--space-2);
+      inline-size: min(20rem, calc(100vw - var(--space-6)));
+      padding: var(--space-4);
+      background: var(--surface);
+      color: var(--text);
+      border: 1px solid var(--line);
+      border-radius: var(--r-md);
+      box-shadow: var(--shadow-4);
+      opacity: 0;
+      translate: 0 -4px;
+      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;
+    }
+    .pop:popover-open { opacity: 1; translate: 0; }
+    @starting-style { .pop:popover-open { opacity: 0; translate: 0 -4px; } }
+    .pop::backdrop { background: transparent; }
+    /* The heading inside a popover card. */
+    .pop-title { font-weight: 620; margin-block-end: var(--space-1); }
+    /* The explanatory text inside a popover card. */
+    .pop-body { font-size: var(--text-sm); color: var(--text-muted); }
+    /* The action row at the bottom of a popover card. A button here can close
+       the panel with popovertargetaction="hide" and no script. */
+    .pop-actions { display: flex; gap: var(--space-2); margin-block-start: var(--space-3); }
+
+    /* --- Hide the anchored element when its anchor scrolls out of view ------ */
+    .menu, .mega, .tip, .pop, .datepicker, .combo-list {
+      position-visibility: anchors-visible;
+    }
+  }
+
+  /* --- Floating UI handoff --------------------------------------------------
+     Where anchor positioning is missing, deck-adapters.js uses Floating UI if
+     it is on the page and falls back to Deck's own placement if it is not.
+     These rules just get out of the way so the adapter can set inset.
+     ---------------------------------------------------------------------- */
+  @supports not (anchor-name: --a) {
+    .tip, .pop {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      inline-size: max-content;
+      max-inline-size: 16rem;
+      border: 0;
+      border-radius: var(--r-xs);
+      background: var(--ink-900);
+      color: var(--ink-50);
+      font-size: var(--text-xs);
+      padding: var(--space-2) var(--space-3);
+      box-shadow: var(--shadow-3);
+      opacity: 0;
+      transition: opacity var(--dur-2) var(--ease-out),
+                  overlay var(--dur-2) allow-discrete,
+                  display var(--dur-2) allow-discrete;
+    }
+    .pop {
+      inline-size: min(20rem, calc(100vw - var(--space-6)));
+      max-inline-size: none;
+      background: var(--surface);
+      color: var(--text);
+      border: 1px solid var(--line);
+      border-radius: var(--r-md);
+      box-shadow: var(--shadow-4);
+      padding: var(--space-4);
+    }
+    .tip:popover-open, .pop:popover-open { opacity: 1; }
+    @starting-style { .tip:popover-open, .pop:popover-open { opacity: 0; } }
+    .tip::backdrop, .pop::backdrop { background: transparent; }
+    .tip-arrow { position: absolute; inline-size: 8px; block-size: 8px; rotate: 45deg; background: inherit; }
+  }
+}