layered-ui-rails 0.25.0 → 0.26.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d892f7efaed58d161179cc5478eaf0961b4b31c2e822aaba4063143343aeac31
-  data.tar.gz: 28e37164714d1a354b255a10a3833069b94f6202480082b29e70fcc23a485ffa
+  metadata.gz: 63d902f842afed6b1e9d7784677a2a748d3775ef9884bb27f9ed6439133b3638
+  data.tar.gz: 25d8cf1f06bfadd24dc8e97efd1cc14f4d818ce5285e4da980dcd65f21d96ea9
 SHA512:
-  metadata.gz: d2d3c833c03dd9c56d88bf578fb69f27ddf0eda03baf31ebb0953e6de0bb9b5ae1248d444e77c362d18e4288aad6adbae28a4959f95c68a392b373417c23040d
-  data.tar.gz: 661964c07f3d03e1d4ee937a9f4b3f3d456491fadb9ee67778cee063d9eda535fbf02a276bcfe1a3c0a1b67579ece03afda66a5e1d98c90ebe6b232de6c05731
+  metadata.gz: 97a9c888d83d7a4a2317eae38fdd77e91dcb8eeab33b76b85bb7dc8afb9c7d8349ff5f9b693633f16218b8a906d3f2029b1753a6f730910a83f47169d523f4e0
+  data.tar.gz: 80572d1c7b424944cc9a7b324b749a01bc3708f0251eacc0ea2f4faa6be864bfbc8249b4ea6ed68961878a2f29bd1d516acb84f6af7cd50d73123bb09302c062

data/.claude/skills/layered-ui-rails/references/CSS.md

@@ -11,11 +11,14 @@ Two patterns deviate from strict BEM by design - leave them in place rather than
 **Bare-link styling.** `.l-ui-page` and `.l-ui-panel__body` style descendant `<a>` elements that do not already carry an `l-ui-` class:
 
 ```css
-.l-ui-page a:not([class*="l-ui-"]),
-.l-ui-panel__body a:not([class*="l-ui-"]) { ... }
+:where(.l-ui-page, .l-ui-panel__body) :where(a:not([class*="l-ui-"])) { ... }
 ```
 
-This gives author-written links inside long-form content (Markdown, prose, ad-hoc views) consistent underline/colour treatment without forcing an explicit class on every link. Engine elements opt out automatically because their class names contain `l-ui-`. Side effect: any host-app class containing the substring `l-ui-` will also opt an `<a>` out of bare-link styling.
+This gives author-written links inside long-form content (Markdown, prose, ad-hoc views) consistent underline/colour treatment without forcing an explicit class on every link. Engine elements opt out automatically because their class names contain `l-ui-`.
+
+The whole selector is wrapped in `:where()`, so it has zero specificity. That matters: host apps build their own components, and those class names do not contain `l-ui-`, so their links are caught by this rule. With zero specificity a single host-app class (`.calculator-rail__link { ... }`) overrides it by ordinary cascade rules, with no `!important` and no specificity games. Keep it that way - this is a default, and a default must never beat author styles. Note the `focus-ring` state styles still carry the specificity of their own `:focus-visible` pseudo-class.
+
+Side effect: any host-app class containing the substring `l-ui-` will also opt an `<a>` out of bare-link styling.
 
 ## Body modifiers
 
@@ -346,6 +349,8 @@ The listbox and filtered-out options are hidden with the `hidden` attribute, so
 .l-ui-popover__menu-divider      Horizontal rule separating groups of items (apply to an <hr>)
 ```
 
+The panel takes `overflow: visible`, overriding the UA stylesheet's `overflow: auto` for `[popover]`. It is `height: fit-content` with no max-height, so in-flow content can't overflow it anyway, and the UA rule only did harm: it made the panel a scroll container that clipped any child painting outside it - a combobox's absolutely positioned listbox above all, which is out of flow and so never counted in the panel's height. A popover lives in the top layer, so a child hanging past its edge paints cleanly over the page. Give a popover that genuinely needs to scroll its own `max-height` and `overflow-y`.
+
 ## Breadcrumbs
 
 ```
@@ -526,6 +531,7 @@ Tier 2 - Full palette (override individually as needed):
 --button-primary-text   Primary button text (defaults to --accent-foreground)
 --button-primary-icon   Icon color on filled icon buttons (defaults to --button-primary-text)
 --danger                Danger/error color
+--danger-foreground     Text/icon color on solid danger buttons
 --danger-light          Light danger background
 --danger-text           Danger text color
 --success-bg            Success background

data/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file. This project follows [Semantic Versioning](https://semver.org/).
 
+## [0.26.0] - 2026-09-19
+
+### Added
+
+- `--danger-foreground`: the text and icon colour on a solid danger button, split out of the hard-coded `text-white` on `.l-ui-button--danger`. It mirrors the way `--accent-foreground` pairs with `--accent` - white in light mode (7.47:1 on `#A71B1B`), near-black in dark mode (4.75:1 on `#F04242`). The previous white label in dark mode gave 3.78:1, short of the 4.5:1 WCAG 2.2 AA needs for the button's 14px text.
+
+### Changed
+
+- Bare-link prose styling carries zero specificity: the selector on `.l-ui-page` and `.l-ui-panel__body` descendant links is now wrapped in `:where()`. It is a default, so a single host-app class overrides it by ordinary cascade order, with no `!important` and no specificity games. The `focus-ring` state styles still carry the specificity of their own `:focus-visible` pseudo-class.
+- Breaking: a host that overrides `--danger` to a darker red in dark mode now gets the near-black label from `--danger-foreground`, and should set `--danger-foreground: oklch(1 0 0)` to restore white.
+
+## [0.25.1] - 2026-08-28
+
+### Fixed
+
+- A popover no longer clips its content. `[popover]` takes `overflow: auto` from the UA stylesheet, which made the panel a scroll container; since the panel is `height: fit-content`, an absolutely positioned child never counted towards its height and so was cut off - a combobox inside a popover showed a listbox clipped to the height of its own label and input. `.l-ui-popover` now sets `overflow: visible`, and a popover that genuinely needs to scroll can set its own `max-height` and `overflow-y`.
+
 ## [0.25.0] - 2026-08-23
 
 ### Added

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

@@ -70,6 +70,7 @@
     --button-primary-text: var(--accent-foreground);
     --button-primary-icon: var(--button-primary-text);
     --danger: oklch(0.47 0.1742 27.23);
+    --danger-foreground: oklch(1 0 0);
     --danger-light: oklch(0.9663 0.0166 17.44);
     --danger-text: oklch(0.443 0.1634 27.14);
     --success-bg: oklch(0.8395 0.1698 152.91);
@@ -127,6 +128,7 @@
     --button-primary-text: var(--accent-foreground);
     --button-primary-icon: var(--button-primary-text);
     --danger: oklch(0.6362 0.2102 25.49);
+    --danger-foreground: oklch(0.2044 0 0);
     --danger-light: oklch(0.2596 0.1021 28.32);
     --danger-text: oklch(0.6607 0.1921 24.02);
     --success-bg: oklch(0.3385 0.0852 150.45);
@@ -236,6 +238,7 @@
   --color-button-primary-text: var(--button-primary-text);
   --color-button-primary-icon: var(--button-primary-icon);
   --color-danger: var(--danger);
+  --color-danger-foreground: var(--danger-foreground);
   --color-danger-light: var(--danger-light);
   --color-danger-text: var(--danger-text);
   --color-success-bg: var(--success-bg);
@@ -515,8 +518,10 @@
   @apply mx-[calc(var(--l-ui-gutter)*-1)];
 }
 
-.l-ui-page a:not([class*="l-ui-"]),
-.l-ui-panel__body a:not([class*="l-ui-"]) {
+/* Bare-link styling for author-written prose. Wrapped in :where() so the whole selector carries
+   zero specificity: it is a default, and any host-app rule (even a single class) must be able to
+   win without out-specifying the engine. */
+:where(.l-ui-page, .l-ui-panel__body) :where(a:not([class*="l-ui-"])) {
   @apply text-foreground underline underline-offset-4 decoration-foreground-muted/60
          rounded-sm
          focus-ring;
@@ -1282,7 +1287,7 @@
 }
 
 .l-ui-button--danger {
-  @apply text-white
+  @apply text-danger-foreground
          bg-danger;
 }
 
@@ -2647,6 +2652,15 @@ pre.l-ui-surface {
          text-sm text-foreground
          bg-background
          border border-border rounded-sm;
+
+  /* The UA stylesheet gives [popover] `overflow: auto`, which makes the panel
+     a scroll container and so clips any child that paints outside it - a
+     combobox's absolutely positioned listbox, most of all, which is out of
+     flow and therefore never counted in the panel's height. The panel is
+     `height: fit-content` with no max-height, so in-flow content can't
+     overflow it and the UA rule has nothing else to do; a popover lives in the
+     top layer, so a child hanging past its edge paints cleanly over the page. */
+  overflow: visible;
 }
 
 /* A list of actions inside a popover (e.g. a table row's "more" menu).

data/lib/layered/ui/version.rb

@@ -1,5 +1,5 @@
 module Layered
   module Ui
-    VERSION = "0.25.0"
+    VERSION = "0.26.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: layered-ui-rails
 version: !ruby/object:Gem::Version
-  version: 0.25.0
+  version: 0.26.0
 platform: ruby
 authors:
 - layered.ai