stimulus_plumbers_tailwind 0.4.14 → 0.4.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3fade9eb057604db9bcfaa34e4b5465436cf4121ca2fac2fc0135d8923d8fc15
-  data.tar.gz: 55d4ca0db20ba21adeba78c644be9a0da03d5136c55f549d697a20b290a38c39
+  metadata.gz: 33ab72484958134862e7462abb7dccd71ee6cc386addfdc741085979514ac5c5
+  data.tar.gz: f3557154e6f5077fe2bebe5aacc3e1c06b23cba932cad8ce99a1d105196308d4
 SHA512:
-  metadata.gz: e06686efbc235d53f5b6621f23595d3f234e79ad28ce67f02579a354e25db36cde73f567a1952113084507b3344677a81c4cd19657883b80786dfadd62a903f7
-  data.tar.gz: 10406b395a531faf1ccf516168673471bf4ebe0833958e7ca1b10457c239c04bfba2556dc58d12fc3b1263b7accdb80e3500b4eb79ded11962817623ecd28c50
+  metadata.gz: af816ad054bb6ec34a4632bd6e24cace88339614747bb005578325946998490c472d010d267ae182b6d2c56f2168e0ed29c085410a9efa6abd1ae7d3d2171e7a
+  data.tar.gz: 4643a0fbe7b94fabbbdaf7c062be07ba90cc48b6c95b3e30db7e67ffb39b9a9595cf546c2a72c2faccfbe2782bf9ee0ebdc2b2f3b7b6562242cf1483a06c227c

data/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines.
 
+---
+## [0.4.15](https://github.com/ryancyq/stimulus-plumbers/compare/stimulus-plumbers-tailwind/v0.4.14..stimulus-plumbers-tailwind/v0.4.15) - 2026-07-23
+
+### Features
+
+- password strength ([#191](https://github.com/ryancyq/stimulus-plumbers/issues/191)) - ([2f7ad55](https://github.com/ryancyq/stimulus-plumbers/commit/2f7ad550ab882225fd886956c586c0011af021fc)) - Ryan Chang
+- segmented progress bar ([#192](https://github.com/ryancyq/stimulus-plumbers/issues/192)) - ([9c43461](https://github.com/ryancyq/stimulus-plumbers/commit/9c43461a262dc19a7546aadadefaf2e4e75a4acb)) - Ryan Chang
+
+---
+## [0.4.14](https://github.com/ryancyq/stimulus-plumbers/compare/stimulus-plumbers-tailwind/v0.4.13..stimulus-plumbers-tailwind/v0.4.14) - 2026-07-20
+
+### Bug Fixes
+
+- icon schema now returns aria/data attributes from svg files ([#189](https://github.com/ryancyq/stimulus-plumbers/issues/189)) - ([ea9d079](https://github.com/ryancyq/stimulus-plumbers/commit/ea9d079d10b3f802284f9fd963fda8e9cec5f02d)) - Ryan Chang
+
 ---
 ## [0.4.13](https://github.com/ryancyq/stimulus-plumbers/compare/stimulus-plumbers-tailwind/v0.4.12..stimulus-plumbers-tailwind/v0.4.13) - 2026-07-20
 

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

@@ -1,5 +1,6 @@
 @theme {
-  --animate-progress-slide: sp-progress-slide 1.5s ease-in-out infinite;
+  --sp-progress-slide-duration: 1.5s;
+  --animate-progress-slide: sp-progress-slide var(--sp-progress-slide-duration) ease-in-out infinite;
 }
 
 @keyframes sp-progress-slide {
@@ -7,11 +8,56 @@
   100% { transform: translateX(300%); }
 }
 
+/* Segmented indeterminate: travel spans slot + chunk so the chunk clears the slot (clipped by
+   `overflow-hidden`) instead of parking in it, then waits its turn. */
+@keyframes sp-progress-relay {
+  0%   { transform: translateX(-100%); }
+  25%  { transform: translateX(400%); }
+  100% { transform: translateX(400%); }
+}
+
+/* Last slot ends the relay: chunk stops flush with the slot's far edge and fades out.
+   Shorter travel over a shorter window, so the glide speed is unchanged. */
+@keyframes sp-progress-relay-end {
+  0%   { transform: translateX(-100%); opacity: 1; }
+  20%  { transform: translateX(300%); opacity: 1; }
+  30%  { transform: translateX(300%); opacity: 0; }
+  100% { transform: translateX(300%); opacity: 0; }
+}
+
 /* Ring-only; core's transition covers width, not stroke-dashoffset. */
 [data-progress-target="fill"] {
   transition: stroke-dashoffset 0.3s ease;
 }
 
+/* Relay one chunk left-to-right across the segments at the bar's speed: the cycle scales with segment
+   count (1/0.2 = 5 slots fit the bar's 1.5s), each slot taking its turn 1/count later. The 25% glide
+   runs longer than that handoff — the overlap is what keeps the wave whole across the gap.
+   `backwards` holds a waiting slot at the first keyframe (off-screen left) so it stays hidden. */
+@media (prefers-reduced-motion: no-preference) {
+  .sp-progress-indeterminate [aria-hidden="true"] > [data-progress-target="fill"] {
+    animation-name: sp-progress-relay;
+    animation-duration: calc(var(--sp-progress-slide-duration) / var(--sp-progress-count, 1) / 0.2);
+    animation-delay: calc(
+      var(--sp-progress-index, 0) / var(--sp-progress-count, 1) * var(--sp-progress-slide-duration)
+    );
+    /* The per-slot windows are contiguous, so a constant-speed glide reads as one continuous
+       wave; ease-in-out would decelerate to a stop each slot and look like a pause. */
+    animation-timing-function: linear;
+    animation-fill-mode: backwards;
+  }
+
+  /* Ramp the whole relay in/out at its ends only — the first slot accelerates from rest,
+     the last decelerates to a stop and fades; every slot between stays constant speed. */
+  .sp-progress-indeterminate [aria-hidden="true"]:first-child > [data-progress-target="fill"] {
+    animation-timing-function: ease-in;
+  }
+  .sp-progress-indeterminate [aria-hidden="true"]:last-child > [data-progress-target="fill"] {
+    animation-name: sp-progress-relay-end;
+    animation-timing-function: ease-out;
+  }
+}
+
 /* 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

@@ -12,7 +12,7 @@ bin/rails generate stimulus_plumbers:tailwind:install
 
 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).
+`guide://component` ([CSS entry file detection](https://github.com/ryancyq/stimulus-plumbers/blob/main/stimulus-plumbers-rails/docs/guide.md#css-entry-file-detection)).
 
 ## Installed CSS files
 
@@ -27,8 +27,9 @@ an existing one. Legacy imports that point into gem directories are migrated to
 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
-optional `heroicons` gem.
+`/solid` for the filled variant) — names and aliases are in `component://icons` (`list_icons`), and
+the [README](https://github.com/ryancyq/stimulus-plumbers/blob/main/stimulus-plumbers-tailwind/README.md#icons)
+covers the optional `heroicons` gem.
 
-To implement a custom theme instead of/alongside Tailwind, see
-[stimulus-plumbers-rails/docs/component/theme.md](../../stimulus-plumbers-rails/docs/component/theme.md).
+To implement a custom theme instead of/alongside Tailwind, see `guide://theme`
+([theme.md](https://github.com/ryancyq/stimulus-plumbers/blob/main/stimulus-plumbers-rails/docs/component/theme.md)).

data/lib/stimulus_plumbers/tailwind/version.rb

@@ -2,6 +2,6 @@
 
 module StimulusPlumbers
   module Tailwind
-    VERSION = "0.4.14"
+    VERSION = "0.4.16"
   end
 end

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

@@ -78,6 +78,59 @@ module StimulusPlumbers
             [&>div:first-child]:focus-within:ring-0
           ].freeze
 
+          # ── Range ─────────────────────────────────────────────────────────────
+          # A slider is a track and a thumb, so it takes none of INPUT's box chrome.
+          # WebKit has no filled-track pseudo-element: the fill is a gradient stopped at
+          # --sp-progress-percent (set by the progress controller). Firefox has
+          # ::-moz-range-progress and uses that instead.
+          # Must stay on one line: Tailwind scans source text, so a class split across a string
+          # continuation never appears contiguously and is silently dropped from the build.
+          # rubocop:disable Layout/LineLength
+          RANGE_FILL = "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--sp-color-primary)_0_calc(var(--sp-progress-percent,0)*1%),transparent_0)]"
+          # rubocop:enable Layout/LineLength
+
+          RANGE = [
+            "w-full appearance-none bg-transparent cursor-pointer",
+            "focus:outline-none",
+            "focus-visible:outline-none",
+            "focus-visible:ring-(length:--sp-focus-ring-width)",
+            "focus-visible:ring-(--sp-focus-ring-color)",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            # WebKit track + thumb
+            "[&::-webkit-slider-runnable-track]:h-2",
+            "[&::-webkit-slider-runnable-track]:rounded-full",
+            "[&::-webkit-slider-runnable-track]:bg-(--sp-color-muted)",
+            RANGE_FILL,
+            "[&::-webkit-slider-thumb]:appearance-none",
+            "[&::-webkit-slider-thumb]:size-4",
+            "[&::-webkit-slider-thumb]:rounded-full",
+            "[&::-webkit-slider-thumb]:bg-(--sp-color-primary)",
+            # Centers a 16px thumb on an 8px track.
+            "[&::-webkit-slider-thumb]:-mt-1",
+            # Firefox track + native fill + thumb
+            "[&::-moz-range-track]:h-2",
+            "[&::-moz-range-track]:rounded-full",
+            "[&::-moz-range-track]:bg-(--sp-color-muted)",
+            "[&::-moz-range-progress]:h-2",
+            "[&::-moz-range-progress]:rounded-full",
+            "[&::-moz-range-progress]:bg-(--sp-color-primary)",
+            "[&::-moz-range-thumb]:size-4",
+            "[&::-moz-range-thumb]:border-0",
+            "[&::-moz-range-thumb]:rounded-full",
+            "[&::-moz-range-thumb]:bg-(--sp-color-primary)"
+          ].freeze
+
+          # The readout sits outside the input, so the input's own disabled:opacity-50 never
+          # reaches it — without this a disabled slider keeps a full-strength readout.
+          RANGE_GROUP = %w[
+            flex items-center gap-(--sp-space-3)
+            [&:has(input:disabled)>span]:opacity-50
+          ].freeze
+
+          # Sits beside the track, not over it — no pill background needed.
+          # Shares Progress::VALUE_TEXT, resolved at call time since progress.rb loads later.
+          RANGE_VALUE = %w[shrink-0 text-(--sp-color-fg)].freeze
+
           # ── Choice inputs ─────────────────────────────────────────────────────
           CHECKBOX_TYPES = {
             default: [
@@ -154,6 +207,24 @@ module StimulusPlumbers
             form_field_input_classes(floating: floating, error: error)
           end
 
+          # Not form_field_input_classes — a progressbar is display-only, so it takes none of the
+          # text-input chrome (border, padding, focus ring); the track styling comes from progress_bar.
+          def form_field_input_progress_classes
+            { classes: klasses("w-full") }
+          end
+
+          def form_field_input_range_classes
+            { classes: klasses(*RANGE) }
+          end
+
+          def form_field_input_range_group_classes
+            { classes: klasses(*RANGE_GROUP) }
+          end
+
+          def form_field_input_range_value_classes
+            { classes: klasses(*Progress::VALUE_TEXT, *RANGE_VALUE) }
+          end
+
           def form_field_input_select_classes(floating: nil, error: false)
             form_field_input_classes(floating: floating, error: error)
           end

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module PasswordStrength
+        private
+
+        def password_strength_wrapper_classes
+          { classes: klasses("flex", "flex-col", "gap-(--sp-space-2)") }
+        end
+
+        def password_strength_rules_heading_classes
+          { classes: klasses("text-(length:--sp-text-sm)", "text-(--sp-color-muted-fg)") }
+        end
+
+        def password_strength_rules_classes
+          { classes: klasses("flex", "flex-col", "gap-(--sp-space-1)") }
+        end
+
+        # State styling keys off data-satisfied (toggled client-side by the controller),
+        # not a server-computed flag — the server always renders the initial (unmet) state.
+        def password_strength_rule_classes
+          state = [
+            "text-(--sp-color-muted-fg)",
+            "data-[satisfied=true]:text-(--sp-color-success)",
+            "data-[satisfied=true]:line-through"
+          ]
+          { classes: klasses("flex", "items-center", "gap-(--sp-space-1)", *state) }
+        end
+
+        def password_strength_rule_icon_classes
+          { classes: klasses("size-(--sp-icon-sm)", "shrink-0") }
+        end
+
+        def password_strength_level_classes
+          { classes: klasses("text-(length:--sp-text-base)", "font-semibold") }
+        end
+      end
+    end
+  end
+end

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

@@ -5,16 +5,65 @@ module StimulusPlumbers
     module Tailwind
       module Progress
         BAR = %w[
-          relative w-full h-2 overflow-hidden rounded-full
+          relative w-full overflow-hidden rounded-full
           bg-(--sp-color-muted)
         ].freeze
 
-        BAR_FILL = %w[
+        BAR_HEIGHTS = { false => "h-2", true => "h-5" }.freeze
+
+        # tabular-nums so the readout doesn't jitter as digits change under a drag.
+        VALUE_TEXT = %w[text-xs font-medium leading-none tabular-nums].freeze
+
+        # Row wrapper for an outside readout — the track shrinks to leave room for the text.
+        BAR_GROUP = %w[flex w-full items-center gap-(--sp-space-2)].freeze
+
+        # Clipped to the glyphs, this paints primary-fg up to the fill edge and fg past it, so the
+        # digits split rather than sit on a pill — neither color alone clears AA over both. The
+        # edge is --sp-progress-percent (set by the progress controller), 0 until it connects.
+        # Must stay on one line: Tailwind scans source text, so a class split across a string
+        # continuation or interpolation never appears contiguously and is silently dropped.
+        # rubocop:disable Layout/LineLength
+        BAR_VALUE_SPLIT = "bg-[linear-gradient(to_right,var(--sp-color-primary-fg)_0_calc(var(--sp-progress-percent,0)*1%),var(--sp-color-fg)_0)]"
+        # rubocop:enable Layout/LineLength
+
+        # Spans the track so the gradient's coordinates are the track's.
+        BAR_VALUE = [
+          *VALUE_TEXT,
+          "absolute inset-x-0 top-1/2 -translate-y-1/2 text-center pointer-events-none",
+          BAR_VALUE_SPLIT,
+          "bg-clip-text [-webkit-background-clip:text] text-transparent"
+        ].freeze
+
+        # Beside the track it never sits over the fill, so it needs no pill.
+        BAR_VALUE_OUTSIDE = [*VALUE_TEXT, "shrink-0 text-(--sp-color-primary)"].freeze
+
+        # `data-intent` (set per-segment by a ramp) overrides the default primary fill color.
+        FILL_BASE = %w[
           h-full rounded-full bg-(--sp-color-primary)
+          [&[data-intent=danger]]:bg-(--sp-color-destructive)
+          [&[data-intent=warning]]:bg-(--sp-color-warning)
+          [&[data-intent=success]]:bg-(--sp-color-success)
+        ].freeze
+
+        # animations.css renames a slot fill's keyframes but reads iteration-count off this.
+        FILL_INDETERMINATE = %w[
           [.sp-progress-indeterminate_&]:animate-progress-slide
           [.sp-progress-indeterminate_&]:motion-reduce:animate-none
         ].freeze
 
+        BAR_FILL = [*FILL_BASE, *FILL_INDETERMINATE].freeze
+
+        # Row of equal-width slots; each slot is its own track with a SEGMENT_FILL inside.
+        SEGMENT_GROUP = %w[flex w-full gap-(--sp-space-1)].freeze
+
+        SEGMENT = %w[
+          flex-1 h-2 overflow-hidden rounded-full
+          bg-(--sp-color-muted)
+        ].freeze
+
+        # Separate key so a theme can restyle a slot's chunk without touching the bar's.
+        SEGMENT_FILL = [*FILL_BASE, *FILL_INDETERMINATE].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
@@ -24,6 +73,8 @@ module StimulusPlumbers
           [&.sp-progress-indeterminate]:animate-spin
         ].freeze
 
+        RING_SIZES = { sm: "size-8", md: "size-12", lg: "size-16" }.freeze
+
         METER = %w[
           w-full h-2 rounded-full
           [&::-webkit-meter-bar]:rounded-full [&::-webkit-meter-bar]:bg-(--sp-color-muted)
@@ -35,16 +86,40 @@ module StimulusPlumbers
 
         private
 
-        def progress_bar_classes
-          { classes: klasses(*BAR) }
+        def progress_bar_classes(labelled: false)
+          { classes: klasses(*BAR, BAR_HEIGHTS.fetch(labelled)) }
+        end
+
+        def progress_bar_group_classes
+          { classes: klasses(*BAR_GROUP) }
+        end
+
+        def progress_bar_value_classes
+          { classes: klasses(*BAR_VALUE) }
+        end
+
+        def progress_bar_value_outside_classes
+          { classes: klasses(*BAR_VALUE_OUTSIDE) }
         end
 
         def progress_bar_fill_classes
           { classes: klasses(*BAR_FILL) }
         end
 
-        def progress_ring_classes
-          { classes: klasses(*RING) }
+        def progress_segment_group_classes
+          { classes: klasses(*SEGMENT_GROUP) }
+        end
+
+        def progress_segment_classes
+          { classes: klasses(*SEGMENT) }
+        end
+
+        def progress_segment_fill_classes
+          { classes: klasses(*SEGMENT_FILL) }
+        end
+
+        def progress_ring_classes(size: nil)
+          { classes: klasses(*RING, *Array(RING_SIZES[size])) }
         end
 
         def progress_meter_classes

data/lib/stimulus_plumbers/themes/tailwind_theme.rb

@@ -15,6 +15,7 @@ require_relative "tailwind/form/field"
 require_relative "tailwind/form/code"
 require_relative "tailwind/form/credit_card"
 require_relative "tailwind/form/input"
+require_relative "tailwind/password_strength"
 require_relative "tailwind/icon"
 require_relative "tailwind/indicator"
 require_relative "tailwind/layout"
@@ -39,6 +40,7 @@ module StimulusPlumbers
       include Tailwind::Form::Code
       include Tailwind::Form::CreditCard
       include Tailwind::Form::Input
+      include Tailwind::PasswordStrength
       include Tailwind::Icon
       include Tailwind::Indicator
       include Tailwind::Layout

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stimulus_plumbers_tailwind
 version: !ruby/object:Gem::Version
-  version: 0.4.14
+  version: 0.4.16
 platform: ruby
 authors:
 - Ryan Chang
@@ -712,6 +712,7 @@ files:
 - 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/password_strength.rb
 - lib/stimulus_plumbers/themes/tailwind/progress.rb
 - lib/stimulus_plumbers/themes/tailwind/timeline.rb
 - lib/stimulus_plumbers/themes/tailwind/timeline/group.rb