view_primitives 0.1.3 → 0.2.0

data/lib/generators/view_primitives/add/templates/resizable/resizable_component.rb.tt

@@ -10,21 +10,27 @@ module UI
     #     r.with_panel { right_content }
     #   end
 
-    WRAPPER_CLS = "flex overflow-hidden rounded-lg border border-border"
+    WRAPPER_CLS = "group flex w-full overflow-hidden rounded-md #{UI::Styles::BORDER} shadow-xs"
 
-    PANEL_CLS   = "overflow-auto"
+    PANEL_CLS = "h-full w-full min-h-0 min-w-0 overflow-auto"
 
-    HANDLE_CLS  = "group relative flex items-center justify-center " \
-                  "bg-border transition-colors hover:bg-ring/30 focus-visible:outline-none " \
-                  "focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
-                  "data-[direction=horizontal]:w-px data-[direction=horizontal]:cursor-col-resize " \
-                  "data-[direction=vertical]:h-px data-[direction=vertical]:cursor-row-resize"
+    HANDLE_GRIP_BASE = "z-10 flex shrink-0 items-center justify-center rounded-xs #{UI::Styles::BORDER} bg-border"
 
-    HANDLE_GRIP = "z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-border bg-border"
+    HANDLE_GRIP_HORIZONTAL = "h-4 w-3"
+    HANDLE_GRIP_VERTICAL   = "h-3 w-4"
+
+    HANDLE_HORIZONTAL = "relative flex w-px shrink-0 items-center justify-center bg-border " \
+                        "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 " \
+                        "cursor-col-resize focus-visible:ring-1 focus-visible:ring-ring " \
+                        "focus-visible:ring-offset-1 focus-visible:outline-hidden"
+
+    HANDLE_VERTICAL = "relative flex h-px w-full shrink-0 items-center justify-center bg-border " \
+                      "after:absolute after:inset-x-0 after:top-1/2 after:h-1 after:w-full after:-translate-y-1/2 " \
+                      "cursor-row-resize focus-visible:ring-1 focus-visible:ring-ring " \
+                      "focus-visible:ring-offset-1 focus-visible:outline-hidden"
 
     renders_many :panels, "UI::ResizableComponent::PanelComponent"
 
-    # direction: :horizontal (default) | :vertical
     def initialize(direction: :horizontal, **html_attrs)
       @direction   = direction.to_sym
       @extra_class = html_attrs.delete(:class)
@@ -37,6 +43,9 @@ module UI
 
       content_tag(:div,
         class: cn(WRAPPER_CLS, flex_dir, @extra_class),
+        "data-slot": "resizable-panel-group",
+        "data-direction": @direction,
+        "aria-orientation": @direction == :horizontal ? "horizontal" : "vertical",
         data: {
           controller: "resizable",
           resizable_direction_value: @direction
@@ -52,18 +61,20 @@ module UI
     private
 
     def handle
+      grip_cls = @direction == :vertical ? HANDLE_GRIP_VERTICAL : HANDLE_GRIP_HORIZONTAL
+      handle_cls = @direction == :vertical ? HANDLE_VERTICAL : HANDLE_HORIZONTAL
+
       content_tag(:div,
-        class: HANDLE_CLS,
-        "data-direction": @direction,
+        content_tag(:div, nil, class: cn(HANDLE_GRIP_BASE, grip_cls)),
+        class: handle_cls,
+        "data-slot": "resizable-handle",
         tabindex: "0",
         role: "separator",
         "aria-orientation": @direction == :horizontal ? "vertical" : "horizontal",
         data: {
           resizable_target: "handle",
           action: "mousedown->resizable#startDrag touchstart->resizable#startDrag"
-        }) do
-        content_tag(:div, nil, class: HANDLE_GRIP)
-      end
+        })
     end
 
     class PanelComponent < ApplicationComponent
@@ -75,9 +86,10 @@ module UI
       end
 
       def call
-        style = @default ? "flex: 0 0 #{@default}%" : "flex: 1"
+        style = @default ? "flex: 0 0 #{@default}%" : "flex: 1 1 0%"
         content_tag(:div, content,
           class: ResizableComponent::PANEL_CLS,
+          "data-slot": "resizable-panel",
           style: style,
           data: {
             resizable_target: "panel",

data/lib/generators/view_primitives/add/templates/scroll_area/scroll_area_component.rb.tt

@@ -2,8 +2,7 @@
 
 module UI
   class ScrollAreaComponent < ApplicationComponent
-    # Custom-styled scrollbar container using CSS pseudo-elements.
-    # Works without a plugin in Tailwind v4 via arbitrary property syntax.
+    ROOT = "relative"
 
     ORIENTATIONS = {
       vertical:   "overflow-y-auto",
@@ -11,17 +10,16 @@ module UI
       both:       "overflow-auto"
     }.freeze
 
-    # Thin, themed scrollbar applied to the viewport
+    VIEWPORT = "size-full rounded-[inherit] transition-[color,box-shadow] outline-none " \
+               "#{UI::Styles::FOCUS_RING} focus-visible:outline-1"
+
     SCROLLBAR_CLS = "[scrollbar-width:thin] " \
                     "[scrollbar-color:var(--color-border)_transparent] " \
-                    "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5 " \
+                    "[&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar]:h-2.5 " \
                     "[&::-webkit-scrollbar-track]:bg-transparent " \
                     "[&::-webkit-scrollbar-thumb]:rounded-full " \
                     "[&::-webkit-scrollbar-thumb]:bg-border"
 
-    # orientation: :vertical (default) | :horizontal | :both
-    # max_h:       Tailwind max-height class, e.g. "max-h-72" (vertical / both)
-    # max_w:       Tailwind max-width class, e.g. "max-w-sm" (horizontal / both)
     def initialize(orientation: :vertical, max_h: "max-h-72", max_w: nil, **html_attrs)
       @orientation = orientation.to_sym
       @max_h = max_h
@@ -32,10 +30,11 @@ module UI
 
     def call
       overflow = ORIENTATIONS.fetch(@orientation, ORIENTATIONS[:vertical])
-      content_tag(:div,
-        content,
-        class: cn(overflow, SCROLLBAR_CLS, @max_h, @max_w, @extra_class),
-        **@html_attrs)
+      content_tag(:div, class: cn(ROOT, @extra_class), **@html_attrs) do
+        content_tag(:div,
+          content,
+          class: cn(overflow, VIEWPORT, SCROLLBAR_CLS, @max_h, @max_w))
+      end
     end
   end
 end

data/lib/generators/view_primitives/add/templates/search_input/search_input_component.rb.tt

@@ -5,20 +5,11 @@ module UI
     WRAPPER = "relative w-full"
     ICON_WRAP = "pointer-events-none absolute inset-y-0 left-3 flex items-center text-muted-foreground"
     SEARCH_PATH = "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
-    INPUT_BASE = "h-9 w-full min-w-0 rounded-md border border-input bg-transparent py-1 pl-9 pr-3 text-base shadow-xs " \
-                 "transition-[color,box-shadow] outline-none " \
-                 "placeholder:text-muted-foreground " \
-                 "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
-                 "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " \
-                 "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 " \
-                 "md:text-sm dark:bg-input/30"
-
     # placeholder: default "Search…"
     # name / id / value: passed through as html_attrs
     def initialize(placeholder: "Search…", **html_attrs)
       @placeholder = placeholder
-      @extra_class = html_attrs.delete(:class)
-      @html_attrs  = html_attrs
+      extract_html_attrs(**html_attrs)
     end
 
     def call
@@ -27,7 +18,7 @@ module UI
         concat content_tag(:input, nil,
           type: "search",
           placeholder: @placeholder,
-          class: cn(INPUT_BASE, @extra_class),
+          class: cn(UI::Styles::INPUT, "pl-9 pr-3", @extra_class),
           **@html_attrs)
       end
     end

data/lib/generators/view_primitives/add/templates/select/select_component.rb.tt

@@ -2,27 +2,46 @@
 
 module UI
   class SelectComponent < ApplicationComponent
-    BASE = "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm " \
-           "focus:outline-none focus:ring-1 focus:ring-ring " \
-           "disabled:cursor-not-allowed disabled:opacity-50"
+    WRAPPER = "group/native-select relative w-fit has-[select:disabled]:opacity-50"
+
+    BASE = UI::Styles::SELECT
 
     # options: array of strings, or [value, label] pairs, or { value: label } hash
-    def initialize(options: [], selected: nil, include_blank: false, **html_attrs)
+    def initialize(options: [], selected: nil, include_blank: false, size: :default, **html_attrs)
       @options = options
       @selected = selected
       @include_blank = include_blank
+      @size = size.to_sym
       @extra_class = html_attrs.delete(:class)
       @html_attrs = html_attrs
     end
 
     def call
-      content_tag(:select, class: cn(BASE, @extra_class), **@html_attrs) do
-        safe_join(option_tags)
+      content_tag(:div, class: WRAPPER) do
+        concat content_tag(:select,
+          safe_join(option_tags),
+          class: cn(BASE, @extra_class),
+          "data-size": (@size == :sm ? "sm" : "default"),
+          **@html_attrs)
+        concat chevron_icon
       end
     end
 
     private
 
+    def chevron_icon
+      svg = content_tag(:svg,
+        content_tag(:path, nil, d: "m6 9 6 6 6-6", fill: "none", stroke: "currentColor",
+          "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2"),
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        class: "size-4",
+        "aria-hidden": "true")
+      content_tag(:span, svg,
+        class: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground opacity-50 select-none")
+    end
+
     def option_tags
       tags = []
       tags << content_tag(:option, "", value: "") if @include_blank

data/lib/generators/view_primitives/add/templates/separator/separator_component.rb.tt

@@ -2,9 +2,11 @@
 
 module UI
   class SeparatorComponent < ApplicationComponent
+    BASE = "shrink-0 bg-border"
+
     ORIENTATIONS = {
-      horizontal: "bg-border h-px w-full shrink-0",
-      vertical: "bg-border h-full w-px shrink-0"
+      horizontal: "h-px w-full",
+      vertical: "h-full w-px"
     }.freeze
 
     def initialize(orientation: :horizontal, decorative: true, **html_attrs)
@@ -18,7 +20,8 @@ module UI
       content_tag(:div, nil,
         role: (@decorative ? "none" : "separator"),
         "aria-orientation": @orientation.to_s,
-        class: cn(ORIENTATIONS[@orientation], @extra_class),
+        "data-orientation": @orientation.to_s,
+        class: cn(BASE, ORIENTATIONS[@orientation], @extra_class),
         **@html_attrs)
     end
   end

data/lib/generators/view_primitives/add/templates/sheet/sheet_component.rb.tt

@@ -5,15 +5,21 @@ module UI
     renders_one :trigger
     renders_one :footer
 
-    OVERLAY = "fixed inset-0 z-50 bg-black/50"
+    OVERLAY = UI::Styles::OVERLAY
 
     SIDES = {
-      right:  "fixed inset-y-0 right-0 h-full w-3/4 max-w-sm border-l",
-      left:   "fixed inset-y-0 left-0 h-full w-3/4 max-w-sm border-r",
-      top:    "fixed inset-x-0 top-0 h-auto max-h-[60vh] border-b",
-      bottom: "fixed inset-x-0 bottom-0 h-auto max-h-[60vh] border-t"
+      right:  "inset-y-0 right-0 h-full w-3/4 border-l border-border sm:max-w-sm",
+      left:   "inset-y-0 left-0 h-full w-3/4 border-r border-border sm:max-w-sm",
+      top:    "inset-x-0 top-0 h-auto border-b border-border",
+      bottom: "inset-x-0 bottom-0 h-auto border-t border-border"
     }.freeze
 
+    PANEL_BASE = "fixed z-[51] flex flex-col gap-4 bg-background p-6 shadow-lg transition ease-in-out overflow-y-auto"
+
+    CLOSE_BTN = "absolute top-4 right-4 z-10 rounded-xs opacity-70 ring-offset-background transition-opacity " \
+                "hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden " \
+                "disabled:pointer-events-none"
+
     def initialize(title: nil, description: nil, side: :right, **html_attrs)
       @title       = title
       @description = description
@@ -23,8 +29,8 @@ module UI
     end
 
     def call
-      content_tag(:div, data: { controller: "sheet" }, **@html_attrs) do
-        concat content_tag(:span, trigger, data: { action: "click->sheet#open" }, class: "contents") if trigger
+      content_tag(:div, data: { controller: "dialog" }, **@html_attrs) do
+        concat content_tag(:span, trigger, data: { action: "click->dialog#open" }, class: "contents") if trigger
         concat panel
       end
     end
@@ -32,23 +38,21 @@ module UI
     private
 
     def panel
-      content_tag(:div, data: { sheet_target: "panel" }, hidden: true) do
+      content_tag(:div, data: { dialog_target: "panel" }, hidden: true) do
         concat content_tag(:div, nil,
           class: OVERLAY,
-          data: { action: "click->sheet#close" },
+          data: { action: "click->dialog#close" },
           "aria-hidden": "true")
         concat content_tag(:div,
-          class: cn("z-50 bg-background p-6 shadow-xl overflow-y-auto",
-                    SIDES.fetch(@side, SIDES[:right]),
-                    @extra_class),
+          class: cn(PANEL_BASE, SIDES.fetch(@side, SIDES[:right]), @extra_class),
           role: "dialog",
           "aria-modal": "true",
           "aria-label": @title,
-          data: { action: "keydown.escape@window->sheet#close" }) {
+          data: { action: "keydown.escape@window->dialog#close" }) {
           concat close_button
           concat header_area
-          concat content_tag(:div, content, class: "flex-1 text-sm")
-          concat content_tag(:div, footer, class: "mt-6 flex justify-end gap-2") if footer
+          concat content_tag(:div, content, class: "flex-1") unless content.blank?
+          concat content_tag(:div, footer, class: "mt-auto flex flex-col gap-2") if footer
         }
       end
     end
@@ -56,9 +60,9 @@ module UI
     def header_area
       return "" if @title.nil? && @description.nil?
 
-      content_tag(:div, class: "mb-4 pr-6") do
-        concat content_tag(:h2, @title, class: "text-lg font-semibold leading-none tracking-tight") if @title
-        concat content_tag(:p, @description, class: "mt-2 text-sm text-muted-foreground") if @description
+      content_tag(:div, class: "flex flex-col gap-1.5 pr-6") do
+        concat content_tag(:h2, @title, class: "font-semibold text-foreground") if @title
+        concat content_tag(:p, @description, class: "text-sm text-muted-foreground") if @description
       end
     end
 
@@ -66,13 +70,13 @@ module UI
       content_tag(:button,
         close_svg,
         type: "button",
-        class: "absolute right-4 top-4 rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity",
-        data: { action: "click->sheet#close" },
+        class: CLOSE_BTN,
+        data: { action: "click->dialog#close" },
         "aria-label": "Close")
     end
 
     def close_svg
-      raw('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>')
+      raw('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>')
     end
   end
 end

data/lib/generators/view_primitives/add/templates/sidebar/sidebar_component.rb.tt

@@ -13,31 +13,37 @@ module UI
     #   end
 
     RAIL_CLS = "group peer fixed inset-y-0 left-0 z-30 flex h-full flex-col " \
-               "border-r border-border bg-background transition-[width] duration-300 " \
+               "border-r border-sidebar-border bg-sidebar text-sidebar-foreground " \
+               "transition-[width] duration-300 " \
                "data-[collapsed=true]:w-16 data-[collapsed=false]:w-64"
 
-    HEADER_CLS = "flex h-14 items-center justify-between border-b border-border px-4"
+    HEADER_CLS = "flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-4 " \
+                 "group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:px-2"
 
-    TOGGLE_CLS = "inline-flex size-8 items-center justify-center rounded-md " \
-                 "text-muted-foreground hover:bg-accent hover:text-accent-foreground " \
-                 "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none transition"
+    TOGGLE_CLS = "inline-flex size-7 shrink-0 items-center justify-center rounded-md " \
+                 "text-sidebar-foreground ring-sidebar-ring outline-hidden " \
+                 "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground " \
+                 "focus-visible:ring-2 transition"
 
-    NAV_CLS = "flex-1 overflow-y-auto px-2 py-3"
+    NAV_CLS = "flex flex-1 flex-col gap-1 overflow-y-auto px-2 py-3"
 
-    GROUP_LABEL = "mb-1 px-3 text-xs font-medium uppercase tracking-wide text-muted-foreground " \
-                  "transition-opacity group-data-[collapsed=true]:opacity-0 group-data-[collapsed=true]:h-0 " \
-                  "group-data-[collapsed=true]:overflow-hidden group-data-[collapsed=true]:mb-0"
+    GROUP_WRAP = "mb-4 last:mb-0 group-data-[collapsed=true]:mb-0"
 
-    ITEM_CLS = "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors " \
-               "overflow-hidden " \
-               "group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:gap-0 " \
-               "hover:bg-accent hover:text-accent-foreground " \
-               "aria-[current]:bg-accent aria-[current]:text-foreground aria-[current]:font-semibold " \
-               "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none"
+    GROUP_LABEL = "mb-1 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium " \
+                  "text-sidebar-foreground/70 group-data-[collapsed=true]:hidden"
 
-    ITEM_LABEL = "transition-[opacity,width] group-data-[collapsed=true]:w-0 " \
-                 "group-data-[collapsed=true]:opacity-0 group-data-[collapsed=true]:overflow-hidden " \
-                 "whitespace-nowrap"
+    ITEM_CLS = "flex w-full items-center gap-2 overflow-hidden rounded-md p-2 " \
+               "text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] " \
+               "group-data-[collapsed=true]:size-8 group-data-[collapsed=true]:justify-center " \
+               "group-data-[collapsed=true]:gap-0 group-data-[collapsed=true]:p-2 " \
+               "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground " \
+               "focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground " \
+               "aria-[current]:bg-sidebar-accent aria-[current]:font-medium " \
+               "aria-[current]:text-sidebar-accent-foreground [&>span:last-child]:truncate " \
+               "[&_svg]:size-4 [&_svg]:shrink-0"
+
+    ITEM_LABEL = "whitespace-nowrap transition-[opacity,width] " \
+                 "group-data-[collapsed=true]:hidden"
 
     renders_many :groups, "UI::SidebarComponent::GroupComponent"
     renders_many :items,  "UI::SidebarComponent::ItemComponent"
@@ -82,7 +88,7 @@ module UI
     def nav_body
       content_tag(:nav, class: NAV_CLS) do
         concat safe_join(groups) if groups.any?
-        concat content_tag(:div, safe_join(items), class: "space-y-0.5") if items.any?
+        concat content_tag(:div, safe_join(items), class: "flex flex-col gap-0.5") if items.any?
         concat content if content?
       end
     end
@@ -105,9 +111,9 @@ module UI
       end
 
       def call
-        content_tag(:div, class: "mb-4", **@html_attrs) do
+        content_tag(:div, class: SidebarComponent::GROUP_WRAP, **@html_attrs) do
           concat content_tag(:p, @label, class: SidebarComponent::GROUP_LABEL) if @label
-          concat content_tag(:div, safe_join(items), class: "space-y-0.5")
+          concat content_tag(:div, safe_join(items), class: "flex flex-col gap-0.5")
           concat content if content?
         end
       end

data/lib/generators/view_primitives/add/templates/skeleton/skeleton_component.rb.tt

@@ -2,7 +2,7 @@
 
 module UI
   class SkeletonComponent < ApplicationComponent
-    BASE = "bg-accent animate-pulse rounded-md"
+    BASE = "animate-pulse rounded-md bg-accent"
 
     def initialize(**html_attrs)
       @extra_class = html_attrs.delete(:class)

data/lib/generators/view_primitives/add/templates/speed_dial/speed_dial_component.rb.tt

@@ -10,18 +10,17 @@ module UI
     #     dial.with_action(label: "Upload",        icon: :upload, data: { action: "..." })
     #   end
 
-    FAB_CLS = "relative z-50 inline-flex size-14 items-center justify-center rounded-full " \
-              "bg-primary text-primary-foreground shadow-lg transition-transform " \
-              "hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-[3px] " \
-              "focus-visible:ring-ring/50 active:scale-95"
+    FAB_CLS = "relative z-50 inline-flex size-12 items-center justify-center rounded-full " \
+              "bg-primary text-primary-foreground shadow-xs transition-all outline-none " \
+              "#{UI::Styles::FOCUS_RING} active:scale-95"
 
-    PANEL_CLS = "absolute bottom-16 right-0 flex flex-col-reverse items-end gap-2"
+    PANEL_CLS = "absolute bottom-14 right-0 flex flex-col-reverse items-end gap-2"
 
-    ACTION_CLS = "flex items-center gap-2 rounded-full bg-background px-4 py-2 text-sm font-medium " \
-                 "shadow-md border border-border transition-all " \
+    ACTION_CLS = "flex items-center gap-2 rounded-full border border-input bg-background px-4 py-2 text-sm font-medium " \
+                 "whitespace-nowrap shadow-xs transition-all outline-none " \
                  "hover:bg-accent hover:text-accent-foreground " \
-                 "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none " \
-                 "whitespace-nowrap"
+                 "#{UI::Styles::FOCUS_RING} " \
+                 "dark:border-input dark:bg-input/30 dark:hover:bg-input/50"
 
     PLUS_PATH  = "M12 5v14M5 12h14"
 

data/lib/generators/view_primitives/add/templates/spinner/spinner_component.rb.tt

@@ -2,12 +2,12 @@
 
 module UI
   class SpinnerComponent < ApplicationComponent
-    BASE = "inline-block animate-spin rounded-full border-2 border-current border-t-transparent"
+    LOADER_PATH = "M21 12a9 9 0 1 1-6.219-8.56"
 
     SIZES = {
       sm: "size-4",
-      default: "size-6",
-      lg: "size-10"
+      default: "size-4",
+      lg: "size-6"
     }.freeze
 
     def initialize(size: :default, **html_attrs)
@@ -17,10 +17,19 @@ module UI
     end
 
     def call
-      content_tag(:span,
-        content_tag(:span, "Loading...", class: "sr-only"),
-        class: cn(BASE, SIZES.fetch(@size, SIZES[:default]), @extra_class),
+      content_tag(:svg,
+        content_tag(:path, nil,
+          d: LOADER_PATH,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"),
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        class: cn("animate-spin text-muted-foreground", SIZES.fetch(@size, SIZES[:default]), @extra_class),
         role: "status",
+        "aria-label": "Loading",
         **@html_attrs)
     end
   end

data/lib/generators/view_primitives/add/templates/stepper/stepper_component.rb.tt

@@ -18,6 +18,7 @@ module UI
       content_tag(:ol,
         class: cn(wrapper_class, @extra_class),
         "aria-label": "Progress",
+        data: { slot: "stepper" },
         **@html_attrs) do
         safe_join(@steps.each_with_index.map { |step, i| step_item(step, i) })
       end
@@ -30,47 +31,47 @@ module UI
       status  = step.fetch(:status, :pending).to_sym
 
       if @orientation == :vertical
-        vertical_item(step, status, is_last)
+        vertical_item(step, status, is_last, index)
       else
-        horizontal_item(step, status, is_last)
+        horizontal_item(step, status, is_last, index)
       end
     end
 
-    def horizontal_item(step, status, is_last)
+    def horizontal_item(step, status, is_last, index)
       content_tag(:li, class: "flex items-center #{is_last ? '' : 'flex-1'}") do
-        concat step_circle(status, step[:label])
-        concat content_tag(:p, step[:label], class: cn("ml-2 text-sm font-medium whitespace-nowrap", label_color(status))) unless step[:label].nil?
+        concat step_circle(status, index + 1)
+        concat content_tag(:p, step[:label], class: cn("ml-3 text-sm font-medium whitespace-nowrap", label_color(status))) unless step[:label].nil?
         concat connector(:horizontal, status) unless is_last
       end
     end
 
-    def vertical_item(step, status, is_last)
+    def vertical_item(step, status, is_last, index)
       content_tag(:li, class: "relative flex gap-4") do
         concat content_tag(:div, class: "flex flex-col items-center") {
-          concat step_circle(status, step[:label])
+          concat step_circle(status, index + 1)
           concat connector(:vertical, status) unless is_last
         }
-        concat content_tag(:div, class: "pb-6 pt-0.5 min-w-0") {
+        concat content_tag(:div, class: "min-w-0 pb-8 pt-0.5") {
           concat content_tag(:p, step[:label], class: cn("text-sm font-medium", label_color(status)))
           concat content_tag(:p, step[:description], class: "mt-0.5 text-xs text-muted-foreground") if step[:description]
         }
       end
     end
 
-    def step_circle(status, label)
-      base = "flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold border-2"
+    def step_circle(status, number)
+      base = "flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-xs font-medium transition-colors"
       case status
       when :complete
         content_tag(:span, check_svg,
           class: cn(base, "border-primary bg-primary text-primary-foreground"),
           "aria-label": "Completed")
       when :current
-        content_tag(:span, "●",
-          class: cn(base, "border-primary text-primary"),
+        content_tag(:span, number.to_s,
+          class: cn(base, "border-primary bg-background text-primary ring-[3px] ring-ring/50"),
           "aria-current": "step")
       else
-        content_tag(:span, "○",
-          class: cn(base, "border-muted-foreground text-muted-foreground"),
+        content_tag(:span, number.to_s,
+          class: cn(base, "border-border bg-muted text-muted-foreground"),
           "aria-label": "Pending")
       end
     end
@@ -78,9 +79,9 @@ module UI
     def connector(direction, status)
       filled = status == :complete
       if direction == :horizontal
-        content_tag(:div, nil, class: cn("h-0.5 flex-1 mx-2", filled ? "bg-primary" : "bg-border"))
+        content_tag(:div, nil, class: cn("mx-3 h-0.5 min-w-8 flex-1", filled ? "bg-primary" : "bg-border"))
       else
-        content_tag(:div, nil, class: cn("w-0.5 flex-1 my-1", filled ? "bg-primary" : "bg-border"))
+        content_tag(:div, nil, class: cn("my-1 w-0.5 flex-1", filled ? "bg-primary" : "bg-border"))
       end
     end