RubyGems - layered-ui-rails - Versions diffs - 0.1.3 → 0.1.4 - Mend

layered-ui-rails 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

checksums.yaml +4 -4
data/AGENTS.md +3 -2
data/CHANGELOG.md +15 -0
data/README.md +9 -2
data/app/assets/tailwind/layered/ui/styles.css +35 -8
data/app/javascript/layered_ui/controllers/l_ui/{mobile_navigation_controller.js → navigation_controller.js} +9 -3
data/app/javascript/layered_ui/controllers/l_ui/panel_button_controller.js +5 -6
data/app/javascript/layered_ui/index.js +2 -2
data/app/javascript/layered_ui/utilities/layout.js +6 -2
data/app/views/layouts/layered_ui/_header.html.erb +6 -6
data/app/views/layouts/layered_ui/_navigation.html.erb +1 -1
data/app/views/layouts/layered_ui/application.html.erb +2 -2
data/config/importmap.rb +1 -1
data/lib/layered/ui/version.rb +1 -1
metadata +4 -4

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 417904020be6218b684bb12df4c6089c04d79334ec1cd65a207de6b21e3cda15
-  data.tar.gz: 67b5030949e4b2722d2fc341d7fed3dcfd3f8d48dc4b90e6905e651dc6ecc6b8
+  metadata.gz: a2e3c4b089f447a7d40452272925b236cfb43da5d8c8414dff4187c80505840a
+  data.tar.gz: 72e580c90993476ed99f68bee967928ef31241c936582bf02b3816a2616028ab
 SHA512:
-  metadata.gz: '05296252d95be8c3a4971351ba9a23b9481d026e27bd931ff4b69a0c53a53574d30174162c69895a6ecc4294e0bf8db5b84e3478b7b44ed3c9e6d9329efda56c'
-  data.tar.gz: cd87a0ef43243f98ddcb19d05cbe7d0d1f79ed52f0156e00924725eac9619ddc2c4a27bbb951d1b07df7c8e865cf8b74f93f80e5ef96ae36311e96686fa99b82
+  metadata.gz: 6a6d460c812709f9063dcfa85644a0bf65b5b0c172a79bd2cc0a31e7775bb7f6f58c6e0a1090b4d20013ab142647b5836238c7726dd32325637202445f50f84c
+  data.tar.gz: e15e51d28fc6ba387589acf87f4e5c725c2973e7360bc84d67fc7541c09d094c1258343a643ca343352eaeb8f0959d027e4214f59a496bab9172f74bf76992e2

data/AGENTS.md CHANGED Viewed

@@ -13,8 +13,9 @@ Guidance for AI agents working in this repository.
 - **CSS** `app/assets/tailwind/layered/ui/styles.css`: HSL tokens, `.dark` on `<html>`, `@theme` utilities (`bg-background`, etc.), BEM components (`.l-ui-button--primary`, etc.). Layout: 63px header, 240px sidebar, 320px panel. WCAG 2.2 AA.
 - **CSS `@apply`:** Multi-line with grouping (layout → spacing → typography → colors → effects). Single utilities may stay on one line.
 - **Generators:** `bin/rails generate layered:ui:install` (copy CSS, import CSS, import JS)
-- **JS** `app/javascript/layered_ui/`: Stimulus controllers registered as `l-ui--theme`, `l-ui--mobile-navigation`, `l-ui--panel`, `l-ui--modal`, `l-ui--tabs`
-- **Layout yields** (prefixed `l_ui_`): `:l_ui_navigation_items`, `:l_ui_panel_heading`, `:l_ui_panel_body`
+- **JS** `app/javascript/layered_ui/`: Stimulus controllers registered as `l-ui--theme`, `l-ui--navigation`, `l-ui--panel`, `l-ui--modal`, `l-ui--tabs`
+- **Layout yields** (prefixed `l_ui_`): `:l_ui_navigation_items`, `:l_ui_panel_heading`, `:l_ui_panel_body`, `:l_ui_body_class`
+  - `:l_ui_body_class` modifiers: `l-ui-body--always-show-navigation` (pins nav as sidebar on desktop), `l-ui-body--hide-header` (hides header and collapses its space)
 ## Testing

data/CHANGELOG.md CHANGED Viewed

@@ -4,6 +4,21 @@ All notable changes to this project will be documented in this file. This projec
 ## [Unreleased]
+## [0.1.4] - 2026-03-25
+### Added
+- `yield :l_ui_body_class` in the engine layout body tag, allowing host apps to pass modifier classes via `content_for`
+- `l-ui-body--always-show-navigation` modifier pins the navigation as a persistent sidebar on desktop (suitable for admin layouts)
+- `l-ui-body--hide-header` modifier hides the header and collapses its reserved space
+- Disabled state styles for all button variants
+### Changed
+- New default: Navigation is now off-canvas on all screen sizes, toggled via the header button - use `l-ui-body--always-show-navigation` to restore the pinned sidebar behaviour
+- Renamed Stimulus controller from `l-ui--mobile-navigation` to `l-ui--navigation` as it now has utility on both desktop and mobile
+- Renamed `l-ui-button--mobile-navigation` to `l-ui-button--navigation-toggle`
 ## [0.1.3] - 2026-03-14
 ### Added

data/README.md CHANGED Viewed

@@ -100,7 +100,14 @@ This project is still in its early days. We welcome issues, feedback, and ideas
 ## License
-Released under the [Apache 2.0 License](LICENSE). The source code is fully open, but the layered.ai name and brand are trademarks of LAYERED AI LIMITED (UK company number: 17056830).
+Released under the [Apache 2.0 License](LICENSE).
+Copyright 2026 LAYERED AI LIMITED (UK company number: 17056830). See [NOTICE](NOTICE) for attribution details.
+## Trademarks
+The source code is fully open, but the layered.ai name, logo, and brand assets are trademarks of LAYERED AI LIMITED. The Apache 2.0 license does not grant rights to use the layered.ai branding. Forks and redistributions must use a distinct name. See [TRADEMARK.md](TRADEMARK.md) for the full policy.
+## Contributing
-- [TRADEMARK.md](TRADEMARK.md) - trademark and brand policy
 - [CLA.md](CLA.md) - contributor license agreement

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

@@ -424,6 +424,10 @@
          text-foreground;
 }
+.l-ui-body--hide-header {
+  --header-height: 0px;
+}
 /* Page */
 .l-ui-page {
@@ -437,7 +441,11 @@
 }
 .l-ui-page--with-navigation {
-  @apply page md:ml-[240px];
+  @apply page;
+}
+.l-ui-body--always-show-navigation .l-ui-page--with-navigation {
+  @apply md:ml-[240px];
 }
 .l-ui-page--vertically-centered {
@@ -459,6 +467,10 @@
          bg-background;
 }
+.l-ui-body--hide-header .l-ui-container--header {
+  @apply hidden;
+}
 .l-ui-header {
   @apply flex items-center justify-between
          h-[var(--header-height)] px-4 py-3;
@@ -561,8 +573,8 @@
          z-50
          border-r border-t border-border
          bg-background
-         invisible md:visible
-         transform -translate-x-full md:translate-x-0
+         invisible
+         -translate-x-full
          transition-transform duration-200;
 }
@@ -570,19 +582,26 @@
   @apply visible translate-x-0;
 }
+.l-ui-body--always-show-navigation .l-ui-container--navigation {
+  @apply md:visible md:translate-x-0;
+}
 .l-ui-backdrop--navigation {
   @apply fixed top-[var(--header-height)] left-0 right-0 bottom-0
          z-[45]
          bg-backdrop/50 backdrop-blur-xs
          opacity-0 pointer-events-none
-         transition-opacity duration-200
-         md:hidden;
+         transition-opacity duration-200;
 }
 .l-ui-backdrop--navigation.open {
   @apply opacity-100 pointer-events-auto;
 }
+.l-ui-body--always-show-navigation .l-ui-backdrop--navigation {
+  @apply md:hidden;
+}
 .l-ui-navigation {
   @apply flex flex-col
          h-full;
@@ -703,15 +722,18 @@
          text-danger;
 }
-.l-ui-button--mobile-navigation {
+.l-ui-button--navigation-toggle {
   @apply flex items-center justify-center
          min-w-[44px] min-h-[44px] p-2
          cursor-pointer
          text-foreground
          rounded-sm
          focus-ring
-         transition-colors
-         md:hidden;
+         transition-colors;
+}
+.l-ui-body--always-show-navigation .l-ui-button--navigation-toggle {
+  @apply md:hidden;
 }
 .l-ui-button--icon {
@@ -724,6 +746,11 @@
          transition-colors;
 }
+.l-ui-button--disabled {
+  @apply opacity-50
+         cursor-not-allowed;
+}
 /* Notice */
 @utility notice {

data/app/javascript/layered_ui/controllers/l_ui/{mobile_navigation_controller.js → navigation_controller.js} RENAMED Viewed

@@ -33,7 +33,7 @@ export default class extends Controller {
   }
   close(event) {
-    // Close menu when clicking outside on mobile or pressing Escape
+    // Close menu when clicking outside or pressing Escape
     if (event.type === "keydown" && event.key !== "Escape") return
     if (this.hasNavigationTarget && this.isOpen) {
@@ -122,11 +122,13 @@ export default class extends Controller {
   handleResize() {
     if (!this.hasNavigationTarget) return
-    if (isMobile()) {
+    // In overlay mode (default), always respect isOpen state regardless of viewport
+    if (isMobile() || !this.alwaysShow) {
       this.setNavigationInteractivity(this.isOpen)
       return
     }
+    // Desktop in always-show mode: force nav visible
     this.isOpen = false
     this.navigationTarget.classList.remove("open")
     this.backdropTarget.classList.remove("open")
@@ -145,7 +147,7 @@ export default class extends Controller {
   }
   setNavigationInteractivity(isOpen) {
-    if (isMobile() && !isOpen) {
+    if (!this.alwaysShow && !isOpen) {
       this.navigationTarget.setAttribute("inert", "")
       this.navigationTarget.setAttribute("aria-hidden", "true")
       return
@@ -154,4 +156,8 @@ export default class extends Controller {
     this.navigationTarget.removeAttribute("inert")
     this.navigationTarget.removeAttribute("aria-hidden")
   }
+  get alwaysShow() {
+    return this.element.classList.contains("l-ui-body--always-show-navigation")
+  }
 }

data/app/javascript/layered_ui/controllers/l_ui/panel_button_controller.js CHANGED Viewed

@@ -1,16 +1,15 @@
 import { Controller } from "@hotwired/stimulus"
 import { storageGetJSON, storageSet } from "layered_ui/utilities/storage"
-import { isMobile, hasNavigation, HEADER_HEIGHT, NAV_WIDTH, getPadding, getLeftEdge } from "layered_ui/utilities/layout"
+import { getHeaderHeight, getPadding, getLeftEdge } from "layered_ui/utilities/layout"
 const BUTTON_SIZE = 56
 const DRAG_THRESHOLD = 5
 const SNAP_TIMEOUT = 400
-const TOGGLE_DELAY = 220
+const TOGGLE_DELAY = 160
 const TOP_LEFT = "top-left"
 const TOP_RIGHT = "top-right"
 const BOTTOM_LEFT = "bottom-left"
 const BOTTOM_RIGHT = "bottom-right"
 export default class extends Controller {
   connect() {
     this.isDragging = false
@@ -95,7 +94,7 @@ export default class extends Controller {
       ? parseFloat(this.element.style.top)
       : this.element.getBoundingClientRect().top
-    const topEdge = this.clampTop(HEADER_HEIGHT + getPadding())
+    const topEdge = this.clampTop(getHeaderHeight() + getPadding())
     const bottomEdge = this.clampTop(window.innerHeight - BUTTON_SIZE - getPadding())
     const midY = (topEdge + bottomEdge) / 2
     const isTop = topPx <= midY
@@ -151,7 +150,7 @@ export default class extends Controller {
   moveToCorner(corner) {
     const leftEdge = getLeftEdge()
     const rightEdge = getPadding()
-    const topEdge = this.clampTop(HEADER_HEIGHT + getPadding())
+    const topEdge = this.clampTop(getHeaderHeight() + getPadding())
     const bottomEdge = this.clampTop(window.innerHeight - BUTTON_SIZE - getPadding())
     switch (corner) {
@@ -343,7 +342,7 @@ export default class extends Controller {
   // Clamp a top value within viewport bounds, below the header
   clampTop(topPx) {
     const padding = getPadding()
-    const minTop = HEADER_HEIGHT + padding
+    const minTop = getHeaderHeight() + padding
     const maxTop = window.innerHeight - BUTTON_SIZE - padding
     return Math.min(Math.max(topPx, minTop), maxTop)
   }

data/app/javascript/layered_ui/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { application } from "controllers/application"
 import ThemeController from "layered_ui/controllers/l_ui/theme_controller"
-import MobileNavigationController from "layered_ui/controllers/l_ui/mobile_navigation_controller"
+import NavigationController from "layered_ui/controllers/l_ui/navigation_controller"
 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"
@@ -8,7 +8,7 @@ import ModalController from "layered_ui/controllers/l_ui/modal_controller"
 import TabsController from "layered_ui/controllers/l_ui/tabs_controller"
 application.register("l-ui--theme", ThemeController)
-application.register("l-ui--mobile-navigation", MobileNavigationController)
+application.register("l-ui--navigation", NavigationController)
 application.register("l-ui--panel", PanelController)
 application.register("l-ui--panel-resize", PanelResizeController)
 application.register("l-ui--panel-button", PanelButtonController)

data/app/javascript/layered_ui/utilities/layout.js CHANGED Viewed

@@ -1,6 +1,5 @@
 export const MOBILE_BREAKPOINT = 768
 export const NAV_WIDTH = 240
-export const HEADER_HEIGHT = 63
 export function isMobile() {
   return window.innerWidth < MOBILE_BREAKPOINT
@@ -8,13 +7,18 @@ export function isMobile() {
 export function hasNavigation() {
   const page = document.querySelector(".l-ui-page")
-  return page && page.classList.contains("l-ui-page--with-navigation") && !isMobile()
+  const alwaysShow = document.body.classList.contains("l-ui-body--always-show-navigation")
+  return page && page.classList.contains("l-ui-page--with-navigation") && !isMobile() && alwaysShow
 }
 export function getPadding() {
   return isMobile() ? 16 : 32
 }
+export function getHeaderHeight() {
+  return parseFloat(getComputedStyle(document.body).getPropertyValue("--header-height")) || 0
+}
 export function getLeftEdge() {
   const navWidth = hasNavigation() ? NAV_WIDTH : 0
   return navWidth + getPadding()

data/app/views/layouts/layered_ui/_header.html.erb CHANGED Viewed

@@ -34,15 +34,15 @@
       <% if yield(:l_ui_navigation_items).present? || l_ui_user_signed_in? %>
         <button
           type="button"
-          class="l-ui-button--mobile-navigation"
-          data-action="click->l-ui--mobile-navigation#toggle"
-          data-l-ui--mobile-navigation-target="toggleButton"
+          class="l-ui-button--navigation-toggle"
+          data-action="click->l-ui--navigation#toggle"
+          data-l-ui--navigation-target="toggleButton"
           aria-label="Toggle navigation menu"
           aria-expanded="false"
-          aria-controls="mobile-navigation"
+          aria-controls="l-ui-navigation"
         >
-          <%= image_tag "layered_ui/icon_hamburger.svg", alt: "", class: "l-ui-icon--md", data: { "l-ui--mobile-navigation-target": "openIcon" }, aria: { hidden: true } %>
-          <%= image_tag "layered_ui/icon_close.svg", alt: "", class: "l-ui-icon--md", style: "display: none;", data: { "l-ui--mobile-navigation-target": "closeIcon" }, aria: { hidden: true } %>
+          <%= image_tag "layered_ui/icon_hamburger.svg", alt: "", class: "l-ui-icon--md", data: { "l-ui--navigation-target": "openIcon" }, aria: { hidden: true } %>
+          <%= image_tag "layered_ui/icon_close.svg", alt: "", class: "l-ui-icon--md", style: "display: none;", data: { "l-ui--navigation-target": "closeIcon" }, aria: { hidden: true } %>
         </button>
       <% end %>
     </nav>

data/app/views/layouts/layered_ui/_navigation.html.erb CHANGED Viewed

@@ -1,5 +1,5 @@
 <% if yield(:l_ui_navigation_items).present? || l_ui_user_signed_in? %>
-  <nav id="mobile-navigation" class="l-ui-container--navigation" aria-label="Main navigation" data-l-ui--mobile-navigation-target="navigation">
+  <nav id="l-ui-navigation" class="l-ui-container--navigation" aria-label="Main navigation" data-l-ui--navigation-target="navigation">
     <div class="l-ui-navigation">
       <ul class="l-ui-navigation__links" role="list">
         <%= yield :l_ui_navigation_items %>

data/app/views/layouts/layered_ui/application.html.erb CHANGED Viewed

@@ -22,12 +22,12 @@
     <%= javascript_importmap_tags %>
   </head>
-  <body class="l-ui-body" data-controller="l-ui--mobile-navigation" data-action="click@window->l-ui--mobile-navigation#close keydown.esc@window->l-ui--mobile-navigation#close">
+  <body class="l-ui-body <%= yield :l_ui_body_class %>" data-controller="l-ui--navigation" data-action="click@window->l-ui--navigation#close keydown.esc@window->l-ui--navigation#close">
     <a href="#main-content" class="l-ui-skip-link">Skip to main content</a>
     <div id="l-ui-live-region" class="l-ui-sr-only" aria-live="polite" aria-atomic="true"></div>
     <%= render "layouts/layered_ui/header" %>
     <%= render "layouts/layered_ui/navigation" %>
-    <div class="l-ui-backdrop--navigation" data-l-ui--mobile-navigation-target="backdrop" data-action="click->l-ui--mobile-navigation#close"></div>
+    <div class="l-ui-backdrop--navigation" data-l-ui--navigation-target="backdrop" data-action="click->l-ui--navigation#close"></div>
     <% if yield(:l_ui_panel_body).present? %>
       <%= render "layouts/layered_ui/panel" %>
     <% end %>

data/config/importmap.rb CHANGED Viewed

@@ -7,7 +7,7 @@ pin "layered_ui/utilities/storage", to: "layered_ui/utilities/storage.js"
 # Controllers
 pin "layered_ui/controllers/l_ui/modal_controller", to: "layered_ui/controllers/l_ui/modal_controller.js"
-pin "layered_ui/controllers/l_ui/mobile_navigation_controller", to: "layered_ui/controllers/l_ui/mobile_navigation_controller.js"
+pin "layered_ui/controllers/l_ui/navigation_controller", to: "layered_ui/controllers/l_ui/navigation_controller.js"
 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"

data/lib/layered/ui/version.rb CHANGED Viewed

@@ -1,5 +1,5 @@
 module Layered
   module Ui
-    VERSION = "0.1.3"
+    VERSION = "0.1.4"
   end
 end

metadata CHANGED Viewed

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: layered-ui-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - layered.ai
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-03-14 00:00:00.000000000 Z
+date: 2026-03-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -187,8 +187,8 @@ files:
 - app/helpers/layered/ui/authentication_helper.rb
 - app/helpers/layered/ui/navigation_helper.rb
 - app/helpers/layered/ui/pagination_helper.rb
-- app/javascript/layered_ui/controllers/l_ui/mobile_navigation_controller.js
 - 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
 - app/javascript/layered_ui/controllers/l_ui/panel_controller.js
 - app/javascript/layered_ui/controllers/l_ui/panel_resize_controller.js
@@ -269,5 +269,5 @@ rubygems_version: 3.5.11
 signing_key:
 specification_version: 4
 summary: Open source, minimalist, responsive, accessible UI system with light and
-  dark theme support - and a touch of glass.
+  dark theme support.
 test_files: []