layered-ui-rails 0.23.0 → 0.24.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2346c306d3b5e355c1f61a51254d79701fe3a9ad2e8bc5817aa7311b0e024db0
-  data.tar.gz: b01fdcd1dca34dd339ea4183933b5b6fcded78d3a2ee2c4c371ed92cd18e3214
+  metadata.gz: ffb58ab0d1712c81928bbf3685708f5571e98dd1af70484024219dc6a491f2cc
+  data.tar.gz: 495f951c875f7572f38b77e6739fcbd49856160a0d84e96cd76f701c97d1262d
 SHA512:
-  metadata.gz: 29160e5b7d0dea492dd8cb2591b3797a564e2bef6bdabe7fa355ad79cde4dc516cf8537eef1c6298852a22dacf74126b5405bdbcd6fe63dd358adc37779e693e
-  data.tar.gz: 8ef704e93632b9f1d60eb4f521f82c7b55e072ef507cea2267fbccdd6ecd76980e43bf6720c3ce0449df38dcfc3753d970167cf5a6b80af85cb868fb5a1169e1
+  metadata.gz: 4f855f052b32a2b172a8bb390d1bd19680fccc568996a9b286c4edf9eec2665ad3e0c97b8ff686d760da9dd8f9306ef941cb1ed449f65b984ac01d139818230d
+  data.tar.gz: a0abb3efe8343044f8581ad5f1c476f3a822c7225daf3ec5638d4a61cb685d5db3886f7f884d461ab685a4b8ff67f68894fca25324665219051ebd439a6a428a

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

@@ -240,7 +240,7 @@ Override CSS custom properties after the engine import. Values are full CSS colo
 }
 ```
 
-Key tokens: `--accent`, `--accent-foreground`, `--background`, `--foreground`, `--foreground-muted`, `--border`, `--border-control`, `--surface`, `--surface-highlighted`, `--danger`, `--header-height`.
+Key tokens: `--accent`, `--accent-foreground`, `--background`, `--foreground`, `--foreground-muted`, `--border`, `--border-control`, `--surface`, `--surface-highlighted`, `--danger`, `--header-height`, `--l-ui-navigation-width`.
 
 ## Asset overrides
 
@@ -250,9 +250,17 @@ Place files in `app/assets/images/layered_ui/` to replace engine defaults:
 
 The panel toggle button uses an inline SVG that inherits `currentColor`. Recolor it by overriding the `--button-primary-icon` Tier 2 token, or replace the image by setting both `@l_ui_panel_icon_light_url` and `@l_ui_panel_icon_dark_url` (per-request).
 
+## Ejecting a view
+
+Any engine view can be replaced by copying it to the same path in the host application - `app/views/devise/registrations/edit.html.erb` overrides the Settings screen, `app/views/layouts/layered_ui/_navigation.html.erb` the sidebar, and so on. Application views resolve before engine views, so no configuration is needed.
+
+Find the original to copy with `bundle info layered-ui-rails --path`. Unlike engine views, an ejected view lives in the host application, so it may use plain Tailwind utilities alongside the `l-ui-*` classes - the host's Tailwind build scans it.
+
+Note that `bin/rails generate devise:views` copies Devise's own unstyled views into `app/views/devise/`, which overrides *every* styled view the engine provides, not just the one being changed. Eject the individual views instead.
+
 ## Optional integrations
 
-- **Devise** - auto-detected. Provides styled auth views, header login/register buttons, sidebar user info and logout. Setup: `bundle add devise`, run `devise:install` and `devise User` generators, add `devise_for :users` to routes. Configure `Layered::Ui.current_user_method` if not using `:current_user`, and `Layered::Ui.devise_scope` if the Devise mapping isn't `:user`. Helpers: `l_ui_devise_installed?`, `l_ui_user_signed_in?`.
+- **Devise** - auto-detected. Provides styled auth views (including an account settings screen at `registrations#edit`), header login/register buttons, and sidebar user info with a Settings/Logout menu. Setup: `bundle add devise`, run `devise:install` and `devise User` generators, add `devise_for :users` to routes. Configure `Layered::Ui.current_user_method` if not using `:current_user`, and `Layered::Ui.devise_scope` if the Devise mapping isn't `:user`. Helpers: `l_ui_devise_installed?`, `l_ui_user_signed_in?`.
 - **Pagy** - auto-detected. Use `l_ui_pagy(@pagy)` for styled pagination.
 - **Ransack** - auto-detected. Use `l_ui_search_form` and `l_ui_sort_link` for styled search and sortable tables.
 

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

@@ -398,6 +398,9 @@ The listbox and filtered-out options are hidden with the `hidden` attribute, so
 .l-ui-navigation__section-chevron       Toggle chevron (rotates when closed)
 .l-ui-navigation__section-items         Section body (ul, hidden when closed)
 .l-ui-navigation__user            User info section
+.l-ui-navigation__user-button     Unpadded full-width account menu trigger (pair with .l-ui-button)
+.l-ui-navigation__user-chevron    Upward chevron inside the account menu trigger
+.l-ui-navigation__user-popover    Account menu popover sized to the sidebar's inner column
 .l-ui-navigation__user-name       User name text
 .l-ui-navigation__user-email      User email text
 ```
@@ -488,6 +491,7 @@ Always combine the base block with one size modifier (e.g. `class="l-ui-icon l-u
 ```
 .l-ui-mt-0/2/3/4/6/8            Margin top (fixed scale)
 .l-ui-mb-0                      Margin bottom zero
+.l-ui-mb-4                      Margin bottom (1rem)
 .l-ui-sr-only                   Visually hidden, screen reader only
 .l-ui-skip-link                 Accessibility skip link
 .l-ui-list                      Styled list
@@ -533,6 +537,7 @@ Tier 2 - Full palette (override individually as needed):
 --error-text            Error text
 --header-height         Header height (default 63px)
 --l-ui-gutter           Page/header horizontal + bottom padding (default 1rem)
+--l-ui-navigation-width Sidebar navigation width (default 256px)
 --l-ui-contained-width  Max width of contained content - header + .l-ui-page__contained (default 80rem)
 ```
 

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

@@ -283,6 +283,7 @@ Field options:
 l_ui_normalise_field(record, config)  # Normalise a raw field config into canonical form
 l_ui_field_error_id(record, attribute)  # Error element ID for aria-describedby
 l_ui_field_hint_id(record, attribute)   # Hint element ID for aria-describedby
+l_ui_field_describedby(record, attribute, hint: false)  # Space-joined hint + error IDs for aria-describedby
 ```
 
 ## Modal
@@ -514,12 +515,14 @@ Use these when overriding the header actions group with `:l_ui_header_actions` t
 l_ui_user_signed_in?      # Returns true if current user is present
 l_ui_current_user         # Returns the current user object
 l_ui_devise_installed?    # Returns true if Devise is loaded
+l_ui_settings_screen?     # Returns true on the Settings screen (Devise registrations#edit)
 l_ui_new_registration_path # Devise registration path for the configured scope, or nil
+l_ui_edit_registration_path # Devise account settings path for the configured scope, or nil
 l_ui_new_session_path      # Devise sign-in path for the configured scope, or nil
 l_ui_destroy_session_path  # Devise sign-out path for the configured scope, or nil
 ```
 
-Configure the current user method, and the Devise scope used to build the login/register/logout paths (`new_registration_path`, `new_session_path`, `destroy_session_path`):
+Configure the current user method, and the Devise scope used to build the login/register/settings/logout paths (`new_registration_path`, `edit_registration_path`, `new_session_path`, `destroy_session_path`):
 
 ```ruby
 # config/initializers/layered_ui.rb

data/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. This project follows [Semantic Versioning](https://semver.org/).
 
+## [0.24.0] - 2026-08-22
+
+### Added
+
+- Devise account settings: Devise's `registrations#edit` is styled as a Settings screen at `/users/edit`, with the account details under an "Account" tab. A signed-in user can change their email (and their name, if the model has one), set a new password, or cancel their account - all of it confirmed with the current password, as Devise expects. If your user model has a `name` attribute, permit it for `:account_update` as well as `:sign_up`. Link to the screen with `l_ui_edit_registration_path`, and use `l_ui_settings_screen?` to keep application chrome that a layout otherwise strips from Devise views.
+- Sidebar account menu: the signed-in user's name and email in the sidebar are now a menu button opening a popover holding Settings and Logout, replacing the standalone logout button. The menu is sized to the sidebar's inner column so it lines up with the name and email, and only the entries whose Devise routes exist are rendered.
+- Ejecting a view: any engine view can be replaced by copying it to the matching path in your application - `app/views/devise/registrations/edit.html.erb` takes over the Settings screen, `app/views/layouts/layered_ui/_navigation.html.erb` the sidebar - with no configuration. The engine's views are still prepended so they beat Devise's own, but your `app/views` is prepended back on top, restoring the precedence Rails gives you by default. Note that `bin/rails generate devise:views` generates *every* Devise view, so it replaces the whole styled set rather than the one you meant to change. See `UPGRADING.md`.
+- `--l-ui-navigation-width`: the sidebar navigation width (default 256px), previously hard-coded, now overridable alongside the other layout tokens.
+
+### Fixed
+
+- Devise form fields are scoped to the mapping rather than the model, so an app whose mapping name differs from its model (`devise_for :members, class_name: "User"`) submits parameters under the name Devise looks for. Previously the fields were named after the model, and nothing the user typed reached the controller.
+- Field hints on the Devise views carry an id and are referenced by their input's `aria-describedby` (assembled by the new `l_ui_field_describedby` helper), so a screen reader announces the password length requirement along with the field instead of leaving it unlinked.
+- The "Need assistance?" heading on the Devise views is rendered only when at least one of the links beneath it is. Previously it appeared whenever the matching Devise modules were enabled, so a page whose only link was suppressed showed a heading over nothing.
+
+### Changed
+
+- Logout has moved out of the sidebar into the account menu. A host that targeted the sidebar's `l-ui-button--outline-danger` logout button, in CSS or in a system test, will need to look inside `l-ui-navigation__user-popover` instead.
+
 ## [0.23.0] - 2026-08-22
 
 ### Added

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

@@ -105,6 +105,7 @@
     --l-ui-hero-image: url('layered_ui/hero_background_light.webp');
     --header-height: 63px;
     --l-ui-gutter: 1rem;
+    --l-ui-navigation-width: 256px;
     --l-ui-contained-width: 80rem;
   }
 
@@ -322,6 +323,10 @@
   @apply !mb-0;
 }
 
+.l-ui-mb-4 {
+  @apply !mb-4;
+}
+
 /* List */
 
 .l-ui-list {
@@ -518,7 +523,7 @@
 }
 
 .l-ui-body--always-show-navigation .l-ui-page--with-navigation {
-  @apply md:ml-[256px];
+  @apply md:ml-[var(--l-ui-navigation-width)];
 }
 
 /* Zero the page's top gutter so the first section sits flush at the viewport top, behind the
@@ -990,7 +995,7 @@
 .l-ui-navigation-container {
   @apply fixed top-[calc(var(--header-height)+1px)] left-0 bottom-0
          z-50
-         w-[256px]
+         w-[var(--l-ui-navigation-width)]
          bg-background
          md:border-r md:border-border
          -translate-x-full
@@ -1162,9 +1167,34 @@
          p-4;
 }
 
+/* Fill the sidebar's inner column: the navigation width less the gutters on
+   .l-ui-navigation__user, so the menu lines up with the name, email, and trigger.
+   max-w-none overrides .l-ui-popover's own max-w-xs. */
+.l-ui-navigation__user-popover .l-ui-popover {
+  @apply w-[calc(var(--l-ui-navigation-width)-var(--l-ui-gutter)*2)] max-w-none;
+}
+
+/* Points up: the menu opens above the trigger, which sits at the foot of the sidebar. */
+.l-ui-navigation__user-chevron {
+  @apply inline-block
+         w-3 h-3
+         rotate-180;
+
+  background-color: currentColor;
+  -webkit-mask-image: url('layered_ui/icon_chevron_down.svg');
+  mask-image: url('layered_ui/icon_chevron_down.svg');
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
 .l-ui-navigation__user-name-and-email {
-  @apply flex flex-col
-         gap-1;
+  @apply flex flex-1 flex-col min-w-0
+         gap-1
+         break-words;
 }
 
 .l-ui-navigation__user-name {
@@ -1271,6 +1301,18 @@
   @apply md:hidden;
 }
 
+/* The whole navigation user block is the account menu trigger: pair with
+   .l-ui-button. Name and email on the left, chevron on the right. Drops the
+   button's own padding so its contents sit flush with .l-ui-navigation__user's
+   gutter, which is where the popover's borders land. Defined here rather than
+   with the other navigation classes so it follows .l-ui-button in the cascade. */
+.l-ui-navigation__user-button {
+  @apply w-full h-auto justify-between
+         gap-2 p-0
+         text-left
+         rounded-sm;
+}
+
 .l-ui-button--icon {
   @apply min-w-[44px]
          p-2

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

@@ -14,10 +14,21 @@ module Layered
         l_ui_current_user.present?
       end
 
+      # True on the account settings screen (Devise's registrations#edit). Layouts
+      # that strip app chrome from Devise views want an exception for it, as it is
+      # part of the signed-in app rather than the authentication flow.
+      def l_ui_settings_screen?
+        controller_name == "registrations" && action_name == "edit"
+      end
+
       def l_ui_new_registration_path
         l_ui_devise_path(:new, :registration)
       end
 
+      def l_ui_edit_registration_path
+        l_ui_devise_path(:edit, :registration)
+      end
+
       def l_ui_new_session_path
         l_ui_devise_path(:new, :session)
       end

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

@@ -65,6 +65,15 @@ module Layered
         "#{record.model_name.param_key}_#{attribute}_hint"
       end
 
+      # Space-joined ids for a field's aria-describedby: its hint (when the field
+      # has one) followed by its error message, which is always rendered.
+      def l_ui_field_describedby(record, attribute, hint: false)
+        ids = []
+        ids << l_ui_field_hint_id(record, attribute) if hint
+        ids << l_ui_field_error_id(record, attribute)
+        ids.join(" ")
+      end
+
       private
 
       def l_ui_field_type_for(model_class, attribute)

data/app/views/devise/confirmations/new.html.erb

@@ -2,12 +2,12 @@
   <div class="l-ui-page__narrow">
     <h1>Resend confirmation instructions</h1>
 
-    <%= form_with(model: resource, as: resource_name, url: confirmation_path(resource_name), method: :post, class: 'l-ui-form l-ui-mt-3') do |f| %>
+    <%= form_with(model: resource, scope: resource_name, url: confirmation_path(resource_name), method: :post, class: 'l-ui-form l-ui-mt-3') do |f| %>
       <%= render 'layered_ui/shared/form_errors', item: resource %>
 
       <div class="l-ui-form__group">
         <%= render 'layered_ui/shared/label', form: f, field: :email, required: true %>
-        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "l-ui-form__field", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), "aria-describedby": "#{resource_name}_email_error" %>
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "l-ui-form__field", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), aria: { describedby: l_ui_field_describedby(resource, :email) } %>
         <%= render 'layered_ui/shared/field_error', object: resource, field: :email %>
       </div>
 

data/app/views/devise/passwords/edit.html.erb

@@ -2,16 +2,16 @@
   <div class="l-ui-page__narrow">
     <h1>Change your password</h1>
 
-    <%= form_with(model: resource, as: resource_name, url: password_path(resource_name), method: :put, class: 'l-ui-form l-ui-mt-3') do |f| %>
+    <%= form_with(model: resource, scope: resource_name, url: password_path(resource_name), method: :put, class: 'l-ui-form l-ui-mt-3') do |f| %>
       <%= render 'layered_ui/shared/form_errors', item: resource %>
       <%= f.hidden_field :reset_password_token %>
 
       <div class="l-ui-form__group">
         <%= render 'layered_ui/shared/label', form: f, field: :password, name: "New password", required: true %>
-        <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: "l-ui-form__field", "aria-describedby": "#{resource_name}_password_error" %>
+        <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :password, hint: @minimum_password_length.present?) } %>
         <%= render 'layered_ui/shared/field_error', object: resource, field: :password %>
         <% if @minimum_password_length %>
-          <div class="l-ui-form__hint">
+          <div class="l-ui-form__hint" id="<%= l_ui_field_hint_id(resource, :password) %>">
             (<%= @minimum_password_length %> characters minimum)
           </div>
         <% end %>
@@ -19,10 +19,10 @@
 
       <div class="l-ui-form__group">
         <%= render 'layered_ui/shared/label', form: f, field: :password_confirmation, name: "Confirm new password", required: true %>
-        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "l-ui-form__field", "aria-describedby": "#{resource_name}_password_confirmation_error" %>
+        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :password_confirmation, hint: @minimum_password_length.present?) } %>
         <%= render 'layered_ui/shared/field_error', object: resource, field: :password_confirmation %>
         <% if @minimum_password_length %>
-          <div class="l-ui-form__hint">
+          <div class="l-ui-form__hint" id="<%= l_ui_field_hint_id(resource, :password_confirmation) %>">
             Please enter the same password again
           </div>
         <% end %>

data/app/views/devise/passwords/new.html.erb

@@ -2,12 +2,12 @@
   <div class="l-ui-page__narrow">
     <h1>Forgot your password?</h1>
 
-    <%= form_with(model: resource, as: resource_name, url: password_path(resource_name), method: :post, class: 'l-ui-form l-ui-mt-3') do |f| %>
+    <%= form_with(model: resource, scope: resource_name, url: password_path(resource_name), method: :post, class: 'l-ui-form l-ui-mt-3') do |f| %>
       <%= render 'layered_ui/shared/form_errors', item: resource %>
 
       <div class="l-ui-form__group">
         <%= render 'layered_ui/shared/label', form: f, field: :email, required: true %>
-        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "l-ui-form__field", "aria-describedby": "#{resource_name}_email_error" %>
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :email) } %>
         <%= render 'layered_ui/shared/field_error', object: resource, field: :email %>
       </div>
 

data/app/views/devise/registrations/edit.html.erb

@@ -0,0 +1,86 @@
+<h1>Settings</h1>
+
+<div class="l-ui-tabs l-ui-mt-4" data-controller="l-ui--tabs">
+  <div class="l-ui-tabs__list" role="tablist" data-action="keydown->l-ui--tabs#keydown">
+    <button class="l-ui-tabs__tab l-ui-tabs__tab--active" role="tab"
+            data-action="l-ui--tabs#select"
+            data-l-ui--tabs-target="tab"
+            aria-selected="true" aria-controls="l-ui-settings-panel-account" id="l-ui-settings-tab-account">
+      Account
+    </button>
+  </div>
+
+  <div class="l-ui-tabs__panel" role="tabpanel"
+       data-l-ui--tabs-target="panel"
+       id="l-ui-settings-panel-account" aria-labelledby="l-ui-settings-tab-account">
+    <%= form_with(model: resource, scope: resource_name, url: registration_path(resource_name), method: :put, class: 'l-ui-form l-ui-mt-3') do |f| %>
+      <%= render 'layered_ui/shared/form_errors', item: resource %>
+
+      <% if resource.class.column_names.include?('name') %>
+        <div class="l-ui-form__group">
+          <%= render 'layered_ui/shared/label', form: f, field: :name, required: true %>
+          <%= f.text_field :name, autocomplete: "name", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :name) } %>
+          <%= render 'layered_ui/shared/field_error', object: resource, field: :name %>
+        </div>
+      <% end %>
+
+      <div class="l-ui-form__group">
+        <%= render 'layered_ui/shared/label', form: f, field: :email, required: true %>
+        <%= f.email_field :email, autocomplete: "email", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :email, hint: devise_mapping.confirmable? && resource.pending_reconfirmation?) } %>
+        <%= render 'layered_ui/shared/field_error', object: resource, field: :email %>
+
+        <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
+          <div class="l-ui-form__hint" id="<%= l_ui_field_hint_id(resource, :email) %>">
+            Currently waiting confirmation for: <%= resource.unconfirmed_email %>
+          </div>
+        <% end %>
+      </div>
+
+      <h2 class="l-ui-mt-8 l-ui-mb-4 l-ui-heading--section">
+        Change your password
+      </h2>
+
+      <p>Leave these blank if you do not want to change your password.</p>
+
+      <div class="l-ui-form__group">
+        <%= render 'layered_ui/shared/label', form: f, field: :password, name: "New password", required: false %>
+        <%= f.password_field :password, autocomplete: "new-password", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :password, hint: @minimum_password_length.present?) } %>
+        <%= render 'layered_ui/shared/field_error', object: resource, field: :password %>
+        <% if @minimum_password_length %>
+          <div class="l-ui-form__hint" id="<%= l_ui_field_hint_id(resource, :password) %>">
+            (<%= @minimum_password_length %> characters minimum)
+          </div>
+        <% end %>
+      </div>
+
+      <div class="l-ui-form__group">
+        <%= render 'layered_ui/shared/label', form: f, field: :password_confirmation, name: "Confirm new password", required: false %>
+        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :password_confirmation) } %>
+        <%= render 'layered_ui/shared/field_error', object: resource, field: :password_confirmation %>
+      </div>
+
+      <div class="l-ui-form__group l-ui-form__group--large-gap">
+        <%= render 'layered_ui/shared/label', form: f, field: :current_password, name: "Current password", required: true %>
+        <%= f.password_field :current_password, autocomplete: "current-password", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :current_password, hint: true) } %>
+        <%= render 'layered_ui/shared/field_error', object: resource, field: :current_password %>
+        <div class="l-ui-form__hint" id="<%= l_ui_field_hint_id(resource, :current_password) %>">
+          We need your current password to confirm your changes
+        </div>
+      </div>
+
+      <div class="l-ui-form__actions">
+        <%= f.submit "Save changes", class: "l-ui-button l-ui-button--primary" %>
+      </div>
+    <% end %>
+
+    <h2 class="l-ui-mt-8 l-ui-mb-4 l-ui-heading--section">
+      Cancel your account
+    </h2>
+
+    <p>Cancelling your account is permanent and cannot be undone.</p>
+
+    <div class="l-ui-form__group">
+      <%= button_to "Cancel my account", registration_path(resource_name), method: :delete, class: "l-ui-button l-ui-button--outline-danger", form: { data: { turbo_confirm: "Are you sure? This cannot be undone." } } %>
+    </div>
+  </div>
+</div>

data/app/views/devise/registrations/new.html.erb

@@ -2,29 +2,29 @@
   <div class="l-ui-page__narrow">
     <h1>Register</h1>
 
-    <%= form_with(model: resource, as: resource_name, url: registration_path(resource_name), class: 'l-ui-form l-ui-mt-3') do |f| %>
+    <%= form_with(model: resource, scope: resource_name, url: registration_path(resource_name), class: 'l-ui-form l-ui-mt-3') do |f| %>
       <%= render 'layered_ui/shared/form_errors', item: resource %>
 
       <% if resource.class.column_names.include?('name') %>
         <div class="l-ui-form__group">
           <%= render 'layered_ui/shared/label', form: f, field: :name, required: true %>
-          <%= f.text_field :name, autocomplete: "name", class: "l-ui-form__field", "aria-describedby": "#{resource_name}_name_error" %>
+          <%= f.text_field :name, autocomplete: "name", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :name) } %>
           <%= render 'layered_ui/shared/field_error', object: resource, field: :name %>
         </div>
       <% end %>
 
       <div class="l-ui-form__group">
         <%= render 'layered_ui/shared/label', form: f, field: :email, required: true %>
-        <%= f.email_field :email, autocomplete: "email", class: "l-ui-form__field", "aria-describedby": "#{resource_name}_email_error" %>
+        <%= f.email_field :email, autocomplete: "email", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :email) } %>
         <%= render 'layered_ui/shared/field_error', object: resource, field: :email %>
       </div>
 
       <div class="l-ui-form__group">
         <%= render 'layered_ui/shared/label', form: f, field: :password, required: true %>
-        <%= f.password_field :password, autocomplete: "new-password", class: "l-ui-form__field", "aria-describedby": "#{resource_name}_password_error" %>
+        <%= f.password_field :password, autocomplete: "new-password", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :password, hint: @minimum_password_length.present?) } %>
         <%= render 'layered_ui/shared/field_error', object: resource, field: :password %>
         <% if @minimum_password_length %>
-          <div class="l-ui-form__hint">
+          <div class="l-ui-form__hint" id="<%= l_ui_field_hint_id(resource, :password) %>">
             (<%= @minimum_password_length %> characters minimum)
           </div>
         <% end %>
@@ -32,10 +32,10 @@
 
       <div class="l-ui-form__group">
         <%= render 'layered_ui/shared/label', form: f, field: :password_confirmation, name: "Confirm password", required: true %>
-        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "l-ui-form__field", "aria-describedby": "#{resource_name}_password_confirmation_error" %>
+        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :password_confirmation, hint: @minimum_password_length.present?) } %>
         <%= render 'layered_ui/shared/field_error', object: resource, field: :password_confirmation %>
         <% if @minimum_password_length %>
-          <div class="l-ui-form__hint">
+          <div class="l-ui-form__hint" id="<%= l_ui_field_hint_id(resource, :password_confirmation) %>">
             Please enter the same password again
           </div>
         <% end %>

data/app/views/devise/sessions/new.html.erb

@@ -2,18 +2,18 @@
   <div class="l-ui-page__narrow">
     <h1>Login</h1>
 
-    <%= form_with(model: resource, as: resource_name, url: session_path(resource_name), class: 'l-ui-form l-ui-mt-3') do |f| %>
+    <%= form_with(model: resource, scope: resource_name, url: session_path(resource_name), class: 'l-ui-form l-ui-mt-3') do |f| %>
       <%= render 'layered_ui/shared/form_errors', item: resource %>
 
       <div class="l-ui-form__group">
         <%= render 'layered_ui/shared/label', form: f, field: :email, required: true %>
-        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "l-ui-form__field", "aria-describedby": "#{resource_name}_email_error" %>
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :email) } %>
         <%= render 'layered_ui/shared/field_error', object: resource, field: :email %>
       </div>
 
       <div class="l-ui-form__group">
         <%= render 'layered_ui/shared/label', form: f, field: :password, required: true %>
-        <%= f.password_field :password, autocomplete: "current-password", class: "l-ui-form__field", "aria-describedby": "#{resource_name}_password_error" %>
+        <%= f.password_field :password, autocomplete: "current-password", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :password) } %>
         <%= render 'layered_ui/shared/field_error', object: resource, field: :password %>
       </div>
 

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

@@ -10,21 +10,25 @@
   </p>
 <% end %>
 
-<%- if devise_mapping.recoverable? || devise_mapping.confirmable? || (devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email)) %>
-  <h2 class="l-ui-mt-6 l-ui-heading--section">
+<%- show_password_reset = devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
+<%- show_confirmation = devise_mapping.confirmable? && controller_name != 'confirmations' %>
+<%- show_unlock = devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
+
+<%- if show_password_reset || show_confirmation || show_unlock %>
+  <h2 class="l-ui-mt-6 l-ui-mb-4 l-ui-heading--section">
     Need assistance?
   </h2>
 <% end %>
 
-<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
+<%- if show_password_reset %>
   <p><%= link_to "Reset your password", new_password_path(resource_name) %></p>
 <% end %>
 
-<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
+<%- if show_confirmation %>
   <p><%= link_to "Resend account confirmation email", new_confirmation_path(resource_name) %></p>
 <% end %>
 
-<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
+<%- if show_unlock %>
   <p><%= link_to "Resend account unlock email", new_unlock_path(resource_name) %></p>
 <% end %>
 

data/app/views/devise/unlocks/new.html.erb

@@ -2,12 +2,12 @@
   <div class="l-ui-page__narrow">
     <h1>Resend unlock instructions</h1>
 
-    <%= form_with(model: resource, as: resource_name, url: unlock_path(resource_name), method: :post, class: 'l-ui-form l-ui-mt-3') do |f| %>
+    <%= form_with(model: resource, scope: resource_name, url: unlock_path(resource_name), method: :post, class: 'l-ui-form l-ui-mt-3') do |f| %>
       <%= render 'layered_ui/shared/form_errors', item: resource %>
 
       <div class="l-ui-form__group">
         <%= render 'layered_ui/shared/label', form: f, field: :email, required: true %>
-        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "l-ui-form__field", "aria-describedby": "#{resource_name}_email_error" %>
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "l-ui-form__field", aria: { describedby: l_ui_field_describedby(resource, :email) } %>
         <%= render 'layered_ui/shared/field_error', object: resource, field: :email %>
       </div>
 

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

@@ -7,9 +7,8 @@
   base_opts[:required] = true if config[:required]
 
   unless config[:as] == :hidden
-    describedby = [l_ui_field_error_id(record, attribute)]
-    describedby.unshift(l_ui_field_hint_id(record, attribute)) if config[:hint]
-    base_opts["aria-describedby"] = describedby.join(" ")
+    base_opts["aria-describedby"] =
+      l_ui_field_describedby(record, attribute, hint: config[:hint].present?)
   end
 
   field_class = ->(base) { token_list(base, extra_class) }

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

@@ -7,23 +7,31 @@
 
       <% if l_ui_user_signed_in? %>
         <div class="l-ui-navigation__user">
-          <div class="l-ui-navigation__user-name-and-email">
-            <% if l_ui_current_user.respond_to?(:name) %>
-              <div class="l-ui-navigation__user-name">
-                <%= l_ui_current_user.name %>
-              </div>
-            <% end %>
+          <% if l_ui_edit_registration_path || l_ui_destroy_session_path %>
+            <%= l_ui_popover(placement: :top, align: :end, container: { class: "l-ui-navigation__user-popover" }) do |p| %>
+              <% p.trigger(class: "l-ui-button l-ui-navigation__user-button") do %>
+                <%= render "layouts/layered_ui/user_name_and_email" %>
+
+                <span class="l-ui-sr-only">Account menu</span>
+                <span class="l-ui-navigation__user-chevron" aria-hidden="true"></span>
+              <% end %>
+
+              <div class="l-ui-popover__menu">
+                <% if l_ui_edit_registration_path %>
+                  <%= link_to "Settings", l_ui_edit_registration_path, class: "l-ui-popover__menu-item" %>
+                <% end %>
+
+                <% if l_ui_edit_registration_path && l_ui_destroy_session_path %>
+                  <hr class="l-ui-popover__menu-divider">
+                <% end %>
 
-            <% if l_ui_current_user.respond_to?(:email) %>
-              <div class="l-ui-navigation__user-email">
-                <%= l_ui_current_user.email %>
+                <% if l_ui_destroy_session_path %>
+                  <%= button_to "Logout", l_ui_destroy_session_path, method: :delete, class: "l-ui-popover__menu-item l-ui-popover__menu-item--danger" %>
+                <% end %>
               </div>
             <% end %>
-          </div>
-          <% if l_ui_destroy_session_path %>
-            <div class="l-ui-mt-4">
-              <%= button_to "Logout", l_ui_destroy_session_path, method: :delete, class: "l-ui-button l-ui-button--outline-danger l-ui-button--full" %>
-            </div>
+          <% else %>
+            <%= render "layouts/layered_ui/user_name_and_email" %>
           <% end %>
         </div>
       <% end %>

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

@@ -0,0 +1,15 @@
+<%# Spans throughout: this also renders inside the account menu trigger button, %>
+<%# whose content model only allows phrasing content. %>
+<span class="l-ui-navigation__user-name-and-email">
+  <% if l_ui_current_user.respond_to?(:name) %>
+    <span class="l-ui-navigation__user-name">
+      <%= l_ui_current_user.name %>
+    </span>
+  <% end %>
+
+  <% if l_ui_current_user.respond_to?(:email) %>
+    <span class="l-ui-navigation__user-email">
+      <%= l_ui_current_user.email %>
+    </span>
+  <% end %>
+</span>

data/lib/layered/ui/engine.rb

@@ -43,13 +43,21 @@ module Layered
         end
       end
 
+      # The engine's views are prepended so they beat views shipped by other
+      # engines (Devise's own, in particular, which would otherwise win or lose
+      # on engine load order alone). The host application's app/views is then
+      # prepended back on top, so an application can still eject any engine view
+      # by copying it to the matching path - the ordering Rails gives you by
+      # default, which a bare prepend would take away.
       initializer "layered-ui-rails.view_paths" do
         ActiveSupport.on_load(:action_controller) do
           prepend_view_path Engine.root.join("app/views")
+          prepend_view_path Rails.root.join("app/views")
         end
 
         ActiveSupport.on_load(:action_mailer) do
           prepend_view_path Engine.root.join("app/views")
+          prepend_view_path Rails.root.join("app/views")
         end
       end
     end

data/lib/layered/ui/version.rb

@@ -1,5 +1,5 @@
 module Layered
   module Ui
-    VERSION = "0.23.0"
+    VERSION = "0.24.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: layered-ui-rails
 version: !ruby/object:Gem::Version
-  version: 0.23.0
+  version: 0.24.0
 platform: ruby
 authors:
 - layered.ai
@@ -254,6 +254,7 @@ files:
 - app/views/devise/mailer/unlock_instructions.html.erb
 - app/views/devise/passwords/edit.html.erb
 - app/views/devise/passwords/new.html.erb
+- app/views/devise/registrations/edit.html.erb
 - app/views/devise/registrations/new.html.erb
 - app/views/devise/sessions/new.html.erb
 - app/views/devise/shared/_links.html.erb
@@ -273,6 +274,7 @@ files:
 - app/views/layouts/layered_ui/_notice.html.erb
 - app/views/layouts/layered_ui/_panel.html.erb
 - app/views/layouts/layered_ui/_theme_toggle.html.erb
+- app/views/layouts/layered_ui/_user_name_and_email.html.erb
 - app/views/layouts/layered_ui/application.html.erb
 - config/importmap.rb
 - lib/generators/layered/ui/create_overrides_generator.rb