@sveltia/ui 0.72.2 → 0.73.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 (89) hide show
  1. package/dist/components/alert/alert.svelte +29 -5
  2. package/dist/components/alert/alert.svelte.d.ts +8 -4
  3. package/dist/components/alert/infobar.svelte +21 -5
  4. package/dist/components/alert/infobar.svelte.d.ts +10 -4
  5. package/dist/components/button/button.svelte +5 -1
  6. package/dist/components/button/select-button-group.svelte +1 -1
  7. package/dist/components/calendar/calendar.d.ts +1 -4
  8. package/dist/components/calendar/calendar.js +17 -0
  9. package/dist/components/calendar/calendar.svelte +67 -11
  10. package/dist/components/checkbox/checkbox-group.svelte +3 -1
  11. package/dist/components/checkbox/checkbox.svelte +3 -1
  12. package/dist/components/dialog/dialog.svelte +14 -2
  13. package/dist/components/dialog/prompt-dialog.svelte +9 -2
  14. package/dist/components/dialog/prompt-dialog.svelte.d.ts +4 -2
  15. package/dist/components/disclosure/disclosure.svelte +2 -1
  16. package/dist/components/drawer/drawer.svelte +28 -3
  17. package/dist/components/drawer/drawer.svelte.d.ts +16 -2
  18. package/dist/components/grid/grid-body.svelte +3 -1
  19. package/dist/components/grid/grid-foot.svelte +3 -1
  20. package/dist/components/grid/grid-head.svelte +3 -1
  21. package/dist/components/listbox/option-group.svelte +2 -1
  22. package/dist/components/listbox/option.svelte +4 -0
  23. package/dist/components/menu/menu-item-group.svelte +3 -1
  24. package/dist/components/radio/radio.svelte +21 -3
  25. package/dist/components/radio/radio.svelte.d.ts +12 -2
  26. package/dist/components/resizable-pane/resizable-handle.svelte +12 -0
  27. package/dist/components/select/combobox.svelte +69 -1
  28. package/dist/components/select/select-tags.svelte +34 -23
  29. package/dist/components/slider/slider.d.ts +6 -0
  30. package/dist/components/slider/slider.js +40 -0
  31. package/dist/components/slider/slider.svelte +45 -11
  32. package/dist/components/slider/slider.svelte.d.ts +14 -2
  33. package/dist/components/switch/switch.svelte +1 -1
  34. package/dist/components/table/table-body.svelte +3 -1
  35. package/dist/components/table/table-foot.svelte +3 -1
  36. package/dist/components/table/table-head.svelte +3 -1
  37. package/dist/components/text-editor/code-editor.svelte +22 -1
  38. package/dist/components/text-editor/code-editor.svelte.d.ts +28 -0
  39. package/dist/components/text-editor/shiki/version.d.ts +1 -1
  40. package/dist/components/text-editor/shiki/version.js +1 -1
  41. package/dist/components/text-editor/text-editor.svelte +23 -0
  42. package/dist/components/text-editor/text-editor.svelte.d.ts +28 -0
  43. package/dist/components/text-field/number-input.svelte +7 -17
  44. package/dist/components/text-field/search-bar.svelte +1 -0
  45. package/dist/components/text-field/text-input.svelte +1 -1
  46. package/dist/components/toast/toast.svelte +58 -4
  47. package/dist/components/toast/toast.svelte.d.ts +4 -2
  48. package/dist/components/util/app-shell.svelte +289 -5
  49. package/dist/components/util/popup.svelte +1 -1
  50. package/dist/locales/ar.yaml +20 -0
  51. package/dist/locales/bg.yaml +20 -0
  52. package/dist/locales/ca.yaml +20 -0
  53. package/dist/locales/cs.yaml +20 -0
  54. package/dist/locales/da.yaml +20 -0
  55. package/dist/locales/de.yaml +20 -0
  56. package/dist/locales/el.yaml +20 -0
  57. package/dist/locales/en-CA.yaml +20 -0
  58. package/dist/locales/en-GB.yaml +20 -0
  59. package/dist/locales/en-US.yaml +20 -0
  60. package/dist/locales/es-CO.yaml +20 -0
  61. package/dist/locales/fa.yaml +20 -0
  62. package/dist/locales/fi.yaml +20 -0
  63. package/dist/locales/fr.yaml +20 -0
  64. package/dist/locales/hr.yaml +20 -0
  65. package/dist/locales/it.yaml +20 -0
  66. package/dist/locales/ja.yaml +20 -0
  67. package/dist/locales/ko.yaml +20 -0
  68. package/dist/locales/nl.yaml +20 -0
  69. package/dist/locales/pl.yaml +20 -0
  70. package/dist/locales/pt-BR.yaml +20 -0
  71. package/dist/locales/pt-PT.yaml +20 -0
  72. package/dist/locales/ru.yaml +20 -0
  73. package/dist/locales/sv.yaml +20 -0
  74. package/dist/locales/tr.yaml +20 -0
  75. package/dist/locales/uk.yaml +20 -0
  76. package/dist/locales/vi.yaml +20 -0
  77. package/dist/locales/zh-CN.yaml +20 -0
  78. package/dist/locales/zh-TW.yaml +20 -0
  79. package/dist/services/group.svelte.js +60 -0
  80. package/dist/services/popup.svelte.js +24 -1
  81. package/dist/services/select.svelte.d.ts +5 -0
  82. package/dist/services/select.svelte.js +8 -0
  83. package/dist/services/type-ahead.d.ts +26 -0
  84. package/dist/services/type-ahead.js +81 -0
  85. package/dist/styles/core.scss +14 -3
  86. package/dist/styles/variables.scss +118 -1
  87. package/dist/typedefs.d.ts +7 -1
  88. package/dist/typedefs.js +4 -1
  89. package/package.json +3 -3
@@ -152,8 +152,11 @@
152
152
  var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
153
153
  var(--sui-alert-background-color-lightness)
154
154
  );
155
+ --sui-disabled-opacity: 0.35;
156
+ --sui-modal-border-width: 0;
155
157
  --sui-focus-ring-width: 2px;
156
- --sui-focus-ring-color: var(--sui-primary-accent-color-translucent);
158
+ --sui-focus-ring-color: var(--sui-primary-accent-color);
159
+ --sui-focus-ring-offset: 1px;
157
160
  --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
158
161
  --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
159
162
  --sui-error-border-color: hsl(
@@ -429,6 +432,280 @@
429
432
  --sui-alert-border-color-lightness: 38%;
430
433
  }
431
434
  }
435
+ :global(:root[data-contrast=more][data-theme=light]),
436
+ :global(:host[data-contrast=more][data-theme=light]) {
437
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 10%;
438
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 18%;
439
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 28%;
440
+ --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 45%;
441
+ --sui-background-color-3-hsl: var(--sui-base-hue) 5% 93%;
442
+ --sui-background-color-4-hsl: var(--sui-base-hue) 5% 88%;
443
+ --sui-background-color-5-hsl: var(--sui-base-hue) 5% 70%;
444
+ --sui-border-color-1-hsl: var(--sui-base-hue) 5% 40%;
445
+ --sui-border-color-2-hsl: var(--sui-base-hue) 5% 55%;
446
+ --sui-border-color-3-hsl: var(--sui-base-hue) 5% 65%;
447
+ --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 32%);
448
+ --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 37%);
449
+ --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 32%);
450
+ --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 26%);
451
+ --sui-alert-foreground-color-lightness: 18%;
452
+ --sui-alert-border-color-saturation: 55%;
453
+ --sui-alert-border-color-lightness: 40%;
454
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
455
+ --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
456
+ --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));
457
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
458
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
459
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
460
+ --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 70%);
461
+ --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 60%);
462
+ --sui-textbox-border-color: hsl(var(--sui-border-color-1-hsl));
463
+ --sui-textbox-placeholder-foreground-color: var(--sui-tertiary-foreground-color);
464
+ --sui-textbox-placeholder-opacity: 1;
465
+ --sui-disabled-opacity: 0.6;
466
+ --sui-modal-border-width: 1px;
467
+ }
468
+ :global(:root[data-contrast=more][data-theme=dark]),
469
+ :global(:host[data-contrast=more][data-theme=dark]) {
470
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 92%;
471
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 85%;
472
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 75%;
473
+ --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 55%;
474
+ --sui-background-color-1-hsl: var(--sui-base-hue) 10% 4%;
475
+ --sui-background-color-2-hsl: var(--sui-base-hue) 10% 7%;
476
+ --sui-background-color-3-hsl: var(--sui-base-hue) 10% 12%;
477
+ --sui-background-color-4-hsl: var(--sui-base-hue) 10% 18%;
478
+ --sui-background-color-5-hsl: var(--sui-base-hue) 10% 40%;
479
+ --sui-border-color-1-hsl: var(--sui-base-hue) 10% 60%;
480
+ --sui-border-color-2-hsl: var(--sui-base-hue) 10% 50%;
481
+ --sui-border-color-3-hsl: var(--sui-base-hue) 10% 40%;
482
+ --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 70%);
483
+ --sui-focus-ring-color: var(--sui-primary-accent-color-text);
484
+ --sui-alert-foreground-color-lightness: 85%;
485
+ --sui-alert-border-color-saturation: 55%;
486
+ --sui-alert-border-color-lightness: 55%;
487
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
488
+ --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
489
+ --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));
490
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
491
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
492
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
493
+ --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 70%);
494
+ --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 60%);
495
+ --sui-textbox-border-color: hsl(var(--sui-border-color-1-hsl));
496
+ --sui-textbox-placeholder-foreground-color: var(--sui-tertiary-foreground-color);
497
+ --sui-textbox-placeholder-opacity: 1;
498
+ --sui-disabled-opacity: 0.6;
499
+ --sui-modal-border-width: 1px;
500
+ }
501
+ @media (prefers-color-scheme: light) {
502
+ :global(:root[data-contrast=more]:not([data-theme])),
503
+ :global(:host[data-contrast=more]:not([data-theme])) {
504
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 10%;
505
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 18%;
506
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 28%;
507
+ --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 45%;
508
+ --sui-background-color-3-hsl: var(--sui-base-hue) 5% 93%;
509
+ --sui-background-color-4-hsl: var(--sui-base-hue) 5% 88%;
510
+ --sui-background-color-5-hsl: var(--sui-base-hue) 5% 70%;
511
+ --sui-border-color-1-hsl: var(--sui-base-hue) 5% 40%;
512
+ --sui-border-color-2-hsl: var(--sui-base-hue) 5% 55%;
513
+ --sui-border-color-3-hsl: var(--sui-base-hue) 5% 65%;
514
+ --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 32%);
515
+ --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 37%);
516
+ --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 32%);
517
+ --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 26%);
518
+ --sui-alert-foreground-color-lightness: 18%;
519
+ --sui-alert-border-color-saturation: 55%;
520
+ --sui-alert-border-color-lightness: 40%;
521
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
522
+ --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
523
+ --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));
524
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
525
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
526
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
527
+ --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 70%);
528
+ --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 60%);
529
+ --sui-textbox-border-color: hsl(var(--sui-border-color-1-hsl));
530
+ --sui-textbox-placeholder-foreground-color: var(--sui-tertiary-foreground-color);
531
+ --sui-textbox-placeholder-opacity: 1;
532
+ --sui-disabled-opacity: 0.6;
533
+ --sui-modal-border-width: 1px;
534
+ }
535
+ }
536
+ @media (prefers-color-scheme: dark) {
537
+ :global(:root[data-contrast=more]:not([data-theme])),
538
+ :global(:host[data-contrast=more]:not([data-theme])) {
539
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 92%;
540
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 85%;
541
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 75%;
542
+ --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 55%;
543
+ --sui-background-color-1-hsl: var(--sui-base-hue) 10% 4%;
544
+ --sui-background-color-2-hsl: var(--sui-base-hue) 10% 7%;
545
+ --sui-background-color-3-hsl: var(--sui-base-hue) 10% 12%;
546
+ --sui-background-color-4-hsl: var(--sui-base-hue) 10% 18%;
547
+ --sui-background-color-5-hsl: var(--sui-base-hue) 10% 40%;
548
+ --sui-border-color-1-hsl: var(--sui-base-hue) 10% 60%;
549
+ --sui-border-color-2-hsl: var(--sui-base-hue) 10% 50%;
550
+ --sui-border-color-3-hsl: var(--sui-base-hue) 10% 40%;
551
+ --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 70%);
552
+ --sui-focus-ring-color: var(--sui-primary-accent-color-text);
553
+ --sui-alert-foreground-color-lightness: 85%;
554
+ --sui-alert-border-color-saturation: 55%;
555
+ --sui-alert-border-color-lightness: 55%;
556
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
557
+ --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
558
+ --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));
559
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
560
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
561
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
562
+ --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 70%);
563
+ --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 60%);
564
+ --sui-textbox-border-color: hsl(var(--sui-border-color-1-hsl));
565
+ --sui-textbox-placeholder-foreground-color: var(--sui-tertiary-foreground-color);
566
+ --sui-textbox-placeholder-opacity: 1;
567
+ --sui-disabled-opacity: 0.6;
568
+ --sui-modal-border-width: 1px;
569
+ }
570
+ }
571
+ @media (prefers-contrast: more) {
572
+ :global(:root:not([data-contrast])[data-theme=light]),
573
+ :global(:host:not([data-contrast])[data-theme=light]) {
574
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 10%;
575
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 18%;
576
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 28%;
577
+ --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 45%;
578
+ --sui-background-color-3-hsl: var(--sui-base-hue) 5% 93%;
579
+ --sui-background-color-4-hsl: var(--sui-base-hue) 5% 88%;
580
+ --sui-background-color-5-hsl: var(--sui-base-hue) 5% 70%;
581
+ --sui-border-color-1-hsl: var(--sui-base-hue) 5% 40%;
582
+ --sui-border-color-2-hsl: var(--sui-base-hue) 5% 55%;
583
+ --sui-border-color-3-hsl: var(--sui-base-hue) 5% 65%;
584
+ --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 32%);
585
+ --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 37%);
586
+ --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 32%);
587
+ --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 26%);
588
+ --sui-alert-foreground-color-lightness: 18%;
589
+ --sui-alert-border-color-saturation: 55%;
590
+ --sui-alert-border-color-lightness: 40%;
591
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
592
+ --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
593
+ --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));
594
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
595
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
596
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
597
+ --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 70%);
598
+ --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 60%);
599
+ --sui-textbox-border-color: hsl(var(--sui-border-color-1-hsl));
600
+ --sui-textbox-placeholder-foreground-color: var(--sui-tertiary-foreground-color);
601
+ --sui-textbox-placeholder-opacity: 1;
602
+ --sui-disabled-opacity: 0.6;
603
+ --sui-modal-border-width: 1px;
604
+ }
605
+ :global(:root:not([data-contrast])[data-theme=dark]),
606
+ :global(:host:not([data-contrast])[data-theme=dark]) {
607
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 92%;
608
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 85%;
609
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 75%;
610
+ --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 55%;
611
+ --sui-background-color-1-hsl: var(--sui-base-hue) 10% 4%;
612
+ --sui-background-color-2-hsl: var(--sui-base-hue) 10% 7%;
613
+ --sui-background-color-3-hsl: var(--sui-base-hue) 10% 12%;
614
+ --sui-background-color-4-hsl: var(--sui-base-hue) 10% 18%;
615
+ --sui-background-color-5-hsl: var(--sui-base-hue) 10% 40%;
616
+ --sui-border-color-1-hsl: var(--sui-base-hue) 10% 60%;
617
+ --sui-border-color-2-hsl: var(--sui-base-hue) 10% 50%;
618
+ --sui-border-color-3-hsl: var(--sui-base-hue) 10% 40%;
619
+ --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 70%);
620
+ --sui-focus-ring-color: var(--sui-primary-accent-color-text);
621
+ --sui-alert-foreground-color-lightness: 85%;
622
+ --sui-alert-border-color-saturation: 55%;
623
+ --sui-alert-border-color-lightness: 55%;
624
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
625
+ --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
626
+ --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));
627
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
628
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
629
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
630
+ --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 70%);
631
+ --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 60%);
632
+ --sui-textbox-border-color: hsl(var(--sui-border-color-1-hsl));
633
+ --sui-textbox-placeholder-foreground-color: var(--sui-tertiary-foreground-color);
634
+ --sui-textbox-placeholder-opacity: 1;
635
+ --sui-disabled-opacity: 0.6;
636
+ --sui-modal-border-width: 1px;
637
+ }
638
+ }
639
+ @media (prefers-contrast: more) and (prefers-color-scheme: light) {
640
+ :global(:root:not([data-contrast]):not([data-theme])),
641
+ :global(:host:not([data-contrast]):not([data-theme])) {
642
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 10%;
643
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 18%;
644
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 28%;
645
+ --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 45%;
646
+ --sui-background-color-3-hsl: var(--sui-base-hue) 5% 93%;
647
+ --sui-background-color-4-hsl: var(--sui-base-hue) 5% 88%;
648
+ --sui-background-color-5-hsl: var(--sui-base-hue) 5% 70%;
649
+ --sui-border-color-1-hsl: var(--sui-base-hue) 5% 40%;
650
+ --sui-border-color-2-hsl: var(--sui-base-hue) 5% 55%;
651
+ --sui-border-color-3-hsl: var(--sui-base-hue) 5% 65%;
652
+ --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 32%);
653
+ --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 37%);
654
+ --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 32%);
655
+ --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 26%);
656
+ --sui-alert-foreground-color-lightness: 18%;
657
+ --sui-alert-border-color-saturation: 55%;
658
+ --sui-alert-border-color-lightness: 40%;
659
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
660
+ --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
661
+ --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));
662
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
663
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
664
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
665
+ --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 70%);
666
+ --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 60%);
667
+ --sui-textbox-border-color: hsl(var(--sui-border-color-1-hsl));
668
+ --sui-textbox-placeholder-foreground-color: var(--sui-tertiary-foreground-color);
669
+ --sui-textbox-placeholder-opacity: 1;
670
+ --sui-disabled-opacity: 0.6;
671
+ --sui-modal-border-width: 1px;
672
+ }
673
+ }
674
+ @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
675
+ :global(:root:not([data-contrast]):not([data-theme])),
676
+ :global(:host:not([data-contrast]):not([data-theme])) {
677
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 92%;
678
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 85%;
679
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 75%;
680
+ --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 55%;
681
+ --sui-background-color-1-hsl: var(--sui-base-hue) 10% 4%;
682
+ --sui-background-color-2-hsl: var(--sui-base-hue) 10% 7%;
683
+ --sui-background-color-3-hsl: var(--sui-base-hue) 10% 12%;
684
+ --sui-background-color-4-hsl: var(--sui-base-hue) 10% 18%;
685
+ --sui-background-color-5-hsl: var(--sui-base-hue) 10% 40%;
686
+ --sui-border-color-1-hsl: var(--sui-base-hue) 10% 60%;
687
+ --sui-border-color-2-hsl: var(--sui-base-hue) 10% 50%;
688
+ --sui-border-color-3-hsl: var(--sui-base-hue) 10% 40%;
689
+ --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 70%);
690
+ --sui-focus-ring-color: var(--sui-primary-accent-color-text);
691
+ --sui-alert-foreground-color-lightness: 85%;
692
+ --sui-alert-border-color-saturation: 55%;
693
+ --sui-alert-border-color-lightness: 55%;
694
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
695
+ --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
696
+ --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));
697
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
698
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
699
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
700
+ --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 70%);
701
+ --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 60%);
702
+ --sui-textbox-border-color: hsl(var(--sui-border-color-1-hsl));
703
+ --sui-textbox-placeholder-foreground-color: var(--sui-tertiary-foreground-color);
704
+ --sui-textbox-placeholder-opacity: 1;
705
+ --sui-disabled-opacity: 0.6;
706
+ --sui-modal-border-width: 1px;
707
+ }
708
+ }
432
709
 
433
710
  :global(.material-symbols-outlined) {
434
711
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
@@ -468,6 +745,7 @@
468
745
  }
469
746
  :global(:focus-visible) {
470
747
  outline-color: var(--sui-focus-ring-color);
748
+ outline-offset: var(--sui-focus-ring-offset, 0);
471
749
  z-index: 2;
472
750
  }
473
751
  :global(h1) {
@@ -561,22 +839,28 @@
561
839
  border-inline-start: 4px solid var(--sui-textbox-border-color);
562
840
  padding-inline-start: 12px;
563
841
  }
564
- :global(:is(.disabled, .readonly, [aria-disabled=true], [aria-readonly=true], [inert]):not(body)) {
842
+ :global(:is(.disabled, [aria-disabled=true], [inert]):not(body)) {
565
843
  cursor: default;
566
844
  pointer-events: none;
567
845
  -webkit-user-select: none;
568
846
  user-select: none;
569
- filter: grayscale(1) opacity(0.35);
847
+ filter: grayscale(1) opacity(var(--sui-disabled-opacity, 0.35));
570
848
  }
571
- :global(:is(.disabled, .readonly, [aria-disabled=true], [aria-readonly=true], [inert]):not(body)) :global(*) {
849
+ :global(:is(.disabled, [aria-disabled=true], [inert]):not(body)) :global(*) {
572
850
  filter: grayscale(0) opacity(1);
573
851
  }
574
- :global(:is(.disabled, .readonly, [aria-disabled=true], [aria-readonly=true], [inert])) :global(*) {
852
+ :global(:is(.disabled, [aria-disabled=true], [inert])) :global(*) {
575
853
  cursor: default;
576
854
  pointer-events: none;
577
855
  -webkit-user-select: none;
578
856
  user-select: none;
579
857
  }
858
+ :global(:is(.readonly, [aria-readonly=true]):not(body)) {
859
+ cursor: default;
860
+ }
861
+ :global(:is(.readonly, [aria-readonly=true]):not(body)) :global(*) {
862
+ cursor: default;
863
+ }
580
864
 
581
865
  .font-loader {
582
866
  position: absolute;
@@ -239,7 +239,7 @@
239
239
  .content.menu {
240
240
  border-width: var(--sui-menu-border-width, 1px);
241
241
  border-style: var(--sui-menu-border-style, solid);
242
- border-color: var(--sui-menu-border-width, var(--sui-secondary-border-color));
242
+ border-color: var(--sui-menu-border-color, var(--sui-secondary-border-color));
243
243
  border-radius: var(--sui-menu-border-radius, 4px);
244
244
  padding: var(--sui-menu-padding, 4px);
245
245
  }
@@ -18,6 +18,26 @@ expand: توسيع
18
18
  # Infobar/toast dismiss button label
19
19
  dismiss: تجاهل
20
20
 
21
+ # Alert & infobar status, read out by screen readers before the message (visually hidden)
22
+ alert:
23
+ error: خطأ
24
+ warning: تحذير
25
+ info: معلومات
26
+ success: نجاح
27
+
28
+ # Role descriptions, read out by screen readers in place of the generic “group” role
29
+ role_descriptions:
30
+ disclosure: قسم قابل للطي
31
+ option_group: مجموعة خيارات
32
+ menu_item_group: مجموعة عناصر قائمة
33
+ checkbox_group: مجموعة خانات اختيار
34
+ table_head: رأس الجدول
35
+ table_body: جسم الجدول
36
+ table_foot: تذييل الجدول
37
+ grid_head: رأس الشبكة
38
+ grid_body: جسم الشبكة
39
+ grid_foot: تذييل الشبكة
40
+
21
41
  # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
22
42
  emoji_suggestions: اقتراحات الرموز التعبيرية
23
43
 
@@ -18,6 +18,26 @@ expand: Разгъни
18
18
  # Infobar/toast dismiss button label
19
19
  dismiss: Отхвърли
20
20
 
21
+ # Alert & infobar status, read out by screen readers before the message (visually hidden)
22
+ alert:
23
+ error: Грешка
24
+ warning: Предупреждение
25
+ info: Информация
26
+ success: Успех
27
+
28
+ # Role descriptions, read out by screen readers in place of the generic “group” role
29
+ role_descriptions:
30
+ disclosure: разгъващ се раздел
31
+ option_group: група опции
32
+ menu_item_group: група елементи от меню
33
+ checkbox_group: група квадратчета за отметка
34
+ table_head: заглавна част на таблица
35
+ table_body: основна част на таблица
36
+ table_foot: долна част на таблица
37
+ grid_head: заглавна част на мрежа
38
+ grid_body: основна част на мрежа
39
+ grid_foot: долна част на мрежа
40
+
21
41
  # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
22
42
  emoji_suggestions: Предложения за емоджи
23
43
 
@@ -18,6 +18,26 @@ expand: Desplega
18
18
  # Infobar/toast dismiss button label
19
19
  dismiss: Descarta
20
20
 
21
+ # Alert & infobar status, read out by screen readers before the message (visually hidden)
22
+ alert:
23
+ error: Error
24
+ warning: Advertència
25
+ info: Informació
26
+ success: Èxit
27
+
28
+ # Role descriptions, read out by screen readers in place of the generic “group” role
29
+ role_descriptions:
30
+ disclosure: secció desplegable
31
+ option_group: grup d’opcions
32
+ menu_item_group: grup d’elements de menú
33
+ checkbox_group: grup de caselles de selecció
34
+ table_head: capçalera de taula
35
+ table_body: cos de taula
36
+ table_foot: peu de taula
37
+ grid_head: capçalera de graella
38
+ grid_body: cos de graella
39
+ grid_foot: peu de graella
40
+
21
41
  # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
22
42
  emoji_suggestions: Suggeriments d’emoji
23
43
 
@@ -18,6 +18,26 @@ expand: Rozbalit
18
18
  # Infobar/toast dismiss button label
19
19
  dismiss: Zavřít
20
20
 
21
+ # Alert & infobar status, read out by screen readers before the message (visually hidden)
22
+ alert:
23
+ error: Chyba
24
+ warning: Upozornění
25
+ info: Informace
26
+ success: Úspěch
27
+
28
+ # Role descriptions, read out by screen readers in place of the generic “group” role
29
+ role_descriptions:
30
+ disclosure: rozbalovací sekce
31
+ option_group: skupina možností
32
+ menu_item_group: skupina položek nabídky
33
+ checkbox_group: skupina zaškrtávacích políček
34
+ table_head: záhlaví tabulky
35
+ table_body: tělo tabulky
36
+ table_foot: zápatí tabulky
37
+ grid_head: záhlaví mřížky
38
+ grid_body: tělo mřížky
39
+ grid_foot: zápatí mřížky
40
+
21
41
  # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
22
42
  emoji_suggestions: Návrhy emodži
23
43
 
@@ -18,6 +18,26 @@ expand: Fold ud
18
18
  # Infobar/toast dismiss button label
19
19
  dismiss: Afvis
20
20
 
21
+ # Alert & infobar status, read out by screen readers before the message (visually hidden)
22
+ alert:
23
+ error: Fejl
24
+ warning: Advarsel
25
+ info: Information
26
+ success: Succes
27
+
28
+ # Role descriptions, read out by screen readers in place of the generic “group” role
29
+ role_descriptions:
30
+ disclosure: udvidelig sektion
31
+ option_group: gruppe af valgmuligheder
32
+ menu_item_group: gruppe af menupunkter
33
+ checkbox_group: gruppe af afkrydsningsfelter
34
+ table_head: tabelhoved
35
+ table_body: tabelindhold
36
+ table_foot: tabelfod
37
+ grid_head: gitterhoved
38
+ grid_body: gitterindhold
39
+ grid_foot: gitterfod
40
+
21
41
  # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
22
42
  emoji_suggestions: Emojiforslag
23
43
 
@@ -18,6 +18,26 @@ expand: Aufklappen
18
18
  # Infobar/toast dismiss button label
19
19
  dismiss: Ausblenden
20
20
 
21
+ # Alert & infobar status, read out by screen readers before the message (visually hidden)
22
+ alert:
23
+ error: Fehler
24
+ warning: Warnung
25
+ info: Information
26
+ success: Erfolg
27
+
28
+ # Role descriptions, read out by screen readers in place of the generic “group” role
29
+ role_descriptions:
30
+ disclosure: ausklappbarer Bereich
31
+ option_group: Optionsgruppe
32
+ menu_item_group: Menüeintragsgruppe
33
+ checkbox_group: Kontrollkästchengruppe
34
+ table_head: Tabellenkopf
35
+ table_body: Tabellenkörper
36
+ table_foot: Tabellenfuß
37
+ grid_head: Rasterkopf
38
+ grid_body: Rasterkörper
39
+ grid_foot: Rasterfuß
40
+
21
41
  # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
22
42
  emoji_suggestions: Emoji-Vorschläge
23
43
 
@@ -18,6 +18,26 @@ expand: Ανάπτυξη
18
18
  # Infobar/toast dismiss button label
19
19
  dismiss: Παράβλεψη
20
20
 
21
+ # Alert & infobar status, read out by screen readers before the message (visually hidden)
22
+ alert:
23
+ error: Σφάλμα
24
+ warning: Προειδοποίηση
25
+ info: Πληροφορίες
26
+ success: Επιτυχία
27
+
28
+ # Role descriptions, read out by screen readers in place of the generic “group” role
29
+ role_descriptions:
30
+ disclosure: αναπτυσσόμενη ενότητα
31
+ option_group: ομάδα επιλογών
32
+ menu_item_group: ομάδα στοιχείων μενού
33
+ checkbox_group: ομάδα πλαισίων ελέγχου
34
+ table_head: κεφαλίδα πίνακα
35
+ table_body: σώμα πίνακα
36
+ table_foot: υποσέλιδο πίνακα
37
+ grid_head: κεφαλίδα πλέγματος
38
+ grid_body: σώμα πλέγματος
39
+ grid_foot: υποσέλιδο πλέγματος
40
+
21
41
  # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
22
42
  emoji_suggestions: Προτάσεις emoji
23
43
 
@@ -18,6 +18,26 @@ expand: Expand
18
18
  # Infobar/toast dismiss button label
19
19
  dismiss: Dismiss
20
20
 
21
+ # Alert & infobar status, read out by screen readers before the message (visually hidden)
22
+ alert:
23
+ error: Error
24
+ warning: Warning
25
+ info: Information
26
+ success: Success
27
+
28
+ # Role descriptions, read out by screen readers in place of the generic “group” role
29
+ role_descriptions:
30
+ disclosure: disclosure
31
+ option_group: option group
32
+ menu_item_group: menu item group
33
+ checkbox_group: checkbox group
34
+ table_head: table head
35
+ table_body: table body
36
+ table_foot: table foot
37
+ grid_head: grid head
38
+ grid_body: grid body
39
+ grid_foot: grid foot
40
+
21
41
  # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
22
42
  emoji_suggestions: Emoji Suggestions
23
43
 
@@ -18,6 +18,26 @@ expand: Expand
18
18
  # Infobar/toast dismiss button label
19
19
  dismiss: Dismiss
20
20
 
21
+ # Alert & infobar status, read out by screen readers before the message (visually hidden)
22
+ alert:
23
+ error: Error
24
+ warning: Warning
25
+ info: Information
26
+ success: Success
27
+
28
+ # Role descriptions, read out by screen readers in place of the generic “group” role
29
+ role_descriptions:
30
+ disclosure: disclosure
31
+ option_group: option group
32
+ menu_item_group: menu item group
33
+ checkbox_group: checkbox group
34
+ table_head: table head
35
+ table_body: table body
36
+ table_foot: table foot
37
+ grid_head: grid head
38
+ grid_body: grid body
39
+ grid_foot: grid foot
40
+
21
41
  # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
22
42
  emoji_suggestions: Emoji Suggestions
23
43
 
@@ -18,6 +18,26 @@ expand: Expand
18
18
  # Infobar/toast dismiss button label
19
19
  dismiss: Dismiss
20
20
 
21
+ # Alert & infobar status, read out by screen readers before the message (visually hidden)
22
+ alert:
23
+ error: Error
24
+ warning: Warning
25
+ info: Information
26
+ success: Success
27
+
28
+ # Role descriptions, read out by screen readers in place of the generic “group” role
29
+ role_descriptions:
30
+ disclosure: disclosure
31
+ option_group: option group
32
+ menu_item_group: menu item group
33
+ checkbox_group: checkbox group
34
+ table_head: table head
35
+ table_body: table body
36
+ table_foot: table foot
37
+ grid_head: grid head
38
+ grid_body: grid body
39
+ grid_foot: grid foot
40
+
21
41
  # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
22
42
  emoji_suggestions: Emoji Suggestions
23
43
 
@@ -18,6 +18,26 @@ expand: Expandir
18
18
  # Infobar/toast dismiss button label
19
19
  dismiss: Descartar
20
20
 
21
+ # Alert & infobar status, read out by screen readers before the message (visually hidden)
22
+ alert:
23
+ error: Error
24
+ warning: Advertencia
25
+ info: Información
26
+ success: Éxito
27
+
28
+ # Role descriptions, read out by screen readers in place of the generic “group” role
29
+ role_descriptions:
30
+ disclosure: sección desplegable
31
+ option_group: grupo de opciones
32
+ menu_item_group: grupo de elementos de menú
33
+ checkbox_group: grupo de casillas de verificación
34
+ table_head: encabezado de tabla
35
+ table_body: cuerpo de tabla
36
+ table_foot: pie de tabla
37
+ grid_head: encabezado de cuadrícula
38
+ grid_body: cuerpo de cuadrícula
39
+ grid_foot: pie de cuadrícula
40
+
21
41
  # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
22
42
  emoji_suggestions: Sugerencias de emojis
23
43
 
@@ -18,6 +18,26 @@ expand: باز کردن
18
18
  # Infobar/toast dismiss button label
19
19
  dismiss: بستن
20
20
 
21
+ # Alert & infobar status, read out by screen readers before the message (visually hidden)
22
+ alert:
23
+ error: خطا
24
+ warning: هشدار
25
+ info: اطلاعات
26
+ success: موفقیت
27
+
28
+ # Role descriptions, read out by screen readers in place of the generic “group” role
29
+ role_descriptions:
30
+ disclosure: بخش بازشدنی
31
+ option_group: گروه گزینه‌ها
32
+ menu_item_group: گروه موارد منو
33
+ checkbox_group: گروه کادرهای انتخاب
34
+ table_head: سرصفحه جدول
35
+ table_body: بدنه جدول
36
+ table_foot: پاصفحه جدول
37
+ grid_head: سرصفحه شبکه
38
+ grid_body: بدنه شبکه
39
+ grid_foot: پاصفحه شبکه
40
+
21
41
  # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
22
42
  emoji_suggestions: پیشنهادهای ایموجی
23
43