layered-ui-rails 0.18.0 → 0.18.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 45a2361df4b5409267f1619b3ba0de294c2e90a56e610492e9587dc40c9a79be
-  data.tar.gz: e812a5155ed72c2d0c9fe6668a74215fd4600decf3326d08190a76936b43de2f
+  metadata.gz: 2acf474942e7d6fa669959fcf0c78675d57e9ae065f18347ddbb3a9f1a48b7fc
+  data.tar.gz: a9a2c5123723a239582523090095f2539c01ba7439335bcffc464d51bd9ffabe
 SHA512:
-  metadata.gz: ef9f4e14b361fcc2a6d3d4db9e4629a97533d24d479f3fba123daa58278d0a53be18c1cd3526ed4a70cf4ef9fd7cf65a243a303249bb8eb81bfa2c7c55efbb1e
-  data.tar.gz: d1f369d793b03173d8ba0c44616b4452841f07391c846744738b426f5c6f7af87ffd85250ffabf1a1248f59da74947a4df32288c5c63c63232ea97f8efb63885
+  metadata.gz: 805599d0bc604bdde66d6092b283ae078024b5b0a1761b2dcd8795926f240439861fe63c591dbd8c06357cf16d39c3b46111e4356f2051b3b662e9a664334821
+  data.tar.gz: d84bad400743d3e09478ba82d1e735037051758d6b5e1a65dcd93613c6a24569823c1d578b8fddcb5b88b53fab2225a5c0c2abc4e42afb17099920099c031822

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

@@ -153,7 +153,7 @@ Quick reference:
 
 | Helper | Purpose |
 |---|---|
-| `l_ui_navigation_item(label, path, ...)` | Sidebar nav link (supports `icon:`, `match: :starts_with`, `expandable:`) |
+| `l_ui_navigation_item(label, path, ...)` | Sidebar nav link (supports `icon:`, `match: :starts_with`, `expandable:`). For valid `icon:` names and the missing-asset gotcha, see the "Icons" section in `references/HELPERS.md` |
 | `l_ui_navigation_section(heading = nil, ...)` | Group nav items; supports `collapsible:`, `storage_key:`, `separated:` |
 | `l_ui_breadcrumbs(&block)` | Breadcrumb nav wrapper |
 | `l_ui_breadcrumb_item(label, path = nil)` | Individual breadcrumb |

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

@@ -60,7 +60,8 @@ Always combine the `l-ui-button` base class with a colour modifier (e.g. `l-ui-b
 Icon variants (combine with the `l-ui-button` base):
 
 ```
-.l-ui-button--icon               Icon-only button (fixed size, no text)
+.l-ui-button--icon               Icon-only button (44px square, no text)
+                                 Add --small (l-ui-button--icon l-ui-button--small) for a 32px square icon button
 .l-ui-button--navigation-toggle  Mobile navigation toggle
 ```
 

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

@@ -14,13 +14,13 @@ l_ui_navigation_section(heading = nil, icon: nil, icon_path: nil, icon_html: nil
 - `path` (String) - URL
 - `active` (Boolean, optional) - force the active style; defaults to a match against the current request path. Does not affect `aria-current`, which is set only when `current_page?(path)` is true
 - `match` (Symbol) - `:exact` (default) uses `current_page?`; `:starts_with` activates when the request path begins with `path` (use for parents whose sub-routes should keep the parent highlighted)
-- `icon` (String, optional) - icon name; `"home"` ships with the gem. For others, supply the SVG in the host app at `app/assets/images/layered_ui/icon_NAME.svg`
+- `icon` (String, optional) - icon name. Resolves to the asset `layered_ui/icon_NAME.svg`. See "Icons" below for the names that ship with the gem and how to add your own. A name with no matching asset raises `Propshaft::MissingAssetError` (a 500 in dev) when the page renders, so only pass a name you know resolves
 - `icon_path` (String, optional) - explicit asset path; takes precedence over `icon:`
 - `icon_html` (ActiveSupport::SafeBuffer, optional) - pre-rendered icon markup for icon-font libraries (e.g. `tag.i(class: "fa-solid fa-house")`); takes precedence over `icon:` and `icon_path:`. Must be already html-safe - plain strings will be escaped. Never pass user-controlled input
 
 `l_ui_navigation_section`:
 - `heading` (String, optional) - non-clickable section heading; omit for an unlabelled group. To expose the parent route of a section, add an "Overview" item inside the block
-- `icon` (String, optional) - host-app icon name next to the heading; resolves the same way as `l_ui_navigation_item`'s `icon:`
+- `icon` (String, optional) - icon name next to the heading; resolves the same way as `l_ui_navigation_item`'s `icon:` (see "Icons" below)
 - `icon_path` (String, optional) - explicit asset path next to the heading; takes precedence over `icon:`
 - `icon_html` (String, optional) - pre-rendered icon markup; takes precedence over `icon:` and `icon_path:`
 - `collapsible` (Boolean) - when `true` and a heading is given, renders a toggle button with a chevron and wires `aria-controls` to the panel
@@ -43,6 +43,20 @@ l_ui_navigation_section(heading = nil, icon: nil, icon_path: nil, icon_html: nil
 <% end %>
 ```
 
+### Icons
+
+The `icon:` argument (on `l_ui_navigation_item` and `l_ui_navigation_section`) resolves to the asset `layered_ui/icon_NAME.svg`. There is no fallback: a name with no matching asset raises `Propshaft::MissingAssetError` and renders a 500. Only pass a name you know resolves.
+
+Names that ship with the gem (use the bare name, e.g. `icon: "globe"`):
+
+- General-purpose (black `currentColor` sources, recoloured for dark mode by `dark:invert` - safe to use via `icon:`): `home`, `globe`, `mail`, `github`, `discord`, `linkedin`, `x`, `youtube`
+- Internal UI (engine chrome - theme toggle, nav chevrons, close buttons): `close`, `chevron_down`, `chevron_right`, `hamburger`, `sun`, `moon`, `light`, `dark`, `panel_close`. Several are CSS mask shapes or carry baked theme colours (e.g. `chevron_down` is white, `dark` fills white), so they will **not** render correctly through `icon:`. Don't use these for nav icons
+
+To add your own, drop an SVG in the host app at `app/assets/images/layered_ui/icon_NAME.svg` and pass `icon: "NAME"`. Alternatively:
+
+- `icon_path:` - point at any asset path directly (e.g. `icon_path: "my_icons/star.svg"`), bypassing the `layered_ui/icon_` convention
+- `icon_html:` - pass pre-rendered, html-safe markup for icon-font libraries (e.g. `tag.i(class: "fa-solid fa-house")`); never pass user-controlled input
+
 ## Breadcrumbs
 
 ```ruby

data/AGENTS.md

@@ -27,6 +27,7 @@ Guidance for AI agents working in this repository.
 - Use l-ui classes only in engine views, with no additional Tailwind utilities, as Tailwind classes referenced only inside the engine will not be generated by the host app’s build
 - Dummy app documentation pages may use additional Tailwind utilities, but should favour l-ui classes where possible
 - Importmap for JS (no bundler)
+- Put new changes on a branch with a meaningful name, but do not commit; the user will ask when ready to commit
 - We are currently in pre-release, so breaking changes may be introduced. Flag any expected breaking changes clearly before making them, but do not avoid necessary improvements solely to preserve backwards compatibility
 - CRITICAL: Retain WCAG 2.2 AA compliance. Do not be too pedantic though as this introduces audit loops which are undesirable.
 - A WCAG 2.2 AA table looks like this:

data/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. This project follows [Semantic Versioning](https://semver.org/).
 
+## [0.18.1] - 2026-06-07
+
+### Added
+
+- Small icon buttons: combining `l-ui-button--icon` with `l-ui-button--small` now renders a 32px square (still above the WCAG 2.2 AA 24px target-size minimum) instead of stretching to 44px wide, since `--small` previously only shrank the height. The panel close button now uses this variant.
+- Documented the icons bundled with the gem and clarified `icon:` usage: the name resolves to `layered_ui/icon_NAME.svg`, and an unknown name raises `Propshaft::MissingAssetError`. Added an "Available icons" section to the dummy app showing the general-purpose set (internal-UI chrome icons are not usable via `icon:`).
+
+### Changed
+
+- Navigation sub-sections now animate open by transitioning height from 0 to their natural height, replacing the per-item slide keyframe animation. Respects `prefers-reduced-motion`.
+
+### Fixed
+
+- Navigation section chevron no longer animates when restoring its saved open/closed state on page load; it now renders in position.
+
 ## [0.18.0] - 2026-06-07
 
 ### Fixed

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

@@ -747,8 +747,16 @@
   mask-size: contain;
 }
 
+/* transition-none is intentional: the after-change style determines the
+   transition, so this gives "animate open, snap shut" - opening matches the
+   base rule (animates), closing matches this rule (snaps instantly). */
 .l-ui-navigation__section-toggle[aria-expanded="false"] .l-ui-navigation__section-chevron {
-  @apply -rotate-90;
+  @apply -rotate-90
+         transition-none;
+}
+
+.l-ui-navigation__section-toggle--no-transition .l-ui-navigation__section-chevron {
+  @apply transition-none;
 }
 
 .l-ui-navigation__section-items {
@@ -771,6 +779,19 @@
          gap-0.5 px-3 py-3;
 }
 
+/* Height-expand slide applied while the section is opening; the controller
+   measures the natural height and transitions from 0 to reveal the items. */
+.l-ui-navigation__section-items--opening {
+  @apply overflow-hidden
+         transition-[height] duration-200 ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .l-ui-navigation__section-items--opening {
+    @apply transition-none;
+  }
+}
+
 .l-ui-navigation__user {
   @apply shrink-0
          p-4;
@@ -897,6 +918,11 @@
          text-xs;
 }
 
+.l-ui-button--icon.l-ui-button--small {
+  @apply min-w-[32px]
+         p-1.5;
+}
+
 .l-ui-button:disabled {
   @apply opacity-50
          cursor-not-allowed;

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

@@ -21,12 +21,21 @@ export default class extends Controller {
     if (stored === null) return
 
     const isOpen = stored === "true"
-    this.toggleTarget.setAttribute("aria-expanded", isOpen ? "true" : "false")
+    // Apply the restored state without animating the chevron on load; it should
+    // simply render in the correct position.
+    const toggle = this.toggleTarget
+    toggle.classList.add("l-ui-navigation__section-toggle--no-transition")
+    toggle.setAttribute("aria-expanded", isOpen ? "true" : "false")
     if (isOpen) {
       this.panelTarget.removeAttribute("hidden")
     } else {
       this.panelTarget.setAttribute("hidden", "")
     }
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        toggle.classList.remove("l-ui-navigation__section-toggle--no-transition")
+      })
+    })
   }
 
   toggle() {
@@ -34,6 +43,7 @@ export default class extends Controller {
     this.toggleTarget.setAttribute("aria-expanded", isOpen ? "true" : "false")
     if (isOpen) {
       this.panelTarget.removeAttribute("hidden")
+      this.#animateOpen()
     } else {
       this.panelTarget.setAttribute("hidden", "")
     }
@@ -45,4 +55,25 @@ export default class extends Controller {
       // ignore
     }
   }
+
+  // Slide the panel open by transitioning its height from 0 to its natural
+  // height, only on user-initiated open, not on initial page load.
+  #animateOpen() {
+    const panel = this.panelTarget
+    const CLASS = "l-ui-navigation__section-items--opening"
+
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
+
+    const endHeight = panel.scrollHeight
+    panel.classList.add(CLASS)
+    panel.style.height = "0px"
+    panel.offsetHeight // Force a reflow so the starting height is applied.
+    panel.style.height = `${endHeight}px`
+
+    panel.addEventListener("transitionend", (event) => {
+      if (event.propertyName !== "height") return
+      panel.classList.remove(CLASS)
+      panel.style.height = ""
+    }, { once: true })
+  }
 }

data/app/views/layouts/layered_ui/_panel.html.erb

@@ -35,7 +35,7 @@
 
             <div class="l-ui-panel__header-actions">
               <button type="button"
-                class="l-ui-button l-ui-button--primary l-ui-button--icon"
+                class="l-ui-button l-ui-button--primary l-ui-button--icon l-ui-button--small"
                 aria-label="Hide panel"
                 aria-controls="panel"
                 title="Toggle panel (Ctrl+i / ⌘i)"

data/lib/layered/ui/version.rb

@@ -1,5 +1,5 @@
 module Layered
   module Ui
-    VERSION = "0.18.0"
+    VERSION = "0.18.1"
   end
 end

metadata

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