0.16.0

Author: thomasgallagher

CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file. This project follows [Semantic Versioning](https://semver.org/).
 
+## [0.16.0] - 2026-05-16
+
+### Added
+
+- `l_ui_modal` helper with external-trigger support for declaratively rendering modal dialogs
+- `l-ui-header--contained` modifier and a yield slot for header links
+- `submit:` option on `l_ui_form` to override the submit button text (defaults to "Create" for new records, "Save" for persisted)
+
+### Changed
+
+- Header links now left-aligned
+- Navigation container right border restored at `md` and above; panel container left border restored
+- Modal backdrop now tinted in addition to the existing blur (foreground at 25% in light mode, background at 60% in dark mode)
+- Active navigation items now round on all four corners (`rounded-sm`) rather than the left only
+- Panel close button now uses `l-ui-button--primary` instead of `l-ui-button--outline`
+- Icons inside `l-ui-button--primary` no longer invert in dark mode, so they remain visible against the inverted-accent background
+
 ## [0.15.0] - 2026-05-11
 
 ### Breaking

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    layered-ui-rails (0.15.0)
+    layered-ui-rails (0.16.0)
       rails (~> 8.0)
       tailwindcss-rails (~> 4.0)
 

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

@@ -361,7 +361,7 @@
   @apply overflow-x-auto
          my-3 p-3
          bg-surface
-         rounded-md;
+         rounded-sm;
 }
 
 .l-ui-markdown pre code {
@@ -581,6 +581,10 @@
   @apply dark:invert;
 }
 
+.l-ui-button--primary .l-ui-icon {
+  @apply dark:invert-0;
+}
+
 .l-ui-icon--xs {
   @apply w-4 h-4;
 }
@@ -651,7 +655,7 @@
          w-full min-h-[40px]
          gap-3 px-3
          text-sm font-medium text-foreground-muted
-         rounded-l-sm
+         rounded-sm
          focus-ring
          transition-colors;
 }
@@ -1541,12 +1545,13 @@ pre.l-ui-surface {
 }
 
 .l-ui-panel__header {
-  @apply flex flex-col;
+  @apply flex flex-col
+         border-b border-border;
 }
 
 .l-ui-panel__header-content {
   @apply flex items-center
-         p-4 pb-0;
+         p-4 py-3;
 }
 
 .l-ui-panel__header-buttons {
@@ -1662,7 +1667,7 @@ pre.l-ui-surface {
          p-4 gap-4
          text-foreground
          bg-surface
-         rounded-md;
+         rounded-sm;
 }
 
 .l-ui-message--sent .l-ui-message__bubble {
@@ -1813,6 +1818,11 @@ pre.l-ui-surface {
 
 .l-ui-modal::backdrop {
   @apply backdrop-blur-sm;
+  background-color: color-mix(in oklch, var(--foreground) 25%, transparent);
+}
+
+.dark .l-ui-modal::backdrop {
+  background-color: color-mix(in oklch, var(--background) 60%, transparent);
 }
 
 .l-ui-modal__header {

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--outline l-ui-button--icon"
+                class="l-ui-button l-ui-button--primary l-ui-button--icon"
                 aria-label="Hide panel"
                 aria-controls="panel"
                 title="Toggle panel (Ctrl+i / ⌘i)"

lib/layered/ui/version.rb

@@ -1,5 +1,5 @@
 module Layered
   module Ui
-    VERSION = "0.15.0"
+    VERSION = "0.16.0"
   end
 end