@vonage/vivid 3.49.0-preview.1 → 3.49.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.
@@ -245,10 +245,6 @@
245
245
  "description": "Base class for action-group",
246
246
  "name": "ActionGroup",
247
247
  "cssProperties": [
248
- {
249
- "name": "--vvd-action-group-accent-backdrop",
250
- "default": "var(--vvd-color-canvas)"
251
- },
252
248
  {
253
249
  "name": "--vvd-action-group-accent-primary",
254
250
  "default": "var(--vvd-color-canvas-text)"
@@ -824,10 +820,6 @@
824
820
  "name": "--vvd-appearanceUI-cta-contrast",
825
821
  "default": "var(--vvd-color-cta-800)"
826
822
  },
827
- {
828
- "name": "--vvd-appearanceUI-cta-backdrop",
829
- "default": "var(--vvd-color-cta-50)"
830
- },
831
823
  {
832
824
  "name": "--vvd-appearanceUI-cta-intermediate",
833
825
  "default": "var(--vvd-color-cta-500)"
@@ -876,10 +868,6 @@
876
868
  "name": "--vvd-appearanceUI-success-contrast",
877
869
  "default": "var(--vvd-color-success-800)"
878
870
  },
879
- {
880
- "name": "--vvd-appearanceUI-success-backdrop",
881
- "default": "var(--vvd-color-success-50)"
882
- },
883
871
  {
884
872
  "name": "--vvd-appearanceUI-success-intermediate",
885
873
  "default": "var(--vvd-color-success-500)"
@@ -928,10 +916,6 @@
928
916
  "name": "--vvd-appearanceUI-alert-contrast",
929
917
  "default": "var(--vvd-color-alert-800)"
930
918
  },
931
- {
932
- "name": "--vvd-appearanceUI-alert-backdrop",
933
- "default": "var(--vvd-color-alert-50)"
934
- },
935
919
  {
936
920
  "name": "--vvd-appearanceUI-alert-intermediate",
937
921
  "default": "var(--vvd-color-alert-500)"
@@ -980,10 +964,6 @@
980
964
  "name": "--vvd-appearanceUI-warning-contrast",
981
965
  "default": "var(--vvd-color-warning-800)"
982
966
  },
983
- {
984
- "name": "--vvd-appearanceUI-warning-backdrop",
985
- "default": "var(--vvd-color-warning-50)"
986
- },
987
967
  {
988
968
  "name": "--vvd-appearanceUI-warning-intermediate",
989
969
  "default": "var(--vvd-color-warning-300)"
@@ -1032,10 +1012,6 @@
1032
1012
  "name": "--vvd-appearanceUI-information-contrast",
1033
1013
  "default": "var(--vvd-color-information-800)"
1034
1014
  },
1035
- {
1036
- "name": "--vvd-appearanceUI-information-backdrop",
1037
- "default": "var(--vvd-color-information-50)"
1038
- },
1039
1015
  {
1040
1016
  "name": "--vvd-appearanceUI-information-intermediate",
1041
1017
  "default": "var(--vvd-color-information-500)"
@@ -1084,10 +1060,6 @@
1084
1060
  "name": "--vvd-appearanceUI-announcement-contrast",
1085
1061
  "default": "var(--vvd-color-announcement-800)"
1086
1062
  },
1087
- {
1088
- "name": "--vvd-appearanceUI-announcement-backdrop",
1089
- "default": "var(--vvd-color-announcement-50)"
1090
- },
1091
1063
  {
1092
1064
  "name": "--vvd-appearanceUI-announcement-intermediate",
1093
1065
  "default": "var(--vvd-color-announcement-500)"
@@ -1136,10 +1108,6 @@
1136
1108
  "name": "--vvd-appearanceUI-accent-contrast",
1137
1109
  "default": "var(--vvd-color-neutral-800)"
1138
1110
  },
1139
- {
1140
- "name": "--vvd-appearanceUI-accent-backdrop",
1141
- "default": "var(--vvd-color-canvas)"
1142
- },
1143
1111
  {
1144
1112
  "name": "--vvd-appearanceUI-accent-intermediate",
1145
1113
  "default": "var(--vvd-color-neutral-500)"
@@ -3672,12 +3640,12 @@
3672
3640
  "default": "var(--vvd-color-cta-600)"
3673
3641
  },
3674
3642
  {
3675
- "name": "--vvd-checkbox-cta-intermediate",
3676
- "default": "var(--vvd-color-cta-500)"
3643
+ "name": "--vvd-checkbox-cta-fierce",
3644
+ "default": "var(--vvd-color-cta-700)"
3677
3645
  },
3678
3646
  {
3679
- "name": "--vvd-checkbox-cta-backdrop",
3680
- "default": "var(--vvd-color-cta-50)"
3647
+ "name": "--vvd-checkbox-cta-intermediate",
3648
+ "default": "var(--vvd-color-cta-500)"
3681
3649
  },
3682
3650
  {
3683
3651
  "name": "--vvd-checkbox-cta-firm",
@@ -3696,12 +3664,12 @@
3696
3664
  "default": "var(--vvd-color-neutral-800)"
3697
3665
  },
3698
3666
  {
3699
- "name": "--vvd-checkbox-accent-intermediate",
3700
- "default": "var(--vvd-color-neutral-500)"
3667
+ "name": "--vvd-checkbox-accent-fierce",
3668
+ "default": "var(--vvd-color-neutral-700)"
3701
3669
  },
3702
3670
  {
3703
- "name": "--vvd-checkbox-accent-backdrop",
3704
- "default": "var(--vvd-color-canvas)"
3671
+ "name": "--vvd-checkbox-accent-intermediate",
3672
+ "default": "var(--vvd-color-neutral-500)"
3705
3673
  },
3706
3674
  {
3707
3675
  "name": "--vvd-checkbox-accent-firm",
@@ -3828,10 +3796,6 @@
3828
3796
  "description": "Base class for combobox",
3829
3797
  "name": "Combobox",
3830
3798
  "cssProperties": [
3831
- {
3832
- "name": "--vvd-combobox-accent-backdrop",
3833
- "default": "var(--vvd-color-canvas)"
3834
- },
3835
3799
  {
3836
3800
  "name": "--vvd-combobox-accent-intermediate",
3837
3801
  "default": "var(--vvd-color-neutral-500)"
@@ -7212,10 +7176,6 @@
7212
7176
  "description": "Base class for listbox",
7213
7177
  "name": "Listbox",
7214
7178
  "cssProperties": [
7215
- {
7216
- "name": "--vvd-listbox-accent-backdrop",
7217
- "default": "var(--vvd-color-canvas)"
7218
- },
7219
7179
  {
7220
7180
  "name": "--vvd-listbox-accent-intermediate",
7221
7181
  "default": "var(--vvd-color-neutral-500)"
@@ -8498,8 +8458,12 @@
8498
8458
  "default": "var(--vvd-color-success-500)"
8499
8459
  },
8500
8460
  {
8501
- "name": "--vvd-text-field-success-backdrop",
8502
- "default": "var(--vvd-color-success-50)"
8461
+ "name": "--vvd-text-field-success-primary-text",
8462
+ "default": "var(--vvd-color-canvas)"
8463
+ },
8464
+ {
8465
+ "name": "--vvd-text-field-success-primary-increment",
8466
+ "default": "var(--vvd-color-success-600)"
8503
8467
  },
8504
8468
  {
8505
8469
  "name": "--vvd-text-field-success-intermediate",
@@ -8517,13 +8481,21 @@
8517
8481
  "name": "--vvd-text-field-success-soft",
8518
8482
  "default": "var(--vvd-color-success-100)"
8519
8483
  },
8484
+ {
8485
+ "name": "--vvd-text-field-success-fierce",
8486
+ "default": "var(--vvd-color-success-700)"
8487
+ },
8520
8488
  {
8521
8489
  "name": "--vvd-text-field-alert-primary",
8522
8490
  "default": "var(--vvd-color-alert-500)"
8523
8491
  },
8524
8492
  {
8525
- "name": "--vvd-text-field-alert-backdrop",
8526
- "default": "var(--vvd-color-alert-50)"
8493
+ "name": "--vvd-text-field-alert-primary-text",
8494
+ "default": "var(--vvd-color-canvas)"
8495
+ },
8496
+ {
8497
+ "name": "--vvd-text-field-alert-primary-increment",
8498
+ "default": "var(--vvd-color-alert-600)"
8527
8499
  },
8528
8500
  {
8529
8501
  "name": "--vvd-text-field-alert-intermediate",
@@ -8541,14 +8513,22 @@
8541
8513
  "name": "--vvd-text-field-alert-soft",
8542
8514
  "default": "var(--vvd-color-alert-100)"
8543
8515
  },
8516
+ {
8517
+ "name": "--vvd-text-field-alert-fierce",
8518
+ "default": "var(--vvd-color-alert-700)"
8519
+ },
8544
8520
  {
8545
8521
  "name": "--vvd-text-field-accent-primary",
8546
8522
  "default": "var(--vvd-color-canvas-text)"
8547
8523
  },
8548
8524
  {
8549
- "name": "--vvd-text-field-accent-backdrop",
8525
+ "name": "--vvd-text-field-accent-primary-text",
8550
8526
  "default": "var(--vvd-color-canvas)"
8551
8527
  },
8528
+ {
8529
+ "name": "--vvd-text-field-accent-primary-increment",
8530
+ "default": "var(--vvd-color-neutral-800)"
8531
+ },
8552
8532
  {
8553
8533
  "name": "--vvd-text-field-accent-intermediate",
8554
8534
  "default": "var(--vvd-color-neutral-500)"
@@ -8564,6 +8544,10 @@
8564
8544
  {
8565
8545
  "name": "--vvd-text-field-accent-soft",
8566
8546
  "default": "var(--vvd-color-neutral-100)"
8547
+ },
8548
+ {
8549
+ "name": "--vvd-text-field-accent-fierce",
8550
+ "default": "var(--vvd-color-neutral-700)"
8567
8551
  }
8568
8552
  ],
8569
8553
  "members": [
@@ -9805,14 +9789,14 @@
9805
9789
  "name": "--vvd-radio-cta-intermediate",
9806
9790
  "default": "var(--vvd-color-cta-500)"
9807
9791
  },
9808
- {
9809
- "name": "--vvd-radio-cta-backdrop",
9810
- "default": "var(--vvd-color-cta-50)"
9811
- },
9812
9792
  {
9813
9793
  "name": "--vvd-radio-cta-firm",
9814
9794
  "default": "var(--vvd-color-cta-600)"
9815
9795
  },
9796
+ {
9797
+ "name": "--vvd-radio-cta-fierce",
9798
+ "default": "var(--vvd-color-cta-700)"
9799
+ },
9816
9800
  {
9817
9801
  "name": "--vvd-radio-accent-primary",
9818
9802
  "default": "var(--vvd-color-canvas-text)"
@@ -9829,13 +9813,13 @@
9829
9813
  "name": "--vvd-radio-accent-intermediate",
9830
9814
  "default": "var(--vvd-color-neutral-500)"
9831
9815
  },
9832
- {
9833
- "name": "--vvd-radio-accent-backdrop",
9834
- "default": "var(--vvd-color-canvas)"
9835
- },
9836
9816
  {
9837
9817
  "name": "--vvd-radio-accent-firm",
9838
9818
  "default": "var(--vvd-color-canvas-text)"
9819
+ },
9820
+ {
9821
+ "name": "--vvd-radio-accent-fierce",
9822
+ "default": "var(--vvd-color-neutral-700)"
9839
9823
  }
9840
9824
  ],
9841
9825
  "members": [
@@ -10071,8 +10055,12 @@
10071
10055
  "default": "var(--vvd-color-success-500)"
10072
10056
  },
10073
10057
  {
10074
- "name": "--vvd-select-success-backdrop",
10075
- "default": "var(--vvd-color-success-50)"
10058
+ "name": "--vvd-select-success-primary-text",
10059
+ "default": "var(--vvd-color-canvas)"
10060
+ },
10061
+ {
10062
+ "name": "--vvd-select-success-primary-increment",
10063
+ "default": "var(--vvd-color-success-600)"
10076
10064
  },
10077
10065
  {
10078
10066
  "name": "--vvd-select-success-intermediate",
@@ -10082,13 +10070,21 @@
10082
10070
  "name": "--vvd-select-success-firm",
10083
10071
  "default": "var(--vvd-color-success-600)"
10084
10072
  },
10073
+ {
10074
+ "name": "--vvd-select-success-fierce",
10075
+ "default": "var(--vvd-color-success-700)"
10076
+ },
10085
10077
  {
10086
10078
  "name": "--vvd-select-alert-primary",
10087
10079
  "default": "var(--vvd-color-alert-500)"
10088
10080
  },
10089
10081
  {
10090
- "name": "--vvd-select-alert-backdrop",
10091
- "default": "var(--vvd-color-alert-50)"
10082
+ "name": "--vvd-select-alert-primary-text",
10083
+ "default": "var(--vvd-color-canvas)"
10084
+ },
10085
+ {
10086
+ "name": "--vvd-select-alert-primary-increment",
10087
+ "default": "var(--vvd-color-alert-600)"
10092
10088
  },
10093
10089
  {
10094
10090
  "name": "--vvd-select-alert-intermediate",
@@ -10098,14 +10094,22 @@
10098
10094
  "name": "--vvd-select-alert-firm",
10099
10095
  "default": "var(--vvd-color-alert-600)"
10100
10096
  },
10097
+ {
10098
+ "name": "--vvd-select-alert-fierce",
10099
+ "default": "var(--vvd-color-alert-700)"
10100
+ },
10101
10101
  {
10102
10102
  "name": "--vvd-select-accent-primary",
10103
10103
  "default": "var(--vvd-color-canvas-text)"
10104
10104
  },
10105
10105
  {
10106
- "name": "--vvd-select-accent-backdrop",
10106
+ "name": "--vvd-select-accent-primary-text",
10107
10107
  "default": "var(--vvd-color-canvas)"
10108
10108
  },
10109
+ {
10110
+ "name": "--vvd-select-accent-primary-increment",
10111
+ "default": "var(--vvd-color-neutral-800)"
10112
+ },
10109
10113
  {
10110
10114
  "name": "--vvd-select-accent-intermediate",
10111
10115
  "default": "var(--vvd-color-neutral-500)"
@@ -10113,6 +10117,10 @@
10113
10117
  {
10114
10118
  "name": "--vvd-select-accent-firm",
10115
10119
  "default": "var(--vvd-color-canvas-text)"
10120
+ },
10121
+ {
10122
+ "name": "--vvd-select-accent-fierce",
10123
+ "default": "var(--vvd-color-neutral-700)"
10116
10124
  }
10117
10125
  ],
10118
10126
  "slots": [
@@ -11353,10 +11361,6 @@
11353
11361
  "name": "--vvd-switch-cta-primary-increment",
11354
11362
  "default": "var(--vvd-color-cta-600)"
11355
11363
  },
11356
- {
11357
- "name": "--vvd-switch-cta-backdrop",
11358
- "default": "var(--vvd-color-cta-50)"
11359
- },
11360
11364
  {
11361
11365
  "name": "--vvd-switch-cta-firm",
11362
11366
  "default": "var(--vvd-color-cta-600)"
@@ -11377,10 +11381,6 @@
11377
11381
  "name": "--vvd-switch-alert-primary-increment",
11378
11382
  "default": "var(--vvd-color-alert-600)"
11379
11383
  },
11380
- {
11381
- "name": "--vvd-switch-alert-backdrop",
11382
- "default": "var(--vvd-color-alert-50)"
11383
- },
11384
11384
  {
11385
11385
  "name": "--vvd-switch-alert-firm",
11386
11386
  "default": "var(--vvd-color-alert-600)"
@@ -11401,10 +11401,6 @@
11401
11401
  "name": "--vvd-switch-success-primary-increment",
11402
11402
  "default": "var(--vvd-color-success-600)"
11403
11403
  },
11404
- {
11405
- "name": "--vvd-switch-success-backdrop",
11406
- "default": "var(--vvd-color-success-50)"
11407
- },
11408
11404
  {
11409
11405
  "name": "--vvd-switch-success-firm",
11410
11406
  "default": "var(--vvd-color-success-600)"
@@ -11425,10 +11421,6 @@
11425
11421
  "name": "--vvd-switch-accent-primary-increment",
11426
11422
  "default": "var(--vvd-color-neutral-800)"
11427
11423
  },
11428
- {
11429
- "name": "--vvd-switch-accent-backdrop",
11430
- "default": "var(--vvd-color-canvas)"
11431
- },
11432
11424
  {
11433
11425
  "name": "--vvd-switch-accent-firm",
11434
11426
  "default": "var(--vvd-color-canvas-text)"
@@ -12608,8 +12600,12 @@
12608
12600
  "default": "var(--vvd-color-success-500)"
12609
12601
  },
12610
12602
  {
12611
- "name": "--vvd-text-area-success-backdrop",
12612
- "default": "var(--vvd-color-success-50)"
12603
+ "name": "--vvd-text-area-success-primary-text",
12604
+ "default": "var(--vvd-color-canvas)"
12605
+ },
12606
+ {
12607
+ "name": "--vvd-text-area-success-primary-increment",
12608
+ "default": "var(--vvd-color-success-600)"
12613
12609
  },
12614
12610
  {
12615
12611
  "name": "--vvd-text-area-success-intermediate",
@@ -12619,6 +12615,10 @@
12619
12615
  "name": "--vvd-text-area-success-firm",
12620
12616
  "default": "var(--vvd-color-success-600)"
12621
12617
  },
12618
+ {
12619
+ "name": "--vvd-text-area-success-fierce",
12620
+ "default": "var(--vvd-color-success-700)"
12621
+ },
12622
12622
  {
12623
12623
  "name": "--vvd-text-area-success-faint",
12624
12624
  "default": "var(--vvd-color-success-50)"
@@ -12632,8 +12632,12 @@
12632
12632
  "default": "var(--vvd-color-alert-500)"
12633
12633
  },
12634
12634
  {
12635
- "name": "--vvd-text-area-alert-backdrop",
12636
- "default": "var(--vvd-color-alert-50)"
12635
+ "name": "--vvd-text-area-alert-primary-text",
12636
+ "default": "var(--vvd-color-canvas)"
12637
+ },
12638
+ {
12639
+ "name": "--vvd-text-area-alert-primary-increment",
12640
+ "default": "var(--vvd-color-alert-600)"
12637
12641
  },
12638
12642
  {
12639
12643
  "name": "--vvd-text-area-alert-intermediate",
@@ -12643,6 +12647,10 @@
12643
12647
  "name": "--vvd-text-area-alert-firm",
12644
12648
  "default": "var(--vvd-color-alert-600)"
12645
12649
  },
12650
+ {
12651
+ "name": "--vvd-text-area-alert-fierce",
12652
+ "default": "var(--vvd-color-alert-700)"
12653
+ },
12646
12654
  {
12647
12655
  "name": "--vvd-text-area-alert-faint",
12648
12656
  "default": "var(--vvd-color-alert-50)"
@@ -12656,9 +12664,13 @@
12656
12664
  "default": "var(--vvd-color-canvas-text)"
12657
12665
  },
12658
12666
  {
12659
- "name": "--vvd-text-area-accent-backdrop",
12667
+ "name": "--vvd-text-area-accent-primary-text",
12660
12668
  "default": "var(--vvd-color-canvas)"
12661
12669
  },
12670
+ {
12671
+ "name": "--vvd-text-area-accent-primary-increment",
12672
+ "default": "var(--vvd-color-neutral-800)"
12673
+ },
12662
12674
  {
12663
12675
  "name": "--vvd-text-area-accent-intermediate",
12664
12676
  "default": "var(--vvd-color-neutral-500)"
@@ -12667,6 +12679,10 @@
12667
12679
  "name": "--vvd-text-area-accent-firm",
12668
12680
  "default": "var(--vvd-color-canvas-text)"
12669
12681
  },
12682
+ {
12683
+ "name": "--vvd-text-area-accent-fierce",
12684
+ "default": "var(--vvd-color-neutral-700)"
12685
+ },
12670
12686
  {
12671
12687
  "name": "--vvd-text-area-accent-faint",
12672
12688
  "default": "var(--vvd-color-neutral-50)"
@@ -12792,8 +12808,12 @@
12792
12808
  "default": "var(--vvd-color-success-500)"
12793
12809
  },
12794
12810
  {
12795
- "name": "--vvd-text-field-success-backdrop",
12796
- "default": "var(--vvd-color-success-50)"
12811
+ "name": "--vvd-text-field-success-primary-text",
12812
+ "default": "var(--vvd-color-canvas)"
12813
+ },
12814
+ {
12815
+ "name": "--vvd-text-field-success-primary-increment",
12816
+ "default": "var(--vvd-color-success-600)"
12797
12817
  },
12798
12818
  {
12799
12819
  "name": "--vvd-text-field-success-intermediate",
@@ -12811,13 +12831,21 @@
12811
12831
  "name": "--vvd-text-field-success-soft",
12812
12832
  "default": "var(--vvd-color-success-100)"
12813
12833
  },
12834
+ {
12835
+ "name": "--vvd-text-field-success-fierce",
12836
+ "default": "var(--vvd-color-success-700)"
12837
+ },
12814
12838
  {
12815
12839
  "name": "--vvd-text-field-alert-primary",
12816
12840
  "default": "var(--vvd-color-alert-500)"
12817
12841
  },
12818
12842
  {
12819
- "name": "--vvd-text-field-alert-backdrop",
12820
- "default": "var(--vvd-color-alert-50)"
12843
+ "name": "--vvd-text-field-alert-primary-text",
12844
+ "default": "var(--vvd-color-canvas)"
12845
+ },
12846
+ {
12847
+ "name": "--vvd-text-field-alert-primary-increment",
12848
+ "default": "var(--vvd-color-alert-600)"
12821
12849
  },
12822
12850
  {
12823
12851
  "name": "--vvd-text-field-alert-intermediate",
@@ -12835,14 +12863,22 @@
12835
12863
  "name": "--vvd-text-field-alert-soft",
12836
12864
  "default": "var(--vvd-color-alert-100)"
12837
12865
  },
12866
+ {
12867
+ "name": "--vvd-text-field-alert-fierce",
12868
+ "default": "var(--vvd-color-alert-700)"
12869
+ },
12838
12870
  {
12839
12871
  "name": "--vvd-text-field-accent-primary",
12840
12872
  "default": "var(--vvd-color-canvas-text)"
12841
12873
  },
12842
12874
  {
12843
- "name": "--vvd-text-field-accent-backdrop",
12875
+ "name": "--vvd-text-field-accent-primary-text",
12844
12876
  "default": "var(--vvd-color-canvas)"
12845
12877
  },
12878
+ {
12879
+ "name": "--vvd-text-field-accent-primary-increment",
12880
+ "default": "var(--vvd-color-neutral-800)"
12881
+ },
12846
12882
  {
12847
12883
  "name": "--vvd-text-field-accent-intermediate",
12848
12884
  "default": "var(--vvd-color-neutral-500)"
@@ -12858,6 +12894,10 @@
12858
12894
  {
12859
12895
  "name": "--vvd-text-field-accent-soft",
12860
12896
  "default": "var(--vvd-color-neutral-100)"
12897
+ },
12898
+ {
12899
+ "name": "--vvd-text-field-accent-fierce",
12900
+ "default": "var(--vvd-color-neutral-700)"
12861
12901
  }
12862
12902
  ],
12863
12903
  "slots": [
package/listbox/index.cjs CHANGED
@@ -64,7 +64,7 @@ const ListboxTemplate = (context) => {
64
64
  `;
65
65
  };
66
66
 
67
- const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{position:relative;display:inline-flex;box-sizing:border-box;padding:4px;background-color:var(--_appearance-color-fill);border-radius:var(--_listbox-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base{--_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:not(.orientation-horizontal){flex-direction:column}.focus-indicator{pointer-events:none}:host(:not(:focus-within)) .focus-indicator{display:none}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}\n";
67
+ const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{position:relative;display:inline-flex;box-sizing:border-box;padding:4px;background-color:var(--_appearance-color-fill);border-radius:var(--_listbox-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:not(.orientation-horizontal){flex-direction:column}.focus-indicator{pointer-events:none}:host(:not(:focus-within)) .focus-indicator{display:none}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}\n";
68
68
 
69
69
  const listboxDefinition = listbox.Listbox.compose({
70
70
  baseName: "listbox",
package/listbox/index.js CHANGED
@@ -62,7 +62,7 @@ const ListboxTemplate = (context) => {
62
62
  `;
63
63
  };
64
64
 
65
- const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{position:relative;display:inline-flex;box-sizing:border-box;padding:4px;background-color:var(--_appearance-color-fill);border-radius:var(--_listbox-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base{--_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:not(.orientation-horizontal){flex-direction:column}.focus-indicator{pointer-events:none}:host(:not(:focus-within)) .focus-indicator{display:none}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}\n";
65
+ const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{position:relative;display:inline-flex;box-sizing:border-box;padding:4px;background-color:var(--_appearance-color-fill);border-radius:var(--_listbox-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:not(.orientation-horizontal){flex-direction:column}.focus-indicator{pointer-events:none}:host(:not(:focus-within)) .focus-indicator{display:none}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}\n";
66
66
 
67
67
  const listboxDefinition = Listbox.compose({
68
68
  baseName: "listbox",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonage/vivid",
3
- "version": "3.49.0-preview.1",
3
+ "version": "3.49.0",
4
4
  "type": "module",
5
5
  "module": "./index.js",
6
6
  "main": "./index.cjs",
@@ -100,7 +100,7 @@ index.__decorate([
100
100
  index.observable
101
101
  ], Checkbox$1.prototype, "indeterminate", void 0);
102
102
 
103
- const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-backdrop: var(--vvd-checkbox-cta-backdrop, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-backdrop: var(--vvd-checkbox-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:checked,.checked):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(:checked,.checked):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}@supports selector(:focus-visible){.base:focus-visible{outline:none}}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:4px;box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:4px}.base:not(:focus-visible) .focus-indicator{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}\n";
103
+ const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(:checked,.checked):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(:checked,.checked):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}@supports selector(:focus-visible){.base:focus-visible{outline:none}}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:4px;box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:4px}.base:not(:focus-visible) .focus-indicator{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}\n";
104
104
 
105
105
  var __defProp = Object.defineProperty;
106
106
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -98,7 +98,7 @@ __decorate([
98
98
  observable
99
99
  ], Checkbox$1.prototype, "indeterminate", void 0);
100
100
 
101
- const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-backdrop: var(--vvd-checkbox-cta-backdrop, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-backdrop: var(--vvd-checkbox-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:checked,.checked):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(:checked,.checked):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}@supports selector(:focus-visible){.base:focus-visible{outline:none}}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:4px;box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:4px}.base:not(:focus-visible) .focus-indicator{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}\n";
101
+ const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(:checked,.checked):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(:checked,.checked):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}@supports selector(:focus-visible){.base:focus-visible{outline:none}}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:4px;box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:4px}.base:not(:focus-visible) .focus-indicator{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}\n";
102
102
 
103
103
  var __defProp = Object.defineProperty;
104
104
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -623,7 +623,7 @@ index.__decorate([
623
623
  applyMixins.applyMixins(DelegatesARIACombobox, listbox.DelegatesARIAListbox);
624
624
  applyMixins.applyMixins(Combobox$1, startEnd.StartEnd, DelegatesARIACombobox);
625
625
 
626
- const styles = ":host{position:relative}.base{--_text-field-gutter-end: 44px}.icon{inset-inline-end:16px;inset-inline-start:unset}:not(.disabled) .icon{cursor:pointer}.disabled .icon{cursor:not-allowed}.listbox{padding:4px;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint}.listbox{--_connotation-color-backdrop: var(--vvd-combobox-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-combobox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-combobox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-combobox-accent-soft, var(--vvd-color-neutral-100))}.listbox{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.listbox.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.listbox:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.listbox:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}::part(popup-base){inline-size:100%}\n";
626
+ const styles = ":host{position:relative}.base{--_text-field-gutter-end: 44px}.icon{inset-inline-end:16px;inset-inline-start:unset}:not(.disabled) .icon{cursor:pointer}.disabled .icon{cursor:not-allowed}.listbox{padding:4px;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint}.listbox{--_connotation-color-intermediate: var(--vvd-combobox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-combobox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-combobox-accent-soft, var(--vvd-color-neutral-100))}.listbox{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.listbox.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.listbox:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.listbox:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}::part(popup-base){inline-size:100%}\n";
627
627
 
628
628
  var __defProp = Object.defineProperty;
629
629
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -621,7 +621,7 @@ __decorate([
621
621
  applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
622
622
  applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
623
623
 
624
- const styles = ":host{position:relative}.base{--_text-field-gutter-end: 44px}.icon{inset-inline-end:16px;inset-inline-start:unset}:not(.disabled) .icon{cursor:pointer}.disabled .icon{cursor:not-allowed}.listbox{padding:4px;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint}.listbox{--_connotation-color-backdrop: var(--vvd-combobox-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-combobox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-combobox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-combobox-accent-soft, var(--vvd-color-neutral-100))}.listbox{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.listbox.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.listbox:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.listbox:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}::part(popup-base){inline-size:100%}\n";
624
+ const styles = ":host{position:relative}.base{--_text-field-gutter-end: 44px}.icon{inset-inline-end:16px;inset-inline-start:unset}:not(.disabled) .icon{cursor:pointer}.disabled .icon{cursor:not-allowed}.listbox{padding:4px;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint}.listbox{--_connotation-color-intermediate: var(--vvd-combobox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-combobox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-combobox-accent-soft, var(--vvd-color-neutral-100))}.listbox{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.listbox.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.listbox:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.listbox:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}::part(popup-base){inline-size:100%}\n";
625
625
 
626
626
  var __defProp = Object.defineProperty;
627
627
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;