layered-ui-rails 0.23.0 → 0.25.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2346c306d3b5e355c1f61a51254d79701fe3a9ad2e8bc5817aa7311b0e024db0
-  data.tar.gz: b01fdcd1dca34dd339ea4183933b5b6fcded78d3a2ee2c4c371ed92cd18e3214
+  metadata.gz: d892f7efaed58d161179cc5478eaf0961b4b31c2e822aaba4063143343aeac31
+  data.tar.gz: 28e37164714d1a354b255a10a3833069b94f6202480082b29e70fcc23a485ffa
 SHA512:
-  metadata.gz: 29160e5b7d0dea492dd8cb2591b3797a564e2bef6bdabe7fa355ad79cde4dc516cf8537eef1c6298852a22dacf74126b5405bdbcd6fe63dd358adc37779e693e
-  data.tar.gz: 8ef704e93632b9f1d60eb4f521f82c7b55e072ef507cea2267fbccdd6ecd76980e43bf6720c3ce0449df38dcfc3753d970167cf5a6b80af85cb868fb5a1169e1
+  metadata.gz: d2d3c833c03dd9c56d88bf578fb69f27ddf0eda03baf31ebb0953e6de0bb9b5ae1248d444e77c362d18e4288aad6adbae28a4959f95c68a392b373417c23040d
+  data.tar.gz: 661964c07f3d03e1d4ee937a9f4b3f3d456491fadb9ee67778cee063d9eda535fbf02a276bcfe1a3c0a1b67579ece03afda66a5e1d98c90ebe6b232de6c05731

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

@@ -257,14 +257,21 @@ Renders a complete form with all fields, error summary, and submit button via th
 
 Field options:
 - `attribute` (Symbol) - model attribute
-- `as` (Symbol, optional) - field type; auto-detected from column type. Supported: `:string`, `:text`, `:email`, `:password`, `:number`, `:tel`, `:url`, `:search`, `:date`, `:datetime`, `:time`, `:month`, `:week`, `:color`, `:range`, `:file`, `:select`, `:checkbox`, `:hidden`. Forms automatically become `multipart` when any field is `:file`.
+- `as` (Symbol, optional) - field type; auto-detected from column type. Supported: `:string`, `:text`, `:email`, `:password`, `:number`, `:tel`, `:url`, `:search`, `:date`, `:datetime`, `:time`, `:month`, `:week`, `:color`, `:range`, `:file`, `:select`, `:combobox`, `:checkbox`, `:hidden`. Forms automatically become `multipart` when any field is `:file`.
 - `label` (String, optional) - custom label text; defaults to humanised attribute
 - `required` (Boolean, optional) - marks field as required; default false
 - `hint` (String, optional) - help text below the field
-- `collection` (Array, optional) - required for `:select` type; e.g. `[['Label', value], ...]`
+- `collection` (Array, optional) - required for `:select`; for `:combobox` either this or `url:` is required; e.g. `[['Label', value], ...]`
 - `include_blank` (Boolean or String, optional) - for `:select` fields; defaults to `true`. Pass a string to use as the blank option's label, or `false` to omit it. Suppressed when `prompt:` is set
 - `prompt` (String, optional) - for `:select` fields; prompt text shown as the first option, only selectable when no value is set
 - `placeholder` (String, optional) - input placeholder text
+- any other key passes through to the underlying field helper as an HTML attribute (`:combobox` excepted - see below)
+
+A `:combobox` field renders its own label and hint, adds the field's error element to its `aria-describedby`, and defaults `selected:` to the record's current value. That, and its keyword-only signature, give three rules:
+
+- It takes only `l_ui_combobox`'s own options - `url:`, `multiple:`, `create:`, `create_name:`, `reorder:`, `min_chars:`, `text:`, `selected:`, `disabled:`, `describedby:`, `container:`, `id:`. Every other key raises, `prompt:` and `include_blank:` included; extra HTML attributes go on `container:`.
+- `multiple:` is inferred from the attribute rather than defaulting to `l_ui_combobox`'s `true`: an `_ids` attribute, an array column, or one already holding an array is multiple; anything else is single, so a scalar attribute posts a scalar rather than an array Active Record would cast to `nil`. Pass `multiple:` explicitly to override.
+- Pass `selected: [[@post.user.name, @post.user_id]]` whenever the record's value might not be in the options - a `url:` collection never holds it, and nor does a scoped, paginated or filtered `collection:`. Without it, the field raises on an edit form.
 
 ```erb
 <%= l_ui_form(@post,
@@ -273,6 +280,8 @@ Field options:
     { attribute: :body, as: :text },
     { attribute: :category, as: :select, collection: Category.pluck(:name, :id) },
     { attribute: :published, as: :checkbox },
+    { attribute: :tag_ids, as: :combobox, collection: Tag.pluck(:name, :id) },
+    { attribute: :author_id, as: :combobox, url: options_users_path },
   ],
   url: posts_path) %>
 ```
@@ -283,6 +292,8 @@ 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
+l_ui_field_value(record, attribute)     # Record's current value; default :combobox selection
 ```
 
 ## Modal
@@ -414,7 +425,7 @@ When a popover is declared, the tag container itself becomes the `l-ui--popover`
 l_ui_combobox(name, collection: nil, form: nil, selected: nil, multiple: true,
               create: false, create_name: nil, reorder: false, url: nil,
               min_chars: 0, text: {}, id: nil, label: nil, hint: nil, placeholder: nil,
-              required: false, disabled: false, container: {})
+              required: false, disabled: false, describedby: nil, container: {})
 ```
 
 Renders a token select (`class="l-ui-combobox"`): a text input with type-ahead filtering whose selections become removable tags, in the style of an email recipient field. Built on the ARIA combobox pattern - no third-party select library.
@@ -430,8 +441,11 @@ Renders a token select (`class="l-ui-combobox"`): a text input with type-ahead f
 - `url` (String, optional) - endpoint searched as the user types; options come from it rather than from `collection:`
 - `min_chars` (Integer, default `0`) - characters needed before a remote search runs; `0` searches as soon as the field is focused
 - `text` (Hash, optional) - wording for every string the control shows, merged over `Layered::Ui::ComboboxHelper::COMBOBOX_TEXT`: `empty:` ("No matches"), `create:` ("Add “%{term}”"), `min_chars:` ("Type %{count} characters to search."), `progress:` ("Showing %{shown} of %{count} matches."), `error:`, `more_error:`. Placeholders use Rails' `%{name}` syntax; `progress: nil` drops the progress line; an unknown key raises
+- `describedby` (String, optional) - extra element ids appended to the input's `aria-describedby`, for text rendered outside the control (a validation message, say)
 - `label`, `hint`, `placeholder`, `required`, `disabled`, `id`, `container` - as for a normal field
 
+Also available as a field type in `l_ui_form`: `{ attribute: :tag_ids, as: :combobox, collection: ... }`.
+
 ```erb
 <%= form_with model: @post do |f| %>
   <%= l_ui_combobox(:tag_ids, form: f,
@@ -514,12 +528,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,32 @@
 
 All notable changes to this project will be documented in this file. This project follows [Semantic Versioning](https://semver.org/).
 
+## [0.25.0] - 2026-08-23
+
+### Added
+
+- `:combobox` as a form field type: a field declared `as: :combobox` renders through `l_ui_combobox`, so a form gets type-ahead filtering and token selections without dropping out to the helper by hand. The field renders its own label and hint, defaults its selection to the record's current value, and takes the field's error element into the input's `aria-describedby`. Whether the control is multiple is inferred from the attribute - an `_ids` writer, or an array column - so the same declaration posts the same shape on a new record and on an edit; pass `multiple:` to override it.
+- Field options are checked as the field is normalised, so a key the combobox cannot take names itself instead of raising "unknown keyword" mid-render. `:prompt` and `:include_blank` (carried over from `as: :select`) raise too, pointing at `placeholder:` and noting that a combobox with no selection is already blank. A remote (`url:`) field cannot look up the label of a value the record already holds, so that case raises with a pointer to `selected:`.
+
+## [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/combobox_helper.rb

@@ -13,6 +13,15 @@ module Layered
         error: "The options could not be loaded.",
         more_error: "More options could not be loaded."
       }.freeze
+
+      # The keywords +l_ui_combobox+ accepts. Its signature is keyword-only, so
+      # a :combobox field config can only carry these (unlike the other field
+      # types, whose extras become HTML attributes on the input).
+      COMBOBOX_OPTIONS = %i[
+        collection url form selected multiple create create_name reorder
+        min_chars text id label hint placeholder required disabled
+        describedby container
+      ].freeze
       # Renders a token select: a text input with type-ahead filtering whose
       # selections become removable tokens, in the style of an email recipient
       # field. Built on the ARIA combobox pattern (an +input+ with
@@ -116,11 +125,13 @@ module Layered
       #   placeholder: (String)  Input placeholder. Defaults to nothing.
       #   required:    (Boolean) Marks the label and input as required.
       #   disabled:    (Boolean) Disables the input and every token control.
+      #   describedby: (String)  Extra element ids appended to the input's +aria-describedby+, for text
+      #                          rendered outside the control (a validation message, say).
       #   container:   (Hash)    Extra HTML attributes for the wrapping <div>.
       def l_ui_combobox(name, collection: nil, form: nil, selected: nil, multiple: true,
                         create: false, create_name: nil, reorder: false, url: nil,
                         min_chars: 0, text: {}, id: nil, label: nil, hint: nil, placeholder: nil,
-                        required: false, disabled: false, container: {})
+                        required: false, disabled: false, describedby: nil, container: {})
         if collection.nil? && url.nil?
           raise ArgumentError,
                 "l_ui_combobox requires collection: (options filtered in the browser) or url: " \
@@ -157,7 +168,8 @@ module Layered
             (tag.p(hint, id: "#{id}-hint", class: "l-ui-form__hint") if hint),
             l_ui_combobox_control(id, tokens,
                                   value_name: value_name, placeholder: placeholder, hint: hint,
-                                  reorder: reorder, disabled: disabled, required: required, url: url),
+                                  reorder: reorder, disabled: disabled, required: required, url: url,
+                                  describedby: describedby),
             l_ui_combobox_listbox(id, options, tokens, multiple: multiple, url: url, text: text),
             l_ui_combobox_template(reorder: reorder, disabled: disabled),
             (l_ui_combobox_option_template if url),
@@ -203,10 +215,12 @@ module Layered
           if label.nil? && !create
             raise ArgumentError,
                   "l_ui_combobox was given selected value #{value.inspect}, which is not in the " \
-                  "collection. " +
-                  (url ? "Pass it as a [label, value] pair, since a remote collection cannot be " \
-                         "searched for its label. " : "") +
-                  "Pass create: true (with create_name:) to allow values outside it."
+                  "collection. Pass it with its label, e.g. selected: [[\"Label\", " \
+                  "#{value.inspect}]] - " +
+                  (url ? "a remote collection cannot be searched for its label. " :
+                         "a scoped or paginated collection will not contain a value the record " \
+                         "already has. ") +
+                  "Or pass create: true (with create_name:) to allow values outside the collection."
           end
 
           {
@@ -309,8 +323,9 @@ module Layered
         end
       end
 
-      def l_ui_combobox_control(id, tokens, value_name:, placeholder:, hint:, reorder:, disabled:, required:, url: nil)
-        described_by = [("#{id}-hint" if hint), "#{id}-instructions"].compact.join(" ")
+      def l_ui_combobox_control(id, tokens, value_name:, placeholder:, hint:, reorder:, disabled:, required:,
+                                url: nil, describedby: nil)
+        described_by = [("#{id}-hint" if hint), "#{id}-instructions", describedby.presence].compact.join(" ")
 
         tag.div(class: class_names("l-ui-combobox__control", "l-ui-combobox__control--disabled" => disabled),
                 data: { "l-ui--combobox-target" => "control", action: "click->l-ui--combobox#focusInput" }) do

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

@@ -5,7 +5,7 @@ module Layered
         string text email password number tel url search
         date datetime time month week
         color range file
-        select checkbox hidden
+        select checkbox hidden combobox
       ].freeze
 
       # Renders a complete form with all fields, error summary,
@@ -38,11 +38,51 @@ module Layered
                 "Provide collection: [['Label', value], ...] or collection: -> { Model.pluck(:name, :id) }"
         end
 
+        if as == :combobox && config[:collection].nil? && config[:url].nil?
+          raise ArgumentError,
+                "Field :#{attribute} is declared as :combobox but has no :collection or :url. " \
+                "Provide collection: [['Label', value], ...] to filter in the browser, " \
+                "or url: to fetch options from an endpoint as the user types"
+        end
+
+        if as == :combobox && config[:url] && !config.key?(:selected) &&
+           l_ui_field_value(record, attribute).present?
+          raise ArgumentError,
+                "Field :#{attribute} is a remote :combobox with a value already set, but no :selected. " \
+                "A remote collection cannot be searched for the label of an existing value, " \
+                "so pass it with its label, e.g. selected: [[record.user.name, record.user_id]]"
+        end
+
         label = config[:label] || attribute.to_s.humanize
 
         extras = config.except(:attribute, :as, :label, :required, :hint,
                                :collection, :placeholder, :prompt, :include_blank)
 
+        if as == :combobox
+          unusable = {
+            prompt: "Use placeholder: instead, which a combobox shows until something is selected.",
+            include_blank: "A combobox with no selection is already blank, so there is nothing to set."
+          }
+          unusable.each do |key, advice|
+            next unless config.key?(key)
+
+            raise ArgumentError,
+                  "Field :#{attribute} is a :combobox and cannot take :#{key}. #{advice}"
+          end
+
+          extras[:multiple] = l_ui_field_multiple?(record, attribute) unless config.key?(:multiple)
+
+          allowed = ComboboxHelper::COMBOBOX_OPTIONS + [:class]
+          unknown = extras.keys - allowed
+          if unknown.any?
+            raise ArgumentError,
+                  "Field :#{attribute} is a :combobox and cannot take " \
+                  "#{unknown.map { |key| ":#{key}" }.join(', ')}. Unlike the other field types, a " \
+                  "combobox takes only its own options (#{allowed.map { |key| ":#{key}" }.join(', ')}); " \
+                  "extra HTML attributes belong on container:"
+          end
+        end
+
         {
           attribute: attribute,
           as: as,
@@ -57,6 +97,12 @@ module Layered
         }
       end
 
+      # The record's current value for a field, used as the default selection
+      # for a :combobox field when +selected:+ is not given.
+      def l_ui_field_value(record, attribute)
+        record.public_send(attribute) if record.respond_to?(attribute)
+      end
+
       def l_ui_field_error_id(record, attribute)
         "#{record.model_name.param_key}_#{attribute}_error"
       end
@@ -65,8 +111,41 @@ 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
 
+      # Whether a :combobox field holds several values. +l_ui_combobox+ defaults
+      # to a multiple select, but a form field is more often a single scalar
+      # attribute, which would silently cast an array of values to nil. So a
+      # field is multiple only when the attribute is plainly a collection: an
+      # +_ids+ association writer, an array column, or an attribute already
+      # holding an array. The column is asked before the value, so an array
+      # column with no default stays multiple on a new record, where its value
+      # is nil rather than an empty array.
+      def l_ui_field_multiple?(record, attribute)
+        return true if attribute.to_s.end_with?("_ids")
+        return true if l_ui_field_array_column?(record.class, attribute)
+
+        l_ui_field_value(record, attribute).is_a?(Array)
+      end
+
+      # Array columns are a PostgreSQL feature, so the flag is only carried by
+      # some adapters' columns.
+      def l_ui_field_array_column?(model_class, attribute)
+        return false unless model_class.respond_to?(:columns_hash)
+
+        column = model_class.columns_hash[attribute.to_s]
+        column.respond_to?(:array?) && column.array?
+      end
+
       def l_ui_field_type_for(model_class, attribute)
         return :string unless model_class.respond_to?(:columns_hash)
 

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.html.erb

@@ -2,7 +2,7 @@
   <%= render "layered/ui/managed_resource/field_input", form: form, record: record, config: config %>
 <% else %>
   <div class="l-ui-form__group">
-    <% unless config[:as] == :checkbox %>
+    <% unless config[:as] == :checkbox || config[:as] == :combobox %>
       <%= render "layered_ui/shared/label",
                  form: form, field: config[:attribute],
                  required: config[:required], name: config[:label] %>
@@ -10,7 +10,7 @@
 
     <%= render "layered/ui/managed_resource/field_input", form: form, record: record, config: config %>
 
-    <% if config[:hint] %>
+    <% if config[:hint] && config[:as] != :combobox %>
       <p class="l-ui-form__hint" id="<%= l_ui_field_hint_id(record, config[:attribute]) %>">
         <%= config[:hint] %>
       </p>

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) }
@@ -36,6 +35,22 @@
     <%= form.select(attribute, choices, select_options,
                     class: field_class.call("l-ui-select"), **base_opts, **extras) %>
   </div>
+<% elsif config[:as] == :combobox %>
+  <%
+    collection = config[:collection]
+    choices = collection.respond_to?(:call) ? collection.call : collection
+    combobox_opts = extras
+    selected = combobox_opts.key?(:selected) ? combobox_opts.delete(:selected) : l_ui_field_value(record, attribute)
+    container = (combobox_opts.delete(:container) || {}).dup
+    container[:class] = token_list(container[:class], extra_class) if extra_class
+    describedby = [l_ui_field_error_id(record, attribute),
+                   combobox_opts.delete(:describedby).presence].compact.join(" ")
+  %>
+  <%= l_ui_combobox(attribute, form: form, collection: choices, selected: selected,
+                    label: config[:label], hint: config[:hint],
+                    placeholder: config[:placeholder], required: config[:required],
+                    describedby: describedby,
+                    container: container, **combobox_opts) %>
 <% elsif config[:as] == :checkbox %>
   <div class="l-ui-checkbox-container">
     <%= form.check_box(attribute, class: field_class.call("l-ui-checkbox"), **base_opts, **extras) %>

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.25.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.25.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