baldur 0.1.6 → 0.2.0

data/app/assets/stylesheets/baldur/application/components/sidebar.css

@@ -1,4 +1,48 @@
 @layer components {
+  .sidebar-shell {
+    min-height: 100vh;
+    background: var(--color-surface-low);
+  }
+
+  .sidebar-shell__main {
+    min-width: 0;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sidebar-shell__desktop {
+    display: none;
+    flex-shrink: 0;
+    border-right: 1px solid var(--color-outline-variant);
+    background: var(--color-surface);
+    padding: var(--space-3);
+    flex-direction: column;
+  }
+
+  .sidebar__brand-link {
+    display: inline-flex;
+    text-decoration: none;
+  }
+
+  .sidebar__brand-link .brand-lockup {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--color-on-surface);
+  }
+
+  .sidebar__brand-link .brand-lockup__logo {
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: var(--radius-xl);
+    object-fit: cover;
+  }
+
+  .sidebar__brand-link .brand-lockup__wordmark {
+    color: var(--color-on-surface);
+  }
+
   .sidebar {
     position: sticky;
     top: 0;
@@ -21,6 +65,196 @@
     font-weight: 500;
   }
 
+  .sidebar__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+
+  .sidebar__slot--header {
+    margin-top: var(--space-4);
+  }
+
+  .sidebar__nav {
+    margin-top: var(--space-6);
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .sidebar__section-divider {
+    margin-block: var(--space-6);
+    border-top: 1px solid var(--color-outline-variant);
+  }
+
+  .sidebar__section-label {
+    margin: 0 0 var(--space-2);
+    padding-inline: var(--space-3);
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .sidebar__footer {
+    margin-top: auto;
+    border-top: 1px solid var(--color-outline-variant);
+    padding-top: var(--space-4);
+  }
+
+  .sidebar__footer-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-3);
+  }
+
+  .sidebar-mobile {
+    display: block;
+  }
+
+  .sidebar-mobile__topbar {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    border-bottom: 1px solid var(--color-outline-variant);
+    background: var(--color-surface-highest);
+    padding: var(--space-3) var(--space-4);
+  }
+
+  .sidebar-mobile__brand .brand-lockup__logo {
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--radius-lg);
+    object-fit: cover;
+  }
+
+  .sidebar-mobile__brand .brand-lockup__wordmark {
+    color: var(--color-on-surface);
+    font-size: 1.125rem;
+    font-weight: 700;
+  }
+
+  .sidebar-mobile__panel {
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+    display: flex;
+  }
+
+  .sidebar-mobile__scrim {
+    position: fixed;
+    inset: 0;
+  }
+
+  .sidebar-mobile__surface {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    width: 100%;
+    max-width: 20rem;
+    flex-direction: column;
+    background: var(--color-surface-highest);
+  }
+
+  .sidebar-mobile__close-shell {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin-right: -3rem;
+    padding-top: var(--space-2);
+  }
+
+  .sidebar-mobile__close {
+    color: var(--color-inverse-on-surface);
+  }
+
+  .sidebar-mobile__close-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .sidebar-mobile__content {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: var(--space-5) var(--space-4) var(--space-4);
+  }
+
+  .sidebar-mobile__slot--header {
+    margin-bottom: var(--space-5);
+  }
+
+  .sidebar-mobile__slot--footer {
+    border-top: 1px solid var(--color-outline-variant);
+    padding: var(--space-4);
+  }
+
+  .sidebar-mobile__nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .sidebar-mobile__link {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    border-radius: var(--radius-lg);
+    padding: 0.625rem 0.75rem;
+    color: var(--color-text-soft);
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-decoration: none;
+  }
+
+  .sidebar-mobile__link:hover,
+  .sidebar-mobile__link--active {
+    color: var(--color-primary);
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  }
+
+  .sidebar-mobile__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+  }
+
+  .sidebar-mobile__section-divider {
+    margin-block: var(--space-5);
+    border-top: 1px solid var(--color-outline-variant);
+  }
+
+  .sidebar-mobile__section-label {
+    margin: 0 0 var(--space-2);
+    padding-inline: var(--space-3);
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  @media (min-width: 48rem) {
+    .sidebar-shell {
+      display: flex;
+    }
+
+    .sidebar-shell__desktop {
+      display: flex;
+    }
+
+    .sidebar-mobile {
+      display: none;
+    }
+  }
+
   .sidebar__toggle {
     cursor: pointer;
     pointer-events: auto;

data/app/assets/stylesheets/baldur.css

@@ -6,6 +6,7 @@
 @import "./baldur/application/components/utilities.css";
 @import "./baldur/application/marketing/layout.css";
 @import "./baldur/application/components/app_bar.css";
+@import "./baldur/application/components/auth-page.css";
 @import "./baldur/application/components/alert.css";
 @import "./baldur/application/components/button.css";
 @import "./baldur/application/components/card.css";
@@ -24,4 +25,5 @@
 @import "./baldur/application/components/stepper.css";
 @import "./baldur/application/components/switch.css";
 @import "./baldur/application/components/table.css";
+@import "./baldur/application/components/confirmation.css";
 @import "./baldur/application/components/timeline.css";

data/app/helpers/baldur/ui_helper.rb

@@ -4,6 +4,7 @@ module Baldur
   module UiHelper
     include Baldur::RenderHelper
     include Baldur::UiHelperFeedback
+    include Baldur::UiHelperSidebar
     include Baldur::UiHelperUnavailable
     include Baldur::UiHelperForms
 
@@ -164,6 +165,31 @@ module Baldur
              }.merge(options)
     end
 
+    def ui_modal_host(id:, classes: nil, &block)
+      body = block_given? ? capture(&block) : nil
+      baldur_render "baldur/components/modal_host",
+             id: id,
+             classes: classes,
+             body: body
+    end
+
+    def ui_confirmation_modal(host_id:, dialog_id:, title:, description: nil, tone: :default, confirm_label: "Confirm", cancel_label: "Cancel", confirm_button_options: {}, cancel_button_options: {}, type_to_confirm: nil, body: nil, &block)
+      body = block_given? ? capture(&block) : body
+      type_to_confirm = nil unless type_to_confirm.is_a?(Hash)
+      baldur_render "baldur/components/confirmation_modal",
+             host_id: host_id,
+             dialog_id: dialog_id,
+             title: title,
+             description: description,
+             tone: tone,
+             confirm_label: confirm_label,
+             cancel_label: cancel_label,
+             confirm_button_options: confirm_button_options,
+             cancel_button_options: cancel_button_options,
+             type_to_confirm: type_to_confirm,
+             body: body
+    end
+
     def ui_badge(text:, variant: :default, size: :sm, html_options: {})
       baldur_render "baldur/components/badge", text: text, variant: variant, size: size, html_options: html_options
     end

data/app/helpers/baldur/ui_helper_sidebar.rb

@@ -0,0 +1,104 @@
+module Baldur
+  module UiHelperSidebar
+    include Baldur::RenderHelper
+    include Baldur::MarketingHelper
+
+    class SidebarBuilder
+      attr_reader :header_content, :footer_content, :mobile_header_content, :mobile_footer_content
+
+      def initialize(view_context)
+        @view_context = view_context
+      end
+
+      def with_header(&block)
+        @header_content = capture_slot(&block)
+        nil
+      end
+
+      def with_footer(&block)
+        @footer_content = capture_slot(&block)
+        nil
+      end
+
+      def with_mobile_header(&block)
+        @mobile_header_content = capture_slot(&block)
+        nil
+      end
+
+      def with_mobile_footer(&block)
+        @mobile_footer_content = capture_slot(&block)
+        nil
+      end
+
+      private
+
+      def capture_slot(&block)
+        return unless block_given?
+
+        @view_context.capture(&block)
+      end
+    end
+
+    def ui_sidebar(primary_links:, secondary_links: [], secondary_label: nil, brand_path: nil, brand_name: nil, brand_wordmark: nil, brand_logo: nil, header_content: nil, footer_content: nil, mobile_header_content: nil, mobile_footer_content: nil, shell_class: nil, &block)
+      builder = SidebarBuilder.new(self)
+      body_content = capture(builder, &block) if block_given?
+
+      baldur_render "baldur/components/sidebar",
+                    brand: ui_sidebar_resolve_brand(
+                      brand_path: brand_path,
+                      brand_name: brand_name,
+                      brand_wordmark: brand_wordmark,
+                      brand_logo: brand_logo
+                    ),
+                    primary_links: ui_sidebar_normalize_links(primary_links),
+                    secondary_links: ui_sidebar_normalize_links(secondary_links),
+                    secondary_label: secondary_label,
+                    header_content: builder.header_content.presence || header_content,
+                    footer_content: builder.footer_content.presence || footer_content,
+                    mobile_header_content: builder.mobile_header_content.presence || mobile_header_content || builder.header_content.presence || header_content,
+                    mobile_footer_content: builder.mobile_footer_content.presence || mobile_footer_content || builder.footer_content.presence || footer_content,
+                    shell_class: shell_class,
+                    collapsed: ui_sidebar_collapsed?,
+                    body_content: body_content
+    end
+
+    private
+
+    def ui_sidebar_resolve_brand(brand_path:, brand_name:, brand_wordmark:, brand_logo:)
+      overrides = {
+        name: brand_name,
+        wordmark: brand_wordmark,
+        logo_src: brand_logo,
+        href: brand_path.presence || "#"
+      }.compact
+
+      ui_marketing_resolve_brand(overrides)
+    end
+
+    def ui_sidebar_normalize_links(links)
+      Array(links).filter_map do |link|
+        next if link.blank?
+
+        normalized = link.to_h.symbolize_keys
+        next if normalized[:name].blank? || normalized[:path].blank?
+
+        {
+          name: normalized[:name].to_s,
+          path: normalized[:path],
+          icon: normalized[:icon].presence || "circle",
+          active: !!normalized[:active],
+          title: normalized[:title].presence || normalized[:name].to_s,
+          method: normalized[:method],
+          data: normalized[:data].respond_to?(:to_h) ? normalized[:data].to_h : nil,
+          html_options: normalized[:html_options].respond_to?(:to_h) ? normalized[:html_options].to_h.symbolize_keys : {}
+        }
+      end
+    end
+
+    def ui_sidebar_collapsed?
+      return false unless respond_to?(:cookies)
+
+      cookies["baldur-sidebar-collapsed"] == "true"
+    end
+  end
+end

data/app/views/baldur/components/_confirmation_modal.html.erb

@@ -0,0 +1,99 @@
+<%
+  host_id = local_assigns.fetch(:host_id)
+  dialog_id = local_assigns.fetch(:dialog_id)
+  title = local_assigns.fetch(:title)
+  description = local_assigns[:description]
+  tone = (local_assigns[:tone] || :default).to_sym
+  confirm_label = local_assigns.fetch(:confirm_label, "Confirm")
+  cancel_label = local_assigns.fetch(:cancel_label, "Cancel")
+  confirm_button_options = local_assigns.fetch(:confirm_button_options, {})
+  cancel_button_options = local_assigns.fetch(:cancel_button_options, {})
+  type_to_confirm = local_assigns[:type_to_confirm]
+  body = local_assigns.fetch(:body, nil) unless defined?(body)
+
+  confirm_variant = tone == :danger ? :danger : :primary
+  confirm_btn_opts = { label: confirm_label, variant: confirm_variant, type: :submit }.merge(confirm_button_options.except(:data))
+  if confirm_button_options[:data].present?
+    confirm_btn_opts[:data] = confirm_button_options[:data]
+  end
+
+  cancel_btn_opts = { label: cancel_label, variant: :ghost }.merge(cancel_button_options.except(:data))
+  cancel_btn_opts[:data] = { modal_close: true }.merge(cancel_button_options[:data] || {})
+
+  has_type_to_confirm = type_to_confirm.is_a?(Hash)
+  expected_text = has_type_to_confirm ? type_to_confirm[:expected_text].to_s : nil
+  confirm_input_id = has_type_to_confirm ? "#{dialog_id}-confirm-input" : nil
+  confirm_input_label = has_type_to_confirm ? type_to_confirm[:label].to_s : nil
+  confirm_input_placeholder = has_type_to_confirm ? (type_to_confirm[:placeholder].to_s.presence || expected_text) : nil
+  confirm_input_hint = has_type_to_confirm ? type_to_confirm[:hint] : nil
+  case_sensitive = has_type_to_confirm ? (type_to_confirm[:case_sensitive] != false) : true
+
+  if has_type_to_confirm
+    confirm_btn_opts[:disabled] = true
+    confirm_btn_opts[:data] = (confirm_btn_opts[:data] || {}).merge(confirmation_target: "submit")
+  end
+%>
+<div id="<%= host_id %>"
+     class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black/40 p-4"
+     data-controller="modal<%= has_type_to_confirm ? " confirmation" : "" %>"
+     <%= has_type_to_confirm ? 'data-confirmation-case-sensitive-value="' + case_sensitive.to_s + '"' : '' %>
+     data-modal-selector-value="#<%= host_id %>"
+     data-modal="true"
+     aria-hidden="true">
+  <div id="<%= dialog_id %>" class="dialog motion-fade-scale">
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h3 class="text-xl font-semibold text-[color:var(--color-on-surface)]">
+          <% if tone == :danger %>
+            <span class="inline-flex items-center gap-2">
+              <%= ui_icon("triangle-alert", class_name: "h-5 w-5 text-[color:var(--color-error)]") %>
+              <%= title %>
+            </span>
+          <% else %>
+            <%= title %>
+          <% end %>
+        </h3>
+        <% if description.present? %>
+          <p class="text-sm text-[color:color-mix(in srgb,var(--color-on-surface) 75%,transparent)]"><%= description %></p>
+        <% end %>
+      </div>
+      <button type="button" class="icon-button" aria-label="Close modal" data-modal-close="true">
+        <%= ui_icon("x", class_name: "h-5 w-5") %>
+      </button>
+    </div>
+    <% if body.present? %>
+      <div class="mt-4 space-y-3 text-sm text-[color:var(--color-on-surface)]">
+        <%= body %>
+      </div>
+    <% end %>
+    <% if has_type_to_confirm %>
+      <div class="mt-4 space-y-2">
+        <% if confirm_input_label.present? %>
+          <label for="<%= confirm_input_id %>" class="field__label text-sm font-medium text-[color:var(--color-on-surface)]"><%= confirm_input_label %></label>
+        <% end %>
+        <div class="text-field__input">
+          <input id="<%= confirm_input_id %>"
+                 type="text"
+                 autocomplete="off"
+                 class="text-field__control"
+                 data-confirmation-target="input"
+                 data-action="input->confirmation#validate"
+                 <%= confirm_input_placeholder.present? ? "placeholder=\"#{confirm_input_placeholder}\"".html_safe : "" %>
+                 data-modal-autofocus="true" />
+        </div>
+        <% if confirm_input_hint.present? %>
+          <p class="text-sm text-muted"><%= confirm_input_hint %></p>
+        <% end %>
+        <% if expected_text.present? %>
+          <span hidden data-confirmation-target="expectedText"><%= expected_text %></span>
+        <% end %>
+      </div>
+    <% end %>
+    <div class="mt-6 flex flex-wrap items-center gap-3">
+      <div class="ml-auto flex flex-wrap gap-3 justify-end">
+        <%= render "baldur/components/button", **cancel_btn_opts %>
+        <%= render "baldur/components/button", **confirm_btn_opts %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/baldur/components/_modal_host.html.erb

@@ -0,0 +1,10 @@
+<% classes = local_assigns[:classes] %>
+<% body = local_assigns.fetch(:body, nil) unless defined?(body) %>
+<div id="<%= id %>"
+     class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black/40 p-4 <%= classes %>"
+     data-controller="modal"
+     data-modal-selector-value="#<%= id %>"
+     data-modal="true"
+     aria-hidden="true">
+  <%= body %>
+</div>

data/app/views/baldur/components/_sidebar.html.erb

@@ -0,0 +1,158 @@
+<%
+  resolved_brand = local_assigns.fetch(:brand).symbolize_keys
+  primary_links = Array(local_assigns[:primary_links]).compact
+  secondary_links = Array(local_assigns[:secondary_links]).compact
+  secondary_label = local_assigns[:secondary_label]
+  header_content = local_assigns[:header_content]
+  footer_content = local_assigns[:footer_content]
+  mobile_header_content = local_assigns[:mobile_header_content]
+  mobile_footer_content = local_assigns[:mobile_footer_content]
+  body_content = local_assigns[:body_content]
+  shell_class = local_assigns[:shell_class]
+  collapsed = !!local_assigns[:collapsed]
+
+  brand_markup = content_tag(:span, class: "brand-lockup inline-flex items-center gap-2 text-[color:var(--color-on-surface)]") do
+    safe_join(
+      [
+        image_tag(resolved_brand[:logo_src], alt: resolved_brand[:logo_alt], class: "brand-lockup__logo h-9 w-9 rounded-xl"),
+        content_tag(:span, resolved_brand[:wordmark], class: "brand-lockup__wordmark sidebar__brand-name text-lg font-semibold text-[color:var(--color-on-surface)]")
+      ]
+    )
+  end
+  brand_markup = link_to(brand_markup, resolved_brand[:href], class: "sidebar__brand-link") if resolved_brand[:href].present?
+
+  render_nav_link = lambda do |link, mobile: false|
+    options = link[:html_options].deep_dup
+    options[:title] = link[:title] if link[:title].present?
+    options[:data] = (options[:data] || {}).merge(link[:data] || {}) if link[:data].present?
+    options[:method] = link[:method] if link[:method].present?
+    options[:aria] = (options[:aria] || {}).merge(current: (link[:active] ? "page" : nil))
+
+    if mobile
+      mobile_class = link[:active] ? "sidebar-mobile__link sidebar-mobile__link--active" : "sidebar-mobile__link"
+      options[:class] = [mobile_class, options[:class]].compact.join(" ")
+      link_to(link[:path], **options) do
+        safe_join(
+          [
+            ui_icon(link[:icon], class_name: "sidebar-mobile__icon"),
+            content_tag(:span, link[:name])
+          ]
+        )
+      end
+    else
+      options[:class] = ["sidebar__link", options[:class]].compact.join(" ")
+      link_to(link[:path], **options) do
+        safe_join(
+          [
+            ui_icon(link[:icon], class_name: "sidebar__icon"),
+            content_tag(:span, link[:name], class: "sidebar__label")
+          ]
+        )
+      end
+    end
+  end
+%>
+
+<div class="<%= ["sidebar-shell", shell_class].compact.join(" ") %>"
+     data-controller="sidebar"
+     data-sidebar-storage-key-value="baldur-sidebar-collapsed"
+     data-sidebar-collapsed-value="<%= collapsed %>">
+  <aside class="sidebar sidebar-shell__desktop"
+         aria-label="Primary navigation">
+    <div class="sidebar__header">
+      <%= brand_markup %>
+      <button type="button"
+              class="icon-button sidebar__toggle"
+              aria-label="Toggle navigation"
+              aria-expanded="<%= (!collapsed).to_s %>"
+              data-sidebar-target="toggleButton"
+              data-action="sidebar#toggle">
+        <span aria-hidden="true" data-sidebar-target="toggleIcon"><%= ui_icon(collapsed ? "chevron-right" : "chevron-left", class_name: "h-5 w-5") %></span>
+      </button>
+    </div>
+
+    <% if header_content.present? %>
+      <div class="sidebar__menu sidebar__slot sidebar__slot--header">
+        <%= header_content %>
+      </div>
+    <% end %>
+
+    <nav class="sidebar__nav" aria-label="Primary navigation links">
+      <% primary_links.each do |link| %>
+        <%= render_nav_link.call(link) %>
+      <% end %>
+
+      <% if secondary_links.any? %>
+        <div class="sidebar__section-divider"></div>
+        <% if secondary_label.present? %>
+          <p class="sidebar__section-label"><%= secondary_label %></p>
+        <% end %>
+        <% secondary_links.each do |link| %>
+          <%= render_nav_link.call(link) %>
+        <% end %>
+      <% end %>
+    </nav>
+
+  <% if footer_content.present? %>
+      <div class="sidebar__footer">
+        <div class="sidebar__footer-inner">
+          <%= footer_content %>
+        </div>
+      </div>
+    <% end %>
+
+    <button type="button" class="sidebar__toggle-hit-area" aria-label="Toggle navigation" data-action="click->sidebar#toggle"></button>
+  </aside>
+
+  <div class="sidebar-mobile" data-controller="mobile-sidebar">
+    <div class="sidebar-mobile__topbar">
+      <div class="sidebar-mobile__brand"><%= brand_markup %></div>
+      <button type="button" class="icon-button" aria-label="Toggle navigation" data-action="mobile-sidebar#toggle">
+        <%= ui_icon("menu", class_name: "h-6 w-6") %>
+      </button>
+    </div>
+
+    <div id="mobile-sidebar" class="sidebar-mobile__panel hidden" data-mobile-sidebar-target="panel">
+      <div class="bg-scrim sidebar-mobile__scrim" data-action="click->mobile-sidebar#close"></div>
+      <div class="sidebar-mobile__surface">
+        <div class="sidebar-mobile__close-shell">
+          <button type="button" class="icon-button sidebar-mobile__close" aria-label="Close navigation" data-action="mobile-sidebar#close">
+            <%= ui_icon("x", class_name: "sidebar-mobile__close-icon") %>
+          </button>
+        </div>
+
+        <div class="sidebar-mobile__content">
+          <% if mobile_header_content.present? %>
+            <div class="sidebar-mobile__slot sidebar-mobile__slot--header"><%= mobile_header_content %></div>
+          <% end %>
+
+          <nav class="sidebar-mobile__nav" aria-label="Mobile primary navigation links">
+            <% primary_links.each do |link| %>
+              <%= render_nav_link.call(link, mobile: true) %>
+            <% end %>
+
+            <% if secondary_links.any? %>
+              <div class="sidebar-mobile__section-divider"></div>
+              <% if secondary_label.present? %>
+                <p class="sidebar-mobile__section-label"><%= secondary_label %></p>
+              <% end %>
+              <% secondary_links.each do |link| %>
+                <%= render_nav_link.call(link, mobile: true) %>
+              <% end %>
+            <% end %>
+          </nav>
+        </div>
+
+        <% if mobile_footer_content.present? %>
+          <div class="sidebar-mobile__slot sidebar-mobile__slot--footer">
+            <%= mobile_footer_content %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+
+  <div class="sidebar-shell__main">
+    <%= body_content %>
+  </div>
+</div>

data/app/views/baldur/optional/_auth_page.html.erb

@@ -1,12 +1,12 @@
 <%
   resolved_brand_path = local_assigns[:brand_path].presence || "#"
-  auth_shell_classes = ["auth-page", "flex min-h-screen items-center justify-center bg-surface-low px-6 py-12", local_assigns[:shell_class]].compact.join(" ")
+  auth_shell_classes = ["auth-page", local_assigns[:shell_class]].compact.join(" ")
   auth_card_class = local_assigns[:card_class]
 %>
 
 <div class="<%= auth_shell_classes %>">
-  <div class="mx-auto max-w-lg">
-    <div class="mb-6 flex justify-center">
+  <div class="auth-page__container">
+    <div class="auth-page__brand">
       <%= link_to resolved_brand_path, class: "inline-flex items-center justify-center no-underline" do %>
         <%= render "shared/brand_lockup",
                    logo_class: "h-10 w-10 rounded-xl",