stimulus_plumbers_tailwind 0.3.2 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7dbbcc00f687b1debd6e91743b721865707390999b971ed533a22d9c35c148ce
-  data.tar.gz: a2dedb3c6b6761b520711f3bec5839e7155cf192bf8d99869cba51fbe6a2d45b
+  metadata.gz: f14f719e9c94e67c1b76669ea4a0691c7929e9a2b7df04fda692ce3ea430c4bc
+  data.tar.gz: 161c3622b129cbcf3ee49bc304319c691cf09c8c754a01646bc608480b391029
 SHA512:
-  metadata.gz: 2b0751ffd3e56d03d3ba7e7936d24a5c749d40cd7e7096fa1734ea9444d2f63183dc76ec92a6ce6bad08809533e9d3e307c379ef52abe8e641aa0b7e866e40d9
-  data.tar.gz: 6b53af446420512019b993a089e47cee25c7cddc8ee60a2794c1a6bd01157c6e7609b88f392dd83101d31e918e70a56cac1af760f237b703e79065363ea4b2eb
+  metadata.gz: 606d07453d71bc70cd71560c47ee12a028fbe4ab5ef3150d52024d61eef561f263c12221c73ed8689f56119b8f5b155099bad4526435f3614550b23f2934628c
+  data.tar.gz: c4d45c72794f1c0df3310e30f5a95cb3bc3c204c1298eca5c916f645fb530d1bfb4d5ee3ff24c828290ba6e6a75e5980e4d20853eae19b1692ee64007303d60f

data/CHANGELOG.md

@@ -2,6 +2,59 @@
 
 All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines.
 
+---
+## [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
+
+### Bug Fixes
+
+- both stimulus/turbo calendar will render aria-current=date on today date. tailwind theme will apply today css style via aria attribute ([#77](https://github.com/ryancyq/stimulus-plumbers/issues/77)) - ([29da3cd](https://github.com/ryancyq/stimulus-plumbers/commit/29da3cdf81a069fb4fdfbee3a6d4ac57c9ed9a16)) - Ryan Chang
+- rename conflicts with stimulus value/target/class result in ambiguous definitions ([#81](https://github.com/ryancyq/stimulus-plumbers/issues/81)) - ([60d47a7](https://github.com/ryancyq/stimulus-plumbers/commit/60d47a7a907878b45a10f07e82bf647b815b47f0)) - Ryan Chang
+- rename autocomplete to typeahead for accurate naming ([#83](https://github.com/ryancyq/stimulus-plumbers/issues/83)) - ([ff5ff26](https://github.com/ryancyq/stimulus-plumbers/commit/ff5ff26143aba80c85b3e638e060c294c92dcc31)) - Ryan Chang
+- update version bump script to ruby - ([854935c](https://github.com/ryancyq/stimulus-plumbers/commit/854935c16b840ef9a7fdeac245c25016cdc66053)) - Ryan Chang
+
+### Features
+
+- button with icons ([#82](https://github.com/ryancyq/stimulus-plumbers/issues/82)) - ([7ae5267](https://github.com/ryancyq/stimulus-plumbers/commit/7ae52675a6983b42f574f9919495686b6802a121)) - Ryan Chang
+- button variant ([#84](https://github.com/ryancyq/stimulus-plumbers/issues/84)) - ([07b7f9c](https://github.com/ryancyq/stimulus-plumbers/commit/07b7f9c8beebe0be31817809476ab9715926e1ee)) - Ryan Chang
+- allow theme schema validation to support other validator like method/boolean instead of just array ([#86](https://github.com/ryancyq/stimulus-plumbers/issues/86)) - ([0eeb485](https://github.com/ryancyq/stimulus-plumbers/commit/0eeb48533e0a7ce20d9031fd782f854ae52d6a64)) - Ryan Chang
+- svg icon rendering ([#85](https://github.com/ryancyq/stimulus-plumbers/issues/85)) - ([7405c67](https://github.com/ryancyq/stimulus-plumbers/commit/7405c670b618f6f7e723c852ac633ca2655eda68)) - Ryan Chang
+- combobox theme ([#87](https://github.com/ryancyq/stimulus-plumbers/issues/87)) - ([5220185](https://github.com/ryancyq/stimulus-plumbers/commit/522018500956d271da0a6dde44d6c335e2a0c649)) - Ryan Chang
+
 ---
 ## [0.3.2](https://github.com/ryancyq/stimulus-plumbers/compare/stimulus-plumbers-tailwind/v0.3.1..stimulus-plumbers-tailwind/v0.3.2) - 2026-05-20
 

data/LICENSE-DEPENDENCIES

@@ -0,0 +1,57 @@
+stimulus_plumbers_tailwind may redistribute assets from the following projects:
+
+---
+
+https://github.com/tailwindlabs/tailwindcss
+
+The license for that software can be found at https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE which is reproduced here for your convenience:
+
+  MIT License
+
+  Copyright (c) Tailwind Labs, Inc.
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+
+---
+
+https://github.com/tailwindlabs/heroicons
+
+The license for that software can be found at https://github.com/tailwindlabs/heroicons/blob/master/LICENSE which is reproduced here for your convenience:
+
+  MIT License
+
+  Copyright (c) Tailwind Labs, Inc.
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

data/README.md

@@ -51,12 +51,33 @@ Use `bundle show stimulus_plumbers_tailwind` to get the exact installed path.
 | `Tailwind::Button` | Button |
 | `Tailwind::Calendar` | Calendar grid, date picker |
 | `Tailwind::Card` | Card |
-| `Tailwind::Combobox` | Combobox (date, time, dropdown, autocomplete) |
+| `Tailwind::Combobox` | Combobox (date, time, dropdown, typeahead) |
 | `Tailwind::Form` | Form fields, labels, errors |
+| `Tailwind::Icon` | Icon (SVG rendering, icon registry) |
 | `Tailwind::Layout` | Layout primitives |
 
 Custom themes can subclass `TailwindTheme` to override individual methods, or subclass `StimulusPlumbers::Themes::Base` directly.
 
+## Icons
+
+The theme bundles the [Heroicons](https://heroicons.com/) 2.x set. Pass a kebab-case icon name to `sp_icon` or any component accepting `icon_leading:` / `icon_trailing:`. Append `/solid` for the filled variant:
+
+```erb
+<%= sp_icon "arrow-left" %>
+<%= sp_icon "arrow-left/solid" %>
+<%= sp_button "Next", icon_trailing: "arrow-right" %>
+```
+
+Icons render as inline `<svg>` with `size-6` by default. Override with `class:`:
+
+```erb
+<%= sp_icon "arrow-left", class: "size-4 text-gray-500" %>
+```
+
+**Built-in aliases:** `"close"` → `"x-mark"`, `"calendar"` → `"calendar-days"`.
+
+**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.
+
 ## Development
 
 ```bash

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

@@ -4,7 +4,7 @@ module StimulusPlumbers
   module Themes
     module Tailwind
       module Avatar
-        COLORS = {
+        VARIANTS = {
           amber:   "text-white bg-amber-600",
           lime:    "text-white bg-lime-600",
           sky:     "text-white bg-sky-600",
@@ -22,30 +22,38 @@ module StimulusPlumbers
         SIZES = {
           sm: "size-(--sp-icon-size)",
           md: "size-(--sp-avatar-size)",
-          lg: "size-12"
+          lg: "size-(--sp-avatar-size-lg)"
         }.freeze
 
-        BASE = %w[rounded-(--sp-radius-full) overflow-hidden inline-flex items-center justify-center].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

@@ -6,82 +6,144 @@ module StimulusPlumbers
       module Button
         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,
-          ghost:       %w[hover:bg-(--sp-color-muted) text-(--sp-color-fg)].freeze,
-          link:        %w[text-(--sp-color-primary) underline-offset-4 hover:underline].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
 
-        SIZES = {
-          sm: %w[h-8 px-(--sp-space-3) text-(--sp-text-sm)].freeze,
-          md: %w[h-9 px-(--sp-space-4) text-(--sp-text-base)].freeze,
-          lg: %w[h-11 px-(--sp-space-6) text-(--sp-text-lg)].freeze
+        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-bg)/10
+          ].freeze,
+          ghost:       %w[
+            rounded-(--sp-radius-md)
+            bg-transparent text-(--btn-accent)
+            border border-transparent
+            hover:bg-(--btn-bg)/10
+          ].freeze,
+          fab:         %w[
+            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[
+            rounded-(--sp-radius-md)
+            bg-(--sp-color-bg) text-(--btn-accent)
+            border border-dashed border-(--btn-border)
+            hover:bg-(--btn-bg)/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
+          ].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
+        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,
+          md: %w[h-9 px-(--sp-space-4) text-(length:--sp-text-base)].freeze,
+          lg: %w[h-11 px-(--sp-space-6) text-(length:--sp-text-lg)].freeze,
+          xl: %w[h-14 px-(--sp-space-6) text-(length:--sp-text-lg)].freeze
         }.freeze
 
-        BASE = %w[
-          inline-flex items-center justify-center gap-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
+        BASE = [
+          *Control::BASE,
+          "whitespace-nowrap",
+          "focus-visible:ring-(--btn-ring)"
         ].freeze
 
-        GROUP_BASE = %w[flex gap-(--sp-space-2)].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(variant: :primary, size: :md)
+        def button_classes(type: :default, variant: :primary, size: :md)
           {
             classes: klasses(
               *BASE,
-              *VARIANTS.fetch(variant, []),
-              *SIZES.fetch(size, [])
+              *(type == :card ? CARD : LAYOUT),
+              *VARIANTS.fetch(variant, VARIANTS[:primary]),
+              *TYPES.fetch(type, TYPES[:default]),
+              *(type == :card ? [] : SIZES.fetch(size, []))
             )
           }
         end
 
-        def button_group_classes(alignment: :left, direction: :row)
-          {
-            classes: klasses(
-              *GROUP_BASE,
-              *Array(FLEX_ALIGN.dig(direction, alignment))
-            )
-          }
+        def button_icon_classes
+          { classes: klasses("size-(--sp-control-size)", "stroke-current") }
         end
       end
     end

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

@@ -7,36 +7,51 @@ module StimulusPlumbers
         GRID = %w[w-full].freeze
 
         DAYS_OF_WEEK = %w[
-          grid grid-cols-7 text-center text-(--sp-text-xs)
-          font-medium text-(--sp-color-muted-fg) mb-1
+          grid grid-cols-7 text-center text-(length:--sp-text-xs)
+          font-medium text-(--sp-color-muted-fg) mb-(--sp-space-1)
         ].freeze
 
         DAYS_OF_MONTH = %w[grid grid-cols-7 justify-items-center].freeze
 
         DAY = %w[
           size-(--sp-calendar-day-size) rounded-(--sp-radius-md)
-          flex items-center justify-center text-(--sp-text-sm)
+          flex items-center justify-center text-(length:--sp-text-sm)
           hover:bg-(--sp-color-muted) 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
         ].freeze
 
-        DAY_SELECTED = %w[
-          bg-(--sp-color-primary)
-          text-(--sp-color-primary-fg)
-          hover:bg-(--sp-color-primary)/90
-        ].freeze
+        QUARTER_GRID = %w[grid grid-cols-4].freeze
 
-        NAV = %w[flex items-center justify-between gap-1 mb-2].freeze
+        MONTHS_OF_YEAR = "contents"
 
-        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
+        MONTH = %w[
+          rounded-(--sp-radius-md) flex items-center justify-center
+          text-(length:--sp-text-sm) h-10 flex-1
+          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
         ].freeze
 
-        NAV_ICON = %w[size-4 stroke-current].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
+          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
+        ].freeze
 
         private
 
@@ -48,35 +63,41 @@ 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(today: false, selected: false, outside: false)
+        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_day_classes(outside: false, **)
           {
             classes: klasses(
               *DAY,
-              *(today    ? ["font-bold"] : []),
-              *(selected ? DAY_SELECTED : []),
-              *(outside  ? %w[text-(--sp-color-muted-fg) opacity-50] : [])
+              *(outside ? %w[text-(--sp-color-disabled-fg)] : [])
             )
           }
         end
 
-        def calendar_navigation_classes
-          { classes: klasses(*NAV) }
+        def calendar_month_classes(**)
+          { classes: klasses(*MONTH) }
         end
 
-        def calendar_navigation_navigator_classes
-          { classes: klasses(*NAV_BTN) }
+        def calendar_year_classes(**)
+          { classes: klasses(*YEAR) }
         end
 
-        def calendar_navigation_navigator_icon_classes
-          { classes: klasses(*NAV_ICON) }
+        def calendar_quarter_grid_classes
+          { classes: klasses(*QUARTER_GRID) }
         end
       end
     end

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

@@ -5,19 +5,52 @@ 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)
+          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) pt-(--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) pt-(--sp-space-3)
+        ].freeze
+
+        ACTION_BASE = %w[
+          px-(--sp-space-6) pb-(--sp-space-6) pt-(--sp-space-4)
         ].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