lostcoords-ui 0.5.0 → 0.7.0

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

@@ -1,18 +1,16 @@
 @layer components {
-  .emoji-picker {
+  .lc-emoji-picker {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
     align-items: center;
 
-    /* Sit above the mobile app nav (z-100 + 25) so the sheet covers it. */
-    --lc-emoji-sheet-z: calc(100 + 30);
     --lc-emoji-cell: 2.25rem;
   }
 
   /* ---- Trigger + quick choices -------------------------------------- */
-  .emoji-picker__choice,
-  .emoji-picker__trigger {
+  .lc-emoji-picker__choice,
+  .lc-emoji-picker__trigger {
     display: inline-grid;
     place-items: center;
     inline-size: 44px;
@@ -38,12 +36,12 @@
     }
   }
 
-  .emoji-picker__trigger {
+  .lc-emoji-picker__trigger {
     color: var(--muted-foreground);
     font-weight: var(--font-weight-normal, 400);
   }
 
-  .emoji-picker__more {
+  .lc-emoji-picker__more {
     position: relative;
     display: inline-flex;
   }
@@ -58,7 +56,7 @@
      dims everything beneath it — including the app nav. The allow-discrete
      transitions keep it in the top layer while it eases out, so it fades
      both ways instead of snapping away on close. */
-  .emoji-picker__popover::backdrop {
+  .lc-emoji-picker__popover::backdrop {
     background: var(--lc-scrim);
     opacity: 0;
     transition:
@@ -72,7 +70,7 @@
   /* Only the phone sheet dims the page; the desktop popover rides the top
      layer too (so nothing paints over it) but floats over an undimmed page. */
   @media (width < 40rem) {
-    .emoji-picker__popover:popover-open::backdrop {
+    .lc-emoji-picker__popover:popover-open::backdrop {
       opacity: 1;
 
       @starting-style { opacity: 0; }
@@ -82,7 +80,7 @@
   /* Phones get a solid sheet; on desktop the host paints the popover as a
      floating surface (glass in wariwari), so the gem leaves it unpainted. */
   @media (width < 40rem) {
-    .emoji-picker__popover {
+    .lc-emoji-picker__popover {
       border: 1px solid var(--lc-glass-edge, var(--border));
       border-block-end: 0;
       background: var(--background);
@@ -90,11 +88,11 @@
     }
   }
 
-  .emoji-picker__popover {
+  .lc-emoji-picker__popover {
     position: fixed;
     inset: auto 0 0;
     margin: 0;
-    z-index: var(--lc-emoji-sheet-z);
+    z-index: var(--lc-z-overlay);
     display: none;
     max-inline-size: none;
     color: var(--foreground);
@@ -125,7 +123,7 @@
 
   /* Fallback for browsers without the Popover API: class-driven display. */
   @supports not selector(:popover-open) {
-    .emoji-picker__popover[data-open] {
+    .lc-emoji-picker__popover[data-open] {
       display: flex;
       transform: translateY(0);
     }
@@ -135,7 +133,7 @@
      is large; the host's sheet draws the pill.
      touch-action: none lets a vertical drag pull the sheet down rather than
      scroll. Drag-to-dismiss is wired by the sheet controller. */
-  .emoji-picker__handle {
+  .lc-emoji-picker__handle {
     flex: 0 0 auto;
     display: grid;
     place-items: center;
@@ -145,10 +143,10 @@
     cursor: grab;
   }
 
-  .emoji-picker__handle:active { cursor: grabbing; }
+  .lc-emoji-picker__handle:active { cursor: grabbing; }
 
   /* ---- Search row --------------------------------------------------- */
-  .emoji-picker__search {
+  .lc-emoji-picker__search {
     flex: 0 0 auto;
     display: flex;
     gap: 0.5rem;
@@ -156,14 +154,14 @@
     padding: 0.75rem 0.75rem 0.5rem;
   }
 
-  .emoji-picker__search-field {
+  .lc-emoji-picker__search-field {
     position: relative;
     flex: 1 1 auto;
     display: flex;
     align-items: center;
   }
 
-  .emoji-picker__search-icon {
+  .lc-emoji-picker__search-icon {
     position: absolute;
     inset-inline-start: 14px;
     inline-size: 18px;
@@ -172,7 +170,7 @@
     pointer-events: none;
   }
 
-  .emoji-picker__search-input {
+  .lc-emoji-picker__search-input {
     inline-size: 100%;
     min-block-size: 44px;
     padding-inline: 40px 1rem;
@@ -198,12 +196,12 @@
   }
 
   /* ---- Skin-tone control ------------------------------------------- */
-  .emoji-picker__tones {
+  .lc-emoji-picker__tones {
     position: relative;
     flex: 0 0 auto;
   }
 
-  .emoji-picker__tone-toggle {
+  .lc-emoji-picker__tone-toggle {
     display: inline-grid;
     place-items: center;
     inline-size: 44px;
@@ -221,7 +219,7 @@
     &[aria-expanded="true"] { background: color-mix(in oklab, var(--primary) 12%, var(--background)); }
   }
 
-  .emoji-picker__tone-menu {
+  .lc-emoji-picker__tone-menu {
     position: absolute;
     inset-block-end: calc(100% + 6px);
     inset-inline-end: 0;
@@ -234,7 +232,7 @@
     &[hidden] { display: none; }
   }
 
-  .emoji-picker__tone {
+  .lc-emoji-picker__tone {
     display: inline-grid;
     place-items: center;
     inline-size: 36px;
@@ -255,7 +253,7 @@
 
   /* Category tabs: a segmented track, like the app's tab strips — a paper-2
      track with the active tab raised on a paper thumb. */
-  .emoji-picker__tabs {
+  .lc-emoji-picker__tabs {
     flex: 0 0 auto;
     display: flex;
     gap: 2px;
@@ -269,7 +267,7 @@
     &::-webkit-scrollbar { display: none; }
   }
 
-  .emoji-picker__tab {
+  .lc-emoji-picker__tab {
     flex: 0 0 auto;
     display: inline-grid;
     place-items: center;
@@ -294,7 +292,7 @@
   }
 
   /* ---- Scrollable body --------------------------------------------- */
-  .emoji-picker__body {
+  .lc-emoji-picker__body {
     position: relative;
     flex: 1 1 auto;
     overflow-y: auto;
@@ -309,15 +307,15 @@
     @media (prefers-reduced-motion: reduce) { scroll-behavior: auto; }
   }
 
-  .emoji-picker__category + .emoji-picker__category,
-  .emoji-picker__recent + .emoji-picker__catalog,
-  .emoji-picker__results + * {
+  .lc-emoji-picker__category + .lc-emoji-picker__category,
+  .lc-emoji-picker__recent + .lc-emoji-picker__catalog,
+  .lc-emoji-picker__results + * {
     margin-block-start: 0.5rem;
   }
 
   /* Heads scroll with their section: the tab track already marks the current
      category, and a sticky band would sit as a stripe across the panel. */
-  .emoji-picker__category-head {
+  .lc-emoji-picker__category-head {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
@@ -338,7 +336,7 @@
     }
   }
 
-  .emoji-picker__grid {
+  .lc-emoji-picker__grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--lc-emoji-cell), 1fr));
     gap: 2px;
@@ -370,13 +368,13 @@
   }
 
   /* Section that owns the sticky header needs the scroll anchor, not the grid */
-  .emoji-picker__category,
-  .emoji-picker__recent,
-  .emoji-picker__results {
+  .lc-emoji-picker__category,
+  .lc-emoji-picker__recent,
+  .lc-emoji-picker__results {
     scroll-margin-block-start: 0;
   }
 
-  .emoji-picker__empty {
+  .lc-emoji-picker__empty {
     margin: 0;
     padding: 1rem 0.5rem;
     color: var(--muted-foreground);
@@ -385,16 +383,16 @@
   }
 
   /* ---- Search mode: swap catalog for a single ranked result list ---- */
-  .emoji-picker__popover:not([data-searching]) .emoji-picker__results { display: none; }
+  .lc-emoji-picker__popover:not([data-searching]) .lc-emoji-picker__results { display: none; }
 
-  .emoji-picker__popover[data-searching] {
-    .emoji-picker__tabs,
-    .emoji-picker__recent,
-    .emoji-picker__catalog { display: none; }
+  .lc-emoji-picker__popover[data-searching] {
+    .lc-emoji-picker__tabs,
+    .lc-emoji-picker__recent,
+    .lc-emoji-picker__catalog { display: none; }
   }
 
   /* ---- Preview footer ---------------------------------------------- */
-  .emoji-picker__preview {
+  .lc-emoji-picker__preview {
     flex: 0 0 auto;
     display: flex;
     gap: 0.5rem;
@@ -403,12 +401,12 @@
     padding: 0.25rem 1rem 0.75rem;
   }
 
-  .emoji-picker__preview-emoji {
+  .lc-emoji-picker__preview-emoji {
     font-size: 1.5rem;
     line-height: 1;
   }
 
-  .emoji-picker__preview-name {
+  .lc-emoji-picker__preview-name {
     overflow: hidden;
     font-size: 1rem;
     color: var(--muted-foreground);
@@ -422,7 +420,7 @@
 
   /* ==================================================================== */
   @media (width >= 40rem) {
-    .emoji-picker__popover {
+    .lc-emoji-picker__popover {
       position: absolute;
       inset-block: calc(100% + 8px) auto;
       inset-inline: 0 auto;
@@ -452,10 +450,10 @@
       @media (prefers-reduced-motion: reduce) { transition: none; }
     }
 
-    .emoji-picker__handle { display: none; }
+    .lc-emoji-picker__handle { display: none; }
 
-    main:has(.emoji-picker__popover[data-open]),
-    .emoji-picker:has(.emoji-picker__popover[data-open]) {
+    main:has(.lc-emoji-picker__popover[data-open]),
+    .lc-emoji-picker:has(.lc-emoji-picker__popover[data-open]) {
       z-index: var(--lc-z-overlay);
     }
   }

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

@@ -21,55 +21,3 @@
     }
   }
 }
-
-@layer components {
-  /* Desktop: the .lc-sheet becomes an anchored popover instead of a bottom sheet. */
-  @media (width >= 40rem) {
-    .lc-sheet--anchored {
-      @apply lc-popover-shell;
-
-      display: none;
-      flex-direction: column;
-      position: absolute;
-      inset-block: calc(100% + --spacing(2)) auto;
-      inset-inline: auto 0;
-      inline-size: min(24rem, calc(100vw - --spacing(8)));
-      max-block-size: min(28rem, calc(100vh - --spacing(24)));
-      padding-block-end: 0;
-      border-radius: var(--radius-3xl);
-      pointer-events: auto;
-
-      &[data-open] {
-        display: flex;
-      }
-    }
-  }
-
-  /* Enter/exit for small overlays, whichever way they open: a [hidden] toggle
-     (amount calculator, colour picker), the Popover API (phone nav menus) or a
-     modal <dialog>. The closed state is the exit pose, so close animates too;
-     allow-discrete holds display/overlay until it ends. --lc-pop-y sets the
-     direction: popovers drop from their trigger, dialogs rise. */
-  .lc-popover-pop {
-    --lc-pop-from: translateY(var(--lc-pop-y, -0.25rem)) scale(0.96);
-
-    transform-origin: var(--lc-pop-origin, top);
-    transition:
-      opacity 160ms var(--lc-ease-out-expo),
-      transform 240ms var(--lc-ease-out-expo),
-      display 240ms allow-discrete,
-      overlay 240ms allow-discrete;
-
-    &:is([hidden], [popover]:not(:popover-open), dialog:not([open])) {
-      opacity: 0;
-      transform: var(--lc-pop-from);
-    }
-
-    &:is(:not([hidden], [popover], dialog), :popover-open, dialog[open]) {
-      @starting-style {
-        opacity: 0;
-        transform: var(--lc-pop-from);
-      }
-    }
-  }
-}

data/app/assets/tailwind/lostcoords/ui/{reading.css → prose.css}

@@ -58,3 +58,9 @@
     }
   }
 }
+
+@layer utilities {
+  .lc-prose :where(code):not(:where(pre code)) {
+    @apply lc-inline-code;
+  }
+}

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

@@ -1,66 +1,5 @@
 @layer components {
   @media (width < 40rem) {
-    .lc-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(--lc-sheet-floor, 100dvh) 0 auto;
-      translate: 0 -100%;
-      margin: 0;
-      z-index: var(--lc-z-sheet);
-      inline-size: 100%;
-      max-block-size: calc(var(--lc-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(--lc-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 --background is
-         0.045 lightness darker, which is exactly the band you could see. */
-      --lc-sheet-bg: var(--background);
-      @supports (background: light-dark(white, black)) {
-        --lc-sheet-bg: light-dark(var(--background), color-mix(in oklab, var(--muted) 92%, var(--accent)));
-      }
-      background: var(--lc-sheet-bg);
-      color: var(--foreground);
-      box-shadow: 0 -12px 40px -12px color-mix(in oklab, var(--foreground) 45%, transparent);
-      transform: translateY(var(--lc-sheet-offscreen));
-      transition:
-        transform var(--lc-sheet-duration) var(--lc-ease-sheet),
-        display var(--lc-sheet-duration) allow-discrete,
-        overlay var(--lc-sheet-duration) allow-discrete;
-    }
-
-    /* Popover-API reveal (currency): top layer drives display, so showPopover()/
-       hidePopover() animate the slide both ways, with a native ::backdrop. */
-    .lc-sheet[popover] { display: none; flex-direction: column; max-block-size: min(calc(var(--lc-sheet-floor, 100svh) * 0.72), 34rem); }
-    .lc-sheet[popover]:popover-open {
-      display: flex;
-      transform: translateY(0);
-
-      @starting-style { transform: translateY(var(--lc-sheet-offscreen)); }
-    }
-    .lc-sheet[popover]::backdrop {
-      background: var(--lc-scrim);
-      backdrop-filter: blur(2px);
-      opacity: 0;
-      transition:
-        opacity var(--lc-sheet-duration) var(--lc-ease-sheet),
-        display var(--lc-sheet-duration) allow-discrete,
-        overlay var(--lc-sheet-duration) allow-discrete;
-
-      @media (prefers-reduced-motion: reduce) { transition: none; }
-    }
-    .lc-sheet[popover]:popover-open::backdrop { opacity: 1; @starting-style { opacity: 0; } }
-
     /* UIKit's 36×5 grabber. */
     :is([data-lc-sheet-target~="handle"], dialog[data-controller~="lc-sheet"])::before {
       content: "";
@@ -74,7 +13,7 @@
 }
 
 @layer modules {
-  /* Phones: every modal dialog is an iOS sheet (sheet_controller). It floats
+  /* Phones: every modal dialog is an iOS sheet (lc-sheet). It floats
      inset with all corners round while it is short, and docks to the screen
      edges as it reaches the large detent: --lc-sheet-p runs 0 → 1 between them.
      Lives in this layer so it out-ranks a dialog's own frame. */
@@ -88,7 +27,7 @@
 
       position: fixed;
 
-      /* Anchored from the top edge, like .lc-sheet: the keyboard covers it and
+      /* Anchored from the top edge: the keyboard covers it and
          nothing moves. */
       inset: calc(var(--lc-sheet-floor, 100dvh) - var(--lc-sheet-gap)) 0 auto;
       translate: 0 -100%;
@@ -151,7 +90,7 @@
     }
 
     /* Behind a large sheet the page shrinks back and rounds off, over black,
-       as UIKit's page sheet does; sheet_controller drives the variables. */
+       as UIKit's page sheet does; lc-sheet drives the variables. */
     html[data-lc-sheet-page] {
       background: #000;
 

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

@@ -15,6 +15,11 @@
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+
+  /* Muted fills that a card switches to stay visible on it (card.css): bg-tile for choice tiles,
+     alerts, neutral badges, skeletons and key hints; bg-track for toggle group tracks. */
+  --color-tile: var(--lc-tile-bg, var(--muted));
+  --color-track: var(--lc-track-bg, var(--muted));
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
@@ -56,6 +61,11 @@
   --spacing-control-sm: var(--lc-control-sm);
   --spacing-control-md: var(--lc-control-md);
   --spacing-control-lg: var(--lc-control-lg);
+
+  /* In-page layers: z-raised lifts content over its neighbours, z-sticky keeps
+     app chrome above content. Overlays need no z-index; see --lc-z-popover. */
+  --z-index-raised: var(--lc-z-raised);
+  --z-index-sticky: var(--lc-z-sticky);
 }
 
 @theme {
@@ -116,8 +126,13 @@
     --lc-sheet-duration: 500ms;
     --lc-sheet-offscreen: calc(100% + 2rem);
 
+    --lc-z-raised: 1;
+    --lc-z-sticky: 20;
+
+    /* Dialogs, sheets, menus, popovers, tooltips and toasts open in the
+       browser's top layer, above every z-index. These order them only where
+       the Popover API is missing. */
     --lc-z-popover: 30;
-    --lc-z-sheet: 50;
     --lc-z-overlay: 60;
     --lc-z-toast: 70;
 

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

@@ -0,0 +1,23 @@
+@layer components {
+  /* lc-toast-region opens it as a popover; these rules also override the
+     popover defaults, which would centre it and hide it while closed. */
+  .lc-toast-region {
+    position: fixed;
+    inset: auto var(--spacing-gutter) var(--spacing-gutter) auto;
+    z-index: var(--lc-z-toast);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--spacing-related);
+    max-inline-size: calc(100vw - var(--spacing-gutter) * 2);
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    border: 0;
+    background: none;
+    color: inherit;
+
+    &:dir(rtl) { inset: auto auto var(--spacing-gutter) var(--spacing-gutter); }
+    &:empty { display: none; }
+  }
+}

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

@@ -1,4 +1,6 @@
 @layer components {
+  /* lc-tooltip lifts the content into the top layer while it shows. Without
+     JavaScript or the Popover API it shows in place, over its neighbours. */
   .lc-tooltip__content {
     position: absolute;
     inset-block-end: calc(100% + var(--spacing-related));
@@ -6,7 +8,9 @@
     z-index: var(--lc-z-popover);
     inline-size: max-content;
     max-inline-size: min(16rem, calc(100vw - 2rem));
+    overflow: visible;
     padding: var(--spacing-tight) var(--spacing-related);
+    border: 0;
     border-radius: var(--radius-md);
     background: var(--foreground);
     color: var(--background);
@@ -17,31 +21,28 @@
     pointer-events: none;
     opacity: 0;
     visibility: hidden;
-    translate: -50% 0.125rem;
+    translate: -50% 0;
+
+    /* allow-discrete keeps a lifted tooltip in the top layer while it fades out. */
     transition:
       opacity 120ms var(--lc-ease-out),
-      translate 120ms var(--lc-ease-out),
-      visibility 120ms;
+      visibility 120ms,
+      display 120ms allow-discrete,
+      overlay 120ms allow-discrete;
 
-    &:dir(rtl) { translate: 50% 0.125rem; }
+    &:dir(rtl) { translate: 50% 0; }
   }
 
   .lc-tooltip[data-side="bottom"] > .lc-tooltip__content {
     inset-block: calc(100% + var(--spacing-related)) auto;
-    translate: -50% -0.125rem;
   }
 
-  .lc-tooltip:is(:hover, :has(:focus-visible)) > .lc-tooltip__content {
+  .lc-tooltip:is([data-open], :hover, :has(:focus-visible)) > .lc-tooltip__content {
     opacity: 1;
     visibility: visible;
-    translate: -50% 0;
     transition-delay: 300ms;
   }
 
-  .lc-tooltip:is(:hover, :has(:focus-visible)) > .lc-tooltip__content:dir(rtl) {
-    translate: 50% 0;
-  }
-
   .lc-tooltip[data-dismissed] > .lc-tooltip__content {
     opacity: 0;
     visibility: hidden;

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

@@ -31,7 +31,7 @@
   text-box: trim-both cap alphabetic; /* browser-compat: enhancement */
 }
 
-/* Inline code inside running text. base.css applies it to every <code>; prose
+/* Inline code inside running text. base.css applies it to every <code>; prose.css
    applies it inside .lc-prose. */
 @utility lc-inline-code {
   font-family: var(--font-mono);
@@ -49,9 +49,3 @@
     content: none;
   }
 }
-
-@layer utilities {
-  .lc-prose :where(code):not(:where(pre code)) {
-    @apply lc-inline-code;
-  }
-}

data/app/helpers/lostcoords/ui/badge_helper.rb

@@ -58,7 +58,7 @@ module Lostcoords::Ui
       "font-sans text-caption font-medium whitespace-nowrap"
 
     BADGE_TONES = {
-      neutral: "bg-muted text-muted-foreground",
+      neutral: "bg-tile text-muted-foreground",
       success: "bg-success-soft text-success",
       warning: "bg-warning-soft text-warning",
       destructive: "bg-destructive-soft text-destructive",
@@ -86,7 +86,7 @@ module Lostcoords::Ui
       shape = lc_option!(:shape, shape, ICON_BADGE_SHAPES.keys)
       tone = lc_option!(:tone, tone, BADGE_TONES.keys)
       lc_tw(ICON_BADGE_BASE, ICON_BADGE_SIZES.fetch(size), ICON_BADGE_SHAPES.fetch(shape),
-        (tone == :neutral ? "bg-muted text-foreground" : BADGE_TONES.fetch(tone)), extra)
+        (tone == :neutral ? "bg-tile text-foreground" : BADGE_TONES.fetch(tone)), extra)
     end
 
     def lc_avatar_class(size: :md, ink: false, linked: false, extra: nil)

data/app/helpers/lostcoords/ui/button_helper.rb

@@ -1,10 +1,16 @@
 module Lostcoords::Ui
   module ButtonHelper
+    # Disabled controls drop their variant colours for a faint tint and dim ink, so they read as unavailable on any surface.
+    BUTTON_DISABLED =
+      "disabled:cursor-not-allowed disabled:shadow-none " \
+      "disabled:[--lc-button-bg:color-mix(in_oklab,var(--foreground)_10%,transparent)] " \
+      "disabled:text-[color-mix(in_oklab,var(--foreground)_38%,transparent)]"
+
     BUTTON_BASE =
       "inline-flex items-center justify-center gap-related rounded-pill font-sans " \
       "whitespace-nowrap no-underline cursor-pointer " \
       "transition-[background-color,border-color,color,box-shadow,transform,translate,scale,filter] duration-(--lc-motion-control) ease-(--lc-ease-out) " \
-      "motion-safe:hover:-translate-y-px motion-safe:active:translate-y-px active:shadow-none disabled:opacity-40 disabled:pointer-events-none " \
+      "motion-safe:not-disabled:hover:-translate-y-px motion-safe:not-disabled:active:translate-y-px active:shadow-none #{BUTTON_DISABLED} " \
       "[&_svg]:block [&_svg:not([class*='size-'])]:size-[1.1em] [&_svg]:shrink-0"
 
     # Height comes from the shared control sizes; an icon trims the padding on its side.
@@ -15,15 +21,15 @@ module Lostcoords::Ui
     }.freeze
 
     BUTTON_HOVER =
-      "hover:bg-[color-mix(in_oklab,var(--lc-button-bg,var(--secondary))_94%,var(--lc-button-ink,var(--foreground)))] " \
-      "active:bg-[color-mix(in_oklab,var(--lc-button-bg,var(--secondary))_94%,var(--lc-button-ink,var(--foreground)))]"
+      "not-disabled:hover:bg-[color-mix(in_oklab,var(--lc-button-bg,var(--secondary))_94%,var(--lc-button-ink,var(--foreground)))] " \
+      "not-disabled:active:bg-[color-mix(in_oklab,var(--lc-button-bg,var(--secondary))_94%,var(--lc-button-ink,var(--foreground)))]"
 
     BUTTON_VARIANTS = {
       primary: "border border-transparent [--lc-button-bg:var(--primary)] [--lc-button-ink:var(--primary-foreground)] bg-(--lc-button-bg) text-(--lc-button-ink) #{BUTTON_HOVER}",
       secondary: "border border-transparent [--lc-button-bg:var(--secondary)] [--lc-button-ink:var(--secondary-foreground)] bg-(--lc-button-bg) text-(--lc-button-ink) #{BUTTON_HOVER}",
       outline: "border border-border bg-transparent text-(--lc-button-ink,var(--foreground)) #{BUTTON_HOVER}",
       glass: "[--lc-button-bg:var(--_lc-glass-fill)] text-(--lc-button-ink,var(--foreground)) #{BUTTON_HOVER}",
-      ghost: "border border-transparent bg-transparent text-muted-foreground hover:text-(--lc-button-ink,var(--foreground)) #{BUTTON_HOVER}",
+      ghost: "border border-transparent bg-transparent text-muted-foreground not-disabled:hover:text-(--lc-button-ink,var(--foreground)) #{BUTTON_HOVER}",
       destructive: "border border-transparent [--lc-button-bg:color-mix(in_oklab,var(--destructive)_60%,black)] [--lc-button-ink:#fff] bg-(--lc-button-bg) text-(--lc-button-ink) #{BUTTON_HOVER}"
     }.freeze
 
@@ -31,8 +37,8 @@ module Lostcoords::Ui
       "lc-press inline-grid place-items-center shrink-0 border-0 bg-transparent " \
       "text-muted-foreground cursor-pointer no-underline " \
       "transition-[background-color,color,transform,scale] duration-(--lc-motion-quick) ease-(--lc-ease-out) " \
-      "hover:text-(--lc-button-ink,var(--foreground)) #{BUTTON_HOVER} " \
-      "disabled:opacity-40 disabled:pointer-events-none " \
+      "not-disabled:hover:text-(--lc-button-ink,var(--foreground)) #{BUTTON_HOVER} " \
+      "#{BUTTON_DISABLED} " \
       "[&_svg]:block [&_svg]:shrink-0"
 
     ICON_BUTTON_SHAPES = {