@oscarpalmer/oui 0.17.0 → 0.19.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 (72) hide show
  1. package/dist/css/badge.css +13 -13
  2. package/dist/css/button.css +9 -9
  3. package/dist/css/color.css +99 -99
  4. package/dist/css/content.css +10 -12
  5. package/dist/css/flex.css +39 -39
  6. package/dist/css/form.css +47 -60
  7. package/dist/css/message.css +10 -6
  8. package/dist/css/reset.css +178 -57
  9. package/dist/css/table.css +4 -4
  10. package/dist/css/tooltip.css +26 -1
  11. package/dist/js/attributable.full.js +36 -0
  12. package/dist/js/attributable.js +30 -45
  13. package/dist/js/floatable.full.js +398 -0
  14. package/dist/js/floatable.js +254 -169
  15. package/dist/js/focus-trap/embedded.full.js +408 -0
  16. package/dist/js/focus-trap/embedded.js +131 -131
  17. package/dist/js/focus-trap/standalone.full.js +447 -0
  18. package/dist/js/focus-trap/standalone.js +4 -4
  19. package/dist/js/index.js +3 -4
  20. package/dist/js/oui.full.js +1573 -0
  21. package/dist/js/popover.full.js +760 -0
  22. package/dist/js/popover.js +84 -163
  23. package/dist/js/splitter.full.js +769 -0
  24. package/dist/js/splitter.js +264 -246
  25. package/dist/js/tooltip.full.js +613 -0
  26. package/dist/js/tooltip.js +160 -151
  27. package/package.json +35 -63
  28. package/src/css/a11y.scss +1 -1
  29. package/src/css/badge.scss +23 -19
  30. package/src/css/button.scss +9 -9
  31. package/src/css/color.scss +99 -99
  32. package/src/css/content.scss +6 -9
  33. package/src/css/flex.scss +21 -20
  34. package/src/css/form.scss +47 -62
  35. package/src/css/message.scss +11 -12
  36. package/src/css/mixins.scss +16 -10
  37. package/src/css/popover.scss +2 -2
  38. package/src/css/reset.scss +181 -55
  39. package/src/css/splitter.scss +15 -13
  40. package/src/css/table.scss +11 -11
  41. package/src/css/tooltip.scss +31 -2
  42. package/src/js/attributable.ts +3 -10
  43. package/src/js/floatable.ts +370 -141
  44. package/src/js/focus-trap/embedded.ts +141 -74
  45. package/src/js/focus-trap/standalone.ts +4 -4
  46. package/src/js/index.ts +1 -0
  47. package/src/js/popover.ts +52 -122
  48. package/src/js/splitter.ts +248 -131
  49. package/src/js/tooltip.ts +143 -68
  50. package/types/floatable.d.ts +17 -10
  51. package/types/focus-trap/embedded.d.ts +18 -5
  52. package/types/index.d.ts +1 -0
  53. package/types/popover.d.ts +2 -0
  54. package/types/splitter.d.ts +13 -1
  55. package/types/tooltip.d.ts +2 -1
  56. package/dist/css/value.css +0 -1
  57. package/dist/js/attributable.cjs +0 -51
  58. package/dist/js/floatable.cjs +0 -176
  59. package/dist/js/focus-trap/embedded.cjs +0 -150
  60. package/dist/js/focus-trap/standalone.cjs +0 -8
  61. package/dist/js/index.cjs +0 -6
  62. package/dist/js/popover.cjs +0 -166
  63. package/dist/js/splitter.cjs +0 -272
  64. package/dist/js/tooltip.cjs +0 -166
  65. package/types/attributable.d.cts +0 -5
  66. package/types/floatable.d.cts +0 -20
  67. package/types/focus-trap/embedded.d.cts +0 -15
  68. package/types/focus-trap/standalone.d.cts +0 -3
  69. package/types/index.d.cts +0 -14
  70. package/types/popover.d.cts +0 -14
  71. package/types/splitter.d.cts +0 -10
  72. package/types/tooltip.d.cts +0 -3
package/dist/css/form.css CHANGED
@@ -7,8 +7,10 @@
7
7
  border-radius: 0.25em;
8
8
  }
9
9
 
10
- :where(.oui-input:not([type=range i])) {
10
+ :where(.oui-input) {
11
11
  --oui-background-value: var(--oui-absolute);
12
+ }
13
+ :where(.oui-input:not([type=range i])) {
12
14
  --oui-background-percentage: 0%;
13
15
  --oui-foreground-percentage: 0%;
14
16
  --oui-outline-percentage: 100%;
@@ -156,7 +158,7 @@
156
158
  width: 1.25em;
157
159
  height: 1.25em;
158
160
  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
159
- border: 2px solid var(--oui-absolute);
161
+ border: 1px solid var(--oui-absolute);
160
162
  border-radius: 1.25em;
161
163
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
162
164
  cursor: pointer;
@@ -173,7 +175,7 @@
173
175
  width: 1.25em;
174
176
  height: 1.25em;
175
177
  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
176
- border: 2px solid var(--oui-absolute);
178
+ border: 1px solid var(--oui-absolute);
177
179
  border-radius: 1.25em;
178
180
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
179
181
  cursor: pointer;
@@ -191,7 +193,7 @@
191
193
  width: 1.25em;
192
194
  height: 1.25em;
193
195
  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
194
- border: 2px solid var(--oui-absolute);
196
+ border: 1px solid var(--oui-absolute);
195
197
  border-radius: 1.25em;
196
198
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
197
199
  cursor: pointer;
@@ -201,132 +203,105 @@
201
203
  top: 50%;
202
204
  transform: translateY(-50%);
203
205
  }
204
- :where(.oui-input.oui-validatable:not([disabled],
205
- [readonly],
206
- [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
206
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
207
207
  [aria-invalid=true i])) {
208
208
  --oui-border-value: var(--oui-red-5);
209
209
  --oui-foreground-value: var(--oui-red-9);
210
210
  --oui-outline-percentage: 82.5%;
211
211
  --oui-outline-value: var(--oui-red-6);
212
212
  }
213
- :where(.oui-input.oui-validatable:not([disabled],
214
- [readonly],
215
- [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
213
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
216
214
  [aria-invalid=true i]))::file-selector-button {
217
215
  --oui-background-value: var(--oui-red-2);
218
216
  --oui-foreground-value: var(--oui-red-8);
219
217
  --oui-outline-value: var(--oui-red-6);
220
218
  }
221
- :where(.oui-input.oui-validatable:not([disabled],
222
- [readonly],
223
- [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
219
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
224
220
  [aria-invalid=true i]))::-moz-range-thumb {
225
221
  --oui-background-value: var(--oui-red-6);
226
222
  }
227
- :where(.oui-input.oui-validatable:not([disabled],
228
- [readonly],
229
- [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
223
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
230
224
  [aria-invalid=true i]))::-ms-thumb {
231
225
  --oui-background-value: var(--oui-red-6);
232
226
  }
233
- :where(.oui-input.oui-validatable:not([disabled],
234
- [readonly],
235
- [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
227
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
236
228
  [aria-invalid=true i]))::-webkit-slider-thumb {
237
229
  --oui-background-value: var(--oui-red-6);
238
230
  }
239
- :where(.oui-input.oui-validatable:not([disabled],
240
- [readonly],
241
- [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
231
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
242
232
  [aria-invalid=true i]))::-moz-range-track {
243
233
  --oui-border-value: var(--oui-red-5);
244
234
  --oui-foreground-value: var(--oui-red-9);
245
235
  --oui-outline-percentage: 82.5%;
246
236
  --oui-outline-value: var(--oui-red-6);
247
237
  }
248
- :where(.oui-input.oui-validatable:not([disabled],
249
- [readonly],
250
- [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
238
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
251
239
  [aria-invalid=true i]))::-ms-track {
252
240
  --oui-border-value: var(--oui-red-5);
253
241
  --oui-foreground-value: var(--oui-red-9);
254
242
  --oui-outline-percentage: 82.5%;
255
243
  --oui-outline-value: var(--oui-red-6);
256
244
  }
257
- :where(.oui-input.oui-validatable:not([disabled],
258
- [readonly],
259
- [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
245
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
260
246
  [aria-invalid=true i]))::-webkit-slider-runnable-track {
261
247
  --oui-border-value: var(--oui-red-5);
262
248
  --oui-foreground-value: var(--oui-red-9);
263
249
  --oui-outline-percentage: 82.5%;
264
250
  --oui-outline-value: var(--oui-red-6);
265
251
  }
266
- :where(.oui-input.oui-validatable:not([disabled],
267
- [readonly],
268
- [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
252
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
269
253
  [aria-invalid=true i])) > option:checked {
270
254
  background-color: var(--oui-red-2);
271
255
  color: var(--oui-red-9);
272
256
  }
273
- :where(.oui-input.oui-validatable:not([disabled],
274
- [readonly],
275
- [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i])) {
257
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
258
+ [aria-invalid=false i])) {
276
259
  --oui-border-value: var(--oui-green-5);
277
260
  --oui-foreground-value: var(--oui-green-9);
278
261
  --oui-outline-percentage: 82.5%;
279
262
  --oui-outline-value: var(--oui-green-6);
280
263
  }
281
- :where(.oui-input.oui-validatable:not([disabled],
282
- [readonly],
283
- [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::file-selector-button {
264
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
265
+ [aria-invalid=false i]))::file-selector-button {
284
266
  --oui-background-value: var(--oui-green-2);
285
267
  --oui-foreground-value: var(--oui-green-8);
286
268
  --oui-outline-value: var(--oui-green-6);
287
269
  }
288
- :where(.oui-input.oui-validatable:not([disabled],
289
- [readonly],
290
- [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-moz-range-track {
270
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
271
+ [aria-invalid=false i]))::-moz-range-track {
291
272
  --oui-border-value: var(--oui-green-5);
292
273
  --oui-foreground-value: var(--oui-green-9);
293
274
  --oui-outline-percentage: 82.5%;
294
275
  --oui-outline-value: var(--oui-green-6);
295
276
  }
296
- :where(.oui-input.oui-validatable:not([disabled],
297
- [readonly],
298
- [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-ms-track {
277
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
278
+ [aria-invalid=false i]))::-ms-track {
299
279
  --oui-border-value: var(--oui-green-5);
300
280
  --oui-foreground-value: var(--oui-green-9);
301
281
  --oui-outline-percentage: 82.5%;
302
282
  --oui-outline-value: var(--oui-green-6);
303
283
  }
304
- :where(.oui-input.oui-validatable:not([disabled],
305
- [readonly],
306
- [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-webkit-slider-runnable-track {
284
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
285
+ [aria-invalid=false i]))::-webkit-slider-runnable-track {
307
286
  --oui-border-value: var(--oui-green-5);
308
287
  --oui-foreground-value: var(--oui-green-9);
309
288
  --oui-outline-percentage: 82.5%;
310
289
  --oui-outline-value: var(--oui-green-6);
311
290
  }
312
- :where(.oui-input.oui-validatable:not([disabled],
313
- [readonly],
314
- [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-moz-range-thumb {
291
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
292
+ [aria-invalid=false i]))::-moz-range-thumb {
315
293
  --oui-background-value: var(--oui-green-6);
316
294
  }
317
- :where(.oui-input.oui-validatable:not([disabled],
318
- [readonly],
319
- [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-ms-thumb {
295
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
296
+ [aria-invalid=false i]))::-ms-thumb {
320
297
  --oui-background-value: var(--oui-green-6);
321
298
  }
322
- :where(.oui-input.oui-validatable:not([disabled],
323
- [readonly],
324
- [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-webkit-slider-thumb {
299
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
300
+ [aria-invalid=false i]))::-webkit-slider-thumb {
325
301
  --oui-background-value: var(--oui-green-6);
326
302
  }
327
- :where(.oui-input.oui-validatable:not([disabled],
328
- [readonly],
329
- [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i])) > option:checked {
303
+ :where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
304
+ [aria-invalid=false i])) > option:checked {
330
305
  background-color: var(--oui-green-2);
331
306
  color: var(--oui-green-9);
332
307
  }
@@ -457,6 +432,18 @@
457
432
  --oui-background-value: var(--oui-gray-1);
458
433
  cursor: default;
459
434
  }
435
+ :where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::-moz-range-thumb {
436
+ --oui-background-value: var(--oui-gray-2);
437
+ cursor: default;
438
+ }
439
+ :where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::-ms-thumb {
440
+ --oui-background-value: var(--oui-gray-2);
441
+ cursor: default;
442
+ }
443
+ :where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::-webkit-slider-thumb {
444
+ --oui-background-value: var(--oui-gray-2);
445
+ cursor: default;
446
+ }
460
447
  :where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]):focus) {
461
448
  --oui-outline-percentage: 75%;
462
449
  }
@@ -498,7 +485,7 @@
498
485
 
499
486
  :where(select.oui-input:is([multiple])) {
500
487
  --oui-off: attr(oui-off);
501
- --oui-on: attr(oui-on, "✓");
488
+ --oui-on: attr(oui-on, '\2713');
502
489
  padding: 0;
503
490
  }
504
491
  :where(select.oui-input:is([multiple]) > option) {
@@ -699,7 +686,7 @@
699
686
  --oui-background-value: var(--oui-gray-0);
700
687
  --oui-border-value: var(--oui-gray-3);
701
688
  --oui-foreground-percentage: 25%;
702
- --oui-foreground-value: currentColor;
689
+ --oui-foreground-value: currentcolor;
703
690
  color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
704
691
  font-style: italic;
705
692
  cursor: default;
package/dist/css/message.css CHANGED
@@ -10,6 +10,8 @@
10
10
  padding: 1em 1.25em;
11
11
  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
12
12
  border-radius: 0.5em;
13
+ max-width: -moz-fit-content;
14
+ max-width: fit-content;
13
15
  display: inline-flex;
14
16
  flex-flow: column nowrap;
15
17
  gap: 1em;
@@ -27,41 +29,43 @@
27
29
  border: none;
28
30
  }
29
31
  :where(.oui-message p) {
32
+ max-width: 32rem;
33
+ max-width: 64ch;
30
34
  display: inline-flex;
31
35
  flex-flow: row wrap;
32
36
  gap: 1em;
33
37
  }
34
- :where(.oui-message-blue, .oui-message-info) {
38
+ :where(.oui-message--blue, .oui-message--info) {
35
39
  --oui-background: var(--oui-blue-0);
36
40
  --oui-border: var(--oui-blue-2);
37
41
  --oui-foreground: var(--oui-blue-8);
38
42
  --oui-shadow-value: var(--oui-blue-6);
39
43
  }
40
- :where(.oui-message-green, .oui-message-success) {
44
+ :where(.oui-message--green, .oui-message--success) {
41
45
  --oui-background: var(--oui-green-0);
42
46
  --oui-border: var(--oui-green-2);
43
47
  --oui-foreground: var(--oui-green-8);
44
48
  --oui-shadow-value: var(--oui-green-6);
45
49
  }
46
- :where(.oui-message-orange, .oui-message-warning) {
50
+ :where(.oui-message--orange, .oui-message--warning) {
47
51
  --oui-background: var(--oui-orange-0);
48
52
  --oui-border: var(--oui-orange-2);
49
53
  --oui-foreground: var(--oui-orange-8);
50
54
  --oui-shadow-value: var(--oui-orange-6);
51
55
  }
52
- :where(.oui-message-purple, .oui-message-special) {
56
+ :where(.oui-message--purple, .oui-message--special) {
53
57
  --oui-background: var(--oui-purple-0);
54
58
  --oui-border: var(--oui-purple-2);
55
59
  --oui-foreground: var(--oui-purple-8);
56
60
  --oui-shadow-value: var(--oui-purple-6);
57
61
  }
58
- :where(.oui-message-red, .oui-message-error) {
62
+ :where(.oui-message--red, .oui-message--error) {
59
63
  --oui-background: var(--oui-red-0);
60
64
  --oui-border: var(--oui-red-2);
61
65
  --oui-foreground: var(--oui-red-8);
62
66
  --oui-shadow-value: var(--oui-red-6);
63
67
  }
64
- :where(.oui-message-yellow, .oui-message-notice) {
68
+ :where(.oui-message--yellow, .oui-message--notice) {
65
69
  --oui-background: var(--oui-yellow-0);
66
70
  --oui-border: var(--oui-yellow-2);
67
71
  --oui-foreground: var(--oui-yellow-8);