@fluentui/web-components 3.0.0-beta.125 → 3.0.0-beta.127
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/CHANGELOG.md +21 -2
- package/custom-elements.json +410 -7
- package/dist/esm/field/field.base.js +0 -1
- package/dist/esm/field/field.base.js.map +1 -1
- package/dist/esm/tablist/tablist.base.js +7 -0
- package/dist/esm/tablist/tablist.base.js.map +1 -1
- package/dist/web-components.js +7 -1
- package/dist/web-components.min.js +2 -2
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/web-components
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 14 Oct 2025 04:06:33 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-beta.127](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.127)
|
|
8
|
+
|
|
9
|
+
Tue, 14 Oct 2025 04:06:33 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.126..@fluentui/web-components_v3.0.0-beta.127)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- remove aria-hidden from field labels to zoom text accessibility works, remove field text-input and text-area examples from storybook ([PR #35308](https://github.com/microsoft/fluentui/pull/35308) by jes@microsoft.com)
|
|
15
|
+
- [chore]: bump min version of node from 20 to 22 ([PR #35286](https://github.com/microsoft/fluentui/pull/35286) by 863023+radium-v@users.noreply.github.com)
|
|
16
|
+
|
|
17
|
+
## [3.0.0-beta.126](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.126)
|
|
18
|
+
|
|
19
|
+
Fri, 10 Oct 2025 04:08:57 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.125..@fluentui/web-components_v3.0.0-beta.126)
|
|
21
|
+
|
|
22
|
+
### Changes
|
|
23
|
+
|
|
24
|
+
- [fix]: voice over in navigation mode was not announcing tabs belonging to a disabled tablist as disabled ([PR #35299](https://github.com/microsoft/fluentui/pull/35299) by jes@microsoft.com)
|
|
25
|
+
|
|
7
26
|
## [3.0.0-beta.125](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.125)
|
|
8
27
|
|
|
9
|
-
Mon, 06 Oct 2025 04:08:
|
|
28
|
+
Mon, 06 Oct 2025 04:08:36 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.124..@fluentui/web-components_v3.0.0-beta.125)
|
|
11
30
|
|
|
12
31
|
### Changes
|
package/custom-elements.json
CHANGED
|
@@ -10299,6 +10299,39 @@
|
|
|
10299
10299
|
}
|
|
10300
10300
|
],
|
|
10301
10301
|
"attributes": [
|
|
10302
|
+
{
|
|
10303
|
+
"name": "appearance",
|
|
10304
|
+
"type": {
|
|
10305
|
+
"text": "ButtonAppearance | undefined"
|
|
10306
|
+
},
|
|
10307
|
+
"description": "Indicates the styled appearance of the button.",
|
|
10308
|
+
"fieldName": "appearance"
|
|
10309
|
+
},
|
|
10310
|
+
{
|
|
10311
|
+
"name": "shape",
|
|
10312
|
+
"type": {
|
|
10313
|
+
"text": "ButtonShape | undefined"
|
|
10314
|
+
},
|
|
10315
|
+
"description": "The shape of the button.",
|
|
10316
|
+
"fieldName": "shape"
|
|
10317
|
+
},
|
|
10318
|
+
{
|
|
10319
|
+
"name": "size",
|
|
10320
|
+
"type": {
|
|
10321
|
+
"text": "ButtonSize | undefined"
|
|
10322
|
+
},
|
|
10323
|
+
"description": "The size of the button.",
|
|
10324
|
+
"fieldName": "size"
|
|
10325
|
+
},
|
|
10326
|
+
{
|
|
10327
|
+
"name": "icon-only",
|
|
10328
|
+
"type": {
|
|
10329
|
+
"text": "boolean"
|
|
10330
|
+
},
|
|
10331
|
+
"default": "false",
|
|
10332
|
+
"description": "Indicates that the button should only display as an icon with no text content.",
|
|
10333
|
+
"fieldName": "iconOnly"
|
|
10334
|
+
},
|
|
10302
10335
|
{
|
|
10303
10336
|
"name": "autofocus",
|
|
10304
10337
|
"type": {
|
|
@@ -11419,6 +11452,54 @@
|
|
|
11419
11452
|
}
|
|
11420
11453
|
],
|
|
11421
11454
|
"attributes": [
|
|
11455
|
+
{
|
|
11456
|
+
"name": "active",
|
|
11457
|
+
"type": {
|
|
11458
|
+
"text": "AvatarActive | undefined | undefined"
|
|
11459
|
+
},
|
|
11460
|
+
"description": "Optional activity indicator\n* active: the avatar will be decorated according to activeAppearance\n* inactive: the avatar will be reduced in size and partially transparent\n* undefined: normal display",
|
|
11461
|
+
"fieldName": "active"
|
|
11462
|
+
},
|
|
11463
|
+
{
|
|
11464
|
+
"name": "shape",
|
|
11465
|
+
"type": {
|
|
11466
|
+
"text": "AvatarShape | undefined | undefined"
|
|
11467
|
+
},
|
|
11468
|
+
"description": "The avatar can have a circular or square shape.",
|
|
11469
|
+
"fieldName": "shape"
|
|
11470
|
+
},
|
|
11471
|
+
{
|
|
11472
|
+
"name": "appearance",
|
|
11473
|
+
"type": {
|
|
11474
|
+
"text": "AvatarAppearance | undefined | undefined"
|
|
11475
|
+
},
|
|
11476
|
+
"description": "The appearance when `active=\"active\"`",
|
|
11477
|
+
"fieldName": "appearance"
|
|
11478
|
+
},
|
|
11479
|
+
{
|
|
11480
|
+
"name": "size",
|
|
11481
|
+
"type": {
|
|
11482
|
+
"text": "AvatarSize | undefined | undefined"
|
|
11483
|
+
},
|
|
11484
|
+
"description": "Size of the avatar in pixels.\n\nSize is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\nbased on design guidelines for the Avatar control.\n\nIf a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`\nto override the rendered size.",
|
|
11485
|
+
"fieldName": "size"
|
|
11486
|
+
},
|
|
11487
|
+
{
|
|
11488
|
+
"name": "color",
|
|
11489
|
+
"type": {
|
|
11490
|
+
"text": "AvatarColor | undefined | undefined"
|
|
11491
|
+
},
|
|
11492
|
+
"description": "The color when displaying either an icon or initials.\n* neutral (default): gray\n* brand: color from the brand palette\n* colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or colorId if provided)\n* [AvatarNamedColor]: a specific color from the theme",
|
|
11493
|
+
"fieldName": "color"
|
|
11494
|
+
},
|
|
11495
|
+
{
|
|
11496
|
+
"name": "color-id",
|
|
11497
|
+
"type": {
|
|
11498
|
+
"text": "AvatarNamedColor | undefined | undefined"
|
|
11499
|
+
},
|
|
11500
|
+
"description": "Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\nUse this when a name is not available, but there is another unique identifier that can be used instead.",
|
|
11501
|
+
"fieldName": "colorId"
|
|
11502
|
+
},
|
|
11422
11503
|
{
|
|
11423
11504
|
"name": "name",
|
|
11424
11505
|
"type": {
|
|
@@ -12269,7 +12350,16 @@
|
|
|
12269
12350
|
"kind": "class",
|
|
12270
12351
|
"description": "A Checkbox Custom HTML Element.\nImplements the https://w3c.github.io/aria/#checkbox | ARIA checkbox .",
|
|
12271
12352
|
"name": "Checkbox",
|
|
12272
|
-
"slots": [
|
|
12353
|
+
"slots": [
|
|
12354
|
+
{
|
|
12355
|
+
"description": "The checked indicator",
|
|
12356
|
+
"name": "checked-indicator"
|
|
12357
|
+
},
|
|
12358
|
+
{
|
|
12359
|
+
"description": "The indeterminate indicator",
|
|
12360
|
+
"name": "indeterminate-indicator"
|
|
12361
|
+
}
|
|
12362
|
+
],
|
|
12273
12363
|
"members": [
|
|
12274
12364
|
{
|
|
12275
12365
|
"kind": "field",
|
|
@@ -12602,8 +12692,33 @@
|
|
|
12602
12692
|
}
|
|
12603
12693
|
}
|
|
12604
12694
|
],
|
|
12605
|
-
"events": [
|
|
12695
|
+
"events": [
|
|
12696
|
+
{
|
|
12697
|
+
"description": "Emits a custom change event when the checked state changes",
|
|
12698
|
+
"name": "change"
|
|
12699
|
+
},
|
|
12700
|
+
{
|
|
12701
|
+
"description": "Emits a custom input event when the checked state changes",
|
|
12702
|
+
"name": "input"
|
|
12703
|
+
}
|
|
12704
|
+
],
|
|
12606
12705
|
"attributes": [
|
|
12706
|
+
{
|
|
12707
|
+
"name": "shape",
|
|
12708
|
+
"type": {
|
|
12709
|
+
"text": "CheckboxShape | undefined"
|
|
12710
|
+
},
|
|
12711
|
+
"description": "Indicates the shape of the checkbox.",
|
|
12712
|
+
"fieldName": "shape"
|
|
12713
|
+
},
|
|
12714
|
+
{
|
|
12715
|
+
"name": "size",
|
|
12716
|
+
"type": {
|
|
12717
|
+
"text": "CheckboxSize | undefined"
|
|
12718
|
+
},
|
|
12719
|
+
"description": "Indicates the size of the control.",
|
|
12720
|
+
"fieldName": "size"
|
|
12721
|
+
},
|
|
12607
12722
|
{
|
|
12608
12723
|
"name": "autofocus",
|
|
12609
12724
|
"type": {
|
|
@@ -13842,6 +13957,27 @@
|
|
|
13842
13957
|
}
|
|
13843
13958
|
],
|
|
13844
13959
|
"attributes": [
|
|
13960
|
+
{
|
|
13961
|
+
"name": "align-content",
|
|
13962
|
+
"type": {
|
|
13963
|
+
"text": "DividerAlignContent | undefined"
|
|
13964
|
+
},
|
|
13965
|
+
"fieldName": "alignContent"
|
|
13966
|
+
},
|
|
13967
|
+
{
|
|
13968
|
+
"name": "appearance",
|
|
13969
|
+
"type": {
|
|
13970
|
+
"text": "DividerAppearance | undefined"
|
|
13971
|
+
},
|
|
13972
|
+
"fieldName": "appearance"
|
|
13973
|
+
},
|
|
13974
|
+
{
|
|
13975
|
+
"name": "inset",
|
|
13976
|
+
"type": {
|
|
13977
|
+
"text": "boolean | undefined"
|
|
13978
|
+
},
|
|
13979
|
+
"fieldName": "inset"
|
|
13980
|
+
},
|
|
13845
13981
|
{
|
|
13846
13982
|
"name": "role",
|
|
13847
13983
|
"type": {
|
|
@@ -16061,6 +16197,25 @@
|
|
|
16061
16197
|
}
|
|
16062
16198
|
],
|
|
16063
16199
|
"attributes": [
|
|
16200
|
+
{
|
|
16201
|
+
"name": "appearance",
|
|
16202
|
+
"type": {
|
|
16203
|
+
"text": "DropdownAppearance"
|
|
16204
|
+
},
|
|
16205
|
+
"description": "The appearance of the dropdown.",
|
|
16206
|
+
"fieldName": "appearance",
|
|
16207
|
+
"parsedType": {
|
|
16208
|
+
"text": "string"
|
|
16209
|
+
}
|
|
16210
|
+
},
|
|
16211
|
+
{
|
|
16212
|
+
"name": "size",
|
|
16213
|
+
"type": {
|
|
16214
|
+
"text": "DropdownSize | undefined"
|
|
16215
|
+
},
|
|
16216
|
+
"description": "The size of the dropdown.",
|
|
16217
|
+
"fieldName": "size"
|
|
16218
|
+
},
|
|
16064
16219
|
{
|
|
16065
16220
|
"name": "aria-labelledby",
|
|
16066
16221
|
"type": {
|
|
@@ -16430,7 +16585,19 @@
|
|
|
16430
16585
|
}
|
|
16431
16586
|
}
|
|
16432
16587
|
],
|
|
16433
|
-
"attributes": [
|
|
16588
|
+
"attributes": [
|
|
16589
|
+
{
|
|
16590
|
+
"name": "label-position",
|
|
16591
|
+
"type": {
|
|
16592
|
+
"text": "LabelPosition"
|
|
16593
|
+
},
|
|
16594
|
+
"description": "The position of the label relative to the input.",
|
|
16595
|
+
"fieldName": "labelPosition",
|
|
16596
|
+
"parsedType": {
|
|
16597
|
+
"text": "'above' | 'after' | 'before'"
|
|
16598
|
+
}
|
|
16599
|
+
}
|
|
16600
|
+
],
|
|
16434
16601
|
"superclass": {
|
|
16435
16602
|
"name": "BaseField",
|
|
16436
16603
|
"module": "/src/field/field.base.js"
|
|
@@ -16890,6 +17057,23 @@
|
|
|
16890
17057
|
}
|
|
16891
17058
|
],
|
|
16892
17059
|
"attributes": [
|
|
17060
|
+
{
|
|
17061
|
+
"name": "appearance",
|
|
17062
|
+
"type": {
|
|
17063
|
+
"text": "LinkAppearance | undefined | undefined"
|
|
17064
|
+
},
|
|
17065
|
+
"description": "The appearance the link should have.",
|
|
17066
|
+
"fieldName": "appearance"
|
|
17067
|
+
},
|
|
17068
|
+
{
|
|
17069
|
+
"name": "inline",
|
|
17070
|
+
"type": {
|
|
17071
|
+
"text": "boolean"
|
|
17072
|
+
},
|
|
17073
|
+
"default": "false",
|
|
17074
|
+
"description": "The link is inline with text\nIn chromium browsers, if the link is contained within a semantic\ntext element (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`) or `fluent-text`,\n`:host-context()` ensures inline links are styled appropriately.",
|
|
17075
|
+
"fieldName": "inline"
|
|
17076
|
+
},
|
|
16893
17077
|
{
|
|
16894
17078
|
"name": "download",
|
|
16895
17079
|
"type": {
|
|
@@ -18840,6 +19024,22 @@
|
|
|
18840
19024
|
}
|
|
18841
19025
|
],
|
|
18842
19026
|
"attributes": [
|
|
19027
|
+
{
|
|
19028
|
+
"name": "thickness",
|
|
19029
|
+
"type": {
|
|
19030
|
+
"text": "ProgressBarThickness | undefined"
|
|
19031
|
+
},
|
|
19032
|
+
"description": "The thickness of the progress bar",
|
|
19033
|
+
"fieldName": "thickness"
|
|
19034
|
+
},
|
|
19035
|
+
{
|
|
19036
|
+
"name": "shape",
|
|
19037
|
+
"type": {
|
|
19038
|
+
"text": "ProgressBarShape | undefined"
|
|
19039
|
+
},
|
|
19040
|
+
"description": "The shape of the progress bar",
|
|
19041
|
+
"fieldName": "shape"
|
|
19042
|
+
},
|
|
18843
19043
|
{
|
|
18844
19044
|
"name": "validation-state",
|
|
18845
19045
|
"type": {
|
|
@@ -18888,7 +19088,12 @@
|
|
|
18888
19088
|
"kind": "class",
|
|
18889
19089
|
"description": "A Radio Custom HTML Element.\nImplements the https://w3c.github.io/aria/#radio | ARIA `radio` role.",
|
|
18890
19090
|
"name": "Radio",
|
|
18891
|
-
"slots": [
|
|
19091
|
+
"slots": [
|
|
19092
|
+
{
|
|
19093
|
+
"description": "The checked indicator slot",
|
|
19094
|
+
"name": "checked-indicator"
|
|
19095
|
+
}
|
|
19096
|
+
],
|
|
18892
19097
|
"members": [
|
|
18893
19098
|
{
|
|
18894
19099
|
"kind": "method",
|
|
@@ -19194,7 +19399,16 @@
|
|
|
19194
19399
|
}
|
|
19195
19400
|
}
|
|
19196
19401
|
],
|
|
19197
|
-
"events": [
|
|
19402
|
+
"events": [
|
|
19403
|
+
{
|
|
19404
|
+
"description": "Emits a custom change event when the checked state changes",
|
|
19405
|
+
"name": "change"
|
|
19406
|
+
},
|
|
19407
|
+
{
|
|
19408
|
+
"description": "Emits a custom input event when the checked state changes",
|
|
19409
|
+
"name": "input"
|
|
19410
|
+
}
|
|
19411
|
+
],
|
|
19198
19412
|
"superclass": {
|
|
19199
19413
|
"name": "BaseCheckbox",
|
|
19200
19414
|
"module": "/src/checkbox/checkbox.base.js"
|
|
@@ -20071,6 +20285,33 @@
|
|
|
20071
20285
|
}
|
|
20072
20286
|
],
|
|
20073
20287
|
"attributes": [
|
|
20288
|
+
{
|
|
20289
|
+
"name": "color",
|
|
20290
|
+
"type": {
|
|
20291
|
+
"text": "RatingDisplayColor | undefined"
|
|
20292
|
+
},
|
|
20293
|
+
"description": "The color of the rating display icons.",
|
|
20294
|
+
"default": "`marigold`",
|
|
20295
|
+
"fieldName": "color"
|
|
20296
|
+
},
|
|
20297
|
+
{
|
|
20298
|
+
"name": "size",
|
|
20299
|
+
"type": {
|
|
20300
|
+
"text": "RatingDisplaySize | undefined"
|
|
20301
|
+
},
|
|
20302
|
+
"description": "The size of the component.",
|
|
20303
|
+
"default": "'medium'",
|
|
20304
|
+
"fieldName": "size"
|
|
20305
|
+
},
|
|
20306
|
+
{
|
|
20307
|
+
"name": "compact",
|
|
20308
|
+
"type": {
|
|
20309
|
+
"text": "boolean"
|
|
20310
|
+
},
|
|
20311
|
+
"default": "false",
|
|
20312
|
+
"description": "Renders a single filled icon with a label next to it.",
|
|
20313
|
+
"fieldName": "compact"
|
|
20314
|
+
},
|
|
20074
20315
|
{
|
|
20075
20316
|
"name": "count",
|
|
20076
20317
|
"type": {
|
|
@@ -20874,7 +21115,24 @@
|
|
|
20874
21115
|
}
|
|
20875
21116
|
}
|
|
20876
21117
|
],
|
|
20877
|
-
"attributes": [
|
|
21118
|
+
"attributes": [
|
|
21119
|
+
{
|
|
21120
|
+
"name": "size",
|
|
21121
|
+
"type": {
|
|
21122
|
+
"text": "SpinnerSize | undefined"
|
|
21123
|
+
},
|
|
21124
|
+
"description": "The size of the spinner",
|
|
21125
|
+
"fieldName": "size"
|
|
21126
|
+
},
|
|
21127
|
+
{
|
|
21128
|
+
"name": "appearance",
|
|
21129
|
+
"type": {
|
|
21130
|
+
"text": "SpinnerAppearance | undefined"
|
|
21131
|
+
},
|
|
21132
|
+
"description": "The appearance of the spinner",
|
|
21133
|
+
"fieldName": "appearance"
|
|
21134
|
+
}
|
|
21135
|
+
],
|
|
20878
21136
|
"superclass": {
|
|
20879
21137
|
"name": "BaseSpinner",
|
|
20880
21138
|
"module": "/src/spinner/spinner.base.js"
|
|
@@ -22263,6 +22521,30 @@
|
|
|
22263
22521
|
}
|
|
22264
22522
|
],
|
|
22265
22523
|
"attributes": [
|
|
22524
|
+
{
|
|
22525
|
+
"name": "appearance",
|
|
22526
|
+
"type": {
|
|
22527
|
+
"text": "TabsAppearance | undefined"
|
|
22528
|
+
},
|
|
22529
|
+
"description": "appearance\nThere are two modes of appearance: transparent and subtle.",
|
|
22530
|
+
"fieldName": "appearance"
|
|
22531
|
+
},
|
|
22532
|
+
{
|
|
22533
|
+
"name": "disabled",
|
|
22534
|
+
"type": {
|
|
22535
|
+
"text": "boolean | undefined"
|
|
22536
|
+
},
|
|
22537
|
+
"description": "disabled\nUsed for disabling all click and keyboard events for the tabs, child tab elements and tab panel elements. UI styling of content and tabs will appear as \"grayed out.\"",
|
|
22538
|
+
"fieldName": "disabled"
|
|
22539
|
+
},
|
|
22540
|
+
{
|
|
22541
|
+
"name": "size",
|
|
22542
|
+
"type": {
|
|
22543
|
+
"text": "TabsSize | undefined"
|
|
22544
|
+
},
|
|
22545
|
+
"description": "size\ndefaults to medium.\nUsed to set the size of all the tab controls, which effects text size and margins. Three sizes: small, medium and large.",
|
|
22546
|
+
"fieldName": "size"
|
|
22547
|
+
},
|
|
22266
22548
|
{
|
|
22267
22549
|
"name": "orientation",
|
|
22268
22550
|
"type": {
|
|
@@ -23063,6 +23345,22 @@
|
|
|
23063
23345
|
}
|
|
23064
23346
|
],
|
|
23065
23347
|
"attributes": [
|
|
23348
|
+
{
|
|
23349
|
+
"name": "appearance",
|
|
23350
|
+
"type": {
|
|
23351
|
+
"text": "TablistAppearance | undefined"
|
|
23352
|
+
},
|
|
23353
|
+
"description": "appearance\nThere are two modes of appearance: transparent and subtle.",
|
|
23354
|
+
"fieldName": "appearance"
|
|
23355
|
+
},
|
|
23356
|
+
{
|
|
23357
|
+
"name": "size",
|
|
23358
|
+
"type": {
|
|
23359
|
+
"text": "TablistSize | undefined"
|
|
23360
|
+
},
|
|
23361
|
+
"description": "size\ndefaults to medium.\nUsed to set the size of all the tab controls, which effects text size and margins. Three sizes: small, medium and large.",
|
|
23362
|
+
"fieldName": "size"
|
|
23363
|
+
},
|
|
23066
23364
|
{
|
|
23067
23365
|
"name": "disabled",
|
|
23068
23366
|
"type": {
|
|
@@ -24403,6 +24701,34 @@
|
|
|
24403
24701
|
}
|
|
24404
24702
|
],
|
|
24405
24703
|
"attributes": [
|
|
24704
|
+
{
|
|
24705
|
+
"name": "appearance",
|
|
24706
|
+
"type": {
|
|
24707
|
+
"text": "TextAreaAppearance"
|
|
24708
|
+
},
|
|
24709
|
+
"description": "Indicates the visual appearance of the element.",
|
|
24710
|
+
"fieldName": "appearance",
|
|
24711
|
+
"parsedType": {
|
|
24712
|
+
"text": "'outline' | 'filled-darker' | 'filled-lighter'"
|
|
24713
|
+
}
|
|
24714
|
+
},
|
|
24715
|
+
{
|
|
24716
|
+
"name": "block",
|
|
24717
|
+
"type": {
|
|
24718
|
+
"text": "boolean"
|
|
24719
|
+
},
|
|
24720
|
+
"default": "false",
|
|
24721
|
+
"description": "Indicates whether the textarea should be a block-level element.",
|
|
24722
|
+
"fieldName": "block"
|
|
24723
|
+
},
|
|
24724
|
+
{
|
|
24725
|
+
"name": "size",
|
|
24726
|
+
"type": {
|
|
24727
|
+
"text": "TextAreaSize | undefined"
|
|
24728
|
+
},
|
|
24729
|
+
"description": "Sets the size of the control.",
|
|
24730
|
+
"fieldName": "size"
|
|
24731
|
+
},
|
|
24406
24732
|
{
|
|
24407
24733
|
"name": "autocomplete",
|
|
24408
24734
|
"type": {
|
|
@@ -25690,6 +26016,22 @@
|
|
|
25690
26016
|
}
|
|
25691
26017
|
],
|
|
25692
26018
|
"attributes": [
|
|
26019
|
+
{
|
|
26020
|
+
"name": "appearance",
|
|
26021
|
+
"type": {
|
|
26022
|
+
"text": "TextInputAppearance | undefined"
|
|
26023
|
+
},
|
|
26024
|
+
"description": "Indicates the styled appearance of the element.",
|
|
26025
|
+
"fieldName": "appearance"
|
|
26026
|
+
},
|
|
26027
|
+
{
|
|
26028
|
+
"name": "control-size",
|
|
26029
|
+
"type": {
|
|
26030
|
+
"text": "TextInputControlSize | undefined"
|
|
26031
|
+
},
|
|
26032
|
+
"description": "Sets the size of the control.",
|
|
26033
|
+
"fieldName": "controlSize"
|
|
26034
|
+
},
|
|
25693
26035
|
{
|
|
25694
26036
|
"name": "autocomplete",
|
|
25695
26037
|
"type": {
|
|
@@ -26588,6 +26930,22 @@
|
|
|
26588
26930
|
}
|
|
26589
26931
|
],
|
|
26590
26932
|
"attributes": [
|
|
26933
|
+
{
|
|
26934
|
+
"name": "pressed",
|
|
26935
|
+
"type": {
|
|
26936
|
+
"text": "boolean"
|
|
26937
|
+
},
|
|
26938
|
+
"description": "Indicates the pressed state of the control.",
|
|
26939
|
+
"fieldName": "pressed"
|
|
26940
|
+
},
|
|
26941
|
+
{
|
|
26942
|
+
"name": "mixed",
|
|
26943
|
+
"type": {
|
|
26944
|
+
"text": "boolean | undefined"
|
|
26945
|
+
},
|
|
26946
|
+
"description": "Indicates the mixed state of the control. This property takes precedence over `pressed`.",
|
|
26947
|
+
"fieldName": "mixed"
|
|
26948
|
+
},
|
|
26591
26949
|
{
|
|
26592
26950
|
"name": "appearance",
|
|
26593
26951
|
"type": {
|
|
@@ -27444,6 +27802,28 @@
|
|
|
27444
27802
|
}
|
|
27445
27803
|
],
|
|
27446
27804
|
"attributes": [
|
|
27805
|
+
{
|
|
27806
|
+
"name": "size",
|
|
27807
|
+
"type": {
|
|
27808
|
+
"text": "TreeItemSize"
|
|
27809
|
+
},
|
|
27810
|
+
"description": "The size of the tree item element",
|
|
27811
|
+
"fieldName": "size",
|
|
27812
|
+
"parsedType": {
|
|
27813
|
+
"text": "'small' | 'medium'"
|
|
27814
|
+
}
|
|
27815
|
+
},
|
|
27816
|
+
{
|
|
27817
|
+
"name": "appearance",
|
|
27818
|
+
"type": {
|
|
27819
|
+
"text": "TreeItemAppearance"
|
|
27820
|
+
},
|
|
27821
|
+
"description": "The size of the tree item element",
|
|
27822
|
+
"fieldName": "appearance",
|
|
27823
|
+
"parsedType": {
|
|
27824
|
+
"text": "'subtle' | 'transparent' | 'subtle-alpha'"
|
|
27825
|
+
}
|
|
27826
|
+
},
|
|
27447
27827
|
{
|
|
27448
27828
|
"name": "expanded",
|
|
27449
27829
|
"type": {
|
|
@@ -27756,7 +28136,30 @@
|
|
|
27756
28136
|
}
|
|
27757
28137
|
}
|
|
27758
28138
|
],
|
|
27759
|
-
"attributes": [
|
|
28139
|
+
"attributes": [
|
|
28140
|
+
{
|
|
28141
|
+
"name": "size",
|
|
28142
|
+
"type": {
|
|
28143
|
+
"text": "TreeItemSize"
|
|
28144
|
+
},
|
|
28145
|
+
"description": "The size of the tree item element",
|
|
28146
|
+
"fieldName": "size",
|
|
28147
|
+
"parsedType": {
|
|
28148
|
+
"text": "'small' | 'medium'"
|
|
28149
|
+
}
|
|
28150
|
+
},
|
|
28151
|
+
{
|
|
28152
|
+
"name": "appearance",
|
|
28153
|
+
"type": {
|
|
28154
|
+
"text": "TreeItemAppearance"
|
|
28155
|
+
},
|
|
28156
|
+
"description": "The appearance variants of the tree item element",
|
|
28157
|
+
"fieldName": "appearance",
|
|
28158
|
+
"parsedType": {
|
|
28159
|
+
"text": "'subtle' | 'transparent' | 'subtle-alpha'"
|
|
28160
|
+
}
|
|
28161
|
+
}
|
|
28162
|
+
],
|
|
27760
28163
|
"superclass": {
|
|
27761
28164
|
"name": "BaseTree",
|
|
27762
28165
|
"module": "/src/tree/tree.base.js"
|
|
@@ -158,7 +158,6 @@ export class BaseField extends FASTElement {
|
|
|
158
158
|
if (label instanceof HTMLLabelElement) {
|
|
159
159
|
label.htmlFor = label.htmlFor || this.input.id;
|
|
160
160
|
label.id = label.id || `${this.input.id}--label`;
|
|
161
|
-
label.setAttribute('aria-hidden', 'true');
|
|
162
161
|
this.input.setAttribute('aria-labelledby', label.id);
|
|
163
162
|
}
|
|
164
163
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.base.js","sourceRoot":"","sources":["../../../src/field/field.base.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"field.base.js","sourceRoot":"","sources":["../../../src/field/field.base.ts"],"names":[],"mappings":"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"}
|
|
@@ -98,6 +98,9 @@ export class BaseTablist extends FASTElement {
|
|
|
98
98
|
*/
|
|
99
99
|
disabledChanged(prev, next) {
|
|
100
100
|
toggleState(this.elementInternals, 'disabled', next);
|
|
101
|
+
if (this.$fastController.isConnected) {
|
|
102
|
+
this.setTabs();
|
|
103
|
+
}
|
|
101
104
|
}
|
|
102
105
|
/**
|
|
103
106
|
* @internal
|
|
@@ -181,6 +184,10 @@ export class BaseTablist extends FASTElement {
|
|
|
181
184
|
if (tab.slot === 'tab') {
|
|
182
185
|
const isActiveTab = this.activeTabIndex === index && isFocusableElement(tab);
|
|
183
186
|
const tabId = this.tabIds[index];
|
|
187
|
+
console.log('disabled', this.disabled);
|
|
188
|
+
if (!tab.disabled) {
|
|
189
|
+
this.disabled ? tab.setAttribute('aria-disabled', 'true') : tab.removeAttribute('aria-disabled');
|
|
190
|
+
}
|
|
184
191
|
tab.setAttribute('id', tabId);
|
|
185
192
|
tab.setAttribute('aria-selected', isActiveTab ? 'true' : 'false');
|
|
186
193
|
tab.addEventListener('click', this.handleTabClick);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tablist.base.js","sourceRoot":"","sources":["../../../src/tablist/tablist.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,UAAU,EACV,MAAM,EACN,OAAO,EACP,QAAQ,EACR,YAAY,GACb,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAEnE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAA5C;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QACnE;;;;;WAKG;QAEI,aAAQ,GAAY,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"tablist.base.js","sourceRoot":"","sources":["../../../src/tablist/tablist.base.ts"],"names":[],"mappings":"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"}
|
package/dist/web-components.js
CHANGED
|
@@ -8119,7 +8119,6 @@ class BaseField extends FASTElement {
|
|
|
8119
8119
|
if (label instanceof HTMLLabelElement) {
|
|
8120
8120
|
label.htmlFor = label.htmlFor || this.input.id;
|
|
8121
8121
|
label.id = label.id || `${this.input.id}--label`;
|
|
8122
|
-
label.setAttribute("aria-hidden", "true");
|
|
8123
8122
|
this.input.setAttribute("aria-labelledby", label.id);
|
|
8124
8123
|
}
|
|
8125
8124
|
});
|
|
@@ -11819,6 +11818,9 @@ class BaseTablist extends FASTElement {
|
|
|
11819
11818
|
*/
|
|
11820
11819
|
disabledChanged(prev, next) {
|
|
11821
11820
|
toggleState(this.elementInternals, "disabled", next);
|
|
11821
|
+
if (this.$fastController.isConnected) {
|
|
11822
|
+
this.setTabs();
|
|
11823
|
+
}
|
|
11822
11824
|
}
|
|
11823
11825
|
/**
|
|
11824
11826
|
* @internal
|
|
@@ -11901,6 +11903,10 @@ class BaseTablist extends FASTElement {
|
|
|
11901
11903
|
if (tab.slot === "tab") {
|
|
11902
11904
|
const isActiveTab = this.activeTabIndex === index && isFocusableElement(tab);
|
|
11903
11905
|
const tabId = this.tabIds[index];
|
|
11906
|
+
console.log("disabled", this.disabled);
|
|
11907
|
+
if (!tab.disabled) {
|
|
11908
|
+
this.disabled ? tab.setAttribute("aria-disabled", "true") : tab.removeAttribute("aria-disabled");
|
|
11909
|
+
}
|
|
11904
11910
|
tab.setAttribute("id", tabId);
|
|
11905
11911
|
tab.setAttribute("aria-selected", isActiveTab ? "true" : "false");
|
|
11906
11912
|
tab.addEventListener("click", this.handleTabClick);
|
|
@@ -423,7 +423,7 @@ const p=Object.freeze({prefix:"fluent",shadowRootMode:"open",registry:customElem
|
|
|
423
423
|
:host{box-sizing:border-box;grid-template-rows:min-content auto min-content;position:relative;height:100%;padding:${wd};max-height:100svh}.header{display:flex;justify-content:space-between;align-items:center;${zh}}.footer{display:flex;justify-content:flex-start;gap:${le}}::slotted([slot='title']){font:inherit;padding:0;margin:0}`;function Qu(){return b`<div class="header" part="header"><slot name="title"></slot><slot name="close" @click="${(o,e)=>o.clickHandler(e.event)}"></slot></div><div class="content" part="content"><slot></slot></div><div class="footer" part="footer"><slot name="footer"></slot></div>`}const Zu=Qu(),Ju=Ku.compose({name:`${p.prefix}-drawer-body`,template:Zu,styles:Yu});Ju.define(p.registry);function ca(o,e="-listbox"){return o?.nodeType!==Node.ELEMENT_NODE?!1:o.tagName.toLowerCase().endsWith(e)}function Oi(o,e="-option"){return o?.nodeType!==Node.ELEMENT_NODE?!1:o.tagName.toLowerCase().endsWith(e)}function da(o){return o.closest("[lang]")?.lang??"en"}let ep=0;function Qt(o="id-"){const e=`${o}${ep++}`;return document.getElementById(e)?Qt(o):e}function tp(o,e){if("requestIdleCallback"in globalThis)return globalThis.requestIdleCallback(o,e);const t=Date.now();return setTimeout(()=>{o({didTimeout:e?.timeout?Date.now()-t>=e.timeout:!1,timeRemaining:()=>0})},1)}function op(o){"cancelIdleCallback"in globalThis?globalThis.cancelIdleCallback(o):clearTimeout(o)}function ha(o,e,t){let i;const s=`${t?.shallow??!1?":scope > ":""}:not(:defined)`,n=t?.timeout??50,c=h=>{if(i&&(op(i),i=void 0),!o.querySelector(s)||h&&h.timeRemaining()<=0){e();return}i=tp(c,{timeout:n})};c()}const ip={filledDarker:"filled-darker",filledLighter:"filled-lighter",outline:"outline",transparent:"transparent"},Dr={combobox:"combobox",dropdown:"dropdown",select:"select"},rp=b`<svg class="chevron-down-20-regular" role="button" slot="indicator" viewBox="0 0 20 20" ${E("indicator")}><path d="M15.85 7.65a.5.5 0 0 1 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16a.5.5 0 0 1 .7 0" fill="currentColor" /></svg>`,sp=b`<input @input="${(o,e)=>o.inputHandler(e.event)}" @change="${(o,e)=>o.changeHandler(e.event)}" aria-activedescendant="${o=>o.activeDescendant}" aria-controls="${o=>o.listbox?.id??null}" aria-labelledby="${o=>o.ariaLabelledBy}" aria-expanded="${o=>o.open}" aria-haspopup="listbox" placeholder="${o=>o.placeholder}" role="combobox" ?disabled="${o=>o.disabled}" type="${o=>o.type}" value="${o=>o.valueAttribute}" slot="control" ${E("control")} />`,np=b`<button aria-activedescendant="${o=>o.activeDescendant}" aria-controls="${o=>o.listbox?.id??null}" aria-expanded="${o=>o.open}" aria-haspopup="listbox" role="combobox" ?disabled="${o=>o.disabled}" type="button" slot="control" ${E("control")}>${o=>o.displayValue}</button>`;function ap(o={}){return b`<template @click="${(e,t)=>e.clickHandler(t.event)}" @focusout="${(e,t)=>e.focusoutHandler(t.event)}" @keydown="${(e,t)=>e.keydownHandler(t.event)}" @mousedown="${(e,t)=>e.mousedownHandler(t.event)}"><div class="control"><slot name="control" ${E("controlSlot")}></slot><slot name="indicator" ${E("indicatorSlot")}>${fe(o.indicator)}</slot></div><slot @slotchange="${(e,t)=>e.slotchangeHandler(t.event)}"></slot></template>`}const lp=ap({indicator:rp});var cp=Object.defineProperty,dp=Object.getOwnPropertyDescriptor,X=(o,e,t,i)=>{for(var r=i>1?void 0:i?dp(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&cp(e,t,r),r};const L=class so extends ${constructor(){super(),this.activeIndex=0,this.id=Qt("dropdown-"),this.required=!1,this.type=Dr.dropdown,this.valueAttribute="",this.repositionListbox=()=>{this.frameId&&cancelAnimationFrame(this.frameId),this.frameId=requestAnimationFrame(()=>{const e=this.getBoundingClientRect(),t=window.innerWidth-e.right,i=e.left;this.listbox.style.minWidth=`${e.width}px`,this.listbox.style.top=`${e.top}px`,i+e.width>window.innerWidth||ei(this)==="rtl"&&t-e.width>0?(this.listbox.style.right=`${t}px`,this.listbox.style.left="unset"):(this.listbox.style.left=`${i}px`,this.listbox.style.right="unset")})},this.elementInternals=this.attachInternals(),this.elementInternals.role="presentation",Q.enqueue(()=>{this.insertControl()})}get activeDescendant(){if(this.open)return this.enabledOptions[this.activeIndex]?.id}activeIndexChanged(e,t){if(typeof t=="number"){const i=this.matches(":has(:focus-visible)")?t:-1;this.enabledOptions.forEach((r,s)=>{r.active=s===i}),this.open&&this.enabledOptions[i]?.scrollIntoView({block:"nearest"})}}controlChanged(e,t){t&&(t.id=t.id||Qt("input-"))}disabledChanged(e,t){Q.enqueue(()=>{this.options.forEach(i=>{i.disabled=i.disabledAttribute||this.disabled})})}get displayValue(){if(!this.$fastController.isConnected||!this.control||this.isCombobox&&this.multiple)return y(this.elementInternals,"placeholder-shown",!1),"";this.listFormatter=this.listFormatter??new Intl.ListFormat(da(this),{type:"conjunction",style:"narrow"});const e=this.listFormatter.format(this.selectedOptions.map(t=>t.text));return y(this.elementInternals,"placeholder-shown",!e),this.isCombobox?e:e||this.placeholder}listboxChanged(e,t){if(e&&m.getNotifier(this).unsubscribe(e),t){t.dropdown=this,t.popover="manual",t.tabIndex=-1;const i=m.getNotifier(this);i.subscribe(t);for(const r of["disabled","multiple"])i.notify(r);if(Q.enqueue(()=>{this.enabledOptions.filter(r=>r.defaultSelected).forEach((r,s)=>{r.selected=this.multiple||s===0}),this.setValidity()}),ti){const r=Qt("--dropdown-anchor-");this.style.setProperty("anchor-name",r),this.listbox.style.setProperty("position-anchor",r)}}}multipleChanged(e,t){this.elementInternals.ariaMultiSelectable=t?"true":"false",y(this.elementInternals,"multiple",t),this.value=null}nameChanged(e,t){Q.enqueue(()=>{this.options.forEach(i=>{i.name=t})})}openChanged(e,t){y(this.elementInternals,"open",t),this.elementInternals.ariaExpanded=t?"true":"false",this.activeIndex=this.selectedIndex??-1,ti||this.anchorPositionFallback(t)}typeChanged(e,t){this.$fastController.isConnected&&this.insertControl()}get enabledOptions(){return this.listbox?.enabledOptions??[]}get freeformOption(){return this.enabledOptions.find(e=>e.freeform)}get isCombobox(){return this.type===Dr.combobox}get labels(){return Object.freeze(Array.from(this.elementInternals.labels))}get options(){return this.listbox?.options??[]}get selectedIndex(){return this.enabledOptions.findIndex(e=>e.selected)??-1}get selectedOptions(){return this.listbox?.selectedOptions??[]}get validationMessage(){if(this.elementInternals.validationMessage)return this.elementInternals.validationMessage;if(!this._validationFallbackMessage){const e=document.createElement("input");e.type="radio",e.name="validation-message-fallback",e.required=!0,e.checked=!1,this._validationFallbackMessage=e.validationMessage}return!this.disabled&&this.required&&this.listbox.selectedOptions.length===0?this._validationFallbackMessage:""}get validity(){return this.elementInternals.validity}get value(){return m.notify(this,"value"),this.enabledOptions.find(e=>e.selected)?.value??null}set value(e){this.multiple||(this.selectOption(this.enabledOptions.findIndex(t=>t.value===e)),m.track(this,"value"))}get willValidate(){return this.elementInternals.willValidate}changeHandler(e){if(this===e.target)return!0;const t=this.isCombobox?this.enabledOptions.findIndex(i=>i.text===this.control.value):this.enabledOptions.indexOf(e.target);return this.selectOption(t,!0),!0}checkValidity(){return this.elementInternals.checkValidity()}clickHandler(e){if(this.disabled)return;const t=e.target;if(this.focus(),t===this.control&&!this.isCombobox)return this.listbox.togglePopover(),!0;if(!this.open)return this.listbox.showPopover(),!0;if(Oi(t)){if(t.disabled)return;this.selectOption(this.enabledOptions.indexOf(t),!0),this.multiple||(this.isCombobox&&(this.control.value=t.text,this.updateFreeformOption()),this.listbox.hidePopover())}return!0}filterOptions(e,t=this.enabledOptions){return this.listCollator||(this.listCollator=new Intl.Collator(da(this),{usage:"search",sensitivity:"base"})),t.filter(i=>this.listCollator.compare(i.text.substring(0,Math.min(i.text.length,e.length)),e)===0)}focus(e){this.disabled||this.control.focus(e)}focusoutHandler(e){const t=e.relatedTarget;return this.open&&!this.contains(t)&&this.listbox.togglePopover(),!0}formResetCallback(){this.enabledOptions.forEach((e,t)=>{if(this.multiple){e.selected=!!e.defaultSelected;return}if(!e.defaultSelected){e.selected=!1;return}this.selectOption(t)}),this.setValidity()}getEnabledIndexInBounds(e,t=this.enabledOptions.length||0){return t===0?-1:(e+t)%t}inputHandler(e){this.open||this.listbox.showPopover(),this.updateFreeformOption();const t=this.control.value,i=this.enabledOptions.indexOf(this.filterOptions(t)[0]??null);return this.activeIndex=i,!0}insertControl(){if(this.controlSlot?.assignedNodes().forEach(e=>this.removeChild(e)),this.type===Dr.combobox){sp.render(this,this);return}np.render(this,this)}keydownHandler(e){let t=0;switch(e.key){case"ArrowUp":{e.preventDefault(),t=-1;break}case"ArrowDown":{e.preventDefault(),t=1;break}case" ":{if(this.isCombobox)break;e.preventDefault()}case"Enter":case"Tab":{if(this.open){if(this.selectOption(this.activeIndex,!0),this.multiple)break;return this.listbox.hidePopover(),e.key==="Tab"}this.listbox.showPopover();break}case"Escape":{this.activeIndex=this.multiple?0:this.selectedIndex,this.listbox.hidePopover();break}}if(!t)return!0;if(!this.open){this.listbox.showPopover();return}let i=this.activeIndex;i+=t;let r=this.getEnabledIndexInBounds(i);return r===0&&this.freeformOption?.hidden&&(r=this.getEnabledIndexInBounds(i+t)),this.activeIndex=r,!0}mousedownHandler(e){if(!(this.disabled||e.target===this.control&&!this.isCombobox))return!Oi(e.target)}reportValidity(){return this.elementInternals.reportValidity()}selectOption(e=this.selectedIndex,t=!1){this.listbox.selectOption(e),this.control.value=this.displayValue,this.setValidity(),this.updateFreeformOption(),t&&this.$emit("change")}setValidity(e,t,i){if(this.$fastController.isConnected){if(this.disabled||!this.required){this.elementInternals.setValidity({});return}const r=this.required&&this.listbox.selectedOptions.length===0;this.elementInternals.setValidity({valueMissing:r,...e},t??this.validationMessage,i??this.control)}}slotchangeHandler(e){const t=e.target;ha(this,()=>{const i=t.assignedElements().find(r=>ca(r));i&&(this.listbox=i)})}updateFreeformOption(e=this.control.value){if(this.freeformOption){if(e===""||this.filterOptions(e,this.enabledOptions.filter(t=>!t.freeform)).length){this.freeformOption.value="",this.freeformOption.selected=!1,this.freeformOption.hidden=!0;return}this.freeformOption.value=e,this.freeformOption.hidden=!1}}disconnectedCallback(){so.AnchorPositionFallbackObserver?.disconnect(),this.debounceController?.abort(),super.disconnectedCallback()}anchorPositionFallback(e){if(so.AnchorPositionFallbackObserver||(so.AnchorPositionFallbackObserver=new IntersectionObserver(t=>{t.forEach(({boundingClientRect:i,isIntersecting:r,target:s})=>{if(ca(s)){if(i.bottom>window.innerHeight){y(s.elementInternals,"flip-block",!0);return}i.top<0&&y(s.elementInternals,"flip-block",!1)}})},{threshold:1})),e){this.debounceController=new AbortController,so.AnchorPositionFallbackObserver.observe(this.listbox),window.addEventListener("scroll",this.repositionListbox,{passive:!0,capture:!0,signal:this.debounceController.signal}),window.addEventListener("resize",this.repositionListbox,{passive:!0,signal:this.debounceController.signal}),this.repositionListbox();return}so.AnchorPositionFallbackObserver.unobserve(this.listbox),this.debounceController?.abort(),this.frameId&&(cancelAnimationFrame(this.frameId),this.frameId=void 0)}};L.formAssociated=!0,X([ls],L.prototype,"activeDescendant",1),X([g],L.prototype,"activeIndex",2),X([a({attribute:"aria-labelledby",mode:"fromView"})],L.prototype,"ariaLabelledBy",2),X([g],L.prototype,"control",2),X([a({mode:"boolean"})],L.prototype,"disabled",2),X([ls],L.prototype,"displayValue",1),X([a({attribute:"id"})],L.prototype,"id",2),X([g],L.prototype,"indicator",2),X([g],L.prototype,"indicatorSlot",2),X([a({attribute:"value",mode:"fromView"})],L.prototype,"initialValue",2),X([g],L.prototype,"listbox",2),X([a({mode:"boolean"})],L.prototype,"multiple",2),X([a],L.prototype,"name",2),X([g],L.prototype,"open",2),X([a],L.prototype,"placeholder",2),X([a({mode:"boolean"})],L.prototype,"required",2),X([a],L.prototype,"type",2),X([a({attribute:"value"})],L.prototype,"valueAttribute",2);let hp=L;var up=Object.defineProperty,pp=Object.getOwnPropertyDescriptor,ua=(o,e,t,i)=>{for(var r=i>1?void 0:i?pp(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&up(e,t,r),r};class Hr extends hp{constructor(){super(...arguments),this.appearance=ip.outline}}ua([a],Hr.prototype,"appearance",2),ua([a],Hr.prototype,"size",2);const bp=u`
|
|
424
424
|
${k("inline-flex")}
|
|
425
425
|
|
|
426
|
-
:host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${z};cursor:pointer}:host(${Yh}){color:${pr}}.control{appearance:none;background-color:${I};border-radius:${C};border:none;box-shadow:inset 0 0 0 ${T} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${H};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${je} ${ae};position:relative;text-align:start;width:100%;z-index:1;${ia}}:host([size='small']) .control{column-gap:${H};padding:${qt} ${ee};${ra}}:host([size='large']) .control{column-gap:${Oe};padding:${V} ${le};${Ph}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator'] > *,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${Z};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:'' / '';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${T}}.control::after{background-color:${$t};height:${ue};scale:0 1;transition:scale ${Sr} ${kt}}:host(:where(:focus-within)) .control{border-radius:${C};box-shadow:inset 0 0 0 1px ${di};outline:${ue} solid ${ve}}:host(:where(${Xh},:focus-within)) .control::after{scale:1 1;transition-duration:${$i};transition-timing-function:${xt}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${Ve}}:host([appearance='transparent']) .control{--control-border-color:${fr};background-color:${me};border-radius:${hi}}:host([appearance='outline']) .control{--control-border-color:${Le}}:host([appearance='outline']) .control:hover{--control-border-color:${Lt}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${mt}}:host([appearance='outline']) .control:hover::after{background-color:${Ht}}:host([appearance='outline']) .control:active{--control-border-color:${ko}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${vt}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${Vt}}:host([appearance='filled-darker']) .control{background-color:${$o}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${J}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){--control-border-color:${Ce};background-color:${it};color:${S}}::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${A} + (${je} * 2) + ${T})}:host([size='small']){--margin-offset:calc(${q} + (${qt} * 2) + ${T})}:host([size='large']){--margin-offset:calc(${ye} + (${V} * 2) + ${T})}}`,gp=Hr.compose({name:`${p.prefix}-dropdown`,template:lp,styles:bp});gp.define(p.registry);const fp={above:"above",after:"after",before:"before"},ze={badInput:"bad-input",customError:"custom-error",patternMismatch:"pattern-mismatch",rangeOverflow:"range-overflow",rangeUnderflow:"range-underflow",stepMismatch:"step-mismatch",tooLong:"too-long",tooShort:"too-short",typeMismatch:"type-mismatch",valueMissing:"value-missing",valid:"valid"};var mp=Object.defineProperty,vp=Object.getOwnPropertyDescriptor,_i=(o,e,t,i)=>{for(var r=i>1?void 0:i?vp(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&mp(e,t,r),r};class zo extends ${constructor(){super(),this.labelSlot=[],this.elementInternals=this.attachInternals(),this.elementInternals.role="presentation"}labelSlotChanged(e,t){t&&this.input&&(this.setLabelProperties(),this.setStates())}messageSlotChanged(e,t){y(this.elementInternals,"has-message",!!t.length)}slottedInputsChanged(e,t){const i=t?.filter(r=>r.nodeType===Node.ELEMENT_NODE)??[];i?.length&&(this.input=i?.[0])}inputChanged(e,t){t&&(this.setStates(),this.setLabelProperties(),this.slottedInputObserver.observe(this.input,{attributes:!0,attributeFilter:["disabled","required","readonly"],subtree:!0}))}changeHandler(e){return this.setStates(),this.setValidationStates(),!0}clickHandler(e){return this===e.target&&this.input.click(),!0}connectedCallback(){super.connectedCallback(),this.addEventListener("invalid",this.invalidHandler,{capture:!0}),this.slottedInputObserver=new MutationObserver(()=>{this.setStates()})}disconnectedCallback(){this.slottedInputObserver.disconnect(),this.removeEventListener("invalid",this.invalidHandler,{capture:!0}),super.disconnectedCallback()}focusinHandler(e){return this.matches(":focus-within:has(> :focus-visible)")&&y(this.elementInternals,"focus-visible",!0),!0}focusoutHandler(e){return y(this.elementInternals,"focus-visible",!1),!0}invalidHandler(e){this.messageSlot.length&&e.preventDefault(),this.setValidationStates()}setLabelProperties(){this.$fastController.isConnected&&(this.input.id=this.input.id||Ft("input"),this.labelSlot?.forEach(e=>{e instanceof HTMLLabelElement&&(e.htmlFor=e.htmlFor||this.input.id,e.id=e.id||`${this.input.id}--label`,
|
|
426
|
+
:host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${z};cursor:pointer}:host(${Yh}){color:${pr}}.control{appearance:none;background-color:${I};border-radius:${C};border:none;box-shadow:inset 0 0 0 ${T} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${H};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${je} ${ae};position:relative;text-align:start;width:100%;z-index:1;${ia}}:host([size='small']) .control{column-gap:${H};padding:${qt} ${ee};${ra}}:host([size='large']) .control{column-gap:${Oe};padding:${V} ${le};${Ph}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator'] > *,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${Z};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:'' / '';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${T}}.control::after{background-color:${$t};height:${ue};scale:0 1;transition:scale ${Sr} ${kt}}:host(:where(:focus-within)) .control{border-radius:${C};box-shadow:inset 0 0 0 1px ${di};outline:${ue} solid ${ve}}:host(:where(${Xh},:focus-within)) .control::after{scale:1 1;transition-duration:${$i};transition-timing-function:${xt}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${Ve}}:host([appearance='transparent']) .control{--control-border-color:${fr};background-color:${me};border-radius:${hi}}:host([appearance='outline']) .control{--control-border-color:${Le}}:host([appearance='outline']) .control:hover{--control-border-color:${Lt}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${mt}}:host([appearance='outline']) .control:hover::after{background-color:${Ht}}:host([appearance='outline']) .control:active{--control-border-color:${ko}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${vt}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${Vt}}:host([appearance='filled-darker']) .control{background-color:${$o}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${J}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){--control-border-color:${Ce};background-color:${it};color:${S}}::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${A} + (${je} * 2) + ${T})}:host([size='small']){--margin-offset:calc(${q} + (${qt} * 2) + ${T})}:host([size='large']){--margin-offset:calc(${ye} + (${V} * 2) + ${T})}}`,gp=Hr.compose({name:`${p.prefix}-dropdown`,template:lp,styles:bp});gp.define(p.registry);const fp={above:"above",after:"after",before:"before"},ze={badInput:"bad-input",customError:"custom-error",patternMismatch:"pattern-mismatch",rangeOverflow:"range-overflow",rangeUnderflow:"range-underflow",stepMismatch:"step-mismatch",tooLong:"too-long",tooShort:"too-short",typeMismatch:"type-mismatch",valueMissing:"value-missing",valid:"valid"};var mp=Object.defineProperty,vp=Object.getOwnPropertyDescriptor,_i=(o,e,t,i)=>{for(var r=i>1?void 0:i?vp(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&mp(e,t,r),r};class zo extends ${constructor(){super(),this.labelSlot=[],this.elementInternals=this.attachInternals(),this.elementInternals.role="presentation"}labelSlotChanged(e,t){t&&this.input&&(this.setLabelProperties(),this.setStates())}messageSlotChanged(e,t){y(this.elementInternals,"has-message",!!t.length)}slottedInputsChanged(e,t){const i=t?.filter(r=>r.nodeType===Node.ELEMENT_NODE)??[];i?.length&&(this.input=i?.[0])}inputChanged(e,t){t&&(this.setStates(),this.setLabelProperties(),this.slottedInputObserver.observe(this.input,{attributes:!0,attributeFilter:["disabled","required","readonly"],subtree:!0}))}changeHandler(e){return this.setStates(),this.setValidationStates(),!0}clickHandler(e){return this===e.target&&this.input.click(),!0}connectedCallback(){super.connectedCallback(),this.addEventListener("invalid",this.invalidHandler,{capture:!0}),this.slottedInputObserver=new MutationObserver(()=>{this.setStates()})}disconnectedCallback(){this.slottedInputObserver.disconnect(),this.removeEventListener("invalid",this.invalidHandler,{capture:!0}),super.disconnectedCallback()}focusinHandler(e){return this.matches(":focus-within:has(> :focus-visible)")&&y(this.elementInternals,"focus-visible",!0),!0}focusoutHandler(e){return y(this.elementInternals,"focus-visible",!1),!0}invalidHandler(e){this.messageSlot.length&&e.preventDefault(),this.setValidationStates()}setLabelProperties(){this.$fastController.isConnected&&(this.input.id=this.input.id||Ft("input"),this.labelSlot?.forEach(e=>{e instanceof HTMLLabelElement&&(e.htmlFor=e.htmlFor||this.input.id,e.id=e.id||`${this.input.id}--label`,this.input.setAttribute("aria-labelledby",e.id))}))}setStates(){this.elementInternals&&this.input&&(y(this.elementInternals,"disabled",!!this.input.disabled),y(this.elementInternals,"readonly",!!this.input.readOnly),y(this.elementInternals,"required",!!this.input.required),y(this.elementInternals,"checked",!!this.input.checked))}setValidationStates(){if(this.input?.validity)for(const[e,t]of Object.entries(ze))y(this.elementInternals,t,this.input.validity[e])}}_i([g],zo.prototype,"labelSlot",2),_i([g],zo.prototype,"messageSlot",2),_i([g],zo.prototype,"slottedInputs",2),_i([g],zo.prototype,"input",2);var $p=Object.defineProperty,yp=Object.getOwnPropertyDescriptor,xp=(o,e,t,i)=>{for(var r=i>1?void 0:i?yp(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&$p(e,t,r),r};class pa extends zo{constructor(){super(...arguments),this.labelPosition=fp.above}}xp([a({attribute:"label-position"})],pa.prototype,"labelPosition",2);const kp=u`
|
|
427
427
|
${k("inline-grid")}
|
|
428
428
|
|
|
429
429
|
:host{color:${z};align-items:center;gap:0 ${le};justify-items:start}:has([slot='message']){color:${z};row-gap:${V}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${le}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${Rt}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${Cd}}:host(${Jh}) ::slotted([slot='label'])::after{content:'*' / '';color:${vr};margin-inline-start:${ne}}::slotted([slot='input']){grid-area:input}::slotted([slot='message']){color:${Z};font-family:${v};font-size:${F};font-weight:${_};grid-area:message;line-height:${q};margin-block-start:${Rt}}:host(${Uh}:focus-within){border-radius:${C};outline:${ue} solid ${ve}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${v};font-size:${B};font-weight:${_};grid-area:label;line-height:${A};justify-self:stretch;user-select:none}:host([size='small']) ::slotted(label){font-size:${F};line-height:${q}}:host([size='large']) ::slotted(label){font-size:${he};line-height:${ye}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${D}}:host(${xe}){cursor:default}::slotted([flag]){display:none}:host(${Rh}) ::slotted([flag='${ze.badInput}']),:host(${qh}) ::slotted([flag='${ze.customError}']),:host(${Kh}) ::slotted([flag='${ze.patternMismatch}']),:host(${Qh}) ::slotted([flag='${ze.rangeOverflow}']),:host(${Zh}) ::slotted([flag='${ze.rangeUnderflow}']),:host(${eu}) ::slotted([flag='${ze.stepMismatch}']),:host(${tu}) ::slotted([flag='${ze.tooLong}']),:host(${ou}) ::slotted([flag='${ze.tooShort}']),:host(${iu}) ::slotted([flag='${ze.typeMismatch}']),:host(${nu}) ::slotted([flag='${ze.valueMissing}']),:host(${su}) ::slotted([flag='${ze.valid}']){display:block}`,wp=b`<template @click="${(o,e)=>o.clickHandler(e.event)}" @change="${(o,e)=>o.changeHandler(e.event)}" @focusin="${(o,e)=>o.focusinHandler(e.event)}" @focusout="${(o,e)=>o.focusoutHandler(e.event)}"><slot name="label" part="label" ${G("labelSlot")}></slot><slot name="input" part="input" ${G("slottedInputs")}></slot><slot name="message" part="message" ${G({property:"messageSlot",filter:lo("[flag]")})}></slot></template>`,Cp=pa.compose({name:`${p.prefix}-field`,template:wp,styles:kp,shadowOptions:{delegatesFocus:!0}});Cp.define(p.registry);var Sp=Object.defineProperty,Ip=Object.getOwnPropertyDescriptor,To=(o,e,t,i)=>{for(var r=i>1?void 0:i?Ip(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&Sp(e,t,r),r};class Zt extends ${}To([a({mode:"boolean"})],Zt.prototype,"block",2),To([a({mode:"boolean"})],Zt.prototype,"bordered",2),To([a({mode:"boolean"})],Zt.prototype,"shadow",2),To([a],Zt.prototype,"fit",2),To([a],Zt.prototype,"shape",2);const Pp=b`<slot></slot>`,zp=u`
|
|
@@ -539,7 +539,7 @@ const p=Object.freeze({prefix:"fluent",shadowRootMode:"open",registry:customElem
|
|
|
539
539
|
:host{--tabIndicatorScale:${this.activeTabScale.toString()}}`,this.$fastController.addStyles(this.styles)}activeidChanged(e,t){if(e&&this.tabs){const i=this.tabs.find(r=>r.id===e);i&&(this.previousActiveTabData=this.getTabPositionData(i))}super.activeidChanged(e,t),this.setTabData(),this.activetab&&this.animationLoop(this.activetab)}tabsChanged(){super.tabsChanged(),this.setTabData(),this.activetab&&this.animationLoop(this.activetab)}}Ur([a],No.prototype,"appearance",2),Ur([a({mode:"boolean"})],No.prototype,"disabled",2),Ur([a],No.prototype,"size",2),Xe(No,Ue);function Gg(o={}){return b` ${He(o)}<div class="tablist" part="tablist" role="tablist"><slot name="tab" ${G("tabs")}></slot></div>${tt(o)}<div class="tabpanel" part="tabpanel"><slot name="tabpanel" ${G("tabpanels")}></slot></div>`}const Ug=Gg({}),Xg=u`
|
|
540
540
|
${k("grid")}
|
|
541
541
|
|
|
542
|
-
:host{box-sizing:border-box;font-family:${v};font-size:${B};line-height:${A};color:${Ie};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}:host([disabled]){cursor:not-allowed;color:${S}}:host([disabled]) ::slotted(fluent-tab){pointer-events:none;cursor:not-allowed;color:${S}}:host([disabled]) ::slotted(fluent-tab:after){background-color:${S}}:host([disabled]) ::slotted(fluent-tab[aria-selected='true'])::after{background-color:${S}}:host([disabled]) ::slotted(fluent-tab:hover):before{content:unset}:host ::slotted(fluent-tab){border-radius:${C}}:host ::slotted(fluent-tab[aria-selected='true'])::before{background-color:${S}}.tablist{display:grid;grid-template-rows:auto auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end;box-sizing:border-box}::slotted([slot='start']),::slotted([slot='end']){display:flex;align-self:center}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host([orientation='vertical']){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host([orientation='vertical']) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host([orientation='vertical']) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host([orientation='vertical']) ::slotted([slot='end']){grid-row:3}:host([appearance='subtle']) ::slotted(fluent-tab:hover){background-color:${xo};color:${ur};fill:${sn}}:host([appearance='subtle']) ::slotted(fluent-tab:active){background-color:${gt};fill:${gt};color:${z}}:host([size='small']) ::slotted(fluent-tab){font-size:${B};line-height:${A};padding:${je} ${ee}}:host([size='large']) ::slotted(fluent-tab){font-size:${he};line-height:${ye};padding:${mi} ${ae}}:host ::slotted(fluent-tab[data-animate='true'])::after{transition-property:transform;transition-duration:${Rn};transition-timing-function:${Pr}}:host ::slotted(fluent-tab)::after{height:${se};margin-top:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host([orientation='vertical']) ::slotted(fluent-tab)::after{width:${se};height:unset;margin-top:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted(fluent-tab)::before{height:${se};border-radius:${$e};content:'';inset:0;position:absolute;margin-top:auto}:host([orientation='vertical']) ::slotted(fluent-tab)::before{height:unset;width:${se};margin-inline-end:auto;transform-origin:top}:host ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:${se};margin-top:auto;transform-origin:left}:host([orientation='vertical']) ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:unset;margin-inline-end:auto;transform-origin:top;width:${se}}:host([orientation='vertical']) ::slotted(fluent-tab){align-items:flex-start;grid-column:2;padding-top:${je};padding-bottom:${je}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab){padding-top:${Rt};padding-bottom:${Rt}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab){padding-top:${V};padding-bottom:${V}}:host([size='small']) ::slotted(fluent-tab)::after,:host([size='small']) ::slotted(fluent-tab)::before,:host([size='small']) ::slotted(fluent-tab:hover)::after{right:${ee};left:${ee}}:host ::slotted(fluent-tab)::after,:host ::slotted(fluent-tab)::before,:host ::slotted(fluent-tab:hover)::after{right:${ae};left:${ae}}:host([size='large']) ::slotted(fluent-tab)::after,:host([size='large']) ::slotted(fluent-tab)::before,:host([size='large']) ::slotted(fluent-tab:hover)::after{right:${ae};left:${ae}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${je};bottom:${je}}:host([orientation='vertical']) ::slotted(fluent-tab)::after,:host([orientation='vertical']) ::slotted(fluent-tab)::before,:host([orientation='vertical']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${V};bottom:${V}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${Wt};bottom:${Wt}}`,Kg=No.compose({name:`${p.prefix}-tabs`,template:Ug,styles:Xg});Kg.define(p.registry);const Yg=o=>o.getAttribute("aria-disabled")==="true",Qg=o=>o.hasAttribute("hidden"),Vi=o=>!Yg(o)&&!Qg(o);function Zg(o,e="-tab"){return o?.nodeType!==Node.ELEMENT_NODE?!1:o.tagName.toLowerCase().endsWith(e)}const Jg={subtle:"subtle",transparent:"transparent"},zt=ge;var ef=Object.defineProperty,tf=Object.getOwnPropertyDescriptor,Fo=(o,e,t,i)=>{for(var r=i>1?void 0:i?tf(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&ef(e,t,r),r};class io extends ${constructor(){super(...arguments),this.elementInternals=this.attachInternals(),this.disabled=!1,this.orientation=zt.horizontal,this.prevActiveTabIndex=0,this.activeTabIndex=0,this.tabPanelMap=new WeakMap,this.change=()=>{this.$emit("change",this.activetab)},this.handleTabClick=e=>{const t=e.currentTarget;t.nodeType===Node.ELEMENT_NODE&&Vi(t)&&(this.prevActiveTabIndex=this.activeTabIndex,this.activeTabIndex=this.tabs.indexOf(t),this.setComponent())},this.handleTabKeyDown=e=>{const t=ei(this);switch(e.key){case uo:if(!this.isHorizontal())return;e.preventDefault(),this.adjust(t==="ltr"?-1:1);break;case po:if(!this.isHorizontal())return;e.preventDefault(),this.adjust(t==="ltr"?1:-1);break;case bo:if(this.isHorizontal())return;e.preventDefault(),this.adjust(-1);break;case ho:if(this.isHorizontal())return;e.preventDefault(),this.adjust(1);break;case mo:e.preventDefault(),this.adjust(-this.activeTabIndex);break;case go:e.preventDefault(),this.adjust(this.tabs.filter(i=>Vi(i)).length-this.activeTabIndex-1);break}}}disabledChanged(e,t){y(this.elementInternals,"disabled",t)}orientationChanged(e,t){this.elementInternals.ariaOrientation=t??zt.horizontal,wt(this.elementInternals,e,t,zt),this.$fastController.isConnected&&this.setTabs()}activeidChanged(e,t){if(this.$fastController.isConnected&&this.tabs.length>0){if(this.prevActiveTabIndex=this.tabs.findIndex(i=>i.id===e),this.setTabs(),e){const i=this.tabs[this.prevActiveTabIndex],r=this.tabPanelMap.get(i);r&&(r.hidden=!0)}if(t&&this.activetab){const i=this.tabPanelMap.get(this.activetab);i&&(i.hidden=!1)}e!==t&&this.change()}}slottedTabsChanged(e,t){this.tabs=t?.filter(i=>Zg(i))??[]}tabsChanged(){if(this.$fastController.isConnected&&this.tabs.length>0){this.tabIds=this.getTabIds(),this.setTabs();for(const e of this.tabs){const t=e.getAttribute("aria-controls")??"",r=this.getRootNode().getElementById(t);t&&r&&(r.role??(r.role="tabpanel"),r.hidden=this.activeid!==e.id,this.tabPanelMap.set(e,r))}}}getActiveIndex(){return this.activeid!==void 0?this.tabIds.indexOf(this.activeid)===-1?0:this.tabIds.indexOf(this.activeid):0}setTabs(){this.activeTabIndex=this.getActiveIndex();const e=this.tabs.some(t=>!!t.querySelector("[slot='start']"));this.tabs.forEach((t,i)=>{if(t.slot==="tab"){const r=this.activeTabIndex===i&&Vi(t),s=this.tabIds[i];t.setAttribute("id",s),t.setAttribute("aria-selected",r?"true":"false"),t.addEventListener("click",this.handleTabClick),t.addEventListener("keydown",this.handleTabKeyDown),t.setAttribute("tabindex",r&&!this.disabled?"0":"-1"),r&&(this.activetab=t,this.activeid=s),e&&this.orientation===zt.vertical&&t.setAttribute("data-hasIndent","")}})}getTabIds(){return this.tabs.map(e=>e.getAttribute("id")??`tab-${Ft()}`)}setComponent(){this.activeTabIndex!==this.prevActiveTabIndex&&(this.activeid=this.tabIds[this.activeTabIndex],this.focusTab())}isHorizontal(){return this.orientation===zt.horizontal}adjust(e){const t=this.tabs.filter(n=>Vi(n)),i=t.indexOf(this.activetab),r=yl(0,t.length-1,i+e),s=this.tabs.indexOf(t[r]);s>-1&&this.activateTabByIndex(this.tabs,s)}activateTabByIndex(e,t){const i=e[t];this.activetab=i,this.prevActiveTabIndex=this.activeTabIndex,this.activeTabIndex=t,i.focus(),this.setComponent()}focusTab(){this.tabs[this.activeTabIndex].focus()}connectedCallback(){super.connectedCallback(),this.tabIds=this.getTabIds(),this.activeTabIndex=this.getActiveIndex()}}Fo([a({mode:"boolean"})],io.prototype,"disabled",2),Fo([a],io.prototype,"orientation",2),Fo([a],io.prototype,"activeid",2),Fo([g],io.prototype,"slottedTabs",2),Fo([g],io.prototype,"tabs",2);var of=Object.defineProperty,rf=Object.getOwnPropertyDescriptor,ka=(o,e,t,i)=>{for(var r=i>1?void 0:i?rf(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&of(e,t,r),r};class Xr extends io{constructor(){super(...arguments),this.activeTabData={x:0,y:0,height:0,width:0},this.previousActiveTabData={x:0,y:0,height:0,width:0},this.activeTabOffset=0,this.activeTabScale=1,this.appearance=Jg.transparent}calculateAnimationProperties(e){this.activeTabOffset=this.getTabPosition(e),this.activeTabScale=this.getTabScale(e)}getTabPosition(e){return this.orientation===zt.horizontal?this.previousActiveTabData.x-(e.getBoundingClientRect().x-this.getBoundingClientRect().x):this.previousActiveTabData.y-(e.getBoundingClientRect().y-this.getBoundingClientRect().y)}getTabScale(e){return this.orientation===zt.horizontal?this.previousActiveTabData.width/e.getBoundingClientRect().width:this.previousActiveTabData.height/e.getBoundingClientRect().height}applyUpdatedCSSValues(e){this.calculateAnimationProperties(e),this.setAnimationVars()}animationLoop(e){e.setAttribute("data-animate","false"),this.applyUpdatedCSSValues(e),this.previousActiveTabData=this.activeTabData,this.applyUpdatedCSSValues(e),e.setAttribute("data-animate","true")}setTabData(){if(this.tabs&&this.tabs.length>0){const e=this.tabs,i=(this.activetab||e[0])?.getBoundingClientRect(),r=this.getBoundingClientRect();this.activeTabData={x:i.x-r.x,y:i.y-r.y,height:i.height,width:i.width},this.previousActiveTabData?.x!==this.activeTabData?.x&&this.previousActiveTabData?.y!==this.activeTabData?.y&&(this.previousActiveTabData=this.activeTabData)}}setAnimationVars(){this.style.setProperty("--tabIndicatorOffset",`${this.activeTabOffset}px`),this.style.setProperty("--tabIndicatorScale",`${this.activeTabScale}`)}activeidChanged(e,t){super.activeidChanged(e,t),this.setTabData(),this.activetab&&this.animationLoop(this.activetab)}tabsChanged(){super.tabsChanged(),this.setTabData(),this.activetab&&this.animationLoop(this.activetab)}}ka([a],Xr.prototype,"appearance",2),ka([a],Xr.prototype,"size",2);const sf=b`<template role="tablist"><slot name="tab" ${G("slottedTabs")}></slot></template>`,nf=u`
|
|
542
|
+
:host{box-sizing:border-box;font-family:${v};font-size:${B};line-height:${A};color:${Ie};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}:host([disabled]){cursor:not-allowed;color:${S}}:host([disabled]) ::slotted(fluent-tab){pointer-events:none;cursor:not-allowed;color:${S}}:host([disabled]) ::slotted(fluent-tab:after){background-color:${S}}:host([disabled]) ::slotted(fluent-tab[aria-selected='true'])::after{background-color:${S}}:host([disabled]) ::slotted(fluent-tab:hover):before{content:unset}:host ::slotted(fluent-tab){border-radius:${C}}:host ::slotted(fluent-tab[aria-selected='true'])::before{background-color:${S}}.tablist{display:grid;grid-template-rows:auto auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end;box-sizing:border-box}::slotted([slot='start']),::slotted([slot='end']){display:flex;align-self:center}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host([orientation='vertical']){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host([orientation='vertical']) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host([orientation='vertical']) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host([orientation='vertical']) ::slotted([slot='end']){grid-row:3}:host([appearance='subtle']) ::slotted(fluent-tab:hover){background-color:${xo};color:${ur};fill:${sn}}:host([appearance='subtle']) ::slotted(fluent-tab:active){background-color:${gt};fill:${gt};color:${z}}:host([size='small']) ::slotted(fluent-tab){font-size:${B};line-height:${A};padding:${je} ${ee}}:host([size='large']) ::slotted(fluent-tab){font-size:${he};line-height:${ye};padding:${mi} ${ae}}:host ::slotted(fluent-tab[data-animate='true'])::after{transition-property:transform;transition-duration:${Rn};transition-timing-function:${Pr}}:host ::slotted(fluent-tab)::after{height:${se};margin-top:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host([orientation='vertical']) ::slotted(fluent-tab)::after{width:${se};height:unset;margin-top:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted(fluent-tab)::before{height:${se};border-radius:${$e};content:'';inset:0;position:absolute;margin-top:auto}:host([orientation='vertical']) ::slotted(fluent-tab)::before{height:unset;width:${se};margin-inline-end:auto;transform-origin:top}:host ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:${se};margin-top:auto;transform-origin:left}:host([orientation='vertical']) ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:unset;margin-inline-end:auto;transform-origin:top;width:${se}}:host([orientation='vertical']) ::slotted(fluent-tab){align-items:flex-start;grid-column:2;padding-top:${je};padding-bottom:${je}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab){padding-top:${Rt};padding-bottom:${Rt}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab){padding-top:${V};padding-bottom:${V}}:host([size='small']) ::slotted(fluent-tab)::after,:host([size='small']) ::slotted(fluent-tab)::before,:host([size='small']) ::slotted(fluent-tab:hover)::after{right:${ee};left:${ee}}:host ::slotted(fluent-tab)::after,:host ::slotted(fluent-tab)::before,:host ::slotted(fluent-tab:hover)::after{right:${ae};left:${ae}}:host([size='large']) ::slotted(fluent-tab)::after,:host([size='large']) ::slotted(fluent-tab)::before,:host([size='large']) ::slotted(fluent-tab:hover)::after{right:${ae};left:${ae}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${je};bottom:${je}}:host([orientation='vertical']) ::slotted(fluent-tab)::after,:host([orientation='vertical']) ::slotted(fluent-tab)::before,:host([orientation='vertical']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${V};bottom:${V}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${Wt};bottom:${Wt}}`,Kg=No.compose({name:`${p.prefix}-tabs`,template:Ug,styles:Xg});Kg.define(p.registry);const Yg=o=>o.getAttribute("aria-disabled")==="true",Qg=o=>o.hasAttribute("hidden"),Vi=o=>!Yg(o)&&!Qg(o);function Zg(o,e="-tab"){return o?.nodeType!==Node.ELEMENT_NODE?!1:o.tagName.toLowerCase().endsWith(e)}const Jg={subtle:"subtle",transparent:"transparent"},zt=ge;var ef=Object.defineProperty,tf=Object.getOwnPropertyDescriptor,Fo=(o,e,t,i)=>{for(var r=i>1?void 0:i?tf(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&ef(e,t,r),r};class io extends ${constructor(){super(...arguments),this.elementInternals=this.attachInternals(),this.disabled=!1,this.orientation=zt.horizontal,this.prevActiveTabIndex=0,this.activeTabIndex=0,this.tabPanelMap=new WeakMap,this.change=()=>{this.$emit("change",this.activetab)},this.handleTabClick=e=>{const t=e.currentTarget;t.nodeType===Node.ELEMENT_NODE&&Vi(t)&&(this.prevActiveTabIndex=this.activeTabIndex,this.activeTabIndex=this.tabs.indexOf(t),this.setComponent())},this.handleTabKeyDown=e=>{const t=ei(this);switch(e.key){case uo:if(!this.isHorizontal())return;e.preventDefault(),this.adjust(t==="ltr"?-1:1);break;case po:if(!this.isHorizontal())return;e.preventDefault(),this.adjust(t==="ltr"?1:-1);break;case bo:if(this.isHorizontal())return;e.preventDefault(),this.adjust(-1);break;case ho:if(this.isHorizontal())return;e.preventDefault(),this.adjust(1);break;case mo:e.preventDefault(),this.adjust(-this.activeTabIndex);break;case go:e.preventDefault(),this.adjust(this.tabs.filter(i=>Vi(i)).length-this.activeTabIndex-1);break}}}disabledChanged(e,t){y(this.elementInternals,"disabled",t),this.$fastController.isConnected&&this.setTabs()}orientationChanged(e,t){this.elementInternals.ariaOrientation=t??zt.horizontal,wt(this.elementInternals,e,t,zt),this.$fastController.isConnected&&this.setTabs()}activeidChanged(e,t){if(this.$fastController.isConnected&&this.tabs.length>0){if(this.prevActiveTabIndex=this.tabs.findIndex(i=>i.id===e),this.setTabs(),e){const i=this.tabs[this.prevActiveTabIndex],r=this.tabPanelMap.get(i);r&&(r.hidden=!0)}if(t&&this.activetab){const i=this.tabPanelMap.get(this.activetab);i&&(i.hidden=!1)}e!==t&&this.change()}}slottedTabsChanged(e,t){this.tabs=t?.filter(i=>Zg(i))??[]}tabsChanged(){if(this.$fastController.isConnected&&this.tabs.length>0){this.tabIds=this.getTabIds(),this.setTabs();for(const e of this.tabs){const t=e.getAttribute("aria-controls")??"",r=this.getRootNode().getElementById(t);t&&r&&(r.role??(r.role="tabpanel"),r.hidden=this.activeid!==e.id,this.tabPanelMap.set(e,r))}}}getActiveIndex(){return this.activeid!==void 0?this.tabIds.indexOf(this.activeid)===-1?0:this.tabIds.indexOf(this.activeid):0}setTabs(){this.activeTabIndex=this.getActiveIndex();const e=this.tabs.some(t=>!!t.querySelector("[slot='start']"));this.tabs.forEach((t,i)=>{if(t.slot==="tab"){const r=this.activeTabIndex===i&&Vi(t),s=this.tabIds[i];console.log("disabled",this.disabled),t.disabled||(this.disabled?t.setAttribute("aria-disabled","true"):t.removeAttribute("aria-disabled")),t.setAttribute("id",s),t.setAttribute("aria-selected",r?"true":"false"),t.addEventListener("click",this.handleTabClick),t.addEventListener("keydown",this.handleTabKeyDown),t.setAttribute("tabindex",r&&!this.disabled?"0":"-1"),r&&(this.activetab=t,this.activeid=s),e&&this.orientation===zt.vertical&&t.setAttribute("data-hasIndent","")}})}getTabIds(){return this.tabs.map(e=>e.getAttribute("id")??`tab-${Ft()}`)}setComponent(){this.activeTabIndex!==this.prevActiveTabIndex&&(this.activeid=this.tabIds[this.activeTabIndex],this.focusTab())}isHorizontal(){return this.orientation===zt.horizontal}adjust(e){const t=this.tabs.filter(n=>Vi(n)),i=t.indexOf(this.activetab),r=yl(0,t.length-1,i+e),s=this.tabs.indexOf(t[r]);s>-1&&this.activateTabByIndex(this.tabs,s)}activateTabByIndex(e,t){const i=e[t];this.activetab=i,this.prevActiveTabIndex=this.activeTabIndex,this.activeTabIndex=t,i.focus(),this.setComponent()}focusTab(){this.tabs[this.activeTabIndex].focus()}connectedCallback(){super.connectedCallback(),this.tabIds=this.getTabIds(),this.activeTabIndex=this.getActiveIndex()}}Fo([a({mode:"boolean"})],io.prototype,"disabled",2),Fo([a],io.prototype,"orientation",2),Fo([a],io.prototype,"activeid",2),Fo([g],io.prototype,"slottedTabs",2),Fo([g],io.prototype,"tabs",2);var of=Object.defineProperty,rf=Object.getOwnPropertyDescriptor,ka=(o,e,t,i)=>{for(var r=i>1?void 0:i?rf(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&of(e,t,r),r};class Xr extends io{constructor(){super(...arguments),this.activeTabData={x:0,y:0,height:0,width:0},this.previousActiveTabData={x:0,y:0,height:0,width:0},this.activeTabOffset=0,this.activeTabScale=1,this.appearance=Jg.transparent}calculateAnimationProperties(e){this.activeTabOffset=this.getTabPosition(e),this.activeTabScale=this.getTabScale(e)}getTabPosition(e){return this.orientation===zt.horizontal?this.previousActiveTabData.x-(e.getBoundingClientRect().x-this.getBoundingClientRect().x):this.previousActiveTabData.y-(e.getBoundingClientRect().y-this.getBoundingClientRect().y)}getTabScale(e){return this.orientation===zt.horizontal?this.previousActiveTabData.width/e.getBoundingClientRect().width:this.previousActiveTabData.height/e.getBoundingClientRect().height}applyUpdatedCSSValues(e){this.calculateAnimationProperties(e),this.setAnimationVars()}animationLoop(e){e.setAttribute("data-animate","false"),this.applyUpdatedCSSValues(e),this.previousActiveTabData=this.activeTabData,this.applyUpdatedCSSValues(e),e.setAttribute("data-animate","true")}setTabData(){if(this.tabs&&this.tabs.length>0){const e=this.tabs,i=(this.activetab||e[0])?.getBoundingClientRect(),r=this.getBoundingClientRect();this.activeTabData={x:i.x-r.x,y:i.y-r.y,height:i.height,width:i.width},this.previousActiveTabData?.x!==this.activeTabData?.x&&this.previousActiveTabData?.y!==this.activeTabData?.y&&(this.previousActiveTabData=this.activeTabData)}}setAnimationVars(){this.style.setProperty("--tabIndicatorOffset",`${this.activeTabOffset}px`),this.style.setProperty("--tabIndicatorScale",`${this.activeTabScale}`)}activeidChanged(e,t){super.activeidChanged(e,t),this.setTabData(),this.activetab&&this.animationLoop(this.activetab)}tabsChanged(){super.tabsChanged(),this.setTabData(),this.activetab&&this.animationLoop(this.activetab)}}ka([a],Xr.prototype,"appearance",2),ka([a],Xr.prototype,"size",2);const sf=b`<template role="tablist"><slot name="tab" ${G("slottedTabs")}></slot></template>`,nf=u`
|
|
543
543
|
${k("flex")}
|
|
544
544
|
|
|
545
545
|
:host{--tabPaddingInline:inherit;--tabPaddingBlock:inherit;--tabIndicatorInsetInline:0;--tabIndicatorInsetBlock:0;box-sizing:border-box;color:${Ie};flex-direction:row}:host([orientation='vertical']){flex-direction:column}:host([orientation='vertical']) ::slotted([role='tab']){justify-content:flex-start}:host ::slotted([slot='tab'][data-animate='true'])::after{transition-property:transform;transition-duration:${Rn};transition-timing-function:${Pr}}:host ::slotted([slot='tab'])::after{height:${se};margin-block-start:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host([orientation='vertical']) ::slotted([slot='tab'])::after{width:${se};height:unset;margin-block-start:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted([slot='tab'])::before{height:${se};border-radius:${$e};content:'';inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock);position:absolute;margin-top:auto}:host ::slotted([slot='tab'])::before{inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock)}:host ::slotted([slot='tab'][aria-selected='true'])::before{background-color:${S}}:host ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:${se};margin-block-start:auto;transform-origin:left}:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:unset;width:${se};margin-inline-end:auto;transform-origin:top}:host(:where([size='small'],[size='large'])) ::slotted([slot='tab']){padding-inline:var(--tabPaddingInline);padding-block:var(--tabPaddingBlock)}:host([size='small']) ::slotted([slot='tab']){--tabPaddingBlock:${je};--tabPaddingInline:${ee};font-size:${B};line-height:${A}}:host([size='large']) ::slotted([slot='tab']){--tabPaddingBlock:${mi};--tabPaddingInline:${ae};font-size:${he};line-height:${ye}}:host ::slotted([slot='tab'])::after,:host ::slotted([slot='tab'])::before,:host ::slotted([slot='tab']:hover)::after{inset-inline:var(--tabIndicatorInsetInline)}:host ::slotted([slot='tab']){--tabIndicatorInsetInline:${ae}}:host([size='small']) ::slotted([slot='tab']){--tabIndicatorInsetInline:${ee}}:host([size='large']) ::slotted([slot='tab']){--tabIndicatorInsetInline:${ae}}:host([orientation='vertical']) ::slotted([slot='tab']){padding-block:var(--tabPaddingBlock)}:host([orientation='vertical']) ::slotted([slot='tab']){--tabPaddingBlock:${V}}:host([orientation='vertical'][size='small']) ::slotted([slot='tab']){--tabPaddingBlock:${Rt}}:host([orientation='vertical'][size='large']) ::slotted([slot='tab']){--tabPaddingBlock:${V}}:host([orientation='vertical']) ::slotted([slot='tab'])::after,:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab']:hover)::after{inset-inline:0;inset-block:var(--tabIndicatorInsetBlock)}:host([orientation='vertical']){--tabIndicatorInsetBlock:${V}}:host([orientation='vertical'][size='small']){--tabIndicatorInsetBlock:${je}}:host([orientation='vertical'][size='large']){--tabIndicatorInsetBlock:${Wt}}:host([disabled]){cursor:not-allowed;color:${S}}:host([disabled]) ::slotted([slot='tab']){pointer-events:none;cursor:not-allowed;color:${S}}:host([disabled]) ::slotted([slot='tab']:after){background-color:${S}}:host([disabled]) ::slotted([slot='tab'][aria-selected='true'])::after{background-color:${S}}:host([disabled]) ::slotted([slot='tab']:hover):before{content:unset}:host([appearance='subtle']) ::slotted([slot='tab']:hover){background-color:${xo};color:${ur};fill:${sn}}:host([appearance='subtle']) ::slotted([slot='tab']:active){background-color:${gt};fill:${gt};color:${z}}`,af=Xr.compose({name:`${p.prefix}-tablist`,template:sf,styles:nf});af.define(p.registry);const lf={outline:"outline",filledLighter:"filled-lighter",filledDarker:"filled-darker"},Li={none:"none",both:"both",horizontal:"horizontal",vertical:"vertical"};var cf=Object.defineProperty,df=Object.getOwnPropertyDescriptor,de=(o,e,t,i)=>{for(var r=i>1?void 0:i?df(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&cf(e,t,r),r};class K extends ${constructor(){super(),this.elementInternals=this.attachInternals(),this.filteredLabelSlottedNodes=[],this.labelSlottedNodes=[],this.userInteracted=!1,this.preConnectControlEl=document.createElement("textarea"),this.autoResize=!1,this.disabled=!1,this.displayShadow=!1,this.readOnly=!1,this.required=!1,this.resize=Li.none,this.spellcheck=!1}defaultSlottedNodesChanged(){const e=this.getContent();this.defaultValue=e,this.value=e}labelSlottedNodesChanged(){this.filteredLabelSlottedNodes=this.labelSlottedNodes.filter(on),this.labelEl&&(this.labelEl.hidden=!this.filteredLabelSlottedNodes.length),this.filteredLabelSlottedNodes.forEach(e=>{e.disabled=this.disabled,e.required=this.required})}autoResizeChanged(){this.maybeCreateAutoSizerEl(),y(this.elementInternals,"auto-resize",this.autoResize)}disabledChanged(){this.setDisabledSideEffect(this.disabled)}get form(){return this.elementInternals.form}get labels(){return this.elementInternals.labels}readOnlyChanged(){this.elementInternals.ariaReadOnly=`${!!this.readOnly}`}requiredChanged(){this.elementInternals.ariaRequired=`${!!this.required}`,this.filteredLabelSlottedNodes?.length&&this.filteredLabelSlottedNodes.forEach(e=>e.required=this.required)}resizeChanged(e,t){wt(this.elementInternals,e,t,Li,"resize-"),y(this.elementInternals,"resize",Xn(Li,t)&&t!==Li.none)}get textLength(){return this.controlEl.textLength}get type(){return"textarea"}get validity(){return this.elementInternals.validity}get validationMessage(){return this.elementInternals.validationMessage||this.controlEl.validationMessage}get willValidate(){return this.elementInternals.willValidate}get defaultValue(){return this.controlEl?.defaultValue??this.preConnectControlEl.defaultValue}set defaultValue(e){const t=this.controlEl??this.preConnectControlEl;t.defaultValue=e,this.controlEl&&!this.userInteracted&&(this.controlEl.value=e)}get value(){return this.controlEl?.value??this.preConnectControlEl.value}set value(e){const t=this.controlEl??this.preConnectControlEl;t.value=e,this.setFormValue(e),this.setValidity()}connectedCallback(){super.connectedCallback(),this.setDefaultValue(),this.maybeCreateAutoSizerEl(),this.bindEvents(),this.observeControlElAttrs()}disconnectedCallback(){super.disconnectedCallback(),this.autoSizerObserver?.disconnect(),this.controlElAttrObserver?.disconnect()}formResetCallback(){this.value=this.defaultValue}formDisabledCallback(e){this.setDisabledSideEffect(e),this.setValidity()}setFormValue(e,t){this.elementInternals.setFormValue(e,e??t)}checkValidity(){return this.elementInternals.checkValidity()}reportValidity(){return this.elementInternals.reportValidity()}setCustomValidity(e){this.elementInternals.setValidity({customError:!!e},e?e.toString():void 0),this.reportValidity()}setValidity(e,t,i){this.$fastController.isConnected&&(this.disabled||this.readOnly?this.elementInternals.setValidity({}):this.elementInternals.setValidity(e??this.controlEl.validity,t??this.controlEl.validationMessage,i??this.controlEl),this.userInteracted&&this.toggleUserValidityState())}select(){this.controlEl.select()}setDefaultValue(){this.defaultValue=this.innerHTML.trim()||this.preConnectControlEl.defaultValue||"",this.value=this.preConnectControlEl.value||this.defaultValue,this.setFormValue(this.value),this.setValidity(),this.preConnectControlEl=null}bindEvents(){this.controlEl.addEventListener("input",()=>this.userInteracted=!0,{once:!0})}getContent(){return this.defaultSlottedNodes.map(e=>{switch(e.nodeType){case Node.ELEMENT_NODE:return e.outerHTML;case Node.TEXT_NODE:return e.textContent.trim();default:return""}}).join("")||""}observeControlElAttrs(){this.controlElAttrObserver=new MutationObserver(()=>{this.setValidity()}),this.controlElAttrObserver.observe(this.controlEl,{attributes:!0,attributeFilter:["disabled","required","readonly","maxlength","minlength"]})}setDisabledSideEffect(e){this.elementInternals.ariaDisabled=`${e}`,this.controlEl&&(this.controlEl.disabled=e),this.filteredLabelSlottedNodes?.length&&this.filteredLabelSlottedNodes.forEach(t=>t.disabled=this.disabled)}toggleUserValidityState(){y(this.elementInternals,"user-invalid",!this.validity.valid),y(this.elementInternals,"user-valid",this.validity.valid)}maybeCreateAutoSizerEl(){if(!CSS.supports("field-sizing: content")){if(!this.autoResize){this.autoSizerEl?.remove(),this.autoSizerObserver?.disconnect();return}this.autoSizerEl||(this.autoSizerEl=document.createElement("div"),this.autoSizerEl.classList.add("auto-sizer"),this.autoSizerEl.ariaHidden="true"),this.shadowRoot.prepend(this.autoSizerEl),this.autoSizerObserver||(this.autoSizerObserver=new ResizeObserver((e,t)=>{const i=window.getComputedStyle(this).writingMode.startsWith("horizontal")?"height":"width";this.style.getPropertyValue(i)!==""&&(this.autoSizerEl?.remove(),t.disconnect())})),this.autoSizerObserver.observe(this)}}handleControlInput(){this.autoResize&&this.autoSizerEl&&(this.autoSizerEl.textContent=this.value+" "),this.setFormValue(this.value),this.setValidity()}handleControlChange(){this.toggleUserValidityState(),this.$emit("change")}handleControlSelect(){this.$emit("select")}}K.formAssociated=!0,de([g],K.prototype,"defaultSlottedNodes",2),de([g],K.prototype,"labelSlottedNodes",2),de([a],K.prototype,"autocomplete",2),de([a({attribute:"auto-resize",mode:"boolean"})],K.prototype,"autoResize",2),de([a({attribute:"dirname"})],K.prototype,"dirName",2),de([a({mode:"boolean"})],K.prototype,"disabled",2),de([a({attribute:"display-shadow",mode:"boolean"})],K.prototype,"displayShadow",2),de([a({attribute:"form"})],K.prototype,"initialForm",2),de([a({attribute:"maxlength",converter:re})],K.prototype,"maxLength",2),de([a({attribute:"minlength",converter:re})],K.prototype,"minLength",2),de([a],K.prototype,"name",2),de([a],K.prototype,"placeholder",2),de([a({attribute:"readonly",mode:"boolean"})],K.prototype,"readOnly",2),de([a({mode:"boolean"})],K.prototype,"required",2),de([a({mode:"fromView"})],K.prototype,"resize",2),de([a({mode:"boolean"})],K.prototype,"spellcheck",2);var hf=Object.defineProperty,uf=Object.getOwnPropertyDescriptor,Kr=(o,e,t,i)=>{for(var r=i>1?void 0:i?uf(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&hf(e,t,r),r};class ji extends K{constructor(){super(...arguments),this.appearance=lf.outline,this.block=!1}labelSlottedNodesChanged(){super.labelSlottedNodesChanged(),this.labelSlottedNodes.forEach(e=>{e.size=this.size})}handleChange(e,t){switch(t){case"size":this.labelSlottedNodes.forEach(i=>{i.size=this.size});break}}connectedCallback(){super.connectedCallback(),m.getNotifier(this).subscribe(this,"size")}disconnectedCallback(){super.disconnectedCallback(),m.getNotifier(this).unsubscribe(this,"size")}}Kr([a({mode:"fromView"})],ji.prototype,"appearance",2),Kr([a({mode:"boolean"})],ji.prototype,"block",2),Kr([a],ji.prototype,"size",2);const pf=u`
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/web-components",
|
|
3
3
|
"description": "A library of Fluent Web Components",
|
|
4
|
-
"version": "3.0.0-beta.
|
|
4
|
+
"version": "3.0.0-beta.127",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Microsoft",
|
|
7
7
|
"url": "https://discord.gg/FcSNfg4"
|
|
8
8
|
},
|
|
9
9
|
"engines": {
|
|
10
|
-
"node": "
|
|
10
|
+
"node": "^22.0.0 || ^24.0.0"
|
|
11
11
|
},
|
|
12
12
|
"license": "MIT",
|
|
13
13
|
"repository": {
|
|
@@ -75,14 +75,14 @@
|
|
|
75
75
|
"e2e:local": "node ./scripts/e2e.js --ui"
|
|
76
76
|
},
|
|
77
77
|
"devDependencies": {
|
|
78
|
-
"@custom-elements-manifest/analyzer": "0.10.
|
|
78
|
+
"@custom-elements-manifest/analyzer": "0.10.10",
|
|
79
79
|
"@fluentui/scripts-api-extractor": "*",
|
|
80
80
|
"@microsoft/fast-element": "2.0.0",
|
|
81
81
|
"@tensile-perf/web-components": "~0.2.2",
|
|
82
82
|
"@storybook/html": "7.6.20",
|
|
83
83
|
"@storybook/html-webpack5": "7.6.20",
|
|
84
84
|
"@wc-toolkit/cem-validator": "1.0.3",
|
|
85
|
-
"@wc-toolkit/cem-inheritance": "1.
|
|
85
|
+
"@wc-toolkit/cem-inheritance": "1.2.2",
|
|
86
86
|
"@wc-toolkit/module-path-resolver": "1.0.0",
|
|
87
87
|
"@wc-toolkit/type-parser": "1.0.3",
|
|
88
88
|
"chromedriver": "^125.0.0"
|