view_primitives 0.1.3 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c95b5b096babd8416b53c83c883124d89f992814d19ef7d262c731abc9ac5ffa
-  data.tar.gz: 16744aa30b37e6bad9995dc8e792b5fdbe28300555577aab8361db78f4cc4e6f
+  metadata.gz: cc1d6eea996ab223f1175ccb81a475051e949ee3a7bf1f0c9d9102b5b744a8f8
+  data.tar.gz: b41ca1269df44e350e40e87d039b5ac2c97385bdf638e37a89da40ed8b463895
 SHA512:
-  metadata.gz: 5b588f79626af5d772a3616518198def45d7e918ff703fb937ce32ff17cc78edc135452b22243c2b14e878f6076149ea647cb93f65113deb88ca70dc96e99417
-  data.tar.gz: 18f9fca991217855a0c169ca9b8d8c44cbca7f31e5e642f851b366e71b43ddc5960afcc4145e197dd1e50e7885001dc351cfe4cc96134a08c22fcde6f8e5df8c
+  metadata.gz: 32adf0c91b8b894420a2441b53ea82c25bc0e8fc542e89b33aec7c64cdaa3ef292d0b3550e9fbc83924ec0873560b41686c1d6c6ac4198cacdeadb43b19e3c31
+  data.tar.gz: 6b669fe4ecb2c66b42f952da057e658a1a6d0f20c71550a10fca288b2af91259f6609d3e2925a901bef0bd3e10f4604496f1c2e0a31a8363e7ea1e0b8b4a3a30

data/CHANGELOG.md

@@ -7,6 +7,45 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0] - 2026-06-08
+
+### Added
+
+- **TagsInput** — multi-select input that renders selected values as removable chips; submits as `name[]`; supports pre-selected `values:`, keyboard navigation (Enter to select, Backspace to remove last chip, Escape to close), and filterable dropdown
+- `rails g view_primitives:update` — refresh installed components, CSS bundle, and `UI::Styles` from gem templates; supports `--only`, `--skip-components`, `--skip-css`, `--skip-styles`, `--force`
+- `rails g view_primitives:theme <name>` — install an optional color theme (e.g. `rose`) and enable its `@import` in `view_primitives.css`
+- `UI::Styles` module (`app/components/ui/styles.rb`) — shared primitive class names: `FOCUS_RING`, `BORDER`, `OVERLAY`, `INPUT`, `MENU_SEPARATOR`, `FIELD_PANEL`, `PICKER_TRIGGER`, etc.
+- CSS bundle split into `tokens.css`, `utilities.css` (`vp-*` primitives), and `themes/` — run `rails g view_primitives:update --skip-components` to pull in the new structure
+- `--force` flag on both `add` and `update` generators — skips the per-file overwrite confirmation prompt
+- Focus trap in `dialog`, `alert_dialog`, `sheet`, `drawer`, and `command` Stimulus controllers
+- Mobile nav panel in `NavbarComponent` with working hamburger toggle
+- Optional `tailwind_merge` support in `cn()` when the gem is present in the project
+- [docs/components/README.md](docs/components/README.md) — shared prerequisites guide
+
+### Changed
+
+- ~45 component templates migrated to `UI::Styles` constants and `vp-*` utilities for consistent theming
+- `add` generator prompts for confirmation before overwriting an existing file (previously overwrote silently); use `--force` to restore previous behaviour
+- `update` generator default changed to prompt before overwriting; use `--force` to overwrite unconditionally
+- Sheet and drawer share `dialog_controller.js` instead of maintaining separate Stimulus controllers
+- **DataTable**, **Accordion**, **DeviceMockup**, **Navbar**, **BottomNav**, **Footer**, **Drawer**, **Sheet**, **ListGroup**, and menu components visually realigned with the shadcn/ui reference
+
+### Fixed
+
+- `add` and `update` generators recorded a failed component copy as success when the template directory was missing
+- `add` generator printed a misleading "Copied" summary line for components with a missing template directory
+- Setup notes (e.g. Chart.js importmap instructions) were never printed when the component list also contained an unknown name, because `abort` fired before `report_setup_notes` ran
+- `ComponentCopier#with_source_root` used `source_paths.shift` in `ensure` — replaced with `source_paths.delete(path)` to always remove the correct entry
+- `Components.supported` included non-directory entries from `Dir.children`; now filters to directories only
+- `copy_js_controller` did not guard against an empty stimulus name (edge case: file named `_controller.js`)
+- **Avatar** `lg` size accidentally reduced from `size-12` to `size-10` in the data-attribute refactor; restored to 48 px
+- **Avatar** emitted `data-size="default"` on every default-size avatar; attribute is now omitted for `:default`
+- **AlertDialog** content div lost `text-sm text-muted-foreground`; restored
+- **Breadcrumb** inactive links lost `text-muted-foreground`; restored
+- Sheet and drawer Stimulus actions used `sheet#` / `drawer#` targets while the controller was `dialog`; corrected to `dialog#open` / `dialog#close`
+- `install --force` skipped `ApplicationComponent` regeneration; fixed
+- Bare `border` / `border-b` / `border-t` classes without a color token rendered as black lines on some themes; replaced with `border-border`
+
 ## [0.1.3] - 2026-06-04
 
 ### Fixed
@@ -102,4 +141,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `view_primitives:add` exits with status 1 on unknown components; prints copy summary
 - Requires `view_component >= 4.0` and Rails `>= 7.1`
 
+[0.2.0]: https://github.com/alec-c4/view_primitives/releases/tag/v0.2.0
 [0.1.0]: https://github.com/alec-c4/view_primitives/releases/tag/v0.1.0

data/README.md

@@ -28,11 +28,13 @@ Then run the install generator:
 
 ```bash
 rails g view_primitives:install
+rails g view_primitives:install --force   # refresh ApplicationComponent and CSS on upgrade
 ```
 
 This will:
-- Create `app/components/application_component.rb` with `ViewPrimitives::ClassHelper` included (skipped if you already have one — add `include ViewPrimitives::ClassHelper` manually)
-- Create `app/assets/stylesheets/view_primitives.css` with the design token definitions (`@theme inline` + oklch light/dark theme)
+- Create `app/components/application_component.rb` with `ViewPrimitives::ClassHelper`, `cn()`, and `extract_html_attrs` (skipped if you already have one — use `--force` to overwrite)
+- Create `app/components/ui/styles.rb` with shared Tailwind primitive class names (`UI::Styles::*`)
+- Create `app/assets/stylesheets/view_primitives.css` (entry file) plus `view_primitives/tokens.css`, `utilities.css`, and `themes/default.css`
 
 Then import it in your Tailwind CSS entry point:
 
@@ -52,6 +54,31 @@ Components live under `UI::` (files in `app/components/ui/`). The gem registers
 
 That's it — no `tailwind.config.js` required. Tailwind 4 reads the `@theme inline` block directly from the CSS.
 
+### CSS layout
+
+```
+app/assets/stylesheets/
+  view_primitives.css          # entry — @import tokens, utilities, themes
+  view_primitives/
+    tokens.css                 # @theme inline design tokens
+    utilities.css              # vp-* shared primitives
+    themes/
+      default.css              # :root and .dark color variables
+      rose.css                 # optional — via view_primitives:theme
+```
+
+### Generators
+
+| Generator | Purpose |
+|-----------|---------|
+| `view_primitives:install` | Base setup — ApplicationComponent, styles.rb, CSS bundle |
+| `view_primitives:add` | Copy one or more components into the app |
+| `view_primitives:update` | Refresh installed components, CSS, and styles.rb from the gem |
+| `view_primitives:theme` | Install an optional color theme |
+| `view_primitives:list` | List available and installed components |
+
+See [docs/components/README.md](docs/components/README.md) for setup details, Stimulus notes, and `class:` overrides.
+
 ## Adding components
 
 ```bash
@@ -62,6 +89,32 @@ rails g view_primitives:add button alert accordion   # multiple at once
 
 Each component is copied into `app/components/ui/` as plain Ruby and ERB files you own and can modify freely. Re-running `add` overwrites existing files (a warning is printed). Unknown component names fail with a non-zero exit code.
 
+Component docs live in [docs/components/](docs/components/). Start with [component setup](docs/components/README.md) if you have not run `install` yet.
+
+### Updating installed components
+
+After upgrading the gem, refresh every component you have already copied:
+
+```bash
+rails g view_primitives:update
+rails g view_primitives:update --only button input   # selected components
+rails g view_primitives:update --skip-css            # components only
+```
+
+The update generator overwrites installed component files, the CSS bundle, and `styles.rb` from the latest gem templates. Back up local edits first.
+
+### Optional color themes
+
+```bash
+rails g view_primitives:theme rose
+```
+
+This copies the theme CSS and enables its `@import` in `view_primitives.css`. Apply it with `data-theme="rose"` on your layout root (`.dark` still works for dark mode).
+
+### Optional `tailwind_merge`
+
+`cn()` deduplicates class strings. For Tailwind-aware conflict resolution, add the `tailwind_merge` gem to your Gemfile — ViewPrimitives picks it up automatically when present.
+
 ## View helpers
 
 ViewPrimitives adds the `ui` helper to views and mailers:
@@ -139,6 +192,7 @@ ViewPrimitives adds the `ui` helper to views and mailers:
 | Menubar | Horizontal application-style menu bar | [docs](docs/components/menubar.md) |
 | Command | Modal command palette with live search filtering | [docs](docs/components/command.md) |
 | Combobox | Autocomplete select with live search | [docs](docs/components/combobox.md) |
+| Tags Input | Multi-select input that renders selected values as removable chips | [docs](docs/components/tags_input.md) |
 | Calendar | Date picker calendar grid | [docs](docs/components/calendar.md) |
 | Date Picker | Input that opens a Calendar popover | [docs](docs/components/date_picker.md) |
 | Timepicker | Input for selecting a time value | [docs](docs/components/timepicker.md) |
@@ -174,6 +228,7 @@ See [ROADMAP.md](ROADMAP.md) for the full component list organised by phase.
 See **[docs/customization.md](docs/customization.md)** for the full guide covering:
 
 - Design tokens (OKLCH colors, radius) — change the whole palette in one file
+- Shared `UI::Styles` primitives and border conventions (`border-border`, `MENU_SEPARATOR`)
 - Editing component constants — add variants, change classes
 - Per-instance `class:` overrides — append utilities without touching the file
 - Full brand theming example

data/lib/generators/view_primitives/add/add_generator.rb

@@ -1,25 +1,29 @@
 # frozen_string_literal: true
 
 require_relative "../components"
+require_relative "../component_copier"
 require_relative "../detector"
 
 module ViewPrimitives
   module Generators
     class AddGenerator < Rails::Generators::Base
       include Detector
+      include ComponentCopier
 
       source_root File.expand_path("templates", __dir__)
 
       argument :components, type: :array
 
+      class_option :force, type: :boolean, default: false,
+        desc: "Overwrite existing files without prompting"
+
       def copy_components
         @copied = []
         @unknown = []
 
         components.each do |name|
           if Components.supported.include?(name)
-            copy_component(name)
-            @copied << name
+            @copied << name if copy_component(name)
           else
             @unknown << name
             say "  Unknown component: #{name}. Supported: #{Components.supported.join(", ")}", :red
@@ -34,7 +38,7 @@ module ViewPrimitives
 
         say "  Failed: #{@unknown.join(", ")} (unknown)", :red
         say "  Run `rails g view_primitives:list` to see all available components.", :cyan
-        abort
+        @abort_after_notes = true
       end
 
       def report_setup_notes
@@ -47,65 +51,7 @@ module ViewPrimitives
           note.each_line { |line| say "  #{line.chomp}", :cyan }
           say ""
         end
-      end
-
-      no_tasks do
-        def template(source, *args, **options, &block)
-          destination = args.first || options[:to]
-          warn_overwrite(destination) if destination
-          super
-        end
-
-        def copy_file(source, *args, **options)
-          destination = args.first || options[:to]
-          warn_overwrite(destination) if destination
-          super
-        end
-      end
-
-      private
-
-      def copy_component(name)
-        dir = File.join(self.class.source_root, name)
-        Dir.each_child(dir).sort.each { |file| copy_template_file(name, file) }
-        copy_extra_stimulus(name)
-      end
-
-      def copy_template_file(component, file)
-        source = "#{component}/#{file}"
-
-        case file
-        when /\.rb\.tt\z/
-          template source, "app/components/ui/#{file.delete_suffix(".tt")}"
-        when /\.html\.erb\z/
-          copy_file source, "app/components/ui/#{file}"
-        when /_controller\.js\z/
-          copy_js_controller source, file.delete_suffix("_controller.js")
-        end
-      end
-
-      def copy_extra_stimulus(name)
-        config = Components::EXTRA_STIMULUS[name]
-        copy_js_controller(config[:source], config[:name]) if config
-      end
-
-      def copy_js_controller(source, stimulus_name)
-        dir = js_controllers_dir
-        unless dir
-          say "  Could not detect a JS controllers directory.", :yellow
-          say "  Copy #{source} manually and register Stimulus `#{stimulus_name}`.", :cyan
-          return
-        end
-
-        dest = "#{dir}/#{stimulus_name}_controller.js"
-        copy_file source, dest
-        say "  Stimulus `#{stimulus_name}` → #{dest}", :green
-      end
-
-      def warn_overwrite(destination)
-        return unless File.exist?(File.join(destination_root, destination))
-
-        say "  #{destination} already exists — overwriting.", :yellow
+        abort if @abort_after_notes
       end
     end
   end

data/lib/generators/view_primitives/add/templates/accordion/accordion_item_component.rb.tt

@@ -2,11 +2,20 @@
 
 module UI
   class AccordionItemComponent < ApplicationComponent
-    SUMMARY_CLASSES = "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium " \
-                      "transition-all outline-none hover:underline cursor-pointer list-none " \
-                      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+    ITEM_CLASSES = "border-b border-border last:border-b-0 group"
+
+    SUMMARY_CLASSES = "flex flex-1 cursor-pointer list-none items-start justify-between gap-4 rounded-md py-4 " \
+                      "text-left text-sm font-medium transition-all outline-none hover:underline " \
+                      "[&::-webkit-details-marker]:hidden #{UI::Styles::FOCUS_RING} " \
                       "disabled:pointer-events-none disabled:opacity-50"
 
+    TITLE_CLASSES = "flex-1 text-left font-medium leading-none"
+
+    CONTENT_CLASSES = "overflow-hidden pb-4 pt-0 text-sm"
+
+    CHEVRON_CLASSES = "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground " \
+                      "transition-transform duration-200 group-open:rotate-180"
+
     def initialize(title:, open: false, **html_attrs)
       @title = title
       @open = open
@@ -21,7 +30,7 @@ module UI
     private
 
     def details_attrs
-      attrs = @html_attrs.merge(class: cn("border-b last:border-b-0 group", @extra_class))
+      attrs = @html_attrs.merge(class: cn(ITEM_CLASSES, @extra_class))
       attrs[:open] = true if @open
       attrs
     end
@@ -29,19 +38,29 @@ module UI
     def details_content
       safe_join([
         content_tag(:summary, summary_content, class: SUMMARY_CLASSES),
-        content_tag(:div, content, class: "pb-4 pt-0 text-sm")
+        content_tag(:div, content, class: CONTENT_CLASSES)
       ])
     end
 
     def summary_content
       safe_join([
-        @title,
-        content_tag(:svg, content_tag(:path, nil, d: "m6 9 6 6 6-6"),
-          xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24",
-          fill: "none", stroke: "currentColor", stroke_width: "2",
-          stroke_linecap: "round", stroke_linejoin: "round",
-          class: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200 group-open:rotate-180")
+        content_tag(:span, @title, class: TITLE_CLASSES),
+        chevron_icon
       ])
     end
+
+    def chevron_icon
+      content_tag(:svg,
+        content_tag(:path, nil, d: "m6 9 6 6 6-6"),
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: CHEVRON_CLASSES,
+        "aria-hidden": "true")
+    end
   end
 end

data/lib/generators/view_primitives/add/templates/alert/alert_component.rb.tt

@@ -2,7 +2,7 @@
 
 module UI
   class AlertComponent < ApplicationComponent
-    OUTER_CLASSES = "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border " \
+    OUTER_CLASSES = "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg #{UI::Styles::BORDER} " \
                     "px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] " \
                     "has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
 

data/lib/generators/view_primitives/add/templates/alert_dialog/alert_dialog_component.rb.tt

@@ -5,10 +5,10 @@ module UI
     renders_one :trigger
     renders_one :footer
 
-    OVERLAY = "fixed inset-0 z-50 bg-black/80"
-    PANEL   = "fixed left-[50%] top-[50%] z-50 w-full max-w-lg " \
-              "translate-x-[-50%] translate-y-[-50%] " \
-              "rounded-lg border bg-background p-6 shadow-lg"
+    OVERLAY = UI::Styles::OVERLAY
+    PANEL   = "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] " \
+              "translate-x-[-50%] translate-y-[-50%] gap-4 " \
+              "rounded-lg #{UI::Styles::BORDER} bg-background p-6 shadow-lg duration-200 sm:max-w-lg"
 
     def initialize(title: nil, description: nil, **html_attrs)
       @title       = title
@@ -37,8 +37,8 @@ module UI
           "aria-modal": "true",
           "aria-label": @title) {
           concat header_area
-          concat content_tag(:div, content, class: "py-1 text-sm text-muted-foreground") unless content.blank?
-          concat content_tag(:div, footer, class: "mt-6 flex justify-end gap-2") if footer
+          concat content_tag(:div, content, class: "text-sm text-muted-foreground") unless content.blank?
+          concat content_tag(:div, footer, class: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end") if footer
         }
       end
     end
@@ -46,9 +46,9 @@ module UI
     def header_area
       return "" if @title.nil? && @description.nil?
 
-      content_tag(:div, class: "mb-4") 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-2 text-center sm:text-left") do
+        concat content_tag(:h2, @title, class: "text-lg leading-none font-semibold") if @title
+        concat content_tag(:p, @description, class: "text-sm text-muted-foreground") if @description
       end
     end
   end

data/lib/generators/view_primitives/add/templates/aspect_ratio/aspect_ratio_component.rb.tt

@@ -11,7 +11,7 @@ module UI
     def call
       content_tag(:div, content,
         style: "aspect-ratio: #{@ratio}",
-        class: cn("overflow-hidden", @extra_class),
+        class: cn("overflow-hidden rounded-md", @extra_class),
         **@html_attrs)
     end
   end

data/lib/generators/view_primitives/add/templates/audio/audio_component.rb.tt

@@ -22,7 +22,7 @@ module UI
     end
 
     def call
-      attrs = { preload: @preload, class: @extra_class }
+      attrs = { preload: @preload, class: cn("w-full rounded-md", @extra_class) }
       attrs[:controls] = true if @controls
       attrs[:autoplay] = true if @autoplay
       attrs[:muted]    = true if @muted

data/lib/generators/view_primitives/add/templates/avatar/avatar_component.rb.tt

@@ -2,10 +2,11 @@
 
 module UI
   class AvatarComponent < ApplicationComponent
-    SIZES = { sm: "size-6", default: "size-8", lg: "size-12" }.freeze
-    BASE = "relative flex shrink-0 overflow-hidden rounded-full select-none"
+    BASE = "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none " \
+           "data-[size=sm]:size-6 data-[size=lg]:size-12"
     IMAGE = "aspect-square size-full object-cover"
-    FALLBACK = "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground"
+    FALLBACK = "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground " \
+               "group-data-[size=sm]/avatar:text-xs"
 
     def initialize(src: nil, alt: "", fallback: nil, size: :default, **html_attrs)
       @src = src
@@ -17,7 +18,10 @@ module UI
     end
 
     def call
-      content_tag(:div, class: cn(BASE, SIZES[@size], @extra_class), **@html_attrs) do
+      content_tag(:div,
+        class: cn(BASE, @extra_class),
+        "data-size": (@size == :default ? nil : @size.to_s),
+        **@html_attrs) do
         if @src
           content_tag(:img, nil, src: @src, alt: @alt, class: IMAGE)
         else

data/lib/generators/view_primitives/add/templates/badge/badge_component.rb.tt

@@ -5,7 +5,7 @@ module UI
     BASE = "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full " \
            "border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap " \
            "transition-[color,box-shadow] " \
-           "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+           "#{UI::Styles::FOCUS_RING} " \
            "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " \
            "[&>svg]:pointer-events-none [&>svg]:size-3"
 

data/lib/generators/view_primitives/add/templates/banner/banner_component.rb.tt

@@ -2,14 +2,14 @@
 
 module UI
   class BannerComponent < ApplicationComponent
-    BASE = "flex items-center gap-3 rounded-lg border p-4 text-sm"
+    BASE = "relative flex w-full items-center gap-3 rounded-lg #{UI::Styles::BORDER} px-4 py-3 text-sm"
 
     VARIANTS = {
-      default:     "bg-background text-foreground",
-      info:        "border-blue-200 bg-blue-50 text-blue-900",
-      warning:     "border-yellow-200 bg-yellow-50 text-yellow-900",
-      destructive: "border-destructive/40 bg-destructive/10 text-destructive",
-      success:     "border-green-200 bg-green-50 text-green-900"
+      default:     "bg-card text-card-foreground",
+      info:        "border-border bg-muted/50 text-foreground",
+      warning:     "border-border bg-chart-4/10 text-foreground",
+      destructive: "border-destructive/40 bg-card text-destructive",
+      success:     "border-border bg-chart-2/10 text-foreground"
     }.freeze
 
     def initialize(message = nil, variant: :default, **html_attrs)

data/lib/generators/view_primitives/add/templates/bottom_nav/bottom_nav_component.rb.tt

@@ -2,7 +2,8 @@
 
 module UI
   class BottomNavComponent < ApplicationComponent
-    BASE = "fixed bottom-0 left-0 z-50 w-full border-t bg-background"
+    BASE = "fixed bottom-0 left-0 z-50 w-full border-t border-border bg-background/95 shadow-xs " \
+           "backdrop-blur supports-[backdrop-filter]:bg-background/80"
 
     # items: [{ label:, href:, active: (optional), icon: (optional HTML string) }]
     def initialize(items: [], **html_attrs)
@@ -12,8 +13,11 @@ module UI
     end
 
     def call
-      content_tag(:nav, class: cn(BASE, @extra_class), **@html_attrs) do
-        content_tag(:div, class: "mx-auto flex h-16 max-w-lg items-center justify-around") do
+      content_tag(:nav,
+        class: cn(BASE, @extra_class),
+        "aria-label": "Bottom navigation",
+        **@html_attrs) do
+        content_tag(:div, class: "mx-auto flex h-14 max-w-lg items-center justify-around") do
           safe_join(@items.map { |item| nav_item(item) })
         end
       end
@@ -26,7 +30,10 @@ module UI
       content_tag(:a,
         href: item[:href],
         class: cn(
-          "flex flex-col items-center justify-center gap-1 px-4 py-2 text-xs font-medium transition-colors",
+          "flex flex-col items-center justify-center gap-1 px-3 py-2 text-xs font-medium " \
+          "transition-colors outline-none",
+          UI::Styles::FOCUS_RING,
+          "rounded-md",
           active ? "text-primary" : "text-muted-foreground hover:text-foreground"
         ),
         "aria-current": (active ? "page" : nil)) do

data/lib/generators/view_primitives/add/templates/breadcrumb/breadcrumb_component.rb.tt

@@ -2,8 +2,8 @@
 
 module UI
   class BreadcrumbComponent < ApplicationComponent
-    LINK  = "text-muted-foreground hover:text-foreground transition-colors"
-    CURRENT = "text-foreground font-medium"
+    LINK    = "text-muted-foreground transition-colors hover:text-foreground"
+    CURRENT = "font-normal text-foreground"
 
     # items: [{ label:, href: }, ..., { label: }]  — last item is the current page (no href)
     def initialize(items: [], separator: "/", **html_attrs)

data/lib/generators/view_primitives/add/templates/button/button_component.rb.tt

@@ -3,8 +3,8 @@
 module UI
   class ButtonComponent < ApplicationComponent
     BASE_CLASSES = "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm " \
-                   "font-medium transition-all outline-none " \
-                   "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+                   "font-medium transition-all " \
+                   "#{UI::Styles::FOCUS_RING} " \
                    "disabled:pointer-events-none disabled:opacity-50 " \
                    "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " \
                    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
@@ -13,8 +13,8 @@ module UI
       default: "bg-primary text-primary-foreground hover:bg-primary/90",
       destructive: "bg-destructive text-white hover:bg-destructive/90 " \
                    "focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-      outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground " \
-               "dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+      outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground " \
+               "dark:bg-input/30 dark:hover:bg-input/50",
       secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
       ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
       link: "text-primary underline-offset-4 hover:underline"
@@ -25,7 +25,10 @@ module UI
       xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
       sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
       lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-      icon: "size-9"
+      icon: "size-9",
+      "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+      "icon-sm": "size-8",
+      "icon-lg": "size-10"
     }.freeze
 
     # label — positional or keyword shorthand for plain-text buttons without a block.

data/lib/generators/view_primitives/add/templates/button_group/button_group_component.rb.tt

@@ -2,11 +2,10 @@
 
 module UI
   class ButtonGroupComponent < ApplicationComponent
-    BASE = "inline-flex rounded-md shadow-sm " \
-           "[&>*]:rounded-none " \
-           "[&>*:first-child]:rounded-l-md " \
-           "[&>*:last-child]:rounded-r-md " \
-           "[&>*:not(:first-child)]:-ml-px"
+    BASE = "flex w-fit items-stretch " \
+           "[&>*]:focus-visible:relative [&>*]:focus-visible:z-10 " \
+           "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 " \
+           "[&>*:not(:last-child)]:rounded-r-none"
 
     def initialize(**html_attrs)
       @extra_class = html_attrs.delete(:class)
@@ -17,6 +16,7 @@ module UI
       content_tag(:div, content,
         class: cn(BASE, @extra_class),
         role: "group",
+        "data-slot": "button-group",
         **@html_attrs)
     end
   end

data/lib/generators/view_primitives/add/templates/calendar/calendar_component.rb.tt

@@ -9,21 +9,23 @@ module UI
     # name:       form field name for the hidden input (if used in a form)
     # min/max:    Date bounds for disabled days
 
-    CONTAINER  = "w-fit rounded-lg border border-border bg-popover p-4 text-sm shadow"
-    HEADER_CLS = "mb-3 flex items-center justify-between"
-    MONTH_CLS  = "font-medium text-foreground"
-    NAV_BTN    = "inline-flex size-7 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"
-    GRID_CLS   = "grid grid-cols-7 gap-px"
-    DOW_CLS    = "py-1.5 text-center text-xs text-muted-foreground font-medium"
-    DAY_BASE   = "h-9 w-9 rounded-md text-center text-sm transition-colors outline-none " \
-                 "focus-visible:ring-[3px] focus-visible:ring-ring/50"
-    DAY_NORMAL = "hover:bg-accent hover:text-accent-foreground"
-    DAY_TODAY  = "font-semibold text-foreground ring-1 ring-border"
-    DAY_SEL    = "bg-primary text-primary-foreground hover:bg-primary/90"
-    DAY_MUTED  = "text-muted-foreground/50"
-    DAY_DISABLED = "pointer-events-none opacity-30"
+    CONTAINER  = "group/calendar w-fit #{UI::Styles::FIELD_PANEL} p-3 text-sm"
+    HEADER_CLS = "relative mb-2 flex items-center justify-between"
+    MONTH_CLS  = "flex h-8 w-full items-center justify-center text-sm font-medium select-none"
+    NAV_BTN    = "inline-flex size-8 shrink-0 items-center justify-center rounded-md p-0 " \
+                 "font-normal text-muted-foreground hover:bg-accent hover:text-accent-foreground " \
+                 "#{UI::Styles::FOCUS_RING} " \
+                 "disabled:pointer-events-none disabled:opacity-50 transition"
+    GRID_CLS   = "grid w-full grid-cols-7"
+    DOW_CLS    = "flex-1 rounded-md py-0 text-center text-[0.8rem] font-normal text-muted-foreground select-none"
+    DAY_BASE   = "inline-flex aspect-square size-8 items-center justify-center rounded-md p-0 " \
+                 "text-sm font-normal transition-colors outline-none " \
+                 "#{UI::Styles::FOCUS_RING}"
+    DAY_NORMAL = "hover:bg-accent hover:text-accent-foreground dark:hover:text-accent-foreground"
+    DAY_TODAY  = "rounded-md bg-accent text-accent-foreground"
+    DAY_SEL    = "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground"
+    DAY_MUTED  = "text-muted-foreground opacity-50"
+    DAY_DISABLED = "pointer-events-none opacity-50"
 
     DAYS_OF_WEEK = %w[Su Mo Tu We Th Fr Sa].freeze
     CHEVRON_L    = "m15 18-6-6 6-6"
@@ -42,7 +44,7 @@ module UI
     def call
       content_tag(:div,
         class: cn(CONTAINER, @extra_class),
-        data: { controller: "calendar", calendar_month_value: @month.iso8601 },
+        data: { slot: "calendar", controller: "calendar", calendar_month_value: @month.iso8601 },
         **@html_attrs) do
         concat hidden_input if @name && @selected
         concat header_row

data/lib/generators/view_primitives/add/templates/card/card_component.rb.tt

@@ -2,7 +2,7 @@
 
 module UI
   class CardComponent < ApplicationComponent
-    BASE = "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm"
+    BASE = "flex flex-col gap-6 rounded-xl #{UI::Styles::BORDER} bg-card py-6 text-card-foreground shadow-sm"
 
     def initialize(**html_attrs)
       @extra_class = html_attrs.delete(:class)