elements-kit 0.10.2 → 0.12.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 (3) hide show
  1. package/dist/ui/arrow/arrow.css +62 -0
  2. package/dist/ui/text-input/text-input.css +386 -0
  3. package/package.json +1 -1
package/dist/ui/arrow/arrow.css ADDED
@@ -0,0 +1,62 @@
1
+ .x-arrow {
2
+ --arrow-direction: 1;
3
+ vertical-align: -.125em;
4
+ width: 1em;
5
+ height: 1em;
6
+ color: inherit;
7
+ transform: scaleX(var(--arrow-direction)) translateX(0);
8
+ flex-shrink: 0;
9
+ transition: transform .2s;
10
+ display: inline-block;
11
+ position: relative;
12
+ }
13
+
14
+ [dir="rtl"] .x-arrow, .x-arrow[dir="rtl"] {
15
+ --arrow-direction: -1;
16
+ }
17
+
18
+ .x-arrow:before {
19
+ content: "";
20
+ background-color: currentColor;
21
+ position: absolute;
22
+ inset: 0;
23
+ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z'/></svg>");
24
+ mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z'/></svg>");
25
+ -webkit-mask-position: center;
26
+ mask-position: center;
27
+ -webkit-mask-size: 100% 100%;
28
+ mask-size: 100% 100%;
29
+ -webkit-mask-repeat: no-repeat;
30
+ mask-repeat: no-repeat;
31
+ }
32
+
33
+ .x-arrow:after {
34
+ content: "";
35
+ clip-path: inset(0 0 0 100%);
36
+ background-color: currentColor;
37
+ transition: clip-path .2s;
38
+ position: absolute;
39
+ inset: 0;
40
+ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' d='M1.75 8H11'/></svg>");
41
+ mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' d='M1.75 8H11'/></svg>");
42
+ -webkit-mask-position: center;
43
+ mask-position: center;
44
+ -webkit-mask-size: 100% 100%;
45
+ mask-size: 100% 100%;
46
+ -webkit-mask-repeat: no-repeat;
47
+ mask-repeat: no-repeat;
48
+ }
49
+
50
+ :where(:hover) > .x-arrow, :where(:focus-visible) > .x-arrow {
51
+ transform: scaleX(var(--arrow-direction)) translateX(.25em);
52
+ }
53
+
54
+ :where(:hover) > .x-arrow:after, :where(:focus-visible) > .x-arrow:after {
55
+ clip-path: inset(0);
56
+ }
57
+
58
+ @media (prefers-reduced-motion: reduce) {
59
+ .x-arrow, .x-arrow:after {
60
+ transition: none;
61
+ }
62
+ }
package/dist/ui/text-input/text-input.css ADDED
@@ -0,0 +1,386 @@
1
+ .x-text-input {
2
+ font-family: var(--default-font-family);
3
+ font-weight: var(--font-weight-regular);
4
+ text-align: start;
5
+ font-style: normal;
6
+ }
7
+
8
+ .x-text-input:where(input) {
9
+ width: 100%;
10
+ height: var(--text-input-height);
11
+ border-radius: var(--text-input-border-radius);
12
+ text-indent: var(--text-input-padding);
13
+ cursor: text;
14
+ }
15
+
16
+ .x-text-input:where(input):where([type="number"]) {
17
+ -moz-appearance: textfield;
18
+ }
19
+
20
+ .x-text-input:where(input)::-webkit-inner-spin-button {
21
+ appearance: none;
22
+ }
23
+
24
+ .x-text-input:where(input)::-webkit-search-cancel-button {
25
+ appearance: none;
26
+ }
27
+
28
+ .x-text-input:where(input)::selection {
29
+ background-color: var(--text-input-selection-color);
30
+ }
31
+
32
+ .x-text-input:where(input):where([type="date"], [type="datetime-local"], [type="time"], [type="week"], [type="month"]) {
33
+ text-indent: 0;
34
+ padding-left: var(--text-input-padding);
35
+ padding-right: var(--text-input-padding);
36
+ }
37
+
38
+ .x-text-input:where(input)::-webkit-calendar-picker-indicator {
39
+ box-sizing: content-box;
40
+ width: var(--text-input-native-icon-size);
41
+ height: var(--text-input-native-icon-size);
42
+ padding: var(--space-1);
43
+ margin-left: var(--space-1);
44
+ margin-right: calc(var(--space-1) * -1);
45
+ border-radius: calc(var(--text-input-border-radius) - 2px);
46
+ }
47
+
48
+ .x-text-input:where(input)::-webkit-calendar-picker-indicator:where(:hover) {
49
+ background-color: var(--base-color-a3);
50
+ }
51
+
52
+ .x-text-input:where(input)::-webkit-calendar-picker-indicator:where(:focus-visible) {
53
+ outline: 2px solid var(--text-input-focus-color);
54
+ }
55
+
56
+ .x-text-input:where(input):where(:focus-visible) {
57
+ outline: 2px solid var(--text-input-focus-color);
58
+ outline-offset: -1px;
59
+ }
60
+
61
+ @supports selector(:has(*)) {
62
+ .x-text-input:where(input):where(:-webkit-autofill, [data-com-onepassword-filled]) {
63
+ -webkit-text-fill-color: var(--base-color-12);
64
+ -webkit-background-clip: text;
65
+ background-clip: text;
66
+ }
67
+
68
+ .x-text-input:where(input):where(:autofill, [data-com-onepassword-filled]) {
69
+ -webkit-text-fill-color: var(--base-color-12);
70
+ -webkit-background-clip: text;
71
+ background-clip: text;
72
+ }
73
+ }
74
+
75
+ .x-text-input:where(textarea) {
76
+ width: 100%;
77
+ min-height: var(--text-input-min-height);
78
+ padding: var(--text-input-padding);
79
+ border-radius: var(--text-input-border-radius);
80
+ resize: vertical;
81
+ cursor: text;
82
+ overflow: auto;
83
+ }
84
+
85
+ .x-text-input:where(textarea)::selection {
86
+ background-color: var(--text-input-selection-color);
87
+ }
88
+
89
+ .x-text-input:where(textarea)::-webkit-scrollbar {
90
+ width: var(--space-3);
91
+ height: var(--space-3);
92
+ }
93
+
94
+ .x-text-input:where(textarea)::-webkit-scrollbar-track {
95
+ background-color: #0000;
96
+ }
97
+
98
+ .x-text-input:where(textarea)::-webkit-scrollbar-thumb {
99
+ background-color: var(--base-color-a5);
100
+ border-radius: var(--space-3);
101
+ background-clip: padding-box;
102
+ border: 3px solid #0000;
103
+ }
104
+
105
+ .x-text-input:where(textarea)::-webkit-scrollbar-thumb:where(:hover) {
106
+ background-color: var(--base-color-a7);
107
+ }
108
+
109
+ .x-text-input:where(textarea):where(:focus-visible) {
110
+ outline: 2px solid var(--text-input-focus-color);
111
+ outline-offset: -1px;
112
+ }
113
+
114
+ @supports selector(:has(*)) {
115
+ .x-text-input:where(textarea):where(:-webkit-autofill, [data-com-onepassword-filled]) {
116
+ -webkit-text-fill-color: var(--base-color-12);
117
+ -webkit-background-clip: text;
118
+ background-clip: text;
119
+ }
120
+
121
+ .x-text-input:where(textarea):where(:autofill, [data-com-onepassword-filled]) {
122
+ -webkit-text-fill-color: var(--base-color-12);
123
+ -webkit-background-clip: text;
124
+ background-clip: text;
125
+ }
126
+ }
127
+
128
+ .x-text-input:where(:has( > input)) {
129
+ box-sizing: border-box;
130
+ height: var(--text-input-height);
131
+ border-radius: var(--text-input-border-radius);
132
+ cursor: text;
133
+ flex-direction: row;
134
+ align-items: stretch;
135
+ padding: 0;
136
+ display: flex;
137
+ }
138
+
139
+ .x-text-input:where(:has( > input)):where(:has( > input:focus)) {
140
+ outline: 2px solid var(--text-input-focus-color);
141
+ outline-offset: -1px;
142
+ }
143
+
144
+ .x-text-input:where(:has( > input)) > :where(input) {
145
+ width: 100%;
146
+ min-width: 0;
147
+ height: 100%;
148
+ text-indent: var(--text-input-padding);
149
+ color: inherit;
150
+ font: inherit;
151
+ border-radius: calc(var(--text-input-border-radius) - var(--text-input-border-width));
152
+ background: none;
153
+ border: 0;
154
+ outline: 0;
155
+ flex: auto;
156
+ padding: 0;
157
+ }
158
+
159
+ .x-text-input:where(:has( > input)) > :where(input)::selection {
160
+ background-color: var(--text-input-selection-color);
161
+ }
162
+
163
+ .x-text-input:where(:has( > input)) > :where(input)::-webkit-search-cancel-button {
164
+ appearance: none;
165
+ }
166
+
167
+ .x-text-input:where(:has( > input)) > :where(input)::-webkit-inner-spin-button {
168
+ appearance: none;
169
+ }
170
+
171
+ .x-text-input:where(:has( > input)) > :where(:not(input, textarea)) ~ input {
172
+ text-indent: 0;
173
+ border-top-left-radius: 0;
174
+ border-bottom-left-radius: 0;
175
+ padding-left: 0;
176
+ }
177
+
178
+ .x-text-input:where(:has( > input)) > input:where(:has( ~ :not(input, textarea))) {
179
+ border-top-right-radius: 0;
180
+ border-bottom-right-radius: 0;
181
+ padding-right: 0;
182
+ }
183
+
184
+ .x-text-input:where(:has( > textarea)) {
185
+ box-sizing: border-box;
186
+ min-height: var(--text-input-min-height);
187
+ border-radius: var(--text-input-border-radius);
188
+ cursor: text;
189
+ flex-direction: column;
190
+ align-items: stretch;
191
+ padding: 0;
192
+ display: flex;
193
+ }
194
+
195
+ .x-text-input:where(:has( > textarea)):where(:has( > textarea:focus)) {
196
+ outline: 2px solid var(--text-input-focus-color);
197
+ outline-offset: -1px;
198
+ }
199
+
200
+ .x-text-input:where(:has( > textarea)) > :where(textarea) {
201
+ width: 100%;
202
+ min-height: 0;
203
+ padding: var(--text-input-padding);
204
+ color: inherit;
205
+ font: inherit;
206
+ resize: vertical;
207
+ border-radius: calc(var(--text-input-border-radius) - var(--text-input-border-width));
208
+ background: none;
209
+ border: 0;
210
+ outline: 0;
211
+ flex: auto;
212
+ }
213
+
214
+ .x-text-input:where(:has( > textarea)) > :where(textarea)::selection {
215
+ background-color: var(--text-input-selection-color);
216
+ }
217
+
218
+ .x-text-input:where(:has( > textarea)) > :where(:not(input, textarea)) ~ textarea {
219
+ border-top-left-radius: 0;
220
+ border-top-right-radius: 0;
221
+ padding-top: 0;
222
+ }
223
+
224
+ .x-text-input:where(:has( > textarea)) > textarea:where(:has( ~ :not(input, textarea))) {
225
+ border-bottom-right-radius: 0;
226
+ border-bottom-left-radius: 0;
227
+ padding-bottom: 0;
228
+ }
229
+
230
+ .x-text-input > :where(:not(input, textarea)) {
231
+ box-sizing: border-box;
232
+ cursor: text;
233
+ flex-shrink: 0;
234
+ align-items: center;
235
+ display: flex;
236
+ }
237
+
238
+ .x-text-input:where([data-size="1"]) {
239
+ --text-input-height: var(--space-5);
240
+ --text-input-min-height: var(--space-8);
241
+ --text-input-padding: calc(var(--space-1) * 1.5 - var(--text-input-border-width));
242
+ --text-input-border-radius: max(var(--radius-2), var(--radius-pill));
243
+ --text-input-native-icon-size: var(--space-3);
244
+ font-size: var(--font-size-1);
245
+ line-height: var(--line-height-1);
246
+ letter-spacing: var(--letter-spacing-1);
247
+ }
248
+
249
+ .x-text-input:where([data-size="1"]) > :where(:not(input, textarea)) {
250
+ gap: var(--space-2);
251
+ padding-left: var(--space-1);
252
+ padding-right: var(--space-1);
253
+ }
254
+
255
+ .x-text-input:where([data-size="2"]) {
256
+ --text-input-height: var(--space-6);
257
+ --text-input-min-height: var(--space-9);
258
+ --text-input-padding: calc(var(--space-2) - var(--text-input-border-width));
259
+ --text-input-border-radius: max(var(--radius-2), var(--radius-pill));
260
+ --text-input-native-icon-size: var(--space-4);
261
+ font-size: var(--font-size-2);
262
+ line-height: var(--line-height-2);
263
+ letter-spacing: var(--letter-spacing-2);
264
+ }
265
+
266
+ .x-text-input:where([data-size="2"]) > :where(:not(input, textarea)) {
267
+ gap: var(--space-2);
268
+ padding-left: var(--space-2);
269
+ padding-right: var(--space-2);
270
+ }
271
+
272
+ .x-text-input:where([data-size="3"]) {
273
+ --text-input-height: var(--space-7);
274
+ --text-input-min-height: 80px;
275
+ --text-input-padding: calc(var(--space-3) - var(--text-input-border-width));
276
+ --text-input-border-radius: max(var(--radius-3), var(--radius-pill));
277
+ --text-input-native-icon-size: var(--space-4);
278
+ font-size: var(--font-size-3);
279
+ line-height: var(--line-height-3);
280
+ letter-spacing: var(--letter-spacing-3);
281
+ }
282
+
283
+ .x-text-input:where([data-size="3"]) > :where(:not(input, textarea)) {
284
+ gap: var(--space-3);
285
+ padding-left: var(--space-3);
286
+ padding-right: var(--space-3);
287
+ }
288
+
289
+ .x-text-input:where(:not([data-size])) {
290
+ --text-input-height: var(--space-6);
291
+ --text-input-min-height: var(--space-9);
292
+ --text-input-padding: calc(var(--space-2) - var(--text-input-border-width));
293
+ --text-input-border-radius: max(var(--radius-2), var(--radius-pill));
294
+ --text-input-native-icon-size: var(--space-4);
295
+ font-size: var(--font-size-2);
296
+ line-height: var(--line-height-2);
297
+ letter-spacing: var(--letter-spacing-2);
298
+ }
299
+
300
+ .x-text-input:where(:not([data-size])) > :where(:not(input, textarea)) {
301
+ gap: var(--space-2);
302
+ padding-left: var(--space-2);
303
+ padding-right: var(--space-2);
304
+ }
305
+
306
+ .x-text-input:where(:not([data-variant="soft"])) {
307
+ --text-input-border-width: 1px;
308
+ --text-input-selection-color: var(--focus-a5);
309
+ --text-input-focus-color: var(--focus-8);
310
+ background-color: var(--color-surface);
311
+ border: var(--text-input-border-width) solid var(--base-color-a7);
312
+ color: var(--base-color-12);
313
+ }
314
+
315
+ .x-text-input:where(:not([data-variant="soft"])):where(input)::placeholder, .x-text-input:where(:not([data-variant="soft"])):where(textarea)::placeholder, .x-text-input:where(:not([data-variant="soft"])):where(:has( > :is(input, textarea))) > :where(:is(input, textarea))::placeholder {
316
+ color: var(--base-color-a10);
317
+ }
318
+
319
+ .x-text-input:where(:not([data-variant="soft"])) > :where(:not(input, textarea)) {
320
+ color: var(--base-color-a11);
321
+ }
322
+
323
+ .x-text-input:where(:not([data-variant="soft"])) > :where(:not(input, textarea))[data-accent-color] {
324
+ color: var(--color-a11);
325
+ }
326
+
327
+ .x-text-input:where([data-variant="soft"]) {
328
+ --text-input-border-width: 0px;
329
+ --text-input-selection-color: var(--color-a5);
330
+ --text-input-focus-color: var(--color-8);
331
+ background-color: var(--color-a3);
332
+ color: var(--color-12);
333
+ }
334
+
335
+ .x-text-input:where([data-variant="soft"]):where(input)::placeholder, .x-text-input:where([data-variant="soft"]):where(textarea)::placeholder, .x-text-input:where([data-variant="soft"]):where(:has( > :is(input, textarea))) > :where(:is(input, textarea))::placeholder {
336
+ color: var(--color-12);
337
+ opacity: .6;
338
+ }
339
+
340
+ .x-text-input:where([data-variant="soft"]) > :where(:not(input, textarea)) {
341
+ color: var(--color-12);
342
+ }
343
+
344
+ .x-text-input:where([data-variant="soft"]) > :where(:not(input, textarea))[data-accent-color] {
345
+ color: var(--color-a11);
346
+ }
347
+
348
+ .x-text-input:where(:is(input, textarea)):where(:disabled, :read-only) {
349
+ cursor: text;
350
+ color: var(--base-color-a11);
351
+ -webkit-text-fill-color: var(--base-color-a11);
352
+ }
353
+
354
+ .x-text-input:where(:is(input, textarea)):where(:disabled, :read-only)::placeholder {
355
+ opacity: .5;
356
+ }
357
+
358
+ .x-text-input:where(:is(input, textarea)):where(:disabled, :read-only):where(:placeholder-shown) {
359
+ cursor: var(--cursor-disabled);
360
+ }
361
+
362
+ .x-text-input:where(:has( > :is(input, textarea):is(:disabled, :read-only))) {
363
+ background-color: var(--base-color-a2);
364
+ }
365
+
366
+ .x-text-input:where(:has( > :is(input, textarea):is(:disabled, :read-only))) > :where(:is(input, textarea)) {
367
+ cursor: text;
368
+ color: var(--base-color-a11);
369
+ -webkit-text-fill-color: var(--base-color-a11);
370
+ }
371
+
372
+ .x-text-input:where(:has( > :is(input, textarea):is(:disabled, :read-only))) > :where(:is(input, textarea))::placeholder {
373
+ opacity: .5;
374
+ }
375
+
376
+ .x-text-input:where(:has( > :is(input, textarea):is(:disabled, :read-only))):where(:has( > :is(input, textarea):placeholder-shown)) {
377
+ cursor: var(--cursor-disabled);
378
+ }
379
+
380
+ .x-text-input:where(:has( > :is(input, textarea):is(:disabled, :read-only))):where(:has( > :is(input, textarea):placeholder-shown)) > :where(:not(input, textarea)) {
381
+ cursor: var(--cursor-disabled);
382
+ }
383
+
384
+ .x-text-input:where(:not([data-variant="soft"])):where(:has( > :is(input, textarea):is(:disabled, :read-only))) {
385
+ border-color: var(--base-color-a6);
386
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "elements-kit",
3
3
  "type": "module",
4
- "version": "0.10.2",
4
+ "version": "0.12.0",
5
5
  "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
6
6
  "keywords": [
7
7
  "webcomponents",