@vonage/vivid 4.16.1 → 4.16.2
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.
- package/custom-elements.json +203 -203
- package/package.json +1 -1
- package/shared/definition42.cjs +7 -1
- package/shared/definition42.js +7 -1
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
package/custom-elements.json
CHANGED
|
@@ -22662,209 +22662,6 @@
|
|
|
22662
22662
|
}
|
|
22663
22663
|
]
|
|
22664
22664
|
},
|
|
22665
|
-
{
|
|
22666
|
-
"kind": "javascript-module",
|
|
22667
|
-
"path": "libs/components/src/shared/foundation/anchor/anchor.ts",
|
|
22668
|
-
"declarations": [
|
|
22669
|
-
{
|
|
22670
|
-
"kind": "class",
|
|
22671
|
-
"description": "Based largely on the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element .",
|
|
22672
|
-
"name": "Anchor",
|
|
22673
|
-
"members": [
|
|
22674
|
-
{
|
|
22675
|
-
"kind": "field",
|
|
22676
|
-
"name": "download",
|
|
22677
|
-
"type": {
|
|
22678
|
-
"text": "string"
|
|
22679
|
-
},
|
|
22680
|
-
"description": "Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22681
|
-
"privacy": "public"
|
|
22682
|
-
},
|
|
22683
|
-
{
|
|
22684
|
-
"kind": "field",
|
|
22685
|
-
"name": "href",
|
|
22686
|
-
"type": {
|
|
22687
|
-
"text": "string"
|
|
22688
|
-
},
|
|
22689
|
-
"description": "The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22690
|
-
"privacy": "public"
|
|
22691
|
-
},
|
|
22692
|
-
{
|
|
22693
|
-
"kind": "field",
|
|
22694
|
-
"name": "hreflang",
|
|
22695
|
-
"type": {
|
|
22696
|
-
"text": "string"
|
|
22697
|
-
},
|
|
22698
|
-
"description": "Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22699
|
-
"privacy": "public"
|
|
22700
|
-
},
|
|
22701
|
-
{
|
|
22702
|
-
"kind": "field",
|
|
22703
|
-
"name": "ping",
|
|
22704
|
-
"type": {
|
|
22705
|
-
"text": "string"
|
|
22706
|
-
},
|
|
22707
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22708
|
-
"privacy": "public"
|
|
22709
|
-
},
|
|
22710
|
-
{
|
|
22711
|
-
"kind": "field",
|
|
22712
|
-
"name": "referrerpolicy",
|
|
22713
|
-
"type": {
|
|
22714
|
-
"text": "string"
|
|
22715
|
-
},
|
|
22716
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22717
|
-
"privacy": "public"
|
|
22718
|
-
},
|
|
22719
|
-
{
|
|
22720
|
-
"kind": "field",
|
|
22721
|
-
"name": "rel",
|
|
22722
|
-
"type": {
|
|
22723
|
-
"text": "string"
|
|
22724
|
-
},
|
|
22725
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22726
|
-
"privacy": "public"
|
|
22727
|
-
},
|
|
22728
|
-
{
|
|
22729
|
-
"kind": "field",
|
|
22730
|
-
"name": "target",
|
|
22731
|
-
"type": {
|
|
22732
|
-
"text": "'_self' | '_blank' | '_parent' | '_top'"
|
|
22733
|
-
},
|
|
22734
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22735
|
-
"privacy": "public"
|
|
22736
|
-
},
|
|
22737
|
-
{
|
|
22738
|
-
"kind": "field",
|
|
22739
|
-
"name": "type",
|
|
22740
|
-
"type": {
|
|
22741
|
-
"text": "string"
|
|
22742
|
-
},
|
|
22743
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22744
|
-
"privacy": "public"
|
|
22745
|
-
},
|
|
22746
|
-
{
|
|
22747
|
-
"kind": "field",
|
|
22748
|
-
"name": "control",
|
|
22749
|
-
"type": {
|
|
22750
|
-
"text": "HTMLAnchorElement | undefined"
|
|
22751
|
-
},
|
|
22752
|
-
"description": "References the root element"
|
|
22753
|
-
}
|
|
22754
|
-
],
|
|
22755
|
-
"attributes": [
|
|
22756
|
-
{
|
|
22757
|
-
"name": "download",
|
|
22758
|
-
"type": {
|
|
22759
|
-
"text": "string"
|
|
22760
|
-
},
|
|
22761
|
-
"description": "Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22762
|
-
"fieldName": "download"
|
|
22763
|
-
},
|
|
22764
|
-
{
|
|
22765
|
-
"name": "href",
|
|
22766
|
-
"type": {
|
|
22767
|
-
"text": "string"
|
|
22768
|
-
},
|
|
22769
|
-
"description": "The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22770
|
-
"fieldName": "href"
|
|
22771
|
-
},
|
|
22772
|
-
{
|
|
22773
|
-
"name": "hreflang",
|
|
22774
|
-
"type": {
|
|
22775
|
-
"text": "string"
|
|
22776
|
-
},
|
|
22777
|
-
"description": "Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22778
|
-
"fieldName": "hreflang"
|
|
22779
|
-
},
|
|
22780
|
-
{
|
|
22781
|
-
"name": "ping",
|
|
22782
|
-
"type": {
|
|
22783
|
-
"text": "string"
|
|
22784
|
-
},
|
|
22785
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22786
|
-
"fieldName": "ping"
|
|
22787
|
-
},
|
|
22788
|
-
{
|
|
22789
|
-
"name": "referrerpolicy",
|
|
22790
|
-
"type": {
|
|
22791
|
-
"text": "string"
|
|
22792
|
-
},
|
|
22793
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22794
|
-
"fieldName": "referrerpolicy"
|
|
22795
|
-
},
|
|
22796
|
-
{
|
|
22797
|
-
"name": "rel",
|
|
22798
|
-
"type": {
|
|
22799
|
-
"text": "string"
|
|
22800
|
-
},
|
|
22801
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22802
|
-
"fieldName": "rel"
|
|
22803
|
-
},
|
|
22804
|
-
{
|
|
22805
|
-
"name": "target",
|
|
22806
|
-
"type": {
|
|
22807
|
-
"text": "'_self' | '_blank' | '_parent' | '_top'"
|
|
22808
|
-
},
|
|
22809
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22810
|
-
"fieldName": "target"
|
|
22811
|
-
},
|
|
22812
|
-
{
|
|
22813
|
-
"name": "type",
|
|
22814
|
-
"type": {
|
|
22815
|
-
"text": "string"
|
|
22816
|
-
},
|
|
22817
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
22818
|
-
"fieldName": "type"
|
|
22819
|
-
}
|
|
22820
|
-
]
|
|
22821
|
-
},
|
|
22822
|
-
{
|
|
22823
|
-
"kind": "class",
|
|
22824
|
-
"description": "Includes ARIA states and properties relating to the ARIA link role",
|
|
22825
|
-
"name": "DelegatesARIALink",
|
|
22826
|
-
"members": [
|
|
22827
|
-
{
|
|
22828
|
-
"kind": "field",
|
|
22829
|
-
"name": "ariaExpanded",
|
|
22830
|
-
"type": {
|
|
22831
|
-
"text": "'true' | 'false' | string | null"
|
|
22832
|
-
},
|
|
22833
|
-
"description": "See https://www.w3.org/WAI/PF/aria/roles#link for more information",
|
|
22834
|
-
"privacy": "public"
|
|
22835
|
-
}
|
|
22836
|
-
],
|
|
22837
|
-
"attributes": [
|
|
22838
|
-
{
|
|
22839
|
-
"name": "aria-expanded",
|
|
22840
|
-
"type": {
|
|
22841
|
-
"text": "'true' | 'false' | string | null"
|
|
22842
|
-
},
|
|
22843
|
-
"description": "See https://www.w3.org/WAI/PF/aria/roles#link for more information",
|
|
22844
|
-
"fieldName": "ariaExpanded"
|
|
22845
|
-
}
|
|
22846
|
-
]
|
|
22847
|
-
}
|
|
22848
|
-
],
|
|
22849
|
-
"exports": [
|
|
22850
|
-
{
|
|
22851
|
-
"kind": "js",
|
|
22852
|
-
"name": "Anchor",
|
|
22853
|
-
"declaration": {
|
|
22854
|
-
"name": "Anchor",
|
|
22855
|
-
"module": "libs/components/src/shared/foundation/anchor/anchor.ts"
|
|
22856
|
-
}
|
|
22857
|
-
},
|
|
22858
|
-
{
|
|
22859
|
-
"kind": "js",
|
|
22860
|
-
"name": "DelegatesARIALink",
|
|
22861
|
-
"declaration": {
|
|
22862
|
-
"name": "DelegatesARIALink",
|
|
22863
|
-
"module": "libs/components/src/shared/foundation/anchor/anchor.ts"
|
|
22864
|
-
}
|
|
22865
|
-
}
|
|
22866
|
-
]
|
|
22867
|
-
},
|
|
22868
22665
|
{
|
|
22869
22666
|
"kind": "javascript-module",
|
|
22870
22667
|
"path": "libs/components/src/shared/foundation/button/button.form-associated.ts",
|
|
@@ -23286,6 +23083,209 @@
|
|
|
23286
23083
|
}
|
|
23287
23084
|
]
|
|
23288
23085
|
},
|
|
23086
|
+
{
|
|
23087
|
+
"kind": "javascript-module",
|
|
23088
|
+
"path": "libs/components/src/shared/foundation/anchor/anchor.ts",
|
|
23089
|
+
"declarations": [
|
|
23090
|
+
{
|
|
23091
|
+
"kind": "class",
|
|
23092
|
+
"description": "Based largely on the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element .",
|
|
23093
|
+
"name": "Anchor",
|
|
23094
|
+
"members": [
|
|
23095
|
+
{
|
|
23096
|
+
"kind": "field",
|
|
23097
|
+
"name": "download",
|
|
23098
|
+
"type": {
|
|
23099
|
+
"text": "string"
|
|
23100
|
+
},
|
|
23101
|
+
"description": "Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23102
|
+
"privacy": "public"
|
|
23103
|
+
},
|
|
23104
|
+
{
|
|
23105
|
+
"kind": "field",
|
|
23106
|
+
"name": "href",
|
|
23107
|
+
"type": {
|
|
23108
|
+
"text": "string"
|
|
23109
|
+
},
|
|
23110
|
+
"description": "The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23111
|
+
"privacy": "public"
|
|
23112
|
+
},
|
|
23113
|
+
{
|
|
23114
|
+
"kind": "field",
|
|
23115
|
+
"name": "hreflang",
|
|
23116
|
+
"type": {
|
|
23117
|
+
"text": "string"
|
|
23118
|
+
},
|
|
23119
|
+
"description": "Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23120
|
+
"privacy": "public"
|
|
23121
|
+
},
|
|
23122
|
+
{
|
|
23123
|
+
"kind": "field",
|
|
23124
|
+
"name": "ping",
|
|
23125
|
+
"type": {
|
|
23126
|
+
"text": "string"
|
|
23127
|
+
},
|
|
23128
|
+
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23129
|
+
"privacy": "public"
|
|
23130
|
+
},
|
|
23131
|
+
{
|
|
23132
|
+
"kind": "field",
|
|
23133
|
+
"name": "referrerpolicy",
|
|
23134
|
+
"type": {
|
|
23135
|
+
"text": "string"
|
|
23136
|
+
},
|
|
23137
|
+
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23138
|
+
"privacy": "public"
|
|
23139
|
+
},
|
|
23140
|
+
{
|
|
23141
|
+
"kind": "field",
|
|
23142
|
+
"name": "rel",
|
|
23143
|
+
"type": {
|
|
23144
|
+
"text": "string"
|
|
23145
|
+
},
|
|
23146
|
+
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23147
|
+
"privacy": "public"
|
|
23148
|
+
},
|
|
23149
|
+
{
|
|
23150
|
+
"kind": "field",
|
|
23151
|
+
"name": "target",
|
|
23152
|
+
"type": {
|
|
23153
|
+
"text": "'_self' | '_blank' | '_parent' | '_top'"
|
|
23154
|
+
},
|
|
23155
|
+
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23156
|
+
"privacy": "public"
|
|
23157
|
+
},
|
|
23158
|
+
{
|
|
23159
|
+
"kind": "field",
|
|
23160
|
+
"name": "type",
|
|
23161
|
+
"type": {
|
|
23162
|
+
"text": "string"
|
|
23163
|
+
},
|
|
23164
|
+
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23165
|
+
"privacy": "public"
|
|
23166
|
+
},
|
|
23167
|
+
{
|
|
23168
|
+
"kind": "field",
|
|
23169
|
+
"name": "control",
|
|
23170
|
+
"type": {
|
|
23171
|
+
"text": "HTMLAnchorElement | undefined"
|
|
23172
|
+
},
|
|
23173
|
+
"description": "References the root element"
|
|
23174
|
+
}
|
|
23175
|
+
],
|
|
23176
|
+
"attributes": [
|
|
23177
|
+
{
|
|
23178
|
+
"name": "download",
|
|
23179
|
+
"type": {
|
|
23180
|
+
"text": "string"
|
|
23181
|
+
},
|
|
23182
|
+
"description": "Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23183
|
+
"fieldName": "download"
|
|
23184
|
+
},
|
|
23185
|
+
{
|
|
23186
|
+
"name": "href",
|
|
23187
|
+
"type": {
|
|
23188
|
+
"text": "string"
|
|
23189
|
+
},
|
|
23190
|
+
"description": "The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23191
|
+
"fieldName": "href"
|
|
23192
|
+
},
|
|
23193
|
+
{
|
|
23194
|
+
"name": "hreflang",
|
|
23195
|
+
"type": {
|
|
23196
|
+
"text": "string"
|
|
23197
|
+
},
|
|
23198
|
+
"description": "Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23199
|
+
"fieldName": "hreflang"
|
|
23200
|
+
},
|
|
23201
|
+
{
|
|
23202
|
+
"name": "ping",
|
|
23203
|
+
"type": {
|
|
23204
|
+
"text": "string"
|
|
23205
|
+
},
|
|
23206
|
+
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23207
|
+
"fieldName": "ping"
|
|
23208
|
+
},
|
|
23209
|
+
{
|
|
23210
|
+
"name": "referrerpolicy",
|
|
23211
|
+
"type": {
|
|
23212
|
+
"text": "string"
|
|
23213
|
+
},
|
|
23214
|
+
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23215
|
+
"fieldName": "referrerpolicy"
|
|
23216
|
+
},
|
|
23217
|
+
{
|
|
23218
|
+
"name": "rel",
|
|
23219
|
+
"type": {
|
|
23220
|
+
"text": "string"
|
|
23221
|
+
},
|
|
23222
|
+
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23223
|
+
"fieldName": "rel"
|
|
23224
|
+
},
|
|
23225
|
+
{
|
|
23226
|
+
"name": "target",
|
|
23227
|
+
"type": {
|
|
23228
|
+
"text": "'_self' | '_blank' | '_parent' | '_top'"
|
|
23229
|
+
},
|
|
23230
|
+
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23231
|
+
"fieldName": "target"
|
|
23232
|
+
},
|
|
23233
|
+
{
|
|
23234
|
+
"name": "type",
|
|
23235
|
+
"type": {
|
|
23236
|
+
"text": "string"
|
|
23237
|
+
},
|
|
23238
|
+
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.",
|
|
23239
|
+
"fieldName": "type"
|
|
23240
|
+
}
|
|
23241
|
+
]
|
|
23242
|
+
},
|
|
23243
|
+
{
|
|
23244
|
+
"kind": "class",
|
|
23245
|
+
"description": "Includes ARIA states and properties relating to the ARIA link role",
|
|
23246
|
+
"name": "DelegatesARIALink",
|
|
23247
|
+
"members": [
|
|
23248
|
+
{
|
|
23249
|
+
"kind": "field",
|
|
23250
|
+
"name": "ariaExpanded",
|
|
23251
|
+
"type": {
|
|
23252
|
+
"text": "'true' | 'false' | string | null"
|
|
23253
|
+
},
|
|
23254
|
+
"description": "See https://www.w3.org/WAI/PF/aria/roles#link for more information",
|
|
23255
|
+
"privacy": "public"
|
|
23256
|
+
}
|
|
23257
|
+
],
|
|
23258
|
+
"attributes": [
|
|
23259
|
+
{
|
|
23260
|
+
"name": "aria-expanded",
|
|
23261
|
+
"type": {
|
|
23262
|
+
"text": "'true' | 'false' | string | null"
|
|
23263
|
+
},
|
|
23264
|
+
"description": "See https://www.w3.org/WAI/PF/aria/roles#link for more information",
|
|
23265
|
+
"fieldName": "ariaExpanded"
|
|
23266
|
+
}
|
|
23267
|
+
]
|
|
23268
|
+
}
|
|
23269
|
+
],
|
|
23270
|
+
"exports": [
|
|
23271
|
+
{
|
|
23272
|
+
"kind": "js",
|
|
23273
|
+
"name": "Anchor",
|
|
23274
|
+
"declaration": {
|
|
23275
|
+
"name": "Anchor",
|
|
23276
|
+
"module": "libs/components/src/shared/foundation/anchor/anchor.ts"
|
|
23277
|
+
}
|
|
23278
|
+
},
|
|
23279
|
+
{
|
|
23280
|
+
"kind": "js",
|
|
23281
|
+
"name": "DelegatesARIALink",
|
|
23282
|
+
"declaration": {
|
|
23283
|
+
"name": "DelegatesARIALink",
|
|
23284
|
+
"module": "libs/components/src/shared/foundation/anchor/anchor.ts"
|
|
23285
|
+
}
|
|
23286
|
+
}
|
|
23287
|
+
]
|
|
23288
|
+
},
|
|
23289
23289
|
{
|
|
23290
23290
|
"kind": "javascript-module",
|
|
23291
23291
|
"path": "libs/components/src/shared/foundation/listbox/listbox.ts",
|
package/package.json
CHANGED
package/shared/definition42.cjs
CHANGED
|
@@ -18,7 +18,7 @@ const slotted = require('./slotted.cjs');
|
|
|
18
18
|
const repeat = require('./repeat.cjs');
|
|
19
19
|
const classNames = require('./class-names.cjs');
|
|
20
20
|
|
|
21
|
-
const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.fieldset:focus-within{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:100px;outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:100%}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
|
|
21
|
+
const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.fieldset:focus-within{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:100px;outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
|
|
22
22
|
|
|
23
23
|
const optionTagStyles = ".base{--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% );--outline-color: transparent}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% );--outline-color: transparent}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
|
|
24
24
|
|
|
@@ -992,6 +992,11 @@ function renderFieldset(context) {
|
|
|
992
992
|
</div>
|
|
993
993
|
`;
|
|
994
994
|
}
|
|
995
|
+
function setFixedDropdownVarWidth(x) {
|
|
996
|
+
return x.open && x.fixedDropdown ? `--_searchable-select-fixed-width: ${Math.round(
|
|
997
|
+
x.getBoundingClientRect().width
|
|
998
|
+
)}px` : null;
|
|
999
|
+
}
|
|
995
1000
|
function renderControl(context) {
|
|
996
1001
|
const popupTag = context.tagFor(definition.Popup);
|
|
997
1002
|
return vividElement.html`
|
|
@@ -1007,6 +1012,7 @@ function renderControl(context) {
|
|
|
1007
1012
|
:open="${(x) => x.open}"
|
|
1008
1013
|
class="popup"
|
|
1009
1014
|
placement="bottom-start"
|
|
1015
|
+
style="${setFixedDropdownVarWidth}"
|
|
1010
1016
|
strategy="${(x) => x.fixedDropdown ? "fixed" : "absolute"}">
|
|
1011
1017
|
<div
|
|
1012
1018
|
class="listbox"
|
package/shared/definition42.js
CHANGED
|
@@ -16,7 +16,7 @@ import { s as slotted } from './slotted.js';
|
|
|
16
16
|
import { r as repeat } from './repeat.js';
|
|
17
17
|
import { c as classNames } from './class-names.js';
|
|
18
18
|
|
|
19
|
-
const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.fieldset:focus-within{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:100px;outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:100%}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
|
|
19
|
+
const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.fieldset:focus-within{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:100px;outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
|
|
20
20
|
|
|
21
21
|
const optionTagStyles = ".base{--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% );--outline-color: transparent}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% );--outline-color: transparent}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
|
|
22
22
|
|
|
@@ -990,6 +990,11 @@ function renderFieldset(context) {
|
|
|
990
990
|
</div>
|
|
991
991
|
`;
|
|
992
992
|
}
|
|
993
|
+
function setFixedDropdownVarWidth(x) {
|
|
994
|
+
return x.open && x.fixedDropdown ? `--_searchable-select-fixed-width: ${Math.round(
|
|
995
|
+
x.getBoundingClientRect().width
|
|
996
|
+
)}px` : null;
|
|
997
|
+
}
|
|
993
998
|
function renderControl(context) {
|
|
994
999
|
const popupTag = context.tagFor(Popup);
|
|
995
1000
|
return html`
|
|
@@ -1005,6 +1010,7 @@ function renderControl(context) {
|
|
|
1005
1010
|
:open="${(x) => x.open}"
|
|
1006
1011
|
class="popup"
|
|
1007
1012
|
placement="bottom-start"
|
|
1013
|
+
style="${setFixedDropdownVarWidth}"
|
|
1008
1014
|
strategy="${(x) => x.fixedDropdown ? "fixed" : "absolute"}">
|
|
1009
1015
|
<div
|
|
1010
1016
|
class="listbox"
|
package/styles/core/all.css
CHANGED
package/styles/core/theme.css
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 21 Feb 2025 12:48:36 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Fri, 21 Feb 2025 12:48:36 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Fri, 21 Feb 2025 12:48:36 GMT
|
|
12
12
|
*/
|
|
13
13
|
/**
|
|
14
14
|
* Do not edit directly
|
|
15
|
-
* Generated on
|
|
15
|
+
* Generated on Fri, 21 Feb 2025 12:48:36 GMT
|
|
16
16
|
*/
|
|
17
17
|
@property --vvd-size-density {
|
|
18
18
|
syntax: "<integer>";
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 21 Feb 2025 12:48:36 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Fri, 21 Feb 2025 12:48:36 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Fri, 21 Feb 2025 12:48:36 GMT
|
|
12
12
|
*/
|
|
13
13
|
/**
|
|
14
14
|
* Do not edit directly
|
|
15
|
-
* Generated on
|
|
15
|
+
* Generated on Fri, 21 Feb 2025 12:48:36 GMT
|
|
16
16
|
*/
|
|
17
17
|
@property --vvd-size-density {
|
|
18
18
|
syntax: "<integer>";
|