@kwtv/components 0.3.0 → 0.5.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 (49) hide show
  1. package/README.md +35 -0
  2. package/package.json +2 -2
  3. package/src/astro/Accordion.astro +10 -6
  4. package/src/astro/AccordionItem.astro +47 -43
  5. package/src/astro/ActiveFilterTags.astro +29 -25
  6. package/src/astro/Alert.astro +46 -41
  7. package/src/astro/Badge.astro +80 -76
  8. package/src/astro/Band.astro +104 -58
  9. package/src/astro/Breadcrumb.astro +33 -29
  10. package/src/astro/Button.astro +132 -128
  11. package/src/astro/Card.astro +64 -60
  12. package/src/astro/CartLine.astro +59 -55
  13. package/src/astro/Checkbox.astro +37 -32
  14. package/src/astro/Chip.astro +68 -64
  15. package/src/astro/DotGrid.astro +50 -46
  16. package/src/astro/EmptyState.astro +26 -22
  17. package/src/astro/FilterGroup.astro +29 -25
  18. package/src/astro/Filters.astro +50 -46
  19. package/src/astro/Footer.astro +179 -175
  20. package/src/astro/FooterColumn.astro +39 -35
  21. package/src/astro/Header.astro +67 -63
  22. package/src/astro/Icon.astro +1 -1
  23. package/src/astro/IconButton.astro +64 -60
  24. package/src/astro/Marquee.astro +33 -29
  25. package/src/astro/NavDropdown.astro +120 -116
  26. package/src/astro/NavLink.astro +59 -55
  27. package/src/astro/Newsletter.astro +58 -54
  28. package/src/astro/Pager.astro +43 -39
  29. package/src/astro/PickCard.astro +72 -68
  30. package/src/astro/ProductCard.astro +120 -116
  31. package/src/astro/Radio.astro +36 -32
  32. package/src/astro/Skeleton.astro +43 -39
  33. package/src/astro/Social.astro +26 -22
  34. package/src/astro/StepIndicator.astro +55 -51
  35. package/src/astro/Sticker.astro +50 -46
  36. package/src/astro/Swatch.astro +44 -40
  37. package/src/astro/Table.astro +58 -54
  38. package/src/astro/TableCard.astro +39 -35
  39. package/src/astro/TextField.astro +92 -88
  40. package/src/astro/Totals.astro +39 -35
  41. package/src/react/Drawer.css +60 -56
  42. package/src/react/Modal.css +97 -93
  43. package/src/react/NewsCarousel.css +108 -104
  44. package/src/react/QuantityStepper.css +84 -80
  45. package/src/react/Select.css +159 -155
  46. package/src/react/Toast.css +128 -124
  47. package/src/styles/base.css +30 -26
  48. package/src/styles/controls.css +183 -179
  49. package/src/styles/motion.css +203 -199
package/src/astro/Sticker.astro CHANGED
@@ -49,53 +49,57 @@ const classes = ["pl-sticker", `pl-sticker--${size}`, className]
49
49
  </span>
50
50
 
51
51
  <style>
52
- .pl-sticker {
53
- position: relative;
54
- display: inline-block;
55
- width: 112px;
56
- height: 112px;
57
- flex: none;
58
- }
59
- .pl-sticker--sm {
60
- width: 92px;
61
- height: 92px;
62
- }
63
- .pl-sticker__disc {
64
- position: absolute;
65
- inset: 0;
66
- display: block;
67
- width: 100%;
68
- height: 100%;
69
- }
70
- .pl-sticker__ring {
71
- transform-origin: 56px 56px;
72
- animation: pl-spin 18s linear infinite;
73
- }
74
- .pl-sticker__content {
75
- position: absolute;
76
- inset: 0;
77
- display: flex;
78
- flex-direction: column;
79
- align-items: center;
80
- justify-content: center;
81
- gap: var(--space-1);
82
- color: var(--surface-inverse-fg);
83
- text-align: center;
84
- font-size: var(--text-xs);
85
- font-weight: var(--weight-semibold);
86
- line-height: 1.2;
87
- letter-spacing: 0.02em;
88
- }
89
- .pl-sticker--sm .pl-sticker__content {
90
- font-size: var(--text-2xs);
91
- }
92
- .pl-sticker__arrow {
93
- animation: pl-bob 1.8s ease-in-out infinite;
94
- }
95
- @media (prefers-reduced-motion: reduce) {
96
- .pl-sticker__ring,
52
+ @layer reset, tokens, base, components, motion, utilities;
53
+
54
+ @layer components {
55
+ .pl-sticker {
56
+ position: relative;
57
+ display: inline-block;
58
+ width: 112px;
59
+ height: 112px;
60
+ flex: none;
61
+ }
62
+ .pl-sticker--sm {
63
+ width: 92px;
64
+ height: 92px;
65
+ }
66
+ .pl-sticker__disc {
67
+ position: absolute;
68
+ inset: 0;
69
+ display: block;
70
+ width: 100%;
71
+ height: 100%;
72
+ }
73
+ .pl-sticker__ring {
74
+ transform-origin: 56px 56px;
75
+ animation: pl-spin 18s linear infinite;
76
+ }
77
+ .pl-sticker__content {
78
+ position: absolute;
79
+ inset: 0;
80
+ display: flex;
81
+ flex-direction: column;
82
+ align-items: center;
83
+ justify-content: center;
84
+ gap: var(--space-1);
85
+ color: var(--surface-inverse-fg);
86
+ text-align: center;
87
+ font-size: var(--text-xs);
88
+ font-weight: var(--weight-semibold);
89
+ line-height: 1.2;
90
+ letter-spacing: 0.02em;
91
+ }
92
+ .pl-sticker--sm .pl-sticker__content {
93
+ font-size: var(--text-2xs);
94
+ }
97
95
  .pl-sticker__arrow {
98
- animation: none;
96
+ animation: pl-bob 1.8s ease-in-out infinite;
97
+ }
98
+ @media (prefers-reduced-motion: reduce) {
99
+ .pl-sticker__ring,
100
+ .pl-sticker__arrow {
101
+ animation: none;
102
+ }
99
103
  }
100
104
  }
101
105
  </style>
package/src/astro/Swatch.astro CHANGED
@@ -48,53 +48,57 @@ const ariaLabel = selected ? `${label}, geselecteerd` : label;
48
48
  ></button>
49
49
 
50
50
  <style>
51
- .ui-swatch {
52
- width: 30px;
53
- height: 30px;
54
- padding: 0;
55
- background: var(--swatch);
56
- border: 1px solid var(--border);
57
- border-radius: var(--radius-full);
58
- cursor: pointer;
59
- transition: box-shadow var(--duration-fast) var(--ease-standard);
60
- }
51
+ @layer reset, tokens, base, components, motion, utilities;
61
52
 
62
- .ui-swatch:hover,
63
- .ui-swatch.is-hover {
64
- box-shadow: 0 0 0 2px var(--border-strong);
65
- }
53
+ @layer components {
54
+ .ui-swatch {
55
+ width: 30px;
56
+ height: 30px;
57
+ padding: 0;
58
+ background: var(--swatch);
59
+ border: 1px solid var(--border);
60
+ border-radius: var(--radius-full);
61
+ cursor: pointer;
62
+ transition: box-shadow var(--duration-fast) var(--ease-standard);
63
+ }
66
64
 
67
- .ui-swatch:focus-visible,
68
- .ui-swatch.is-focus {
69
- outline: 2px solid var(--focus);
70
- outline-offset: 2px;
71
- box-shadow: 0 0 0 4px var(--focus-outer);
72
- }
65
+ .ui-swatch:hover,
66
+ .ui-swatch.is-hover {
67
+ box-shadow: 0 0 0 2px var(--border-strong);
68
+ }
73
69
 
74
- /* Selected: 2 px ring, readable without colour. */
75
- .ui-swatch.is-selected,
76
- .ui-swatch[aria-pressed="true"] {
77
- box-shadow:
78
- 0 0 0 2px var(--surface),
79
- 0 0 0 4px var(--border-strong);
80
- }
70
+ .ui-swatch:focus-visible,
71
+ .ui-swatch.is-focus {
72
+ outline: 2px solid var(--focus);
73
+ outline-offset: 2px;
74
+ box-shadow: 0 0 0 4px var(--focus-outer);
75
+ }
81
76
 
82
- .ui-swatch.is-disabled,
83
- .ui-swatch:disabled {
84
- opacity: 0.5;
85
- cursor: not-allowed;
86
- }
77
+ /* Selected: 2 px ring, readable without colour. */
78
+ .ui-swatch.is-selected,
79
+ .ui-swatch[aria-pressed="true"] {
80
+ box-shadow:
81
+ 0 0 0 2px var(--surface),
82
+ 0 0 0 4px var(--border-strong);
83
+ }
87
84
 
88
- @media (prefers-reduced-motion: reduce) {
89
- .ui-swatch {
90
- transition: none;
85
+ .ui-swatch.is-disabled,
86
+ .ui-swatch:disabled {
87
+ opacity: 0.5;
88
+ cursor: not-allowed;
91
89
  }
92
- }
93
90
 
94
- @media (max-width: 700px), (pointer: coarse) {
95
- .ui-swatch {
96
- width: 32px;
97
- height: 32px;
91
+ @media (prefers-reduced-motion: reduce) {
92
+ .ui-swatch {
93
+ transition: none;
94
+ }
95
+ }
96
+
97
+ @media (max-width: 700px), (pointer: coarse) {
98
+ .ui-swatch {
99
+ width: 32px;
100
+ height: 32px;
101
+ }
98
102
  }
99
103
  }
100
104
  </style>
package/src/astro/Table.astro CHANGED
@@ -58,66 +58,70 @@ const classes = ["ui-table", numeric && "ui-table--numeric", className]
58
58
  </table>
59
59
 
60
60
  <style>
61
- .ui-table {
62
- width: 100%;
63
- border-collapse: collapse;
64
- font-family: var(--font-sans);
65
- font-size: var(--text-sm);
66
- color: var(--text);
67
- }
61
+ @layer reset, tokens, base, components, motion, utilities;
68
62
 
69
- .ui-table :global(th),
70
- .ui-table :global(td) {
71
- padding: var(--space-3) var(--space-4);
72
- text-align: left;
73
- border-bottom: 1px solid var(--border);
74
- vertical-align: middle;
75
- }
63
+ @layer components {
64
+ .ui-table {
65
+ width: 100%;
66
+ border-collapse: collapse;
67
+ font-family: var(--font-sans);
68
+ font-size: var(--text-sm);
69
+ color: var(--text);
70
+ }
76
71
 
77
- .ui-table :global(th) {
78
- font-size: var(--text-xs);
79
- font-weight: var(--weight-semibold);
80
- color: var(--text-muted);
81
- white-space: nowrap;
82
- }
72
+ .ui-table :global(th),
73
+ .ui-table :global(td) {
74
+ padding: var(--space-3) var(--space-4);
75
+ text-align: left;
76
+ border-bottom: 1px solid var(--border);
77
+ vertical-align: middle;
78
+ }
83
79
 
84
- .ui-table :global(tbody tr) {
85
- transition: background-color var(--duration-fast) var(--ease-standard);
86
- }
87
- .ui-table :global(tbody tr:hover) {
88
- background: var(--surface-hover);
89
- }
90
- .ui-table :global(tbody tr:last-child td) {
91
- border-bottom: 0;
92
- }
80
+ .ui-table :global(th) {
81
+ font-size: var(--text-xs);
82
+ font-weight: var(--weight-semibold);
83
+ color: var(--text-muted);
84
+ white-space: nowrap;
85
+ }
93
86
 
94
- .ui-table :global(a) {
95
- color: var(--link);
96
- text-decoration: none;
97
- font-weight: var(--weight-medium);
98
- }
99
- .ui-table :global(a:hover) {
100
- text-decoration: underline;
101
- }
102
- .ui-table :global(a:focus-visible) {
103
- outline: 2px solid var(--focus);
104
- outline-offset: 2px;
105
- border-radius: var(--radius-sm);
106
- }
87
+ .ui-table :global(tbody tr) {
88
+ transition: background-color var(--duration-fast) var(--ease-standard);
89
+ }
90
+ .ui-table :global(tbody tr:hover) {
91
+ background: var(--surface-hover);
92
+ }
93
+ .ui-table :global(tbody tr:last-child td) {
94
+ border-bottom: 0;
95
+ }
107
96
 
108
- /* Numeric: the last column and any marked cell use tabular numerals and
109
- align right. */
110
- .ui-table--numeric :global(th:last-child),
111
- .ui-table--numeric :global(td:last-child),
112
- .ui-table :global(th.is-numeric),
113
- .ui-table :global(td.is-numeric) {
114
- text-align: right;
115
- font-variant-numeric: tabular-nums;
116
- }
97
+ .ui-table :global(a) {
98
+ color: var(--link);
99
+ text-decoration: none;
100
+ font-weight: var(--weight-medium);
101
+ }
102
+ .ui-table :global(a:hover) {
103
+ text-decoration: underline;
104
+ }
105
+ .ui-table :global(a:focus-visible) {
106
+ outline: 2px solid var(--focus);
107
+ outline-offset: 2px;
108
+ border-radius: var(--radius-sm);
109
+ }
117
110
 
118
- @media (prefers-reduced-motion: reduce) {
119
- .ui-table :global(tbody tr) {
120
- transition: none;
111
+ /* Numeric: the last column and any marked cell use tabular numerals and */
112
+ /* align right. */
113
+ .ui-table--numeric :global(th:last-child),
114
+ .ui-table--numeric :global(td:last-child),
115
+ .ui-table :global(th.is-numeric),
116
+ .ui-table :global(td.is-numeric) {
117
+ text-align: right;
118
+ font-variant-numeric: tabular-nums;
119
+ }
120
+
121
+ @media (prefers-reduced-motion: reduce) {
122
+ .ui-table :global(tbody tr) {
123
+ transition: none;
124
+ }
121
125
  }
122
126
  }
123
127
  </style>
package/src/astro/TableCard.astro CHANGED
@@ -24,44 +24,48 @@ const classes = ["ui-tablecard", className].filter(Boolean).join(" ");
24
24
  </div>
25
25
 
26
26
  <style>
27
- .ui-tablecard {
28
- display: flex;
29
- align-items: flex-start;
30
- justify-content: space-between;
31
- gap: var(--space-4);
32
- padding: var(--space-4) 0;
33
- border-bottom: 1px solid var(--border);
34
- }
27
+ @layer reset, tokens, base, components, motion, utilities;
35
28
 
36
- .ui-tablecard__main {
37
- display: flex;
38
- flex-direction: column;
39
- gap: var(--space-1);
40
- min-width: 0;
41
- }
29
+ @layer components {
30
+ .ui-tablecard {
31
+ display: flex;
32
+ align-items: flex-start;
33
+ justify-content: space-between;
34
+ gap: var(--space-4);
35
+ padding: var(--space-4) 0;
36
+ border-bottom: 1px solid var(--border);
37
+ }
42
38
 
43
- .ui-tablecard__end {
44
- display: flex;
45
- flex-direction: column;
46
- align-items: flex-end;
47
- gap: var(--space-1);
48
- text-align: right;
49
- }
39
+ .ui-tablecard__main {
40
+ display: flex;
41
+ flex-direction: column;
42
+ gap: var(--space-1);
43
+ min-width: 0;
44
+ }
50
45
 
51
- .ui-tablecard__end :global(b) {
52
- font-variant-numeric: tabular-nums;
53
- }
46
+ .ui-tablecard__end {
47
+ display: flex;
48
+ flex-direction: column;
49
+ align-items: flex-end;
50
+ gap: var(--space-1);
51
+ text-align: right;
52
+ }
54
53
 
55
- .ui-tablecard :global(a) {
56
- color: var(--link);
57
- text-decoration: none;
58
- }
59
- .ui-tablecard :global(a:hover) {
60
- text-decoration: underline;
61
- }
62
- .ui-tablecard :global(a:focus-visible) {
63
- outline: 2px solid var(--focus);
64
- outline-offset: 2px;
65
- border-radius: var(--radius-sm);
54
+ .ui-tablecard__end :global(b) {
55
+ font-variant-numeric: tabular-nums;
56
+ }
57
+
58
+ .ui-tablecard :global(a) {
59
+ color: var(--link);
60
+ text-decoration: none;
61
+ }
62
+ .ui-tablecard :global(a:hover) {
63
+ text-decoration: underline;
64
+ }
65
+ .ui-tablecard :global(a:focus-visible) {
66
+ outline: 2px solid var(--focus);
67
+ outline-offset: 2px;
68
+ border-radius: var(--radius-sm);
69
+ }
66
70
  }
67
71
  </style>
package/src/astro/TextField.astro CHANGED
@@ -131,110 +131,114 @@ const charCount =
131
131
  </label>
132
132
 
133
133
  <style>
134
- .ui-field {
135
- display: flex;
136
- flex-direction: column;
137
- gap: var(--space-1-5);
138
- font-family: var(--font-sans);
139
- }
134
+ @layer reset, tokens, base, components, motion, utilities;
135
+
136
+ @layer components {
137
+ .ui-field {
138
+ display: flex;
139
+ flex-direction: column;
140
+ gap: var(--space-1-5);
141
+ font-family: var(--font-sans);
142
+ }
140
143
 
141
- .ui-field__label {
142
- font-size: var(--text-sm);
143
- font-weight: var(--weight-medium);
144
- color: var(--text);
145
- }
144
+ .ui-field__label {
145
+ font-size: var(--text-sm);
146
+ font-weight: var(--weight-medium);
147
+ color: var(--text);
148
+ }
146
149
 
147
- .ui-field__req {
148
- color: var(--danger);
149
- margin-left: 2px;
150
- }
150
+ .ui-field__req {
151
+ color: var(--danger);
152
+ margin-left: 2px;
153
+ }
151
154
 
152
- .ui-input {
153
- min-height: 40px;
154
- padding: var(--space-2) var(--space-3);
155
- background: var(--surface);
156
- border: 1px solid var(--border-strong);
157
- border-radius: var(--radius-md);
158
- font-family: var(--font-sans);
159
- font-size: var(--text-sm);
160
- color: var(--text);
161
- transition:
162
- border-color var(--duration-fast) var(--ease-standard),
163
- box-shadow var(--duration-fast) var(--ease-standard);
164
- }
155
+ .ui-input {
156
+ min-height: 40px;
157
+ padding: var(--space-2) var(--space-3);
158
+ background: var(--surface);
159
+ border: 1px solid var(--border-strong);
160
+ border-radius: var(--radius-md);
161
+ font-family: var(--font-sans);
162
+ font-size: var(--text-sm);
163
+ color: var(--text);
164
+ transition:
165
+ border-color var(--duration-fast) var(--ease-standard),
166
+ box-shadow var(--duration-fast) var(--ease-standard);
167
+ }
165
168
 
166
- textarea.ui-input {
167
- min-height: 96px;
168
- resize: vertical;
169
- line-height: var(--leading-sm);
170
- }
169
+ textarea.ui-input {
170
+ min-height: 96px;
171
+ resize: vertical;
172
+ line-height: var(--leading-sm);
173
+ }
171
174
 
172
- .ui-input::placeholder {
173
- color: var(--text-muted);
174
- }
175
+ .ui-input::placeholder {
176
+ color: var(--text-muted);
177
+ }
175
178
 
176
- .ui-input:hover,
177
- .ui-input.is-hover {
178
- border-color: var(--border-strong);
179
- }
179
+ .ui-input:hover,
180
+ .ui-input.is-hover {
181
+ border-color: var(--border-strong);
182
+ }
180
183
 
181
- .ui-input:focus-visible,
182
- .ui-input.is-focus {
183
- outline: 2px solid var(--focus);
184
- outline-offset: 1px;
185
- border-color: var(--border-strong);
186
- box-shadow: 0 0 0 4px var(--focus-outer);
187
- }
184
+ .ui-input:focus-visible,
185
+ .ui-input.is-focus {
186
+ outline: 2px solid var(--focus);
187
+ outline-offset: 1px;
188
+ border-color: var(--border-strong);
189
+ box-shadow: 0 0 0 4px var(--focus-outer);
190
+ }
188
191
 
189
- /* Invalid: 2 px danger border. */
190
- .ui-input.is-invalid,
191
- .ui-input[aria-invalid="true"] {
192
- border-width: 2px;
193
- border-color: var(--danger);
194
- }
192
+ /* Invalid: 2 px danger border. */
193
+ .ui-input.is-invalid,
194
+ .ui-input[aria-invalid="true"] {
195
+ border-width: 2px;
196
+ border-color: var(--danger);
197
+ }
195
198
 
196
- .ui-input.is-valid {
197
- border-color: var(--success);
198
- }
199
+ .ui-input.is-valid {
200
+ border-color: var(--success);
201
+ }
199
202
 
200
- .ui-input:disabled,
201
- .ui-input.is-disabled {
202
- opacity: 0.5;
203
- cursor: not-allowed;
204
- }
203
+ .ui-input:disabled,
204
+ .ui-input.is-disabled {
205
+ opacity: 0.5;
206
+ cursor: not-allowed;
207
+ }
205
208
 
206
- .ui-field__hint {
207
- font-size: var(--text-xs);
208
- line-height: var(--leading-xs);
209
- color: var(--text-muted);
210
- }
209
+ .ui-field__hint {
210
+ font-size: var(--text-xs);
211
+ line-height: var(--leading-xs);
212
+ color: var(--text-muted);
213
+ }
211
214
 
212
- .ui-field__error {
213
- display: flex;
214
- align-items: center;
215
- gap: var(--space-1);
216
- font-size: var(--text-xs);
217
- line-height: var(--leading-xs);
218
- color: var(--danger);
219
- }
215
+ .ui-field__error {
216
+ display: flex;
217
+ align-items: center;
218
+ gap: var(--space-1);
219
+ font-size: var(--text-xs);
220
+ line-height: var(--leading-xs);
221
+ color: var(--danger);
222
+ }
220
223
 
221
- .ui-field__count {
222
- align-self: flex-end;
223
- font-size: var(--text-xs);
224
- color: var(--text-muted);
225
- font-variant-numeric: tabular-nums;
226
- }
224
+ .ui-field__count {
225
+ align-self: flex-end;
226
+ font-size: var(--text-xs);
227
+ color: var(--text-muted);
228
+ font-variant-numeric: tabular-nums;
229
+ }
227
230
 
228
- @media (prefers-reduced-motion: reduce) {
229
- .ui-input {
230
- transition: none;
231
+ @media (prefers-reduced-motion: reduce) {
232
+ .ui-input {
233
+ transition: none;
234
+ }
231
235
  }
232
- }
233
236
 
234
- /* Mobile inputs grow to 44 px under a touch scope. */
235
- @media (max-width: 700px), (pointer: coarse) {
236
- .ui-input {
237
- min-height: 44px;
237
+ /* Mobile inputs grow to 44 px under a touch scope. */
238
+ @media (max-width: 700px), (pointer: coarse) {
239
+ .ui-input {
240
+ min-height: 44px;
241
+ }
238
242
  }
239
243
  }
240
244
  </style>