lostcoords-ui 0.4.1 → 0.6.0

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

@@ -0,0 +1,45 @@
+/* Document defaults for apps that let the library own the page. components.css
+   omits this file, so a host with its own base styles keeps them. */
+@layer base {
+  :root { color-scheme: light; }
+  html[data-theme="dark"] { color-scheme: dark; }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    line-height: 1.5;
+  }
+
+  :is(h1, h2, h3, h4, h5) {
+    font-family: var(--font-display);
+    line-height: 1.2;
+    color: var(--foreground);
+  }
+
+  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(--ring, color-mix(in oklab, var(--primary) 50%, transparent));
+    outline-offset: 0;
+  }
+
+  dialog:focus-visible { outline: none; }
+
+  :where(code):not(:where(pre code)) {
+    @apply lc-inline-code;
+  }
+
+  @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/card.css

@@ -1,26 +1,27 @@
 @layer components {
-  /* Shared paper-card chrome. Used as a bare `.card-surface` hook in ~17
-     places across many feature partials (group lists, transactions, overview
-     cards and currency tools. Kept authored — not folded into
-     card_surface_class — because several call sites override the border
-     (`border-transparent`), background or radius with utilities that must
-     out-cascade this base; a utilities-layer helper emitting a `[border:…]`
-     shorthand would defeat those overrides. Semantic classes set the
-     --card-surface-* vars for local tone. (Form cards use form_card_class,
-     which carries this same chrome plus padding/container/error border.) */
-  .card-surface {
-    --avatar-cutout: var(--card-surface-bg, var(--paper-2));
-    background: var(--card-surface-bg, var(--paper-2));
-    border: var(--card-surface-border, 1px solid transparent);
-    border-radius: var(--card-surface-radius, var(--radius-3xl));
-    box-shadow: var(--card-surface-shadow, none);
-    transition:
-      background 0.18s var(--ease-out),
-      border-color 0.18s var(--ease-out),
-      box-shadow 0.18s var(--ease-out);
-  }
+  /* Padding comes from --lc-inset, so a card that sets --lc-inset passes the
+     same rhythm to everything inside it. */
 
-  .form-card + .form-card { margin-block-start: 1rem; }
+  /* Inputs keep their --input fill on cards. Fills that are muted on the page
+     (choice tiles, alerts, neutral badges, skeletons) switch to the page
+     background, and toggle group tracks to the accent fill, so they stay
+     visible on the muted card. */
+  .lc-card {
+    --lc-tile-bg: var(--background);
+    --lc-track-bg: var(--accent);
+    --lc-avatar-cutout: var(--lc-card-bg, var(--card));
+    background: var(--lc-card-bg, var(--card));
+    color: var(--card-foreground);
+    border: var(--lc-card-border, thin solid transparent);
+    border-radius: var(--lc-card-radius, var(--radius-3xl));
+    box-shadow: var(--lc-card-shadow, none);
+    transition:
+      background-color var(--lc-motion-control) var(--lc-ease-out),
+      border-color var(--lc-motion-control) var(--lc-ease-out),
+      box-shadow var(--lc-motion-control) var(--lc-ease-out);
 
-  .form-submit { margin-block-start: 2rem; }
+    &:has([data-tone="destructive"], [aria-invalid="true"]) {
+      border-color: color-mix(in oklab, var(--destructive) 30%, var(--border));
+    }
+  }
 }

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

@@ -0,0 +1,39 @@
+@layer components {
+  /* The thumb is a gradient on the input itself, so the switch needs no extra
+     element. Forced colors fall back to the native checkbox. */
+  .lc-switch {
+    --lc-switch-thumb: var(--background);
+
+    appearance: none;
+    inline-size: calc(var(--spacing) * 9);
+    block-size: calc(var(--spacing) * 5.5);
+    border-radius: var(--radius-pill);
+    background-color: var(--input);
+    background-image: radial-gradient(circle closest-side, var(--lc-switch-thumb) calc(100% - var(--spacing) * 0.375), transparent 100%);
+    background-size: calc(var(--spacing) * 5.5) calc(var(--spacing) * 5.5);
+    background-repeat: no-repeat;
+    background-position: left center;
+    transition:
+      background-color var(--lc-motion-control) var(--lc-ease-out),
+      background-position var(--lc-motion-control) var(--lc-ease-out);
+
+    &:checked {
+      --lc-switch-thumb: var(--primary-foreground);
+
+      background-color: var(--primary);
+      background-position: right center;
+    }
+
+    &:dir(rtl) { background-position: right center; }
+    &:dir(rtl):checked { background-position: left center; }
+
+    @media (forced-colors: active) {
+      appearance: auto;
+    }
+  }
+
+  /* Rails wraps invalid controls in .field_with_errors; library controls ignore the wrapper. */
+  .field_with_errors:has(> [data-slot]) {
+    display: contents;
+  }
+}

data/app/assets/tailwind/lostcoords/ui/code-block.css

@@ -0,0 +1,10 @@
+@layer components {
+  @media (hover: hover) and (pointer: fine) {
+    .lc-code-block-copy { opacity: 0; }
+
+    .lc-code-block:is(:hover, :focus-within) .lc-code-block-copy,
+    .lc-code-block-copy:has([data-state="copied"], [data-state="error"]) {
+      opacity: 1;
+    }
+  }
+}

data/app/assets/tailwind/lostcoords/ui/{disclosure.css → collapsible.css}

@@ -1,8 +1,8 @@
-/* Removing [open] hides the content at once, so disclosure_controller holds the
+/* Removing [open] hides the content at once, so lc-collapsible holds the
    panel open under [data-closing] for the exit, then closes it. Transitioning
    content-visibility makes WebKit keep the panel hidden for part of the opening. */
 @layer components {
-  .disclosure-animated {
+  .lc-collapsible {
     interpolate-size: allow-keywords; /* browser-compat: enhancement */
 
     &::details-content {
@@ -11,9 +11,9 @@
       opacity: 0;
       translate: 0 -0.375rem;
       transition:
-        block-size 420ms var(--ease-out-expo),
-        opacity 220ms var(--ease-out),
-        translate 320ms var(--ease-out-expo);
+        block-size 420ms var(--lc-ease-out-expo),
+        opacity 220ms var(--lc-ease-out),
+        translate 320ms var(--lc-ease-out-expo);
     }
 
     &[open]::details-content {
@@ -28,7 +28,7 @@
       opacity: 0;
       translate: 0 -0.375rem;
       transition-duration: 260ms, 160ms, 200ms;
-      transition-timing-function: var(--ease-out);
+      transition-timing-function: var(--lc-ease-out);
     }
 
     @supports (interpolate-size: allow-keywords) {

data/app/assets/tailwind/lostcoords/ui/components/code-block.css

@@ -0,0 +1,5 @@
+/* lc_code_block. Its copy button ships in core. */
+@import "../code-block.css";
+@source "../../../../../helpers/lostcoords/ui/code_block_helper.rb";
+@source "../../../../../views/lostcoords/ui/components/_lc_code_block.html.erb";
+@source "../../../../../javascript/lostcoords/ui/controllers/lc_code_block_controller.js";

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

@@ -0,0 +1,5 @@
+/* lc_collapsible. */
+@import "../collapsible.css";
+@source "../../../../../helpers/lostcoords/ui/collapsible_helper.rb";
+@source "../../../../../views/lostcoords/ui/components/_lc_collapsible.html.erb";
+@source "../../../../../javascript/lostcoords/ui/controllers/lc_collapsible_controller.js";

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

@@ -0,0 +1,9 @@
+/* lc_dialog, with the phone sheet (lc_sheet_data) and confirm dialogs. */
+@import "../sheet.css";
+@import "../dialog.css";
+@source "../../../../../helpers/lostcoords/ui/dialog_helper.rb";
+@source "../../../../../helpers/lostcoords/ui/sheet_helper.rb";
+@source "../../../../../views/lostcoords/ui/components/_lc_dialog.html.erb";
+@source "../../../../../javascript/lostcoords/ui/controllers/lc_dialog_controller.js";
+@source "../../../../../javascript/lostcoords/ui/controllers/lc_sheet_controller.js";
+@source "../../../../../javascript/lostcoords/ui/controllers/lc_confirm_dialog_controller.js";

data/app/assets/tailwind/lostcoords/ui/components/emoji-picker.css

@@ -0,0 +1,5 @@
+/* lc_emoji_picker. */
+@import "../emoji-picker.css";
+@source "../../../../../helpers/lostcoords/ui/emoji_picker_helper.rb";
+@source "../../../../../views/lostcoords/ui/components/_emoji_picker*.html.erb";
+@source "../../../../../javascript/lostcoords/ui/controllers/lc_emoji_picker_controller.js";

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

@@ -0,0 +1,5 @@
+/* lc_menu, lc_menu_option and lc_popover. */
+@source "../../../../../helpers/lostcoords/ui/menu_helper.rb";
+@source "../../../../../views/lostcoords/ui/components/_lc_floating_panel.html.erb";
+@source "../../../../../javascript/lostcoords/ui/controllers/lc_menu_controller.js";
+@source "../../../../../javascript/lostcoords/ui/controllers/lc_popover_controller.js";

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

@@ -0,0 +1,3 @@
+/* lc_prose, long-form reading content. */
+@import "../prose.css";
+@source "../../../../../helpers/lostcoords/ui/reading_helper.rb";

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

@@ -0,0 +1,3 @@
+/* lc_table. */
+@import "../table.css";
+@source "../../../../../helpers/lostcoords/ui/table_helper.rb";

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

@@ -0,0 +1,5 @@
+/* lc_toast and lc_toast_region. */
+@import "../toast.css";
+@source "../../../../../helpers/lostcoords/ui/toast_helper.rb";
+@source "../../../../../javascript/lostcoords/ui/controllers/lc_toast_controller.js";
+@source "../../../../../javascript/lostcoords/ui/controllers/lc_toast_region_controller.js";

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

@@ -0,0 +1,4 @@
+/* lc_tooltip. */
+@import "../tooltip.css";
+@source "../../../../../helpers/lostcoords/ui/tooltip_helper.rb";
+@source "../../../../../javascript/lostcoords/ui/controllers/lc_tooltip_controller.js";

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

@@ -0,0 +1,12 @@
+/* Every component. For a smaller build import ./core.css and the files in
+   ./components/ you use instead. */
+@import "./core.css";
+@import "./components/dialog.css";
+@import "./components/menu.css";
+@import "./components/toast.css";
+@import "./components/tooltip.css";
+@import "./components/collapsible.css";
+@import "./components/code-block.css";
+@import "./components/emoji-picker.css";
+@import "./components/table.css";
+@import "./components/prose.css";

data/app/assets/tailwind/lostcoords/ui/copy-button.css

@@ -1,7 +1,7 @@
 @layer components {
-  .ui-copy { display: inline-grid; }
+  .lc-copy { display: inline-grid; }
 
-  .ui-copy-content {
+  .lc-copy-content {
     grid-area: 1 / 1;
     display: inline-flex;
     align-items: center;
@@ -11,21 +11,21 @@
     visibility: hidden;
     transform: translateY(0.2rem) scale(0.96);
     transition:
-      opacity var(--ui-motion-feedback) var(--ease-out),
-      transform var(--ui-motion-feedback) var(--ease-out),
-      visibility var(--ui-motion-feedback);
+      opacity var(--lc-motion-feedback) var(--lc-ease-out),
+      transform var(--lc-motion-feedback) var(--lc-ease-out),
+      visibility var(--lc-motion-feedback);
   }
 
-  .ui-copy[data-state="idle"] [data-copy-state="idle"],
-  .ui-copy[data-state="copied"] [data-copy-state="copied"],
-  .ui-copy[data-state="error"] [data-copy-state="error"] {
+  .lc-copy[data-state="idle"] [data-copy-state="idle"],
+  .lc-copy[data-state="copied"] [data-copy-state="copied"],
+  .lc-copy[data-state="error"] [data-copy-state="error"] {
     opacity: 1;
     visibility: visible;
     transform: none;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .ui-copy-content {
+    .lc-copy-content {
       transform: none;
       transition: none;
     }

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

@@ -0,0 +1,21 @@
+/* Tokens, foundations and the components almost every app uses: buttons,
+   badges, avatars, cards, alerts, form controls, choices, toggles, copy buttons,
+   layout, typography and navigation. Add the opt-in components in ./components/ that
+   you render, or import ../components.css for everything. */
+@import "./theme.css";
+@source "../../../../helpers/lostcoords/ui/{badge,button,card,choice,copy_button,description_list,feedback,form,glass,icon,layout,navigation,primitives,render_attributes,structures,tailwind,translation,typography}_helper.rb";
+@source "../../../../javascript/lostcoords/ui/helpers/*.js";
+@source "../../../../javascript/lostcoords/ui/controllers/lc_{copy,kbd,selection,shortcut,tabs,toggle}_controller.js";
+@source "../../../../../lib/lostcoords/ui/parts.rb";
+
+@import "./glass.css";
+@import "./popover.css";
+@import "./card.css";
+@import "./avatar.css";
+@import "./squircle.css";
+@import "./utilities.css";
+@import "./typography.css";
+@import "./layout.css";
+@import "./field.css";
+@import "./choice.css";
+@import "./copy-button.css";

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

@@ -1,20 +1,20 @@
 @layer components {
-  .app-dialog {
-    --dialog-from: translateY(0.4rem) scale(0.98);
-    --dialog-fade: 0.2s;
-    --dialog-duration: 0.2s;
+  .lc-dialog {
+    --lc-dialog-from: translateY(0.4rem) scale(0.98);
+    --lc-dialog-fade: 0.2s;
+    --lc-dialog-duration: 0.2s;
 
     /* Preflight's `margin: 0` clobbers the UA `margin: auto` that centres a modal dialog. */
     margin: auto;
     overflow: hidden;
     overscroll-behavior: contain;
     opacity: 0;
-    transform: var(--dialog-from);
+    transform: var(--lc-dialog-from);
     transition:
-      opacity var(--dialog-fade) var(--ease-out-expo),
-      transform var(--dialog-duration) var(--ease-out-expo),
-      display var(--dialog-duration) allow-discrete,
-      overlay var(--dialog-duration) allow-discrete;
+      opacity var(--lc-dialog-fade) var(--lc-ease-out-expo),
+      transform var(--lc-dialog-duration) var(--lc-ease-out-expo),
+      display var(--lc-dialog-duration) allow-discrete,
+      overlay var(--lc-dialog-duration) allow-discrete;
 
     &[open] {
       opacity: 1;
@@ -22,7 +22,7 @@
 
       @starting-style {
         opacity: 0;
-        transform: var(--dialog-from);
+        transform: var(--lc-dialog-from);
       }
     }
 
@@ -32,14 +32,14 @@
       background: transparent;
       backdrop-filter: blur(0);
       transition:
-        background-color var(--dialog-fade) var(--ease-out),
-        backdrop-filter var(--dialog-fade) var(--ease-out),
-        display var(--dialog-fade) allow-discrete,
-        overlay var(--dialog-fade) allow-discrete;
+        background-color var(--lc-dialog-fade) var(--lc-ease-out),
+        backdrop-filter var(--lc-dialog-fade) var(--lc-ease-out),
+        display var(--lc-dialog-fade) allow-discrete,
+        overlay var(--lc-dialog-fade) allow-discrete;
     }
 
     &[open]::backdrop {
-      background: var(--scrim);
+      background: var(--lc-scrim);
       backdrop-filter: blur(2px);
 
       @starting-style {
@@ -48,8 +48,8 @@
       }
     }
 
-    &.context-dialog[open]::backdrop {
-      background: var(--scrim-soft);
+    &.lc-dialog-context[open]::backdrop {
+      background: var(--lc-scrim-soft);
       backdrop-filter: none;
     }