stimulus_plumbers_tailwind 0.3.3 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d9538346c119b8c1b5ad69324b708e083393e2ff6c46bd777ff3b4f22833426f
-  data.tar.gz: ba2636473fbf2f74b3286a09efb10a4f68d5d431236ff70a8f1bd12654feac37
+  metadata.gz: d7821a54d820ecd2c76e2ce5afd0bcd00ab4fb2f78f3e4246a256a378b3bd631
+  data.tar.gz: f67b19c723fe3ba0e22c5f7e94698575bf17e905d6ec4db9305b919d6ae4a471
 SHA512:
-  metadata.gz: 70224de388f2e9236cdb877212d5aa81d2a386efc98060bfc0bad2c78be686768a6d54eb5647c9a2cb06cc5218bcaa700161dd43b53356e85b99f1d76c3b30d8
-  data.tar.gz: 72d13eb1f2f751a7240a8af5d4faa47757f75157ab6806a0dd12245fe53f0f5f907d51d8b10508db0a592d7bb84772214c6483655c1e68a2529ead3b4b135f20
+  metadata.gz: 959b1d2a0f740c5630d85cc824da0148e7c172e9052b6359f4c873ee5c24ac23afdddf6bc5d4cd76602373f5c3f7d90cd0649fe13185b5eeb9b802deed618a6e
+  data.tar.gz: 4a0dd9d2040676acd2671eda6b2840ebb320f6704ce93ed23dcdcbb008ab37bc9abdd30e132bb224d9f0a97aa069941bdd4ee76b650eeeb71d97b7b12fe14f25

data/CHANGELOG.md

@@ -2,6 +2,74 @@
 
 All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines.
 
+---
+## [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
+
+### Bug Fixes
+
+- separate form field/choice rendering ([#92](https://github.com/ryancyq/stimulus-plumbers/issues/92)) - ([beedf5f](https://github.com/ryancyq/stimulus-plumbers/commit/beedf5f25849fd8e0411db69733bdb7afda99d9c)) - Ryan Chang
+- redesign combobox + popover integration ([#93](https://github.com/ryancyq/stimulus-plumbers/issues/93)) - ([acffee6](https://github.com/ryancyq/stimulus-plumbers/commit/acffee6e8661daa9245223eb4c95df9d066ff452)) - Ryan Chang
+- avatar image theme ([#102](https://github.com/ryancyq/stimulus-plumbers/issues/102)) - ([8135d9b](https://github.com/ryancyq/stimulus-plumbers/commit/8135d9bf03df72365b66a22d4c4bfad356c3007f)) - Ryan Chang
+- button link with external url will have icon render by default ([#103](https://github.com/ryancyq/stimulus-plumbers/issues/103)) - ([0429cba](https://github.com/ryancyq/stimulus-plumbers/commit/0429cbab170d5a4a7a5009fe0f70023917521725)) - Ryan Chang
+- action list / popover builder ([#105](https://github.com/ryancyq/stimulus-plumbers/issues/105)) - ([fc27045](https://github.com/ryancyq/stimulus-plumbers/commit/fc2704527cec4a8e3f5ea5119de33026c936defb)) - Ryan Chang
+- button group builder ([#107](https://github.com/ryancyq/stimulus-plumbers/issues/107)) - ([c649df2](https://github.com/ryancyq/stimulus-plumbers/commit/c649df22162758958d4bfcd5a13f56c9bbb61eb6)) - Ryan Chang
+- floating label for form inputs ([#109](https://github.com/ryancyq/stimulus-plumbers/issues/109)) - ([16c1c9b](https://github.com/ryancyq/stimulus-plumbers/commit/16c1c9ba2601dbbd9819be2272836a0f56b0b404)) - Ryan Chang
+- calendar + combobox date ([#110](https://github.com/ryancyq/stimulus-plumbers/issues/110)) - ([d47065f](https://github.com/ryancyq/stimulus-plumbers/commit/d47065fc888bd81c2e72066dc98d061ff8a6e5a7)) - Ryan Chang
+- action list with builder ([#111](https://github.com/ryancyq/stimulus-plumbers/issues/111)) - ([8ba6c3f](https://github.com/ryancyq/stimulus-plumbers/commit/8ba6c3f4a4c51d8e95c57fdde5e7ba499cc17e86)) - Ryan Chang
+- icon helper + update doc ([#113](https://github.com/ryancyq/stimulus-plumbers/issues/113)) - ([301adf4](https://github.com/ryancyq/stimulus-plumbers/commit/301adf406102d2d98b8cbd65cb2e3f4f921b5a2e)) - Ryan Chang
+
+### Features
+
+- form floating label ([#96](https://github.com/ryancyq/stimulus-plumbers/issues/96)) - ([13e9854](https://github.com/ryancyq/stimulus-plumbers/commit/13e985424cd2460820f5ae0e7d5c6debad6392e4)) - Ryan Chang
+- button variant type ([#97](https://github.com/ryancyq/stimulus-plumbers/issues/97)) - ([c680077](https://github.com/ryancyq/stimulus-plumbers/commit/c680077f14df2aad943c84ed2559d87bcf41e12b)) - Ryan Chang
+- calendar with days/months/years views ([#99](https://github.com/ryancyq/stimulus-plumbers/issues/99)) - ([fa530c8](https://github.com/ryancyq/stimulus-plumbers/commit/fa530c8eea38351e08cc27ad66aa6733fdb44f46)) - Ryan Chang
+- button fab outline ([#104](https://github.com/ryancyq/stimulus-plumbers/issues/104)) - ([ba877d8](https://github.com/ryancyq/stimulus-plumbers/commit/ba877d8312fcb8362ccd287173af12651e6b7627)) - Ryan Chang
+
+### Style
+
+- update component styling ([#89](https://github.com/ryancyq/stimulus-plumbers/issues/89)) - ([be240aa](https://github.com/ryancyq/stimulus-plumbers/commit/be240aa2a8e9a92b66c95086a8c5d0cfff067da4)) - Ryan Chang
+- tailwind choice checkbox/radio ([#95](https://github.com/ryancyq/stimulus-plumbers/issues/95)) - ([1c56b75](https://github.com/ryancyq/stimulus-plumbers/commit/1c56b753596f2d28b4d2320004ae32046e474f8a)) - Ryan Chang
+- fix card style across button/link/checkbox/radio ([#108](https://github.com/ryancyq/stimulus-plumbers/issues/108)) - ([6c6f2cc](https://github.com/ryancyq/stimulus-plumbers/commit/6c6f2ccfaca8bffdf186062ad73c38ebee5bdd21)) - Ryan Chang
+
+### Tests
+
+- add snapshots coverage ([#91](https://github.com/ryancyq/stimulus-plumbers/issues/91)) - ([bbd6022](https://github.com/ryancyq/stimulus-plumbers/commit/bbd6022ad37af9a1553971b6a4a928786eb7c421)) - Ryan Chang
+- address unit/a11y test gaps ([#101](https://github.com/ryancyq/stimulus-plumbers/issues/101)) - ([68f30e1](https://github.com/ryancyq/stimulus-plumbers/commit/68f30e1ddd1b11a6ab315beb40eb55a4a2946001)) - Ryan Chang
+- update sandbox view and snapshot spec ([#120](https://github.com/ryancyq/stimulus-plumbers/issues/120)) - ([d331248](https://github.com/ryancyq/stimulus-plumbers/commit/d331248a082bbc598cad35d38ab16dbde3563c19)) - Ryan Chang
+
 ---
 ## [0.3.3](https://github.com/ryancyq/stimulus-plumbers/compare/stimulus-plumbers-tailwind/v0.3.2..stimulus-plumbers-tailwind/v0.3.3) - 2026-05-26
 

data/README.md

@@ -27,7 +27,7 @@ Activate the theme in an initializer or `config/application.rb`:
 
 ```ruby
 StimulusPlumbers.configure do |config|
-  config.theme = :tailwind
+  config.theme.use(:tailwind)
 end
 ```
 
@@ -46,7 +46,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 +54,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 +87,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/stimulus_plumbers/themes/tailwind/avatar.rb

@@ -4,7 +4,19 @@ module StimulusPlumbers
   module Themes
     module Tailwind
       module Avatar
-        COLORS = {
+        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",
           sky:     "text-white bg-sky-600",
@@ -19,33 +31,29 @@ 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_colors
-          COLORS
+        def avatar_variants
+          VARIANTS
         end
 
-        def avatar_color_range
-          COLORS.values
+        def avatar_variant_range
+          VARIANTS.values
         end
 
         private
 
-        def avatar_classes(size: :md, color: nil)
+        def avatar_classes(size: :md, variant: nil)
           {
             classes: klasses(
               SIZES.fetch(size, SIZES[:md]),
-              COLORS.fetch(color, nil),
+              VARIANTS.fetch(variant, nil),
               *BASE
             )
           }
         end
+
+        def avatar_image_classes
+          { classes: "w-full h-full object-cover" }
+        end
       end
     end
   end

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

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Button
+        module Group
+          LAYOUTS = {
+            inline:  %w[
+              inline-flex rounded-(--sp-radius-md) shadow-(--sp-shadow-xs)
+              [&>*:not(:first-child)]:-ml-px
+              [&>*]:rounded-none
+              [&>*:first-child]:rounded-s-(--sp-radius-md)
+              [&>*:last-child]:rounded-e-(--sp-radius-md)
+            ].freeze,
+            stacked: %w[
+              flex flex-col rounded-(--sp-radius-md) shadow-(--sp-shadow-xs)
+              [&>*:not(:first-child)]:-mt-px
+              [&>*]:rounded-none
+              [&>*:first-child]:rounded-t-(--sp-radius-md)
+              [&>*:last-child]:rounded-b-(--sp-radius-md)
+            ].freeze
+          }.freeze
+
+          private
+
+          def button_group_classes(layout: :inline)
+            {
+              classes: klasses(*LAYOUTS.fetch(layout, LAYOUTS[:inline]))
+            }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -4,43 +4,126 @@ 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[
-            bg-(--sp-color-primary)
-            text-(--sp-color-primary-fg)
-            hover:bg-(--sp-color-primary)/90
-            focus-visible:ring-(--sp-focus-ring-color)
+            [--btn-bg:var(--sp-color-primary)]
+            [--btn-fg:var(--sp-color-primary-fg)]
+            [--btn-accent:var(--sp-color-primary)]
+            [--btn-border:var(--sp-color-primary-border)]
+            [--btn-ring:var(--sp-color-primary-ring)]
           ].freeze,
           secondary:   %w[
-            bg-(--sp-color-muted)
-            text-(--sp-color-fg)
-            hover:bg-(--sp-color-border)
+            [--btn-bg:var(--sp-color-secondary)]
+            [--btn-fg:var(--sp-color-secondary-fg)]
+            [--btn-accent:var(--sp-color-secondary)]
+            [--btn-border:var(--sp-color-secondary-border)]
+            [--btn-ring:var(--sp-color-secondary-ring)]
           ].freeze,
-          outline:     %w[
-            border border-(--sp-color-border)
-            bg-transparent
-            text-(--sp-color-fg)
-            hover:bg-(--sp-color-muted)
+          tertiary:    %w[
+            [--btn-bg:var(--sp-color-muted)]
+            [--btn-fg:var(--sp-color-muted-fg)]
+            [--btn-accent:var(--sp-color-fg)]
+            [--btn-border:var(--sp-color-muted-border)]
+            [--btn-ring:var(--sp-color-muted-ring)]
+          ].freeze,
+          success:     %w[
+            [--btn-bg:var(--sp-color-success)]
+            [--btn-fg:var(--sp-color-success-fg)]
+            [--btn-accent:var(--sp-color-success)]
+            [--btn-border:var(--sp-color-success-border)]
+            [--btn-ring:var(--sp-color-success-ring)]
           ].freeze,
           destructive: %w[
-            bg-(--sp-color-destructive)
-            text-(--sp-color-destructive-fg)
-            hover:bg-(--sp-color-destructive)/90
+            [--btn-bg:var(--sp-color-destructive)]
+            [--btn-fg:var(--sp-color-destructive-fg)]
+            [--btn-accent:var(--sp-color-destructive)]
+            [--btn-border:var(--sp-color-destructive-border)]
+            [--btn-ring:var(--sp-color-destructive-ring)]
+          ].freeze,
+          warning:     %w[
+            [--btn-bg:var(--sp-color-warning)]
+            [--btn-fg:var(--sp-color-warning-fg)]
+            [--btn-accent:var(--sp-color-warning)]
+            [--btn-border:var(--sp-color-warning-border)]
+            [--btn-ring:var(--sp-color-warning-ring)]
+          ].freeze,
+          info:        %w[
+            [--btn-bg:var(--sp-color-info)]
+            [--btn-fg:var(--sp-color-info-fg)]
+            [--btn-accent:var(--sp-color-info)]
+            [--btn-border:var(--sp-color-info-border)]
+            [--btn-ring:var(--sp-color-info-ring)]
+          ].freeze
+        }.freeze
+
+        # ── Type styles ───────────────────────────────────────────────────────
+        TYPES = {
+          default:     %w[
+            rounded-(--sp-radius-md)
+            bg-(--btn-bg) text-(--btn-fg)
+            border border-(--btn-border)
+            hover:bg-(--btn-bg)/90
+          ].freeze,
+          outline:     %w[
+            rounded-(--sp-radius-md)
+            bg-(--sp-color-bg) text-(--btn-accent)
+            border border-(--btn-border)
+            hover:bg-(--btn-accent)/10
+          ].freeze,
+          ghost:       %w[
+            rounded-(--sp-radius-md)
+            bg-transparent text-(--btn-accent)
+            border border-transparent
+            hover:bg-(--btn-accent)/10
           ].freeze,
-          ghost:       %w[hover:bg-(--sp-color-muted) text-(--sp-color-fg)].freeze,
-          link:        %w[text-(--sp-color-primary) underline-offset-4 hover:underline].freeze,
           fab:         %w[
-            rounded-full shadow-lg
-            bg-(--sp-color-primary) text-(--sp-color-primary-fg)
-            hover:bg-(--sp-color-primary)/90 hover:shadow-xl
+            rounded-(--sp-radius-full)
+            bg-(--btn-bg) text-(--btn-fg)
+            border border-(--btn-border)
+            shadow-(--sp-shadow-lg)
+            hover:bg-(--btn-bg)/90 hover:shadow-(--sp-shadow-xl)
+          ].freeze,
+          fab_outline: %w[
+            rounded-(--sp-radius-full)
+            bg-transparent text-(--btn-accent)
+            border border-(--btn-border)
+            shadow-(--sp-shadow-lg)
+            hover:bg-(--btn-bg) hover:text-(--btn-fg) hover:shadow-(--sp-shadow-xl)
           ].freeze,
           dashed:      %w[
-            border border-dashed border-(--sp-color-border)
-            bg-transparent text-(--sp-color-fg)
-            hover:bg-(--sp-color-muted)
+            rounded-(--sp-radius-md)
+            bg-(--sp-color-bg) text-(--btn-accent)
+            border border-dashed border-(--btn-border)
+            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-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,
@@ -49,55 +132,22 @@ module StimulusPlumbers
           xl: %w[h-14 px-(--sp-space-6) text-(length:--sp-text-lg)].freeze
         }.freeze
 
-        FLEX_ALIGN = {
-          row: {
-            left:   "justify-start",
-            center: %w[justify-center items-center].freeze,
-            right:  "justify-end",
-            top:    "items-start",
-            bottom: "items-end"
-          }.freeze,
-          col: {
-            top:    "justify-start",
-            center: %w[justify-center items-center].freeze,
-            bottom: "justify-end",
-            left:   "items-start",
-            right:  "items-end"
-          }.freeze
-        }.freeze
-
-        BASE = %w[
-          inline-flex items-center justify-center gap-(--sp-space-2) font-medium
-          rounded-(--sp-radius-md) transition-colors
-          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
-          disabled:pointer-events-none disabled:opacity-50
-        ].freeze
-
-        GROUP_BASE = %w[flex gap-(--sp-space-2)].freeze
-
         private
 
-        def button_classes(variant: :primary, size: :md)
+        def button_classes(type: :default, variant: :primary, size: :md)
           {
             classes: klasses(
               *BASE,
-              *VARIANTS.fetch(variant, []),
-              *SIZES.fetch(size, [])
-            )
-          }
-        end
-
-        def button_group_classes(alignment: :left, direction: :row)
-          {
-            classes: klasses(
-              *GROUP_BASE,
-              *Array(FLEX_ALIGN.dig(direction, alignment))
+              *(type == :card ? CARD : LAYOUT),
+              *VARIANTS.fetch(variant, VARIANTS[:primary]),
+              *TYPES.fetch(type, TYPES[:default]),
+              *(type == :card ? [] : SIZES.fetch(size, []))
             )
           }
         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,22 +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-[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
 
-        NAV = %w[flex items-center justify-between gap-(--sp-space-1) mb-(--sp-space-2)].freeze
+        QUARTER_GRID = %w[grid grid-cols-4 gap-(--sp-space-1)].freeze
 
-        NAV_BTN = %w[
-          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:outline-none focus-visible:ring-2
-          focus-visible:ring-(--sp-focus-ring-color)
-          disabled:pointer-events-none disabled:opacity-50
+        MONTHS_OF_YEAR = "contents"
+
+        MONTH = %w[
+          rounded-(--sp-radius-md) flex items-center justify-center
+          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-[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 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-[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
@@ -44,29 +74,33 @@ module StimulusPlumbers
           { classes: klasses(*DAYS_OF_WEEK) }
         end
 
-        def calendar_week_classes
-          { classes: "contents" }
-        end
-
         def calendar_days_of_month_classes
           { classes: klasses(*DAYS_OF_MONTH) }
         end
 
-        def calendar_day_classes(outside: false)
-          {
-            classes: klasses(
-              *DAY,
-              *(outside ? %w[text-(--sp-color-muted-fg) opacity-50] : [])
-            )
-          }
+        def calendar_months_of_year_classes
+          { classes: MONTHS_OF_YEAR }
+        end
+
+        def calendar_years_of_decade_classes
+          { classes: YEARS_OF_DECADE }
+        end
+
+        def calendar_row_classes
+          { classes: "contents" }
         end
 
-        def calendar_navigation_classes
-          { classes: klasses(*NAV) }
+        def calendar_day_classes(outside: false, **)
+          extra = outside ? %w[text-(--sp-color-muted-fg)] : []
+          { classes: klasses(*DAY, *extra) }
         end
 
-        def calendar_navigation_navigator_classes
-          { classes: klasses(*NAV_BTN) }
+        def calendar_month_classes(**) = { classes: klasses(*MONTH) }
+
+        def calendar_year_classes(**)  = { classes: klasses(*YEAR) }
+
+        def calendar_quarter_grid_classes
+          { classes: klasses(*QUARTER_GRID) }
         end
       end
     end

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

@@ -5,19 +5,51 @@ module StimulusPlumbers
     module Tailwind
       module Card
         BASE = %w[
-          rounded-(--sp-radius-lg) border border-(--sp-color-border)
-          bg-(--sp-color-bg) shadow-(--sp-shadow-sm)
+          flex flex-col
+          rounded-(--sp-radius-md) border border-(--card-ring)
+          bg-(--sp-color-bg) shadow-(--sp-shadow-xs)
         ].freeze
 
+        VARIANTS = {
+          primary:     %w[[--card-ring:var(--sp-color-primary)]].freeze,
+          secondary:   %w[[--card-ring:var(--sp-color-secondary)]].freeze,
+          tertiary:    %w[[--card-ring:var(--sp-color-muted-fg)]].freeze,
+          success:     %w[[--card-ring:var(--sp-color-success)]].freeze,
+          destructive: %w[[--card-ring:var(--sp-color-destructive)]].freeze,
+          warning:     %w[[--card-ring:var(--sp-color-warning)]].freeze,
+          info:        %w[[--card-ring:var(--sp-color-info)]].freeze
+        }.freeze
+
+        HEADER_BASE = %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)
+        ].freeze
+
+        TITLE_BASE = %w[
+          text-(length:--sp-text-base) font-semibold text-(--sp-color-fg)
+        ].freeze
+
+        BODY_BASE = %w[
+          px-(--sp-space-6) py-(--sp-space-3)
+        ].freeze
+
+        ACTION_BASE = %w[w-full justify-start].freeze
+
         private
 
-        def card_classes
-          { classes: klasses(*BASE) }
+        def card_classes(variant: :tertiary)
+          { classes: klasses(*VARIANTS.fetch(variant, VARIANTS[:tertiary]), *BASE) }
         end
 
-        def card_section_classes
-          { classes: klasses("p-(--sp-space-6)") }
-        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) }
       end
     end
   end