lostcoords-ui 0.4.1

data/app/assets/tailwind/lostcoords/ui/sheet.css

@@ -0,0 +1,170 @@
+@layer components {
+  @media (width < 40rem) {
+    .sheet {
+      position: fixed;
+
+      /* Anchored from the top edge at the screen height it opened at
+         (sheet_controller), then lifted by its own height. In-app browsers
+         (Brave, Chrome) resize the page under the keyboard; anything hung
+         from the bottom edge jumps a frame as they do, but the top holds. */
+      inset: var(--sheet-floor, 100dvh) 0 auto;
+      translate: 0 -100%;
+      margin: 0;
+      z-index: var(--z-index-prompt);
+      inline-size: 100%;
+      max-block-size: calc(var(--sheet-floor, 100dvh) * 0.9);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      padding-block-end: max(env(safe-area-inset-bottom), 1rem);
+      border: 1px solid var(--glass-edge);
+      border-start-start-radius: var(--radius-3xl);
+      border-start-end-radius: var(--radius-3xl);
+
+      /* Published as a variable, not just applied, because the sticky chrome
+         that rides on top of the sheet — the grabber bar, the pinned action
+         row — has to paint the *same* surface or it reads as a seam. In dark
+         mode the sheet is a lightened paper-2/paper-3 mix while --paper is
+         0.045 lightness darker, which is exactly the band you could see. */
+      --sheet-bg: var(--paper);
+      @supports (background: light-dark(white, black)) {
+        --sheet-bg: light-dark(var(--paper), color-mix(in oklab, var(--paper-2) 92%, var(--paper-3)));
+      }
+      background: var(--sheet-bg);
+      color: var(--ink);
+      box-shadow: 0 -12px 40px -12px color-mix(in oklab, var(--ink) 45%, transparent);
+      transform: translateY(var(--sheet-offscreen));
+      transition:
+        transform var(--sheet-duration) var(--ease-sheet),
+        display var(--sheet-duration) allow-discrete,
+        overlay var(--sheet-duration) allow-discrete;
+    }
+
+    /* Popover-API reveal (currency): top layer drives display, so showPopover()/
+       hidePopover() animate the slide both ways, with a native ::backdrop. */
+    .sheet[popover] { display: none; flex-direction: column; max-block-size: min(calc(var(--sheet-floor, 100svh) * 0.72), 34rem); }
+    .sheet[popover]:popover-open {
+      display: flex;
+      transform: translateY(0);
+
+      @starting-style { transform: translateY(var(--sheet-offscreen)); }
+    }
+    .sheet[popover]::backdrop {
+      background: var(--scrim);
+      backdrop-filter: blur(2px);
+      opacity: 0;
+      transition:
+        opacity var(--sheet-duration) var(--ease-sheet),
+        display var(--sheet-duration) allow-discrete,
+        overlay var(--sheet-duration) allow-discrete;
+
+      @media (prefers-reduced-motion: reduce) { transition: none; }
+    }
+    .sheet[popover]:popover-open::backdrop { opacity: 1; @starting-style { opacity: 0; } }
+
+    /* UIKit's 36×5 grabber. */
+    :is([data-sheet-target~="handle"], dialog[data-controller~="sheet"])::before {
+      content: "";
+      display: block;
+      inline-size: 2.25rem;
+      block-size: 0.3125rem;
+      border-radius: 9999px;
+      background: color-mix(in oklab, var(--ink-3) 45%, transparent);
+    }
+  }
+}
+
+@layer modules {
+  /* Phones: every modal dialog is an iOS sheet (sheet_controller). It floats
+     inset with all corners round while it is short, and docks to the screen
+     edges as it reaches the large detent: --sheet-p runs 0 → 1 between them.
+     Lives in this layer so it out-ranks a dialog's own frame. */
+  @media (width < 40rem) {
+    dialog[data-controller~="sheet"] {
+      --sheet-p: 0;
+      --sheet-inset: 0.5rem;
+      --sheet-radius: 2.25rem;
+      --sheet-bg: var(--paper);
+      --sheet-gap: calc(var(--sheet-inset) * (1 - var(--sheet-p)));
+
+      position: fixed;
+
+      /* Anchored from the top edge, like .sheet: the keyboard covers it and
+         nothing moves. */
+      inset: calc(var(--sheet-floor, 100dvh) - var(--sheet-gap)) 0 auto;
+      translate: 0 -100%;
+      margin: 0 var(--sheet-gap);
+      inline-size: auto;
+      max-inline-size: none;
+      block-size: auto;
+      max-block-size: calc(var(--sheet-floor, 100dvh) - max(env(safe-area-inset-top), 0.75rem) - 0.625rem);
+      padding: 0 0 max(0px, calc(env(safe-area-inset-bottom) - var(--sheet-gap)));
+      overflow: hidden auto;
+      overscroll-behavior: contain;
+      scrollbar-width: none;
+      border: 1px solid var(--glass-edge);
+      border-radius:
+        var(--sheet-radius) var(--sheet-radius)
+        calc(var(--sheet-radius) * (1 - var(--sheet-p))) calc(var(--sheet-radius) * (1 - var(--sheet-p)));
+      background: var(--sheet-bg);
+      box-shadow: var(--glass-rim), 0 -8px 40px -12px rgb(0 0 0 / 0.28);
+      opacity: 1;
+      transform: translateY(var(--sheet-offscreen));
+      transform-origin: bottom center;
+      transition:
+        transform var(--sheet-duration) var(--ease-sheet),
+        display var(--sheet-duration) allow-discrete,
+        overlay var(--sheet-duration) allow-discrete;
+
+      &[open] {
+        transform: none;
+
+        @starting-style { transform: translateY(var(--sheet-offscreen)); }
+      }
+
+      &::before {
+        position: absolute;
+        z-index: calc(var(--z-index-art) + 1);
+        inset: 0.3125rem auto auto 50%;
+        translate: -50% 0;
+        pointer-events: none;
+      }
+
+      &::backdrop {
+        background: var(--scrim-sheet);
+        backdrop-filter: none;
+        opacity: 0;
+        transition:
+          opacity var(--sheet-duration) var(--ease-sheet),
+          display var(--sheet-duration) allow-discrete,
+          overlay var(--sheet-duration) allow-discrete;
+      }
+
+      &[open]::backdrop {
+        opacity: 1;
+
+        @starting-style { opacity: 0; }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        &::backdrop { transition: none; }
+      }
+    }
+
+    /* Behind a large sheet the page shrinks back and rounds off, over black,
+       as UIKit's page sheet does; sheet_controller drives the variables. */
+    html[data-sheet-page] {
+      background: #000;
+
+      > body {
+        transform-origin: 50% var(--sheet-page-origin, 0);
+        transform:
+          translateY(calc(var(--sheet-page-p, 0) * (max(env(safe-area-inset-top), 0.75rem) - 0.25rem)))
+          scale(var(--sheet-page-scale, 1));
+        clip-path: inset(var(--sheet-page-origin, 0) 0 0 round calc(var(--sheet-page-p, 0) * 0.75rem));
+        transition:
+          transform var(--sheet-page-transition, 0s),
+          clip-path var(--sheet-page-transition, 0s);
+      }
+    }
+  }
+}

data/app/assets/tailwind/lostcoords/ui/squircle.css

@@ -0,0 +1,32 @@
+/* WebKit ignores corner-shape and keeps plain rounded corners. A squircle reads
+   tighter than a circular arc of the same radius, so the 12/16/24 tiers grow. */
+@layer theme {
+  @supports (corner-shape: squircle) {
+    body {
+      --radius-xl: 1.125rem;
+      --radius-2xl: 1.5rem;
+      --radius-3xl: 2rem;
+
+      & :is(
+        [class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-3xl"],
+        [class*="rounded-t-"], [class*="rounded-b-"],
+        [class*="rounded-ss-"], [class*="rounded-se-"],
+        [class*="rounded-es-"], [class*="rounded-ee-"],
+        [class*="[&_button]:rounded-xl"] button,
+        [class*="before:rounded-xl"]::before
+      ):not([class*="rounded-full"]) {
+        corner-shape: squircle;
+      }
+    }
+  }
+}
+
+/* For surfaces whose radius comes from a variable or a stylesheet, which the class
+   match above can't see. The card, dialog, menu, badge and picker builders carry it. */
+@utility squircle {
+  @supports (corner-shape: squircle) {
+    &:not([class*="rounded-full"]) {
+      corner-shape: squircle;
+    }
+  }
+}

data/app/assets/tailwind/lostcoords/ui/theme.css

@@ -0,0 +1,255 @@
+@theme inline {
+  --color-paper: var(--paper);
+  --color-paper-2: var(--paper-2);
+  --color-paper-3: var(--paper-3);
+  --color-ink: var(--ink);
+  --color-ink-2: var(--ink-2);
+  --color-ink-3: var(--ink-3);
+  --color-ink-on-accent: var(--ink-on-accent);
+  --color-hairline: var(--hairline);
+
+  --color-sky: var(--sky);
+  --color-sky-deep: var(--sky-deep);
+  --color-sky-soft: var(--sky-soft);
+  --color-accent: var(--accent);
+  --color-leaf: var(--leaf);
+  --color-leaf-soft: var(--leaf-soft);
+  --color-gold: var(--gold);
+  --color-gold-soft: var(--gold-soft);
+  --color-berry: var(--berry);
+  --color-berry-soft: var(--berry-soft);
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+
+  --font-display: var(--f-display);
+  --font-body: var(--f-body);
+  --font-mono: var(--f-mono);
+}
+
+@theme {
+  --text-xs--line-height: initial;
+  --text-sm--line-height: initial;
+  --text-base--line-height: initial;
+  --text-lg--line-height: initial;
+  --text-xl--line-height: initial;
+  --text-2xl--line-height: initial;
+
+  --z-index-above: 1;
+  --z-index-raised: 2;
+  --z-index-art: 3;
+
+  --z-index-sticky-action: 10;
+  --z-index-float: 10;
+
+  --z-index-nav: 20;
+  --z-index-nav-popover: 30;
+  --z-index-popover: 30;
+  --z-index-mobile-nav: 40;
+  --z-index-mobile-action: 50;
+  --z-index-prompt: 51;
+
+  --z-index-overlay: 60;
+  --z-index-overlay-panel: 61;
+  --z-index-toast: 70;
+
+  --ease-out: cubic-bezier(0.3, 0, 0, 1);
+  --ease-out-long: cubic-bezier(0.2, 0.7, 0, 1);
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
+
+  --sheet-duration: 500ms;
+
+  --sheet-offscreen: calc(100% + 2rem);
+  --ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1);
+  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
+  --color-scrim-dock: rgb(10 14 24 / 0.22);
+}
+
+@custom-variant dark (&:where(html[data-theme="dark"], html[data-theme="dark"] *));
+
+@theme {
+  --animate-alert-in: alert-in 360ms var(--ease-out-expo) both;
+
+  @keyframes alert-in {
+    from { opacity: 0; transform: translateY(-0.25rem); }
+  }
+}
+
+@layer theme {
+  :root {
+    --ui-motion-quick: 140ms;
+    --ui-motion-control: 180ms;
+    --ui-motion-feedback: 160ms;
+    --ui-press-scale: 0.96;
+
+    --lch-sky:      55.6% 0.176 256.6;
+    --lch-sky-deep: 51.5% 0.169 259.2;
+    --lch-leaf:     58.6% 0.089 144.3;
+    --lch-gold:     73.8% 0.130 86;
+    --lch-berry:    63.5% 0.151 41.4;
+
+    --paper:    oklch(100% 0 0deg);
+    --paper-2:  oklch(97.6% 0.003 264.5deg);
+    --paper-3:  oklch(95.2% 0.006 264.5deg);
+    --ink:      oklch(23.1% 0.010 268.2deg);
+    --ink-2:    oklch(39.4% 0.012 267deg);
+    --ink-3:    oklch(52.0% 0.014 267deg);
+    --ink-on-accent: #fff;
+    --hairline: oklch(93.1% 0.006 264.5deg);
+
+    --scrim: color-mix(in oklab, var(--ink) 55%, transparent);
+    --scrim-soft: color-mix(in oklab, var(--ink) 12%, transparent);
+
+    --scrim-sheet: rgb(0 0 0 / 0.28);
+
+    --sky:      oklch(var(--lch-sky));
+    --sky-deep: oklch(var(--lch-sky-deep));
+    --sky-soft: oklch(95.2% 0.023 258.4deg);
+    --accent:   var(--sky-deep);
+
+    --leaf:       oklch(var(--lch-leaf));
+    --leaf-soft:  oklch(95.0% 0.015 136deg);
+    --gold:       oklch(var(--lch-gold));
+    --gold-soft:  oklch(95.5% 0.040 88deg);
+    --berry:      oklch(var(--lch-berry));
+    --berry-soft: oklch(95.4% 0.020 58deg);
+    --danger:     var(--berry);
+    --danger-soft: var(--berry-soft);
+
+    --f-display: ui-sans-serif, system-ui, sans-serif;
+    --f-body:    ui-sans-serif, system-ui, sans-serif;
+    --f-japanese: "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", ui-sans-serif, system-ui, sans-serif;
+    --f-mono:    ui-monospace, "SFMono-Regular", "SF Mono", menlo, consolas, monospace;
+
+    --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.05);
+    --shadow:
+      0 1px 3px rgb(16 24 40 / 0.05),
+      0 8px 24px -8px rgb(16 24 40 / 0.09);
+    --shadow-lg:
+      0 1px 3px rgb(16 24 40 / 0.06),
+      0 24px 48px -12px rgb(16 24 40 / 0.18);
+
+    --glass-fill: color-mix(in oklab, var(--paper) 74%, transparent);
+    --glass-edge: rgb(255 255 255 / 0.4);
+    --glass-bar-edge: var(--glass-edge);
+    --glass-rim:
+      inset 0 1px 0 rgb(255 255 255 / 0.6),
+      inset 0 0 0 1px rgb(255 255 255 / 0.22);
+    --glass-shadow: var(--glass-rim), var(--shadow);
+
+    --glass-hud-fill:
+      linear-gradient(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 60%),
+      color-mix(in oklab, var(--paper) 82%, transparent);
+    --glass-hud-ink: var(--ink);
+    --glass-hud-solid: var(--paper);
+    --glass-hud-shadow:
+      inset 0 0 0 1px rgb(16 24 40 / 0.08),
+      0 1px 2px rgb(16 24 40 / 0.06),
+      0 6px 16px -6px rgb(16 24 40 / 0.16);
+
+    --pill-rim: linear-gradient(135deg, #fff 0%, #dcdce0 30%, #f7f7f8 55%, #c9c9ce 100%);
+    --pill-surface: linear-gradient(#fff, #f1f1f4);
+    --pill-light: inset 0 1px 0 #fff, inset 0 -1px 1px rgb(0 0 0 / 0.06);
+    --pill-depth: 0 1px 1px rgb(0 0 0 / 0.08), 0 8px 18px -6px rgb(0 0 0 / 0.18);
+
+    --focus-halo-color: color-mix(in oklab, var(--sky) 50%, transparent);
+    --focus-halo: 0 0 0 calc(var(--spacing) * 0.5) var(--focus-halo-color);
+
+    color-scheme: light;
+
+  }
+
+  html:lang(ja) {
+    --f-display: var(--f-japanese);
+    --f-body: var(--f-japanese);
+  }
+
+  html[data-theme="dark"] {
+    color-scheme: dark;
+
+    --paper: oklch(20.5% 0.002 75deg);
+    --paper-2: oklch(24.2% 0.003 75deg);
+    --paper-3: oklch(28.4% 0.004 75deg);
+    --ink: oklch(91.5% 0.006 85deg);
+    --ink-2: color-mix(in oklab, var(--ink) 76%, var(--paper));
+    --ink-3: color-mix(in oklab, var(--ink) 68%, var(--paper));
+    --hairline: color-mix(in oklab, var(--ink) 16%, transparent);
+
+    --scrim: rgb(0 0 0 / 0.6);
+    --scrim-soft: rgb(0 0 0 / 0.32);
+
+    --ink-on-accent: var(--paper);
+    --sky: oklch(65.5% 0.150 255deg);
+    --sky-deep: oklch(61.5% 0.155 257deg);
+    --sky-soft: color-mix(in oklab, var(--sky) 18%, var(--paper));
+    --accent: var(--sky);
+
+    --leaf-soft: color-mix(in oklab, var(--leaf) 16%, var(--paper));
+    --gold-soft: color-mix(in oklab, var(--gold) 16%, var(--paper));
+    --berry-soft: color-mix(in oklab, var(--berry) 16%, var(--paper));
+
+    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2);
+    --shadow:
+      0 1px 2px rgb(0 0 0 / 0.16),
+      0 8px 24px -8px rgb(0 0 0 / 0.32);
+    --shadow-lg:
+      0 1px 3px rgb(0 0 0 / 0.2),
+      0 24px 48px -12px rgb(0 0 0 / 0.55);
+
+    --glass-fill: color-mix(in oklab, var(--paper) 80%, transparent);
+    --glass-edge: transparent;
+    --glass-rim: 0 0 #0000;
+    --glass-bar-edge: rgb(255 255 255 / 0.06);
+    --glass-shadow: 0 1px 3px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.03);
+    --glass-hud-fill:
+      linear-gradient(rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 60%),
+      color-mix(in oklab, var(--paper-3) 90%, transparent);
+    --glass-hud-solid: var(--paper-3);
+    --glass-hud-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 0.1),
+      inset 0 0 0 1px rgb(255 255 255 / 0.1),
+      0 8px 20px -8px rgb(0 0 0 / 0.6);
+
+    --pill-rim: linear-gradient(135deg, rgb(255 255 255 / 0.22) 0%, rgb(255 255 255 / 0.06) 30%, rgb(255 255 255 / 0.12) 55%, rgb(0 0 0 / 0.3) 100%);
+    --pill-surface: linear-gradient(var(--paper-3), var(--paper-2));
+    --pill-light: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 -1px 1px rgb(0 0 0 / 0.2);
+    --pill-depth: 0 1px 1px rgb(0 0 0 / 0.3), 0 8px 18px -6px rgb(0 0 0 / 0.5);
+  }
+}
+
+@layer base {
+  body {
+    background-color: var(--paper);
+    color: var(--ink);
+    font-family: var(--f-body);
+    line-height: 1.5;
+  }
+
+  :is(h1, h2, h3, h4, h5) {
+    font-family: var(--f-display);
+    line-height: 1.2;
+    color: var(--ink);
+  }
+
+  button { cursor: pointer; background: none; }
+
+  dialog { background: transparent; color: inherit; }
+
+  :where([popover]) { color: inherit; }
+
+  :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible,
+  label:has(input.sr-only:focus-visible) {
+    outline: calc(var(--spacing) * 0.5) solid var(--focus-halo-color);
+    outline-offset: 0;
+  }
+
+  dialog:focus-visible { outline: none; }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}

data/app/assets/tailwind/lostcoords/ui/typography.css

@@ -0,0 +1,81 @@
+@layer components {
+  :where(.ui-heading) {
+    font-family: var(--font-display, var(--font-body, inherit));
+    font-weight: var(--ui-heading-weight, 700);
+    letter-spacing: var(--ui-heading-tracking, -0.025em);
+    overflow-wrap: anywhere;
+    text-wrap: balance;
+  }
+
+  :where(.ui-heading-page) {
+    font-size: var(--ui-heading-page-size, 1.875rem);
+    line-height: var(--ui-heading-page-line-height, 2.25rem);
+  }
+
+  :where(.ui-heading-section) {
+    font-size: var(--ui-heading-section-size, 1.25rem);
+    line-height: var(--ui-heading-section-line-height, 1.5rem);
+  }
+
+  :where(.ui-heading-card) {
+    font-size: var(--ui-heading-card-size, 1.125rem);
+    line-height: var(--ui-heading-card-line-height, 1.5rem);
+  }
+
+  :where(.ui-heading:lang(ja)) {
+    letter-spacing: var(--ui-heading-ja-tracking, 0);
+    line-break: strict;
+  }
+
+  :where(.ui-text) {
+    font-family: var(--font-body, inherit);
+    font-weight: var(--ui-text-weight, 400);
+    letter-spacing: var(--ui-text-tracking, normal);
+    overflow-wrap: anywhere;
+  }
+
+  :where(.ui-text-body) {
+    font-size: var(--ui-text-body-size, 1rem);
+    line-height: var(--ui-text-body-line-height, 1.5rem);
+  }
+
+  :where(.ui-text-small) {
+    font-size: var(--ui-text-small-size, 0.875rem);
+    line-height: var(--ui-text-small-line-height, 1.25rem);
+  }
+
+  :where(.ui-text-caption) {
+    font-size: var(--ui-text-caption-size, 0.75rem);
+    line-height: var(--ui-text-caption-line-height, 1rem);
+  }
+
+  :where(.ui-text:lang(ja)) {
+    line-break: strict;
+  }
+
+  @supports (word-break: auto-phrase) {
+    :where(.ui-heading:lang(ja)) {
+      word-break: auto-phrase;
+    }
+  }
+}
+
+@layer utilities {
+  :where(code):not(:where(pre code)),
+  .ui-prose :where(code):not(:where(pre code)) {
+    font-family: var(--f-mono);
+    font-size: 0.875em;
+    font-weight: inherit;
+    line-height: inherit;
+    color: var(--ink);
+    background-color: var(--paper-3);
+    border-radius: var(--radius-sm);
+    padding: 0.125em 0.375em;
+    overflow-wrap: anywhere;
+
+    &::before,
+    &::after {
+      content: none;
+    }
+  }
+}

data/app/assets/tailwind/lostcoords/ui/ui.css

@@ -0,0 +1,21 @@
+@import "./theme.css";
+@source "../../../../helpers/**/*.rb";
+@source "../../../../javascript/**/*.js";
+@source "../../../../views/**/*.erb";
+@source not "../../../../../lib";
+
+@import "./glass.css";
+@import "./copy-button.css";
+@import "./disclosure.css";
+@import "./emoji-picker.css";
+@import "./popover.css";
+@import "./sheet.css";
+@import "./card.css";
+@import "./dialog.css";
+@import "./avatar.css";
+@import "./squircle.css";
+@import "./utilities.css";
+@import "./typography.css";
+@import "./layout.css";
+@import "./reading.css";
+@import "./field.css";

data/app/assets/tailwind/lostcoords/ui/utilities.css

@@ -0,0 +1,45 @@
+/* The rim is the border box painted with --pill-rim under the surface, so
+   one element carries both layers. */
+@utility pill-3d {
+  border: calc(var(--spacing) * 0.375) solid transparent;
+  background: var(--pill-surface) padding-box, var(--pill-rim) border-box;
+  box-shadow: var(--pill-light), var(--pill-depth);
+}
+
+/* A control gives a little as it is pressed, unless it is disabled. */
+@utility press {
+  @media (prefers-reduced-motion: no-preference) {
+    &:not([disabled], :disabled, [aria-disabled="true"]):active {
+      transform: scale(var(--press-scale, var(--ui-press-scale)));
+    }
+  }
+}
+
+@layer components {
+  /* A data-URI image cannot read CSS variables, so the chevron's ink is baked in. */
+  select.select-control {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237b808a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
+    background-size: calc(var(--spacing) * 5) calc(var(--spacing) * 5);
+    background-repeat: no-repeat;
+    background-position: right calc(var(--spacing) * 4) center;
+  }
+}
+
+@property --scroll-fade-start { syntax: "<length>"; inherits: false; initial-value: 0; }
+@property --scroll-fade-end { syntax: "<length>"; inherits: false; initial-value: 0; }
+
+@keyframes scroll-fade-x {
+  0%   { --scroll-fade-start: 0; --scroll-fade-end: 2rem; }
+  15%  { --scroll-fade-start: 2rem; }
+  85%  { --scroll-fade-end: 2rem; }
+  100% { --scroll-fade-start: 2rem; --scroll-fade-end: 0; }
+}
+
+@supports (animation-timeline: scroll(self inline)) {
+  .scroll-fade-x {
+    mask-image: linear-gradient(to right, transparent, black var(--scroll-fade-start), black calc(100% - var(--scroll-fade-end)), transparent);
+    animation: scroll-fade-x linear both;
+    animation-timeline: scroll(self inline);
+  }
+}

data/app/assets/tailwind/lostcoords_ui/engine.css

@@ -0,0 +1 @@
+@import "../lostcoords/ui/ui.css";