stimulus_plumbers_tailwind 0.4.0 → 0.4.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f14f719e9c94e67c1b76669ea4a0691c7929e9a2b7df04fda692ce3ea430c4bc
-  data.tar.gz: 161c3622b129cbcf3ee49bc304319c691cf09c8c754a01646bc608480b391029
+  metadata.gz: 9eb6bbfe958bd425b443843724ef2b3a66041f04fe40ec4b041a72accd9ec497
+  data.tar.gz: f1928462ed5485e7560a1993e72aeddbd90dd734db280703ae50e751bfcb6306
 SHA512:
-  metadata.gz: 606d07453d71bc70cd71560c47ee12a028fbe4ab5ef3150d52024d61eef561f263c12221c73ed8689f56119b8f5b155099bad4526435f3614550b23f2934628c
-  data.tar.gz: c4d45c72794f1c0df3310e30f5a95cb3bc3c204c1298eca5c916f645fb530d1bfb4d5ee3ff24c828290ba6e6a75e5980e4d20853eae19b1692ee64007303d60f
+  metadata.gz: ce4edf07b1b20042b73e67c4d16d86eb6213e0e08a3fdb2049a362c4042941fe7672b5503e185da78c4e85394a4592e7a51971fcfca01802c14d4df5c2cf4bad
+  data.tar.gz: 625987458573abbe7ab612323c81ce300b2ac993347e6af4903e1a034b35c7153a81d716695a79531c38578d78f0884feddfe15655b0e252cbccc0f254d05ae5

data/CHANGELOG.md

@@ -2,6 +2,46 @@
 
 All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines.
 
+---
+## [0.4.3](https://github.com/ryancyq/stimulus-plumbers/compare/stimulus-plumbers-tailwind/v0.4.2..stimulus-plumbers-tailwind/v0.4.3) - 2026-06-30
+
+### Bug Fixes
+
+- tailwind generator ([#149](https://github.com/ryancyq/stimulus-plumbers/issues/149)) - ([9dafae0](https://github.com/ryancyq/stimulus-plumbers/commit/9dafae03b5d49fb543d08f84cdb718d944dce49f)) - Ryan Chang
+
+---
+## [0.4.2](https://github.com/ryancyq/stimulus-plumbers/compare/stimulus-plumbers-tailwind/v0.4.0..stimulus-plumbers-tailwind/v0.4.2) - 2026-06-30
+
+### Bug Fixes
+
+- form submit button style ([#127](https://github.com/ryancyq/stimulus-plumbers/issues/127)) - ([2bbc73f](https://github.com/ryancyq/stimulus-plumbers/commit/2bbc73f15b7ffa2d9d8f87991adead33fab8156e)) - Ryan Chang
+- various component styles ([#128](https://github.com/ryancyq/stimulus-plumbers/issues/128)) - ([011cc69](https://github.com/ryancyq/stimulus-plumbers/commit/011cc69bb6df3770949564521cdf949493d028cc)) - Ryan Chang
+- use generic icon in core gem then provide alias in tailwind gem ([#129](https://github.com/ryancyq/stimulus-plumbers/issues/129)) - ([5c87d0d](https://github.com/ryancyq/stimulus-plumbers/commit/5c87d0da0c012652a3afa5aa8345b58d03e6ce5b)) - Ryan Chang
+- combobox time ([#130](https://github.com/ryancyq/stimulus-plumbers/issues/130)) - ([ff5d968](https://github.com/ryancyq/stimulus-plumbers/commit/ff5d968da34fc723b0112a791bd95ef43f2b1640)) - Ryan Chang
+- extract img avatar building block ([#132](https://github.com/ryancyq/stimulus-plumbers/issues/132)) - ([c3808b8](https://github.com/ryancyq/stimulus-plumbers/commit/c3808b8df38eecef940b51dab29f50bc815b4e74)) - Ryan Chang
+- update floating style to label/input/group ([#135](https://github.com/ryancyq/stimulus-plumbers/issues/135)) - ([3947f38](https://github.com/ryancyq/stimulus-plumbers/commit/3947f38467e0a498fe51101d1859a573db93349f)) - Ryan Chang
+- accessibility + plumber helpers ([#136](https://github.com/ryancyq/stimulus-plumbers/issues/136)) - ([e84053d](https://github.com/ryancyq/stimulus-plumbers/commit/e84053d43db4726c3704d459a0464f70529fff8b)) - Ryan Chang
+- calendar disabled + out of range ([#148](https://github.com/ryancyq/stimulus-plumbers/issues/148)) - ([7bd1ca2](https://github.com/ryancyq/stimulus-plumbers/commit/7bd1ca21af1b982cf7df9460e0ba1c9e78866a87)) - Ryan Chang
+
+### Dependencies
+
+- **(deps-dev)** bump @playwright/test in /stimulus-plumbers-tailwind ([#147](https://github.com/ryancyq/stimulus-plumbers/issues/147)) - ([941634d](https://github.com/ryancyq/stimulus-plumbers/commit/941634de18e2accc39f926258cb3d1b2534d11dc)) - dependabot[bot]
+- **(deps-dev)** bump prettier in /stimulus-plumbers-tailwind ([#146](https://github.com/ryancyq/stimulus-plumbers/issues/146)) - ([570c8ff](https://github.com/ryancyq/stimulus-plumbers/commit/570c8ff7630039bdbdc6e3d89c6a181bbc706dd8)) - dependabot[bot]
+
+### Documentation
+
+- update readme and component doc ([#134](https://github.com/ryancyq/stimulus-plumbers/issues/134)) - ([3e5f462](https://github.com/ryancyq/stimulus-plumbers/commit/3e5f4621c4fbf142af061659cfbb8cd3e99fd093)) - Ryan Chang
+- update component documentation - ([89ecb78](https://github.com/ryancyq/stimulus-plumbers/commit/89ecb786d88eed66ab925921ac182aa84560207d)) - Ryan Chang
+
+### Features
+
+- calendar redesign  ([#133](https://github.com/ryancyq/stimulus-plumbers/issues/133)) - ([e19df95](https://github.com/ryancyq/stimulus-plumbers/commit/e19df95f3814b3d947142722ff0295f1bdcef6b3)) - Ryan Chang
+
+### Tests
+
+- update sandbox view and spec coverage ([#122](https://github.com/ryancyq/stimulus-plumbers/issues/122)) - ([0fd3381](https://github.com/ryancyq/stimulus-plumbers/commit/0fd33817325070c29ffed82d37843b4c4be3e911)) - Ryan Chang
+- update collection radio locator - ([f0fa9e8](https://github.com/ryancyq/stimulus-plumbers/commit/f0fa9e85bc0b835b3adc46f5dc406a8bdedbeefe)) - Ryan Chang
+
 ---
 ## [0.4.0](https://github.com/ryancyq/stimulus-plumbers/compare/stimulus-plumbers-tailwind/v0.3.3..stimulus-plumbers-tailwind/v0.4.0) - 2026-06-14
 

data/README.md

@@ -27,18 +27,34 @@ Activate the theme in an initializer or `config/application.rb`:
 
 ```ruby
 StimulusPlumbers.configure do |config|
-  config.theme = :tailwind
+  config.theme.use(:tailwind)
 end
 ```
 
-Tell Tailwind to scan the gem's lib files so component class names are included in the generated CSS. Add an `@source` directive pointing at the gem's installed path:
+Run the install generator once to inject the required `@source` directive into your Tailwind CSS entry file:
 
-```css
-@import "tailwindcss";
-@source "/path/to/gems/stimulus_plumbers_tailwind-VERSION/lib/**/*.rb";
+```bash
+bin/rails generate stimulus_plumbers_tailwind:install
 ```
 
-Use `bundle show stimulus_plumbers_tailwind` to get the exact installed path.
+The generator checks these files in order:
+
+- `app/assets/stylesheets/application.tailwind.css`
+- `app/assets/stylesheets/application.css`
+- `app/javascript/entrypoints/application.css`
+
+Override the detected file for both the generator and rake task with `TAILWIND_CSS_FILE=/path/to/entry.css`.
+
+After the initial install, the `@source` path is kept current automatically — no manual re-run needed after `bundle update`. The engine hooks `stimulus_plumbers_tailwind:install` as a prerequisite of:
+
+- `assets:precompile` (Sprockets and Propshaft both define this task)
+- `tailwindcss:build` (when `tailwindcss-rails` is present)
+
+To trigger an update manually without a full compile (useful for debugging or after `bundle update`):
+
+```bash
+bin/rails stimulus_plumbers_tailwind:install
+```
 
 ## Theming
 
@@ -46,7 +62,6 @@ Use `bundle show stimulus_plumbers_tailwind` to get the exact installed path.
 
 | Module | Components |
 |--------|------------|
-| `Tailwind::ActionList` | Action list, menu items |
 | `Tailwind::Avatar` | Avatar |
 | `Tailwind::Button` | Button |
 | `Tailwind::Calendar` | Calendar grid, date picker |
@@ -55,6 +70,9 @@ Use `bundle show stimulus_plumbers_tailwind` to get the exact installed path.
 | `Tailwind::Form` | Form fields, labels, errors |
 | `Tailwind::Icon` | Icon (SVG rendering, icon registry) |
 | `Tailwind::Layout` | Layout primitives |
+| `Tailwind::Link` | Link |
+| `Tailwind::List` | List |
+| `Tailwind::Timeline` | Timeline |
 
 Custom themes can subclass `TailwindTheme` to override individual methods, or subclass `StimulusPlumbers::Themes::Base` directly.
 
@@ -85,8 +103,8 @@ bundle install
 npm install
 
 bundle exec rake test:unit    # unit tests
-npm run test:snapshots         # visual snapshot tests (Playwright)
-npm run test:snapshots:update  # regenerate baseline screenshots
+node --run test:snapshots         # visual snapshot tests (Playwright)
+node --run test:snapshots:update  # regenerate baseline screenshots
 bundle exec rake rubocop       # lint
 bundle exec rake coverage      # run tests with coverage + collate report
 ```

data/lib/generators/stimulus_plumbers_tailwind/install/install_generator.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+
+module StimulusPlumbersTailwind
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      GEM_NAME          = "stimulus_plumbers_tailwind"
+      TAILWIND_CSS_FILE = "TAILWIND_CSS_FILE"
+      CSS_CANDIDATES    = %w[
+        app/assets/stylesheets/application.tailwind.css
+        app/assets/stylesheets/application.css
+        app/javascript/entrypoints/application.css
+      ].freeze
+
+      def install
+        css_file = entry_css_file
+        return warn_entry_css_not_found unless css_file
+
+        apply_edit(css_file)
+      end
+
+      private
+
+      def warn_entry_css_not_found
+        tried = CSS_CANDIDATES.map { |c| File.join(destination_root, c) }
+        tried.unshift(File.expand_path(ENV[TAILWIND_CSS_FILE])) if ENV[TAILWIND_CSS_FILE]
+        say "Could not find a Tailwind CSS entry file. Tried: #{tried.join(", ")}. " \
+            "Set #{TAILWIND_CSS_FILE}=/path/to/entry.css and re-run.",
+            :red
+      end
+
+      def apply_edit(css_file)
+        content              = File.read(css_file)
+        new_content, status  = content_edit(content, source_directive)
+
+        if new_content
+          File.write(css_file, new_content)
+          say_status status, relative_to_destination(css_file), :green
+        else
+          say_status :identical, relative_to_destination(css_file)
+        end
+      end
+
+      def content_edit(content, source_line)
+        if content.include?(source_line)
+          nil
+        elsif (existing = content.match(%r{@source "[^"]*#{Regexp.escape(GEM_NAME)}[^"]*";}))
+          [content.sub(existing[0], source_line), :update]
+        elsif (import_line = content.match(%r{@import "tailwindcss"[^;]*;}))
+          [content.sub(import_line[0], "#{import_line[0]}\n#{source_line}"), :insert]
+        else
+          ["#{content.rstrip}\n#{source_line}\n", :append]
+        end
+      end
+
+      def source_directive
+        spec = Gem.loaded_specs[GEM_NAME]
+        %(@source "#{spec.gem_dir}/lib/**/*.rb";)
+      end
+
+      def entry_css_file
+        if ENV[TAILWIND_CSS_FILE]
+          path = File.expand_path(ENV[TAILWIND_CSS_FILE])
+          return path if File.exist?(path)
+        end
+
+        CSS_CANDIDATES
+          .map { |c| File.join(destination_root, c) }
+          .find { |f| File.exist?(f) }
+      end
+
+      def relative_to_destination(path)
+        path.delete_prefix("#{destination_root}/")
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/themes/tailwind/avatar.rb

@@ -4,6 +4,18 @@ module StimulusPlumbers
   module Themes
     module Tailwind
       module Avatar
+        BASE = %w[
+          rounded-(--sp-radius-full)
+          overflow-hidden
+          inline-flex items-center justify-center
+        ].freeze
+
+        SIZES = {
+          sm: "size-(--sp-avatar-size-sm)",
+          md: "size-(--sp-avatar-size-md)",
+          lg: "size-(--sp-avatar-size-lg)"
+        }.freeze
+
         VARIANTS = {
           amber:   "text-white bg-amber-600",
           lime:    "text-white bg-lime-600",
@@ -19,18 +31,6 @@ module StimulusPlumbers
           blue:    "text-white bg-blue-600"
         }.freeze
 
-        SIZES = {
-          sm: "size-(--sp-icon-size)",
-          md: "size-(--sp-avatar-size)",
-          lg: "size-(--sp-avatar-size-lg)"
-        }.freeze
-
-        BASE = %w[
-          rounded-(--sp-radius-full)
-          overflow-hidden
-          inline-flex items-center justify-center
-        ].freeze
-
         def avatar_variants
           VARIANTS
         end

data/lib/stimulus_plumbers/themes/tailwind/button.rb

@@ -4,6 +4,25 @@ module StimulusPlumbers
   module Themes
     module Tailwind
       module Button
+        # ── Structure ─────────────────────────────────────────────────────────
+        BASE = [
+          *Control::BASE,
+          "whitespace-nowrap",
+          "focus-visible:ring-(--btn-ring)"
+        ].freeze
+
+        LAYOUT = %w[
+          inline-flex items-center justify-center gap-(--sp-space-2)
+          [&:not(:has(>span))]:aspect-square
+          [&:not(:has(>span))]:px-0
+        ].freeze
+
+        CARD = %w[
+          inline-flex justify-start items-center flex-1 gap-(--sp-space-3) p-(--sp-space-4)
+          [&>:last-child:not(:first-child)]:ml-auto
+        ].freeze
+
+        # ── Color tokens ──────────────────────────────────────────────────────
         VARIANTS = {
           primary:     %w[
             [--btn-bg:var(--sp-color-primary)]
@@ -56,6 +75,7 @@ module StimulusPlumbers
           ].freeze
         }.freeze
 
+        # ── Type styles ───────────────────────────────────────────────────────
         TYPES = {
           default:     %w[
             rounded-(--sp-radius-md)
@@ -67,13 +87,13 @@ module StimulusPlumbers
             rounded-(--sp-radius-md)
             bg-(--sp-color-bg) text-(--btn-accent)
             border border-(--btn-border)
-            hover:bg-(--btn-bg)/10
+            hover:bg-(--btn-accent)/10
           ].freeze,
           ghost:       %w[
             rounded-(--sp-radius-md)
             bg-transparent text-(--btn-accent)
             border border-transparent
-            hover:bg-(--btn-bg)/10
+            hover:bg-(--btn-accent)/10
           ].freeze,
           fab:         %w[
             rounded-(--sp-radius-full)
@@ -93,16 +113,17 @@ module StimulusPlumbers
             rounded-(--sp-radius-md)
             bg-(--sp-color-bg) text-(--btn-accent)
             border border-dashed border-(--btn-border)
-            hover:bg-(--btn-bg)/10
+            hover:bg-(--btn-accent)/10
           ].freeze,
           card:        %w[
             rounded-(--sp-radius-md)
             bg-(--sp-color-bg) text-(--btn-accent)
             border border-(--btn-border) shadow-(--sp-shadow-xs)
-            hover:bg-(--btn-bg)/10
+            hover:bg-(--btn-accent)/10
           ].freeze
         }.freeze
 
+        # ── Sizes ─────────────────────────────────────────────────────────────
         SIZES = {
           xs: %w[h-7 px-(--sp-space-2) text-(length:--sp-text-xs)].freeze,
           sm: %w[h-8 px-(--sp-space-3) text-(length:--sp-text-sm)].freeze,
@@ -111,23 +132,6 @@ module StimulusPlumbers
           xl: %w[h-14 px-(--sp-space-6) text-(length:--sp-text-lg)].freeze
         }.freeze
 
-        BASE = [
-          *Control::BASE,
-          "whitespace-nowrap",
-          "focus-visible:ring-(--btn-ring)"
-        ].freeze
-
-        LAYOUT = %w[
-          inline-flex items-center justify-center gap-(--sp-space-2)
-          [&:not(:has(>span))]:aspect-square
-          [&:not(:has(>span))]:px-0
-        ].freeze
-
-        CARD = %w[
-          inline-flex justify-start items-center flex-1 gap-(--sp-space-3) p-(--sp-space-4)
-          [&>:last-child:not(:first-child)]:ml-auto
-        ].freeze
-
         private
 
         def button_classes(type: :default, variant: :primary, size: :md)
@@ -143,7 +147,7 @@ module StimulusPlumbers
         end
 
         def button_icon_classes
-          { classes: klasses("size-(--sp-control-size)", "stroke-current") }
+          { classes: klasses("size-(--sp-icon-size-sm)", "stroke-current") }
         end
       end
     end

data/lib/stimulus_plumbers/themes/tailwind/calendar.rb

@@ -4,7 +4,7 @@ module StimulusPlumbers
   module Themes
     module Tailwind
       module Calendar
-        GRID = %w[w-full].freeze
+        GRID = [].freeze
 
         DAYS_OF_WEEK = %w[
           grid grid-cols-7 text-center text-(length:--sp-text-xs)
@@ -16,41 +16,52 @@ module StimulusPlumbers
         DAY = %w[
           size-(--sp-calendar-day-size) rounded-(--sp-radius-md)
           flex items-center justify-center text-(length:--sp-text-sm)
-          hover:bg-(--sp-color-muted) cursor-pointer
+          [&:is(button)]:hover:bg-(--sp-color-muted) [&:is(button)]:cursor-pointer
           aria-[current=date]:font-bold
           aria-selected:bg-(--sp-color-primary)
           aria-selected:text-(--sp-color-primary-fg)
           aria-selected:hover:bg-(--sp-color-primary)/90
           aria-[hidden=true]:pointer-events-none
-          aria-[hidden=true]:hover:bg-transparent
+          aria-[disabled=true]:text-(--sp-color-muted-fg)
+          aria-[disabled=true]:opacity-40
+          aria-[disabled=true]:pointer-events-none
+          disabled:text-(--sp-color-muted-fg)
+          disabled:opacity-40
+          disabled:pointer-events-none
         ].freeze
 
-        QUARTER_GRID = %w[grid grid-cols-4].freeze
+        QUARTER_GRID = %w[grid grid-cols-4 gap-(--sp-space-1)].freeze
 
         MONTHS_OF_YEAR = "contents"
 
         MONTH = %w[
           rounded-(--sp-radius-md) flex items-center justify-center
-          text-(length:--sp-text-sm) h-10 flex-1
+          text-(length:--sp-text-sm) h-10 flex-1 px-(--sp-space-2)
           hover:bg-(--sp-color-muted) cursor-pointer
           aria-selected:bg-(--sp-color-primary)
           aria-selected:text-(--sp-color-primary-fg)
           aria-selected:hover:bg-(--sp-color-primary)/90
-          aria-disabled:pointer-events-none aria-disabled:text-(--sp-color-disabled-fg)
           aria-[current=month]:font-bold
+          aria-[disabled=true]:text-(--sp-color-muted-fg)
+          aria-[disabled=true]:opacity-40
+          aria-[disabled=true]:pointer-events-none
+          aria-[disabled=true]:hover:bg-transparent
         ].freeze
 
         YEARS_OF_DECADE = "contents"
 
         YEAR = %w[
           rounded-(--sp-radius-md) flex items-center justify-center
-          text-(length:--sp-text-sm) h-10 flex-1
+          text-(length:--sp-text-sm) h-10 flex-1 px-(--sp-space-2)
           hover:bg-(--sp-color-muted) cursor-pointer
           aria-selected:bg-(--sp-color-primary)
           aria-selected:text-(--sp-color-primary-fg)
           aria-selected:hover:bg-(--sp-color-primary)/90
-          aria-disabled:pointer-events-none aria-disabled:text-(--sp-color-disabled-fg)
           aria-[current=year]:font-bold
+          aria-[disabled=true]:text-(--sp-color-muted-fg)
+          aria-[disabled=true]:opacity-40
+          aria-[disabled=true]:pointer-events-none
+          aria-[disabled=true]:hover:bg-transparent
         ].freeze
 
         private
@@ -80,21 +91,13 @@ module StimulusPlumbers
         end
 
         def calendar_day_classes(outside: false, **)
-          {
-            classes: klasses(
-              *DAY,
-              *(outside ? %w[text-(--sp-color-disabled-fg)] : [])
-            )
-          }
+          extra = outside ? %w[text-(--sp-color-muted-fg)] : []
+          { classes: klasses(*DAY, *extra) }
         end
 
-        def calendar_month_classes(**)
-          { classes: klasses(*MONTH) }
-        end
+        def calendar_month_classes(**) = { classes: klasses(*MONTH) }
 
-        def calendar_year_classes(**)
-          { classes: klasses(*YEAR) }
-        end
+        def calendar_year_classes(**)  = { classes: klasses(*YEAR) }
 
         def calendar_quarter_grid_classes
           { classes: klasses(*QUARTER_GRID) }

data/lib/stimulus_plumbers/themes/tailwind/card.rb

@@ -5,6 +5,7 @@ module StimulusPlumbers
     module Tailwind
       module Card
         BASE = %w[
+          flex flex-col
           rounded-(--sp-radius-md) border border-(--card-ring)
           bg-(--sp-color-bg) shadow-(--sp-shadow-xs)
         ].freeze
@@ -21,7 +22,7 @@ module StimulusPlumbers
 
         HEADER_BASE = %w[
           flex items-center gap-(--sp-space-3)
-          px-(--sp-space-6) pt-(--sp-space-6)
+          px-(--sp-space-6) py-(--sp-space-6)
         ].freeze
 
         ICON_BASE = %w[
@@ -33,12 +34,10 @@ module StimulusPlumbers
         ].freeze
 
         BODY_BASE = %w[
-          px-(--sp-space-6) pt-(--sp-space-3)
+          px-(--sp-space-6) py-(--sp-space-3)
         ].freeze
 
-        ACTION_BASE = %w[
-          px-(--sp-space-6) pb-(--sp-space-6) pt-(--sp-space-4)
-        ].freeze
+        ACTION_BASE = %w[w-full justify-start].freeze
 
         private
 

data/lib/stimulus_plumbers/themes/tailwind/combobox.rb

@@ -4,8 +4,13 @@ module StimulusPlumbers
   module Themes
     module Tailwind
       module Combobox
+        # ── Container / popover ───────────────────────────────────────────────
+        CONTAINER = %w[relative].freeze
+        POPOVER   = %w[absolute top-full left-0 min-w-full].freeze
+
+        # ── Trigger ───────────────────────────────────────────────────────────
         TRIGGER = %w[
-          w-full rounded-(--sp-radius-md) border border-(--sp-color-muted-fg)
+          w-full rounded-(--sp-radius-md) border border-(--sp-color-muted-fg) hover:border-(--sp-color-fg)
           px-(--sp-space-3) py-(--sp-space-2)
           text-(length:--sp-text-sm) text-(--sp-color-fg) bg-(--sp-color-bg)
           focus:outline-none focus:ring-2 focus:ring-(--sp-focus-ring-color)
@@ -13,7 +18,7 @@ module StimulusPlumbers
 
         TRIGGER_GROUP = %w[
           flex items-center gap-(--sp-space-2) overflow-hidden
-          rounded-(--sp-radius-md) border border-(--sp-color-muted-fg) bg-(--sp-color-bg)
+          rounded-(--sp-radius-md) border border-(--sp-color-muted-fg) hover:border-(--sp-color-fg) bg-(--sp-color-bg)
           px-(--sp-space-3) py-(--sp-space-2)
           focus-within:outline-none focus-within:ring-2 focus-within:ring-(--sp-focus-ring-color)
           [&>input]:border-0 [&>input]:rounded-none
@@ -22,8 +27,9 @@ module StimulusPlumbers
           [&>input]:focus:ring-0
         ].freeze
 
+        # ── Listbox / options ─────────────────────────────────────────────────
         LISTBOX = %w[
-          py-(--sp-space-1) overflow-y-auto max-h-60
+          py-(--sp-space-1) overflow-y-auto max-h-60 min-h-(--sp-space-6)
         ].freeze
 
         OPTION_BASE = %w[
@@ -44,6 +50,7 @@ module StimulusPlumbers
 
         OPTION_GROUP = %w[py-(--sp-space-1)].freeze
 
+        # ── Typeahead states ──────────────────────────────────────────────────
         TYPEAHEAD_LOADING = %w[
           flex items-center justify-center
           py-(--sp-space-2) text-(length:--sp-text-sm) text-(--sp-color-muted-fg)
@@ -54,20 +61,15 @@ module StimulusPlumbers
           py-(--sp-space-2) text-(length:--sp-text-sm) text-(--sp-color-muted-fg)
         ].freeze
 
-        TIME = %w[flex gap-(--sp-space-2) overflow-hidden].freeze
-
-        DATE_NAV = %w[flex items-center justify-between gap-(--sp-space-1) mb-(--sp-space-2)].freeze
-
-        DATE_NAV_BTN = [
-          *Control::BASE,
-          "inline-flex items-center justify-center",
-          "size-(--sp-calendar-day-size) rounded-(--sp-radius-md)",
-          "text-(--sp-color-fg) hover:bg-(--sp-color-muted)",
-          "focus-visible:ring-(--sp-focus-ring-color)"
-        ].freeze
+        # ── Time picker ───────────────────────────────────────────────────────
+        TIME             = %w[flex gap-(--sp-space-2) overflow-hidden].freeze
+        TIME_DRUM_UNIT   = %w[flex-1 min-w-0].freeze
+        TIME_DRUM_PERIOD = %w[shrink-0].freeze
 
-        CONTAINER = %w[relative].freeze
-        POPOVER   = %w[absolute top-full left-0 min-w-full].freeze
+        # ── Date navigation ───────────────────────────────────────────────────
+        DATE_NAV       = %w[flex items-center justify-between gap-(--sp-space-1) mb-(--sp-space-2)].freeze
+        DATE_NAV_BTN   = %w[].freeze
+        DATE_NAV_TITLE = %w[flex-1 text-center].freeze
 
         private
 
@@ -110,7 +112,7 @@ module StimulusPlumbers
         end
 
         def combobox_typeahead_loading_icon_classes
-          { classes: klasses("size-(--sp-icon-size)", "animate-spin") }
+          { classes: klasses("size-(--sp-icon-size-md)", "animate-spin") }
         end
 
         def combobox_typeahead_empty_classes
@@ -121,6 +123,10 @@ module StimulusPlumbers
           { classes: klasses(*TIME) }
         end
 
+        def combobox_time_drum_classes(type: :unit)
+          { classes: klasses(*(type == :period ? TIME_DRUM_PERIOD : TIME_DRUM_UNIT)) }
+        end
+
         def combobox_date_navigation_classes
           { classes: klasses(*DATE_NAV) }
         end
@@ -128,6 +134,10 @@ module StimulusPlumbers
         def combobox_date_navigation_navigator_classes
           { classes: klasses(*DATE_NAV_BTN) }
         end
+
+        def combobox_date_navigation_title_classes
+          { classes: klasses(*DATE_NAV_TITLE) }
+        end
       end
     end
   end