view_primitives 0.1.3 → 0.2.0

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

@@ -2,7 +2,7 @@
 
 module UI
   class CardFooterComponent < ApplicationComponent
-    BASE = "flex items-center px-6"
+    BASE = "flex items-center px-6 [.border-t]:pt-6"
 
     def initialize(**html_attrs)
       @extra_class = html_attrs.delete(:class)

data/lib/generators/view_primitives/add/templates/carousel/carousel_component.rb.tt

@@ -10,18 +10,22 @@ module UI
     #     c.with_slide { image_tag "slide2.jpg" }
     #   end
 
-    TRACK_CLS   = "flex"
-    SLIDE_CLS   = "min-w-full shrink-0"
+    CONTENT_CLS = "overflow-hidden"
+    TRACK_CLS   = "flex transition-transform duration-300 ease-in-out"
+    SLIDE_CLS   = "min-w-0 shrink-0 grow-0 basis-full"
 
-    BTN_BASE    = "absolute top-1/2 z-10 -translate-y-1/2 inline-flex size-9 items-center justify-center " \
-                  "rounded-full bg-background/80 backdrop-blur border border-border shadow-sm " \
-                  "transition hover:bg-background disabled:opacity-40 " \
-                  "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none"
+    BTN_BASE    = "absolute top-1/2 z-10 -translate-y-1/2 inline-flex size-8 shrink-0 items-center " \
+                  "justify-center rounded-full border border-input bg-background text-sm font-medium shadow-xs " \
+                  "transition-all outline-none " \
+                  "hover:bg-accent hover:text-accent-foreground " \
+                  "#{UI::Styles::FOCUS_RING} " \
+                  "disabled:pointer-events-none disabled:opacity-50 " \
+                  "dark:border-input dark:bg-input/30 dark:hover:bg-input/50"
     BTN_PREV    = "left-2"
     BTN_NEXT    = "right-2"
 
-    DOTS_CLS    = "mt-3 flex justify-center gap-1.5"
-    DOT_CLS     = "size-2 rounded-full bg-muted-foreground/40 transition " \
+    DOTS_CLS    = "mt-4 flex justify-center gap-1.5"
+    DOT_CLS     = "size-2 rounded-full bg-muted transition-colors " \
                   "data-[active=true]:bg-primary data-[active=true]:w-4"
 
     CHEVRON_L   = "m15 18-6-6 6-6"
@@ -42,14 +46,17 @@ module UI
 
     def call
       content_tag(:div,
-        class: cn("relative overflow-hidden", @extra_class),
+        class: cn("relative", @extra_class),
+        role: "region",
+        "aria-roledescription": "carousel",
         data: {
+          slot: "carousel",
           controller: "carousel",
           carousel_loop_value: @loop,
           carousel_autoplay_value: @autoplay
         },
         **@html_attrs) do
-        concat track
+        concat content_tag(:div, track, class: CONTENT_CLS, data: { slot: "carousel-content" })
         concat prev_btn
         concat next_btn
         concat dots if @indicators && slides.size > 1
@@ -60,7 +67,13 @@ module UI
 
     def track
       content_tag(:div, class: TRACK_CLS, data: { carousel_target: "track" }) do
-        safe_join(slides.map { |s| content_tag(:div, s, class: SLIDE_CLS) })
+        safe_join(slides.map { |s|
+          content_tag(:div, s,
+            class: SLIDE_CLS,
+            role: "group",
+            "aria-roledescription": "slide",
+            data: { slot: "carousel-item" })
+        })
       end
     end
 
@@ -68,14 +81,14 @@ module UI
       content_tag(:button, type: "button",
         class: cn(BTN_BASE, BTN_PREV),
         "aria-label": "Previous slide",
-        data: { action: "click->carousel#prev" }) { chevron(CHEVRON_L) }
+        data: { slot: "carousel-previous", action: "click->carousel#prev" }) { chevron(CHEVRON_L) }
     end
 
     def next_btn
       content_tag(:button, type: "button",
         class: cn(BTN_BASE, BTN_NEXT),
         "aria-label": "Next slide",
-        data: { action: "click->carousel#next" }) { chevron(CHEVRON_R) }
+        data: { slot: "carousel-next", action: "click->carousel#next" }) { chevron(CHEVRON_R) }
     end
 
     def dots

data/lib/generators/view_primitives/add/templates/chart/chart_component.rb.tt

@@ -22,22 +22,26 @@ module UI
     #   datasets: array of dataset hashes; snake_case keys are camelized for Chart.js
     #             (e.g. background_color: → backgroundColor:)
     #   options:  hash merged into Chart.js `options` (e.g. { responsive: false })
+    #   colors:   optional array overriding default --chart-1…5 palette for datasets
 
     TYPES = %w[bar line pie doughnut radar polarArea].freeze
 
-    WRAPPER_CLS = "relative"
+    WRAPPER_CLS = "flex aspect-video w-full justify-center text-xs"
 
-    def initialize(type: :bar, labels: [], datasets: [], options: {}, **html_attrs)
+    def initialize(type: :bar, labels: [], datasets: [], options: {}, colors: nil, **html_attrs)
       @type = TYPES.include?(type.to_s) ? type.to_s : "bar"
       @labels = labels
       @datasets = datasets
       @chart_options = options
+      @colors = colors
       @extra_class = html_attrs.delete(:class)
       @html_attrs = html_attrs
     end
 
     def call
-      content_tag(:div, class: cn(WRAPPER_CLS, @extra_class)) do
+      content_tag(:div,
+        class: cn(WRAPPER_CLS, @extra_class),
+        data: { slot: "chart" }) do
         tag.canvas(
           data: {
             controller: "chart",
@@ -53,7 +57,9 @@ module UI
 
     def config_json
       ds = @datasets.map { |d| camelize_keys(d).compact }
-      {labels: @labels, datasets: ds, options: @chart_options}.to_json
+      payload = {labels: @labels, datasets: ds, options: @chart_options}
+      payload[:colors] = @colors if @colors
+      payload.to_json
     end
 
     def camelize_keys(hash)

data/lib/generators/view_primitives/add/templates/chart/chart_controller.js

@@ -5,6 +5,14 @@ import { Chart, registerables } from "chart.js"
 
 Chart.register(...registerables)
 
+const DEFAULT_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)"
+]
+
 export default class extends Controller {
   static values = {
     type: { type: String, default: "bar" },
@@ -14,11 +22,26 @@ export default class extends Controller {
   #chart = null
 
   connect() {
-    const { labels, datasets, options = {} } = JSON.parse(this.configValue)
+    const { labels, datasets, options = {}, colors } = JSON.parse(this.configValue)
+    const palette = colors?.length ? colors : DEFAULT_COLORS
+    const coloredDatasets = datasets.map((dataset, index) => {
+      const color = palette[index % palette.length]
+      return {
+        ...dataset,
+        backgroundColor: dataset.backgroundColor ?? color,
+        borderColor: dataset.borderColor ?? color
+      }
+    })
+
     this.#chart = new Chart(this.element, {
       type: this.typeValue,
-      data: { labels, datasets },
-      options: { responsive: true, maintainAspectRatio: true, ...options }
+      data: { labels, datasets: coloredDatasets },
+      options: {
+        responsive: true,
+        maintainAspectRatio: true,
+        color: "var(--muted-foreground)",
+        ...options
+      }
     })
   }
 

data/lib/generators/view_primitives/add/templates/chat_bubble/chat_bubble_component.rb.tt

@@ -5,9 +5,9 @@ module UI
     # sent: true  → right-aligned, primary-colored bubble
     # sent: false → left-aligned, muted bubble (default)
 
-    BUBBLE_BASE = "max-w-[80%] rounded-2xl px-4 py-2 text-sm leading-relaxed"
-    BUBBLE_SENT = "bg-primary text-primary-foreground rounded-br-none"
-    BUBBLE_RECV = "bg-muted text-foreground rounded-bl-none"
+    BUBBLE_BASE = "max-w-[80%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed shadow-xs"
+    BUBBLE_SENT = "rounded-br-md bg-primary text-primary-foreground"
+    BUBBLE_RECV = "rounded-bl-md #{UI::Styles::BORDER} bg-muted text-foreground"
 
     TIMESTAMP_BASE = "mt-1 text-xs text-muted-foreground"
 
@@ -37,7 +37,7 @@ module UI
       content_tag(:img, nil,
         src: @avatar,
         alt: "",
-        class: "size-7 rounded-full object-cover shrink-0",
+        class: "size-8 shrink-0 rounded-full object-cover ring-2 ring-background",
         "aria-hidden": "true")
     end
 

data/lib/generators/view_primitives/add/templates/checkbox/checkbox_component.rb.tt

@@ -3,7 +3,7 @@
 module UI
   class CheckboxComponent < ApplicationComponent
     BASE = "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none " \
-           "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+           "#{UI::Styles::FOCUS_RING} " \
            "disabled:cursor-not-allowed disabled:opacity-50 " \
            "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " \
            "checked:border-primary checked:bg-primary checked:text-primary-foreground " \

data/lib/generators/view_primitives/add/templates/collapsible/collapsible_component.rb.tt

@@ -6,9 +6,12 @@ module UI
     # trigger slot: content for the summary row (button, icon, label, etc.)
     # open:         render pre-expanded (default: false)
 
-    SUMMARY_CLS = "flex cursor-pointer list-none items-center justify-between gap-2 " \
+    SUMMARY_CLS = "flex cursor-pointer list-none items-center justify-between gap-4 rounded-md py-2 " \
+                  "text-left text-sm font-medium transition-all outline-none " \
+                  "hover:underline " \
+                  "#{UI::Styles::FOCUS_RING} " \
                   "[&::-webkit-details-marker]:hidden"
-    CONTENT_CLS = "mt-2"
+    CONTENT_CLS = "pb-2 pt-0 text-sm text-muted-foreground"
 
     renders_one :trigger
 
@@ -19,12 +22,16 @@ module UI
     end
 
     def call
-      attrs = { class: cn(@extra_class), **@html_attrs }
+      attrs = { class: cn("group", @extra_class), data: { slot: "collapsible" }, **@html_attrs }
       attrs[:open] = true if @open
 
       content_tag(:details, **attrs) do
-        concat content_tag(:summary, trigger, class: SUMMARY_CLS)
-        concat content_tag(:div, content, class: CONTENT_CLS)
+        concat content_tag(:summary, trigger,
+          class: SUMMARY_CLS,
+          data: { slot: "collapsible-trigger" })
+        concat content_tag(:div, content,
+          class: CONTENT_CLS,
+          data: { slot: "collapsible-content" })
       end
     end
   end

data/lib/generators/view_primitives/add/templates/combobox/combobox_component.rb.tt

@@ -2,13 +2,10 @@
 
 module UI
   class ComboboxComponent < ApplicationComponent
-    INPUT  = "flex h-9 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs " \
-             "placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
-    PANEL  = "absolute z-50 top-full left-0 mt-1 w-full overflow-hidden rounded-md border " \
-             "bg-popover text-popover-foreground shadow-md"
+    INPUT  = UI::Styles::INPUT
+    PANEL  = "#{UI::Styles::POPOVER_PANEL} top-full left-0 mt-1 w-full overflow-hidden"
     LIST   = "max-h-[200px] overflow-y-auto p-1"
-    OPTION = "relative flex w-full cursor-pointer select-none items-center rounded-sm " \
-             "px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground"
+    OPTION = "#{UI::Styles::MENU_ITEM} w-full cursor-pointer hover:bg-accent hover:text-accent-foreground"
     EMPTY  = "py-4 text-center text-sm text-muted-foreground"
 
     def initialize(name:, options: [], value: nil, placeholder: "Select...", **html_attrs)

data/lib/generators/view_primitives/add/templates/command/command_component.rb.tt

@@ -4,10 +4,12 @@ module UI
   class CommandComponent < ApplicationComponent
     renders_one :trigger
 
-    OVERLAY = "fixed inset-0 z-50 bg-black/80"
-    DIALOG  = "fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] " \
-              "overflow-hidden rounded-lg border bg-background shadow-lg"
-    SEARCH  = "flex h-10 w-full items-center gap-2 border-b px-3"
+    OVERLAY = UI::Styles::OVERLAY
+    DIALOG  = "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] " \
+              "translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-lg #{UI::Styles::BORDER} bg-background " \
+              "p-0 shadow-lg duration-200 sm:max-w-lg"
+    COMMAND = "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground"
+    SEARCH  = "flex h-9 items-center gap-2 border-b border-border px-3"
     LIST    = "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto"
     EMPTY   = "py-6 text-center text-sm text-muted-foreground"
 
@@ -16,15 +18,14 @@ module UI
     # Apply to the heading element (p/span) inside a group wrapper.
     GROUP         = "px-2 py-1.5 text-xs font-medium text-muted-foreground"
     # Apply to each actionable item button/link.
-    ITEM          = "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm " \
-                    "px-2 py-1.5 text-sm outline-none " \
-                    "hover:bg-accent hover:text-accent-foreground " \
+    ITEM          = "#{UI::Styles::MENU_ITEM} w-full cursor-default data-[selected=true]:bg-accent " \
+                    "data-[selected=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground " \
                     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 " \
                     "[&_svg:not([class*='text-'])]:text-muted-foreground"
     # Place inside an ITEM as the last child to show a keyboard shortcut on the right.
     SHORTCUT      = "ml-auto text-xs tracking-widest text-muted-foreground"
-    # Horizontal rule between groups (use a plain <hr> tag).
-    SEPARATOR     = "-mx-1 h-px bg-border"
+    # Horizontal rule between groups (`<div role="separator">`).
+    SEPARATOR     = UI::Styles::MENU_SEPARATOR
 
     def initialize(**html_attrs)
       @extra_class = html_attrs.delete(:class)
@@ -51,14 +52,16 @@ module UI
           role: "dialog",
           "aria-modal": "true",
           data: { action: "keydown.escape@window->command#close" }) {
-          concat search_bar
-          concat content_tag(:div, class: LIST, data: { command_target: "list" }) {
-            concat content
+          concat content_tag(:div, class: COMMAND) {
+            concat search_bar
+            concat content_tag(:div, class: LIST, data: { command_target: "list" }) {
+              concat content
+            }
+            concat content_tag(:div, "No results found.",
+              class: EMPTY,
+              data: { command_target: "empty" },
+              hidden: true)
           }
-          concat content_tag(:div, "No results found.",
-            class: EMPTY,
-            data: { command_target: "empty" },
-            hidden: true)
         }
       end
     end
@@ -69,7 +72,8 @@ module UI
         concat tag.input(
           type: "text",
           placeholder: "Type a command or search...",
-          class: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+          class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden " \
+                  "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
           data: {
             command_target: "input",
             action: "input->command#filter"
@@ -79,7 +83,7 @@ module UI
     end
 
     def search_icon
-      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="shrink-0 text-muted-foreground" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></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 shrink-0 opacity-50" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>')
     end
   end
 end

data/lib/generators/view_primitives/add/templates/command/command_controller.js

@@ -10,6 +10,7 @@ export default class extends Controller {
 
   disconnect() {
     document.removeEventListener("keydown", this._onKeydown)
+    this._releaseFocusTrap()
   }
 
   _onKeydown(event) {
@@ -22,6 +23,12 @@ export default class extends Controller {
   open() {
     this.panelTarget.hidden = false
     document.body.style.overflow = "hidden"
+
+    this._previouslyFocused = document.activeElement
+    this._dialog = this.panelTarget.querySelector("[role=dialog]")
+    this._trapFocus = this.#trapFocus.bind(this)
+    this._dialog?.addEventListener("keydown", this._trapFocus)
+
     this.inputTarget.value = ""
     this.inputTarget.focus()
     this.filter()
@@ -30,6 +37,7 @@ export default class extends Controller {
   close() {
     this.panelTarget.hidden = true
     document.body.style.overflow = ""
+    this._releaseFocusTrap()
   }
 
   filter() {
@@ -47,4 +55,46 @@ export default class extends Controller {
     const totalVisible = Array.from(items).filter(i => !i.hidden).length
     this.emptyTarget.hidden = totalVisible > 0
   }
+
+  #trapFocus(event) {
+    if (event.key !== "Tab" || !this._dialog) return
+
+    const focusable = this.#focusableElements(this._dialog)
+    if (focusable.length === 0) return
+
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault()
+      last.focus()
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault()
+      first.focus()
+    }
+  }
+
+  #focusableElements(container) {
+    if (!container) return []
+
+    const selector = [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      "[tabindex]:not([tabindex='-1'])",
+    ].join(", ")
+
+    return Array.from(container.querySelectorAll(selector)).filter(
+      (el) => !el.hasAttribute("hidden") && el.offsetParent !== null
+    )
+  }
+
+  _releaseFocusTrap() {
+    this._dialog?.removeEventListener("keydown", this._trapFocus)
+    this._previouslyFocused?.focus?.()
+    this._previouslyFocused = null
+    this._dialog = null
+  }
 }

data/lib/generators/view_primitives/add/templates/context_menu/context_menu_component.rb.tt

@@ -4,14 +4,15 @@ module UI
   class ContextMenuComponent < ApplicationComponent
     renders_one :menu
 
-    PANEL     = "fixed z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 " \
-               "text-popover-foreground shadow-md"
-    ITEM      = "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm " \
-                "px-2 py-1.5 text-sm outline-none " \
-                "hover:bg-accent hover:text-accent-foreground " \
-                "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 " \
-                "[&_svg:not([class*='text-'])]:text-muted-foreground"
-    SEPARATOR = "-mx-1 my-1 h-px bg-border"
+    PANEL = "#{UI::Styles::POPOVER_PANEL} fixed min-w-[8rem] overflow-x-hidden overflow-y-auto p-1"
+
+    ITEM = "#{UI::Styles::MENU_ITEM} w-full hover:bg-accent hover:text-accent-foreground " \
+           "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 " \
+           "dark:data-[variant=destructive]:focus:bg-destructive/20 " \
+           "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 " \
+           "[&_svg:not([class*='text-'])]:text-muted-foreground"
+
+    SEPARATOR = UI::Styles::MENU_SEPARATOR
     LABEL_CLS = "px-2 py-1.5 text-sm font-medium text-foreground"
 
     def initialize(**html_attrs)

data/lib/generators/view_primitives/add/templates/data_table/data_table_component.rb.tt

@@ -3,29 +3,36 @@
 module UI
   class DataTableComponent < ApplicationComponent
     # Sortable, filterable data table with client-side pagination.
+    # Table cell styles follow shadcn/ui Table primitives.
     #
     # columns: array of { key:, label:, sortable: true }
     # rows:    array of hashes (keys must match column keys)
     # per_page: rows per page (default 10, 0 = no pagination)
     # caption:  optional <caption> text
 
-    WRAPPER    = "w-full overflow-auto rounded-lg border border-border"
-    TOOLBAR    = "flex items-center gap-3 border-b border-border bg-background px-4 py-3"
-    SEARCH_CLS = "flex h-8 flex-1 items-center gap-2 rounded-md border border-input bg-background " \
-                 "px-3 text-sm text-muted-foreground focus-within:border-ring focus-within:ring-[3px] " \
-                 "focus-within:ring-ring/50 transition"
-    SEARCH_INPUT = "w-full bg-transparent outline-none placeholder:text-muted-foreground text-foreground text-sm"
+    WRAPPER    = "w-full overflow-hidden rounded-md #{UI::Styles::BORDER} bg-background"
+    TABLE_WRAP = "relative w-full overflow-x-auto"
+    TOOLBAR    = "flex items-center gap-3 border-b border-border px-4 py-3"
+    SEARCH_CLS = "flex h-9 w-full max-w-sm items-center gap-2 rounded-md border border-input bg-transparent px-3 " \
+                 "text-sm shadow-xs transition-[color,box-shadow] " \
+                 "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 " \
+                 "dark:bg-input/30"
+    SEARCH_INPUT = "w-full bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
     TABLE_CLS  = "w-full caption-bottom text-sm"
-    THEAD_CLS  = "bg-muted/40"
-    TH_CLS     = "h-10 px-4 text-left align-middle font-medium text-muted-foreground whitespace-nowrap"
-    TH_SORT    = "cursor-pointer select-none hover:text-foreground transition-colors"
-    TR_CLS     = "border-t border-border transition-colors hover:bg-muted/30"
-    TD_CLS     = "px-4 py-3 align-middle"
-    FOOTER_CLS = "flex items-center justify-between border-t border-border bg-background px-4 py-3 " \
-                 "text-sm text-muted-foreground"
-    PAGE_BTN   = "inline-flex h-8 w-8 items-center justify-center rounded-md border border-border " \
-                 "hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none " \
-                 "disabled:opacity-40 transition"
+    THEAD_CLS  = "[&_tr]:border-b [&_tr]:border-border"
+    TH_CLS     = "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground"
+    TH_SORT    = "cursor-pointer select-none transition-colors hover:text-foreground/80"
+    TBODY_CLS  = "[&_tr:last-child]:border-0"
+    TR_CLS     = "border-b border-border transition-colors hover:bg-muted/50"
+    TD_CLS     = "p-2 align-middle whitespace-nowrap"
+    CAPTION_CLS = "mt-4 text-sm text-muted-foreground"
+    FOOTER_CLS = "flex items-center justify-between gap-4 border-t border-border px-4 py-3 text-sm text-muted-foreground"
+    PAGE_BTN   = "inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-input bg-background " \
+                 "text-sm font-medium shadow-xs transition-all outline-none " \
+                 "hover:bg-accent hover:text-accent-foreground " \
+                 "#{UI::Styles::FOCUS_RING} " \
+                 "disabled:pointer-events-none disabled:opacity-50 " \
+                 "dark:border-input dark:bg-input/30 dark:hover:bg-input/50"
     SORT_ASC   = "▲"
     SORT_DESC  = "▼"
 
@@ -48,7 +55,7 @@ module UI
         },
         **@html_attrs) do
         concat toolbar
-        concat table_element
+        concat table_section
         concat footer if @per_page > 0
       end
     end
@@ -74,14 +81,20 @@ module UI
       end
     end
 
-    def table_element
-      content_tag(:table, class: TABLE_CLS) do
-        concat content_tag(:caption, @caption, class: "mt-2 text-sm text-muted-foreground") if @caption
-        concat thead
-        concat tbody
+    def table_section
+      content_tag(:div, class: TABLE_WRAP) do
+        content_tag(:table, class: TABLE_CLS) do
+          concat thead
+          concat tbody
+          concat caption_element if @caption
+        end
       end
     end
 
+    def caption_element
+      content_tag(:caption, @caption, class: CAPTION_CLS)
+    end
+
     def thead
       content_tag(:thead, class: THEAD_CLS) do
         content_tag(:tr) do
@@ -98,7 +111,8 @@ module UI
       content_tag(:th, class: cn(TH_CLS, sortable ? TH_SORT : nil),
         data: sortable ? {
           action: "click->data-table#sort",
-          data_table_key_param: key
+          data_table_key_param: key,
+          data_table_column_key: key
         } : {}) do
         content_tag(:span, class: "flex items-center gap-1") do
           concat label
@@ -115,7 +129,7 @@ module UI
     end
 
     def tbody
-      content_tag(:tbody, data: { data_table_target: "body" }) do
+      content_tag(:tbody, class: TBODY_CLS, data: { data_table_target: "body" }) do
         safe_join(@rows.map { |row| tr_row(row) })
       end
     end
@@ -132,15 +146,32 @@ module UI
 
     def footer
       content_tag(:div, class: FOOTER_CLS) do
-        concat content_tag(:span, "Page 1",
+        concat content_tag(:span, "",
           data: { data_table_target: "pageLabel" })
-        concat(content_tag(:div, class: "flex items-center gap-1") {
-          concat page_btn("‹", "click->data-table#prevPage", "Previous page")
-          concat page_btn("›", "click->data-table#nextPage", "Next page")
+        concat(content_tag(:div, class: "flex shrink-0 items-center gap-1") {
+          concat page_btn(prev_icon, "click->data-table#prevPage", "Previous page")
+          concat page_btn(next_icon, "click->data-table#nextPage", "Next page")
         })
       end
     end
 
+    def prev_icon
+      chevron_svg("left")
+    end
+
+    def next_icon
+      chevron_svg("right")
+    end
+
+    def chevron_svg(direction)
+      path = direction == "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6"
+      content_tag(:svg, content_tag(:path, nil, d: path),
+        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: "size-4", "aria-hidden": "true")
+    end
+
     def page_btn(label, action, aria)
       content_tag(:button, label, type: "button",
         class: PAGE_BTN,
@@ -157,7 +188,7 @@ module UI
         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: "size-4 shrink-0", "aria-hidden": "true")
+        class: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true")
     end
   end
 end

data/lib/generators/view_primitives/add/templates/data_table/data_table_controller.js

@@ -97,8 +97,8 @@ export default class extends Controller {
   }
 
   #columnIndex(key) {
-    const headers = this.element.querySelectorAll("th[data-data-table-key-param]")
-    return Array.from(headers).findIndex(h => h.dataset.dataTableKeyParam === key)
+    const headers = this.element.querySelectorAll("th[data-data-table-column-key]")
+    return Array.from(headers).findIndex(h => h.dataset.dataTableColumnKey === key)
   }
 
   get #totalPages() {

data/lib/generators/view_primitives/add/templates/date_picker/date_picker_component.rb.tt

@@ -10,13 +10,11 @@ module UI
     # min/max:     Date bounds passed to the calendar
 
     WRAPPER  = "relative inline-block"
-    TRIGGER  = "flex h-9 w-48 cursor-pointer items-center gap-2 rounded-md border border-input " \
-               "bg-background px-3 text-sm text-foreground shadow-xs " \
-               "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none transition " \
-               "aria-expanded:border-ring"
-    ICON_CLS = "size-4 shrink-0 text-muted-foreground"
-    POPOVER  = "absolute left-0 top-full z-50 mt-1 hidden w-max rounded-lg border border-border " \
-               "bg-popover p-0 shadow-md data-[open=true]:block"
+    TRIGGER  = "#{UI::Styles::PICKER_TRIGGER} w-48"
+    ICON_CLS = "size-4 shrink-0 text-muted-foreground pointer-events-none"
+    LABEL_PLACEHOLDER = "text-muted-foreground"
+    # Positioning shell only — visual chrome comes from CalendarComponent::CONTAINER
+    POPOVER  = "absolute left-0 top-full z-50 mt-2 hidden w-max data-[open=true]:block"
 
     def initialize(value: nil, name: nil, placeholder: "Pick a date", min: nil, max: nil, **html_attrs)
       @value       = value
@@ -58,7 +56,9 @@ module UI
           action: "click->date-picker#toggle"
         }) do
         concat calendar_icon
-        concat content_tag(:span, label_text, data: { date_picker_target: "label" })
+        concat content_tag(:span, label_text,
+          class: (@value ? nil : LABEL_PLACEHOLDER),
+          data: { date_picker_target: "label" })
       end
     end