stimulus_plumbers_tailwind 0.4.8 → 0.4.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f570868b6706fa7a6b460b6bf78361957e3ed8a7ed3592bca0a2587966efbafe
-  data.tar.gz: 3ec048b9fef9972184db57cb95a121408ef3269134c4351c7f97a808f523d24e
+  metadata.gz: 79b18f9be6a2f72a2b552a8f69cca0f96bc1d0d4092ed858c33f76e09c3b1e26
+  data.tar.gz: ec35944909722c5a7bbf3840573db3a51549e8afa1720f5f069951d94b146771
 SHA512:
-  metadata.gz: 822d92416d88670f4c77c802cc87bd9c16b89cd17007f14a76d122cdcd9cbe7eb8224bf10ac6fbdb8d3f5c09abd9bec627633b78e43b880b5fcbd0ddcea16422
-  data.tar.gz: 1dda3a7595075605a20dd5739d42e39a74b1a0c3535e8c7af33ba7f85ddb2b603914b13da493ad7bd4605502e4afd0ae22eff30824eb736bbbe06c075bae314b
+  metadata.gz: a35c48c1e604efc1f04581c6975f66199664c92f07e51050c492bcd4683dacd89fe16ff516ae84dca4bde164d34441923c5e42b4597f3f27fd64a4b056b07161
+  data.tar.gz: 0b65ffab71d672cdd08f6ed69794fe932840838a55c4f76acdf197ae3a6822a2938bbc7b58d558033bf562da6d4f76669e5a81ffddff3bc125945187929bcbca

data/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines.
 
+---
+## [0.4.9](https://github.com/ryancyq/stimulus-plumbers/compare/stimulus-plumbers-tailwind/v0.4.8..stimulus-plumbers-tailwind/v0.4.9) - 2026-07-18
+
+### Bug Fixes
+
+- css source + token in generator ([#163](https://github.com/ryancyq/stimulus-plumbers/issues/163)) - ([69165f5](https://github.com/ryancyq/stimulus-plumbers/commit/69165f523242e27cae5075f635c7e66c40a862ab)) - Ryan Chang
+
+### Documentation
+
+- update missing documentation ([#164](https://github.com/ryancyq/stimulus-plumbers/issues/164)) - ([edcd79d](https://github.com/ryancyq/stimulus-plumbers/commit/edcd79df3dd1739521641274863a50a32b5fcb36)) - Ryan Chang
+- align code example/instructions in doc and remove stale reference ([#167](https://github.com/ryancyq/stimulus-plumbers/issues/167)) - ([b1ace4d](https://github.com/ryancyq/stimulus-plumbers/commit/b1ace4da5117b70f4f22403f727655c1586606e1)) - Ryan Chang
+- update component documentation ([#173](https://github.com/ryancyq/stimulus-plumbers/issues/173)) - ([27240bc](https://github.com/ryancyq/stimulus-plumbers/commit/27240bc85265b249adba5186fd34b9c26423daa3)) - Ryan Chang
+
+### Features
+
+- ordered list ([#166](https://github.com/ryancyq/stimulus-plumbers/issues/166)) - ([cda05b5](https://github.com/ryancyq/stimulus-plumbers/commit/cda05b589e2f99ba992785fdb672b0ecef026046)) - Ryan Chang
+- progress ring/bar/meter ([#170](https://github.com/ryancyq/stimulus-plumbers/issues/170)) - ([b43087c](https://github.com/ryancyq/stimulus-plumbers/commit/b43087cec2b40fd8b3dced65215afdbbdfc2c435)) - Ryan Chang
+- status indicator ([#171](https://github.com/ryancyq/stimulus-plumbers/issues/171)) - ([ad3f330](https://github.com/ryancyq/stimulus-plumbers/commit/ad3f330bc8d999b4977f8aeaafc8c4763229a448)) - Ryan Chang
+- horizontal grouped timeline ([#172](https://github.com/ryancyq/stimulus-plumbers/issues/172)) - ([fe9b9ab](https://github.com/ryancyq/stimulus-plumbers/commit/fe9b9abfb8c3c211fe9a7282d2940326678328dc)) - Ryan Chang
+- checklist ([#174](https://github.com/ryancyq/stimulus-plumbers/issues/174)) - ([35dca2a](https://github.com/ryancyq/stimulus-plumbers/commit/35dca2af29955f6f2c85fffc4efc39711ed5bb99)) - Ryan Chang
+
+---
+## [0.4.8](https://github.com/ryancyq/stimulus-plumbers/compare/stimulus-plumbers-tailwind/v0.4.5..stimulus-plumbers-tailwind/v0.4.8) - 2026-07-03
+
+### Bug Fixes
+
+- tailwind install generator ([#154](https://github.com/ryancyq/stimulus-plumbers/issues/154)) - ([db4bda0](https://github.com/ryancyq/stimulus-plumbers/commit/db4bda0b899a463e0608229927c65326233dd3a4)) - Ryan Chang
+- tailwind theme registration + activation (rails only) ([#157](https://github.com/ryancyq/stimulus-plumbers/issues/157)) - ([5998854](https://github.com/ryancyq/stimulus-plumbers/commit/5998854ed2a6ca9c67aa225f3c397e4f7bca7a51)) - Ryan Chang
+- mcp doc update + new tools validations ([#162](https://github.com/ryancyq/stimulus-plumbers/issues/162)) - ([beed1bb](https://github.com/ryancyq/stimulus-plumbers/commit/beed1bb14cbfcb8ec6f757145dc6a461d357c060)) - Ryan Chang
+
 ---
 ## [0.4.4](https://github.com/ryancyq/stimulus-plumbers/compare/stimulus-plumbers-tailwind/v0.4.3..stimulus-plumbers-tailwind/v0.4.4) - 2026-06-30
 

data/README.md

@@ -11,7 +11,7 @@ See [docs/guide.md](docs/guide.md) for a quick setup/theming guide.
 ## Requirements
 
 - Ruby >= 3.0
-- `stimulus_plumbers` >= 0.2.9
+- `stimulus_plumbers` >= 0.3.1
 - Tailwind CSS v4 in your build toolchain
 
 ## Installation
@@ -33,21 +33,13 @@ StimulusPlumbers.configure do |config|
 end
 ```
 
-Run the install generator once to inject the required `@source` directive (and the `stimulus_plumbers` tokens.css import) into your Tailwind CSS entry file:
+Run the install generator once to copy `stimulus_plumbers/tokens.css` and `stimulus_plumbers/tailwind/animations.css` into your app, then inject their relative imports and the required `@source` directive into your Tailwind CSS entry file — see [docs/guide.md](docs/guide.md) for file-detection/override details:
 
 ```bash
 bin/rails generate stimulus_plumbers:tailwind:install
 ```
 
-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:
+After that, the `@source` path is kept current automatically — no manual re-run needed after `bundle update`. The copied CSS remains application-owned and is never overwritten; update it intentionally when adopting new defaults. 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)
@@ -71,9 +63,12 @@ bin/rails stimulus_plumbers:tailwind:install
 | `Tailwind::Combobox` | Combobox (date, time, dropdown, typeahead) |
 | `Tailwind::Form` | Form fields, labels, errors |
 | `Tailwind::Icon` | Icon (SVG rendering, icon registry) |
+| `Tailwind::Indicator` | Indicator (dot, pulse, badge) |
 | `Tailwind::Layout` | Layout primitives |
 | `Tailwind::Link` | Link |
 | `Tailwind::List` | List |
+| `Tailwind::OrderedList` | Reorderable list (drag handle, item styling) |
+| `Tailwind::Progress` | Progress bar, progress ring, meter |
 | `Tailwind::Timeline` | Timeline |
 
 Custom themes can subclass `TailwindTheme` to override individual methods, or subclass `StimulusPlumbers::Themes::Base` directly.
@@ -94,7 +89,7 @@ Icons render as inline `<svg>` with `size-6` by default. Override with `class:`:
 <%= sp_icon "arrow-left", class: "size-4 text-gray-500" %>
 ```
 
-**Built-in aliases:** `"close"` → `"x-mark"`, `"calendar"` → `"calendar-days"`.
+**Built-in aliases:** `"close"` → `"x-mark"`, `"download"` → `"arrow-down-tray"`, `"book"` → `"book-open"`, `"edit"` → `"pencil"`, `"email"` → `"envelope"`, `"calendar"` → `"calendar-days"`, `"external-link"` → `"arrow-top-right-on-square"`, `"reveal"` → `"eye"`, `"grip-vertical"` → `"bars-3"`.
 
 **Optional `heroicons` gem:** add `gem "heroicons"` to your `Gemfile` to load icons from the gem instead of the bundled files. The theme detects it automatically.
 

data/app/assets/stylesheets/stimulus_plumbers/tailwind/animations.css

@@ -0,0 +1,18 @@
+@theme {
+  --animate-progress-slide: sp-progress-slide 1.5s ease-in-out infinite;
+}
+
+@keyframes sp-progress-slide {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(300%); }
+}
+
+/* Ring-only; core's transition covers width, not stroke-dashoffset. */
+[data-progress-target="fill"] {
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+/* Track color — kept out of the SVG so consumers can retheme it via CSS. */
+svg[role="progressbar"] .track {
+  stroke: var(--sp-color-muted);
+}

data/docs/guide.md

@@ -3,16 +3,27 @@
 Adding this gem registers and activates the Tailwind theme automatically in Rails — no config
 needed. Outside Rails, activate it explicitly with `config.theme.use(:tailwind)`.
 
-Run the install generator once to wire the required `@source` directive into your Tailwind CSS
-entry file:
+Run the install generator once to wire the required CSS imports and `@source` directive into your
+Tailwind CSS entry file:
 
 ```bash
 bin/rails generate stimulus_plumbers:tailwind:install
 ```
 
-It re-runs automatically on `assets:precompile`/`tailwindcss:build` after that — see
-[README.md](../README.md#installation) for file-detection order and the `TAILWIND_CSS_FILE`
-override.
+It re-runs automatically on `assets:precompile`/`tailwindcss:build` after that. File detection and
+the `STIMULUS_PLUMBERS_CSS_ENTRY` override are shared with the core gem — see
+[stimulus-plumbers-rails/docs/guide.md#css-entry-file-detection](../../stimulus-plumbers-rails/docs/guide.md#css-entry-file-detection).
+
+## Installed CSS files
+
+The Tailwind installer copies these files into the application and imports them relatively:
+
+- `app/assets/stylesheets/stimulus_plumbers/tokens.css`
+- `app/assets/stylesheets/stimulus_plumbers/tailwind/animations.css` — registers the indeterminate progress bar slide keyframe.
+
+Both files are application-owned: later generator runs restore a missing copy but never overwrite
+an existing one. Legacy imports that point into gem directories are migrated to these app-local
+paths.
 
 Icons: pass a kebab-case name to `sp_icon` or any `icon_leading:`/`icon_trailing:` option (append
 `/solid` for the filled variant) — see [README.md](../README.md#icons) for aliases and the

data/lib/generators/stimulus_plumbers/tailwind/install/install_generator.rb

@@ -3,6 +3,8 @@
 require "rails/generators"
 require "stimulus_plumbers/generators/css_entrypoint"
 require "stimulus_plumbers/generators/tokens_directive"
+require "stimulus_plumbers/tailwind/generators/animations_directive"
+require "stimulus_plumbers/tailwind/generators/sources_directive"
 
 module StimulusPlumbers
   module Tailwind
@@ -10,52 +12,66 @@ module StimulusPlumbers
       class InstallGenerator < Rails::Generators::Base
         include StimulusPlumbers::Generators::CssEntrypoint
 
-        GEM_NAME          = "stimulus_plumbers_tailwind"
-        LIB_DIR           = File.expand_path("../../../..", __dir__)
-        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
+        TOKENS_CSS_SOURCE = File.join(
+          Gem.loaded_specs.fetch("stimulus_plumbers").gem_dir,
+          StimulusPlumbers::Generators::TokensDirective::TOKENS_CSS_PATH
+        )
+        ANIMATIONS_CSS_SOURCE = File.join(
+          File.expand_path("../../../../../", __dir__),
+          AnimationsDirective::ANIMATIONS_CSS_PATH
+        )
 
         def install
           css_file = entry_css_file(**css_file_lookup_options)
           return warn_entry_css_not_found(label: "Tailwind CSS", **css_file_lookup_options) unless css_file
+          return unless copy_assets
 
-          apply_edit(
-            css_file,
-            StimulusPlumbers::Generators::TokensDirective.directive,
-            stale_pattern: StimulusPlumbers::Generators::TokensDirective.stale_pattern
-          )
-          apply_edit(
-            css_file,
-            source_directive,
-            anchor_pattern: source_anchor_pattern,
-            stale_pattern:  source_stale_pattern
-          )
+          apply_tokens_directive(css_file)
+          apply_animations_directive(css_file)
+          apply_sources_directive(css_file)
         end
 
         private
 
         def css_file_lookup_options
           {
-            candidates:       CSS_CANDIDATES,
-            env_var:          TAILWIND_CSS_FILE,
-            fallback_env_var: StimulusPlumbers::Generators::CssEntrypoint::STIMULUS_PLUMBERS_CSS_FILE
+            candidates: StimulusPlumbers::Generators::CssEntrypoint::ENTRY_CANDIDATES,
+            env_var:    StimulusPlumbers::Generators::CssEntrypoint::STIMULUS_PLUMBERS_CSS_ENTRY
           }
         end
 
-        def source_directive
-          %(@source "#{LIB_DIR}/**/*.rb";)
+        def apply_tokens_directive(css_file)
+          apply_edit(
+            css_file,
+            StimulusPlumbers::Generators::TokensDirective.directive(
+              from:             File.dirname(css_file),
+              destination_root: destination_root
+            ),
+            stale_pattern: StimulusPlumbers::Generators::TokensDirective.stale_pattern
+          )
         end
 
-        def source_anchor_pattern
-          %r{@import "tailwindcss"[^;]*;}
+        def apply_animations_directive(css_file)
+          apply_edit(
+            css_file,
+            AnimationsDirective.directive(from: File.dirname(css_file), destination_root: destination_root),
+            anchor_pattern: AnimationsDirective.anchor_pattern,
+            stale_pattern:  AnimationsDirective.stale_pattern
+          )
         end
 
-        def source_stale_pattern
-          %r{@source "[^"]*#{Regexp.escape(GEM_NAME)}[^"]*";}
+        def copy_assets
+          copy_asset(TOKENS_CSS_SOURCE, StimulusPlumbers::Generators::TokensDirective::TOKENS_CSS_PATH) &&
+            copy_asset(ANIMATIONS_CSS_SOURCE, AnimationsDirective::ANIMATIONS_CSS_PATH)
+        end
+
+        def apply_sources_directive(css_file)
+          apply_edit(
+            css_file,
+            SourcesDirective.directive(from: File.dirname(css_file)),
+            anchor_pattern: SourcesDirective.anchor_pattern,
+            stale_pattern:  SourcesDirective.stale_pattern
+          )
         end
       end
     end

data/lib/stimulus_plumbers/tailwind/generators/animations_directive.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require "pathname"
+
+module StimulusPlumbers
+  module Tailwind
+    module Generators
+      module AnimationsDirective
+        ANIMATIONS_CSS_PATH = "app/assets/stylesheets/stimulus_plumbers/tailwind/animations.css"
+
+        module_function
+
+        def directive(from:, destination_root:)
+          path = Pathname.new(destination_root).join(ANIMATIONS_CSS_PATH)
+          rel  = path.relative_path_from(Pathname.new(from))
+          rel  = "./#{rel}" unless rel.to_s.start_with?(".", "/")
+          %(@import "#{rel}";)
+        end
+
+        # Anchors right after the core tokens.css import so the two asset
+        # imports stay grouped, ahead of the tailwindcss import and @source lines.
+        def anchor_pattern
+          %r{@import "[^"]*tokens\.css";}
+        end
+
+        def stale_pattern
+          %r{@import "[^"]*#{Regexp.escape(ANIMATIONS_CSS_PATH)}";}
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/tailwind/generators/sources_directive.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+require "pathname"
+
+module StimulusPlumbers
+  module Tailwind
+    module Generators
+      module SourcesDirective
+        GEM_NAME = "stimulus_plumbers_tailwind"
+        LIB_DIR  = File.expand_path("../../..", __dir__)
+
+        module_function
+
+        def directive(from:)
+          rel = Pathname.new(LIB_DIR).relative_path_from(Pathname.new(from))
+          %(@source "#{rel}/**/*.rb";)
+        end
+
+        def anchor_pattern
+          %r{@import "tailwindcss"[^;]*;}
+        end
+
+        def stale_pattern
+          %r{@source "[^"]*#{Regexp.escape(GEM_NAME)}[^"]*";}
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/tailwind/version.rb

@@ -2,6 +2,6 @@
 
 module StimulusPlumbers
   module Tailwind
-    VERSION = "0.4.8"
+    VERSION = "0.4.10"
   end
 end

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

@@ -147,7 +147,7 @@ module StimulusPlumbers
         end
 
         def button_icon_classes
-          { classes: klasses("size-(--sp-icon-size-sm)", "stroke-current") }
+          { classes: klasses("stroke-current") }
         end
       end
     end

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

@@ -20,24 +20,24 @@ module StimulusPlumbers
           info:        %w[[--card-ring:var(--sp-color-info)]].freeze
         }.freeze
 
-        HEADER_BASE = %w[
+        HEADER = %w[
           flex items-center gap-(--sp-space-3)
           px-(--sp-space-6) py-(--sp-space-6)
         ].freeze
 
-        ICON_BASE = %w[
-          size-(--sp-space-6) shrink-0 stroke-current text-(--sp-color-muted-fg)
+        ICON = %w[
+          shrink-0 stroke-current text-(--sp-color-muted-fg)
         ].freeze
 
-        TITLE_BASE = %w[
+        TITLE = %w[
           text-(length:--sp-text-base) font-semibold text-(--sp-color-fg)
         ].freeze
 
-        BODY_BASE = %w[
+        BODY = %w[
           px-(--sp-space-6) py-(--sp-space-3)
         ].freeze
 
-        ACTION_BASE = %w[w-full justify-start].freeze
+        ACTION = %w[w-full justify-start].freeze
 
         private
 
@@ -45,11 +45,11 @@ module StimulusPlumbers
           { classes: klasses(*VARIANTS.fetch(variant, VARIANTS[:tertiary]), *BASE) }
         end
 
-        def card_header_classes  = { classes: klasses(*HEADER_BASE) }
-        def card_icon_classes    = { classes: klasses(*ICON_BASE) }
-        def card_title_classes   = { classes: klasses(*TITLE_BASE) }
-        def card_body_classes    = { classes: klasses(*BODY_BASE) }
-        def card_action_classes  = { classes: klasses(*ACTION_BASE) }
+        def card_header_classes  = { classes: klasses(*HEADER) }
+        def card_icon_classes    = { classes: klasses(*ICON) }
+        def card_title_classes   = { classes: klasses(*TITLE) }
+        def card_body_classes    = { classes: klasses(*BODY) }
+        def card_action_classes  = { classes: klasses(*ACTION) }
       end
     end
   end

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

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Checklist
+        CHECKLIST = %w[flex flex-col gap-(--sp-space-1)].freeze
+
+        ITEM = [
+          *Control::BASE,
+          "group/checklist-item flex items-center gap-(--sp-space-2) w-full text-start",
+          "px-(--sp-space-2) py-(--sp-space-1)",
+          "rounded-(--sp-radius-sm) text-(length:--sp-text-sm)",
+          "cursor-pointer select-none text-(--sp-color-fg)",
+          "hover:bg-(--sp-color-muted)",
+          "has-disabled:cursor-default has-disabled:hover:bg-transparent"
+        ].freeze
+
+        INPUT = [
+          *Control::ACCENT,
+          "size-(--sp-control-size) rounded-(--sp-radius-sm) shrink-0",
+          "border border-(--sp-color-border) bg-(--sp-color-muted)",
+          "focus:ring-(length:--sp-focus-ring-width) focus:ring-(--sp-focus-ring-color) focus:outline-none",
+          "disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+        ].freeze
+
+        CONTENT = %w[flex flex-col flex-1 min-w-0].freeze
+
+        TITLE = %w[
+          text-(length:--sp-text-sm) font-medium text-(--sp-color-fg)
+          group-has-checked/checklist-item:line-through
+          group-has-checked/checklist-item:text-(--sp-color-muted-fg)
+        ].freeze
+
+        DESCRIPTION = %w[text-(length:--sp-text-xs) text-(--sp-color-muted-fg)].freeze
+
+        private
+
+        def checklist_classes
+          { classes: klasses(*CHECKLIST) }
+        end
+
+        def checklist_item_classes
+          { classes: klasses(*ITEM) }
+        end
+
+        def checklist_item_input_classes
+          { classes: klasses(*INPUT) }
+        end
+
+        def checklist_item_content_classes
+          { classes: klasses(*CONTENT) }
+        end
+
+        def checklist_item_title_classes
+          { classes: klasses(*TITLE) }
+        end
+
+        def checklist_item_description_classes
+          { classes: klasses(*DESCRIPTION) }
+        end
+      end
+    end
+  end
+end

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

@@ -32,7 +32,7 @@ module StimulusPlumbers
           py-(--sp-space-1) overflow-y-auto max-h-60 min-h-(--sp-space-6)
         ].freeze
 
-        OPTION_BASE = %w[
+        OPTION = %w[
           flex items-center gap-(--sp-space-2) w-full
           px-(--sp-space-2) py-(--sp-space-1)
           rounded-(--sp-radius-sm) text-(length:--sp-text-sm)
@@ -96,7 +96,7 @@ module StimulusPlumbers
         def combobox_option_classes(selected: false, disabled: false)
           {
             classes: klasses(
-              *OPTION_BASE,
+              *OPTION,
               *(selected ? OPTION_SELECTED : []),
               *(disabled ? OPTION_DISABLED : [])
             )
@@ -112,7 +112,7 @@ module StimulusPlumbers
         end
 
         def combobox_typeahead_loading_icon_classes
-          { classes: klasses("size-(--sp-icon-size-md)", "animate-spin") }
+          { classes: klasses("animate-spin") }
         end
 
         def combobox_typeahead_empty_classes

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

@@ -11,6 +11,8 @@ module StimulusPlumbers
           focus-visible:ring-offset-(length:--sp-focus-ring-offset)
           disabled:pointer-events-none disabled:opacity-50
         ].freeze
+
+        ACCENT = %w[[accent-color:var(--sp-color-primary)] cursor-pointer].freeze
       end
     end
   end

data/lib/stimulus_plumbers/themes/tailwind/form/code.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Form
+        module Code
+          FIELD = %w[
+            relative inline-flex w-fit rounded-(--sp-radius-md)
+            focus-within:ring-(length:--sp-focus-ring-width) focus-within:ring-(--sp-focus-ring-color)
+            focus-within:ring-offset-(length:--sp-focus-ring-offset)
+          ].freeze
+          FIELD_ERROR = %w[focus-within:ring-(--sp-color-error)].freeze
+          CELLS = %w[flex items-center gap-(--sp-space-1)].freeze
+          CELL = %w[
+            flex size-10 items-center justify-center rounded-(--sp-radius-md) border
+            border-(--sp-color-muted-fg) bg-(--sp-color-bg)
+            text-(length:--sp-text-lg) font-medium text-(--sp-color-fg)
+            transition-colors
+            data-[filled]:border-(--sp-color-fg)
+            data-[caret]:border-(--sp-color-primary) data-[caret]:ring-1 data-[caret]:ring-(--sp-color-primary)
+            data-[group-end]:me-(--sp-space-2)
+          ].freeze
+          CELL_ERROR = %w[border-(--sp-color-error) data-[caret]:ring-(--sp-color-error)].freeze
+          OVERLAY = %w[absolute inset-0 size-full cursor-text opacity-0 disabled:cursor-not-allowed].freeze
+
+          private
+
+          def form_field_input_code_classes(error: false) = { classes: klasses(*FIELD, *(error ? FIELD_ERROR : [])) }
+          def form_field_input_code_cells_classes = { classes: klasses(*CELLS) }
+          def form_field_input_code_cell_classes(error: false) = { classes: klasses(*CELL, *(error ? CELL_ERROR : [])) }
+          def form_field_input_code_overlay_classes(**) = { classes: klasses(*OVERLAY) }
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/themes/tailwind/form/credit_card.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Form
+        module CreditCard
+          FIELD = %w[
+            relative inline-flex w-fit rounded-(--sp-radius-md)
+            focus-within:ring-(length:--sp-focus-ring-width) focus-within:ring-(--sp-focus-ring-color)
+            focus-within:ring-offset-(length:--sp-focus-ring-offset)
+          ].freeze
+          FIELD_ERROR = %w[focus-within:ring-(--sp-color-error)].freeze
+          CELLS = %w[flex items-center gap-(--sp-space-1)].freeze
+          CELL = %w[
+            flex h-10 min-w-16 items-center justify-center px-(--sp-space-2)
+            rounded-(--sp-radius-md) border
+            border-(--sp-color-muted-fg) bg-(--sp-color-bg)
+            text-(length:--sp-text-lg) font-medium text-(--sp-color-fg)
+            transition-colors
+            data-[filled]:border-(--sp-color-fg)
+            data-[caret]:border-(--sp-color-primary) data-[caret]:ring-1 data-[caret]:ring-(--sp-color-primary)
+          ].freeze
+          CELL_ERROR = %w[border-(--sp-color-error) data-[caret]:ring-(--sp-color-error)].freeze
+          SEPARATOR = %w[text-(--sp-color-muted-fg)].freeze
+          OVERLAY = %w[absolute inset-0 size-full cursor-text opacity-0 disabled:cursor-not-allowed].freeze
+
+          private
+
+          def form_field_input_credit_card_classes(error: false) = { classes: klasses(*FIELD, *(error ? FIELD_ERROR : [])) }
+          def form_field_input_credit_card_cells_classes = { classes: klasses(*CELLS) }
+          def form_field_input_credit_card_cell_classes(error: false) = { classes: klasses(*CELL, *(error ? CELL_ERROR : [])) }
+          def form_field_input_credit_card_separator_classes = { classes: klasses(*SEPARATOR) }
+          def form_field_input_credit_card_overlay_classes(**) = { classes: klasses(*OVERLAY) }
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/themes/tailwind/form/field.rb

@@ -16,7 +16,7 @@ module StimulusPlumbers
             standard: %w[relative z-0].freeze
           }.freeze
 
-          FLOATING_LABEL_BASE = %w[
+          FLOATING_LABEL = %w[
             absolute text-(length:--sp-text-sm) text-(--sp-color-muted-fg)
             duration-300 transform origin-[0]
           ].freeze
@@ -117,7 +117,7 @@ module StimulusPlumbers
           def form_field_label_classes(floating: nil, hidden: false, error: false, **)
             if floating
               color = error ? FLOATING_LABEL_ERROR : FLOATING_LABEL_FOCUS
-              { classes: klasses(*FLOATING_LABEL_BASE, *FLOATING_LABEL_TYPES.fetch(floating, []), *color) }
+              { classes: klasses(*FLOATING_LABEL, *FLOATING_LABEL_TYPES.fetch(floating, []), *color) }
             else
               { classes: klasses(*LABEL, hidden ? "sr-only" : nil) }
             end

data/lib/stimulus_plumbers/themes/tailwind/form/input.rb

@@ -6,7 +6,7 @@ module StimulusPlumbers
       module Form
         module Input
           # ── Standalone input ──────────────────────────────────────────────────
-          INPUT_BASE = %w[
+          INPUT = %w[
             w-full rounded-(--sp-radius-md) border 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-(length:--sp-focus-ring-width) focus:ring-offset-0
@@ -18,7 +18,7 @@ module StimulusPlumbers
           INPUT_ERROR = %w[border-(--sp-color-error) focus:ring-(--sp-color-error)].freeze
 
           # ── Floating input ────────────────────────────────────────────────────
-          FLOATING_INPUT_BASE = %w[
+          FLOATING_INPUT = %w[
             peer w-full text-(length:--sp-text-sm) text-(--sp-color-fg) appearance-none
             focus:outline-none focus:ring-0
             focus-visible:outline-none focus-visible:ring-0
@@ -44,11 +44,11 @@ module StimulusPlumbers
           FLOATING_INPUT_ERROR = %w[border-(--sp-color-error)].freeze
 
           # ── Input group ───────────────────────────────────────────────────────
-          INPUT_GROUP_BASE   = %w[flex items-center overflow-hidden rounded-(--sp-radius-md) border].freeze
+          INPUT_GROUP        = %w[flex items-center overflow-hidden rounded-(--sp-radius-md) border].freeze
           INPUT_GROUP_BORDER = { error: "border-(--sp-color-error)", default: "border-(--sp-color-muted-fg)" }.freeze
 
           # ── Floating input group ──────────────────────────────────────────────
-          FLOATING_INPUT_GROUP_BASE = %w[flex items-center overflow-hidden peer].freeze
+          FLOATING_INPUT_GROUP = %w[flex items-center overflow-hidden peer].freeze
           FLOATING_INPUT_GROUP_TYPES = {
             filled:   %w[rounded-t-(--sp-radius-md) bg-(--sp-color-bg-muted) border-0 border-b-2].freeze,
             outlined: %w[rounded-(--sp-radius-md) border].freeze,
@@ -80,21 +80,24 @@ module StimulusPlumbers
 
           # ── Choice inputs ─────────────────────────────────────────────────────
           CHECKBOX_TYPES = {
-            default: %w[
-              size-(--sp-control-size) rounded-(--sp-radius-sm) shrink-0
-              border border-(--sp-color-border) bg-(--sp-color-muted)
-              focus:ring-(length:--sp-focus-ring-width) focus:ring-(--sp-focus-ring-color) focus:outline-none
-              disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer
+            default: [
+              *Control::ACCENT,
+              "size-(--sp-control-size) rounded-(--sp-radius-sm) shrink-0",
+              "border border-(--sp-color-border) bg-(--sp-color-muted)",
+              "focus:ring-(length:--sp-focus-ring-width) focus:ring-(--sp-focus-ring-color) focus:outline-none",
+              "disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
             ].freeze,
-            button:  %w[
-              size-(--sp-control-size) rounded-(--sp-radius-sm) shrink-0
-              border border-(--sp-color-border) bg-(--sp-color-muted)
-              focus:ring-(length:--sp-focus-ring-width) focus:ring-(--sp-focus-ring-color) focus:outline-none
-              disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer
+            button:  [
+              *Control::ACCENT,
+              "size-(--sp-control-size) rounded-(--sp-radius-sm) shrink-0",
+              "border border-(--sp-color-border) bg-(--sp-color-muted)",
+              "focus:ring-(length:--sp-focus-ring-width) focus:ring-(--sp-focus-ring-color) focus:outline-none",
+              "disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
             ].freeze,
             card:    %w[
               size-(--sp-control-size) rounded-(--sp-radius-sm) shrink-0
               border border-(--sp-color-border) bg-(--sp-color-muted)
+              [accent-color:var(--card-ring)] cursor-pointer
               checked:border-(--card-ring)
               focus:ring-(length:--sp-focus-ring-width) focus:ring-(--card-ring) focus:outline-none
               disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer
@@ -102,11 +105,11 @@ module StimulusPlumbers
           }.freeze
 
           RADIO_TYPES = {
-            default: %w[
-              size-(--sp-control-size) rounded-full shrink-0
-              [accent-color:var(--sp-color-primary)] cursor-pointer
-              focus:ring-(length:--sp-focus-ring-width) focus:ring-(--sp-focus-ring-color) focus:outline-none
-              disabled:opacity-50 disabled:cursor-not-allowed
+            default: [
+              *Control::ACCENT,
+              "size-(--sp-control-size) rounded-full shrink-0",
+              "focus:ring-(length:--sp-focus-ring-width) focus:ring-(--sp-focus-ring-color) focus:outline-none",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
             ].freeze,
             button:  %w[hidden].freeze,
             card:    %w[hidden].freeze
@@ -133,13 +136,13 @@ module StimulusPlumbers
           def form_field_input_classes(floating: nil, error: false)
             if floating
               { classes: klasses(
-                *FLOATING_INPUT_BASE,
+                *FLOATING_INPUT,
                 *FLOATING_INPUT_TYPES.fetch(floating, []),
                 *(error ? FLOATING_INPUT_ERROR : FLOATING_INPUT_DEFAULT)
               )
 }
             else
-              { classes: klasses(*INPUT_BASE, *(error ? INPUT_ERROR : INPUT_DEFAULT)) }
+              { classes: klasses(*INPUT, *(error ? INPUT_ERROR : INPUT_DEFAULT)) }
             end
           end
 
@@ -168,9 +171,9 @@ module StimulusPlumbers
           def input_group_classes(error: false, floating: nil)
             if floating
               color = error ? FLOATING_INPUT_GROUP_ERROR : FLOATING_INPUT_GROUP_DEFAULT
-              { classes: klasses(*FLOATING_INPUT_GROUP_BASE, *FLOATING_INPUT_GROUP_TYPES.fetch(floating, []), *color) }
+              { classes: klasses(*FLOATING_INPUT_GROUP, *FLOATING_INPUT_GROUP_TYPES.fetch(floating, []), *color) }
             else
-              { classes: klasses(*INPUT_GROUP_BASE, INPUT_GROUP_BORDER[error ? :error : :default]) }
+              { classes: klasses(*INPUT_GROUP, INPUT_GROUP_BORDER[error ? :error : :default]) }
             end
           end
 
@@ -180,7 +183,7 @@ module StimulusPlumbers
             else
               {
                 classes: klasses(
-                  *INPUT_BASE,
+                  *INPUT,
                   *(error ? INPUT_ERROR : INPUT_DEFAULT),
                   *COMBOBOX_INPUT,
                   *COMBOBOX_TRIGGER_GROUP
@@ -192,7 +195,7 @@ module StimulusPlumbers
           def form_field_input_combobox_floating_classes(floating: :standard, error: false)
             {
               classes: klasses(
-                *FLOATING_INPUT_BASE,
+                *FLOATING_INPUT,
                 *FLOATING_INPUT_TYPES.fetch(floating, []),
                 *(error ? FLOATING_INPUT_ERROR : FLOATING_INPUT_DEFAULT),
                 *COMBOBOX_INPUT,

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

@@ -4,13 +4,13 @@ module StimulusPlumbers
   module Themes
     module Tailwind
       module Form
-        GROUP_BASE   = %w[flex gap-(--sp-space-1) mb-(--sp-space-3)].freeze
+        GROUP        = %w[flex gap-(--sp-space-1) mb-(--sp-space-3)].freeze
         GROUP_INLINE = %w[flex-row items-center].freeze
 
         private
 
         def form_group_classes(layout: :stacked, **_rest)
-          { classes: klasses(*GROUP_BASE, layout == :inline ? GROUP_INLINE : "flex-col") }
+          { classes: klasses(*GROUP, layout == :inline ? GROUP_INLINE : "flex-col") }
         end
 
         def form_submit_classes(**) = {}

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

@@ -16,7 +16,8 @@ module StimulusPlumbers
           "email"         => "envelope",
           "calendar"      => "calendar-days",
           "external-link" => "arrow-top-right-on-square",
-          "reveal"        => "eye"
+          "reveal"        => "eye",
+          "grip-vertical" => "bars-3"
         }.freeze
 
         ICONS = StimulusPlumbers::Themes::Icons::Registry.new(
@@ -24,14 +25,20 @@ module StimulusPlumbers
           aliases: ALIASES
         )
 
+        SIZES = {
+          sm: "size-(--sp-icon-size-sm)",
+          md: "size-(--sp-icon-size-md)",
+          lg: "size-(--sp-icon-size-lg)"
+        }.freeze
+
         def icons
           ICONS
         end
 
         private
 
-        def icon_classes
-          { classes: "size-(--sp-icon-size-lg)" }
+        def icon_classes(size: :lg)
+          { classes: SIZES.fetch(size, SIZES[:lg]) }
         end
       end
     end

data/lib/stimulus_plumbers/themes/tailwind/icons/customs/progress-ring.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="44" height="44" fill="none">
+  <circle cx="22" cy="22" r="18" stroke-width="3" class="track"></circle>
+  <circle
+    cx="22"
+    cy="22"
+    r="18"
+    stroke="currentColor"
+    stroke-width="3"
+    stroke-linecap="round"
+    data-progress-target="fill"
+  ></circle>
+</svg>

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

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Indicator
+        VARIANTS = {
+          primary:     "bg-(--sp-color-primary)",
+          secondary:   "bg-(--sp-color-secondary)",
+          tertiary:    "bg-(--sp-color-muted-fg)",
+          success:     "bg-(--sp-color-success)",
+          destructive: "bg-(--sp-color-destructive)",
+          warning:     "bg-(--sp-color-warning)",
+          info:        "bg-(--sp-color-info)"
+        }.freeze
+
+        DOT   = %w[inline-flex size-2.5 rounded-full].freeze
+        BADGE = %w[
+          inline-flex items-center justify-center
+          min-w-5 h-5 px-1
+          rounded-full text-(length:--sp-text-xs) font-medium text-white
+        ].freeze
+
+        # Establishes the positioning context the pulse ring overlays onto — no margin needed.
+        WRAPPER = %w[relative inline-flex items-center justify-center].freeze
+
+        PULSE_RING = %w[
+          absolute inset-0 rounded-full
+          bg-(--sp-color-indicator) opacity-75
+          animate-ping motion-reduce:animate-none
+        ].freeze
+
+        private
+
+        def indicator_classes(type: :dot, variant: nil)
+          { classes: klasses(*(type.to_sym == :badge ? BADGE : DOT), VARIANTS.fetch(variant, nil)) }
+        end
+
+        def indicator_wrapper_classes
+          { classes: klasses(*WRAPPER) }
+        end
+
+        def indicator_pulse_classes
+          { classes: klasses(*PULSE_RING) }
+        end
+      end
+    end
+  end
+end

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

@@ -79,7 +79,7 @@ module StimulusPlumbers
         end
 
         def link_icon_classes
-          { classes: klasses("size-(--sp-icon-size-sm)", "stroke-current") }
+          { classes: klasses("stroke-current") }
         end
       end
     end

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

@@ -5,19 +5,19 @@ module StimulusPlumbers
     module Tailwind
       module List
         # ── Section ───────────────────────────────────────────────────────────
-        SECTION_TITLE_BASE = %w[
+        SECTION_TITLE = %w[
           block px-(--sp-space-2) pb-(--sp-space-1)
           text-(length:--sp-text-xs) font-semibold uppercase tracking-wider
           text-(--sp-color-muted-fg)
         ].freeze
 
-        SECTION_DESCRIPTION_BASE = %w[
+        SECTION_DESCRIPTION = %w[
           block px-(--sp-space-2) pb-(--sp-space-1)
           text-(length:--sp-text-xs) text-(--sp-color-muted-fg)
         ].freeze
 
         # ── Item ──────────────────────────────────────────────────────────────
-        ITEM_BASE = [
+        ITEM = [
           *Control::BASE,
           "flex items-center gap-(--sp-space-2) w-full",
           "px-(--sp-space-2) py-(--sp-space-1)",
@@ -29,15 +29,15 @@ module StimulusPlumbers
           "aria-[current]:bg-(--sp-color-primary)/10 aria-[current]:text-(--sp-color-primary)"
         ].freeze
 
-        ITEM_CONTENT_BASE = %w[
+        ITEM_CONTENT = %w[
           flex flex-col flex-1 min-w-0
         ].freeze
 
-        ITEM_TITLE_BASE = %w[
+        ITEM_TITLE = %w[
           text-(length:--sp-text-sm) font-medium text-(--sp-color-fg)
         ].freeze
 
-        ITEM_DESCRIPTION_BASE = %w[
+        ITEM_DESCRIPTION = %w[
           text-(length:--sp-text-xs) text-(--sp-color-muted-fg)
         ].freeze
 
@@ -52,31 +52,31 @@ module StimulusPlumbers
         end
 
         def list_section_title_classes
-          { classes: klasses(*SECTION_TITLE_BASE) }
+          { classes: klasses(*SECTION_TITLE) }
         end
 
         def list_section_description_classes
-          { classes: klasses(*SECTION_DESCRIPTION_BASE) }
+          { classes: klasses(*SECTION_DESCRIPTION) }
         end
 
         def list_item_classes
-          { classes: klasses(*ITEM_BASE) }
+          { classes: klasses(*ITEM) }
         end
 
         def list_item_icon_classes
-          { classes: klasses("size-(--sp-icon-size-sm)", "stroke-current") }
+          { classes: klasses("stroke-current") }
         end
 
         def list_item_content_classes
-          { classes: klasses(*ITEM_CONTENT_BASE) }
+          { classes: klasses(*ITEM_CONTENT) }
         end
 
         def list_item_title_classes
-          { classes: klasses(*ITEM_TITLE_BASE) }
+          { classes: klasses(*ITEM_TITLE) }
         end
 
         def list_item_description_classes
-          { classes: klasses(*ITEM_DESCRIPTION_BASE) }
+          { classes: klasses(*ITEM_DESCRIPTION) }
         end
       end
     end

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

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module OrderedList
+        # ── Item ──────────────────────────────────────────────────────────────
+        ITEM = [
+          *Control::BASE,
+          "flex items-center gap-(--sp-space-2) w-full",
+          "px-(--sp-space-2) py-(--sp-space-1)",
+          "rounded-(--sp-radius-sm) text-(length:--sp-text-sm)",
+          "text-(--sp-color-fg)",
+          "focus-visible:ring-(--sp-color-primary-ring)",
+          "aria-[current]:bg-(--sp-color-primary)/10 aria-[current]:text-(--sp-color-primary)"
+        ].freeze
+
+        HANDLE = %w[
+          flex items-center justify-center shrink-0
+          stroke-current
+          text-(--sp-color-muted-fg)
+          cursor-grab active:cursor-grabbing
+          touch-none
+        ].freeze
+
+        CONTENT = %w[
+          flex flex-col flex-1 min-w-0
+        ].freeze
+
+        TITLE = %w[
+          text-(length:--sp-text-sm) font-medium text-(--sp-color-fg)
+        ].freeze
+
+        DESCRIPTION = %w[
+          text-(length:--sp-text-xs) text-(--sp-color-muted-fg)
+        ].freeze
+
+        private
+
+        def ordered_list_classes
+          { classes: klasses("flex flex-col gap-(--sp-space-1) py-(--sp-space-1)") }
+        end
+
+        def ordered_list_item_classes
+          { classes: klasses(*ITEM) }
+        end
+
+        def ordered_list_item_handle_classes
+          { classes: klasses(*HANDLE) }
+        end
+
+        def ordered_list_item_content_classes
+          { classes: klasses(*CONTENT) }
+        end
+
+        def ordered_list_item_title_classes
+          { classes: klasses(*TITLE) }
+        end
+
+        def ordered_list_item_description_classes
+          { classes: klasses(*DESCRIPTION) }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Progress
+        BAR = %w[
+          relative w-full h-2 overflow-hidden rounded-full
+          bg-(--sp-color-muted)
+        ].freeze
+
+        BAR_FILL = %w[
+          h-full rounded-full bg-(--sp-color-primary)
+          [.sp-progress-indeterminate_&]:animate-progress-slide
+          [.sp-progress-indeterminate_&]:motion-reduce:animate-none
+        ].freeze
+
+        # Circle stroke/fill live in icons/customs/progress-ring.svg — @source never scans
+        # .svg files, so Tailwind classes there are inert.
+        # Indeterminate class and utility land on this same svg, so this needs the compound
+        # [&.foo] form, not BAR_FILL's [.foo_&] descendant form.
+        RING = %w[
+          -rotate-90 text-(--sp-color-primary)
+          [&.sp-progress-indeterminate]:animate-spin
+        ].freeze
+
+        METER = %w[
+          w-full h-2 rounded-full
+          [&::-webkit-meter-bar]:rounded-full [&::-webkit-meter-bar]:bg-(--sp-color-muted)
+          [&::-webkit-meter-optimum-value]:bg-(--sp-color-success)
+          [&::-webkit-meter-suboptimum-value]:bg-(--sp-color-warning)
+          [&::-webkit-meter-even-less-good-value]:bg-(--sp-color-destructive)
+          [&::-moz-meter-bar]:bg-(--sp-color-success)
+        ].freeze
+
+        private
+
+        def progress_bar_classes      = { classes: klasses(*BAR) }
+        def progress_bar_fill_classes = { classes: klasses(*BAR_FILL) }
+        def progress_ring_classes     = { classes: klasses(*RING) }
+        def progress_meter_classes    = { classes: klasses(*METER) }
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/themes/tailwind/timeline/group.rb

@@ -5,22 +5,31 @@ module StimulusPlumbers
     module Tailwind
       module Timeline
         module Group
-          WRAPPER  = %w[space-y-4].freeze
-          SECTION  = %w[
+          WRAPPER         = %w[flex flex-col gap-y-4].freeze
+          SECTION         = %w[
             p-4
             bg-(--sp-color-bg-muted)
             border border-(--sp-color-border)
             rounded-lg
           ].freeze
-          DATE     = %w[text-base font-semibold text-(--sp-color-fg)].freeze
-          LIST     = %w[mt-3 divide-y divide-(--sp-color-border)].freeze
+          DATE            = %w[text-base font-semibold text-(--sp-color-fg)].freeze
+          LIST_VERTICAL   = %w[
+            pt-3 flex flex-col
+            divide-y divide-(--sp-color-border)
+            [&>li]:py-2 [&>li]:first:pt-0 [&>li]:last:pb-0
+          ].freeze
+          LIST_HORIZONTAL = %w[pt-3 flex gap-x-4].freeze
 
           private
 
           def timeline_group_classes              = { classes: klasses(WRAPPER) }
           def timeline_group_section_classes      = { classes: klasses(SECTION) }
           def timeline_group_section_date_classes = { classes: klasses(DATE) }
-          def timeline_group_section_list_classes = { classes: klasses(LIST) }
+
+          def timeline_group_section_list_classes(orientation: :vertical)
+            list = orientation.to_sym == :horizontal ? LIST_HORIZONTAL : LIST_VERTICAL
+            { classes: klasses(list) }
+          end
         end
       end
     end

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

@@ -18,7 +18,6 @@ module StimulusPlumbers
           mt-1 flex shrink-0 size-6 items-center justify-center rounded-full z-10
           bg-(--sp-color-bg) ring-4 ring-(--sp-color-bg)
         ].freeze
-        ITEM_INDICATOR_DOT_MARK = %w[size-3 rounded-full bg-(--sp-color-indicator)].freeze
 
         ITEM_INDICATOR_ICON = %w[
           mt-1 flex shrink-0 size-6 items-center justify-center rounded-full z-10
@@ -26,7 +25,7 @@ module StimulusPlumbers
           ring-4 ring-(--sp-color-bg)
         ].freeze
 
-        ITEM_INDICATOR_ICON_SLOT = %w[size-(--sp-icon-size-sm) stroke-current].freeze
+        ITEM_INDICATOR_ICON_SLOT = %w[stroke-current].freeze
 
         ITEM_INDICATOR_DOT_HORIZONTAL = %w[
           z-10 flex shrink-0 size-6 items-center justify-center rounded-full
@@ -50,12 +49,12 @@ module StimulusPlumbers
         ].freeze
         ITEM_TITLE       = %w[mb-1 text-base font-semibold text-(--sp-color-fg)].freeze
         ITEM_HEADING     = %w[mb-1].freeze
-        ITEM_TRIGGER     = %w[
-          w-full text-left text-base font-semibold
-          text-(--sp-color-fg)
-          hover:text-(--sp-color-primary)
-          focus-visible:outline-none focus-visible:ring-2
-          focus-visible:ring-(--sp-color-primary) focus-visible:rounded-sm
+        ITEM_TRIGGER     = [
+          *Control::BASE,
+          "w-full text-left text-base font-semibold",
+          "text-(--sp-color-fg)",
+          "hover:text-(--sp-color-primary)",
+          "focus-visible:ring-(--sp-color-primary-ring) focus-visible:rounded-sm"
         ].freeze
         ITEM_DESCRIPTION = %w[text-sm text-(--sp-color-muted-fg)].freeze
         ITEM_DETAIL      = %w[mt-2 text-sm text-(--sp-color-muted-fg)].freeze
@@ -93,7 +92,6 @@ module StimulusPlumbers
         def timeline_item_description_classes = { classes: klasses(ITEM_DESCRIPTION) }
         def timeline_item_detail_classes      = { classes: klasses(ITEM_DETAIL) }
         def timeline_item_actions_classes     = { classes: klasses(ITEM_ACTIONS) }
-        def timeline_item_indicator_dot_classes = { classes: klasses(ITEM_INDICATOR_DOT_MARK) }
         def timeline_item_connector_classes       = { classes: klasses(ITEM_CONNECTOR_HORIZONTAL) }
         def timeline_item_content_classes         = { classes: klasses(ITEM_CONTENT_HORIZONTAL) }
         def timeline_track_line_classes                = { classes: klasses(TRACK_LINE_VERTICAL) }

data/lib/stimulus_plumbers/themes/tailwind_theme.rb

@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
 require_relative "tailwind/control"
+require_relative "tailwind/checklist"
 require_relative "tailwind/list"
+require_relative "tailwind/ordered_list"
 require_relative "tailwind/avatar"
 require_relative "tailwind/button"
 require_relative "tailwind/button/group"
@@ -10,16 +12,22 @@ require_relative "tailwind/card"
 require_relative "tailwind/combobox"
 require_relative "tailwind/form"
 require_relative "tailwind/form/field"
+require_relative "tailwind/form/code"
+require_relative "tailwind/form/credit_card"
 require_relative "tailwind/form/input"
 require_relative "tailwind/icon"
+require_relative "tailwind/indicator"
 require_relative "tailwind/layout"
 require_relative "tailwind/link"
+require_relative "tailwind/progress"
 require_relative "tailwind/timeline"
 
 module StimulusPlumbers
   module Themes
     class TailwindTheme < Base
+      include Tailwind::Checklist
       include Tailwind::List
+      include Tailwind::OrderedList
       include Tailwind::Combobox
       include Tailwind::Avatar
       include Tailwind::Button
@@ -28,10 +36,14 @@ module StimulusPlumbers
       include Tailwind::Card
       include Tailwind::Form
       include Tailwind::Form::Field
+      include Tailwind::Form::Code
+      include Tailwind::Form::CreditCard
       include Tailwind::Form::Input
       include Tailwind::Icon
+      include Tailwind::Indicator
       include Tailwind::Layout
       include Tailwind::Link
+      include Tailwind::Progress
       include Tailwind::Timeline
       include Tailwind::Timeline::Group
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stimulus_plumbers_tailwind
 version: !ruby/object:Gem::Version
-  version: 0.4.8
+  version: 0.4.10
 platform: ruby
 authors:
 - Ryan Chang
@@ -33,23 +33,30 @@ files:
 - CHANGELOG.md
 - LICENSE-DEPENDENCIES
 - README.md
+- app/assets/stylesheets/stimulus_plumbers/tailwind/animations.css
 - docs/architecture.md
 - docs/guide.md
 - lib/generators/stimulus_plumbers/tailwind/install/install_generator.rb
 - lib/stimulus_plumbers/tailwind/engine.rb
+- lib/stimulus_plumbers/tailwind/generators/animations_directive.rb
+- lib/stimulus_plumbers/tailwind/generators/sources_directive.rb
 - lib/stimulus_plumbers/tailwind/version.rb
 - lib/stimulus_plumbers/themes/tailwind/avatar.rb
 - lib/stimulus_plumbers/themes/tailwind/button.rb
 - lib/stimulus_plumbers/themes/tailwind/button/group.rb
 - lib/stimulus_plumbers/themes/tailwind/calendar.rb
 - lib/stimulus_plumbers/themes/tailwind/card.rb
+- lib/stimulus_plumbers/themes/tailwind/checklist.rb
 - lib/stimulus_plumbers/themes/tailwind/combobox.rb
 - lib/stimulus_plumbers/themes/tailwind/control.rb
 - lib/stimulus_plumbers/themes/tailwind/form.rb
+- lib/stimulus_plumbers/themes/tailwind/form/code.rb
+- lib/stimulus_plumbers/themes/tailwind/form/credit_card.rb
 - lib/stimulus_plumbers/themes/tailwind/form/field.rb
 - lib/stimulus_plumbers/themes/tailwind/form/input.rb
 - lib/stimulus_plumbers/themes/tailwind/icon.rb
 - lib/stimulus_plumbers/themes/tailwind/icons/custom.rb
+- lib/stimulus_plumbers/themes/tailwind/icons/customs/progress-ring.svg
 - lib/stimulus_plumbers/themes/tailwind/icons/customs/spinner.svg
 - lib/stimulus_plumbers/themes/tailwind/icons/heroicon.rb
 - lib/stimulus_plumbers/themes/tailwind/icons/heroicons/outline/academic-cap.svg
@@ -700,9 +707,12 @@ files:
 - lib/stimulus_plumbers/themes/tailwind/icons/heroicons/solid/wrench.svg
 - lib/stimulus_plumbers/themes/tailwind/icons/heroicons/solid/x-circle.svg
 - lib/stimulus_plumbers/themes/tailwind/icons/heroicons/solid/x-mark.svg
+- lib/stimulus_plumbers/themes/tailwind/indicator.rb
 - lib/stimulus_plumbers/themes/tailwind/layout.rb
 - lib/stimulus_plumbers/themes/tailwind/link.rb
 - lib/stimulus_plumbers/themes/tailwind/list.rb
+- lib/stimulus_plumbers/themes/tailwind/ordered_list.rb
+- lib/stimulus_plumbers/themes/tailwind/progress.rb
 - lib/stimulus_plumbers/themes/tailwind/timeline.rb
 - lib/stimulus_plumbers/themes/tailwind/timeline/group.rb
 - lib/stimulus_plumbers/themes/tailwind_theme.rb