layered-ui-rails 0.8.0 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d5abac205810e228d971ffa9c13f2c069c56be3f143c0f25612f02c2d8b6e598
-  data.tar.gz: 3dbb48d42029cce15cb92dcbd6cc014046032cb7449f145e63854b4898936d14
+  metadata.gz: ff66e126597c535133ec15b8fa13fd0efeecfe319b9a60d383b051ce111234e1
+  data.tar.gz: 25872e652c050f87c8752a43b8f9184ee3f98f888a7b30086efa4531c329ed1a
 SHA512:
-  metadata.gz: e39b4bbc08bb0f198320dccf181de35003e0ab2927eabe3666e0f39743e652a3e9ca45dc295d40b3ce22e1a85381392d86bd202dda9d905f1b500f2c837fdb6d
-  data.tar.gz: 8efb4d5a510c8ef52541b0d9f1286e13dce5b8d64c90d7f984e4d4eccfc7153f91eafa83c5beadf54911b2a8a405e5b8c54383ea3884dc2ed6c0169c70f283ca
+  metadata.gz: 22e3a324fb57843766fc6b243071b305508d88dc8ca00dd428cce23eebb7f965cab8be974fcaeef365e74ba142bff59d28f2b8b9680ff50ab3853c94d1806079
+  data.tar.gz: d0e60d24e524aad6516e2e070db67e31d7eb049d63334f36d99463d2cd2cb392ce8e863070f1952d5387096f5bc5ec06c172346ba57c3fe2b4a78ceeb6cbe4fc

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

@@ -106,6 +106,7 @@ Quick reference:
 | `l_ui_navigation_item(label, path, active: nil, &block)` | Sidebar nav link with optional nesting |
 | `l_ui_breadcrumbs(&block)` | Breadcrumb nav wrapper |
 | `l_ui_breadcrumb_item(label, path = nil)` | Individual breadcrumb |
+| `l_ui_title_bar(title:, breadcrumbs: [], actions: nil, &block)` | Responsive page title bar with breadcrumbs and actions |
 | `l_ui_pagy(pagy)` | Styled pagination (requires pagy gem) |
 | `l_ui_search_form(query, url:, fields:, ...)` | Search form (requires ransack gem) |
 | `l_ui_sort_link(query, attribute, label = nil, ...)` | Sortable table header (requires ransack gem) |

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

@@ -28,6 +28,7 @@ Responsive sidebar navigation with backdrop overlay on mobile.
 **Targets:** `navigation`, `backdrop`, `toggleButton`, `openIcon`, `closeIcon`
 **Actions:** `toggle`, `close`
 **Keyboard:** Escape to close
+**Behaviour:** Locks body scroll while the mobile overlay is open
 
 The layout wires this up automatically. Navigation items are populated via `content_for :l_ui_navigation_items`.
 

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

@@ -170,6 +170,15 @@ WCAG 2.2 AA table pattern:
 .l-ui-breadcrumbs__link Breadcrumb link
 ```
 
+## Title bar
+
+```
+.l-ui-title-bar          Title bar wrapper used with .l-ui-container--spread
+.l-ui-title-bar__content Breadcrumbs and title column
+.l-ui-title-bar__title   Page title
+.l-ui-title-bar__actions Action area
+```
+
 ## Pagination
 
 ```
@@ -275,6 +284,7 @@ WCAG 2.2 AA table pattern:
 .l-ui-sr-only                       Visually hidden, screen reader only
 .l-ui-skip-link                     Accessibility skip link
 .l-ui-list                          Styled list
+.l-ui-hr                            Horizontal rule with theme border and vertical spacing
 .l-ui-container--grid               1-col mobile, 2-col desktop grid
 .l-ui-container--spread             Flex row with space-between
 .l-ui-container--pagy               Pagination wrapper

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

@@ -41,6 +41,29 @@ l_ui_breadcrumb_item(label, path = nil)
 <% end %>
 ```
 
+## Title bar
+
+```ruby
+l_ui_title_bar(title:, breadcrumbs: [], actions: nil, &block)
+```
+
+- `title` (String) - page title rendered as the `<h1>`
+- `breadcrumbs` (Array, optional) - breadcrumb items as `[label, path]` arrays or `{ label:, path: }` hashes
+- `actions` (String|Array, optional) - HTML-safe action content; omit when using a block
+- `&block` - optional action markup, usually buttons or links
+
+```erb
+<%= l_ui_title_bar(
+  title: "Users",
+  breadcrumbs: [
+    ["Home", root_path],
+    ["Admin", admin_path]
+  ]
+) do %>
+  <%= link_to "New user", new_user_path, class: "l-ui-button--primary" %>
+<% end %>
+```
+
 ## Pagination (requires pagy gem)
 
 ```ruby

data/CHANGELOG.md

@@ -2,7 +2,20 @@
 
 All notable changes to this project will be documented in this file. This project follows [Semantic Versioning](https://semver.org/).
 
-## [Unreleased]
+## [0.9.0] - 2026-04-26
+
+### Added
+
+- `l_ui_title_bar` helper for page title bars with optional actions
+- `l-ui-hr` class for styled horizontal rules
+- `color-scheme` CSS property set to match the active theme so native form controls (date pickers, scrollbars, etc.) render with matching light/dark styling
+
+### Changed
+
+- Navigation and panel controllers share an extracted `scroll_lock` utility module
+- Checkbox and radio inputs use a pointer cursor
+- Scroll-to-bottom button is centred and has a faint shadow
+- Form submit label shortened from "Save changes" to "Save"
 
 ## [0.8.0] - 2026-04-24
 

data/app/assets/tailwind/layered/ui/styles.css

@@ -47,6 +47,7 @@
 
 @layer base {
   :root {
+    color-scheme: light;
     /* Tier 1 - Accent */
     --accent: oklch(0.2044 0 0);
     --accent-foreground: oklch(1 0 0);
@@ -76,6 +77,7 @@
   }
 
   .dark {
+    color-scheme: dark;
     /* Tier 1 - Accent */
     --accent: oklch(1 0 0);
     --accent-foreground: oklch(0.2044 0 0);
@@ -294,6 +296,13 @@
          space-y-1;
 }
 
+/* Horizontal rule */
+
+.l-ui-hr {
+  @apply my-4
+         border-0 border-t border-border;
+}
+
 /* Markdown */
 
 .l-ui-markdown > *:first-child {
@@ -740,6 +749,26 @@
          focus-ring rounded-sm;
 }
 
+/* Title bar */
+
+.l-ui-title-bar {
+  @apply w-full;
+}
+
+.l-ui-title-bar__content {
+  @apply min-w-0;
+}
+
+.l-ui-title-bar__title {
+  @apply mt-0;
+}
+
+.l-ui-title-bar__actions {
+  @apply flex flex-wrap items-center justify-end
+         gap-2
+         shrink-0;
+}
+
 /* Buttons */
 
 @utility button {
@@ -1017,7 +1046,8 @@ pre.l-ui-surface {
   @apply w-6 h-6
          accent-foreground
          focus-ring
-         rounded-sm;
+         rounded-sm
+         cursor-pointer;
 }
 
 /* Search */
@@ -1124,11 +1154,12 @@ pre.l-ui-surface {
   @apply w-6 h-6
          mr-2
          accent-foreground
-         focus-ring;
+         focus-ring
+         cursor-pointer;
 }
 
 .l-ui-radio__label {
-  @apply text-sm;
+  @apply text-sm cursor-pointer;
 }
 
 /* Tabs */
@@ -1659,10 +1690,11 @@ pre.l-ui-surface {
 .l-ui-scroll-to-bottom {
   @apply
     sticky bottom-2 flex items-center justify-center
-    ml-auto mr-0 -mt-9 h-9 w-9
+    mx-auto -mt-9 h-9 w-9
     rounded-full
     cursor-pointer
     bg-button-primary-bg text-button-primary-icon
+    shadow-sm
     focus-ring
     opacity-0 pointer-events-none
     transition-opacity duration-200;

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

@@ -0,0 +1,52 @@
+module Layered
+  module Ui
+    module TitleBarHelper
+      include Layered::Ui::BreadcrumbsHelper
+
+      def l_ui_title_bar(title:, breadcrumbs: [], actions: nil, &block)
+        action_content = block_given? ? capture(&block) : actions
+
+        content_tag(:header, class: "l-ui-title-bar l-ui-container--spread") do
+          safe_join([
+            content_tag(:div, class: "l-ui-title-bar__content") do
+              safe_join([
+                l_ui_title_bar_breadcrumbs(breadcrumbs),
+                content_tag(:h1, title, class: "l-ui-title-bar__title")
+              ].compact)
+            end,
+            l_ui_title_bar_actions(action_content)
+          ].compact)
+        end
+      end
+
+      private
+
+      def l_ui_title_bar_breadcrumbs(breadcrumbs)
+        return if breadcrumbs.blank?
+
+        l_ui_breadcrumbs do
+          safe_join(breadcrumbs.map { |breadcrumb| l_ui_title_bar_breadcrumb_item(breadcrumb) })
+        end
+      end
+
+      def l_ui_title_bar_breadcrumb_item(breadcrumb)
+        case breadcrumb
+        when Hash
+          l_ui_breadcrumb_item(breadcrumb.fetch(:label), breadcrumb[:path])
+        when Array
+          l_ui_breadcrumb_item(breadcrumb[0], breadcrumb[1])
+        else
+          l_ui_breadcrumb_item(breadcrumb)
+        end
+      end
+
+      def l_ui_title_bar_actions(action_content)
+        return if action_content.blank?
+
+        content = action_content.is_a?(Array) ? safe_join(action_content) : action_content
+
+        content_tag(:div, content, class: "l-ui-title-bar__actions")
+      end
+    end
+  end
+end

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

@@ -1,6 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 import { announce, clearAnnounceTimeout } from "layered_ui/utilities/announce"
 import { isMobile } from "layered_ui/utilities/layout"
+import { lockBodyScroll, unlockBodyScroll } from "layered_ui/utilities/scroll_lock"
 
 export default class extends Controller {
   static targets = ["navigation", "backdrop", "toggleButton", "openIcon", "closeIcon"]
@@ -8,6 +9,7 @@ export default class extends Controller {
   connect() {
     this.previousActiveElement = null
     this.isOpen = false
+    this.isScrollLocked = false
     this._resizeFrame = null
     this.boundHandleResize = () => {
       if (this._resizeFrame) return
@@ -54,6 +56,7 @@ export default class extends Controller {
     this.navigationTarget.classList.add("open")
     this.backdropTarget.classList.add("open")
     this.setNavigationInteractivity(true)
+    this.updateScrollLock()
 
     // Update ARIA attributes and swap icons
     if (this.hasToggleButtonTarget) {
@@ -89,6 +92,7 @@ export default class extends Controller {
     this.navigationTarget.classList.remove("open")
     this.backdropTarget.classList.remove("open")
     this.setNavigationInteractivity(false)
+    this.unlockScroll()
 
     // Update ARIA attributes and swap icons
     if (this.hasToggleButtonTarget) {
@@ -116,6 +120,7 @@ export default class extends Controller {
     clearAnnounceTimeout(this)
     cancelAnimationFrame(this._resizeFrame)
     window.removeEventListener("resize", this.boundHandleResize)
+    this.unlockScroll()
     this.previousActiveElement = null
   }
 
@@ -125,6 +130,7 @@ export default class extends Controller {
     // In overlay mode (default), always respect isOpen state regardless of viewport
     if (isMobile() || !this.alwaysShow) {
       this.setNavigationInteractivity(this.isOpen)
+      this.updateScrollLock()
       return
     }
 
@@ -133,6 +139,7 @@ export default class extends Controller {
     this.navigationTarget.classList.remove("open")
     this.backdropTarget.classList.remove("open")
     this.setNavigationInteractivity(true)
+    this.unlockScroll()
 
     if (this.hasToggleButtonTarget) {
       this.toggleButtonTarget.setAttribute("aria-expanded", "false")
@@ -157,6 +164,28 @@ export default class extends Controller {
     this.navigationTarget.removeAttribute("aria-hidden")
   }
 
+  updateScrollLock() {
+    if (this.isOpen && isMobile()) {
+      this.lockScroll()
+    } else {
+      this.unlockScroll()
+    }
+  }
+
+  lockScroll() {
+    if (this.isScrollLocked) return
+
+    lockBodyScroll()
+    this.isScrollLocked = true
+  }
+
+  unlockScroll() {
+    if (!this.isScrollLocked) return
+
+    unlockBodyScroll()
+    this.isScrollLocked = false
+  }
+
   get alwaysShow() {
     return this.element.classList.contains("l-ui-body--always-show-navigation")
   }

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

@@ -2,6 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 import { announce, clearAnnounceTimeout } from "layered_ui/utilities/announce"
 import { storageGet, storageSet } from "layered_ui/utilities/storage"
 import { isMobile } from "layered_ui/utilities/layout"
+import { lockBodyScroll, unlockBodyScroll } from "layered_ui/utilities/scroll_lock"
 
 export default class extends Controller {
   static targets = ["container", "hideButton", "actionButton"]
@@ -9,6 +10,7 @@ export default class extends Controller {
   connect() {
     this.previousActiveElement = null
     this.isOpen = false
+    this.isScrollLocked = false
     this.boundKeyboardShortcut = this.handleKeyboardShortcut.bind(this)
     this.boundCloseOnNavigate = this.closeOnMobileNavigate.bind(this)
     const page = document.querySelector(".l-ui-page")
@@ -34,6 +36,7 @@ export default class extends Controller {
     clearAnnounceTimeout(this)
     document.removeEventListener('keydown', this.boundKeyboardShortcut)
     document.removeEventListener('turbo:visit', this.boundCloseOnNavigate)
+    this.unlockScroll()
     this.previousActiveElement = null
   }
 
@@ -90,9 +93,7 @@ export default class extends Controller {
     if (isMobile()) {
       const main = document.querySelector("main")
       if (main) main.setAttribute("inert", "")
-      this.savedScrollY = window.scrollY
-      document.body.style.top = `-${this.savedScrollY}px`
-      document.body.classList.add("l-ui-scroll-lock")
+      this.lockScroll()
     }
 
     storageSet("panelOpen", "true")
@@ -124,11 +125,7 @@ export default class extends Controller {
 
     const main = document.querySelector("main")
     if (main) main.removeAttribute("inert")
-    document.body.classList.remove("l-ui-scroll-lock")
-    document.body.style.top = ""
-    if (this.savedScrollY !== undefined) {
-      window.scrollTo(0, this.savedScrollY)
-    }
+    this.unlockScroll()
 
     storageSet("panelOpen", "false")
     this.updatePageMargin()
@@ -161,4 +158,18 @@ export default class extends Controller {
       page.style.marginRight = ""
     }
   }
+
+  lockScroll() {
+    if (this.isScrollLocked) return
+
+    lockBodyScroll()
+    this.isScrollLocked = true
+  }
+
+  unlockScroll() {
+    if (!this.isScrollLocked) return
+
+    unlockBodyScroll()
+    this.isScrollLocked = false
+  }
 }

data/app/javascript/layered_ui/utilities/scroll_lock.js

@@ -0,0 +1,29 @@
+let lockCount = 0
+let savedScrollY = null
+
+export function lockBodyScroll() {
+  if (lockCount === 0) {
+    savedScrollY = window.scrollY
+    document.body.style.top = `-${savedScrollY}px`
+    document.body.classList.add("l-ui-scroll-lock")
+  }
+
+  lockCount++
+}
+
+export function unlockBodyScroll() {
+  if (lockCount === 0) return
+
+  lockCount--
+
+  if (lockCount === 0) {
+    document.body.classList.remove("l-ui-scroll-lock")
+    document.body.style.top = ""
+
+    if (savedScrollY !== null) {
+      window.scrollTo(0, savedScrollY)
+    }
+
+    savedScrollY = null
+  }
+}

data/app/views/layered/ui/managed_resource/_form.html.erb

@@ -10,7 +10,7 @@
   <% end %>
 
   <div class="l-ui-form__actions">
-    <%= f.submit(record.new_record? ? "Create" : "Save changes",
+    <%= f.submit(record.new_record? ? "Create" : "Save",
                  class: "l-ui-button l-ui-button--primary") %>
   </div>
 <% end %>

data/config/importmap.rb

@@ -3,6 +3,7 @@ pin "layered_ui", to: "layered_ui/index.js"
 # Utilities
 pin "layered_ui/utilities/announce", to: "layered_ui/utilities/announce.js"
 pin "layered_ui/utilities/layout", to: "layered_ui/utilities/layout.js"
+pin "layered_ui/utilities/scroll_lock", to: "layered_ui/utilities/scroll_lock.js"
 pin "layered_ui/utilities/storage", to: "layered_ui/utilities/storage.js"
 
 # Controllers

data/lib/layered/ui/engine.rb

@@ -31,6 +31,7 @@ module Layered
           helper Layered::Ui::NavigationHelper
           helper Layered::Ui::PagyHelper
           helper Layered::Ui::TableHelper
+          helper Layered::Ui::TitleBarHelper
           helper Layered::Ui::FormHelper
           helper Layered::Ui::RansackHelper
         end

data/lib/layered/ui/version.rb

@@ -1,5 +1,5 @@
 module Layered
   module Ui
-    VERSION = "0.8.0"
+    VERSION = "0.9.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: layered-ui-rails
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.9.0
 platform: ruby
 authors:
 - layered.ai
@@ -215,6 +215,7 @@ files:
 - app/helpers/layered/ui/pagy_helper.rb
 - app/helpers/layered/ui/ransack_helper.rb
 - app/helpers/layered/ui/table_helper.rb
+- app/helpers/layered/ui/title_bar_helper.rb
 - app/javascript/layered_ui/controllers/l_ui/modal_controller.js
 - app/javascript/layered_ui/controllers/l_ui/navigation_controller.js
 - app/javascript/layered_ui/controllers/l_ui/panel_button_controller.js
@@ -226,6 +227,7 @@ files:
 - app/javascript/layered_ui/index.js
 - app/javascript/layered_ui/utilities/announce.js
 - app/javascript/layered_ui/utilities/layout.js
+- app/javascript/layered_ui/utilities/scroll_lock.js
 - app/javascript/layered_ui/utilities/storage.js
 - app/views/devise/confirmations/new.html.erb
 - app/views/devise/mailer/confirmation_instructions.html.erb