@threadlabs/looma 0.6.0-rc.1 → 0.6.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 (19) hide show
  1. package/components/ui-button/ui-button.html +35 -13
  2. package/components/ui-icon-button/ui-icon-button.html +8 -7
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/styles/ui-button.css +34 -13
  6. package/styles/ui-icon-button.css +8 -7
  7. package/theme-dark.css +4 -0
  8. package/theme-high-contrast.css +4 -0
  9. package/theme-light.css +2 -0
  10. package/tokens.css +5 -0
  11. package/vanilla/UiButton.d.ts +1 -0
  12. package/vanilla/UiButton.js +1 -1
  13. package/vue/UiButton.d.ts +2 -0
  14. package/vue/UiButton.vue +37 -28
  15. package/vue/UiIconButton.vue +8 -22
  16. package/vue/chunks/UiButton.js +4 -2
  17. package/vue/chunks/UiIconButton.js +1 -1
  18. package/vue/components.css +103 -113
  19. package/vue/editor/index.js +10 -2
package/vue/components.css CHANGED
@@ -172,25 +172,25 @@
172
172
  display: none;
173
173
  }
174
174
 
175
- [data-component~="ui-button"][data-v-d0355403] {
175
+ [data-component~="ui-button"][data-v-405b2c60] {
176
176
  display: inline-flex;
177
177
  align-items: center;
178
178
  justify-content: center;
179
179
  vertical-align: middle;
180
180
  color: var(--ui-action-secondary-text, var(--ui-text-primary));
181
181
  }
182
- [data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-d0355403] {
182
+ [data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-405b2c60] {
183
183
  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
184
184
  }
185
- [data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-d0355403] {
185
+ [data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-405b2c60] {
186
186
  justify-content: flex-start;
187
187
  text-align: start;
188
188
  }
189
- [data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-d0355403] {
189
+ [data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-405b2c60] {
190
190
  display: flex;
191
191
  inline-size: 100%;
192
192
  }
193
- [data-component~="ui-button"][data-v-d0355403] {
193
+ [data-component~="ui-button"][data-v-405b2c60] {
194
194
  appearance: none;
195
195
  min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
196
196
  border: 1px solid var(--ui-button-border, var(--ui-border-strong));
@@ -213,29 +213,29 @@
213
213
  margin: 0;
214
214
  }
215
215
  @supports (text-box-trim: trim-both) {
216
- [data-component~="ui-button"][data-v-d0355403] {
216
+ [data-component~="ui-button"][data-v-405b2c60] {
217
217
  text-box-trim: trim-both;
218
218
  text-box-edge: cap alphabetic;
219
219
  }
220
220
  }
221
- [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-d0355403] {
221
+ [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-405b2c60] {
222
222
  min-block-size: var(--ui-control-size-sm);
223
223
  padding: var(--ui-space-1) var(--ui-space-2);
224
224
  font-size: 0.875rem;
225
225
  }
226
- [data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-d0355403] {
226
+ [data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-405b2c60] {
227
227
  min-block-size: var(--ui-control-size-lg);
228
228
  padding: var(--ui-space-3) var(--ui-space-4);
229
229
  font-size: 1rem;
230
230
  }
231
- [data-component~="ui-button"][data-v-d0355403]:hover:enabled {
231
+ [data-component~="ui-button"][data-v-405b2c60]:hover:enabled {
232
232
  background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
233
233
  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
234
234
  }
235
- [data-component~="ui-button"][data-v-d0355403]:active:enabled {
235
+ [data-component~="ui-button"][data-v-405b2c60]:active:enabled {
236
236
  background: var(--ui-surface-subtle);
237
237
  }
238
- [data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-d0355403] {
238
+ [data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-405b2c60] {
239
239
  border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
240
240
  background: var(--ui-action-primary-surface, var(--ui-accent-solid));
241
241
  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
@@ -245,19 +245,19 @@
245
245
  var(--ui-shadow-xs)
246
246
  );
247
247
  }
248
- [data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-d0355403]:hover:enabled {
248
+ [data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-405b2c60]:hover:enabled {
249
249
  background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
250
250
  border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
251
251
  box-shadow: var(--ui-shadow-sm);
252
252
  transform: translateY(-1px);
253
253
  }
254
- [data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-d0355403]:active:enabled {
254
+ [data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-405b2c60]:active:enabled {
255
255
  background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
256
256
  border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
257
257
  box-shadow: none;
258
258
  transform: translateY(0);
259
259
  }
260
- [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-d0355403] {
260
+ [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-405b2c60] {
261
261
  border-color: var(--ui-danger-solid);
262
262
  background: var(--ui-danger-solid);
263
263
  color: var(--ui-text-on-accent);
@@ -267,17 +267,35 @@
267
267
  var(--ui-shadow-xs)
268
268
  );
269
269
  }
270
- [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-d0355403]:hover:enabled {
270
+ [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-405b2c60]:hover:enabled {
271
271
  background: var(--ui-danger-hover);
272
272
  border-color: var(--ui-danger-hover);
273
273
  box-shadow: var(--ui-shadow-sm);
274
274
  transform: translateY(-1px);
275
275
  }
276
- [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-d0355403]:active:enabled {
276
+ [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-405b2c60]:active:enabled {
277
277
  box-shadow: none;
278
278
  transform: translateY(0);
279
279
  }
280
- [data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-d0355403] {
280
+
281
+ /* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
282
+ Solid and danger already carry their own intent. */
283
+ [data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"][data-v-405b2c60] {
284
+ border-color: var(--ui-button-accent-border, var(--ui-accent));
285
+ background: var(--ui-button-accent-surface, var(--ui-accent-subtle));
286
+ color: var(--ui-button-accent-text, var(--ui-accent-active));
287
+ }
288
+ [data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"][data-v-405b2c60]:hover:enabled {
289
+ border-color: var(--ui-button-accent-hover-border, var(--ui-accent-hover));
290
+ background: var(
291
+ --ui-button-accent-hover-surface,
292
+ color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface))
293
+ );
294
+ }
295
+ [data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-v-405b2c60]:is([data-component~="ui-button"][data-ui-button-state~="variant=ghost"], [data-component~="ui-button"][data-ui-button-state~="variant=link"]) {
296
+ color: var(--ui-button-accent-text, var(--ui-accent-active));
297
+ }
298
+ [data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-405b2c60] {
281
299
  border-color: transparent;
282
300
  background: transparent;
283
301
  box-shadow: none;
@@ -285,14 +303,14 @@
285
303
  }
286
304
 
287
305
  /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
288
- [data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-d0355403]:hover:enabled {
306
+ [data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-405b2c60]:hover:enabled {
289
307
  background: var(
290
308
  --ui-button-ghost-hover-surface,
291
309
  color-mix(in srgb, currentColor 8%, transparent)
292
310
  );
293
311
  border-color: transparent;
294
312
  }
295
- [data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-d0355403]:active:enabled {
313
+ [data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-405b2c60]:active:enabled {
296
314
  background: var(
297
315
  --ui-button-ghost-active-surface,
298
316
  color-mix(in srgb, currentColor 14%, transparent)
@@ -301,65 +319,50 @@
301
319
  }
302
320
 
303
321
  /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
304
- [data-component~="ui-button"][data-v-d0355403]:focus-visible {
322
+ [data-component~="ui-button"][data-v-405b2c60]:focus-visible {
305
323
  outline: none;
306
324
  box-shadow:
307
325
  var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs))),
308
326
  var(--ui-focus-halo);
309
327
  }
310
- [data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-d0355403]:focus-visible {
328
+ [data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-405b2c60]:focus-visible {
311
329
  box-shadow:
312
330
  var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs)),
313
331
  var(--ui-focus-halo);
314
332
  }
315
333
 
316
334
  /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
317
- [data-component~="ui-button"][data-v-d0355403]:disabled {
318
- opacity: var(--ui-button-disabled-opacity, 0.6);
335
+ [data-component~="ui-button"][data-v-405b2c60]:disabled {
336
+ opacity: var(--ui-button-disabled-opacity, 1);
319
337
  cursor: not-allowed;
320
- border-color: var(--ui-button-disabled-border, var(--ui-button-border, var(--ui-border-strong)));
321
- background-color: var(
322
- --ui-button-disabled-surface,
323
- var(--ui-button-surface, var(--ui-surface-elevated))
324
- );
325
- color: var(
326
- --ui-button-disabled-text,
327
- var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)))
328
- );
338
+ border-color: var(--ui-button-disabled-border, var(--ui-border));
339
+ background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
340
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
329
341
  }
330
- [data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-d0355403]:disabled {
331
- border-color: var(
332
- --ui-button-disabled-border,
333
- var(--ui-action-primary-surface, var(--ui-accent-solid))
334
- );
335
- background-color: var(
336
- --ui-button-disabled-surface,
337
- var(--ui-action-primary-surface, var(--ui-accent-solid))
338
- );
339
- color: var(--ui-button-disabled-text, var(--ui-action-primary-text, var(--ui-text-on-accent)));
342
+ [data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-405b2c60]:disabled {
343
+ border-color: var(--ui-button-disabled-border, var(--ui-border));
344
+ background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
345
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
340
346
  }
341
- [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-d0355403]:disabled {
342
- border-color: var(--ui-button-disabled-border, var(--ui-danger-solid));
343
- background-color: var(--ui-button-disabled-surface, var(--ui-danger-solid));
344
- color: var(--ui-button-disabled-text, var(--ui-text-on-accent));
347
+ [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-405b2c60]:disabled {
348
+ border-color: var(--ui-button-disabled-border, var(--ui-border));
349
+ background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
350
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
345
351
  }
346
- [data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-d0355403]:disabled {
352
+ [data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-405b2c60]:disabled {
353
+ background: none;
347
354
  border-color: transparent;
348
- background-color: transparent;
349
- color: var(
350
- --ui-button-disabled-text,
351
- var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)))
352
- );
355
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
353
356
  }
354
357
  @media (pointer: coarse) {
355
- [data-component~="ui-button"][data-v-d0355403] {
358
+ [data-component~="ui-button"][data-v-405b2c60] {
356
359
  min-block-size: var(--ui-control-min-block-size);
357
360
  }
358
361
  }
359
362
 
360
363
  /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
361
364
  WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
362
- [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-d0355403] {
365
+ [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-405b2c60] {
363
366
  display: inline;
364
367
  min-block-size: 0;
365
368
  padding: 0;
@@ -377,21 +380,22 @@
377
380
  color var(--ui-motion-fast) var(--ui-motion-ease),
378
381
  text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
379
382
  }
380
- [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-d0355403]:hover:enabled {
383
+ [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-405b2c60]:hover:enabled {
381
384
  color: var(--ui-button-link-hover-text, var(--ui-text-primary));
382
385
  text-decoration-color: currentColor;
383
386
  background: none;
384
387
  transform: none;
385
388
  }
386
- [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-d0355403]:active:enabled {
389
+ [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-405b2c60]:active:enabled {
387
390
  background: none;
388
391
  transform: none;
389
392
  }
390
- [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-d0355403]:disabled {
393
+ [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-405b2c60]:disabled {
391
394
  background: none;
392
- color: var(--ui-button-disabled-text, var(--ui-button-link-text, var(--ui-text-secondary)));
395
+ border-color: transparent;
396
+ color: var(--ui-button-disabled-text, var(--ui-disabled-text));
393
397
  }
394
- [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-d0355403]:focus-visible {
398
+ [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-405b2c60]:focus-visible {
395
399
  box-shadow: none;
396
400
  /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
397
401
  outline: 2px solid var(--ui-focus-ring);
@@ -399,7 +403,7 @@
399
403
  }
400
404
 
401
405
  /* A component that sets its display still honours the hidden attribute on its root. */
402
- [data-component~="ui-button"][hidden][data-v-d0355403] {
406
+ [data-component~="ui-button"][hidden][data-v-405b2c60] {
403
407
  display: none;
404
408
  }
405
409
 
@@ -2436,14 +2440,14 @@ svg[data-v-b66a2428-s] {
2436
2440
  display: none;
2437
2441
  }
2438
2442
 
2439
- [data-component~="ui-icon-button"][data-v-ab2df1cc] {
2443
+ [data-component~="ui-icon-button"][data-v-80722d12] {
2440
2444
  display: inline-flex;
2441
2445
  color: var(--ui-text-secondary);
2442
2446
  }
2443
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ab2df1cc] {
2447
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-80722d12] {
2444
2448
  position: relative;
2445
2449
  }
2446
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ab2df1cc]::before {
2450
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-80722d12]::before {
2447
2451
  content: "";
2448
2452
  position: absolute;
2449
2453
  inset: 50% auto auto 50%;
@@ -2462,17 +2466,17 @@ svg[data-v-b66a2428-s] {
2462
2466
  * surface and icon. The root is the native button, so hiding it outright would hide the dot
2463
2467
  * too, and slotted icons sit outside this scope; `color: transparent` hides currentColor icons. */
2464
2468
  @media (hover: hover) and (pointer: fine) {
2465
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ab2df1cc]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible) {
2469
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-80722d12]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible) {
2466
2470
  border-color: transparent;
2467
2471
  background: transparent;
2468
2472
  box-shadow: none;
2469
2473
  color: transparent;
2470
2474
  }
2471
2475
  }
2472
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ab2df1cc]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
2476
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-80722d12]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
2473
2477
  opacity: 0;
2474
2478
  }
2475
- [data-component~="ui-icon-button"][data-v-ab2df1cc] {
2479
+ [data-component~="ui-icon-button"][data-v-80722d12] {
2476
2480
  /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
2477
2481
  --_size: 2rem;
2478
2482
  appearance: none;
@@ -2498,7 +2502,7 @@ svg[data-v-b66a2428-s] {
2498
2502
  transform var(--ui-motion-fast) var(--ui-motion-ease);
2499
2503
  }
2500
2504
  @media (hover: none), (pointer: coarse) {
2501
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ab2df1cc]::before {
2505
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-80722d12]::before {
2502
2506
  opacity: 0;
2503
2507
  }
2504
2508
  }
@@ -2506,10 +2510,10 @@ svg[data-v-b66a2428-s] {
2506
2510
  /* A touch target without a bigger button: an invisible hit area, at least the control
2507
2511
  minimum, centred on the button (::before is the anticipatory guide). */
2508
2512
  @media (pointer: coarse) {
2509
- [data-component~="ui-icon-button"][data-v-ab2df1cc] {
2513
+ [data-component~="ui-icon-button"][data-v-80722d12] {
2510
2514
  position: relative;
2511
2515
  }
2512
- [data-component~="ui-icon-button"][data-v-ab2df1cc]::after {
2516
+ [data-component~="ui-icon-button"][data-v-80722d12]::after {
2513
2517
  content: "";
2514
2518
  position: absolute;
2515
2519
  inset: 50% auto auto 50%;
@@ -2518,10 +2522,10 @@ svg[data-v-b66a2428-s] {
2518
2522
  transform: translate(-50%, -50%);
2519
2523
  }
2520
2524
  }
2521
- html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ab2df1cc] {
2525
+ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-80722d12] {
2522
2526
  position: relative;
2523
2527
  }
2524
- html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ab2df1cc]::after {
2528
+ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-80722d12]::after {
2525
2529
  content: "";
2526
2530
  position: absolute;
2527
2531
  inset: 50% auto auto 50%;
@@ -2529,29 +2533,29 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a
2529
2533
  block-size: max(100%, var(--ui-control-min-block-size));
2530
2534
  transform: translate(-50%, -50%);
2531
2535
  }
2532
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-ab2df1cc] {
2536
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-80722d12] {
2533
2537
  --_size: 1.75rem;
2534
2538
  inline-size: var(--ui-icon-button-size, var(--_size));
2535
2539
  block-size: var(--ui-icon-button-size, var(--_size));
2536
2540
  min-inline-size: var(--ui-icon-button-size, var(--_size));
2537
2541
  min-block-size: var(--ui-icon-button-size, var(--_size));
2538
2542
  }
2539
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-ab2df1cc] {
2543
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-80722d12] {
2540
2544
  --_size: 2.5rem;
2541
2545
  inline-size: var(--ui-icon-button-size, var(--_size));
2542
2546
  block-size: var(--ui-icon-button-size, var(--_size));
2543
2547
  min-inline-size: var(--ui-icon-button-size, var(--_size));
2544
2548
  min-block-size: var(--ui-icon-button-size, var(--_size));
2545
2549
  }
2546
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-ab2df1cc] {
2550
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-80722d12] {
2547
2551
  border-radius: var(--ui-radius-round);
2548
2552
  }
2549
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ab2df1cc] {
2553
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-80722d12] {
2550
2554
  border-color: var(--ui-icon-button-border, var(--ui-border-default));
2551
2555
  background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
2552
2556
  color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
2553
2557
  }
2554
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ab2df1cc] {
2558
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-80722d12] {
2555
2559
  background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
2556
2560
  color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
2557
2561
  box-shadow: var(
@@ -2559,65 +2563,51 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a
2559
2563
  0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
2560
2564
  );
2561
2565
  }
2562
- [data-component~="ui-icon-button"][data-v-ab2df1cc]:hover:enabled {
2566
+ [data-component~="ui-icon-button"][data-v-80722d12]:hover:enabled {
2563
2567
  /* Derived from the text colour so the ghost hover shows on any background. */
2564
2568
  background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
2565
2569
  color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
2566
2570
  }
2567
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ab2df1cc]:hover:enabled {
2571
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-80722d12]:hover:enabled {
2568
2572
  border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
2569
2573
  }
2570
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ab2df1cc]:hover:enabled {
2574
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-80722d12]:hover:enabled {
2571
2575
  background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
2572
2576
  }
2573
- [data-component~="ui-icon-button"][data-v-ab2df1cc]:active:enabled {
2577
+ [data-component~="ui-icon-button"][data-v-80722d12]:active:enabled {
2574
2578
  transform: scale(var(--ui-icon-button-active-scale, 0.96));
2575
2579
  }
2576
- [data-component~="ui-icon-button"][data-v-ab2df1cc]:focus-visible {
2580
+ [data-component~="ui-icon-button"][data-v-80722d12]:focus-visible {
2577
2581
  outline: none;
2578
2582
  box-shadow: var(--ui-focus-halo);
2579
2583
  }
2580
2584
 
2581
2585
  /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
2582
- [data-component~="ui-icon-button"][data-v-ab2df1cc]:disabled {
2583
- opacity: var(--ui-icon-button-disabled-opacity, 0.6);
2584
- color: var(--ui-icon-button-disabled-text, inherit);
2586
+ [data-component~="ui-icon-button"][data-v-80722d12]:disabled {
2587
+ opacity: var(--ui-icon-button-disabled-opacity, 1);
2588
+ color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
2585
2589
  cursor: not-allowed;
2586
2590
  }
2587
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ab2df1cc]:disabled {
2588
- border-color: var(
2589
- --ui-icon-button-disabled-border,
2590
- var(--ui-icon-button-border, var(--ui-border-default))
2591
- );
2592
- background-color: var(
2593
- --ui-icon-button-disabled-surface,
2594
- var(--ui-icon-button-outline-surface, var(--ui-surface-default))
2595
- );
2596
- color: var(
2597
- --ui-icon-button-disabled-text,
2598
- var(--ui-icon-button-outline-text, var(--ui-text-primary))
2599
- );
2591
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-80722d12]:disabled {
2592
+ border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
2593
+ background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
2594
+ color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
2600
2595
  }
2601
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ab2df1cc]:disabled {
2602
- background-color: var(
2603
- --ui-icon-button-disabled-surface,
2604
- var(--ui-icon-button-solid-surface, var(--ui-accent-solid))
2605
- );
2606
- color: var(
2607
- --ui-icon-button-disabled-text,
2608
- var(--ui-icon-button-solid-text, var(--ui-text-on-accent))
2609
- );
2596
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-80722d12]:disabled {
2597
+ border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
2598
+ background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
2599
+ color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
2610
2600
  }
2611
- [data-component~="ui-icon-button"][data-v-ab2df1cc] {
2601
+ [data-component~="ui-icon-button"][data-v-80722d12] {
2612
2602
  --_icon-button-icon-default: var(--ui-icon-size-md);
2613
2603
  }
2614
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-ab2df1cc] {
2604
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-80722d12] {
2615
2605
  --_icon-button-icon-default: var(--ui-icon-size-sm);
2616
2606
  }
2617
- [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-ab2df1cc] {
2607
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-80722d12] {
2618
2608
  --_icon-button-icon-default: var(--ui-icon-size-lg);
2619
2609
  }
2620
- svg[data-v-ab2df1cc-s] {
2610
+ svg[data-v-80722d12-s] {
2621
2611
  inline-size: var(--ui-icon-button-icon-size, var(--_icon-button-icon-default));
2622
2612
  block-size: var(--ui-icon-button-icon-size, var(--_icon-button-icon-default));
2623
2613
  flex-shrink: 0;
@@ -2625,7 +2615,7 @@ svg[data-v-ab2df1cc-s] {
2625
2615
  }
2626
2616
 
2627
2617
  /* A component that sets its display still honours the hidden attribute on its root. */
2628
- [data-component~="ui-icon-button"][hidden][data-v-ab2df1cc] {
2618
+ [data-component~="ui-icon-button"][hidden][data-v-80722d12] {
2629
2619
  display: none;
2630
2620
  }
2631
2621
 
@@ -4441,7 +4431,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
4441
4431
  }
4442
4432
 
4443
4433
  .looma-editor__toolbar-button {
4444
- --ui-icon-button-size-sm: var(--ui-editor-toolbar-button-size, 2rem);
4434
+ --ui-icon-button-size: var(--ui-editor-toolbar-button-size, 2rem);
4445
4435
  --ui-icon-button-radius: var(--ui-editor-toolbar-button-radius, var(--ui-radius-1));
4446
4436
  --ui-icon-button-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
4447
4437
  }
@@ -4511,7 +4501,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
4511
4501
  }
4512
4502
 
4513
4503
  .looma-editor__mobile-toolbar-shell .looma-editor__toolbar-button {
4514
- --ui-icon-button-size-sm: var(--ui-editor-toolbar-mobile-button-size, 44px);
4504
+ --ui-icon-button-size: var(--ui-editor-toolbar-mobile-button-size, var(--ui-control-min-block-size));
4515
4505
  }
4516
4506
 
4517
4507
  .looma-editor__mobile-toolbar-back {
package/vue/editor/index.js CHANGED
@@ -408,7 +408,11 @@ var LoomaEditor = defineComponent({
408
408
  ],
409
409
  content: props.modelValue,
410
410
  editable: props.editable,
411
- editorProps: { attributes: { "aria-label": props.label } },
411
+ editorProps: { attributes: {
412
+ role: "textbox",
413
+ "aria-multiline": "true",
414
+ "aria-label": props.label
415
+ } },
412
416
  onCreate: ({ editor: instance }) => emit("ready", instance),
413
417
  onFocus: ({ editor: instance }) => rememberSelection(instance),
414
418
  onSelectionUpdate: ({ editor: instance }) => rememberSelection(instance),
@@ -423,7 +427,11 @@ var LoomaEditor = defineComponent({
423
427
  });
424
428
  watch(() => props.editable, (editable) => editor.value?.setEditable(editable));
425
429
  watch(() => props.label, (label) => {
426
- editor.value?.setOptions({ editorProps: { attributes: { "aria-label": label } } });
430
+ editor.value?.setOptions({ editorProps: { attributes: {
431
+ role: "textbox",
432
+ "aria-multiline": "true",
433
+ "aria-label": label
434
+ } } });
427
435
  });
428
436
  watch(() => props.resolveImageAttributes, () => {
429
437
  const instance = editor.value;