css-zero 4.0.3 → 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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 968fe17a2f45545b00f3e3868a0119246043b00866c751b77b9ff6571a5d1e67
4
- data.tar.gz: e1cc5cce55aa89119edea55a557effabc3336fef3d0ad7e71f02134ad17b4c7b
3
+ metadata.gz: 023fbd4d3c36d028055dd536bf1a9964f53145035e8376fd89a5c0c49cd51171
4
+ data.tar.gz: 4bb4d9eb64aae0797e3293618745b3dfd8c2dfea96c55084d2d0578cdfbc8a21
5
5
  SHA512:
6
- metadata.gz: f4a95823923447a9fbc8fd97f797c148301ba9d71495acc336e0c9342bd7376f0c004c8de1b76f448b4fe5697b7ece48af244a2b6d5ad4215f654dab31bd5f88
7
- data.tar.gz: 654b0076a84b5353d00e28d8752aafe87b0532aa26adde4146d1c15bab2034fe603b188e1690e90d3fa9e25808427e75f28b6f74d1666e4c63fc924f770d4ba0
6
+ metadata.gz: e45eb0a333e7a607939ee3fbf32be7da6d32236a0a9d1a5ae85bd191aa92ab79fe22a741c7c5c3d045d53f8c19eb527192c6e689d23ff55d01413f2370f1398a
7
+ data.tar.gz: dee5c54a27c00241b4d18c112845ad9e14d0e90988c605b0cc61801d6358ff5714e7652d0e2f6d0bc7e021ecb19588f171a71238b328b0d9795c91cccbd4ba78
data/CHANGELOG.md CHANGED
@@ -1,3 +1,23 @@
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
+
10
+ ## 4.1.0 - 2026-08-11
11
+ - Add --color-surface-negative
12
+ - Add --color-text-negative
13
+ - Add .bg-negative
14
+ - Remove --color-negative
15
+ - Remove --color-positive
16
+ - Remove positive variants
17
+ - Remove .text-positive
18
+ - Cosmetic dropzone text message
19
+ - Table with checkbox
20
+
1
21
  ## 4.0.3 - 2026-08-10
2
22
  - Add data-sound-volume-value
3
23
  - Button sizes
@@ -66,8 +66,7 @@
66
66
  .text-primary { color: var(--color-text); }
67
67
  .text-reversed { color: var(--color-text-reversed); }
68
68
  .text-subtle { color: var(--color-text-subtle); }
69
- .text-positive { color: var(--color-positive); }
70
- .text-negative { color: var(--color-negative); }
69
+ .text-negative { color: var(--color-text-negative); }
71
70
  .text-link { color: var(--color-link); text-decoration: underline; }
72
71
 
73
72
  .text-xs { font-size: var(--text-xs); }
@@ -90,6 +89,7 @@
90
89
  .bg-shade { background-color: var(--color-border-light); }
91
90
  .bg-selected { background-color: var(--color-selected); }
92
91
  .bg-highlight { background-color: var(--color-highlight); }
92
+ .bg-negative { background-color: var(--color-surface-negative); }
93
93
  .bg-transparent { background-color: transparent; }
94
94
 
95
95
  /****************************************************************
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "4.0.3"
2
+ VERSION = "4.2.0"
3
3
  end
@@ -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:
@@ -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>
@@ -8,10 +8,6 @@
8
8
  padding: var(--size-2) var(--size-2_5);
9
9
  }
10
10
 
11
- .alert--positive {
12
- --alert-color: light-dark(var(--green-600), var(--green-400));
13
- }
14
-
15
11
  .alert--negative {
16
12
  --alert-color: light-dark(var(--red-600), var(--red-400));
17
13
  }
@@ -32,14 +32,8 @@
32
32
  --badge-color: var(--color-text);
33
33
  }
34
34
 
35
- .badge--positive {
36
- --badge-background: var(--color-positive);
37
- --badge-border-color: transparent;
38
- --badge-color: white;
39
- }
40
-
41
35
  .badge--negative {
42
- --badge-background: var(--color-negative);
36
+ --badge-background: var(--color-surface-negative);
43
37
  --badge-border-color: transparent;
44
- --badge-color: white;
38
+ --badge-color: var(--color-text-negative);
45
39
  }
@@ -56,18 +56,11 @@
56
56
  --btn-box-shadow: none;
57
57
  }
58
58
 
59
- .btn--positive {
60
- --btn-background: var(--color-positive);
61
- --btn-border-color: transparent;
62
- --btn-color: white;
63
- --btn-hover-color: rgb(from var(--color-positive) r g b / .9);
64
- }
65
-
66
59
  .btn--negative {
67
- --btn-background: var(--color-negative);
60
+ --btn-background: var(--color-surface-negative);
68
61
  --btn-border-color: transparent;
69
- --btn-color: white;
70
- --btn-hover-color: rgb(from var(--color-negative) r g b / .9);
62
+ --btn-color: var(--color-text-negative);
63
+ --btn-hover-color: rgb(from var(--color-surface-negative) r g b / .9);
71
64
  }
72
65
 
73
66
  .btn--plain {
@@ -131,7 +131,7 @@
131
131
  }
132
132
 
133
133
  .invalid .ts-control {
134
- border-color: var(--color-negative);
134
+ border-color: var(--color-text-negative);
135
135
  }
136
136
 
137
137
  [data-controller~="combobox"] {
@@ -11,13 +11,15 @@
11
11
  }
12
12
 
13
13
  .dropzone .dz-preview .dz-error-message {
14
- background: var(--color-negative);
14
+ background: var(--color-surface-negative);
15
+ color: var(--color-text-negative);
15
16
  text-align: center;
16
17
  text-wrap: balance;
18
+ overflow-wrap: anywhere;
17
19
  }
18
20
 
19
21
  .dropzone .dz-preview .dz-error-message::after {
20
- border-bottom: 6px solid var(--color-negative);
22
+ border-bottom: 6px solid var(--color-surface-negative);
21
23
  }
22
24
 
23
25
  .dropzone .dz-preview:has(.dz-remove) .dz-error-message {
@@ -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);
@@ -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));
@@ -43,7 +44,7 @@
43
44
  }
44
45
 
45
46
  &:user-invalid {
46
- border-color: var(--color-negative);
47
+ border-color: var(--color-text-negative);
47
48
  }
48
49
 
49
50
  &:user-invalid + [feedback] {
@@ -59,13 +60,13 @@
59
60
  }
60
61
 
61
62
  .field_with_errors & {
62
- border-color: var(--color-negative);
63
+ border-color: var(--color-text-negative);
63
64
  }
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 {
@@ -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
  }
@@ -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
+ }
@@ -20,6 +20,10 @@
20
20
  background-color: rgb(from var(--color-border-light) r g b / .5);
21
21
  }
22
22
 
23
+ tr:has(:checked) {
24
+ background-color: var(--color-border-light);
25
+ }
26
+
23
27
  th {
24
28
  font-weight: var(--font-medium);
25
29
  text-align: start;
@@ -1,9 +1,11 @@
1
1
  :root {
2
2
  --color-bg: light-dark(white, var(--zinc-950));
3
3
  --color-surface: light-dark(white, var(--zinc-900));
4
+ --color-surface-negative: light-dark(var(--red-100), var(--red-950));
4
5
  --color-text: light-dark(var(--zinc-950), white);
5
6
  --color-text-reversed: light-dark(white, var(--zinc-950));
6
7
  --color-text-subtle: light-dark(var(--zinc-500), var(--zinc-400));
8
+ --color-text-negative: light-dark(var(--red-600), var(--red-400));
7
9
  --color-link: light-dark(var(--blue-700), var(--blue-400));
8
10
  --color-border-light: light-dark(var(--zinc-100), var(--zinc-800));
9
11
  --color-border: light-dark(var(--zinc-200), var(--zinc-700));
@@ -13,8 +15,6 @@
13
15
  --color-highlight: light-dark(var(--yellow-200), var(--yellow-900));
14
16
  --color-primary: light-dark(var(--zinc-900), var(--zinc-50));
15
17
  --color-secondary: light-dark(var(--zinc-100), var(--zinc-800));
16
- --color-negative: light-dark(var(--red-600), var(--red-600));
17
- --color-positive: light-dark(var(--green-700), var(--green-700));
18
18
  }
19
19
 
20
20
  * {
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.0.3
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
@@ -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>
@@ -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>