css-zero 4.1.0 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +9 -0
  3. data/lib/css_zero/version.rb +1 -1
  4. data/lib/generators/css_zero/add/resources.yml +0 -3
  5. data/lib/generators/css_zero/add/templates/app/assets/images/avatar.svg +1 -1
  6. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dual_range.css +4 -4
  7. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +4 -3
  8. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input_otp.css +40 -7
  9. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/resizable.css +20 -5
  10. metadata +1 -3
  11. data/lib/generators/css_zero/add/templates/app/assets/images/grip-horizontal-zink-500.svg +0 -1
  12. data/lib/generators/css_zero/add/templates/app/assets/images/grip-vertical-zink-500.svg +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 102ef4b7727a825a523e0aa058e503f788e591b5ae9239eb14340fc9edb378a1
4
- data.tar.gz: 16a552a5832745f62b46643b0418d43ade6297b3f0e214f649f2160245eb7dc8
3
+ metadata.gz: 023fbd4d3c36d028055dd536bf1a9964f53145035e8376fd89a5c0c49cd51171
4
+ data.tar.gz: 4bb4d9eb64aae0797e3293618745b3dfd8c2dfea96c55084d2d0578cdfbc8a21
5
5
  SHA512:
6
- metadata.gz: 406054c28bb36ab1883a09cb8469c1ec9aa9ea2d19feb26efbe4a6ca4dd53a27a802c1007008c435c396b3cc54925a2809ad11edfeb31eba4b99d970b358621c
7
- data.tar.gz: 47978e63fa903de1e63e8f7ccc9148b38f77f353e16e28302824dccb4c4d1720653c980832b2d133f235bc9ceb7527a63518927b4a4ebe6f2de284d5b9dc3b83
6
+ metadata.gz: e45eb0a333e7a607939ee3fbf32be7da6d32236a0a9d1a5ae85bd191aa92ab79fe22a741c7c5c3d045d53f8c19eb527192c6e689d23ff55d01413f2370f1398a
7
+ data.tar.gz: dee5c54a27c00241b4d18c112845ad9e14d0e90988c605b0cc61801d6358ff5714e7652d0e2f6d0bc7e021ecb19588f171a71238b328b0d9795c91cccbd4ba78
data/CHANGELOG.md CHANGED
@@ -1,3 +1,12 @@
1
+ ## 4.2.0 - 2026-08-16
2
+ - Simplify resizable
3
+ - Adjust input range
4
+ - Adjust dual range
5
+ - Support textarea in input actor
6
+ - Allow rows="auto" on any input
7
+ - Replace default avatar image
8
+ - Rebuild input_otp on top of input-otp-zero
9
+
1
10
  ## 4.1.0 - 2026-08-11
2
11
  - Add --color-surface-negative
3
12
  - Add --color-text-negative
data/lib/css_zero/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "4.1.0"
2
+ VERSION = "4.2.0"
3
3
  end
data/lib/generators/css_zero/add/resources.yml CHANGED
@@ -103,7 +103,6 @@ input_copyable:
103
103
  - app/javascript/controllers/input_copyable_controller.js
104
104
  - app/assets/stylesheets/input_copyable.css
105
105
  input_otp:
106
- - app/javascript/controllers/form_controller.js
107
106
  - app/assets/stylesheets/input_otp.css
108
107
  input_revealable:
109
108
  - app/javascript/controllers/input_revealable_controller.js
@@ -140,8 +139,6 @@ progress:
140
139
  resizable:
141
140
  - app/assets/stylesheets/resizable.css
142
141
  - app/javascript/controllers/resizable_controller.js
143
- - app/assets/images/grip-horizontal-zink-500.svg
144
- - app/assets/images/grip-vertical-zink-500.svg
145
142
  separator:
146
143
  - app/assets/stylesheets/separator.css
147
144
  sheet:
data/lib/generators/css_zero/add/templates/app/assets/images/avatar.svg CHANGED
@@ -1 +1 @@
1
- <svg enable-background="new 0 0 17 17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h17v17h-17z" fill="#fff"/><path d="m0 0h17v17h-17z" fill-opacity=".33"/><path d="m10.9 11.9-.5-.2c-.2-.4-.2-.8-.1-1.2.9-.9 1.3-2.1 1.2-3.3 0-1.8-1.3-3.2-3.1-3.2s-3 1.4-3 3.2c-.1 1.1.3 2.4 1.2 3.3.2.4.2.8-.1 1.2l-.5.2c-1.9.7-3.4 1.1-3.9 2-.3.9-.6 1.8-.6 2.7 0 .2.2.4.4.4h12.9c.2 0 .4-.2.4-.4 0-.9-.2-1.8-.6-2.7-.3-.8-1.8-1.3-3.7-2z" fill-opacity=".5"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="532" height="532" viewBox="0 0 532 532" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><circle cx="270.75986" cy="260.93427" r="86.34897" fill="#ffb6b6"/><polygon points="221.18982 360.05209 217.28876 320.6185 295.18982 306.05209 341.18982 418.05209 261.18982 510.05209 204.18982 398.05209 221.18982 360.05209" fill="#ffb6b6"/><path d="m216.0374,340.35736l17.03111,3.84802s-13.38821-42.45453-8.84396-46.50766c4.54427-4.05316,15.68007,2.33328,15.68007,2.33328l11.70201,13.1199,14.25394-14.51239s15.47495-19.2421,21.53397-24.6463-3.67319-25.46364-3.67319-25.46364c0,0,89.89185-24.23923,56.44299-67.83968,0,0-19.61093-34.18452-25.99734-23.04871-6.38641,11.1358-14.00162-6.55013-14.00162-6.55013l-23.25381,4.42198s-45.89429-27.06042-89.45331,30.82959c-43.55902,57.89003,28.57916,154.01572,28.57916,154.01572h-.00002Z" fill="#2f2e41"/><path d="m433.16003,472.95001c-47.19,38.26001-105.57001,59.04999-167.16003,59.04999-56.23999,0-109.81-17.33997-154.62-49.47998.08002-.84003.16003-1.66998.23004-2.5,1.19-13,2.25-25.64001,2.94995-36.12,2.71002-40.69,97.64001-67.81,97.64001-67.81,0,0,.42999.42999,1.29004,1.17999,5.23999,4.59998,26.50995,21.27997,63.81,25.94,33.25995,4.15997,44.20996-15.57001,47.51996-25.02002,1-2.88,1.30005-4.81,1.30005-4.81l97.63995,46.10999c6.37,9.10004,8.86005,28.70001,9.35004,50.73004.01996.90997.03998,1.81.04999,2.72998Z" fill="#dadada"/><path d="m454.09003,77.91003C403.85004,27.66998,337.05005,0,266,0S128.15002,27.66998,77.91003,77.91003C27.67004,128.15002,0,194.95001,0,266c0,64.85004,23.05005,126.16003,65.29004,174.57001,4.02997,4.63,8.23999,9.14001,12.62,13.52002,1.02997,1.02997,2.07001,2.06,3.12,3.06,2.79999,2.70996,5.65002,5.35999,8.54999,7.92999,1.76001,1.57001,3.54004,3.10999,5.34003,4.62,1.40997,1.19,2.82001,2.35999,4.25,3.51001.02997.02997.04999.04999.07996.07001,3.97003,3.19995,8.01001,6.27997,12.13,9.23999,44.81,32.14001,98.37999,49.47998,154.61998,49.47998,61.59003,0,119.97003-20.78998,167.16003-59.04999,3.84998-3.12,7.62-6.35999,11.32001-9.71002,3.26996-2.95996,6.46997-6.01001,9.60999-9.14996.98999-.98999,1.97998-1.98999,2.95001-3,2.70001-2.78003,5.32001-5.61005,7.88-8.48004,43.37-48.71997,67.07996-110.83997,67.07996-176.60999,0-71.04999-27.66998-137.84998-77.90997-188.08997Zm10.17999,362.20997c-2.5,2.84003-5.06,5.64001-7.67999,8.37-4.08002,4.25-8.28998,8.37-12.64001,12.34003-1.64996,1.52002-3.32001,3-5.01001,4.46997-1.91998,1.67004-3.85999,3.31-5.82996,4.92004-15.53003,12.75-32.54004,23.75-50.73004,32.70996-7.19,3.54999-14.56,6.78003-22.09998,9.67004-29.28998,11.23999-61.08002,17.39996-94.28003,17.39996-32.03998,0-62.75995-5.73999-91.19-16.23999-11.66998-4.29999-22.94995-9.40997-33.77997-15.26001-1.59003-.85999-3.16998-1.72998-4.73999-2.62-8.26001-4.67999-16.25-9.78998-23.91998-15.31-.25-.17999-.51001-.37-.76001-.54999-5.46002-3.94-10.77002-8.09003-15.90002-12.45001-1.88-1.59003-3.73999-3.20001-5.57001-4.84998-2.97998-2.65002-5.89996-5.38-8.75-8.18005-5.39996-5.28998-10.56-10.79999-15.48999-16.52997C26.09003,391.77002,2,331.65002,2,266,2,120.42999,120.43005,2,266,2s264,118.42999,264,264c0,66.66003-24.82996,127.62-65.72998,174.12Z" fill="#3f3d56"/></svg>
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dual_range.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @import url("https://esm.sh/@stanko/dual-range-input@1.0.1/dist/index.css");
2
2
 
3
3
  .dual-range-input {
4
- --dri-height: 1rem;
4
+ --dri-height: var(--size-2_5);
5
5
  --dri-thumb-width: var(--dri-height);
6
6
  --dri-thumb-height: var(--dri-height);
7
7
  --dri-thumb-color: var(--color-primary);
@@ -10,10 +10,10 @@
10
10
  --dri-thumb-border-color: var(--dri-thumb-color);
11
11
  --dri-thumb-border-hover-color: var(--dri-thumb-border-color);
12
12
  --dri-thumb-border-active-color: var(--dri-thumb-border-color);
13
- --dri-thumb-border-radius: 1rem;
14
- --dri-thumb-border-width: 1px;
13
+ --dri-thumb-border-radius: var(--rounded-2xl);
14
+ --dri-thumb-border-width: var(--border);
15
15
  --dri-track-height: calc(var(--dri-height) * .45);
16
- --dri-track-border-radius: 1rem;
16
+ --dri-track-border-radius: var(--rounded-2xl);
17
17
  --dri-track-color: var(--color-border);
18
18
  --dri-track-filled-color: var(--color-primary);
19
19
  --dri-track-filled-gradient-mid-color: var(--dri-track-filled-color);
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css CHANGED
@@ -19,9 +19,10 @@
19
19
 
20
20
  &:is([type="range"]) {
21
21
  accent-color: var(--input-accent-color, var(--color-primary));
22
+ zoom: var(--input-range-zoom, .625);
22
23
  }
23
24
 
24
- &:is(textarea[rows="auto"]) {
25
+ &:is([rows="auto"]) {
25
26
  field-sizing: content;
26
27
  max-block-size: calc(.875rem + var(--input-max-rows, 10lh));
27
28
  min-block-size: calc(.875rem + var(--input-rows, 2lh));
@@ -64,8 +65,8 @@
64
65
  }
65
66
 
66
67
  .input--actor {
67
- > input {
68
- inline-size: 100%; outline: 0;
68
+ > :is(input, textarea) {
69
+ field-sizing: inherit; flex-grow: 1; min-inline-size: 0; outline: 0; resize: none;
69
70
  }
70
71
 
71
72
  &:focus-within {
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input_otp.css CHANGED
@@ -1,8 +1,41 @@
1
- .input--otp {
2
- font-family: ui-monospace, monospace;
3
- font-weight: var(--font-black);
4
- inline-size: var(--input-otp-size, auto);
5
- letter-spacing: 1ch;
6
- min-inline-size: var(--input-otp-size, auto);
7
- text-align: center;
1
+ @import url("https://esm.sh/input-otp-zero@0.0.3/dist/input-otp-zero.css");
2
+
3
+ input-otp {
4
+ --input-otp-gap: var(--size-2);
5
+ --input-otp-group-gap: var(--size-3);
6
+
7
+ --input-otp-slot-width: var(--size-8);
8
+ --input-otp-slot-height: var(--size-8);
9
+ --input-otp-slot-radius: var(--rounded-lg);
10
+ --input-otp-slot-background: var(--color-surface);
11
+ --input-otp-slot-background-active: var(--color-surface);
12
+
13
+ --input-otp-border-color: var(--color-border);
14
+ --input-otp-border-color-active: var(--color-border-dark);
15
+
16
+ --input-otp-ring-color: var(--color-selected-dark);
17
+
18
+ --input-otp-color: var(--color-text);
19
+ --input-otp-placeholder-color: var(--color-text-subtle);
20
+ --input-otp-font-family: var(--font-monospace-code);
21
+ --input-otp-font-size: var(--text-sm);
22
+ --input-otp-font-weight: var(--font-medium);
23
+
24
+ --input-otp-caret-color: var(--color-text);
25
+ --input-otp-caret-height: var(--size-4);
26
+ --input-otp-caret-blink-duration: var(--time-1000);
27
+
28
+ --input-otp-separator-color: var(--color-text-subtle);
29
+ --input-otp-separator-width: var(--size-6);
30
+
31
+ --input-otp-transition-duration: var(--time-150);
32
+ --input-otp-transition-easing: var(--ease-out-3);
33
+ --input-otp-disabled-opacity: var(--opacity-50);
34
+ }
35
+
36
+ .input-otp--lg {
37
+ --input-otp-slot-width: var(--size-11);
38
+ --input-otp-slot-height: var(--size-12);
39
+ --input-otp-font-size: var(--text-xl);
40
+ --input-otp-caret-height: var(--size-6);
8
41
  }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/resizable.css CHANGED
@@ -9,19 +9,34 @@
9
9
  }
10
10
 
11
11
  .gutter {
12
+ align-items: center;
13
+ background-image: linear-gradient(var(--color-border), var(--color-border));
12
14
  background-position: center;
13
15
  background-repeat: no-repeat;
14
- background-size: contain;
16
+ display: flex;
17
+ justify-content: center;
18
+ }
19
+
20
+ .gutter::after {
21
+ background-color: var(--color-border);
22
+ border-radius: var(--rounded-lg);
23
+ content: "";
15
24
  }
16
25
 
17
26
  .gutter-horizontal {
18
- background-image: url("grip-vertical-zink-500.svg");
19
- border-inline-width: var(--border);
27
+ background-size: var(--border) 100%;
20
28
  cursor: col-resize;
21
29
  }
22
30
 
31
+ .gutter-horizontal::after {
32
+ block-size: var(--size-6); inline-size: var(--size-1);
33
+ }
34
+
23
35
  .gutter-vertical {
24
- background-image: url("grip-horizontal-zink-500.svg");
25
- border-block-width: var(--border);
36
+ background-size: 100% var(--border);
26
37
  cursor: row-resize;
27
38
  }
39
+
40
+ .gutter-vertical::after {
41
+ block-size: var(--size-1); inline-size: var(--size-6);
42
+ }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: css-zero
3
3
  version: !ruby/object:Gem::Version
4
- version: 4.1.0
4
+ version: 4.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Lázaro Nixon
@@ -64,8 +64,6 @@ files:
64
64
  - lib/generators/css_zero/add/templates/app/assets/images/ellipsis.svg
65
65
  - lib/generators/css_zero/add/templates/app/assets/images/eye-off.svg
66
66
  - lib/generators/css_zero/add/templates/app/assets/images/eye.svg
67
- - lib/generators/css_zero/add/templates/app/assets/images/grip-horizontal-zink-500.svg
68
- - lib/generators/css_zero/add/templates/app/assets/images/grip-vertical-zink-500.svg
69
67
  - lib/generators/css_zero/add/templates/app/assets/images/loading.svg
70
68
  - lib/generators/css_zero/add/templates/app/assets/images/minus.svg
71
69
  - lib/generators/css_zero/add/templates/app/assets/images/moon.svg
data/lib/generators/css_zero/add/templates/app/assets/images/grip-horizontal-zink-500.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#71717a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-horizontal-icon lucide-grip-horizontal"><circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/></svg>
data/lib/generators/css_zero/add/templates/app/assets/images/grip-vertical-zink-500.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#71717a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical-icon lucide-grip-vertical"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>