baldur 0.1.7 → 0.2.3

data/app/helpers/baldur/ui_helper_forms.rb

@@ -1,10 +1,11 @@
 module Baldur
   module UiHelperForms
-    def ui_text_field_tag(name, value = nil, label: nil, supporting_text: nil, placeholder: nil, type: :text, required: false, disabled: false, wrapper_class: nil, input_class: nil, input_options: {}, multiline: false, prefix: nil, suffix: nil, &block)
+    def ui_text_field_tag(name, value = nil, label: nil, supporting_text: nil, placeholder: nil, type: :text,
+                          required: false, disabled: false, wrapper_class: nil, input_class: nil, input_options: {}, multiline: false, prefix: nil, suffix: nil, &block)
       options = (input_options || {}).deep_dup
       input_id = options[:id].presence || "ui-text-field-#{SecureRandom.hex(3)}"
-      field_classes = [ "field", "text-field", ("is-disabled" if disabled), wrapper_class ].compact.join(" ")
-      control_classes = [ "text-field__control", input_class, options[:class] ].compact.join(" ")
+      field_classes = ['field', 'text-field', ('is-disabled' if disabled), wrapper_class].compact.join(' ')
+      control_classes = ['text-field__control', input_class, options[:class]].compact.join(' ')
       support_id = "#{input_id}-support"
 
       options[:id] = input_id
@@ -16,35 +17,36 @@ module Baldur
       options[:name] = name
       options[:value] = value unless value.nil? || multiline
       aria = options[:aria].presence || {}
-      aria[:describedby] = [ aria[:describedby], support_id ].compact.join(" ").presence
+      aria[:describedby] = [aria[:describedby], support_id].compact.join(' ').presence
       options[:aria] = aria if aria.present?
 
-      baldur_render "baldur/components/text_field",
-             wrapper_classes: field_classes,
-             label: label,
-             supporting_text: supporting_text,
-             input_options: options,
-             input_value: multiline ? value.to_s : nil,
-             multiline: multiline,
-             prefix: prefix,
-             suffix: suffix,
-             support_id: support_id,
-             supporting_slot: block_given? ? capture(&block) : nil
+      baldur_render 'baldur/components/text_field',
+                    wrapper_classes: field_classes,
+                    label: label,
+                    supporting_text: supporting_text,
+                    input_options: options,
+                    input_value: multiline ? value.to_s : nil,
+                    multiline: multiline,
+                    prefix: prefix,
+                    suffix: suffix,
+                    support_id: support_id,
+                    supporting_slot: block_given? ? capture(&block) : nil
     end
 
-    def ui_date_field_tag(name, value = nil, label: nil, supporting_text: nil, placeholder: "YYYY-MM-DD", required: false, disabled: false, wrapper_class: nil, input_class: nil, input_options: {}, native_input_options: {}, toggle_label: "Open date picker", icon_name: "calendar", min_date: nil, max_date: nil)
+    def ui_date_field_tag(name, value = nil, label: nil, supporting_text: nil, placeholder: 'YYYY-MM-DD',
+                          required: false, disabled: false, wrapper_class: nil, input_class: nil, input_options: {}, native_input_options: {}, toggle_label: 'Open date picker', icon_name: 'calendar', min_date: nil, max_date: nil)
       display_options = (input_options || {}).deep_dup
       native_options = (native_input_options || {}).deep_dup
       input_id = display_options[:id].presence || "ui-date-field-#{SecureRandom.hex(3)}"
       support_id = "#{input_id}-support"
-      wrapper_classes = [ "field", "date-field", wrapper_class ].compact.join(" ")
+      wrapper_classes = ['field', 'date-field', wrapper_class].compact.join(' ')
 
       parsed_date = case value
-      when Date
+                    when Date
                       value
-      when Time, DateTime, ActiveSupport::TimeWithZone
+                    when Time, DateTime, ActiveSupport::TimeWithZone
                       value.to_date
-      when String
+                    when String
                       begin
                         Date.iso8601(value)
                       rescue ArgumentError
@@ -54,105 +56,107 @@ module Baldur
                           nil
                         end
                       end
-      else
+                    else
                       value.respond_to?(:to_date) ? value.to_date : nil
-      end
-      iso_value = parsed_date&.strftime("%Y-%m-%d")
+                    end
+      iso_value = parsed_date&.strftime('%Y-%m-%d')
       native_id = native_options[:id].presence || "#{input_id}-native"
 
       display_value = if display_options.key?(:value)
                         display_options[:value]
-      else
+                      else
                         iso_value.presence || value.to_s.presence
-      end
+                      end
 
       display_options[:id] = input_id
-      display_options[:class] = [ "text-field__control", "date-field__display", input_class, display_options[:class] ].compact.join(" ")
-      display_options[:type] ||= "text"
+      display_options[:class] =
+        ['text-field__control', 'date-field__display', input_class, display_options[:class]].compact.join(' ')
+      display_options[:type] ||= 'text'
       display_options[:name] ||= name
       display_options[:placeholder] ||= placeholder if placeholder.present?
       display_options[:required] = true if required
       display_options[:disabled] = true if disabled
-      display_options[:autocomplete] ||= "off"
+      display_options[:autocomplete] ||= 'off'
       display_options[:value] = display_value if display_value.present? && !display_options.key?(:value)
 
       display_data = (display_options[:data] || {}).dup
       display_data[:date_field_display] = true
-      display_data[:date_field_target] ||= "display"
+      display_data[:date_field_target] ||= 'display'
       display_data[:date_field_native_target] ||= native_id
       display_data[:field_label] ||= label if label.present?
       display_options[:data] = display_data
 
       aria = display_options[:aria].presence || {}
-      describedby = [ aria[:describedby], support_id ].compact.join(" ").presence
+      describedby = [aria[:describedby], support_id].compact.join(' ').presence
       aria[:describedby] = describedby if describedby.present?
       display_options[:aria] = aria if aria.present?
 
       native_options[:id] = native_id
-      native_options[:class] = [ "date-field__native", native_options[:class] ].compact.join(" ")
-      native_options[:type] ||= "date"
+      native_options[:class] = ['date-field__native', native_options[:class]].compact.join(' ')
+      native_options[:type] ||= 'date'
       native_options.delete(:name) if native_options[:name].blank?
       native_options[:value] = iso_value if iso_value.present? && !native_options.key?(:value)
       native_options[:required] = true if required
       native_options[:disabled] = true if disabled
-      native_options[:tabindex] ||= "-1"
-      native_options[:autocomplete] ||= "off"
-      native_options[:class] = [ native_options[:class], "date-field__native--hidden" ].compact.join(" ")
+      native_options[:tabindex] ||= '-1'
+      native_options[:autocomplete] ||= 'off'
+      native_options[:class] = [native_options[:class], 'date-field__native--hidden'].compact.join(' ')
 
       if min_date.present?
         min_date_value = case min_date
-        when Date, Time, DateTime, ActiveSupport::TimeWithZone
-                           min_date.strftime("%Y-%m-%d")
-        when String
+                         when Date, Time, DateTime, ActiveSupport::TimeWithZone
+                           min_date.strftime('%Y-%m-%d')
+                         when String
                            min_date
-        end
+                         end
         native_options[:min] = min_date_value if min_date_value.present?
       end
 
       if max_date.present?
         max_date_value = case max_date
-        when Date, Time, DateTime, ActiveSupport::TimeWithZone
-                           max_date.strftime("%Y-%m-%d")
-        when String
+                         when Date, Time, DateTime, ActiveSupport::TimeWithZone
+                           max_date.strftime('%Y-%m-%d')
+                         when String
                            max_date
-        end
+                         end
         native_options[:max] = max_date_value if max_date_value.present?
       end
 
       native_data = (native_options[:data] || {}).dup
       native_data[:date_field_native] = true
-      native_data[:date_field_target] ||= "native"
+      native_data[:date_field_target] ||= 'native'
       native_data[:date_field_name] ||= name
       native_data[:date_field_display_target] ||= input_id
       native_options[:data] = native_data
 
       native_aria = native_options[:aria].presence || {}
-      native_aria[:hidden] = "true"
+      native_aria[:hidden] = 'true'
       native_aria[:label] ||= label if label.present?
       native_options[:aria] = native_aria if native_aria.present?
 
-      baldur_render "baldur/components/date_field",
-             wrapper_classes: wrapper_classes,
-             label: label,
-             supporting_text: supporting_text,
-             display_input_options: display_options,
-             native_input_options: native_options,
-             toggle_label: toggle_label,
-             icon_name: icon_name,
-             support_id: support_id
+      baldur_render 'baldur/components/date_field',
+                    wrapper_classes: wrapper_classes,
+                    label: label,
+                    supporting_text: supporting_text,
+                    display_input_options: display_options,
+                    native_input_options: native_options,
+                    toggle_label: toggle_label,
+                    icon_name: icon_name,
+                    support_id: support_id
     end
 
-    def ui_mobile_field_tag(name, value = nil, label: "Mobile", placeholder: "10-digit mobile number", country_code: "+91", required: false, disabled: false, wrapper_class: nil, input_class: nil, input_options: {})
-      normalized_value = value.to_s.gsub(/\D+/, "").slice(0, 10)
+    def ui_mobile_field_tag(name, value = nil, label: 'Mobile', placeholder: '10-digit mobile number',
+                            country_code: '+91', required: false, disabled: false, wrapper_class: nil, input_class: nil, input_options: {})
+      normalized_value = value.to_s.gsub(/\D+/, '').slice(0, 10)
       merged_input_options = (input_options || {}).deep_dup
       merged_input_options[:data] = (merged_input_options[:data] || {}).merge(
         mobile_input: true,
         mobile_country_code: country_code
       )
-      merged_input_options[:inputmode] ||= "numeric"
-      merged_input_options[:pattern] ||= "\\d*"
-      merged_input_options[:autocomplete] ||= "tel"
-      merged_wrapper_class = [ wrapper_class, "field--mobile" ].compact.join(" ")
+      merged_input_options[:inputmode] ||= 'numeric'
+      merged_input_options[:pattern] ||= '\\d*'
+      merged_input_options[:autocomplete] ||= 'tel'
+      merged_wrapper_class = [wrapper_class, 'field--mobile'].compact.join(' ')
 
       ui_text_field_tag(
         name,
@@ -169,7 +173,8 @@ module Baldur
       )
     end
 
-    def ui_menu_select_tag(name, options:, selected: nil, placeholder: "Select an option", label: nil, supporting_text: nil, wrapper_class: nil, data: nil, input_data: nil, disabled: false)
+    def ui_menu_select_tag(name, options:, selected: nil, placeholder: 'Select an option', label: nil,
+                           supporting_text: nil, wrapper_class: nil, data: nil, input_data: nil, disabled: false)
       normalized = options.map do |option|
         case option
         when Hash
@@ -204,21 +209,21 @@ module Baldur
       button_label = selected_option&.dig(:label) || placeholder
 
       field_id = "ui-menu-select-#{SecureRandom.hex(4)}"
-      auto_width_class = menu_select_explicit_width?(wrapper_class) ? nil : "field--select-auto"
-      wrapper_classes = [ "field", "field--select", auto_width_class, wrapper_class ].compact.join(" ")
-
-      baldur_render "baldur/components/menu_select",
-             name: name,
-             field_id: field_id,
-             wrapper_classes: wrapper_classes,
-             wrapper_data: data,
-             label: label,
-             supporting_text: supporting_text,
-             selected_value: selected_value,
-             button_label: button_label,
-             options: normalized,
-             input_data: input_data,
-             disabled: disabled
+      auto_width_class = menu_select_explicit_width?(wrapper_class) ? nil : 'field--select-auto'
+      wrapper_classes = ['field', 'field--select', auto_width_class, wrapper_class].compact.join(' ')
+
+      baldur_render 'baldur/components/menu_select',
+                    name: name,
+                    field_id: field_id,
+                    wrapper_classes: wrapper_classes,
+                    wrapper_data: data,
+                    label: label,
+                    supporting_text: supporting_text,
+                    selected_value: selected_value,
+                    button_label: button_label,
+                    options: normalized,
+                    input_data: input_data,
+                    disabled: disabled
     end
 
     private

data/app/helpers/baldur/ui_helper_sidebar.rb

@@ -39,11 +39,12 @@ module Baldur
       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)
+    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",
+      baldur_render 'baldur/components/sidebar',
                     brand: ui_sidebar_resolve_brand(
                       brand_path: brand_path,
                       brand_name: brand_name,
@@ -69,7 +70,7 @@ module Baldur
         name: brand_name,
         wordmark: brand_wordmark,
         logo_src: brand_logo,
-        href: brand_path.presence || "#"
+        href: brand_path.presence || '#'
       }.compact
 
       ui_marketing_resolve_brand(overrides)
@@ -85,7 +86,7 @@ module Baldur
         {
           name: normalized[:name].to_s,
           path: normalized[:path],
-          icon: normalized[:icon].presence || "circle",
+          icon: normalized[:icon].presence || 'circle',
           active: !!normalized[:active],
           title: normalized[:title].presence || normalized[:name].to_s,
           method: normalized[:method],
@@ -98,7 +99,7 @@ module Baldur
     def ui_sidebar_collapsed?
       return false unless respond_to?(:cookies)
 
-      cookies["baldur-sidebar-collapsed"] == "true"
+      cookies['baldur-sidebar-collapsed'] == 'true'
     end
   end
 end

data/app/helpers/baldur/ui_helper_unavailable.rb

@@ -1,14 +1,16 @@
 module Baldur
   module UiHelperUnavailable
-    def ui_unavailable_metric(reason: nil, dependencies: nil, warning_keys: nil, text: "Not available", text_class: "text-xs text-muted")
-      content_tag(:span, class: "inline-flex items-center gap-1 whitespace-nowrap align-middle") do
+    def ui_unavailable_metric(reason: nil, dependencies: nil, warning_keys: nil, text: 'Not available',
+                              text_class: 'text-xs text-muted')
+      content_tag(:span, class: 'inline-flex items-center gap-1 whitespace-nowrap align-middle') do
         safe_join(
           [
             content_tag(:span, text, class: text_class),
             ui_tooltip(
-              text: "Why unavailable",
-              content: ui_unavailable_explanation_content(reason: reason, dependencies: dependencies, warning_keys: warning_keys),
-              icon: "info",
+              text: 'Why unavailable',
+              content: ui_unavailable_explanation_content(reason: reason, dependencies: dependencies,
+                                                          warning_keys: warning_keys),
+              icon: 'info',
               variant: :icon,
               inline: true
             )
@@ -43,7 +45,7 @@ module Baldur
         snapshot_metric = dep[:snapshot_metric]
         next if dataset_key.blank? && field_key.blank? && snapshot_metric.blank?
 
-        group_key = dataset_key.presence || "__no_dataset__"
+        group_key = dataset_key.presence || '__no_dataset__'
         unless grouped.key?(group_key)
           grouped[group_key] = {
             dataset_key: dataset_key.presence,
@@ -61,13 +63,13 @@ module Baldur
       order.filter_map do |group_key|
         group = grouped[group_key]
         details = []
-        details << group[:fields].join(", ") if group[:fields].present?
+        details << group[:fields].join(', ') if group[:fields].present?
         details << "snapshot metric: #{group[:metrics].join(', ')}" if group[:metrics].present?
         next if group[:dataset_key].blank? && details.blank?
 
         {
           dataset_label: (ui_dependency_dataset_name(group[:dataset_key]) if group[:dataset_key].present?),
-          details: details.join(" | ")
+          details: details.join(' | ')
         }
       end
     end
@@ -75,18 +77,18 @@ module Baldur
     def ui_unavailable_dependency_group_content(groups)
       lines = groups.map do |group|
         line = if group[:dataset_label].present? && group[:details].present?
-          "• #{group[:dataset_label]} › #{group[:details]}"
-        else
-          "• #{group[:dataset_label].presence || group[:details]}"
-        end
-        content_tag(:span, line, class: "block text-left")
+                 "• #{group[:dataset_label]} › #{group[:details]}"
+               else
+                 "• #{group[:dataset_label].presence || group[:details]}"
+               end
+        content_tag(:span, line, class: 'block text-left')
       end
-      safe_join([ content_tag(:span, "Upload/refresh:", class: "block text-left"), *lines ])
+      safe_join([content_tag(:span, 'Upload/refresh:', class: 'block text-left'), *lines])
     end
 
     def ui_unavailable_explanation_sections(reason:, groups:)
       parts = []
-      parts << content_tag(:span, reason, class: "block text-left") if reason.present?
+      parts << content_tag(:span, reason, class: 'block text-left') if reason.present?
       parts << ui_unavailable_dependency_group_content(groups) if groups.present?
       safe_join(parts)
     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

@@ -19,7 +19,7 @@
       ]
     )
   end
-  brand_markup = link_to(brand_markup, resolved_brand[:href], class: "inline-flex no-underline") if resolved_brand[:href].present?
+  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
@@ -29,12 +29,12 @@
     options[:aria] = (options[:aria] || {}).merge(current: (link[:active] ? "page" : nil))
 
     if mobile
-      mobile_class = link[:active] ? "bg-primary/10 text-primary" : "text-soft hover:bg-surface-lowest"
-      options[:class] = ["flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium", mobile_class, options[:class]].compact.join(" ")
+      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: "h-5 w-5 shrink-0"),
+            ui_icon(link[:icon], class_name: "sidebar-mobile__icon"),
             content_tag(:span, link[:name])
           ]
         )
@@ -53,13 +53,13 @@
   end
 %>
 
-<div class="<%= ["sidebar-shell min-h-screen bg-surface-low md:flex", shell_class].compact.join(" ") %>"
+<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 hidden shrink-0 border-r border-[color:var(--color-outline-variant)] bg-[color:var(--color-surface)] px-3 py-4 md:flex flex-col"
+  <aside class="sidebar sidebar-shell__desktop"
          aria-label="Primary navigation">
-    <div class="sidebar__header flex items-center justify-between gap-2">
+    <div class="sidebar__header">
       <%= brand_markup %>
       <button type="button"
               class="icon-button sidebar__toggle"
@@ -72,20 +72,20 @@
     </div>
 
     <% if header_content.present? %>
-      <div class="sidebar__menu mt-4">
+      <div class="sidebar__menu sidebar__slot sidebar__slot--header">
         <%= header_content %>
       </div>
     <% end %>
 
-    <nav class="mt-6 flex flex-1 flex-col gap-1" aria-label="Primary navigation links">
+    <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="my-6 border-t border-[color:var(--color-outline-variant)]"></div>
+        <div class="sidebar__section-divider"></div>
         <% if secondary_label.present? %>
-          <p class="sidebar__section-label mb-2 px-3 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-on-surface-variant)]"><%= secondary_label %></p>
+          <p class="sidebar__section-label"><%= secondary_label %></p>
         <% end %>
         <% secondary_links.each do |link| %>
           <%= render_nav_link.call(link) %>
@@ -93,9 +93,9 @@
       <% end %>
     </nav>
 
-    <% if footer_content.present? %>
-      <div class="sidebar__footer mt-auto border-t border-[color:var(--color-outline-variant)] pt-4">
-        <div class="sidebar__footer-inner flex flex-col items-start gap-3">
+  <% if footer_content.present? %>
+      <div class="sidebar__footer">
+        <div class="sidebar__footer-inner">
           <%= footer_content %>
         </div>
       </div>
@@ -104,37 +104,37 @@
     <button type="button" class="sidebar__toggle-hit-area" aria-label="Toggle navigation" data-action="click->sidebar#toggle"></button>
   </aside>
 
-  <div class="md:hidden" data-controller="mobile-sidebar">
-    <div class="sticky top-0 z-10 flex items-center justify-between border-b border-outline-variant bg-surface-highest px-4 py-3">
-      <div><%= brand_markup %></div>
+  <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="hidden fixed inset-0 z-40 flex" data-mobile-sidebar-target="panel">
-      <div class="fixed inset-0 bg-scrim" data-action="click->mobile-sidebar#close"></div>
-      <div class="relative flex w-full max-w-xs flex-1 flex-col bg-surface-highest">
-        <div class="absolute right-0 top-0 -mr-12 pt-2">
-          <button type="button" class="icon-button text-on-inverse" aria-label="Close navigation" data-action="mobile-sidebar#close">
-            <%= ui_icon("x", class_name: "h-6 w-6 text-on-inverse") %>
+    <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="flex-1 overflow-y-auto px-4 pb-4 pt-5">
+        <div class="sidebar-mobile__content">
           <% if mobile_header_content.present? %>
-            <div class="mb-5"><%= mobile_header_content %></div>
+            <div class="sidebar-mobile__slot sidebar-mobile__slot--header"><%= mobile_header_content %></div>
           <% end %>
 
-          <nav class="space-y-1" aria-label="Mobile primary navigation links">
+          <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="my-5 border-t border-outline-variant"></div>
+              <div class="sidebar-mobile__section-divider"></div>
               <% if secondary_label.present? %>
-                <p class="mb-2 px-3 text-xs font-semibold uppercase tracking-wide text-on-surface-variant"><%= secondary_label %></p>
+                <p class="sidebar-mobile__section-label"><%= secondary_label %></p>
               <% end %>
               <% secondary_links.each do |link| %>
                 <%= render_nav_link.call(link, mobile: true) %>
@@ -144,7 +144,7 @@
         </div>
 
         <% if mobile_footer_content.present? %>
-          <div class="border-t border-outline-variant px-4 py-4">
+          <div class="sidebar-mobile__slot sidebar-mobile__slot--footer">
             <%= mobile_footer_content %>
           </div>
         <% end %>
@@ -152,7 +152,7 @@
     </div>
   </div>
 
-  <div class="flex min-w-0 flex-1 flex-col">
+  <div class="sidebar-shell__main">
     <%= body_content %>
   </div>
 </div>