layered-ui-rails 0.18.4 → 0.20.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 62247f3f61f465b4c4c576b807cf69c1f39b2bba73f758b2f2756210515ecbfc
-  data.tar.gz: 5c935329c2269e3f160f2a835958db103f40cb2cfe168ae57199a4aa81447f3e
+  metadata.gz: f93bf15a80c67a460c8eada9407beb94507d3dce7fe511e935355abcd329a4d8
+  data.tar.gz: 06d49cc35c54fa21fddb6ced245abfa9ad4783003a03074beb9467e03f46cbb1
 SHA512:
-  metadata.gz: 17ea18aaf95c45154f42f6e565ed7e4685e26ac668542195041f55bfd6a1059521c878148bb100e26e03dc97023a08ae4e055f4c0318b8d70acb6b3d2d55ab00
-  data.tar.gz: 8dce1dac58aaee5f41ac5df38494122102f05c92ad71286940e49d47daedf47f84e952101feb805e8ea063b3c734d8d1b69d515460ae079682ec08109c09485e
+  metadata.gz: f4435d521aa96f5e74b0d1183ae5d486b795d28eb6d6dc16728b8147599715a5e49b64c0a226a78b5aed479c6586dd73f02962321d2e976e693453f79d022fe6
+  data.tar.gz: 21030bae58aefc605b07370d6dcc615a1f1441566a72b28859068151109d41005b1fc333234878293a4c02d424d5896f9b3230886f1efcfc071ce3cbb493a7d4

data/.claude/skills/layered-ui-rails/SKILL.md

@@ -181,6 +181,7 @@ Quick reference:
 | `l_ui_theme_toggle` | Default header theme toggle button |
 | `l_ui_authentication` | Default header login/register buttons (Devise) |
 | `l_ui_navigation_toggle` | Default header sidebar toggle button |
+| `l_ui_popover(id: nil, placement: :bottom, align: :start, container: {})` | Floating panel anchored to a trigger, built on the native `popover` attribute |
 
 ## CSS classes
 
@@ -192,13 +193,17 @@ Key components:
 |---|---|
 | Page layout | `.l-ui-page`, `--with-navigation`, `__vertically-centered`, `__narrow` (narrow ~384px column, md:max-w-sm), `__contained` (wide column capped at `--l-ui-contained-width`) |
 | Buttons | `.l-ui-button`, `--primary`, `--outline`, `--outline-danger`, `--full`, `--icon` |
+| Hero | `.l-ui-hero` (pair with `.l-ui-bleed`), `__inner`, `__title`, `__title-accent`, `__subtitle`, `__actions`, `__media`, `__media-img` |
 | Surfaces | `.l-ui-surface`, `--highlighted`, `--sm`, `--collapsible`, `--collapsible-highlighted` |
+| Cards | `.l-ui-card`, `--gradient`, `__eyebrow`, `__title`, `__icon`, `__body` |
+| Tints | `.l-ui-tint-1` … `.l-ui-tint-5` (shared decorative palette; sets the `--l-ui-tint-*` role variables) |
 | Forms | `.l-ui-form`, `.l-ui-form__group`, `.l-ui-form__field`, `.l-ui-label`, `.l-ui-select` |
 | Tables | `.l-ui-table`, `.l-ui-table__header`, `.l-ui-table__cell`, `--primary`, `--action`, `.l-ui-table__action`, `--danger` |
 | Badges | `.l-ui-badge`, `--rounded`, `--default`, `--success`, `--warning`, `--danger` |
 | Notices | `.l-ui-notice` (base), `--success`, `--warning`, `--error` |
 | Tabs | `.l-ui-tabs`, `.l-ui-tabs__list`, `.l-ui-tabs__tab`, `--active` |
 | Modal | `.l-ui-modal`, `.l-ui-modal__header`, `.l-ui-modal__body` |
+| Popover | `.l-ui-popover` |
 
 ## Stimulus controllers
 
@@ -214,6 +219,7 @@ All controllers use the `l-ui--` namespace and are auto-registered via importmap
 | Panel resize | `l-ui--panel-resize` | Panel width drag handle |
 | Modal | `l-ui--modal` | Native `<dialog>` with focus trap |
 | Tabs | `l-ui--tabs` | Accessible tabbed interface |
+| Popover | `l-ui--popover` | Positions a native `popover`-attribute element relative to its trigger, with auto-flip |
 | Search form | `l-ui--search-form` | Multi-scope search with Turbo support and pagination param preservation |
 
 ## Theming

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

@@ -106,6 +106,31 @@ Accessible tabbed interface with keyboard navigation.
 </div>
 ```
 
+## Popover (`l-ui--popover`)
+
+Positions a native `popover`-attribute element relative to its trigger, with auto-flip near viewport edges. Showing, hiding, light-dismiss (outside click), and Escape-to-close are all handled by the browser via the `popover` attribute - this controller only handles placement.
+
+**Targets:** `trigger`, `popover`
+**Values:** `placement` (String, default `"bottom"`; one of `"top"`, `"bottom"`, `"left"`, `"right"`), `align` (String, default `"start"`; `"start"` or `"end"` - which edge of the popover flushes with the trigger on the cross axis)
+
+```html
+<div data-controller="l-ui--popover">
+  <button type="button" popovertarget="my-popover"
+          data-l-ui--popover-target="trigger"
+          class="l-ui-button l-ui-button--outline">
+    Open popover
+  </button>
+  <div id="my-popover" popover="auto" class="l-ui-popover"
+       data-l-ui--popover-target="popover">
+    Content here.
+  </div>
+</div>
+```
+
+Features:
+- Repositions on open, and while open on window resize/scroll
+- Flips to the opposite side if the preferred placement would overflow the viewport
+
 ## Panel (`l-ui--panel`)
 
 Resizable side panel. Full-width overlay on mobile, docked sidebar on desktop.

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

@@ -47,6 +47,16 @@ The page gutter (horizontal and bottom padding) is the `--l-ui-gutter` custom pr
 
 `.l-ui-page` is a flex column (`flex flex-1 flex-col`) and uses `overflow-x-clip` to hold its content to the available width: intrinsically wide content (tables, code blocks, long unbroken strings) is clipped rather than expanding the page or adding a horizontal page scrollbar. So make such content scroll internally (e.g. wrap a table in an `overflow-x-auto` element) instead of expecting the page to grow.
 
+## Typography
+
+Base elements (`h1`-`h4`, `p`, `ul`/`ol`, `code`, etc.) are styled via `@layer base` so the host app can override them. Headings set type scale and weight only - they carry **no** divider by default, so the heading level can be chosen for document structure alone (e.g. an `h2` inside a panel header or hero, without an unwanted rule).
+
+```
+.l-ui-heading--section            Opt-in bottom divider; add to any heading to separate a section from the content above it
+```
+
+Add `l-ui-heading--section` wherever a visual section rule is wanted (the section headings on the documentation pages use it). It applies to whichever heading element you already have, so it does not change the heading level.
+
 ## Buttons
 
 Always combine the `l-ui-button` base class with a colour modifier (e.g. `l-ui-button l-ui-button--primary`):
@@ -73,6 +83,73 @@ Any button variant is automatically styled as disabled when the `disabled` HTML
 
 For destructive actions use `l-ui-button--danger` (solid) or `l-ui-button--outline-danger` (bordered).
 
+## Hero
+
+Full-bleed marketing hero for the top of a landing page. Add `l-ui-bleed` to the section to break out of the page gutter, and pair the body with `l-ui-body--glass-header` + `l-ui-body--flush-top` so it sits flush to the viewport top with optional media showing through the glass header (see Page layout above):
+
+```
+.l-ui-hero                       Full-bleed hero section (pair with l-ui-bleed); ships with a default background
+.l-ui-hero__inner                Content column, capped at the contained width with the page gutter
+.l-ui-hero__title                Large, tight-tracked hero heading
+.l-ui-hero__title-accent         Gradient-clipped accent span for part of the title
+.l-ui-hero__subtitle             Supporting subtitle paragraph below the title
+.l-ui-hero__actions              Row of call-to-action buttons or links
+.l-ui-hero__media                Optional decorative background media layer
+.l-ui-hero__media--light/--dark  Theme-specific media; only the active theme's variant shows
+.l-ui-hero__media-img            Image inside a media layer (covers, right-aligned)
+```
+
+The `__inner` picks up the fixed-header offset automatically under `l-ui-body--flush-top`. A token-driven overlay over the media keeps text legible and fades the hero into the page background below.
+
+A good-looking default background ships with the gem and is on by default, driven by the `--l-ui-hero-image` token (light/dark). Re-skin it by overriding `--l-ui-hero-image` in the overrides file (global) or inline on one section (per-hero); set it to `none` to remove it. For per-page art with proper light/dark `<img>` loading, add a `l-ui-hero__media` picture instead - it paints above the token background.
+
+## Tint palette
+
+A decorative, **control-agnostic** colour palette, separate from the Tier 1 brand `--accent`. `--accent` is the single interactive/emphasis colour (primary buttons, active tab/nav); the tints are a set of categorical decorative colours (cards, tags, sections). Both use `-foreground` for "the readable text/icon colour on this colour", so they read as siblings: `--accent` / `--accent-foreground` vs `--l-ui-tint-1-…` / `--l-ui-tint-1-foreground`.
+
+```
+.l-ui-tint-1 … .l-ui-tint-5   Select a palette slot (defaults: teal, green, amber, rose, purple)
+```
+
+Each `l-ui-tint-N` class only sets four "current tint" role variables, which any control reads:
+
+```
+--l-ui-tint-border       Border / outline tone
+--l-ui-tint-foreground   Strong text / icon tone
+--l-ui-tint-from         Gradient fill start
+--l-ui-tint-to           Gradient fill end
+```
+
+The defaults live in `@layer base` as `--l-ui-tint-N-border` / `-foreground` / `-from` / `-to` (light and dark). **Slot numbers are palette positions, not fixed hues**, so re-skinning a slot (override the `--l-ui-tint-N-*` tokens in the overrides file) never makes a class name misleading. The tints are independent of `--accent`; to colour a control with the brand accent instead, point the role variables at `var(--accent)` inline - no special class needed. Apply `l-ui-tint-N` to any control that reads the role variables (the card below is one consumer).
+
+## Card
+
+A content card in two composable styles. The base `l-ui-card` is bordered; add `l-ui-card--gradient` for a soft tint fill behind the same border. Colour comes from a separate `l-ui-tint-N` slot (see Tint palette above), so style and colour compose independently (`l-ui-card l-ui-card--gradient l-ui-tint-1`):
+
+```
+.l-ui-card                 Base card (bordered, on the surface background)
+.l-ui-card--gradient       Adds the 135° tint fill behind the border
+.l-ui-card__eyebrow        Small uppercase label above the title
+.l-ui-card__title          Card heading, coloured by the active tint
+.l-ui-card__icon           Optional title icon, painted in the tint colour (set --l-ui-icon-src inline)
+.l-ui-card__body           Body copy in the muted foreground colour
+```
+
+The card reads the shared `--l-ui-tint-*` role variables, falling back to the neutral `--border`/`--foreground` when no tint slot is present (so a plain `l-ui-card` is a neutral bordered card). The gradient modifier reads `--l-ui-tint-from`/`-to`. Set the role variables inline (or point them at `var(--accent)`, which is already theme-aware) for a one-off colour - but note that fixed inline values are theme-fixed: for a custom colour that should adapt to dark mode, supply light and dark values via a `.dark` rule (or `prefers-color-scheme`) rather than inline. `__icon` uses the same mask technique as the primary-button icon, so set `--l-ui-icon-src` at the call site.
+
+## Logo block
+
+A responsive strip of brand or partner logos (a "trusted by" / "works with" row). Logos are normalised to a common height and flattened to one tone (black in light, white in dark) so a mismatched set reads as a tidy row. Wraps three-up on small screens and spreads to a single row from `md` up:
+
+```
+.l-ui-logo-block                  Strip container; wraps three-up on small screens, single row from md
+.l-ui-logo-block__item            Wrapper for one logo (give it role="listitem")
+.l-ui-logo-block__logo            The logo image; normalised height, flattened to the foreground tone
+.l-ui-logo-block__logo--wordmark  Taller variant for wide name lockups
+```
+
+Mark the container `role="list"` with an `aria-label`, each item `role="listitem"`, and keep meaningful `alt` text on every logo. Supply normal full-colour logos - the tone is applied with a CSS filter, so source colours are ignored.
+
 ## Surfaces
 
 Always combine the `l-ui-surface` base class with any modifiers (e.g. `l-ui-surface l-ui-surface--highlighted`):
@@ -210,6 +287,16 @@ Always combine the base block with a modifier, e.g. `<span class="l-ui-badge l-u
 .l-ui-modal__body    Scrollable modal content
 ```
 
+## Popover
+
+```
+.l-ui-popover                    popover-attribute element; positioned by the l-ui--popover Stimulus controller
+.l-ui-popover__menu              Full-width list wrapper for a menu of actions inside a popover
+.l-ui-popover__menu-item         Full-width action link/button inside l-ui-popover__menu
+.l-ui-popover__menu-item--danger Danger styling for a destructive menu item
+.l-ui-popover__menu-divider      Horizontal rule separating groups of items (apply to an <hr>)
+```
+
 ## Breadcrumbs
 
 ```

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

@@ -322,6 +322,51 @@ The button does not need to be inside the helper's wrapper, and no `data-control
 
 Calling `dialog.showModal()` directly is not supported - it bypasses the `l-ui--modal` controller and skips scroll lock, focus restoration, open-count tracking, and the screen-reader announcement.
 
+## Popover
+
+```ruby
+l_ui_popover(id: nil, placement: :bottom, align: :start, container: {}, &block)
+```
+
+- `id` (String, optional) - DOM id for the popover element; defaults to an auto-generated id
+- `placement` (Symbol, optional) - `:top`, `:bottom` (default), `:left`, or `:right`. Flips automatically if it would overflow the viewport
+- `align` (Symbol, optional) - `:start` (default) flushes the popover's leading edge with the trigger's; `:end` flushes its trailing edge instead. For example, `placement: :bottom, align: :end` hangs the popover down and to the left of a trigger at the right end of a row
+- `container` (Hash, optional) - extra HTML attributes for the wrapping `<div>` (e.g. `class:`)
+- `&block` - the block's content is the popover body; call `p.trigger(**options, &block)` inside it to render the trigger button
+
+```erb
+<%= l_ui_popover(placement: :bottom) do |p| %>
+  <% p.trigger(class: "l-ui-button l-ui-button--outline") do %>
+    Options
+  <% end %>
+  <p>Popover content.</p>
+<% end %>
+```
+
+Renders the trigger `<button popovertarget="...">` and the `popover="auto"` element (`class="l-ui-popover"`), and wires the `l-ui--popover` Stimulus controller for placement. Showing, hiding, light-dismiss (outside click), and Escape-to-close are all handled natively by the browser via the `popover` attribute - no Stimulus action is needed to open or close it.
+
+If the trigger contains only an icon (no visible text), pass `aria-label:` to `p.trigger` so the button has an accessible name.
+
+For a list of actions (e.g. a "more" menu on a table row), wrap the items in a `<div class="l-ui-popover__menu">` and give each link/button `l-ui-popover__menu-item` (add `l-ui-popover__menu-item--danger` for destructive actions, and an `<hr class="l-ui-popover__menu-divider">` to separate groups of items):
+
+```erb
+<%= l_ui_table(@users, columns: [...],
+    actions: ->(r) {
+      l_ui_popover(align: :end) do |p|
+        p.trigger(class: "l-ui-button l-ui-button--outline l-ui-button--icon l-ui-button--small", "aria-label" => "Actions for #{r.name}") do
+          image_tag "layered_ui/icon_more.svg", alt: "", class: "l-ui-icon l-ui-icon--sm", aria: { hidden: true }
+        end
+        tag.div(class: "l-ui-popover__menu") do
+          safe_join([
+            link_to("Edit", edit_user_path(r), class: "l-ui-popover__menu-item"),
+            tag.hr(class: "l-ui-popover__menu-divider"),
+            button_to("Delete", user_path(r), method: :delete, class: "l-ui-popover__menu-item l-ui-popover__menu-item--danger")
+          ])
+        end
+      end
+    }) %>
+```
+
 ## Header
 
 ```ruby

data/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 All notable changes to this project will be documented in this file. This project follows [Semantic Versioning](https://semver.org/).
 
+## [0.20.0] - 2026-07-08
+
+### Added
+
+- Popovers: floating panels anchored to a trigger button, built on the native HTML `popover` attribute. Showing, hiding, light-dismiss (outside click), and Escape-to-close are all handled by the browser; the new `l-ui--popover` Stimulus controller only computes placement, flipping to the opposite side if the preferred side would overflow the viewport. Use the `l_ui_popover` helper (options: `id:`, `placement:` of `:top`/`:bottom`/`:left`/`:right`, `align:` of `:start`/`:end`, `container:`) with `p.trigger` for the button, or wire the `l-ui-popover` class and controller targets by hand for full control over markup.
+- Popover menus: `l-ui-popover__menu`, `l-ui-popover__menu-item`, `l-ui-popover__menu-item--danger`, and `l-ui-popover__menu-divider` style a list of actions inside a popover - e.g. a "more" menu on a table row via `l_ui_table`'s `actions:` proc. Give an icon-only trigger an `aria-label` so it has an accessible name.
+- `icon_more.svg` (vertical ellipsis) added to the bundled icon set, for "more actions" popover triggers.
+
+### Changed
+
+- Navigation items now show a `surface` background on hover, matching the hover treatment of other menu rows. The active item keeps its highlighted background on hover.
+- The overrides generator now stamps the gem version it was generated from into the overrides file's header comment.
+
+## [0.19.0] - 2026-06-15
+
+### Added
+
+- `l-ui-hero`: a full-bleed marketing hero for the top of a landing page, with `__inner`, `__title`, `__title-accent` (gradient-clipped emphasis span), `__subtitle`, and `__actions`. Pair the section with `l-ui-bleed` and the body with `l-ui-body--glass-header` + `l-ui-body--flush-top` to sit flush to the viewport top behind the glass header. Ships with a default light/dark background driven by the `--l-ui-hero-image` token (override globally, per-hero inline, or set to `none`); supply per-page art with the optional `l-ui-hero__media`/`__media-img` layer (`--light`/`--dark` variants for theme-aware `<img>` loading).
+- `l-ui-card`: a content card in two composable styles - the base bordered card plus `l-ui-card--gradient` for a soft tint fill behind the same border - with `__eyebrow`, `__title`, `__icon` (masked, set `--l-ui-icon-src` inline), and `__body`. Colour comes from a separate tint slot, so style and colour compose independently; a plain `l-ui-card` falls back to neutral `--border`/`--foreground`.
+- Decorative tint palette: `l-ui-tint-1` … `l-ui-tint-5` set the shared `--l-ui-tint-border`/`-foreground`/`-from`/`-to` role variables that tint-aware controls (such as the card) read. The palette is categorical and independent of the brand `--accent`; slot numbers are palette positions, not fixed hues, and each slot's `--l-ui-tint-N-*` tokens can be re-skinned in the overrides file (light and dark).
+- `l-ui-logo-block`: a responsive "trusted by" / "works with" strip with `__item`, `__logo`, and `__logo--wordmark`. Logos are normalised to a common height and flattened to a single tone (black in light, white in dark); wraps three-up on small screens and spreads to one row from `md` up.
+- `l-ui-heading--section`: an opt-in bottom divider that can be added to any heading to separate a section from the content above it, without changing the heading level.
+- The overrides generator now scaffolds commented-out `--l-ui-hero-image` and `--l-ui-tint-*` token blocks (light and dark) so hosts can re-skin the hero background and tint palette. Pass `--force` to `layered:ui:create_overrides` to regenerate an existing overrides file and pick up the new scaffolding (this overwrites the file, so back up your customisations first).
+
+### Breaking
+
+- Headings (`h1`-`h4`) now set type scale and weight only and carry no divider by default. Previously `h2` rendered a bottom border; the divider is now opt-in via `l-ui-heading--section`. This lets the heading level be chosen for document structure alone (e.g. an `h2` inside a panel header or hero) without an unwanted rule. Add `l-ui-heading--section` to any `h2` that should keep its previous divider. See `UPGRADING.md`.
+
 ## [0.18.4] - 2026-06-14
 
 ### Added
@@ -56,10 +84,13 @@ All notable changes to this project will be documented in this file. This projec
 - `--l-ui-gutter` custom property (default `1rem`) now drives the page's horizontal and bottom padding, shared with `.l-ui-header` so the two always align. Override it on a container to retune the gutter in one place.
 - `.l-ui-bleed` utility to take a child element edge-to-edge by cancelling the current page gutter (e.g. a full-bleed hero), with no negative-margin guesswork.
 
+### Breaking
+
+- `l-ui-page__width-constrained` renamed to `l-ui-page__narrow`. The old name read as a general page-width container, but it is a narrow ~384px column for any compact, centred content (the auth pages are one use). See `UPGRADING.md`.
+- Install flow: the engine's CSS is now served directly from the gem using [tailwindcss-rails' engine support](https://github.com/rails/tailwindcss-rails#rails-engines-support-experimental) instead of being copied into the host app. The install generator no longer creates `app/assets/tailwind/layered_ui.css`; instead it adds `@import "../builds/tailwind/layered_ui";` to your `application.css`. The CSS now stays in sync with the installed gem version automatically - no need to re-run the generator after upgrading.
+
 ### Changed
 
-- **Breaking:** `l-ui-page__width-constrained` renamed to `l-ui-page__narrow`. The old name read as a general page-width container, but it is a narrow ~384px column for any compact, centred content (the auth pages are one use). See `UPGRADING.md`.
-- **Breaking (install flow):** the engine's CSS is now served directly from the gem using [tailwindcss-rails' engine support](https://github.com/rails/tailwindcss-rails#rails-engines-support-experimental) instead of being copied into the host app. The install generator no longer creates `app/assets/tailwind/layered_ui.css`; instead it adds `@import "../builds/tailwind/layered_ui";` to your `application.css`. The CSS now stays in sync with the installed gem version automatically - no need to re-run the generator after upgrading.
 - The engine layout now links the compiled Tailwind build explicitly (`stylesheet_link_tag "tailwind"`) rather than the `:app` bundle, matching tailwindcss-rails' own convention and avoiding a stray link to the engine's intermediate build file.
 - Moved the engine's source stylesheet from `app/assets/tailwind/layered/ui/styles.css` to `app/assets/tailwind/layered_ui/engine.css` (the path tailwindcss-rails' engine support expects).
 

data/README.md

@@ -36,7 +36,7 @@ An open source, Rails 8+ engine that provides WCAG 2.2 AA compliant design token
 - **Dark/light theme** - system preference detection with localStorage persistence and manual toggle
 - **Responsive layout** - header, sidebar navigation, main content area, and optional resizable panel
 - **WCAG 2.2 AA compliant** - skip links, focus indicators, ARIA attributes, and 4.5:1 contrast ratios
-- **Components** - buttons, forms, surfaces, tables, tabs, notices, badges, conversations, modals, and pagination
+- **Components** - buttons, forms, surfaces, tables, tabs, notices, badges, conversations, modals, popovers, and pagination
 - **Optional integrations** - Devise authentication and Pagy pagination with styled views
 - **Customisable branding** - Override the default logos and icons and colors
 - **Google Lighthouse** - `layered-ui-rails` scores a [perfect 100](https://github.com/layered-ai-public/layered-ui-rails/raw/refs/heads/main/test/dummy/app/assets/images/lighthouse.webp) across all four Google Lighthouse categories - performance, accessibility, best practices, and SEO

data/app/assets/images/layered_ui/icon_more.svg

@@ -0,0 +1,5 @@
+<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="5" r="2" />
+  <circle cx="12" cy="12" r="2" />
+  <circle cx="12" cy="19" r="2" />
+</svg>

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

@@ -79,6 +79,30 @@
     --warning-text: oklch(0.3625 0.0732 93.12);
     --error-bg: oklch(0.748 0.1306 20.64);
     --error-text: oklch(0.2248 0.0874 28.11);
+    /* Decorative tint palette (categorical colours, independent of --accent; consumed via the
+       .l-ui-tint-* role variables). Slot numbers are palette positions, not fixed hues. */
+    --l-ui-tint-1-border: oklch(0.6 0.1 195);
+    --l-ui-tint-1-foreground: oklch(0.45 0.1 195);
+    --l-ui-tint-1-from: oklch(0.95 0.04 195);
+    --l-ui-tint-1-to: oklch(0.88 0.07 195);
+    --l-ui-tint-2-border: oklch(0.55 0.14 145);
+    --l-ui-tint-2-foreground: oklch(0.45 0.14 145);
+    --l-ui-tint-2-from: oklch(0.95 0.05 145);
+    --l-ui-tint-2-to: oklch(0.88 0.09 145);
+    --l-ui-tint-3-border: oklch(0.65 0.14 65);
+    --l-ui-tint-3-foreground: oklch(0.5 0.14 60);
+    --l-ui-tint-3-from: oklch(0.95 0.05 65);
+    --l-ui-tint-3-to: oklch(0.88 0.09 65);
+    --l-ui-tint-4-border: oklch(0.6 0.16 25);
+    --l-ui-tint-4-foreground: oklch(0.5 0.18 25);
+    --l-ui-tint-4-from: oklch(0.95 0.05 25);
+    --l-ui-tint-4-to: oklch(0.88 0.09 25);
+    --l-ui-tint-5-border: oklch(0.6 0.15 290);
+    --l-ui-tint-5-foreground: oklch(0.45 0.17 290);
+    --l-ui-tint-5-from: oklch(0.95 0.05 290);
+    --l-ui-tint-5-to: oklch(0.88 0.09 290);
+    /* Default hero background; override here, per-hero inline, or set to `none`. */
+    --l-ui-hero-image: url('layered_ui/hero_background_light.webp');
     --header-height: 63px;
     --l-ui-gutter: 1rem;
     --l-ui-contained-width: 80rem;
@@ -111,6 +135,28 @@
     --warning-text: oklch(0.9336 0.1 95.79);
     --error-bg: oklch(0.2248 0.0874 28.11);
     --error-text: oklch(0.748 0.1306 20.64);
+    /* Decorative tint palette (dark) */
+    --l-ui-tint-1-border: oklch(0.5 0.1 195);
+    --l-ui-tint-1-foreground: oklch(0.78 0.11 195);
+    --l-ui-tint-1-from: oklch(0.28 0.05 195);
+    --l-ui-tint-1-to: oklch(0.22 0.06 195);
+    --l-ui-tint-2-border: oklch(0.5 0.13 145);
+    --l-ui-tint-2-foreground: oklch(0.78 0.13 145);
+    --l-ui-tint-2-from: oklch(0.28 0.06 145);
+    --l-ui-tint-2-to: oklch(0.22 0.07 145);
+    --l-ui-tint-3-border: oklch(0.55 0.13 60);
+    --l-ui-tint-3-foreground: oklch(0.78 0.14 60);
+    --l-ui-tint-3-from: oklch(0.28 0.06 60);
+    --l-ui-tint-3-to: oklch(0.22 0.07 60);
+    --l-ui-tint-4-border: oklch(0.5 0.16 25);
+    --l-ui-tint-4-foreground: oklch(0.74 0.17 25);
+    --l-ui-tint-4-from: oklch(0.28 0.07 25);
+    --l-ui-tint-4-to: oklch(0.22 0.08 25);
+    --l-ui-tint-5-border: oklch(0.55 0.15 290);
+    --l-ui-tint-5-foreground: oklch(0.78 0.15 290);
+    --l-ui-tint-5-from: oklch(0.28 0.06 290);
+    --l-ui-tint-5-to: oklch(0.22 0.07 290);
+    --l-ui-hero-image: url('layered_ui/hero_background_dark.webp');
   }
 
   /* Typography */
@@ -120,8 +166,7 @@
   }
 
   h2 {
-    @apply heading text-lg
-           border-b border-border pb-2;
+    @apply heading text-lg;
   }
 
   h3 {
@@ -163,6 +208,15 @@
   }
 }
 
+/* Headings */
+
+/* Opt-in section divider for any heading. Headings carry no border by default so the level can be
+   chosen for document structure alone (e.g. an h2 inside a panel header or hero); add this where a
+   visual section rule is wanted. */
+.l-ui-heading--section {
+  @apply border-b border-border pb-2;
+}
+
 /* Theme */
 
 @theme {
@@ -505,6 +559,272 @@
   padding-inline: max(0px, calc((100% - var(--l-ui-contained-width)) / 2 + var(--l-ui-gutter)));
 }
 
+/* Hero */
+
+/* Full-bleed marketing hero. Pair the section with .l-ui-bleed, and (for a top-of-page hero)
+   the body with .l-ui-body--glass-header + .l-ui-body--flush-top so it sits flush to the
+   viewport top and the background shows through the glass header.
+
+   Ships with a default background via the --l-ui-hero-image token (light/dark, set in @layer
+   base). Painted on the element itself so it sits below the overlays and needs no markup. Override
+   it globally in the overrides file, per-hero with an inline `--l-ui-hero-image`, or set it to
+   `none` to drop the background. For per-page art with proper light/dark <img> loading, add a
+   .l-ui-hero__media element instead (it paints above this background). */
+.l-ui-hero {
+  @apply relative isolate overflow-hidden
+         bg-background bg-cover bg-right bg-no-repeat;
+  background-image: var(--l-ui-hero-image);
+}
+
+/* Optional per-hero media layer; overrides the default background. Provide a --light and --dark
+   variant and the active theme's is shown. */
+.l-ui-hero__media {
+  @apply absolute inset-0 z-[-3]
+         block w-full h-full
+         pointer-events-none;
+}
+
+.l-ui-hero__media-img {
+  @apply w-full h-full
+         object-cover object-right;
+}
+
+.l-ui-hero__media--dark {
+  @apply hidden;
+}
+
+.dark .l-ui-hero__media--light {
+  @apply hidden;
+}
+
+.dark .l-ui-hero__media--dark {
+  @apply block;
+}
+
+/* Left-to-right overlay keeps text legible over media; fades out so the media stays visible
+   on the right. Token-driven, so it adapts to the active theme. */
+.l-ui-hero::before {
+  content: "";
+  @apply absolute inset-0 z-[-2]
+         pointer-events-none;
+  background: linear-gradient(
+    100deg,
+    oklch(from var(--background) l c h / 0.85) 0%,
+    oklch(from var(--background) l c h / 0.6) 45%,
+    oklch(from var(--background) l c h / 0.15) 80%,
+    oklch(from var(--background) l c h / 0) 100%
+  );
+}
+
+/* Bottom fade blends the hero into the page background below it. */
+.l-ui-hero::after {
+  content: "";
+  @apply absolute inset-0 z-[-1]
+         pointer-events-none;
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    oklch(from var(--background) l c h / 0.15) 40%,
+    oklch(from var(--background) l c h / 0.5) 75%,
+    var(--background) 100%
+  );
+}
+
+/* Content column, mirroring the contained page width and gutter. */
+.l-ui-hero__inner {
+  @apply w-full max-w-[var(--l-ui-contained-width)]
+         mx-auto
+         px-[var(--l-ui-gutter)] py-[clamp(2rem,4vw,3.5rem)]
+         text-foreground;
+}
+
+/* When the hero sits flush at the viewport top, push the content clear of the fixed header. */
+.l-ui-body--flush-top .l-ui-hero__inner {
+  @apply pt-[calc(var(--header-height)+clamp(2rem,4vw,3.5rem))];
+}
+
+.l-ui-hero__title {
+  @apply max-w-2xl
+         my-5
+         font-bold;
+  font-size: clamp(1.9rem, 6vw, 3.5rem);
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+}
+
+/* Gradient-clipped accent for emphasising part of the title. */
+.l-ui-hero__title-accent {
+  @apply inline-block
+         pb-[0.15em];
+  background: linear-gradient(
+    95deg,
+    oklch(0.55 0.14 195) 0%,
+    oklch(0.6 0.16 60) 50%,
+    oklch(0.55 0.2 25) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.dark .l-ui-hero__title-accent {
+  background: linear-gradient(
+    95deg,
+    oklch(0.82 0.11 195) 0%,
+    oklch(0.78 0.14 60) 50%,
+    oklch(0.68 0.18 25) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.l-ui-hero__subtitle {
+  @apply max-w-2xl
+         text-foreground-muted;
+  font-size: clamp(1rem, 1.6vw, 1.2rem);
+  line-height: 1.55;
+}
+
+.l-ui-hero__actions {
+  @apply flex flex-wrap
+         max-w-2xl
+         gap-4
+         mt-7;
+}
+
+/* Tint palette */
+
+/* Decorative, control-agnostic colour slots. Each .l-ui-tint-N class selects one palette entry
+   (defined in @layer base, light + dark) and exposes it through four "current tint" role variables
+   that any control reads: --l-ui-tint-border, --l-ui-tint-foreground, --l-ui-tint-from,
+   --l-ui-tint-to. These are decorative and independent of the Tier-1 brand --accent; to tint a
+   control with the brand accent instead, point these variables at var(--accent) inline. Slot numbers
+   are palette positions, not fixed hues, so re-skinning a slot (via the --l-ui-tint-N-* tokens in
+   the overrides file) never makes a class name misleading. */
+.l-ui-tint-1 {
+  --l-ui-tint-border: var(--l-ui-tint-1-border);
+  --l-ui-tint-foreground: var(--l-ui-tint-1-foreground);
+  --l-ui-tint-from: var(--l-ui-tint-1-from);
+  --l-ui-tint-to: var(--l-ui-tint-1-to);
+}
+
+.l-ui-tint-2 {
+  --l-ui-tint-border: var(--l-ui-tint-2-border);
+  --l-ui-tint-foreground: var(--l-ui-tint-2-foreground);
+  --l-ui-tint-from: var(--l-ui-tint-2-from);
+  --l-ui-tint-to: var(--l-ui-tint-2-to);
+}
+
+.l-ui-tint-3 {
+  --l-ui-tint-border: var(--l-ui-tint-3-border);
+  --l-ui-tint-foreground: var(--l-ui-tint-3-foreground);
+  --l-ui-tint-from: var(--l-ui-tint-3-from);
+  --l-ui-tint-to: var(--l-ui-tint-3-to);
+}
+
+.l-ui-tint-4 {
+  --l-ui-tint-border: var(--l-ui-tint-4-border);
+  --l-ui-tint-foreground: var(--l-ui-tint-4-foreground);
+  --l-ui-tint-from: var(--l-ui-tint-4-from);
+  --l-ui-tint-to: var(--l-ui-tint-4-to);
+}
+
+.l-ui-tint-5 {
+  --l-ui-tint-border: var(--l-ui-tint-5-border);
+  --l-ui-tint-foreground: var(--l-ui-tint-5-foreground);
+  --l-ui-tint-from: var(--l-ui-tint-5-from);
+  --l-ui-tint-to: var(--l-ui-tint-5-to);
+}
+
+/* Card */
+
+/* A bordered or gradient-filled content card. The base card is bordered; add --gradient for the
+   tint fill. Colour comes from a separate, control-agnostic tint slot (l-ui-tint-1..5), so style and
+   colour compose independently:
+
+     <div class="l-ui-card l-ui-tint-1">                      bordered, tint 1
+     <div class="l-ui-card l-ui-card--gradient l-ui-tint-1">  gradient, tint 1
+
+   The card reads the shared --l-ui-tint-* role variables, falling back to the neutral --border and
+   --foreground tokens when no tint slot is present. Set the role variables (or point them at
+   var(--accent)) inline for a one-off colour. */
+.l-ui-card {
+  @apply p-4
+         rounded-sm;
+  background-color: var(--surface);
+  border: 1px solid var(--l-ui-tint-border, var(--border));
+}
+
+/* Tint fill; from/to come from the active tint slot (fall back to the plain surface with no slot). */
+.l-ui-card--gradient {
+  background: linear-gradient(
+    135deg,
+    var(--l-ui-tint-from, var(--surface)) 0%,
+    var(--l-ui-tint-to, var(--surface)) 100%
+  );
+}
+
+.l-ui-card__eyebrow {
+  @apply mt-0 mb-1.5
+         text-xs font-semibold uppercase tracking-[0.12em] text-foreground-muted;
+}
+
+.l-ui-card__title {
+  @apply inline-flex items-center gap-2
+         mt-0 mb-1.5
+         text-lg font-semibold tracking-[-0.01em];
+  color: var(--l-ui-tint-foreground, var(--foreground));
+}
+
+/* Painted from the tint foreground colour via a mask (matching the primary-button icon), so it
+   adapts per theme without an invert. The icon shape comes from --l-ui-icon-src, set at the call
+   site. */
+.l-ui-card__icon {
+  @apply inline-block shrink-0
+         w-5 h-5;
+  background-color: var(--l-ui-tint-foreground, var(--foreground));
+  -webkit-mask: var(--l-ui-icon-src) no-repeat center / contain;
+          mask: var(--l-ui-icon-src) no-repeat center / contain;
+}
+
+.l-ui-card__body {
+  @apply mt-0
+         text-sm leading-relaxed text-foreground-muted;
+}
+
+/* Logo block */
+
+/* A responsive strip of brand or partner logos, normalised to a common height and flattened to a
+   single tone (black in light, white in dark) so a mismatched set of source logos reads as one
+   tidy row. Wraps three-up on small screens and spreads to a single row from md up. Use the
+   --wordmark modifier on wide name lockups that need more height than icon-style marks. */
+.l-ui-logo-block {
+  @apply flex flex-wrap items-center justify-center
+         gap-x-5 gap-y-6
+         md:flex-nowrap md:justify-between md:gap-4;
+}
+
+.l-ui-logo-block__item {
+  @apply flex shrink-0 grow-0 justify-center
+         min-w-0 basis-[calc(33.333%-1rem)]
+         md:block md:shrink md:basis-auto;
+}
+
+.l-ui-logo-block__logo {
+  @apply w-auto max-w-full;
+  height: clamp(1.1rem, 2vw, 2rem);
+  filter: brightness(0);
+}
+
+.l-ui-logo-block__logo--wordmark {
+  height: clamp(1.85rem, 3.3vw, 3.3rem);
+}
+
+.dark .l-ui-logo-block__logo {
+  filter: brightness(0) invert(1);
+}
+
 /* Header */
 
 /* The container owns the gutter (mirroring .l-ui-page), so .l-ui-header fills the gutter-inset
@@ -715,12 +1035,16 @@
          w-full min-h-[40px]
          gap-3 px-3
          text-sm font-medium text-foreground-muted
+         hover:bg-surface
          rounded-sm
          focus-ring
          transition-colors;
 }
 
-.l-ui-navigation__item--active {
+/* Repeats hover so the active background wins over the base item's
+   hover:bg-surface - equal specificity, but this rule comes later. */
+.l-ui-navigation__item--active,
+.l-ui-navigation__item--active:hover {
   @apply text-foreground
          bg-surface-highlighted;
 }
@@ -1922,6 +2246,45 @@ pre.l-ui-surface {
          px-5 py-4;
 }
 
+/* Popover */
+
+.l-ui-popover {
+  @apply fixed inset-auto
+         max-w-xs
+         m-0 p-3
+         text-sm text-foreground
+         bg-background
+         border border-border rounded-sm;
+}
+
+/* A list of actions inside a popover (e.g. a table row's "more" menu).
+   Negative margin cancels l-ui-popover's own padding; px-1/py-1 restore a
+   small inset for the list itself. */
+.l-ui-popover__menu {
+  @apply flex flex-col
+         -m-3 px-1 py-1;
+}
+
+.l-ui-popover__menu-item {
+  @apply block w-full
+         px-3 py-2
+         text-sm text-left text-foreground
+         hover:bg-surface focus:bg-surface
+         rounded-sm
+         focus-ring
+         transition-colors
+         cursor-pointer;
+}
+
+.l-ui-popover__menu-item--danger {
+  @apply text-danger;
+}
+
+.l-ui-popover__menu-divider {
+  @apply my-1
+         border-t border-border;
+}
+
 /* Safari */
 @media (max-width: 767px) {
   /* iOS Safari ignores overflow:hidden on body; position:fixed is required */

data/app/helpers/layered/ui/popover_helper.rb

@@ -0,0 +1,81 @@
+module Layered
+  module Ui
+    module PopoverHelper
+      # Renders a floating panel anchored to a trigger button, built on the
+      # native HTML +popover+ attribute. Showing, hiding, light-dismiss, and
+      # Escape-to-close are all handled by the browser; the +l-ui--popover+
+      # Stimulus controller only computes placement (with auto-flip near
+      # viewport edges).
+      #
+      #   <%= l_ui_popover(placement: :bottom) do |p| %>
+      #     <% p.trigger(class: "l-ui-button l-ui-button--outline") do %>
+      #       Options
+      #     <% end %>
+      #     <p>Popover content.</p>
+      #   <% end %>
+      #
+      # Note: use +<% p.trigger %>+ (without the equals sign) so its content is
+      # captured by the builder rather than written to the body buffer.
+      #
+      # Options:
+      #   id:         (String)  DOM id for the popover element; defaults to an auto-generated id.
+      #   placement:  (Symbol)  :top, :bottom (default), :left, or :right. Flips automatically if it would overflow the viewport.
+      #   align:      (Symbol)  :start (default) flushes the popover's leading edge with the trigger's; :end flushes its trailing edge instead
+      #                         (e.g. placement: :bottom, align: :end hangs the popover down and to the left of a trigger at the right end of a row).
+      #   container:  (Hash)    Extra HTML attributes for the wrapping <div>.
+      def l_ui_popover(id: nil, placement: :bottom, align: :start, container: {}, &block)
+        id ||= "l-ui-popover-#{SecureRandom.hex(4)}"
+        builder = PopoverBuilder.new(self, id: id)
+        body_content = capture { block.call(builder) }
+
+        container_attrs = container.deep_dup
+        container_data = container_attrs[:data] || {}
+        existing_controller = container_data.delete(:controller) || container_data.delete("controller")
+        container_data[:controller] = [existing_controller, "l-ui--popover"].compact.reject(&:empty?).join(" ")
+        container_data[:"l-ui--popover-placement-value"] = placement
+        container_data[:"l-ui--popover-align-value"] = align
+        container_attrs[:data] = container_data
+
+        tag.div(**container_attrs) do
+          safe_join([
+            builder.trigger_html || ActiveSupport::SafeBuffer.new,
+            render_popover(builder, body_content)
+          ])
+        end
+      end
+
+      class PopoverBuilder
+        attr_reader :id, :trigger_html
+
+        def initialize(view, id:)
+          @view = view
+          @id = id
+        end
+
+        def trigger(**options, &block)
+          options = options.deep_dup
+          options[:type] ||= "button"
+          options[:popovertarget] = id
+          data = options[:data] || {}
+          data[:"l-ui--popover-target"] = "trigger"
+          options[:data] = data
+          content = @view.capture(&block)
+          @trigger_html = @view.tag.button(content, **options)
+          nil
+        end
+      end
+
+      private
+
+      def render_popover(builder, body_content)
+        tag.div(
+          body_content,
+          id: builder.id,
+          popover: "auto",
+          class: "l-ui-popover",
+          data: { "l-ui--popover-target" => "popover" }
+        )
+      end
+    end
+  end
+end

data/app/javascript/layered_ui/controllers/l_ui/popover_controller.js

@@ -0,0 +1,112 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Positions a native `popover`-attribute element relative to its trigger.
+// Showing, hiding, light-dismiss, and Escape-to-close are all handled by the
+// browser via the popover attribute; this controller only computes placement
+// (with auto-flip near viewport edges), since CSS anchor positioning isn't
+// yet reliable across all supported browsers.
+export default class extends Controller {
+  static targets = ["trigger", "popover"]
+  static values = {
+    placement: { type: String, default: "bottom" },
+    align: { type: String, default: "start" }
+  }
+
+  static GAP = 8
+
+  popoverTargetConnected(element) {
+    this._toggleHandler = (event) => {
+      if (event.newState === "open") {
+        this.position()
+        this._addRepositionListeners()
+      } else {
+        this._removeRepositionListeners()
+      }
+    }
+    element.addEventListener("toggle", this._toggleHandler)
+  }
+
+  popoverTargetDisconnected(element) {
+    element.removeEventListener("toggle", this._toggleHandler)
+    this._removeRepositionListeners()
+  }
+
+  disconnect() {
+    this._removeRepositionListeners()
+  }
+
+  // Compute and apply the popover's fixed position relative to the trigger,
+  // flipping to the opposite side if the preferred placement would overflow
+  // the viewport.
+  position() {
+    if (!this.hasTriggerTarget || !this.hasPopoverTarget) return
+
+    const gap = this.constructor.GAP
+    const trigger = this.triggerTarget.getBoundingClientRect()
+    const popover = this.popoverTarget.getBoundingClientRect()
+    const align = this.alignValue
+
+    // The cross-axis coordinate (horizontal for top/bottom, vertical for
+    // left/right): "start" flushes the popover's leading edge with the
+    // trigger's, "end" flushes its trailing edge instead - e.g. a "bottom"
+    // placement with "end" align hangs the popover down and to the left of
+    // a trigger sitting at the right end of a row.
+    const crossAxisStart = (placement) =>
+      placement === "top" || placement === "bottom"
+        ? align === "end" ? trigger.right - popover.width : trigger.left
+        : align === "end" ? trigger.bottom - popover.height : trigger.top
+
+    const coordsFor = (placement) => {
+      switch (placement) {
+        case "top":
+          return { top: trigger.top - popover.height - gap, left: crossAxisStart(placement) }
+        case "left":
+          return { top: crossAxisStart(placement), left: trigger.left - popover.width - gap }
+        case "right":
+          return { top: crossAxisStart(placement), left: trigger.right + gap }
+        default:
+          return { top: trigger.bottom + gap, left: crossAxisStart(placement) }
+      }
+    }
+
+    let placement = this.placementValue
+    let coords = coordsFor(placement)
+
+    if (placement === "bottom" && coords.top + popover.height > window.innerHeight) {
+      placement = "top"
+      coords = coordsFor(placement)
+    } else if (placement === "top" && coords.top < 0) {
+      placement = "bottom"
+      coords = coordsFor(placement)
+    } else if (placement === "right" && coords.left + popover.width > window.innerWidth) {
+      placement = "left"
+      coords = coordsFor(placement)
+    } else if (placement === "left" && coords.left < 0) {
+      placement = "right"
+      coords = coordsFor(placement)
+    }
+
+    let left = coords.left
+    if (placement === "top" || placement === "bottom") {
+      left = Math.min(Math.max(gap, left), window.innerWidth - popover.width - gap)
+    }
+
+    this.popoverTarget.style.top = `${Math.max(gap, coords.top)}px`
+    this.popoverTarget.style.left = `${left}px`
+  }
+
+  // Private
+
+  _addRepositionListeners() {
+    this._repositionHandler = () => this.position()
+    window.addEventListener("resize", this._repositionHandler)
+    window.addEventListener("scroll", this._repositionHandler, true)
+  }
+
+  _removeRepositionListeners() {
+    if (!this._repositionHandler) return
+    window.removeEventListener("resize", this._repositionHandler)
+    window.removeEventListener("scroll", this._repositionHandler, true)
+    this._repositionHandler = null
+  }
+}

data/app/javascript/layered_ui/index.js

@@ -6,6 +6,7 @@ import PanelController from "layered_ui/controllers/l_ui/panel_controller"
 import PanelResizeController from "layered_ui/controllers/l_ui/panel_resize_controller"
 import PanelButtonController from "layered_ui/controllers/l_ui/panel_button_controller"
 import ModalController from "layered_ui/controllers/l_ui/modal_controller"
+import PopoverController from "layered_ui/controllers/l_ui/popover_controller"
 import SearchFormController from "layered_ui/controllers/l_ui/search_form_controller"
 import TabsController from "layered_ui/controllers/l_ui/tabs_controller"
 
@@ -17,4 +18,5 @@ application.register("l-ui--panel", PanelController)
 application.register("l-ui--panel-resize", PanelResizeController)
 application.register("l-ui--panel-button", PanelButtonController)
 application.register("l-ui--modal", ModalController)
+application.register("l-ui--popover", PopoverController)
 application.register("l-ui--tabs", TabsController)

data/app/views/devise/shared/_links.html.erb

@@ -11,7 +11,7 @@
 <% end %>
 
 <%- if devise_mapping.recoverable? || devise_mapping.confirmable? || (devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email)) %>
-  <h2 class="l-ui-mt-6">
+  <h2 class="l-ui-mt-6 l-ui-heading--section">
     Need assistance?
   </h2>
 <% end %>

data/app/views/layered_ui/shared/_form_errors.html.erb

@@ -1,6 +1,6 @@
 <% if item.errors.any? %>
   <div id="error_explanation" class="l-ui-form__errors" role="alert">
-    <h2>
+    <h2 class="l-ui-heading--section">
       <%= pluralize(item.errors.count, "error") %> found:
     </h2>
 

data/config/importmap.rb

@@ -13,6 +13,7 @@ pin "layered_ui/controllers/l_ui/navigation_section_controller", to: "layered_ui
 pin "layered_ui/controllers/l_ui/panel_controller", to: "layered_ui/controllers/l_ui/panel_controller.js"
 pin "layered_ui/controllers/l_ui/panel_resize_controller", to: "layered_ui/controllers/l_ui/panel_resize_controller.js"
 pin "layered_ui/controllers/l_ui/panel_button_controller", to: "layered_ui/controllers/l_ui/panel_button_controller.js"
+pin "layered_ui/controllers/l_ui/popover_controller", to: "layered_ui/controllers/l_ui/popover_controller.js"
 pin "layered_ui/controllers/l_ui/search_form_controller", to: "layered_ui/controllers/l_ui/search_form_controller.js"
 pin "layered_ui/controllers/l_ui/tabs_controller", to: "layered_ui/controllers/l_ui/tabs_controller.js"
 pin "layered_ui/controllers/l_ui/theme_controller", to: "layered_ui/controllers/l_ui/theme_controller.js"

data/lib/generators/layered/ui/create_overrides_generator.rb

@@ -6,13 +6,16 @@ module Layered
 
         OVERRIDES_PATH = "app/assets/tailwind/layered_ui_overrides.css"
 
+        class_option :force, type: :boolean, default: false,
+          desc: "Regenerate the overrides file even if it exists (overwrites your customisations - back it up first)"
+
         def create_overrides_file
-          if File.exist?(OVERRIDES_PATH)
-            say "Overrides file already exists at #{OVERRIDES_PATH}, skipping", :yellow
+          if File.exist?(OVERRIDES_PATH) && !options[:force]
+            say "Overrides file already exists at #{OVERRIDES_PATH}, skipping (pass --force to regenerate)", :yellow
             return
           end
 
-          create_file OVERRIDES_PATH, overrides_content
+          create_file OVERRIDES_PATH, overrides_content, force: options[:force]
         end
 
         private
@@ -20,7 +23,7 @@ module Layered
         def overrides_content
           <<~CSS
             /*
-             * layered-ui-rails color overrides
+             * layered-ui-rails color overrides (generated from v#{Layered::Ui::VERSION})
              *
              * Uncomment and edit any variable below to customise the UI.
              * This file is NOT overwritten by the install generator, so your
@@ -126,6 +129,50 @@ module Layered
               @apply h-7.5 w-auto;
             }
             */
+
+            /*
+             * Hero background. A default ships with the gem; re-skin it here
+             * (or set it to `none` to remove it). Set --l-ui-hero-image inline
+             * on a single hero to give different heroes different art.
+             */
+
+            /*
+            :root {
+              --l-ui-hero-image: url('my_hero_light.webp');
+            }
+
+            .dark {
+              --l-ui-hero-image: url('my_hero_dark.webp');
+            }
+            */
+
+            /*
+             * Decorative tint palette. The tint slots (l-ui-tint-1..5) are a
+             * shared, control-agnostic palette - used by cards and any other
+             * control that reads the --l-ui-tint-* role variables. They are
+             * independent of the Tier 1 brand --accent above. Slot numbers are
+             * palette positions, not fixed hues, so re-skinning a slot never
+             * makes a class name misleading. Each slot has four tokens (border,
+             * foreground, gradient from/to) for light and dark; override only
+             * the ones you need. (You can also set the role variables inline on
+             * a single element, or point them at var(--accent), for a one-off.)
+             */
+
+            /*
+            :root {
+              --l-ui-tint-1-border:     oklch(0.6 0.1 195);
+              --l-ui-tint-1-foreground: oklch(0.45 0.1 195);
+              --l-ui-tint-1-from:       oklch(0.95 0.04 195);
+              --l-ui-tint-1-to:         oklch(0.88 0.07 195);
+            }
+
+            .dark {
+              --l-ui-tint-1-border:     oklch(0.5 0.1 195);
+              --l-ui-tint-1-foreground: oklch(0.78 0.11 195);
+              --l-ui-tint-1-from:       oklch(0.28 0.05 195);
+              --l-ui-tint-1-to:         oklch(0.22 0.06 195);
+            }
+            */
           CSS
         end
       end

data/lib/layered/ui/engine.rb

@@ -36,6 +36,7 @@ module Layered
           helper Layered::Ui::FormHelper
           helper Layered::Ui::HeaderHelper
           helper Layered::Ui::ModalHelper
+          helper Layered::Ui::PopoverHelper
           helper Layered::Ui::RansackHelper
         end
       end

data/lib/layered/ui/version.rb

@@ -1,5 +1,5 @@
 module Layered
   module Ui
-    VERSION = "0.18.4"
+    VERSION = "0.20.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: layered-ui-rails
 version: !ruby/object:Gem::Version
-  version: 0.18.4
+  version: 0.20.0
 platform: ruby
 authors:
 - layered.ai
@@ -188,6 +188,8 @@ files:
 - app/assets/fonts/layered_ui/inter.woff2
 - app/assets/fonts/layered_ui/manrope.woff2
 - app/assets/images/layered_ui/apple_touch_icon.png
+- app/assets/images/layered_ui/hero_background_dark.webp
+- app/assets/images/layered_ui/hero_background_light.webp
 - app/assets/images/layered_ui/icon_chevron_down.svg
 - app/assets/images/layered_ui/icon_chevron_right.svg
 - app/assets/images/layered_ui/icon_close.svg
@@ -201,6 +203,7 @@ files:
 - app/assets/images/layered_ui/icon_linkedin.svg
 - app/assets/images/layered_ui/icon_mail.svg
 - app/assets/images/layered_ui/icon_moon.svg
+- app/assets/images/layered_ui/icon_more.svg
 - app/assets/images/layered_ui/icon_panel_close.svg
 - app/assets/images/layered_ui/icon_sun.svg
 - app/assets/images/layered_ui/icon_x.svg
@@ -218,6 +221,7 @@ files:
 - app/helpers/layered/ui/modal_helper.rb
 - app/helpers/layered/ui/navigation_helper.rb
 - app/helpers/layered/ui/pagy_helper.rb
+- app/helpers/layered/ui/popover_helper.rb
 - app/helpers/layered/ui/ransack_helper.rb
 - app/helpers/layered/ui/table_helper.rb
 - app/helpers/layered/ui/title_bar_helper.rb
@@ -227,6 +231,7 @@ files:
 - app/javascript/layered_ui/controllers/l_ui/panel_button_controller.js
 - app/javascript/layered_ui/controllers/l_ui/panel_controller.js
 - app/javascript/layered_ui/controllers/l_ui/panel_resize_controller.js
+- app/javascript/layered_ui/controllers/l_ui/popover_controller.js
 - app/javascript/layered_ui/controllers/l_ui/search_form_controller.js
 - app/javascript/layered_ui/controllers/l_ui/tabs_controller.js
 - app/javascript/layered_ui/controllers/l_ui/theme_controller.js