@oscarpalmer/oui 0.17.0 → 0.18.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 (58) hide show
  1. package/dist/css/badge.css +3 -3
  2. package/dist/css/content.css +9 -11
  3. package/dist/css/form.css +36 -22
  4. package/dist/css/message.css +4 -0
  5. package/dist/css/reset.css +176 -56
  6. package/dist/css/tooltip.css +8 -0
  7. package/dist/js/attributable.full.js +48 -0
  8. package/dist/js/attributable.js +30 -45
  9. package/dist/js/floatable.full.js +413 -0
  10. package/dist/js/floatable.js +254 -169
  11. package/dist/js/focus-trap/embedded.full.js +351 -0
  12. package/dist/js/focus-trap/embedded.js +131 -131
  13. package/dist/js/focus-trap/standalone.full.js +402 -0
  14. package/dist/js/focus-trap/standalone.js +4 -4
  15. package/dist/js/index.js +4 -5
  16. package/dist/js/oui.full.js +1596 -0
  17. package/dist/js/popover.full.js +822 -0
  18. package/dist/js/popover.js +83 -162
  19. package/dist/js/splitter.full.js +605 -0
  20. package/dist/js/splitter.js +263 -245
  21. package/dist/js/tooltip.full.js +679 -0
  22. package/dist/js/tooltip.js +159 -150
  23. package/package.json +31 -59
  24. package/src/css/content.scss +1 -2
  25. package/src/css/form.scss +12 -4
  26. package/src/css/message.scss +3 -0
  27. package/src/css/mixins.scss +7 -0
  28. package/src/css/reset.scss +180 -54
  29. package/src/css/tooltip.scss +8 -0
  30. package/src/js/floatable.ts +380 -133
  31. package/src/js/focus-trap/embedded.ts +149 -64
  32. package/src/js/focus-trap/standalone.ts +4 -4
  33. package/src/js/index.ts +1 -0
  34. package/src/js/popover.ts +50 -120
  35. package/src/js/splitter.ts +250 -103
  36. package/src/js/tooltip.ts +155 -68
  37. package/types/floatable.d.ts +17 -10
  38. package/types/focus-trap/embedded.d.ts +18 -5
  39. package/types/index.d.ts +1 -0
  40. package/types/popover.d.ts +2 -0
  41. package/types/splitter.d.ts +13 -1
  42. package/types/tooltip.d.ts +2 -1
  43. package/dist/js/attributable.cjs +0 -51
  44. package/dist/js/floatable.cjs +0 -176
  45. package/dist/js/focus-trap/embedded.cjs +0 -150
  46. package/dist/js/focus-trap/standalone.cjs +0 -8
  47. package/dist/js/index.cjs +0 -6
  48. package/dist/js/popover.cjs +0 -166
  49. package/dist/js/splitter.cjs +0 -272
  50. package/dist/js/tooltip.cjs +0 -166
  51. package/types/attributable.d.cts +0 -5
  52. package/types/floatable.d.cts +0 -20
  53. package/types/focus-trap/embedded.d.cts +0 -15
  54. package/types/focus-trap/standalone.d.cts +0 -3
  55. package/types/index.d.cts +0 -14
  56. package/types/popover.d.cts +0 -14
  57. package/types/splitter.d.cts +0 -10
  58. package/types/tooltip.d.cts +0 -3
package/dist/css/badge.css CHANGED
@@ -1,8 +1,5 @@
1
1
  /*! https://github.com/oscarpalmer/oui */
2
2
 
3
- .oui {
4
- /* Colors*/
5
- }
6
3
  :where(.oui-pill, .oui-tag) {
7
4
  --oui-shadow-mixed: color-mix(
8
5
  in oklab,
@@ -38,6 +35,9 @@
38
35
  :where(.oui-tag-tiny) {
39
36
  padding: 0.25em 0.5em;
40
37
  }
38
+ .oui {
39
+ /* Colors*/
40
+ }
41
41
  :where(.oui-pill-blue, .oui-tag-blue) {
42
42
  --oui-background: var(--oui-blue-0);
43
43
  --oui-foreground: var(--oui-blue-8);
package/dist/css/content.css CHANGED
@@ -73,10 +73,9 @@
73
73
  background-image: none;
74
74
  border: 1px solid var(--oui-gray-3);
75
75
  border-radius: 0.375em;
76
- box-shadow: inset 0 1px 2px 0 var(--oui-gray-3);
77
76
  }
78
77
  :where(.oui-meter)::-moz-meter-bar {
79
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
78
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
80
79
  -webkit-appearance: none;
81
80
  -moz-appearance: none;
82
81
  appearance: none;
@@ -86,7 +85,7 @@
86
85
  border-radius: 0.25em;
87
86
  }
88
87
  :where(.oui-meter):-moz-meter-optimum::-moz-meter-bar {
89
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-green-6), transparent 33%);
88
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
90
89
  -webkit-appearance: none;
91
90
  -moz-appearance: none;
92
91
  appearance: none;
@@ -96,7 +95,7 @@
96
95
  border-radius: 0.25em;
97
96
  }
98
97
  :where(.oui-meter):-moz-meter-sub-optimum::-moz-meter-bar {
99
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
98
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
100
99
  -webkit-appearance: none;
101
100
  -moz-appearance: none;
102
101
  appearance: none;
@@ -106,7 +105,7 @@
106
105
  border-radius: 0.25em;
107
106
  }
108
107
  :where(.oui-meter):-moz-meter-sub-sub-optimum::-moz-meter-bar {
109
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-red-6), transparent 33%);
108
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
110
109
  -webkit-appearance: none;
111
110
  -moz-appearance: none;
112
111
  appearance: none;
@@ -121,7 +120,7 @@
121
120
  background: none;
122
121
  }
123
122
  :where(.oui-meter)::-webkit-meter-even-less-good-value {
124
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-red-6), transparent 33%);
123
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
125
124
  -webkit-appearance: none;
126
125
  -moz-appearance: none;
127
126
  appearance: none;
@@ -131,7 +130,7 @@
131
130
  border-radius: 0.25em;
132
131
  }
133
132
  :where(.oui-meter)::-webkit-meter-optimum-value {
134
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-green-6), transparent 33%);
133
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
135
134
  -webkit-appearance: none;
136
135
  -moz-appearance: none;
137
136
  appearance: none;
@@ -141,7 +140,7 @@
141
140
  border-radius: 0.25em;
142
141
  }
143
142
  :where(.oui-meter)::-webkit-meter-suboptimum-value {
144
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
143
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
145
144
  -webkit-appearance: none;
146
145
  -moz-appearance: none;
147
146
  appearance: none;
@@ -162,10 +161,9 @@
162
161
  background-image: none;
163
162
  border: 1px solid var(--oui-gray-3);
164
163
  border-radius: 0.375em;
165
- box-shadow: inset 0 1px 2px 0 var(--oui-gray-3);
166
164
  }
167
165
  :where(.oui-progress)::-moz-progress-bar {
168
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
166
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
169
167
  -webkit-appearance: none;
170
168
  -moz-appearance: none;
171
169
  appearance: none;
@@ -180,7 +178,7 @@
180
178
  background: none;
181
179
  }
182
180
  :where(.oui-progress)::-webkit-progress-value {
183
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
181
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
184
182
  -webkit-appearance: none;
185
183
  -moz-appearance: none;
186
184
  appearance: none;
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,7 +203,7 @@
201
203
  top: 50%;
202
204
  transform: translateY(-50%);
203
205
  }
204
- :where(.oui-input.oui-validatable:not([disabled],
206
+ :where(.oui-input.oui-validate:not([disabled],
205
207
  [readonly],
206
208
  [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
207
209
  [aria-invalid=true i])) {
@@ -210,7 +212,7 @@
210
212
  --oui-outline-percentage: 82.5%;
211
213
  --oui-outline-value: var(--oui-red-6);
212
214
  }
213
- :where(.oui-input.oui-validatable:not([disabled],
215
+ :where(.oui-input.oui-validate:not([disabled],
214
216
  [readonly],
215
217
  [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
216
218
  [aria-invalid=true i]))::file-selector-button {
@@ -218,25 +220,25 @@
218
220
  --oui-foreground-value: var(--oui-red-8);
219
221
  --oui-outline-value: var(--oui-red-6);
220
222
  }
221
- :where(.oui-input.oui-validatable:not([disabled],
223
+ :where(.oui-input.oui-validate:not([disabled],
222
224
  [readonly],
223
225
  [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
224
226
  [aria-invalid=true i]))::-moz-range-thumb {
225
227
  --oui-background-value: var(--oui-red-6);
226
228
  }
227
- :where(.oui-input.oui-validatable:not([disabled],
229
+ :where(.oui-input.oui-validate:not([disabled],
228
230
  [readonly],
229
231
  [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
230
232
  [aria-invalid=true i]))::-ms-thumb {
231
233
  --oui-background-value: var(--oui-red-6);
232
234
  }
233
- :where(.oui-input.oui-validatable:not([disabled],
235
+ :where(.oui-input.oui-validate:not([disabled],
234
236
  [readonly],
235
237
  [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
236
238
  [aria-invalid=true i]))::-webkit-slider-thumb {
237
239
  --oui-background-value: var(--oui-red-6);
238
240
  }
239
- :where(.oui-input.oui-validatable:not([disabled],
241
+ :where(.oui-input.oui-validate:not([disabled],
240
242
  [readonly],
241
243
  [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
242
244
  [aria-invalid=true i]))::-moz-range-track {
@@ -245,7 +247,7 @@
245
247
  --oui-outline-percentage: 82.5%;
246
248
  --oui-outline-value: var(--oui-red-6);
247
249
  }
248
- :where(.oui-input.oui-validatable:not([disabled],
250
+ :where(.oui-input.oui-validate:not([disabled],
249
251
  [readonly],
250
252
  [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
251
253
  [aria-invalid=true i]))::-ms-track {
@@ -254,7 +256,7 @@
254
256
  --oui-outline-percentage: 82.5%;
255
257
  --oui-outline-value: var(--oui-red-6);
256
258
  }
257
- :where(.oui-input.oui-validatable:not([disabled],
259
+ :where(.oui-input.oui-validate:not([disabled],
258
260
  [readonly],
259
261
  [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
260
262
  [aria-invalid=true i]))::-webkit-slider-runnable-track {
@@ -263,14 +265,14 @@
263
265
  --oui-outline-percentage: 82.5%;
264
266
  --oui-outline-value: var(--oui-red-6);
265
267
  }
266
- :where(.oui-input.oui-validatable:not([disabled],
268
+ :where(.oui-input.oui-validate:not([disabled],
267
269
  [readonly],
268
270
  [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
269
271
  [aria-invalid=true i])) > option:checked {
270
272
  background-color: var(--oui-red-2);
271
273
  color: var(--oui-red-9);
272
274
  }
273
- :where(.oui-input.oui-validatable:not([disabled],
275
+ :where(.oui-input.oui-validate:not([disabled],
274
276
  [readonly],
275
277
  [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i])) {
276
278
  --oui-border-value: var(--oui-green-5);
@@ -278,14 +280,14 @@
278
280
  --oui-outline-percentage: 82.5%;
279
281
  --oui-outline-value: var(--oui-green-6);
280
282
  }
281
- :where(.oui-input.oui-validatable:not([disabled],
283
+ :where(.oui-input.oui-validate:not([disabled],
282
284
  [readonly],
283
285
  [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::file-selector-button {
284
286
  --oui-background-value: var(--oui-green-2);
285
287
  --oui-foreground-value: var(--oui-green-8);
286
288
  --oui-outline-value: var(--oui-green-6);
287
289
  }
288
- :where(.oui-input.oui-validatable:not([disabled],
290
+ :where(.oui-input.oui-validate:not([disabled],
289
291
  [readonly],
290
292
  [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-moz-range-track {
291
293
  --oui-border-value: var(--oui-green-5);
@@ -293,7 +295,7 @@
293
295
  --oui-outline-percentage: 82.5%;
294
296
  --oui-outline-value: var(--oui-green-6);
295
297
  }
296
- :where(.oui-input.oui-validatable:not([disabled],
298
+ :where(.oui-input.oui-validate:not([disabled],
297
299
  [readonly],
298
300
  [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-ms-track {
299
301
  --oui-border-value: var(--oui-green-5);
@@ -301,7 +303,7 @@
301
303
  --oui-outline-percentage: 82.5%;
302
304
  --oui-outline-value: var(--oui-green-6);
303
305
  }
304
- :where(.oui-input.oui-validatable:not([disabled],
306
+ :where(.oui-input.oui-validate:not([disabled],
305
307
  [readonly],
306
308
  [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-webkit-slider-runnable-track {
307
309
  --oui-border-value: var(--oui-green-5);
@@ -309,22 +311,22 @@
309
311
  --oui-outline-percentage: 82.5%;
310
312
  --oui-outline-value: var(--oui-green-6);
311
313
  }
312
- :where(.oui-input.oui-validatable:not([disabled],
314
+ :where(.oui-input.oui-validate:not([disabled],
313
315
  [readonly],
314
316
  [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-moz-range-thumb {
315
317
  --oui-background-value: var(--oui-green-6);
316
318
  }
317
- :where(.oui-input.oui-validatable:not([disabled],
319
+ :where(.oui-input.oui-validate:not([disabled],
318
320
  [readonly],
319
321
  [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-ms-thumb {
320
322
  --oui-background-value: var(--oui-green-6);
321
323
  }
322
- :where(.oui-input.oui-validatable:not([disabled],
324
+ :where(.oui-input.oui-validate:not([disabled],
323
325
  [readonly],
324
326
  [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-webkit-slider-thumb {
325
327
  --oui-background-value: var(--oui-green-6);
326
328
  }
327
- :where(.oui-input.oui-validatable:not([disabled],
329
+ :where(.oui-input.oui-validate:not([disabled],
328
330
  [readonly],
329
331
  [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i])) > option:checked {
330
332
  background-color: var(--oui-green-2);
@@ -457,6 +459,18 @@
457
459
  --oui-background-value: var(--oui-gray-1);
458
460
  cursor: default;
459
461
  }
462
+ :where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::-moz-range-thumb {
463
+ --oui-background-value: var(--oui-gray-2);
464
+ cursor: default;
465
+ }
466
+ :where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::-ms-thumb {
467
+ --oui-background-value: var(--oui-gray-2);
468
+ cursor: default;
469
+ }
470
+ :where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::-webkit-slider-thumb {
471
+ --oui-background-value: var(--oui-gray-2);
472
+ cursor: default;
473
+ }
460
474
  :where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]):focus) {
461
475
  --oui-outline-percentage: 75%;
462
476
  }
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,6 +29,8 @@
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;