stimulus-password-strength 0.1.9 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d7c21137ca8a5f181ad4bd726edc6692074146eb5c8ffb89299b16792398e5b2
-  data.tar.gz: 5da199bf30c539c22a71666bb9ef7fd163526bac6f17c3553f0b1b2af6d119ff
+  metadata.gz: e076bf216c6fa63a6dd532f6bad5752ac31ee45b683b55eb49d49a195a562fc8
+  data.tar.gz: 56e4e5731a05785411f46886423930bcea82447429849ae2995bbaa4facc50d7
 SHA512:
-  metadata.gz: 93e8e495a10b7eb5378f08d2cf1b58b360436b0baa21ece47b97d4f9a6c0eb78c07d7f026af4374abc7207809e7db80a3a74d5db7ecb256cb7eace382adffa54
-  data.tar.gz: 846abdc66278229d5fb8773467937ab38b63fd9ac73ee58a42b97f1e691467156f98ea84d8ca42908afbdcf2566715eb007f281fbe6e00a002252da0a46dd863
+  metadata.gz: 6e12645fbe9707b15b0a9d465fb4afa838f17b22b8e9b14f3d58a141e8613fe5942d730998fb88263016719ad041de9d947da1f62d81aa36103cfd8bcd35cf17
+  data.tar.gz: 5674b82638a142bee431e74eefad4f40969f8f268d72a30e9403a4dc3dfbb0f8804f86273456e31f43a6ea5bd5968598783f890177bdc64d3e4213b491cdcc15

data/CHANGELOG.md

@@ -3,7 +3,9 @@
 ## 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

data/README.md

@@ -118,7 +118,7 @@ StimulusPasswordStrength.configure do |config|
   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;"
@@ -146,7 +146,7 @@ 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 positional utility classes such as `absolute`, `right-*`, `top-1/2`, or `-translate-y-1/2` into `toggle_class`. Positioning is already owned by `toggle_style`; duplicating it can shift the icon upward.
+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
 

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

@@ -4,9 +4,9 @@ StimulusPasswordStrength.configure do |config|
   # Example customization:
   # config.input_class = "w-full rounded-md border px-3 py-2 pr-16"
   # 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_class = "flex min-h-5 items-center gap-2"
-  # config.status_row_style = "min-height: 1rem;"
+  # 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,14 +33,14 @@ 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;"
@@ -48,9 +48,9 @@ module StimulusPasswordStrength
       @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 = "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.9"
+  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.9
+  version: 0.2.0
 platform: ruby
 authors:
 - Justyna Wojtczak