stimulus_plumbers_tailwind 0.4.14 → 0.4.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3fade9eb057604db9bcfaa34e4b5465436cf4121ca2fac2fc0135d8923d8fc15
-  data.tar.gz: 55d4ca0db20ba21adeba78c644be9a0da03d5136c55f549d697a20b290a38c39
+  metadata.gz: e3d393c9720a8f4e5b218bf27a64fcf9f87a52fb4ff2a3bf5dbcfa1a25268e46
+  data.tar.gz: 9f9fa3e2094157e15a0fd8b7be384ee2d84121e4511b978833318d5b350eb22d
 SHA512:
-  metadata.gz: e06686efbc235d53f5b6621f23595d3f234e79ad28ce67f02579a354e25db36cde73f567a1952113084507b3344677a81c4cd19657883b80786dfadd62a903f7
-  data.tar.gz: 10406b395a531faf1ccf516168673471bf4ebe0833958e7ca1b10457c239c04bfba2556dc58d12fc3b1263b7accdb80e3500b4eb79ded11962817623ecd28c50
+  metadata.gz: 9087c3f484f01a1a7ce2594722b0aec3c0773777587907ef455c02e87d86a47c7827620b15fec76bd8cdb437da022136b2328b69132e70d5faa58aec7d6c0f09
+  data.tar.gz: 1a2311457ecd926e7f90bd13ca3b4307e738eb57f6b117bd32ceec9d4b2c119541c0f45e992890ff065418ec02563308a4ace77297feb58c4a83278b2cf860b4

data/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines.
 
+---
+## [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/lib/stimulus_plumbers/tailwind/version.rb

@@ -2,6 +2,6 @@
 
 module StimulusPlumbers
   module Tailwind
-    VERSION = "0.4.14"
+    VERSION = "0.4.15"
   end
 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

@@ -9,12 +9,24 @@ module StimulusPlumbers
           bg-(--sp-color-muted)
         ].freeze
 
+        # `data-intent` (set per-segment by a ramp) overrides the default primary fill color.
         BAR_FILL = %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)
           [.sp-progress-indeterminate_&]:animate-progress-slide
           [.sp-progress-indeterminate_&]:motion-reduce:animate-none
         ].freeze
 
+        # Row of equal-width slots; each slot is its own track with a BAR_FILL inside.
+        SEGMENTED = %w[flex w-full gap-(--sp-space-1)].freeze
+
+        SEGMENT = %w[
+          flex-1 h-2 overflow-hidden rounded-full
+          bg-(--sp-color-muted)
+        ].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 +36,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)
@@ -43,8 +57,16 @@ module StimulusPlumbers
           { classes: klasses(*BAR_FILL) }
         end
 
-        def progress_ring_classes
-          { classes: klasses(*RING) }
+        def progress_segmented_classes
+          { classes: klasses(*SEGMENTED) }
+        end
+
+        def progress_segment_classes
+          { classes: klasses(*SEGMENT) }
+        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.15
 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