stimulus-password-strength 0.1.8 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 787fe4298029dcee2caeb7017f855898db05922601132037d26b8a7b22538694
-  data.tar.gz: a1eb04050ff77b58dc236c85ac2056744e2b4a082a48475d56060747a9123cf1
+  metadata.gz: e076bf216c6fa63a6dd532f6bad5752ac31ee45b683b55eb49d49a195a562fc8
+  data.tar.gz: 56e4e5731a05785411f46886423930bcea82447429849ae2995bbaa4facc50d7
 SHA512:
-  metadata.gz: af929a1bef9d1d660a12008e05f31242a1ac09b02e947ea64a551d9aec002a91aaf28d3db02b8050c4d1d5a74e1de968a2e1123fffa4966916fa062016df14f9
-  data.tar.gz: 4e9d6016040a619edf04ada7473f8e78c9404abc3f0aff2aa468ef8376caeb730ad3d7c9f984cb1531709990ba4e10f70be077a6f8049c7d9354b58d47a12a07
+  metadata.gz: 6e12645fbe9707b15b0a9d465fb4afa838f17b22b8e9b14f3d58a141e8613fe5942d730998fb88263016719ad041de9d947da1f62d81aa36103cfd8bcd35cf17
+  data.tar.gz: 5674b82638a142bee431e74eefad4f40969f8f268d72a30e9403a4dc3dfbb0f8804f86273456e31f43a6ea5bd5968598783f890177bdc64d3e4213b491cdcc15

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.1.9
+
+- removed positional Tailwind utilities from the default `toggle_class` so the show/hide icon no longer gets a second vertical translation on host apps that also use the inline `toggle_style`
+- removed default layout utility classes from the label row, status row, requirements row, and strength bar wrappers so layout mechanics now live in `*_style` only
+- documented that `toggle_class` should stay visual only and must not reintroduce `absolute`, `right-*`, `top-1/2`, or `-translate-y-1/2`
+- documented that other row and bar `*_class` settings should also stay visual-only
+- refreshed the installer template to reflect the new toggle customization contract
+
 ## 0.1.8
 
 - moved the field wrapper and label row layout into inline style defaults so critical flex/position behavior no longer depends on host-app utility classes

data/README.md

@@ -116,8 +116,9 @@ StimulusPasswordStrength.configure do |config|
   config.input_class = "w-full rounded-md border px-3 py-2 pr-16"
   config.wrapper_style = "position: relative;"
   config.toggle_style = "position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);"
+  config.toggle_class = "cursor-pointer text-xs font-medium text-gray-500 hover:text-gray-700"
   config.text_style = "width: 5.5rem; text-align: right; white-space: nowrap;"
-  config.status_row_class = "flex min-h-5 flex-row-reverse items-center justify-start gap-2"
+  config.status_row_class = ""
   config.requirements_style = "min-height: 1rem;"
   config.requirement_pending_style = "color: #6b7280;"
   config.requirement_met_style = "color: #047857;"
@@ -145,6 +146,8 @@ The gem now treats critical layout as component mechanics, not host-app theme:
 
 If you override these settings, preserve the same mechanics and keep right-side padding on the input (`pr-16` or equivalent) so typed text does not collide with the toggle.
 
+Do not put layout or positional utility classes into `toggle_class`, `status_row_class`, `requirements_class`, `label_row_class`, or `bar_track_class`. Mechanics already live in the corresponding `*_style` settings. Keep classes visual only.
+
 ## Post-Install Checklist
 
 1. Signup: weak password -> backend validation still works.

data/app/views/stimulus_password_strength/_field.html.erb

@@ -14,6 +14,14 @@
      data-password-strength-fair-text-color="<%= text_colors[:fair] %>"
      data-password-strength-good-text-color="<%= text_colors[:good] %>"
      data-password-strength-strong-text-color="<%= text_colors[:strong] %>">
+  <div data-password-strength-target="statusRow" class="<%= status_row_class %>" style="<%= status_row_style %>; visibility: hidden;">
+    <div data-password-strength-target="strengthTrack" class="<%= bar_track_class %>" style="<%= bar_track_style %>">
+      <div data-password-strength-target="strengthBar" class="<%= bar_base_class %>" style="<%= bar_style %>; width: 0%"></div>
+    </div>
+
+    <p data-password-strength-target="strengthText" class="<%= text_base_class %>" style="<%= text_style %>" aria-live="polite"></p>
+  </div>
+
   <% if label.present? %>
     <div class="<%= label_row_class %>" style="<%= label_row_style %>">
       <%= form.label attribute, label, class: label_class %>
@@ -40,14 +48,6 @@
         <% end %>
       </div>
     </div>
-
-    <div data-password-strength-target="statusRow" class="<%= status_row_class %>" style="<%= status_row_style %>; visibility: hidden;">
-      <div data-password-strength-target="strengthTrack" class="<%= bar_track_class %>" style="<%= bar_track_style %>">
-        <div data-password-strength-target="strengthBar" class="<%= bar_base_class %>" style="<%= bar_style %>; width: 0%"></div>
-      </div>
-
-      <p data-password-strength-target="strengthText" class="<%= text_base_class %>" style="<%= text_style %>" aria-live="polite"></p>
-    </div>
   <% else %>
     <% if requirements.any? %>
       <div class="<%= requirements_class %>" style="<%= requirements_style %>">
@@ -68,17 +68,9 @@
         <% end %>
       </div>
     <% end %>
-
-    <div data-password-strength-target="statusRow" class="<%= status_row_class %>" style="<%= status_row_style %>; visibility: hidden;">
-      <div data-password-strength-target="strengthTrack" class="<%= bar_track_class %>" style="<%= bar_track_style %>">
-        <div data-password-strength-target="strengthBar" class="<%= bar_base_class %>" style="<%= bar_style %>; width: 0%"></div>
-      </div>
-
-      <p data-password-strength-target="strengthText" class="<%= text_base_class %>" style="<%= text_style %>" aria-live="polite"></p>
-    </div>
   <% end %>
 
-  <div class="relative" style="<%= wrapper_style %>">
+  <div style="<%= wrapper_style %>">
     <%= form.password_field attribute,
                             required: required,
                             autocomplete: autocomplete,

data/lib/generators/stimulus_password_strength/install/templates/stimulus_password_strength.rb.tt

@@ -3,9 +3,10 @@
 StimulusPasswordStrength.configure do |config|
   # Example customization:
   # config.input_class = "w-full rounded-md border px-3 py-2 pr-16"
-  # config.text_style = "min-width: 2.5rem; text-align: right; white-space: nowrap;"
-  # config.status_row_class = "flex min-h-5 items-center gap-2"
-  # config.status_row_style = "min-height: 1rem;"
+  # config.toggle_class = "cursor-pointer text-xs font-medium text-gray-500 hover:text-gray-700"
+  # config.status_row_class = ""
+  # config.text_style = "display: inline-block; width: 5.5rem; text-align: right; white-space: nowrap;"
+  # config.status_row_style = "display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; gap: 0.5rem; min-height: 1rem;"
   # config.requirements_style = "min-height: 1rem;"
   # config.requirement_pending_style = "color: #6b7280;"
   # config.requirement_met_style = "color: #047857;"

data/lib/stimulus_password_strength/configuration.rb

@@ -33,24 +33,24 @@ module StimulusPasswordStrength
 
     def initialize
       @container_class = "space-y-1"
-      @label_row_class = "flex items-end justify-between gap-3"
+      @label_row_class = ""
       @label_row_style = "display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem;"
       @label_class = "block text-sm font-medium text-gray-700"
-      @header_aux_class = "flex justify-end"
+      @header_aux_class = ""
       @header_aux_style = "display: flex; justify-content: flex-end; align-items: center;"
-      @status_row_class = "flex min-h-5 flex-row-reverse items-center justify-start gap-2"
+      @status_row_class = ""
       @status_row_style = "display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; gap: 0.5rem; min-height: 1rem;"
-      @requirements_class = "flex justify-end gap-2"
+      @requirements_class = ""
       @requirements_style = "display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; min-height: 1rem;"
       @requirement_class = "text-xs text-right leading-tight"
       @requirement_style = "font-size: 0.75rem; line-height: 1rem; text-align: right;"
       @wrapper_style = "position: relative;"
       @input_class = "w-full rounded-xl border border-gray-300 px-4 py-3 pr-16 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
-      @toggle_class = "absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-xs font-medium text-gray-500 hover:text-gray-700"
+      @toggle_class = "cursor-pointer text-xs font-medium text-gray-500 hover:text-gray-700"
       @toggle_style = "position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; line-height: 0; z-index: 1;"
-      @bar_track_class = "h-1.5 w-20 overflow-hidden rounded-full bg-gray-100"
+      @bar_track_class = ""
       @bar_track_style = "height: 0.375rem; width: 5rem; overflow: hidden; border-radius: 9999px; background-color: #e5e7eb; visibility: hidden; flex-shrink: 0;"
-      @bar_base_class = "h-full rounded-full transition-all duration-300"
+      @bar_base_class = ""
       @bar_style = "display: block; height: 100%; border-radius: 9999px; visibility: hidden; transition: width 300ms ease, background-color 300ms ease;"
       @text_base_class = "text-xs"
       @text_style = "display: inline-block; width: 5.5rem; text-align: right; white-space: nowrap;"

data/lib/stimulus_password_strength/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module StimulusPasswordStrength
-  VERSION = "0.1.8"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stimulus-password-strength
 version: !ruby/object:Gem::Version
-  version: 0.1.8
+  version: 0.2.0
 platform: ruby
 authors:
 - Justyna Wojtczak