morya-ui 0.3.2 → 0.3.3

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 (64) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/{Button-dMqRmoYa.js → Button-gBiRj7wz.js} +11 -6
  3. package/dist/{FlyoutSubmenu-BrUPmJa1.js → FlyoutSubmenu-H_741alW.js} +2 -2
  4. package/dist/{Loading-BSsRs6v9.js → Loading-qS2Yv_gm.js} +1 -1
  5. package/dist/{Pagination-CqpC5EAs.js → Pagination-Bvv2qvEK.js} +1 -1
  6. package/dist/{Popover-BQ07q4VV.js → Popover-rnZG_ap0.js} +3 -3
  7. package/dist/{Select-CKGrSoaC.js → Select-CiXd074W.js} +3 -3
  8. package/dist/{Tooltip-D5DO0B3z.js → Tooltip-B02o9BOW.js} +3 -3
  9. package/dist/auto-complete/index.js +3 -3
  10. package/dist/block-ui/index.js +1 -1
  11. package/dist/button/index.js +1 -1
  12. package/dist/button/style.css +277 -40
  13. package/dist/cascade-select/index.js +3 -3
  14. package/dist/command-menu/index.js +1 -1
  15. package/dist/components/Button/Button.vue.d.ts +1 -0
  16. package/dist/components/Button/Button.vue.d.ts.map +1 -1
  17. package/dist/components/Button/styles.css +277 -40
  18. package/dist/components/Button/types.d.ts +9 -4
  19. package/dist/components/Button/types.d.ts.map +1 -1
  20. package/dist/components/ContextMenu/ContextMenu.vue.d.ts.map +1 -1
  21. package/dist/components/ContextMenu/styles.css +19 -14
  22. package/dist/components/Menu/styles.css +4 -4
  23. package/dist/components/Popover/styles.css +11 -72
  24. package/dist/config-provider/style.css +277 -40
  25. package/dist/confirm-dialog/index.js +2 -2
  26. package/dist/confirm-dialog/style.css +277 -40
  27. package/dist/confirm-popup/index.js +5 -5
  28. package/dist/confirm-popup/style.css +277 -40
  29. package/dist/context-menu/index.js +105 -96
  30. package/dist/context-menu/style.css +19 -14
  31. package/dist/data-view/index.js +2 -2
  32. package/dist/date-picker/index.js +3 -3
  33. package/dist/dialog/index.js +2 -2
  34. package/dist/dialog/style.css +277 -40
  35. package/dist/drawer/index.js +1 -1
  36. package/dist/dropdown/index.js +4 -4
  37. package/dist/index.js +37 -21
  38. package/dist/loading/index.js +1 -1
  39. package/dist/mega-menu/index.js +3 -3
  40. package/dist/menu/index.js +5 -5
  41. package/dist/menu/style.css +15 -76
  42. package/dist/menubar/index.js +3 -3
  43. package/dist/message/index.js +1 -1
  44. package/dist/{overlayPlacement-Cd20JTD_.js → overlayPlacement-qwEJPVS4.js} +8 -8
  45. package/dist/page/index.js +1 -1
  46. package/dist/page/style.css +277 -40
  47. package/dist/pagination/index.js +1 -1
  48. package/dist/popover/index.js +1 -1
  49. package/dist/popover/style.css +11 -72
  50. package/dist/select/index.js +1 -1
  51. package/dist/shared/overlayPlacement.d.ts.map +1 -1
  52. package/dist/speed-dial/index.js +3 -3
  53. package/dist/split-button/index.js +3 -3
  54. package/dist/split-button/style.css +277 -40
  55. package/dist/styles.css +1 -1
  56. package/dist/table/index.js +3 -3
  57. package/dist/theme/motionPresets.d.ts.map +1 -1
  58. package/dist/tiered-menu/index.js +4 -4
  59. package/dist/toast/index.js +1 -1
  60. package/dist/tooltip/index.js +1 -1
  61. package/dist/tree-select/index.js +3 -3
  62. package/dist/{useFloatingViewportSync-DZdJ7W8n.js → useFloatingViewportSync-wLLKIGUA.js} +4 -1
  63. package/dist/{useMotionTransition-Bxnnb_9u.js → useMotionTransition-95Y79FoL.js} +1 -1
  64. package/package.json +2 -1
@@ -1,9 +1,9 @@
1
1
  import { i as e } from "../useComponentAttrs-e-5QAjdw.js";
2
2
  import { t } from "../Icon-od9Ob-Ay.js";
3
- import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
3
+ import { t as n } from "../useMotionTransition-95Y79FoL.js";
4
4
  import { n as r, t as i } from "../overlay-oR-5MDuE.js";
5
- import { t as ee } from "../overlayPlacement-Cd20JTD_.js";
6
- import { t as te } from "../useFloatingViewportSync-DZdJ7W8n.js";
5
+ import { t as ee } from "../overlayPlacement-qwEJPVS4.js";
6
+ import { t as te } from "../useFloatingViewportSync-wLLKIGUA.js";
7
7
  import { t as ne } from "../useMenuKeyboard-BedmYE4W.js";
8
8
  import { t as re } from "../useMId-BXFYayPP.js";
9
9
  import { t as ie } from "../Scrollbar-DTeJ8P5b.js";
@@ -1,6 +1,6 @@
1
1
  import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
2
2
  import { t } from "../Icon-od9Ob-Ay.js";
3
- import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
3
+ import { t as n } from "../useMotionTransition-95Y79FoL.js";
4
4
  import { n as ee } from "../overlay-oR-5MDuE.js";
5
5
  import { t as r } from "../Scrollbar-DTeJ8P5b.js";
6
6
  import { t as te } from "../filterByQuery-Bczaxzih.js";
@@ -25,6 +25,7 @@ declare const __VLS_base: DefineComponent<ButtonProps, {
25
25
  autofocus: boolean;
26
26
  outlined: boolean;
27
27
  loading: boolean;
28
+ underline: boolean;
28
29
  ghost: boolean;
29
30
  quaternary: boolean;
30
31
  iconPos: ButtonIconPos;
@@ -1 +1 @@
1
- {"version":3,"file":"Button.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.vue"],"names":[],"mappings":";AA6OA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAoL1C,iBAAS,KAAK,SAEb;AA2ID,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO;;CAAU,EAAE,QAAQ,IAAY,CAAE;AAChE,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAChD;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAQhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"Button.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.vue"],"names":[],"mappings":";AA+OA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAsL1C,iBAAS,KAAK,SAEb;AA4ID,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO;;CAAU,EAAE,QAAQ,IAAY,CAAE;AAChE,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAChD;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAQhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
@@ -225,7 +225,30 @@
225
225
  );
226
226
  }
227
227
 
228
- .m-button--secondary.m-button--outlined {
228
+ /* Idle matches outlined hover; hover/active deepen the tint. */
229
+ .m-button--plain {
230
+ --m-button-bg: color-mix(
231
+ in srgb,
232
+ var(--m-button-border) 10%,
233
+ transparent
234
+ );
235
+ --m-button-fg: var(--m-button-border);
236
+ --m-button-hover-bg: color-mix(
237
+ in srgb,
238
+ var(--m-button-border) 16%,
239
+ transparent
240
+ );
241
+ --m-button-hover-fg: var(--m-button-border);
242
+ --m-button-hover-border: var(--m-button-border);
243
+ --m-button-active-bg: color-mix(
244
+ in srgb,
245
+ var(--m-button-border) 22%,
246
+ transparent
247
+ );
248
+ }
249
+
250
+ .m-button--secondary.m-button--outlined,
251
+ .m-button--secondary.m-button--plain {
229
252
  --m-button-border: var(--m-color-border);
230
253
  --m-button-fg: var(--m-color-text);
231
254
  --m-button-hover-fg: var(--m-color-text);
@@ -236,13 +259,16 @@
236
259
  --m-button-bg: transparent;
237
260
  --m-button-border: transparent;
238
261
  --m-button-fg: var(--m-color-primary);
262
+ --m-button-hover-fg: var(--m-color-primary);
263
+ --m-button-hover-border: transparent;
264
+ }
265
+
266
+ .m-button--text {
239
267
  --m-button-hover-bg: color-mix(
240
268
  in srgb,
241
269
  var(--m-color-primary) 10%,
242
270
  transparent
243
271
  );
244
- --m-button-hover-fg: var(--m-color-primary);
245
- --m-button-hover-border: transparent;
246
272
  --m-button-active-bg: color-mix(
247
273
  in srgb,
248
274
  var(--m-color-primary) 16%,
@@ -250,8 +276,24 @@
250
276
  );
251
277
  }
252
278
 
253
- .m-button--secondary.m-button--text,
254
- .m-button--secondary.m-button--link {
279
+ .m-button--link {
280
+ --m-button-bg: transparent;
281
+ --m-button-hover-bg: transparent;
282
+ --m-button-active-bg: transparent;
283
+ height: auto;
284
+ min-height: 0;
285
+ padding: 0;
286
+ }
287
+
288
+ .m-button--link.m-button--link-underline:hover:not(:disabled) {
289
+ text-decoration: underline;
290
+ }
291
+
292
+ .m-button--link:not(.m-button--link-underline):hover:not(:disabled) {
293
+ opacity: 0.8;
294
+ }
295
+
296
+ .m-button--secondary.m-button--text {
255
297
  --m-button-fg: var(--m-color-text-muted);
256
298
  --m-button-hover-bg: color-mix(
257
299
  in srgb,
@@ -261,8 +303,12 @@
261
303
  --m-button-hover-fg: var(--m-color-text);
262
304
  }
263
305
 
306
+ .m-button--secondary.m-button--link {
307
+ --m-button-fg: var(--m-color-text-muted);
308
+ --m-button-hover-fg: var(--m-color-text);
309
+ }
310
+
264
311
  .m-button--success.m-button--text,
265
- .m-button--success.m-button--link,
266
312
  .m-button--success.m-button--outlined {
267
313
  --m-button-fg: var(--m-color-success);
268
314
  --m-button-border: var(--m-color-success);
@@ -275,8 +321,12 @@
275
321
  --m-button-hover-border: var(--m-color-success);
276
322
  }
277
323
 
324
+ .m-button--success.m-button--link {
325
+ --m-button-fg: var(--m-color-success);
326
+ --m-button-hover-fg: var(--m-color-success);
327
+ }
328
+
278
329
  .m-button--info.m-button--text,
279
- .m-button--info.m-button--link,
280
330
  .m-button--info.m-button--outlined {
281
331
  --m-button-fg: var(--m-color-info);
282
332
  --m-button-border: var(--m-color-info);
@@ -289,8 +339,12 @@
289
339
  --m-button-hover-border: var(--m-color-info);
290
340
  }
291
341
 
342
+ .m-button--info.m-button--link {
343
+ --m-button-fg: var(--m-color-info);
344
+ --m-button-hover-fg: var(--m-color-info);
345
+ }
346
+
292
347
  .m-button--warn.m-button--text,
293
- .m-button--warn.m-button--link,
294
348
  .m-button--warn.m-button--outlined {
295
349
  --m-button-fg: var(--m-color-warn);
296
350
  --m-button-border: var(--m-color-warn);
@@ -303,8 +357,12 @@
303
357
  --m-button-hover-border: var(--m-color-warn);
304
358
  }
305
359
 
360
+ .m-button--warn.m-button--link {
361
+ --m-button-fg: var(--m-color-warn);
362
+ --m-button-hover-fg: var(--m-color-warn);
363
+ }
364
+
306
365
  .m-button--help.m-button--text,
307
- .m-button--help.m-button--link,
308
366
  .m-button--help.m-button--outlined {
309
367
  --m-button-fg: var(--m-color-help);
310
368
  --m-button-border: var(--m-color-help);
@@ -317,8 +375,12 @@
317
375
  --m-button-hover-border: var(--m-color-help);
318
376
  }
319
377
 
378
+ .m-button--help.m-button--link {
379
+ --m-button-fg: var(--m-color-help);
380
+ --m-button-hover-fg: var(--m-color-help);
381
+ }
382
+
320
383
  .m-button--danger.m-button--text,
321
- .m-button--danger.m-button--link,
322
384
  .m-button--danger.m-button--outlined {
323
385
  --m-button-fg: var(--m-color-danger);
324
386
  --m-button-border: var(--m-color-danger);
@@ -331,8 +393,12 @@
331
393
  --m-button-hover-border: var(--m-color-danger);
332
394
  }
333
395
 
396
+ .m-button--danger.m-button--link {
397
+ --m-button-fg: var(--m-color-danger);
398
+ --m-button-hover-fg: var(--m-color-danger);
399
+ }
400
+
334
401
  .m-button--contrast.m-button--text,
335
- .m-button--contrast.m-button--link,
336
402
  .m-button--contrast.m-button--outlined {
337
403
  --m-button-fg: var(--m-color-contrast);
338
404
  --m-button-border: var(--m-color-contrast);
@@ -345,9 +411,14 @@
345
411
  --m-button-hover-border: var(--m-color-contrast);
346
412
  }
347
413
 
414
+ .m-button--contrast.m-button--link {
415
+ --m-button-fg: var(--m-color-contrast);
416
+ --m-button-hover-fg: var(--m-color-contrast);
417
+ }
418
+
348
419
  .m-button--plain.m-button--text,
349
- .m-button--plain.m-button--outlined,
350
- .m-button--plain.m-button--link {
420
+ .m-button--plain.m-button--outlined {
421
+ --m-button-bg: transparent;
351
422
  --m-button-fg: var(--m-color-text-muted);
352
423
  --m-button-border: var(--m-color-border);
353
424
  --m-button-hover-bg: color-mix(
@@ -357,69 +428,178 @@
357
428
  );
358
429
  --m-button-hover-fg: var(--m-color-text);
359
430
  --m-button-hover-border: var(--m-color-border);
431
+ --m-button-active-bg: color-mix(
432
+ in srgb,
433
+ var(--m-color-text-muted) 18%,
434
+ transparent
435
+ );
360
436
  }
361
437
 
362
- .m-button--link {
363
- height: auto;
364
- min-height: 0;
365
- padding: 0;
366
- }
367
-
368
- .m-button--link:hover:not(:disabled) {
369
- text-decoration: underline;
438
+ .m-button--plain.m-button--link {
439
+ --m-button-fg: var(--m-color-text-muted);
440
+ --m-button-hover-fg: var(--m-color-text);
370
441
  }
371
442
 
372
443
  .m-button--ghost {
373
- --m-button-bg: transparent;
374
- --m-button-fg: var(--m-button-border);
444
+ --m-button-bg: color-mix(
445
+ in srgb,
446
+ var(--m-color-primary) 10%,
447
+ transparent
448
+ );
449
+ --m-button-border: transparent;
450
+ --m-button-fg: var(--m-color-primary);
375
451
  --m-button-hover-bg: color-mix(
376
452
  in srgb,
377
- var(--m-button-border) 12%,
453
+ var(--m-color-primary) 16%,
378
454
  transparent
379
455
  );
380
- --m-button-hover-fg: var(--m-button-border);
381
- --m-button-hover-border: var(--m-button-border);
456
+ --m-button-hover-fg: var(--m-color-primary);
457
+ --m-button-hover-border: transparent;
382
458
  --m-button-active-bg: color-mix(
383
459
  in srgb,
384
- var(--m-button-border) 18%,
460
+ var(--m-color-primary) 22%,
385
461
  transparent
386
462
  );
387
463
  }
388
464
 
389
465
  .m-button--secondary.m-button--ghost {
390
- --m-button-border: var(--m-color-border);
466
+ --m-button-bg: color-mix(
467
+ in srgb,
468
+ var(--m-color-text-muted) 12%,
469
+ transparent
470
+ );
391
471
  --m-button-fg: var(--m-color-text);
472
+ --m-button-hover-bg: color-mix(
473
+ in srgb,
474
+ var(--m-color-text-muted) 18%,
475
+ transparent
476
+ );
392
477
  --m-button-hover-fg: var(--m-color-text);
478
+ --m-button-active-bg: color-mix(
479
+ in srgb,
480
+ var(--m-color-text-muted) 24%,
481
+ transparent
482
+ );
393
483
  }
394
484
 
395
485
  .m-button--success.m-button--ghost {
486
+ --m-button-bg: color-mix(
487
+ in srgb,
488
+ var(--m-color-success) 10%,
489
+ transparent
490
+ );
396
491
  --m-button-fg: var(--m-color-success);
397
- --m-button-border: var(--m-color-success);
492
+ --m-button-hover-bg: color-mix(
493
+ in srgb,
494
+ var(--m-color-success) 16%,
495
+ transparent
496
+ );
497
+ --m-button-hover-fg: var(--m-color-success);
498
+ --m-button-active-bg: color-mix(
499
+ in srgb,
500
+ var(--m-color-success) 22%,
501
+ transparent
502
+ );
398
503
  }
399
504
 
400
505
  .m-button--info.m-button--ghost {
506
+ --m-button-bg: color-mix(
507
+ in srgb,
508
+ var(--m-color-info) 10%,
509
+ transparent
510
+ );
401
511
  --m-button-fg: var(--m-color-info);
402
- --m-button-border: var(--m-color-info);
512
+ --m-button-hover-bg: color-mix(
513
+ in srgb,
514
+ var(--m-color-info) 16%,
515
+ transparent
516
+ );
517
+ --m-button-hover-fg: var(--m-color-info);
518
+ --m-button-active-bg: color-mix(
519
+ in srgb,
520
+ var(--m-color-info) 22%,
521
+ transparent
522
+ );
403
523
  }
404
524
 
405
525
  .m-button--warn.m-button--ghost {
526
+ --m-button-bg: color-mix(
527
+ in srgb,
528
+ var(--m-color-warn) 10%,
529
+ transparent
530
+ );
406
531
  --m-button-fg: var(--m-color-warn);
407
- --m-button-border: var(--m-color-warn);
532
+ --m-button-hover-bg: color-mix(
533
+ in srgb,
534
+ var(--m-color-warn) 16%,
535
+ transparent
536
+ );
537
+ --m-button-hover-fg: var(--m-color-warn);
538
+ --m-button-active-bg: color-mix(
539
+ in srgb,
540
+ var(--m-color-warn) 22%,
541
+ transparent
542
+ );
408
543
  }
409
544
 
410
545
  .m-button--help.m-button--ghost {
546
+ --m-button-bg: color-mix(
547
+ in srgb,
548
+ var(--m-color-help) 10%,
549
+ transparent
550
+ );
411
551
  --m-button-fg: var(--m-color-help);
412
- --m-button-border: var(--m-color-help);
552
+ --m-button-hover-bg: color-mix(
553
+ in srgb,
554
+ var(--m-color-help) 16%,
555
+ transparent
556
+ );
557
+ --m-button-hover-fg: var(--m-color-help);
558
+ --m-button-active-bg: color-mix(
559
+ in srgb,
560
+ var(--m-color-help) 22%,
561
+ transparent
562
+ );
413
563
  }
414
564
 
415
565
  .m-button--danger.m-button--ghost {
566
+ --m-button-bg: color-mix(
567
+ in srgb,
568
+ var(--m-color-danger) 10%,
569
+ transparent
570
+ );
416
571
  --m-button-fg: var(--m-color-danger);
417
- --m-button-border: var(--m-color-danger);
572
+ --m-button-hover-bg: color-mix(
573
+ in srgb,
574
+ var(--m-color-danger) 16%,
575
+ transparent
576
+ );
577
+ --m-button-hover-fg: var(--m-color-danger);
578
+ --m-button-active-bg: color-mix(
579
+ in srgb,
580
+ var(--m-color-danger) 22%,
581
+ transparent
582
+ );
418
583
  }
419
584
 
420
585
  .m-button--contrast.m-button--ghost {
586
+ --m-button-bg: color-mix(
587
+ in srgb,
588
+ var(--m-color-contrast) 10%,
589
+ transparent
590
+ );
421
591
  --m-button-fg: var(--m-color-contrast);
422
- --m-button-border: var(--m-color-contrast);
592
+ --m-button-hover-bg: color-mix(
593
+ in srgb,
594
+ var(--m-color-contrast) 16%,
595
+ transparent
596
+ );
597
+ --m-button-hover-fg: var(--m-color-contrast);
598
+ --m-button-active-bg: color-mix(
599
+ in srgb,
600
+ var(--m-color-contrast) 22%,
601
+ transparent
602
+ );
423
603
  }
424
604
 
425
605
  .m-button--quaternary {
@@ -458,11 +638,7 @@
458
638
  );
459
639
  }
460
640
 
461
- .m-button--custom.m-button--outlined,
462
- .m-button--custom.m-button--ghost,
463
- .m-button--custom.m-button--text,
464
- .m-button--custom.m-button--quaternary,
465
- .m-button--custom.m-button--link {
641
+ .m-button--custom.m-button--outlined {
466
642
  --m-button-bg: transparent;
467
643
  --m-button-fg: var(--m-button-color);
468
644
  --m-button-border: var(--m-button-color);
@@ -475,11 +651,72 @@
475
651
  --m-button-hover-border: var(--m-button-color);
476
652
  }
477
653
 
654
+ .m-button--custom.m-button--ghost {
655
+ --m-button-bg: color-mix(
656
+ in srgb,
657
+ var(--m-button-color) 10%,
658
+ transparent
659
+ );
660
+ --m-button-fg: var(--m-button-color);
661
+ --m-button-border: transparent;
662
+ --m-button-hover-bg: color-mix(
663
+ in srgb,
664
+ var(--m-button-color) 16%,
665
+ transparent
666
+ );
667
+ --m-button-hover-fg: var(--m-button-color);
668
+ --m-button-hover-border: transparent;
669
+ --m-button-active-bg: color-mix(
670
+ in srgb,
671
+ var(--m-button-color) 22%,
672
+ transparent
673
+ );
674
+ }
675
+
478
676
  .m-button--custom.m-button--text,
479
- .m-button--custom.m-button--quaternary,
677
+ .m-button--custom.m-button--quaternary {
678
+ --m-button-bg: transparent;
679
+ --m-button-fg: var(--m-button-color);
680
+ --m-button-border: transparent;
681
+ --m-button-hover-bg: color-mix(
682
+ in srgb,
683
+ var(--m-button-color) 12%,
684
+ transparent
685
+ );
686
+ --m-button-hover-fg: var(--m-button-color);
687
+ --m-button-hover-border: transparent;
688
+ }
689
+
690
+ .m-button--custom.m-button--plain {
691
+ --m-button-bg: color-mix(
692
+ in srgb,
693
+ var(--m-button-color) 10%,
694
+ transparent
695
+ );
696
+ --m-button-fg: var(--m-button-color);
697
+ --m-button-border: var(--m-button-color);
698
+ --m-button-hover-bg: color-mix(
699
+ in srgb,
700
+ var(--m-button-color) 16%,
701
+ transparent
702
+ );
703
+ --m-button-hover-fg: var(--m-button-color);
704
+ --m-button-hover-border: var(--m-button-color);
705
+ --m-button-active-bg: color-mix(
706
+ in srgb,
707
+ var(--m-button-color) 22%,
708
+ transparent
709
+ );
710
+ }
711
+
480
712
  .m-button--custom.m-button--link {
713
+ --m-button-bg: transparent;
714
+ --m-button-fg: var(--m-button-color);
481
715
  --m-button-border: transparent;
716
+ --m-button-hover-bg: transparent;
717
+ --m-button-hover-fg: var(--m-button-color);
482
718
  --m-button-hover-border: transparent;
719
+ --m-button-active-bg: transparent;
483
720
  }
484
721
 
485
722
  .m-button-group {
@@ -33,11 +33,16 @@ export interface ButtonProps {
33
33
  outlined?: boolean;
34
34
  /** Link-styled button. */
35
35
  link?: boolean;
36
- /** Ghost (transparent fill, tinted hover). */
36
+ /**
37
+ * Underline on hover for `link` buttons. Default `true`.
38
+ * Set `false` for a compact link look without underline.
39
+ */
40
+ underline?: boolean;
41
+ /** Soft fill matching text hover. */
37
42
  ghost?: boolean;
38
43
  /** Extra-quiet text button. */
39
44
  quaternary?: boolean;
40
- /** Muted/plain treatment for text or outlined. */
45
+ /** Soft fill matching outlined hover. Can also mute `text` / `outlined` / `link`. */
41
46
  plain?: boolean;
42
47
  /** Shortcut for outlined / text / link / ghost / quaternary. */
43
48
  variant?: ButtonVariant;
@@ -55,9 +60,9 @@ export interface ButtonProps {
55
60
  nativeType?: ButtonHTMLAttributes['type'];
56
61
  /** Accessible name, recommended for icon-only buttons. */
57
62
  ariaLabel?: string;
58
- /** Click ripple ink. Default `true`. Disabled when theme motion is `none`. */
63
+ /** Click ripple ink. Default `false`. Disabled when theme motion is `none`. */
59
64
  ripple?: boolean;
60
- /** Press scale on click. Default `true`. */
65
+ /** Press scale on click. Default `false`. */
61
66
  press?: boolean;
62
67
  }
63
68
  export interface ButtonEmits {
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/ContextMenu.vue"],"names":[],"mappings":";;AA6IA,OAAO,KAAK,EAAmB,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAUrF,KAAK,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,CAAC,CAAC;AAmCrE,iBAAS,IAAI,SAEZ;AAED,iBAAS,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,mBAAmB,QAUpD;AAsDD,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC;AAUF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAmHxD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"ContextMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/ContextMenu.vue"],"names":[],"mappings":";;AAiKA,OAAO,KAAK,EAAmB,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAWrF,KAAK,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,CAAC,CAAC;AAmCrE,iBAAS,IAAI,SAEZ;AAED,iBAAS,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,mBAAmB,QAUpD;AAyED,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC;AAUF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAmHxD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
@@ -15,6 +15,7 @@
15
15
  overflow: hidden;
16
16
  padding: var(--m-space-1);
17
17
  position: fixed;
18
+ width: max-content;
18
19
  z-index: var(--m-z-popper);
19
20
  }
20
21
 
@@ -24,8 +25,7 @@
24
25
  }
25
26
 
26
27
  .m-contextmenu__scroll-view {
27
- display: flex;
28
- flex-direction: column;
28
+ display: grid;
29
29
  gap: var(--m-contextmenu-item-gap);
30
30
  }
31
31
 
@@ -43,31 +43,32 @@
43
43
  cursor: pointer;
44
44
  display: flex;
45
45
  font-family: var(--m-font-sans);
46
+ font-size: var(--m-control-font-medium);
46
47
  gap: var(--m-space-2);
47
- min-height: var(--m-menu-item-height);
48
- padding: var(--m-space-2) var(--m-space-3);
49
- text-align: start;
48
+ min-height: var(--m-control-height-medium);
49
+ padding: 0 var(--m-control-padding-x-medium);
50
+ text-align: left;
50
51
  transition:
51
52
  background-color var(--m-motion-fast) var(--m-motion-ease),
52
- opacity var(--m-motion-fast) var(--m-motion-ease);
53
+ color var(--m-motion-fast) var(--m-motion-ease);
54
+ white-space: nowrap;
53
55
  width: 100%;
54
56
  }
55
57
 
56
58
  .m-contextmenu__item:hover:not(:disabled) {
57
- background: color-mix(
58
- in srgb,
59
- var(--m-color-primary) 10%,
60
- var(--m-color-surface)
61
- );
59
+ background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
60
+ color: var(--m-color-primary);
62
61
  }
63
62
 
64
63
  .m-contextmenu__item:disabled {
64
+ color: var(--m-color-text-muted);
65
65
  cursor: not-allowed;
66
66
  opacity: var(--m-opacity-disabled);
67
67
  }
68
68
 
69
69
  .m-contextmenu__item:focus-visible {
70
- box-shadow: var(--m-focus-shadow);
70
+ background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
71
+ box-shadow: none;
71
72
  outline: none;
72
73
  }
73
74
 
@@ -100,6 +101,10 @@
100
101
  flex-shrink: 0;
101
102
  }
102
103
 
104
+ .m-contextmenu__caret {
105
+ margin-left: auto;
106
+ }
107
+
103
108
  .m-contextmenu__submenu-wrap {
104
109
  position: relative;
105
110
  }
@@ -114,6 +119,7 @@
114
119
  min-width: var(--m-contextmenu-min-width);
115
120
  overflow: hidden;
116
121
  padding: var(--m-space-1);
122
+ width: max-content;
117
123
  }
118
124
 
119
125
  .m-contextmenu__submenu--teleported {
@@ -127,7 +133,6 @@
127
133
  }
128
134
 
129
135
  .m-contextmenu__submenu-view {
130
- display: flex;
131
- flex-direction: column;
136
+ display: grid;
132
137
  gap: var(--m-contextmenu-item-gap);
133
138
  }
@@ -502,14 +502,14 @@ a.m-menu__item-content--selected:visited {
502
502
  padding: 0;
503
503
  }
504
504
 
505
- .m-popover__content--right-start:has(.m-menu--flyout).m-popover-enter-from,
506
- .m-popover__content--right-start:has(.m-menu--flyout).m-popover-leave-to {
505
+ .m-popover__content--right-start:has(.m-menu--flyout).m-scale-fade-enter-from,
506
+ .m-popover__content--right-start:has(.m-menu--flyout).m-scale-fade-leave-to {
507
507
  opacity: 0;
508
508
  transform: translateX(calc(var(--m-motion-distance) * -0.5)) scale(0.98);
509
509
  }
510
510
 
511
- .m-popover__content--bottom-start:has(.m-menu--flyout).m-popover-enter-from,
512
- .m-popover__content--bottom-start:has(.m-menu--flyout).m-popover-leave-to {
511
+ .m-popover__content--bottom-start:has(.m-menu--flyout).m-scale-fade-enter-from,
512
+ .m-popover__content--bottom-start:has(.m-menu--flyout).m-scale-fade-leave-to {
513
513
  opacity: 0;
514
514
  transform: translateY(calc(var(--m-motion-distance) * -0.35)) scale(0.98);
515
515
  }