@fluentui/web-components 3.0.0-rc.1 → 3.0.0-rc.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/CHANGELOG.md +84 -2
  2. package/custom-elements.json +705 -1223
  3. package/dist/esm/anchor-button/anchor-button.base.js +3 -0
  4. package/dist/esm/anchor-button/anchor-button.base.js.map +1 -1
  5. package/dist/esm/avatar/avatar.base.d.ts +20 -0
  6. package/dist/esm/avatar/avatar.base.js +37 -1
  7. package/dist/esm/avatar/avatar.base.js.map +1 -1
  8. package/dist/esm/avatar/avatar.js +1 -1
  9. package/dist/esm/avatar/avatar.js.map +1 -1
  10. package/dist/esm/avatar/avatar.styles.js +4 -4
  11. package/dist/esm/avatar/avatar.styles.js.map +1 -1
  12. package/dist/esm/avatar/avatar.template.js +2 -2
  13. package/dist/esm/avatar/avatar.template.js.map +1 -1
  14. package/dist/esm/badge/badge.options.d.ts +3 -1
  15. package/dist/esm/badge/badge.options.js.map +1 -1
  16. package/dist/esm/compound-button/compound-button.styles.js +1 -1
  17. package/dist/esm/compound-button/compound-button.styles.js.map +1 -1
  18. package/dist/esm/counter-badge/counter-badge.d.ts +2 -1
  19. package/dist/esm/counter-badge/counter-badge.js +2 -1
  20. package/dist/esm/counter-badge/counter-badge.js.map +1 -1
  21. package/dist/esm/dialog/dialog.d.ts +23 -8
  22. package/dist/esm/dialog/dialog.js +15 -6
  23. package/dist/esm/dialog/dialog.js.map +1 -1
  24. package/dist/esm/dialog/dialog.template.js.map +1 -1
  25. package/dist/esm/dialog-body/dialog-body.js +1 -1
  26. package/dist/esm/dialog-body/dialog-body.js.map +1 -1
  27. package/dist/esm/drawer/drawer.d.ts +18 -9
  28. package/dist/esm/drawer/drawer.js +12 -6
  29. package/dist/esm/drawer/drawer.js.map +1 -1
  30. package/dist/esm/drawer-body/drawer-body.js +1 -1
  31. package/dist/esm/drawer-body/drawer-body.js.map +1 -1
  32. package/dist/esm/index-rollup.d.ts +1 -2
  33. package/dist/esm/index-rollup.js +1 -2
  34. package/dist/esm/index-rollup.js.map +1 -1
  35. package/dist/esm/index.d.ts +2 -4
  36. package/dist/esm/index.js +0 -2
  37. package/dist/esm/index.js.map +1 -1
  38. package/dist/esm/menu-list/menu-list.js +4 -4
  39. package/dist/esm/menu-list/menu-list.js.map +1 -1
  40. package/dist/esm/message-bar/message-bar.d.ts +2 -1
  41. package/dist/esm/message-bar/message-bar.js +2 -1
  42. package/dist/esm/message-bar/message-bar.js.map +1 -1
  43. package/dist/esm/message-bar/message-bar.options.d.ts +6 -3
  44. package/dist/esm/message-bar/message-bar.options.js +6 -3
  45. package/dist/esm/message-bar/message-bar.options.js.map +1 -1
  46. package/dist/esm/progress-bar/progress-bar.base.d.ts +16 -4
  47. package/dist/esm/progress-bar/progress-bar.base.js +4 -1
  48. package/dist/esm/progress-bar/progress-bar.base.js.map +1 -1
  49. package/dist/esm/progress-bar/progress-bar.d.ts +8 -2
  50. package/dist/esm/progress-bar/progress-bar.js.map +1 -1
  51. package/dist/esm/styles/partials/badge.partials.d.ts +2 -1
  52. package/dist/esm/styles/partials/badge.partials.js +2 -1
  53. package/dist/esm/styles/partials/badge.partials.js.map +1 -1
  54. package/dist/esm/textarea/textarea.base.d.ts +5 -0
  55. package/dist/esm/textarea/textarea.base.js +4 -1
  56. package/dist/esm/textarea/textarea.base.js.map +1 -1
  57. package/dist/esm/textarea/textarea.template.js +1 -1
  58. package/dist/esm/textarea/textarea.template.js.map +1 -1
  59. package/dist/esm/theme/design-tokens.d.ts +115 -0
  60. package/dist/esm/theme/design-tokens.js +115 -0
  61. package/dist/esm/theme/design-tokens.js.map +1 -1
  62. package/dist/esm/theme/set-theme.d.ts +2 -2
  63. package/dist/esm/theme/set-theme.js +1 -1
  64. package/dist/esm/tree/tree.base.d.ts +1 -1
  65. package/dist/esm/tree/tree.base.js +1 -1
  66. package/dist/esm/tree/tree.base.js.map +1 -1
  67. package/dist/esm/tree/tree.d.ts +8 -2
  68. package/dist/esm/tree/tree.js +8 -2
  69. package/dist/esm/tree/tree.js.map +1 -1
  70. package/dist/esm/tree-item/tree-item.base.d.ts +8 -2
  71. package/dist/esm/tree-item/tree-item.base.js +8 -2
  72. package/dist/esm/tree-item/tree-item.base.js.map +1 -1
  73. package/dist/web-components.d.ts +256 -284
  74. package/dist/web-components.js +956 -1232
  75. package/dist/web-components.min.js +276 -270
  76. package/package.json +5 -6
  77. package/dist/esm/tab-panel/define.d.ts +0 -1
  78. package/dist/esm/tab-panel/define.js +0 -7
  79. package/dist/esm/tab-panel/define.js.map +0 -1
  80. package/dist/esm/tab-panel/index.d.ts +0 -4
  81. package/dist/esm/tab-panel/index.js +0 -5
  82. package/dist/esm/tab-panel/index.js.map +0 -1
  83. package/dist/esm/tab-panel/tab-panel.bench.d.ts +0 -3
  84. package/dist/esm/tab-panel/tab-panel.bench.js +0 -13
  85. package/dist/esm/tab-panel/tab-panel.bench.js.map +0 -1
  86. package/dist/esm/tab-panel/tab-panel.d.ts +0 -8
  87. package/dist/esm/tab-panel/tab-panel.definition.d.ts +0 -5
  88. package/dist/esm/tab-panel/tab-panel.definition.js +0 -13
  89. package/dist/esm/tab-panel/tab-panel.definition.js.map +0 -1
  90. package/dist/esm/tab-panel/tab-panel.js +0 -9
  91. package/dist/esm/tab-panel/tab-panel.js.map +0 -1
  92. package/dist/esm/tab-panel/tab-panel.styles.d.ts +0 -1
  93. package/dist/esm/tab-panel/tab-panel.styles.js +0 -12
  94. package/dist/esm/tab-panel/tab-panel.styles.js.map +0 -1
  95. package/dist/esm/tab-panel/tab-panel.template.d.ts +0 -7
  96. package/dist/esm/tab-panel/tab-panel.template.js +0 -13
  97. package/dist/esm/tab-panel/tab-panel.template.js.map +0 -1
  98. package/dist/esm/tabs/define.d.ts +0 -1
  99. package/dist/esm/tabs/define.js +0 -7
  100. package/dist/esm/tabs/define.js.map +0 -1
  101. package/dist/esm/tabs/index.d.ts +0 -6
  102. package/dist/esm/tabs/index.js +0 -6
  103. package/dist/esm/tabs/index.js.map +0 -1
  104. package/dist/esm/tabs/tabs.base.d.ts +0 -90
  105. package/dist/esm/tabs/tabs.base.js +0 -279
  106. package/dist/esm/tabs/tabs.base.js.map +0 -1
  107. package/dist/esm/tabs/tabs.bench.d.ts +0 -3
  108. package/dist/esm/tabs/tabs.bench.js +0 -32
  109. package/dist/esm/tabs/tabs.bench.js.map +0 -1
  110. package/dist/esm/tabs/tabs.d.ts +0 -100
  111. package/dist/esm/tabs/tabs.definition.d.ts +0 -5
  112. package/dist/esm/tabs/tabs.definition.js +0 -13
  113. package/dist/esm/tabs/tabs.definition.js.map +0 -1
  114. package/dist/esm/tabs/tabs.js +0 -180
  115. package/dist/esm/tabs/tabs.js.map +0 -1
  116. package/dist/esm/tabs/tabs.options.d.ts +0 -32
  117. package/dist/esm/tabs/tabs.options.js +0 -16
  118. package/dist/esm/tabs/tabs.options.js.map +0 -1
  119. package/dist/esm/tabs/tabs.styles.d.ts +0 -1
  120. package/dist/esm/tabs/tabs.styles.js +0 -230
  121. package/dist/esm/tabs/tabs.styles.js.map +0 -1
  122. package/dist/esm/tabs/tabs.template.d.ts +0 -8
  123. package/dist/esm/tabs/tabs.template.js +0 -19
  124. package/dist/esm/tabs/tabs.template.js.map +0 -1
@@ -979,6 +979,17 @@ export declare class BaseAnchor extends FASTElement {
979
979
  * @public
980
980
  */
981
981
  export declare class BaseAvatar extends FASTElement {
982
+ /**
983
+ * Signal to remove event listeners when the component is disconnected.
984
+ *
985
+ * @internal
986
+ */
987
+ private abortSignal?;
988
+ /**
989
+ * Reference to the default slot element.
990
+ * @internal
991
+ */
992
+ defaultSlot: HTMLSlotElement;
982
993
  /**
983
994
  * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
984
995
  *
@@ -1001,7 +1012,16 @@ export declare class BaseAvatar extends FASTElement {
1001
1012
  * HTML Attribute: name
1002
1013
  */
1003
1014
  initials?: string | undefined;
1015
+ connectedCallback(): void;
1004
1016
  constructor();
1017
+ disconnectedCallback(): void;
1018
+ /**
1019
+ * Removes any empty text nodes from the default slot when the slotted content changes.
1020
+ *
1021
+ * @param e - The event object
1022
+ * @internal
1023
+ */
1024
+ slotchangeHandler(): void;
1005
1025
  }
1006
1026
 
1007
1027
  /**
@@ -2212,8 +2232,11 @@ export declare class BaseProgressBar extends FASTElement {
2212
2232
  elementInternals: ElementInternals;
2213
2233
  /**
2214
2234
  * The validation state of the progress bar
2215
- * @public
2235
+ * The validation state of the progress bar
2236
+ *
2216
2237
  * HTML Attribute: `validation-state`
2238
+ *
2239
+ * @public
2217
2240
  */
2218
2241
  validationState: ProgressBarValidationState | null;
2219
2242
  /**
@@ -2224,8 +2247,11 @@ export declare class BaseProgressBar extends FASTElement {
2224
2247
  validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
2225
2248
  /**
2226
2249
  * The value of the progress
2227
- * @internal
2250
+ * The value of the progress
2251
+ *
2228
2252
  * HTML Attribute: `value`
2253
+ *
2254
+ * @internal
2229
2255
  */
2230
2256
  value?: number;
2231
2257
  /**
@@ -2236,8 +2262,11 @@ export declare class BaseProgressBar extends FASTElement {
2236
2262
  protected valueChanged(prev: number | undefined, next: number | undefined): void;
2237
2263
  /**
2238
2264
  * The minimum value
2239
- * @internal
2265
+ * The minimum value
2266
+ *
2240
2267
  * HTML Attribute: `min`
2268
+ *
2269
+ * @internal
2241
2270
  */
2242
2271
  min?: number;
2243
2272
  /**
@@ -2249,8 +2278,11 @@ export declare class BaseProgressBar extends FASTElement {
2249
2278
  protected minChanged(prev: number | undefined, next: number | undefined): void;
2250
2279
  /**
2251
2280
  * The maximum value
2252
- * @internal
2281
+ * The maximum value
2282
+ *
2253
2283
  * HTML Attribute: `max`
2284
+ *
2285
+ * @internal
2254
2286
  */
2255
2287
  max?: number;
2256
2288
  /**
@@ -2458,95 +2490,6 @@ export declare class BaseTablist extends FASTElement {
2458
2490
  connectedCallback(): void;
2459
2491
  }
2460
2492
 
2461
- /**
2462
- * A Tabs component that wraps a collection of tab and tab panel elements.
2463
- *
2464
- * @deprecated - use tablist instead
2465
- */
2466
- declare class BaseTabs extends FASTElement {
2467
- /**
2468
- * The orientation
2469
- * @public
2470
- * @remarks
2471
- * HTML Attribute: orientation
2472
- */
2473
- orientation: TabsOrientation;
2474
- /**
2475
- * @internal
2476
- */
2477
- orientationChanged(): void;
2478
- /**
2479
- * The id of the active tab
2480
- *
2481
- * @public
2482
- * @remarks
2483
- * HTML Attribute: activeid
2484
- */
2485
- activeid: string;
2486
- /**
2487
- * @internal
2488
- */
2489
- activeidChanged(oldValue: string, newValue: string): void;
2490
- /**
2491
- * @internal
2492
- */
2493
- tabs: HTMLElement[];
2494
- /**
2495
- * @internal
2496
- */
2497
- tabsChanged(): void;
2498
- /**
2499
- * @internal
2500
- */
2501
- tabpanels: HTMLElement[];
2502
- /**
2503
- * @internal
2504
- */
2505
- tabpanelsChanged(): void;
2506
- /**
2507
- * A reference to the active tab
2508
- * @public
2509
- */
2510
- activetab: HTMLElement;
2511
- private prevActiveTabIndex;
2512
- private activeTabIndex;
2513
- private tabIds;
2514
- private tabpanelIds;
2515
- private change;
2516
- private isDisabledElement;
2517
- private isHiddenElement;
2518
- private isFocusableElement;
2519
- private getActiveIndex;
2520
- /**
2521
- * Function that is invoked whenever the selected tab or the tab collection changes.
2522
- *
2523
- * @public
2524
- */
2525
- protected setTabs(): void;
2526
- private setTabPanels;
2527
- private getTabIds;
2528
- private getTabPanelIds;
2529
- private setComponent;
2530
- private handleTabClick;
2531
- private isHorizontal;
2532
- private handleTabKeyDown;
2533
- /**
2534
- * The adjust method for FASTTabs
2535
- * @public
2536
- * @remarks
2537
- * This method allows the active index to be adjusted by numerical increments
2538
- */
2539
- adjust(adjustment: number): void;
2540
- private adjustForward;
2541
- private adjustBackward;
2542
- private moveToTabByIndex;
2543
- private focusTab;
2544
- /**
2545
- * @internal
2546
- */
2547
- connectedCallback(): void;
2548
- }
2549
-
2550
2493
  /**
2551
2494
  * A Text Area Custom HTML Element.
2552
2495
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | `<textarea>`} element.
@@ -2580,6 +2523,11 @@ export declare class BaseTextArea extends FASTElement {
2580
2523
  * @internal
2581
2524
  */
2582
2525
  labelEl: HTMLLabelElement;
2526
+ /**
2527
+ * The root container element.
2528
+ * @internal
2529
+ */
2530
+ rootEl: HTMLDivElement;
2583
2531
  /**
2584
2532
  * The `<textarea>` element.
2585
2533
  * @internal
@@ -3379,8 +3327,11 @@ declare class BaseTreeItem extends FASTElement {
3379
3327
  constructor();
3380
3328
  /**
3381
3329
  * When true, the control will be appear expanded by user interaction.
3382
- * @public
3330
+ * When true, the control will be appear expanded by user interaction.
3331
+ *
3383
3332
  * HTML Attribute: `expanded`
3333
+ *
3334
+ * @public
3384
3335
  */
3385
3336
  expanded: boolean;
3386
3337
  /**
@@ -3408,8 +3359,11 @@ declare class BaseTreeItem extends FASTElement {
3408
3359
  protected selectedChanged(prev: boolean, next: boolean): void;
3409
3360
  /**
3410
3361
  * When true, the control has no child tree items
3411
- * @public
3362
+ * When true, the control has no child tree items
3363
+ *
3412
3364
  * HTML Attribute: empty
3365
+ *
3366
+ * @public
3413
3367
  */
3414
3368
  empty: boolean;
3415
3369
  private styles;
@@ -3455,6 +3409,36 @@ declare class BaseTreeItem extends FASTElement {
3455
3409
  handleItemSlotChange(): void;
3456
3410
  }
3457
3411
 
3412
+ /**
3413
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius2XLarge | `borderRadius2XLarge`} design token.
3414
+ * @public
3415
+ */
3416
+ export declare const borderRadius2XLarge = "var(--borderRadius2XLarge)";
3417
+
3418
+ /**
3419
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius3XLarge | `borderRadius3XLarge`} design token.
3420
+ * @public
3421
+ */
3422
+ export declare const borderRadius3XLarge = "var(--borderRadius3XLarge)";
3423
+
3424
+ /**
3425
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius4XLarge | `borderRadius4XLarge`} design token.
3426
+ * @public
3427
+ */
3428
+ export declare const borderRadius4XLarge = "var(--borderRadius4XLarge)";
3429
+
3430
+ /**
3431
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius5XLarge | `borderRadius5XLarge`} design token.
3432
+ * @public
3433
+ */
3434
+ export declare const borderRadius5XLarge = "var(--borderRadius5XLarge)";
3435
+
3436
+ /**
3437
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius6XLarge | `borderRadius6XLarge`} design token.
3438
+ * @public
3439
+ */
3440
+ export declare const borderRadius6XLarge = "var(--borderRadius6XLarge)";
3441
+
3458
3442
  /**
3459
3443
  * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
3460
3444
  * @public
@@ -4169,6 +4153,36 @@ export declare const colorNeutralBackground5Selected = "var(--colorNeutralBackgr
4169
4153
  */
4170
4154
  export declare const colorNeutralBackground6 = "var(--colorNeutralBackground6)";
4171
4155
 
4156
+ /**
4157
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7 | `colorNeutralBackground7`} design token.
4158
+ * @public
4159
+ */
4160
+ export declare const colorNeutralBackground7 = "var(--colorNeutralBackground7)";
4161
+
4162
+ /**
4163
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7Hover | `colorNeutralBackground7Hover`} design token.
4164
+ * @public
4165
+ */
4166
+ export declare const colorNeutralBackground7Hover = "var(--colorNeutralBackground7Hover)";
4167
+
4168
+ /**
4169
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7Pressed | `colorNeutralBackground7Pressed`} design token.
4170
+ * @public
4171
+ */
4172
+ export declare const colorNeutralBackground7Pressed = "var(--colorNeutralBackground7Pressed)";
4173
+
4174
+ /**
4175
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7Selected | `colorNeutralBackground7Selected`} design token.
4176
+ * @public
4177
+ */
4178
+ export declare const colorNeutralBackground7Selected = "var(--colorNeutralBackground7Selected)";
4179
+
4180
+ /**
4181
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground8 | `colorNeutralBackground8`} design token.
4182
+ * @public
4183
+ */
4184
+ export declare const colorNeutralBackground8 = "var(--colorNeutralBackground8)";
4185
+
4172
4186
  /**
4173
4187
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundAlpha | `colorNeutralBackgroundAlpha`} design token.
4174
4188
  * @public
@@ -4187,6 +4201,12 @@ export declare const colorNeutralBackgroundAlpha2 = "var(--colorNeutralBackgroun
4187
4201
  */
4188
4202
  export declare const colorNeutralBackgroundDisabled = "var(--colorNeutralBackgroundDisabled)";
4189
4203
 
4204
+ /**
4205
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundDisabled2 | `colorNeutralBackgroundDisabled2`} design token.
4206
+ * @public
4207
+ */
4208
+ export declare const colorNeutralBackgroundDisabled2 = "var(--colorNeutralBackgroundDisabled2)";
4209
+
4190
4210
  /**
4191
4211
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInverted | `colorNeutralBackgroundInverted`} design token.
4192
4212
  * @public
@@ -4199,6 +4219,24 @@ export declare const colorNeutralBackgroundInverted = "var(--colorNeutralBackgro
4199
4219
  */
4200
4220
  export declare const colorNeutralBackgroundInvertedDisabled = "var(--colorNeutralBackgroundInvertedDisabled)";
4201
4221
 
4222
+ /**
4223
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedHover | `colorNeutralBackgroundInvertedHover`} design token.
4224
+ * @public
4225
+ */
4226
+ export declare const colorNeutralBackgroundInvertedHover = "var(--colorNeutralBackgroundInvertedHover)";
4227
+
4228
+ /**
4229
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedPressed | `colorNeutralBackgroundInvertedPressed`} design token.
4230
+ * @public
4231
+ */
4232
+ export declare const colorNeutralBackgroundInvertedPressed = "var(--colorNeutralBackgroundInvertedPressed)";
4233
+
4234
+ /**
4235
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedSelected | `colorNeutralBackgroundInvertedSelected`} design token.
4236
+ * @public
4237
+ */
4238
+ export declare const colorNeutralBackgroundInvertedSelected = "var(--colorNeutralBackgroundInvertedSelected)";
4239
+
4202
4240
  /**
4203
4241
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundStatic | `colorNeutralBackgroundStatic`} design token.
4204
4242
  * @public
@@ -4379,6 +4417,30 @@ export declare const colorNeutralForeground3Selected = "var(--colorNeutralForegr
4379
4417
  */
4380
4418
  export declare const colorNeutralForeground4 = "var(--colorNeutralForeground4)";
4381
4419
 
4420
+ /**
4421
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5 | `colorNeutralForeground5`} design token.
4422
+ * @public
4423
+ */
4424
+ export declare const colorNeutralForeground5 = "var(--colorNeutralForeground5)";
4425
+
4426
+ /**
4427
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5Hover | `colorNeutralForeground5Hover`} design token.
4428
+ * @public
4429
+ */
4430
+ export declare const colorNeutralForeground5Hover = "var(--colorNeutralForeground5Hover)";
4431
+
4432
+ /**
4433
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5Pressed | `colorNeutralForeground5Pressed`} design token.
4434
+ * @public
4435
+ */
4436
+ export declare const colorNeutralForeground5Pressed = "var(--colorNeutralForeground5Pressed)";
4437
+
4438
+ /**
4439
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5Selected | `colorNeutralForeground5Selected`} design token.
4440
+ * @public
4441
+ */
4442
+ export declare const colorNeutralForeground5Selected = "var(--colorNeutralForeground5Selected)";
4443
+
4382
4444
  /**
4383
4445
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundDisabled | `colorNeutralForegroundDisabled`} design token.
4384
4446
  * @public
@@ -4553,6 +4615,30 @@ export declare const colorNeutralStroke2 = "var(--colorNeutralStroke2)";
4553
4615
  */
4554
4616
  export declare const colorNeutralStroke3 = "var(--colorNeutralStroke3)";
4555
4617
 
4618
+ /**
4619
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4 | `colorNeutralStroke4`} design token.
4620
+ * @public
4621
+ */
4622
+ export declare const colorNeutralStroke4 = "var(--colorNeutralStroke4)";
4623
+
4624
+ /**
4625
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4Hover | `colorNeutralStroke4Hover`} design token.
4626
+ * @public
4627
+ */
4628
+ export declare const colorNeutralStroke4Hover = "var(--colorNeutralStroke4Hover)";
4629
+
4630
+ /**
4631
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4Pressed | `colorNeutralStroke4Pressed`} design token.
4632
+ * @public
4633
+ */
4634
+ export declare const colorNeutralStroke4Pressed = "var(--colorNeutralStroke4Pressed)";
4635
+
4636
+ /**
4637
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4Selected | `colorNeutralStroke4Selected`} design token.
4638
+ * @public
4639
+ */
4640
+ export declare const colorNeutralStroke4Selected = "var(--colorNeutralStroke4Selected)";
4641
+
4556
4642
  /**
4557
4643
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessible | `colorNeutralStrokeAccessible`} design token.
4558
4644
  * @public
@@ -4595,6 +4681,12 @@ export declare const colorNeutralStrokeAlpha2 = "var(--colorNeutralStrokeAlpha2)
4595
4681
  */
4596
4682
  export declare const colorNeutralStrokeDisabled = "var(--colorNeutralStrokeDisabled)";
4597
4683
 
4684
+ /**
4685
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeDisabled2 | `colorNeutralStrokeDisabled2`} design token.
4686
+ * @public
4687
+ */
4688
+ export declare const colorNeutralStrokeDisabled2 = "var(--colorNeutralStrokeDisabled2)";
4689
+
4598
4690
  /**
4599
4691
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeInvertedDisabled | `colorNeutralStrokeInvertedDisabled`} design token.
4600
4692
  * @public
@@ -6010,10 +6102,11 @@ export declare class CounterBadge extends FASTElement {
6010
6102
  */
6011
6103
  dot: boolean;
6012
6104
  /**
6013
- * @internal
6014
6105
  * Function to set the count
6015
6106
  * This is the default slotted content for the counter badge
6016
6107
  * If children are slotted, that will override the value returned
6108
+ *
6109
+ * @internal
6017
6110
  */
6018
6111
  setCount(): string | void;
6019
6112
  }
@@ -6190,53 +6283,68 @@ export declare const darkModeStylesheetBehavior: (styles: ElementStyles) => Matc
6190
6283
  */
6191
6284
  export declare class Dialog extends FASTElement {
6192
6285
  /**
6193
- * @public
6194
6286
  * The dialog element
6287
+ *
6288
+ * @public
6195
6289
  */
6196
6290
  dialog: HTMLDialogElement;
6197
6291
  /**
6198
- * @public
6199
6292
  * The ID of the element that describes the dialog
6293
+ *
6294
+ * @public
6200
6295
  */
6201
6296
  ariaDescribedby?: string;
6202
6297
  /**
6203
- * @public
6204
6298
  * The ID of the element that labels the dialog
6299
+ *
6300
+ * @public
6205
6301
  */
6206
6302
  ariaLabelledby?: string;
6207
6303
  /**
6304
+ * The label of the dialog
6305
+ *
6208
6306
  * @public
6307
+ */
6308
+ ariaLabel: string | null;
6309
+ /**
6209
6310
  * The type of the dialog modal
6311
+ *
6312
+ * @public
6210
6313
  */
6211
6314
  type: DialogType;
6212
6315
  protected typeChanged(prev: DialogType | undefined, next: DialogType | undefined): void;
6213
6316
  /** @internal */
6214
6317
  connectedCallback(): void;
6215
6318
  /**
6216
- * @public
6217
6319
  * Method to emit an event before the dialog's open state changes
6218
6320
  * HTML spec proposal: https://github.com/whatwg/html/issues/9733
6321
+ *
6322
+ * @public
6219
6323
  */
6220
6324
  emitBeforeToggle: () => void;
6221
6325
  /**
6222
- * @public
6223
6326
  * Method to emit an event after the dialog's open state changes
6224
6327
  * HTML spec proposal: https://github.com/whatwg/html/issues/9733
6328
+ *
6329
+ * @public
6225
6330
  */
6226
6331
  emitToggle: () => void;
6227
6332
  /**
6228
- * @public
6229
6333
  * Method to show the dialog
6334
+ *
6335
+ * @public
6230
6336
  */
6231
6337
  show(): void;
6232
6338
  /**
6233
- * @public
6234
6339
  * Method to hide the dialog
6340
+ *
6341
+ * @public
6235
6342
  */
6236
6343
  hide(): void;
6237
6344
  /**
6238
- * @public
6239
6345
  * Handles click events on the dialog overlay for light-dismiss
6346
+ *
6347
+ * @public
6240
6348
  * @param event - The click event
6241
6349
  * @returns boolean
6242
6350
  */
@@ -6472,20 +6580,23 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
6472
6580
  export declare class Drawer extends FASTElement {
6473
6581
  protected roleAttrObserver: MutationObserver;
6474
6582
  /**
6475
- * @public
6476
6583
  * Determines whether the drawer should be displayed as modal or non-modal
6477
6584
  * When rendered as a modal, an overlay is applied over the rest of the view.
6585
+ *
6586
+ * @public
6478
6587
  */
6479
6588
  type: DrawerType;
6480
6589
  protected typeChanged(): void;
6481
6590
  /**
6482
- * @public
6483
6591
  * The ID of the element that labels the drawer.
6592
+ *
6593
+ * @public
6484
6594
  */
6485
6595
  ariaLabelledby?: string;
6486
6596
  /**
6487
- * @public
6488
6597
  * The ID of the element that describes the drawer.
6598
+ *
6599
+ * @public
6489
6600
  */
6490
6601
  ariaDescribedby?: string;
6491
6602
  /**""
@@ -6501,8 +6612,9 @@ export declare class Drawer extends FASTElement {
6501
6612
  */
6502
6613
  size: DrawerSize;
6503
6614
  /**
6504
- * @public
6505
6615
  * The dialog element.
6616
+ *
6617
+ * @public
6506
6618
  */
6507
6619
  dialog: HTMLDialogElement;
6508
6620
  /** @internal */
@@ -6510,25 +6622,29 @@ export declare class Drawer extends FASTElement {
6510
6622
  /** @internal */
6511
6623
  disconnectedCallback(): void;
6512
6624
  /**
6513
- * @public
6514
6625
  * Method to emit an event after the dialog's open state changes
6515
6626
  * HTML spec proposal: https://github.com/whatwg/html/issues/9733
6627
+ *
6628
+ * @public
6516
6629
  */
6517
6630
  emitToggle: () => void;
6518
6631
  /**
6519
- * @public
6520
6632
  * Method to emit an event before the dialog's open state changes
6521
6633
  * HTML spec proposal: https://github.com/whatwg/html/issues/9733
6634
+ *
6635
+ * @public
6522
6636
  */
6523
6637
  emitBeforeToggle: () => void;
6524
6638
  /**
6525
- * @public
6526
6639
  * Method to show the drawer
6640
+ *
6641
+ * @public
6527
6642
  */
6528
6643
  show(): void;
6529
6644
  /**
6530
- * @public
6531
6645
  * Method to hide the drawer
6646
+ *
6647
+ * @public
6532
6648
  */
6533
6649
  hide(): void;
6534
6650
  /**
@@ -6539,8 +6655,9 @@ export declare class Drawer extends FASTElement {
6539
6655
  */
6540
6656
  clickHandler(event: Event): boolean;
6541
6657
  /**
6542
- * @public
6543
6658
  * Handles cancel events on the drawer.
6659
+ *
6660
+ * @public
6544
6661
  */
6545
6662
  cancelHandler(): void;
6546
6663
  protected observeRoleAttr(): void;
@@ -8610,8 +8727,9 @@ export declare class MessageBar extends FASTElement {
8610
8727
  */
8611
8728
  intent?: MessageBarIntent;
8612
8729
  /**
8613
- * @public
8614
8730
  * Method to emit a `dismiss` event when the message bar is dismissed
8731
+ *
8732
+ * @public
8615
8733
  */
8616
8734
  dismissMessageBar: () => void;
8617
8735
  }
@@ -8626,8 +8744,9 @@ export declare class MessageBar extends FASTElement {
8626
8744
  export declare const MessageBarDefinition: FASTElementDefinition<typeof MessageBar>;
8627
8745
 
8628
8746
  /**
8629
- * @public
8630
8747
  * The `intent` variations for the MessageBar component.
8748
+ *
8749
+ * @public
8631
8750
  */
8632
8751
  export declare const MessageBarIntent: {
8633
8752
  readonly success: "success";
@@ -8639,8 +8758,9 @@ export declare const MessageBarIntent: {
8639
8758
  export declare type MessageBarIntent = ValuesOf<typeof MessageBarIntent>;
8640
8759
 
8641
8760
  /**
8642
- * @public
8643
8761
  * The `layout` variations for the MessageBar component.
8762
+ *
8763
+ * @public
8644
8764
  */
8645
8765
  export declare const MessageBarLayout: {
8646
8766
  readonly multiline: "multiline";
@@ -8650,8 +8770,9 @@ export declare const MessageBarLayout: {
8650
8770
  export declare type MessageBarLayout = ValuesOf<typeof MessageBarLayout>;
8651
8771
 
8652
8772
  /**
8653
- * @public
8654
8773
  * The `shape` variations for the MessageBar component.
8774
+ *
8775
+ * @public
8655
8776
  */
8656
8777
  export declare const MessageBarShape: {
8657
8778
  readonly rounded: "rounded";
@@ -8685,14 +8806,20 @@ export declare class ProgressBar extends BaseProgressBar {
8685
8806
  /**
8686
8807
  * The thickness of the progress bar
8687
8808
  *
8688
- * @public
8809
+ * The thickness of the progress bar
8810
+ *
8689
8811
  * HTML Attribute: `thickness`
8812
+ *
8813
+ * @public
8690
8814
  */
8691
8815
  thickness?: ProgressBarThickness;
8692
8816
  /**
8693
8817
  * The shape of the progress bar
8694
- * @public
8818
+ * The shape of the progress bar
8819
+ *
8695
8820
  * HTML Attribute: `shape`
8821
+ *
8822
+ * @public
8696
8823
  */
8697
8824
  shape?: ProgressBarShape;
8698
8825
  }
@@ -9288,7 +9415,7 @@ export declare const roleForMenuItem: {
9288
9415
  * as each entry’s value is either a string or a number.
9289
9416
  * @param node - The node to set the theme on, defaults to `document` for
9290
9417
  * setting global theme.
9291
- * @internal
9418
+ * @public
9292
9419
  */
9293
9420
  export declare function setTheme(theme: Theme | null, node?: Document | HTMLElement): void;
9294
9421
 
@@ -10332,167 +10459,6 @@ export declare const TablistTemplate: ViewTemplate<Tablist, any>;
10332
10459
  */
10333
10460
  export declare type TabOptions = StartEndOptions<Tab>;
10334
10461
 
10335
- /**
10336
- * @deprecated - Use tablist instead
10337
- *
10338
- * @tag fluent-tab-panel
10339
- */
10340
- export declare class TabPanel extends FASTElement {
10341
- }
10342
-
10343
- /**
10344
- * @deprecated - Use tablist instead
10345
- */
10346
- export declare const TabPanelDefinition: FASTElementDefinition<typeof TabPanel>;
10347
-
10348
- export declare const TabPanelStyles: ElementStyles;
10349
-
10350
- export declare const TabPanelTemplate: ElementViewTemplate<TabPanel, any>;
10351
-
10352
- /**
10353
- * @deprecated - Use tablist instead
10354
- *
10355
- * @tag fluent-tabs
10356
- */
10357
- export declare class Tabs extends BaseTabs {
10358
- /**
10359
- * activeTabData
10360
- * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
10361
- */
10362
- private activeTabData;
10363
- /**
10364
- * previousActiveTabData
10365
- * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
10366
- */
10367
- private previousActiveTabData;
10368
- /**
10369
- * activeTabOffset
10370
- * Used to position the active indicator for animations of the active indicator on active tab changes.
10371
- */
10372
- private activeTabOffset;
10373
- /**
10374
- * activeTabScale
10375
- * Used to scale the tab active indicator up or down as animations of the active indicator occur.
10376
- */
10377
- private activeTabScale;
10378
- /**
10379
- * styles
10380
- * used in the class for storing the css variables required for animations
10381
- */
10382
- private styles;
10383
- /**
10384
- * appearance
10385
- * There are two modes of appearance: transparent and subtle.
10386
- */
10387
- appearance?: TabsAppearance;
10388
- /**
10389
- * disabled
10390
- * Used 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."
10391
- */
10392
- disabled?: boolean;
10393
- /**
10394
- * size
10395
- * defaults to medium.
10396
- * Used to set the size of all the tab controls, which effects text size and margins. Three sizes: small, medium and large.
10397
- */
10398
- size?: TabsSize;
10399
- /**
10400
- * calculateAnimationProperties
10401
- *
10402
- * Recalculates the active tab offset and scale.
10403
- * These values will be applied to css variables that control the tab active indicator position animations
10404
- */
10405
- private calculateAnimationProperties;
10406
- /**
10407
- * getSelectedTabPosition - gets the x or y coordinates of the tab
10408
- */
10409
- private getTabPosition;
10410
- /**
10411
- * getSelectedTabScale - gets the scale of the tab
10412
- */
10413
- private getTabScale;
10414
- /**
10415
- * Calculates and applies updated values to CSS variables.
10416
- *
10417
- * @param tab - the tab element to apply the updated values to
10418
- * @internal
10419
- */
10420
- private applyUpdatedCSSValues;
10421
- /**
10422
- * Runs through all the operations required for setting the tab active indicator to its starting location, ending
10423
- * location, and applying the animated css class to the tab.
10424
- *
10425
- * @param tab - the tab element to apply the updated values to
10426
- * @internal
10427
- */
10428
- private animationLoop;
10429
- /**
10430
- * Gets the position data for a tab element relative to its parent
10431
- * @param tab - The tab element to get position data for
10432
- * @returns The position data for the tab
10433
- */
10434
- private getTabPositionData;
10435
- /**
10436
- * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
10437
- * tab indicator.
10438
- *
10439
- * @internal
10440
- */
10441
- private setTabData;
10442
- private setTabOffsetCSSVar;
10443
- private setTabScaleCSSVar;
10444
- activeidChanged(oldValue: string, newValue: string): void;
10445
- tabsChanged(): void;
10446
- }
10447
-
10448
- export declare interface Tabs extends StartEnd {
10449
- }
10450
-
10451
- export declare const TabsAppearance: {
10452
- readonly subtle: "subtle";
10453
- readonly transparent: "transparent";
10454
- };
10455
-
10456
- export declare type TabsAppearance = ValuesOf<typeof TabsAppearance>;
10457
-
10458
- /**
10459
- * @deprecated - Use tablist instead
10460
- */
10461
- export declare const TabsDefinition: FASTElementDefinition<typeof Tabs>;
10462
-
10463
- /**
10464
- * Tabs option configuration options
10465
- * @public
10466
- */
10467
- export declare type TabsOptions = StartEndOptions<Tabs>;
10468
-
10469
- /**
10470
- * The orientation of the component
10471
- * @public
10472
- */
10473
- export declare const TabsOrientation: {
10474
- readonly horizontal: "horizontal";
10475
- readonly vertical: "vertical";
10476
- };
10477
-
10478
- /**
10479
- * The types for the Tabs component
10480
- * @public
10481
- */
10482
- export declare type TabsOrientation = ValuesOf<typeof TabsOrientation>;
10483
-
10484
- export declare const TabsSize: {
10485
- readonly small: "small";
10486
- readonly medium: "medium";
10487
- readonly large: "large";
10488
- };
10489
-
10490
- export declare type TabsSize = ValuesOf<typeof TabsSize>;
10491
-
10492
- export declare const TabsStyles: ElementStyles;
10493
-
10494
- export declare const TabsTemplate: ElementViewTemplate<Tabs, any>;
10495
-
10496
10462
  export declare const TabStyles: ElementStyles;
10497
10463
 
10498
10464
  export declare const TabTemplate: ElementViewTemplate<Tab, any>;
@@ -10925,7 +10891,7 @@ export declare type TextWeight = ValuesOf<typeof TextWeight>;
10925
10891
  /**
10926
10892
  * Not using the `Theme` type from `@fluentui/tokens` package to allow custom
10927
10893
  * tokens to be added.
10928
- * @internal
10894
+ * @public
10929
10895
  */
10930
10896
  export declare type Theme = Record<string, string | number>;
10931
10897
 
@@ -11197,15 +11163,21 @@ export declare const TooltipTemplate: ViewTemplate<Tooltip, any>;
11197
11163
  export declare class Tree extends BaseTree {
11198
11164
  /**
11199
11165
  * The size of the tree item element
11200
- * @public
11166
+ * The size of the tree item element
11167
+ *
11201
11168
  * HTML Attribute: size
11169
+ *
11170
+ * @public
11202
11171
  */
11203
11172
  size: TreeItemSize;
11204
11173
  protected sizeChanged(): void;
11205
11174
  /**
11206
11175
  * The appearance variants of the tree item element
11207
- * @public
11176
+ * The appearance variants of the tree item element
11177
+ *
11208
11178
  * HTML Attribute: appearance
11179
+ *
11180
+ * @public
11209
11181
  */
11210
11182
  appearance: TreeItemAppearance;
11211
11183
  protected appearanceChanged(): void;