@fluentui/web-components 3.0.0-beta.21 → 3.0.0-beta.23

package/dist/web-components.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="web" />
-
 import type { Constructable } from '@microsoft/fast-element';
 import { CSSDirective } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
@@ -73,7 +71,7 @@ export declare class Accordion extends FASTElement {
 export declare const accordionDefinition: FASTElementDefinition<typeof Accordion>;
 
 /**
- * Expand mode for {@link FASTAccordion}
+ * Expand mode for {@link Accordion}
  * @public
  */
 export declare const AccordionExpandMode: {
@@ -82,7 +80,7 @@ export declare const AccordionExpandMode: {
 };
 
 /**
- * Type for the {@link FASTAccordion} Expand Mode
+ * Type for the {@link Accordion} Expand Mode
  * @public
  */
 export declare type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
@@ -109,7 +107,6 @@ export declare class AccordionItem extends FASTElement {
      * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
      * heading element.
      *
-     * @defaultValue 2
      * @public
      * @remarks
      * HTML attribute: heading-level
@@ -143,7 +140,6 @@ export declare class AccordionItem extends FASTElement {
      * Defines accordion header font size.
      *
      * @public
-     * @default 'medium'
      * @remarks
      * HTML Attribute: size
      */
@@ -160,9 +156,8 @@ export declare class AccordionItem extends FASTElement {
      * Sets expand and collapsed icon position.
      *
      * @public
-     * @default 'start'
      * @remarks
-     * HTML Attribute: expandIconPosition
+     * HTML Attribute: expand-icon-position
      */
     expandIconPosition?: AccordionItemExpandIconPosition;
     /**
@@ -1111,8 +1106,8 @@ declare class BaseProgress extends FASTElement {
 }
 
 /**
+ * A Tabs component that wraps a collection of tab and tab panel elements.
  *
- * @class TabList component
  * @public
  */
 declare class BaseTabs extends FASTElement {
@@ -1199,16 +1194,40 @@ declare class BaseTabs extends FASTElement {
     connectedCallback(): void;
 }
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
+ * @public
+ */
 export declare const borderRadiusCircular = "var(--borderRadiusCircular)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusLarge | `borderRadiusLarge`} design token.
+ * @public
+ */
 export declare const borderRadiusLarge = "var(--borderRadiusLarge)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusMedium | `borderRadiusMedium`} design token.
+ * @public
+ */
 export declare const borderRadiusMedium = "var(--borderRadiusMedium)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusNone | `borderRadiusNone`} design token.
+ * @public
+ */
 export declare const borderRadiusNone = "var(--borderRadiusNone)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusSmall | `borderRadiusSmall`} design token.
+ * @public
+ */
 export declare const borderRadiusSmall = "var(--borderRadiusSmall)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusXLarge | `borderRadiusXLarge`} design token.
+ * @public
+ */
 export declare const borderRadiusXLarge = "var(--borderRadiusXLarge)";
 
 /**
@@ -1634,7 +1653,6 @@ export declare class Checkbox extends FormAssociatedCheckbox {
      * Sets shape of the checkbox.
      *
      * @public
-     * @default 'square'
      * @remarks
      * HTML Attribute: shape
      */
@@ -1643,7 +1661,6 @@ export declare class Checkbox extends FormAssociatedCheckbox {
      * Sets size of the checkbox.
      *
      * @public
-     * @default 'medium'
      * @remarks
      * HTML Attribute: size
      */
@@ -1652,7 +1669,6 @@ export declare class Checkbox extends FormAssociatedCheckbox {
      * Sets position of the label relative to the input
      *
      * @public
-     * @default 'after'
      * @remarks
      * HTML Attribute: label-position
      */
@@ -1703,12 +1719,12 @@ export declare const CheckboxDefinition: FASTElementDefinition<typeof Checkbox>;
  * Checkbox label position
  * @public
  */
-export declare const CheckboxLabelPosition: {
+declare const CheckboxLabelPosition: {
     readonly before: "before";
     readonly after: "after";
 };
 
-export declare type CheckboxLabelPosition = ValuesOf<typeof CheckboxLabelPosition>;
+declare type CheckboxLabelPosition = ValuesOf<typeof CheckboxLabelPosition>;
 
 /**
  * Checkbox configuration options
@@ -1753,700 +1769,2092 @@ export declare const CheckboxStyles: ElementStyles;
  */
 export declare const CheckboxTemplate: ElementViewTemplate<Checkbox>;
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBackgroundOverlay | `colorBackgroundOverlay`} design token.
+ * @public
+ */
 export declare const colorBackgroundOverlay = "var(--colorBackgroundOverlay)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground | `colorBrandBackground`} design token.
+ * @public
+ */
 export declare const colorBrandBackground = "var(--colorBrandBackground)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground2 | `colorBrandBackground2`} design token.
+ * @public
+ */
 export declare const colorBrandBackground2 = "var(--colorBrandBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground2Hover | `colorBrandBackground2Hover`} design token.
+ * @public
+ */
 export declare const colorBrandBackground2Hover = "var(--colorBrandBackground2Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground2Pressed | `colorBrandBackground2Pressed`} design token.
+ * @public
+ */
 export declare const colorBrandBackground2Pressed = "var(--colorBrandBackground2Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground3Static | `colorBrandBackground3Static`} design token.
+ * @public
+ */
 export declare const colorBrandBackground3Static = "var(--colorBrandBackground3Static)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground4Static | `colorBrandBackground4Static`} design token.
+ * @public
+ */
 export declare const colorBrandBackground4Static = "var(--colorBrandBackground4Static)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundHover | `colorBrandBackgroundHover`} design token.
+ * @public
+ */
 export declare const colorBrandBackgroundHover = "var(--colorBrandBackgroundHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundInverted | `colorBrandBackgroundInverted`} design token.
+ * @public
+ */
 export declare const colorBrandBackgroundInverted = "var(--colorBrandBackgroundInverted)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundInvertedHover | `colorBrandBackgroundInvertedHover`} design token.
+ * @public
+ */
 export declare const colorBrandBackgroundInvertedHover = "var(--colorBrandBackgroundInvertedHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundInvertedPressed | `colorBrandBackgroundInvertedPressed`} design token.
+ * @public
+ */
 export declare const colorBrandBackgroundInvertedPressed = "var(--colorBrandBackgroundInvertedPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundInvertedSelected | `colorBrandBackgroundInvertedSelected`} design token.
+ * @public
+ */
 export declare const colorBrandBackgroundInvertedSelected = "var(--colorBrandBackgroundInvertedSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundPressed | `colorBrandBackgroundPressed`} design token.
+ * @public
+ */
 export declare const colorBrandBackgroundPressed = "var(--colorBrandBackgroundPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundSelected | `colorBrandBackgroundSelected`} design token.
+ * @public
+ */
 export declare const colorBrandBackgroundSelected = "var(--colorBrandBackgroundSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundStatic | `colorBrandBackgroundStatic`} design token.
+ * @public
+ */
 export declare const colorBrandBackgroundStatic = "var(--colorBrandBackgroundStatic)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground1 | `colorBrandForeground1`} design token.
+ * @public
+ */
 export declare const colorBrandForeground1 = "var(--colorBrandForeground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground2 | `colorBrandForeground2`} design token.
+ * @public
+ */
 export declare const colorBrandForeground2 = "var(--colorBrandForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground2Hover | `colorBrandForeground2Hover`} design token.
+ * @public
+ */
 export declare const colorBrandForeground2Hover = "var(--colorBrandForeground2Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground2Pressed | `colorBrandForeground2Pressed`} design token.
+ * @public
+ */
 export declare const colorBrandForeground2Pressed = "var(--colorBrandForeground2Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundInverted | `colorBrandForegroundInverted`} design token.
+ * @public
+ */
 export declare const colorBrandForegroundInverted = "var(--colorBrandForegroundInverted)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundInvertedHover | `colorBrandForegroundInvertedHover`} design token.
+ * @public
+ */
 export declare const colorBrandForegroundInvertedHover = "var(--colorBrandForegroundInvertedHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundInvertedPressed | `colorBrandForegroundInvertedPressed`} design token.
+ * @public
+ */
 export declare const colorBrandForegroundInvertedPressed = "var(--colorBrandForegroundInvertedPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLink | `colorBrandForegroundLink`} design token.
+ * @public
+ */
 export declare const colorBrandForegroundLink = "var(--colorBrandForegroundLink)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkHover | `colorBrandForegroundLinkHover`} design token.
+ * @public
+ */
 export declare const colorBrandForegroundLinkHover = "var(--colorBrandForegroundLinkHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkPressed | `colorBrandForegroundLinkPressed`} design token.
+ * @public
+ */
 export declare const colorBrandForegroundLinkPressed = "var(--colorBrandForegroundLinkPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkSelected | `colorBrandForegroundLinkSelected`} design token.
+ * @public
+ */
 export declare const colorBrandForegroundLinkSelected = "var(--colorBrandForegroundLinkSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundOnLight | `colorBrandForegroundOnLight`} design token.
+ * @public
+ */
 export declare const colorBrandForegroundOnLight = "var(--colorBrandForegroundOnLight)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundOnLightHover | `colorBrandForegroundOnLightHover`} design token.
+ * @public
+ */
 export declare const colorBrandForegroundOnLightHover = "var(--colorBrandForegroundOnLightHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundOnLightPressed | `colorBrandForegroundOnLightPressed`} design token.
+ * @public
+ */
 export declare const colorBrandForegroundOnLightPressed = "var(--colorBrandForegroundOnLightPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundOnLightSelected | `colorBrandForegroundOnLightSelected`} design token.
+ * @public
+ */
 export declare const colorBrandForegroundOnLightSelected = "var(--colorBrandForegroundOnLightSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandShadowAmbient | `colorBrandShadowAmbient`} design token.
+ * @public
+ */
 export declare const colorBrandShadowAmbient = "var(--colorBrandShadowAmbient)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandShadowKey | `colorBrandShadowKey`} design token.
+ * @public
+ */
 export declare const colorBrandShadowKey = "var(--colorBrandShadowKey)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke1 | `colorBrandStroke1`} design token.
+ * @public
+ */
 export declare const colorBrandStroke1 = "var(--colorBrandStroke1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2 | `colorBrandStroke2`} design token.
+ * @public
+ */
 export declare const colorBrandStroke2 = "var(--colorBrandStroke2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2Contrast | `colorBrandStroke2Contrast`} design token.
+ * @public
+ */
 export declare const colorBrandStroke2Contrast = "var(--colorBrandStroke2Contrast)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2Hover | `colorBrandStroke2Hover`} design token.
+ * @public
+ */
 export declare const colorBrandStroke2Hover = "var(--colorBrandStroke2Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2Pressed | `colorBrandStroke2Pressed`} design token.
+ * @public
+ */
 export declare const colorBrandStroke2Pressed = "var(--colorBrandStroke2Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandBackground | `colorCompoundBrandBackground`} design token.
+ * @public
+ */
 export declare const colorCompoundBrandBackground = "var(--colorCompoundBrandBackground)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandBackgroundHover | `colorCompoundBrandBackgroundHover`} design token.
+ * @public
+ */
 export declare const colorCompoundBrandBackgroundHover = "var(--colorCompoundBrandBackgroundHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandBackgroundPressed | `colorCompoundBrandBackgroundPressed`} design token.
+ * @public
+ */
 export declare const colorCompoundBrandBackgroundPressed = "var(--colorCompoundBrandBackgroundPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandForeground1 | `colorCompoundBrandForeground1`} design token.
+ * @public
+ */
 export declare const colorCompoundBrandForeground1 = "var(--colorCompoundBrandForeground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandForeground1Hover | `colorCompoundBrandForeground1Hover`} design token.
+ * @public
+ */
 export declare const colorCompoundBrandForeground1Hover = "var(--colorCompoundBrandForeground1Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandForeground1Pressed | `colorCompoundBrandForeground1Pressed`} design token.
+ * @public
+ */
 export declare const colorCompoundBrandForeground1Pressed = "var(--colorCompoundBrandForeground1Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStroke | `colorCompoundBrandStroke`} design token.
+ * @public
+ */
 export declare const colorCompoundBrandStroke = "var(--colorCompoundBrandStroke)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStrokeHover | `colorCompoundBrandStrokeHover`} design token.
+ * @public
+ */
 export declare const colorCompoundBrandStrokeHover = "var(--colorCompoundBrandStrokeHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStrokePressed | `colorCompoundBrandStrokePressed`} design token.
+ * @public
+ */
 export declare const colorCompoundBrandStrokePressed = "var(--colorCompoundBrandStrokePressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground1 | `colorNeutralBackground1`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground1 = "var(--colorNeutralBackground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground1Hover | `colorNeutralBackground1Hover`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground1Hover = "var(--colorNeutralBackground1Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground1Pressed | `colorNeutralBackground1Pressed`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground1Pressed = "var(--colorNeutralBackground1Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground1Selected | `colorNeutralBackground1Selected`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground1Selected = "var(--colorNeutralBackground1Selected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground2 | `colorNeutralBackground2`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground2 = "var(--colorNeutralBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground2Hover | `colorNeutralBackground2Hover`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground2Hover = "var(--colorNeutralBackground2Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground2Pressed | `colorNeutralBackground2Pressed`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground2Pressed = "var(--colorNeutralBackground2Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground2Selected | `colorNeutralBackground2Selected`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground2Selected = "var(--colorNeutralBackground2Selected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground3 | `colorNeutralBackground3`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground3 = "var(--colorNeutralBackground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground3Hover | `colorNeutralBackground3Hover`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground3Hover = "var(--colorNeutralBackground3Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground3Pressed | `colorNeutralBackground3Pressed`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground3Pressed = "var(--colorNeutralBackground3Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground3Selected | `colorNeutralBackground3Selected`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground3Selected = "var(--colorNeutralBackground3Selected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground4 | `colorNeutralBackground4`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground4 = "var(--colorNeutralBackground4)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground4Hover | `colorNeutralBackground4Hover`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground4Hover = "var(--colorNeutralBackground4Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground4Pressed | `colorNeutralBackground4Pressed`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground4Pressed = "var(--colorNeutralBackground4Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground4Selected | `colorNeutralBackground4Selected`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground4Selected = "var(--colorNeutralBackground4Selected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground5 | `colorNeutralBackground5`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground5 = "var(--colorNeutralBackground5)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground5Hover | `colorNeutralBackground5Hover`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground5Hover = "var(--colorNeutralBackground5Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground5Pressed | `colorNeutralBackground5Pressed`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground5Pressed = "var(--colorNeutralBackground5Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground5Selected | `colorNeutralBackground5Selected`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground5Selected = "var(--colorNeutralBackground5Selected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground6 | `colorNeutralBackground6`} design token.
+ * @public
+ */
 export declare const colorNeutralBackground6 = "var(--colorNeutralBackground6)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundAlpha | `colorNeutralBackgroundAlpha`} design token.
+ * @public
+ */
 export declare const colorNeutralBackgroundAlpha = "var(--colorNeutralBackgroundAlpha)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundAlpha2 | `colorNeutralBackgroundAlpha2`} design token.
+ * @public
+ */
 export declare const colorNeutralBackgroundAlpha2 = "var(--colorNeutralBackgroundAlpha2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundDisabled | `colorNeutralBackgroundDisabled`} design token.
+ * @public
+ */
 export declare const colorNeutralBackgroundDisabled = "var(--colorNeutralBackgroundDisabled)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInverted | `colorNeutralBackgroundInverted`} design token.
+ * @public
+ */
 export declare const colorNeutralBackgroundInverted = "var(--colorNeutralBackgroundInverted)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedDisabled | `colorNeutralBackgroundInvertedDisabled`} design token.
+ * @public
+ */
 export declare const colorNeutralBackgroundInvertedDisabled = "var(--colorNeutralBackgroundInvertedDisabled)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundStatic | `colorNeutralBackgroundStatic`} design token.
+ * @public
+ */
 export declare const colorNeutralBackgroundStatic = "var(--colorNeutralBackgroundStatic)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralCardBackground | `colorNeutralCardBackground`} design token.
+ * @public
+ */
 export declare const colorNeutralCardBackground = "var(--colorNeutralCardBackground)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralCardBackgroundDisabled | `colorNeutralCardBackgroundDisabled`} design token.
+ * @public
+ */
 export declare const colorNeutralCardBackgroundDisabled = "var(--colorNeutralCardBackgroundDisabled)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralCardBackgroundHover | `colorNeutralCardBackgroundHover`} design token.
+ * @public
+ */
 export declare const colorNeutralCardBackgroundHover = "var(--colorNeutralCardBackgroundHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralCardBackgroundPressed | `colorNeutralCardBackgroundPressed`} design token.
+ * @public
+ */
 export declare const colorNeutralCardBackgroundPressed = "var(--colorNeutralCardBackgroundPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralCardBackgroundSelected | `colorNeutralCardBackgroundSelected`} design token.
+ * @public
+ */
 export declare const colorNeutralCardBackgroundSelected = "var(--colorNeutralCardBackgroundSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1 | `colorNeutralForeground1`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground1 = "var(--colorNeutralForeground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1Hover | `colorNeutralForeground1Hover`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground1Hover = "var(--colorNeutralForeground1Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1Pressed | `colorNeutralForeground1Pressed`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground1Pressed = "var(--colorNeutralForeground1Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1Selected | `colorNeutralForeground1Selected`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground1Selected = "var(--colorNeutralForeground1Selected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1Static | `colorNeutralForeground1Static`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground1Static = "var(--colorNeutralForeground1Static)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2 | `colorNeutralForeground2`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground2 = "var(--colorNeutralForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandHover | `colorNeutralForeground2BrandHover`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground2BrandHover = "var(--colorNeutralForeground2BrandHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandPressed | `colorNeutralForeground2BrandPressed`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground2BrandPressed = "var(--colorNeutralForeground2BrandPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandSelected | `colorNeutralForeground2BrandSelected`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground2BrandSelected = "var(--colorNeutralForeground2BrandSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Hover | `colorNeutralForeground2Hover`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground2Hover = "var(--colorNeutralForeground2Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Link | `colorNeutralForeground2Link`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground2Link = "var(--colorNeutralForeground2Link)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2LinkHover | `colorNeutralForeground2LinkHover`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground2LinkHover = "var(--colorNeutralForeground2LinkHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2LinkPressed | `colorNeutralForeground2LinkPressed`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground2LinkPressed = "var(--colorNeutralForeground2LinkPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2LinkSelected | `colorNeutralForeground2LinkSelected`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground2LinkSelected = "var(--colorNeutralForeground2LinkSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Pressed | `colorNeutralForeground2Pressed`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground2Pressed = "var(--colorNeutralForeground2Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Selected | `colorNeutralForeground2Selected`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground2Selected = "var(--colorNeutralForeground2Selected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3 | `colorNeutralForeground3`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground3 = "var(--colorNeutralForeground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3BrandHover | `colorNeutralForeground3BrandHover`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground3BrandHover = "var(--colorNeutralForeground3BrandHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3BrandPressed | `colorNeutralForeground3BrandPressed`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground3BrandPressed = "var(--colorNeutralForeground3BrandPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3BrandSelected | `colorNeutralForeground3BrandSelected`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground3BrandSelected = "var(--colorNeutralForeground3BrandSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3Hover | `colorNeutralForeground3Hover`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground3Hover = "var(--colorNeutralForeground3Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3Pressed | `colorNeutralForeground3Pressed`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground3Pressed = "var(--colorNeutralForeground3Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3Selected | `colorNeutralForeground3Selected`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground3Selected = "var(--colorNeutralForeground3Selected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground4 | `colorNeutralForeground4`} design token.
+ * @public
+ */
 export declare const colorNeutralForeground4 = "var(--colorNeutralForeground4)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundDisabled | `colorNeutralForegroundDisabled`} design token.
+ * @public
+ */
 export declare const colorNeutralForegroundDisabled = "var(--colorNeutralForegroundDisabled)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInverted | `colorNeutralForegroundInverted`} design token.
+ * @public
+ */
 export declare const colorNeutralForegroundInverted = "var(--colorNeutralForegroundInverted)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInverted2 | `colorNeutralForegroundInverted2`} design token.
+ * @public
+ */
 export declare const colorNeutralForegroundInverted2 = "var(--colorNeutralForegroundInverted2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedDisabled | `colorNeutralForegroundInvertedDisabled`} design token.
+ * @public
+ */
 export declare const colorNeutralForegroundInvertedDisabled = "var(--colorNeutralForegroundInvertedDisabled)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedHover | `colorNeutralForegroundInvertedHover`} design token.
+ * @public
+ */
 export declare const colorNeutralForegroundInvertedHover = "var(--colorNeutralForegroundInvertedHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedLink | `colorNeutralForegroundInvertedLink`} design token.
+ * @public
+ */
 export declare const colorNeutralForegroundInvertedLink = "var(--colorNeutralForegroundInvertedLink)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedLinkHover | `colorNeutralForegroundInvertedLinkHover`} design token.
+ * @public
+ */
 export declare const colorNeutralForegroundInvertedLinkHover = "var(--colorNeutralForegroundInvertedLinkHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedLinkPressed | `colorNeutralForegroundInvertedLinkPressed`} design token.
+ * @public
+ */
 export declare const colorNeutralForegroundInvertedLinkPressed = "var(--colorNeutralForegroundInvertedLinkPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedLinkSelected | `colorNeutralForegroundInvertedLinkSelected`} design token.
+ * @public
+ */
 export declare const colorNeutralForegroundInvertedLinkSelected = "var(--colorNeutralForegroundInvertedLinkSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedPressed | `colorNeutralForegroundInvertedPressed`} design token.
+ * @public
+ */
 export declare const colorNeutralForegroundInvertedPressed = "var(--colorNeutralForegroundInvertedPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedSelected | `colorNeutralForegroundInvertedSelected`} design token.
+ * @public
+ */
 export declare const colorNeutralForegroundInvertedSelected = "var(--colorNeutralForegroundInvertedSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundOnBrand | `colorNeutralForegroundOnBrand`} design token.
+ * @public
+ */
 export declare const colorNeutralForegroundOnBrand = "var(--colorNeutralForegroundOnBrand)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundStaticInverted | `colorNeutralForegroundStaticInverted`} design token.
+ * @public
+ */
 export declare const colorNeutralForegroundStaticInverted = "var(--colorNeutralForegroundStaticInverted)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralShadowAmbient | `colorNeutralShadowAmbient`} design token.
+ * @public
+ */
 export declare const colorNeutralShadowAmbient = "var(--colorNeutralShadowAmbient)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralShadowAmbientDarker | `colorNeutralShadowAmbientDarker`} design token.
+ * @public
+ */
 export declare const colorNeutralShadowAmbientDarker = "var(--colorNeutralShadowAmbientDarker)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralShadowAmbientLighter | `colorNeutralShadowAmbientLighter`} design token.
+ * @public
+ */
 export declare const colorNeutralShadowAmbientLighter = "var(--colorNeutralShadowAmbientLighter)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralShadowKey | `colorNeutralShadowKey`} design token.
+ * @public
+ */
 export declare const colorNeutralShadowKey = "var(--colorNeutralShadowKey)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralShadowKeyDarker | `colorNeutralShadowKeyDarker`} design token.
+ * @public
+ */
 export declare const colorNeutralShadowKeyDarker = "var(--colorNeutralShadowKeyDarker)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralShadowKeyLighter | `colorNeutralShadowKeyLighter`} design token.
+ * @public
+ */
 export declare const colorNeutralShadowKeyLighter = "var(--colorNeutralShadowKeyLighter)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStencil1 | `colorNeutralStencil1`} design token.
+ * @public
+ */
 export declare const colorNeutralStencil1 = "var(--colorNeutralStencil1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStencil1Alpha | `colorNeutralStencil1Alpha`} design token.
+ * @public
+ */
 export declare const colorNeutralStencil1Alpha = "var(--colorNeutralStencil1Alpha)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStencil2 | `colorNeutralStencil2`} design token.
+ * @public
+ */
 export declare const colorNeutralStencil2 = "var(--colorNeutralStencil2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStencil2Alpha | `colorNeutralStencil2Alpha`} design token.
+ * @public
+ */
 export declare const colorNeutralStencil2Alpha = "var(--colorNeutralStencil2Alpha)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1 | `colorNeutralStroke1`} design token.
+ * @public
+ */
 export declare const colorNeutralStroke1 = "var(--colorNeutralStroke1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Hover | `colorNeutralStroke1Hover`} design token.
+ * @public
+ */
 export declare const colorNeutralStroke1Hover = "var(--colorNeutralStroke1Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Pressed | `colorNeutralStroke1Pressed`} design token.
+ * @public
+ */
 export declare const colorNeutralStroke1Pressed = "var(--colorNeutralStroke1Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Selected | `colorNeutralStroke1Selected`} design token.
+ * @public
+ */
 export declare const colorNeutralStroke1Selected = "var(--colorNeutralStroke1Selected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke2 | `colorNeutralStroke2`} design token.
+ * @public
+ */
 export declare const colorNeutralStroke2 = "var(--colorNeutralStroke2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke3 | `colorNeutralStroke3`} design token.
+ * @public
+ */
 export declare const colorNeutralStroke3 = "var(--colorNeutralStroke3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessible | `colorNeutralStrokeAccessible`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeAccessible = "var(--colorNeutralStrokeAccessible)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessibleHover | `colorNeutralStrokeAccessibleHover`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeAccessibleHover = "var(--colorNeutralStrokeAccessibleHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessiblePressed | `colorNeutralStrokeAccessiblePressed`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeAccessiblePressed = "var(--colorNeutralStrokeAccessiblePressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessibleSelected | `colorNeutralStrokeAccessibleSelected`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeAccessibleSelected = "var(--colorNeutralStrokeAccessibleSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAlpha | `colorNeutralStrokeAlpha`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeAlpha = "var(--colorNeutralStrokeAlpha)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAlpha2 | `colorNeutralStrokeAlpha2`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeAlpha2 = "var(--colorNeutralStrokeAlpha2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeDisabled | `colorNeutralStrokeDisabled`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeDisabled = "var(--colorNeutralStrokeDisabled)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeInvertedDisabled | `colorNeutralStrokeInvertedDisabled`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeInvertedDisabled = "var(--colorNeutralStrokeInvertedDisabled)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeOnBrand | `colorNeutralStrokeOnBrand`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeOnBrand = "var(--colorNeutralStrokeOnBrand)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeOnBrand2 | `colorNeutralStrokeOnBrand2`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeOnBrand2 = "var(--colorNeutralStrokeOnBrand2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeOnBrand2Hover | `colorNeutralStrokeOnBrand2Hover`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeOnBrand2Hover = "var(--colorNeutralStrokeOnBrand2Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeOnBrand2Pressed | `colorNeutralStrokeOnBrand2Pressed`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeOnBrand2Pressed = "var(--colorNeutralStrokeOnBrand2Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeOnBrand2Selected | `colorNeutralStrokeOnBrand2Selected`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeOnBrand2Selected = "var(--colorNeutralStrokeOnBrand2Selected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeSubtle | `colorNeutralStrokeSubtle`} design token.
+ * @public
+ */
 export declare const colorNeutralStrokeSubtle = "var(--colorNeutralStrokeSubtle)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteAnchorBackground2 | `colorPaletteAnchorBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteAnchorBackground2 = "var(--colorPaletteAnchorBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteAnchorBorderActive | `colorPaletteAnchorBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteAnchorBorderActive = "var(--colorPaletteAnchorBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteAnchorForeground2 | `colorPaletteAnchorForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteAnchorForeground2 = "var(--colorPaletteAnchorForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBeigeBackground2 | `colorPaletteBeigeBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteBeigeBackground2 = "var(--colorPaletteBeigeBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBeigeBorderActive | `colorPaletteBeigeBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteBeigeBorderActive = "var(--colorPaletteBeigeBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBeigeForeground2 | `colorPaletteBeigeForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteBeigeForeground2 = "var(--colorPaletteBeigeForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryBackground1 | `colorPaletteBerryBackground1`} design token.
+ * @public
+ */
 export declare const colorPaletteBerryBackground1 = "var(--colorPaletteBerryBackground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryBackground2 | `colorPaletteBerryBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteBerryBackground2 = "var(--colorPaletteBerryBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryBackground3 | `colorPaletteBerryBackground3`} design token.
+ * @public
+ */
 export declare const colorPaletteBerryBackground3 = "var(--colorPaletteBerryBackground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryBorder1 | `colorPaletteBerryBorder1`} design token.
+ * @public
+ */
 export declare const colorPaletteBerryBorder1 = "var(--colorPaletteBerryBorder1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryBorder2 | `colorPaletteBerryBorder2`} design token.
+ * @public
+ */
 export declare const colorPaletteBerryBorder2 = "var(--colorPaletteBerryBorder2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryBorderActive | `colorPaletteBerryBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteBerryBorderActive = "var(--colorPaletteBerryBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryForeground1 | `colorPaletteBerryForeground1`} design token.
+ * @public
+ */
 export declare const colorPaletteBerryForeground1 = "var(--colorPaletteBerryForeground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryForeground2 | `colorPaletteBerryForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteBerryForeground2 = "var(--colorPaletteBerryForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryForeground3 | `colorPaletteBerryForeground3`} design token.
+ * @public
+ */
 export declare const colorPaletteBerryForeground3 = "var(--colorPaletteBerryForeground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBlueBackground2 | `colorPaletteBlueBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteBlueBackground2 = "var(--colorPaletteBlueBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBlueBorderActive | `colorPaletteBlueBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteBlueBorderActive = "var(--colorPaletteBlueBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBlueForeground2 | `colorPaletteBlueForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteBlueForeground2 = "var(--colorPaletteBlueForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBrassBackground2 | `colorPaletteBrassBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteBrassBackground2 = "var(--colorPaletteBrassBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBrassBorderActive | `colorPaletteBrassBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteBrassBorderActive = "var(--colorPaletteBrassBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBrassForeground2 | `colorPaletteBrassForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteBrassForeground2 = "var(--colorPaletteBrassForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBrownBackground2 | `colorPaletteBrownBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteBrownBackground2 = "var(--colorPaletteBrownBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBrownBorderActive | `colorPaletteBrownBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteBrownBorderActive = "var(--colorPaletteBrownBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBrownForeground2 | `colorPaletteBrownForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteBrownForeground2 = "var(--colorPaletteBrownForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteCornflowerBackground2 | `colorPaletteCornflowerBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteCornflowerBackground2 = "var(--colorPaletteCornflowerBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteCornflowerBorderActive | `colorPaletteCornflowerBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteCornflowerBorderActive = "var(--colorPaletteCornflowerBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteCornflowerForeground2 | `colorPaletteCornflowerForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteCornflowerForeground2 = "var(--colorPaletteCornflowerForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteCranberryBackground2 | `colorPaletteCranberryBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteCranberryBackground2 = "var(--colorPaletteCranberryBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteCranberryBorderActive | `colorPaletteCranberryBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteCranberryBorderActive = "var(--colorPaletteCranberryBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteCranberryForeground2 | `colorPaletteCranberryForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteCranberryForeground2 = "var(--colorPaletteCranberryForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkGreenBackground2 | `colorPaletteDarkGreenBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkGreenBackground2 = "var(--colorPaletteDarkGreenBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkGreenBorderActive | `colorPaletteDarkGreenBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkGreenBorderActive = "var(--colorPaletteDarkGreenBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkGreenForeground2 | `colorPaletteDarkGreenForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkGreenForeground2 = "var(--colorPaletteDarkGreenForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeBackground1 | `colorPaletteDarkOrangeBackground1`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkOrangeBackground1 = "var(--colorPaletteDarkOrangeBackground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeBackground2 | `colorPaletteDarkOrangeBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkOrangeBackground2 = "var(--colorPaletteDarkOrangeBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeBackground3 | `colorPaletteDarkOrangeBackground3`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkOrangeBackground3 = "var(--colorPaletteDarkOrangeBackground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeBorder1 | `colorPaletteDarkOrangeBorder1`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkOrangeBorder1 = "var(--colorPaletteDarkOrangeBorder1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeBorder2 | `colorPaletteDarkOrangeBorder2`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkOrangeBorder2 = "var(--colorPaletteDarkOrangeBorder2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeBorderActive | `colorPaletteDarkOrangeBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkOrangeBorderActive = "var(--colorPaletteDarkOrangeBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeForeground1 | `colorPaletteDarkOrangeForeground1`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkOrangeForeground1 = "var(--colorPaletteDarkOrangeForeground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeForeground2 | `colorPaletteDarkOrangeForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkOrangeForeground2 = "var(--colorPaletteDarkOrangeForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeForeground3 | `colorPaletteDarkOrangeForeground3`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkOrangeForeground3 = "var(--colorPaletteDarkOrangeForeground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkRedBackground2 | `colorPaletteDarkRedBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkRedBackground2 = "var(--colorPaletteDarkRedBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkRedBorderActive | `colorPaletteDarkRedBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkRedBorderActive = "var(--colorPaletteDarkRedBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkRedForeground2 | `colorPaletteDarkRedForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteDarkRedForeground2 = "var(--colorPaletteDarkRedForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteForestBackground2 | `colorPaletteForestBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteForestBackground2 = "var(--colorPaletteForestBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteForestBorderActive | `colorPaletteForestBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteForestBorderActive = "var(--colorPaletteForestBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteForestForeground2 | `colorPaletteForestForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteForestForeground2 = "var(--colorPaletteForestForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGoldBackground2 | `colorPaletteGoldBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteGoldBackground2 = "var(--colorPaletteGoldBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGoldBorderActive | `colorPaletteGoldBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteGoldBorderActive = "var(--colorPaletteGoldBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGoldForeground2 | `colorPaletteGoldForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteGoldForeground2 = "var(--colorPaletteGoldForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGrapeBackground2 | `colorPaletteGrapeBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteGrapeBackground2 = "var(--colorPaletteGrapeBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGrapeBorderActive | `colorPaletteGrapeBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteGrapeBorderActive = "var(--colorPaletteGrapeBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGrapeForeground2 | `colorPaletteGrapeForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteGrapeForeground2 = "var(--colorPaletteGrapeForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBackground1 | `colorPaletteGreenBackground1`} design token.
+ * @public
+ */
 export declare const colorPaletteGreenBackground1 = "var(--colorPaletteGreenBackground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBackground2 | `colorPaletteGreenBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteGreenBackground2 = "var(--colorPaletteGreenBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBackground3 | `colorPaletteGreenBackground3`} design token.
+ * @public
+ */
 export declare const colorPaletteGreenBackground3 = "var(--colorPaletteGreenBackground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBorder1 | `colorPaletteGreenBorder1`} design token.
+ * @public
+ */
 export declare const colorPaletteGreenBorder1 = "var(--colorPaletteGreenBorder1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBorder2 | `colorPaletteGreenBorder2`} design token.
+ * @public
+ */
 export declare const colorPaletteGreenBorder2 = "var(--colorPaletteGreenBorder2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBorderActive | `colorPaletteGreenBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteGreenBorderActive = "var(--colorPaletteGreenBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForeground1 | `colorPaletteGreenForeground1`} design token.
+ * @public
+ */
 export declare const colorPaletteGreenForeground1 = "var(--colorPaletteGreenForeground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForeground2 | `colorPaletteGreenForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteGreenForeground2 = "var(--colorPaletteGreenForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForeground3 | `colorPaletteGreenForeground3`} design token.
+ * @public
+ */
 export declare const colorPaletteGreenForeground3 = "var(--colorPaletteGreenForeground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForegroundInverted | `colorPaletteGreenForegroundInverted`} design token.
+ * @public
+ */
 export declare const colorPaletteGreenForegroundInverted = "var(--colorPaletteGreenForegroundInverted)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLavenderBackground2 | `colorPaletteLavenderBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteLavenderBackground2 = "var(--colorPaletteLavenderBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLavenderBorderActive | `colorPaletteLavenderBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteLavenderBorderActive = "var(--colorPaletteLavenderBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLavenderForeground2 | `colorPaletteLavenderForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteLavenderForeground2 = "var(--colorPaletteLavenderForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenBackground1 | `colorPaletteLightGreenBackground1`} design token.
+ * @public
+ */
 export declare const colorPaletteLightGreenBackground1 = "var(--colorPaletteLightGreenBackground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenBackground2 | `colorPaletteLightGreenBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteLightGreenBackground2 = "var(--colorPaletteLightGreenBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenBackground3 | `colorPaletteLightGreenBackground3`} design token.
+ * @public
+ */
 export declare const colorPaletteLightGreenBackground3 = "var(--colorPaletteLightGreenBackground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenBorder1 | `colorPaletteLightGreenBorder1`} design token.
+ * @public
+ */
 export declare const colorPaletteLightGreenBorder1 = "var(--colorPaletteLightGreenBorder1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenBorder2 | `colorPaletteLightGreenBorder2`} design token.
+ * @public
+ */
 export declare const colorPaletteLightGreenBorder2 = "var(--colorPaletteLightGreenBorder2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenBorderActive | `colorPaletteLightGreenBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteLightGreenBorderActive = "var(--colorPaletteLightGreenBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenForeground1 | `colorPaletteLightGreenForeground1`} design token.
+ * @public
+ */
 export declare const colorPaletteLightGreenForeground1 = "var(--colorPaletteLightGreenForeground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenForeground2 | `colorPaletteLightGreenForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteLightGreenForeground2 = "var(--colorPaletteLightGreenForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenForeground3 | `colorPaletteLightGreenForeground3`} design token.
+ * @public
+ */
 export declare const colorPaletteLightGreenForeground3 = "var(--colorPaletteLightGreenForeground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightTealBackground2 | `colorPaletteLightTealBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteLightTealBackground2 = "var(--colorPaletteLightTealBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightTealBorderActive | `colorPaletteLightTealBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteLightTealBorderActive = "var(--colorPaletteLightTealBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightTealForeground2 | `colorPaletteLightTealForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteLightTealForeground2 = "var(--colorPaletteLightTealForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLilacBackground2 | `colorPaletteLilacBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteLilacBackground2 = "var(--colorPaletteLilacBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLilacBorderActive | `colorPaletteLilacBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteLilacBorderActive = "var(--colorPaletteLilacBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLilacForeground2 | `colorPaletteLilacForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteLilacForeground2 = "var(--colorPaletteLilacForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMagentaBackground2 | `colorPaletteMagentaBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteMagentaBackground2 = "var(--colorPaletteMagentaBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMagentaBorderActive | `colorPaletteMagentaBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteMagentaBorderActive = "var(--colorPaletteMagentaBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMagentaForeground2 | `colorPaletteMagentaForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteMagentaForeground2 = "var(--colorPaletteMagentaForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBackground1 | `colorPaletteMarigoldBackground1`} design token.
+ * @public
+ */
 export declare const colorPaletteMarigoldBackground1 = "var(--colorPaletteMarigoldBackground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBackground2 | `colorPaletteMarigoldBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteMarigoldBackground2 = "var(--colorPaletteMarigoldBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBackground3 | `colorPaletteMarigoldBackground3`} design token.
+ * @public
+ */
 export declare const colorPaletteMarigoldBackground3 = "var(--colorPaletteMarigoldBackground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBorder1 | `colorPaletteMarigoldBorder1`} design token.
+ * @public
+ */
 export declare const colorPaletteMarigoldBorder1 = "var(--colorPaletteMarigoldBorder1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBorder2 | `colorPaletteMarigoldBorder2`} design token.
+ * @public
+ */
 export declare const colorPaletteMarigoldBorder2 = "var(--colorPaletteMarigoldBorder2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBorderActive | `colorPaletteMarigoldBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteMarigoldBorderActive = "var(--colorPaletteMarigoldBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldForeground1 | `colorPaletteMarigoldForeground1`} design token.
+ * @public
+ */
 export declare const colorPaletteMarigoldForeground1 = "var(--colorPaletteMarigoldForeground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldForeground2 | `colorPaletteMarigoldForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteMarigoldForeground2 = "var(--colorPaletteMarigoldForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldForeground3 | `colorPaletteMarigoldForeground3`} design token.
+ * @public
+ */
 export declare const colorPaletteMarigoldForeground3 = "var(--colorPaletteMarigoldForeground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMinkBackground2 | `colorPaletteMinkBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteMinkBackground2 = "var(--colorPaletteMinkBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMinkBorderActive | `colorPaletteMinkBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteMinkBorderActive = "var(--colorPaletteMinkBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMinkForeground2 | `colorPaletteMinkForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteMinkForeground2 = "var(--colorPaletteMinkForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteNavyBackground2 | `colorPaletteNavyBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteNavyBackground2 = "var(--colorPaletteNavyBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteNavyBorderActive | `colorPaletteNavyBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteNavyBorderActive = "var(--colorPaletteNavyBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteNavyForeground2 | `colorPaletteNavyForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteNavyForeground2 = "var(--colorPaletteNavyForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePeachBackground2 | `colorPalettePeachBackground2`} design token.
+ * @public
+ */
 export declare const colorPalettePeachBackground2 = "var(--colorPalettePeachBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePeachBorderActive | `colorPalettePeachBorderActive`} design token.
+ * @public
+ */
 export declare const colorPalettePeachBorderActive = "var(--colorPalettePeachBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePeachForeground2 | `colorPalettePeachForeground2`} design token.
+ * @public
+ */
 export declare const colorPalettePeachForeground2 = "var(--colorPalettePeachForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePinkBackground2 | `colorPalettePinkBackground2`} design token.
+ * @public
+ */
 export declare const colorPalettePinkBackground2 = "var(--colorPalettePinkBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePinkBorderActive | `colorPalettePinkBorderActive`} design token.
+ * @public
+ */
 export declare const colorPalettePinkBorderActive = "var(--colorPalettePinkBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePinkForeground2 | `colorPalettePinkForeground2`} design token.
+ * @public
+ */
 export declare const colorPalettePinkForeground2 = "var(--colorPalettePinkForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePlatinumBackground2 | `colorPalettePlatinumBackground2`} design token.
+ * @public
+ */
 export declare const colorPalettePlatinumBackground2 = "var(--colorPalettePlatinumBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePlatinumBorderActive | `colorPalettePlatinumBorderActive`} design token.
+ * @public
+ */
 export declare const colorPalettePlatinumBorderActive = "var(--colorPalettePlatinumBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePlatinumForeground2 | `colorPalettePlatinumForeground2`} design token.
+ * @public
+ */
 export declare const colorPalettePlatinumForeground2 = "var(--colorPalettePlatinumForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePlumBackground2 | `colorPalettePlumBackground2`} design token.
+ * @public
+ */
 export declare const colorPalettePlumBackground2 = "var(--colorPalettePlumBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePlumBorderActive | `colorPalettePlumBorderActive`} design token.
+ * @public
+ */
 export declare const colorPalettePlumBorderActive = "var(--colorPalettePlumBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePlumForeground2 | `colorPalettePlumForeground2`} design token.
+ * @public
+ */
 export declare const colorPalettePlumForeground2 = "var(--colorPalettePlumForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePumpkinBackground2 | `colorPalettePumpkinBackground2`} design token.
+ * @public
+ */
 export declare const colorPalettePumpkinBackground2 = "var(--colorPalettePumpkinBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePumpkinBorderActive | `colorPalettePumpkinBorderActive`} design token.
+ * @public
+ */
 export declare const colorPalettePumpkinBorderActive = "var(--colorPalettePumpkinBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePumpkinForeground2 | `colorPalettePumpkinForeground2`} design token.
+ * @public
+ */
 export declare const colorPalettePumpkinForeground2 = "var(--colorPalettePumpkinForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePurpleBackground2 | `colorPalettePurpleBackground2`} design token.
+ * @public
+ */
 export declare const colorPalettePurpleBackground2 = "var(--colorPalettePurpleBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePurpleBorderActive | `colorPalettePurpleBorderActive`} design token.
+ * @public
+ */
 export declare const colorPalettePurpleBorderActive = "var(--colorPalettePurpleBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePurpleForeground2 | `colorPalettePurpleForeground2`} design token.
+ * @public
+ */
 export declare const colorPalettePurpleForeground2 = "var(--colorPalettePurpleForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBackground1 | `colorPaletteRedBackground1`} design token.
+ * @public
+ */
 export declare const colorPaletteRedBackground1 = "var(--colorPaletteRedBackground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBackground2 | `colorPaletteRedBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteRedBackground2 = "var(--colorPaletteRedBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBackground3 | `colorPaletteRedBackground3`} design token.
+ * @public
+ */
 export declare const colorPaletteRedBackground3 = "var(--colorPaletteRedBackground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBorder1 | `colorPaletteRedBorder1`} design token.
+ * @public
+ */
 export declare const colorPaletteRedBorder1 = "var(--colorPaletteRedBorder1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBorder2 | `colorPaletteRedBorder2`} design token.
+ * @public
+ */
 export declare const colorPaletteRedBorder2 = "var(--colorPaletteRedBorder2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBorderActive | `colorPaletteRedBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteRedBorderActive = "var(--colorPaletteRedBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedForeground1 | `colorPaletteRedForeground1`} design token.
+ * @public
+ */
 export declare const colorPaletteRedForeground1 = "var(--colorPaletteRedForeground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedForeground2 | `colorPaletteRedForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteRedForeground2 = "var(--colorPaletteRedForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedForeground3 | `colorPaletteRedForeground3`} design token.
+ * @public
+ */
 export declare const colorPaletteRedForeground3 = "var(--colorPaletteRedForeground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedForegroundInverted | `colorPaletteRedForegroundInverted`} design token.
+ * @public
+ */
 export declare const colorPaletteRedForegroundInverted = "var(--colorPaletteRedForegroundInverted)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRoyalBlueBackground2 | `colorPaletteRoyalBlueBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteRoyalBlueBackground2 = "var(--colorPaletteRoyalBlueBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRoyalBlueBorderActive | `colorPaletteRoyalBlueBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteRoyalBlueBorderActive = "var(--colorPaletteRoyalBlueBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRoyalBlueForeground2 | `colorPaletteRoyalBlueForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteRoyalBlueForeground2 = "var(--colorPaletteRoyalBlueForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteSeafoamBackground2 | `colorPaletteSeafoamBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteSeafoamBackground2 = "var(--colorPaletteSeafoamBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteSeafoamBorderActive | `colorPaletteSeafoamBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteSeafoamBorderActive = "var(--colorPaletteSeafoamBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteSeafoamForeground2 | `colorPaletteSeafoamForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteSeafoamForeground2 = "var(--colorPaletteSeafoamForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteSteelBackground2 | `colorPaletteSteelBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteSteelBackground2 = "var(--colorPaletteSteelBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteSteelBorderActive | `colorPaletteSteelBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteSteelBorderActive = "var(--colorPaletteSteelBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteSteelForeground2 | `colorPaletteSteelForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteSteelForeground2 = "var(--colorPaletteSteelForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteTealBackground2 | `colorPaletteTealBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteTealBackground2 = "var(--colorPaletteTealBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteTealBorderActive | `colorPaletteTealBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteTealBorderActive = "var(--colorPaletteTealBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteTealForeground2 | `colorPaletteTealForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteTealForeground2 = "var(--colorPaletteTealForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground1 | `colorPaletteYellowBackground1`} design token.
+ * @public
+ */
 export declare const colorPaletteYellowBackground1 = "var(--colorPaletteYellowBackground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground2 | `colorPaletteYellowBackground2`} design token.
+ * @public
+ */
 export declare const colorPaletteYellowBackground2 = "var(--colorPaletteYellowBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground3 | `colorPaletteYellowBackground3`} design token.
+ * @public
+ */
 export declare const colorPaletteYellowBackground3 = "var(--colorPaletteYellowBackground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBorder1 | `colorPaletteYellowBorder1`} design token.
+ * @public
+ */
 export declare const colorPaletteYellowBorder1 = "var(--colorPaletteYellowBorder1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBorder2 | `colorPaletteYellowBorder2`} design token.
+ * @public
+ */
 export declare const colorPaletteYellowBorder2 = "var(--colorPaletteYellowBorder2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBorderActive | `colorPaletteYellowBorderActive`} design token.
+ * @public
+ */
 export declare const colorPaletteYellowBorderActive = "var(--colorPaletteYellowBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForeground1 | `colorPaletteYellowForeground1`} design token.
+ * @public
+ */
 export declare const colorPaletteYellowForeground1 = "var(--colorPaletteYellowForeground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForeground2 | `colorPaletteYellowForeground2`} design token.
+ * @public
+ */
 export declare const colorPaletteYellowForeground2 = "var(--colorPaletteYellowForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForeground3 | `colorPaletteYellowForeground3`} design token.
+ * @public
+ */
 export declare const colorPaletteYellowForeground3 = "var(--colorPaletteYellowForeground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForegroundInverted | `colorPaletteYellowForegroundInverted`} design token.
+ * @public
+ */
 export declare const colorPaletteYellowForegroundInverted = "var(--colorPaletteYellowForegroundInverted)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorScrollbarOverlay | `colorScrollbarOverlay`} design token.
+ * @public
+ */
 export declare const colorScrollbarOverlay = "var(--colorScrollbarOverlay)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBackground1 | `colorStatusDangerBackground1`} design token.
+ * @public
+ */
 export declare const colorStatusDangerBackground1 = "var(--colorStatusDangerBackground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBackground2 | `colorStatusDangerBackground2`} design token.
+ * @public
+ */
 export declare const colorStatusDangerBackground2 = "var(--colorStatusDangerBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBackground3 | `colorStatusDangerBackground3`} design token.
+ * @public
+ */
 export declare const colorStatusDangerBackground3 = "var(--colorStatusDangerBackground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBackground3Hover | `colorStatusDangerBackground3Hover`} design token.
+ * @public
+ */
 export declare const colorStatusDangerBackground3Hover = "var(--colorStatusDangerBackground3Hover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBackground3Pressed | `colorStatusDangerBackground3Pressed`} design token.
+ * @public
+ */
 export declare const colorStatusDangerBackground3Pressed = "var(--colorStatusDangerBackground3Pressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBorder1 | `colorStatusDangerBorder1`} design token.
+ * @public
+ */
 export declare const colorStatusDangerBorder1 = "var(--colorStatusDangerBorder1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBorder2 | `colorStatusDangerBorder2`} design token.
+ * @public
+ */
 export declare const colorStatusDangerBorder2 = "var(--colorStatusDangerBorder2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBorderActive | `colorStatusDangerBorderActive`} design token.
+ * @public
+ */
 export declare const colorStatusDangerBorderActive = "var(--colorStatusDangerBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerForeground1 | `colorStatusDangerForeground1`} design token.
+ * @public
+ */
 export declare const colorStatusDangerForeground1 = "var(--colorStatusDangerForeground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerForeground2 | `colorStatusDangerForeground2`} design token.
+ * @public
+ */
 export declare const colorStatusDangerForeground2 = "var(--colorStatusDangerForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerForeground3 | `colorStatusDangerForeground3`} design token.
+ * @public
+ */
 export declare const colorStatusDangerForeground3 = "var(--colorStatusDangerForeground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerForegroundInverted | `colorStatusDangerForegroundInverted`} design token.
+ * @public
+ */
 export declare const colorStatusDangerForegroundInverted = "var(--colorStatusDangerForegroundInverted)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBackground1 | `colorStatusSuccessBackground1`} design token.
+ * @public
+ */
 export declare const colorStatusSuccessBackground1 = "var(--colorStatusSuccessBackground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBackground2 | `colorStatusSuccessBackground2`} design token.
+ * @public
+ */
 export declare const colorStatusSuccessBackground2 = "var(--colorStatusSuccessBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBackground3 | `colorStatusSuccessBackground3`} design token.
+ * @public
+ */
 export declare const colorStatusSuccessBackground3 = "var(--colorStatusSuccessBackground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBorder1 | `colorStatusSuccessBorder1`} design token.
+ * @public
+ */
 export declare const colorStatusSuccessBorder1 = "var(--colorStatusSuccessBorder1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBorder2 | `colorStatusSuccessBorder2`} design token.
+ * @public
+ */
 export declare const colorStatusSuccessBorder2 = "var(--colorStatusSuccessBorder2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBorderActive | `colorStatusSuccessBorderActive`} design token.
+ * @public
+ */
 export declare const colorStatusSuccessBorderActive = "var(--colorStatusSuccessBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessForeground1 | `colorStatusSuccessForeground1`} design token.
+ * @public
+ */
 export declare const colorStatusSuccessForeground1 = "var(--colorStatusSuccessForeground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessForeground2 | `colorStatusSuccessForeground2`} design token.
+ * @public
+ */
 export declare const colorStatusSuccessForeground2 = "var(--colorStatusSuccessForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessForeground3 | `colorStatusSuccessForeground3`} design token.
+ * @public
+ */
 export declare const colorStatusSuccessForeground3 = "var(--colorStatusSuccessForeground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessForegroundInverted | `colorStatusSuccessForegroundInverted`} design token.
+ * @public
+ */
 export declare const colorStatusSuccessForegroundInverted = "var(--colorStatusSuccessForegroundInverted)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBackground1 | `colorStatusWarningBackground1`} design token.
+ * @public
+ */
 export declare const colorStatusWarningBackground1 = "var(--colorStatusWarningBackground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBackground2 | `colorStatusWarningBackground2`} design token.
+ * @public
+ */
 export declare const colorStatusWarningBackground2 = "var(--colorStatusWarningBackground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBackground3 | `colorStatusWarningBackground3`} design token.
+ * @public
+ */
 export declare const colorStatusWarningBackground3 = "var(--colorStatusWarningBackground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBorder1 | `colorStatusWarningBorder1`} design token.
+ * @public
+ */
 export declare const colorStatusWarningBorder1 = "var(--colorStatusWarningBorder1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBorder2 | `colorStatusWarningBorder2`} design token.
+ * @public
+ */
 export declare const colorStatusWarningBorder2 = "var(--colorStatusWarningBorder2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBorderActive | `colorStatusWarningBorderActive`} design token.
+ * @public
+ */
 export declare const colorStatusWarningBorderActive = "var(--colorStatusWarningBorderActive)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningForeground1 | `colorStatusWarningForeground1`} design token.
+ * @public
+ */
 export declare const colorStatusWarningForeground1 = "var(--colorStatusWarningForeground1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningForeground2 | `colorStatusWarningForeground2`} design token.
+ * @public
+ */
 export declare const colorStatusWarningForeground2 = "var(--colorStatusWarningForeground2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningForeground3 | `colorStatusWarningForeground3`} design token.
+ * @public
+ */
 export declare const colorStatusWarningForeground3 = "var(--colorStatusWarningForeground3)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningForegroundInverted | `colorStatusWarningForegroundInverted`} design token.
+ * @public
+ */
 export declare const colorStatusWarningForegroundInverted = "var(--colorStatusWarningForegroundInverted)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStrokeFocus1 | `colorStrokeFocus1`} design token.
+ * @public
+ */
 export declare const colorStrokeFocus1 = "var(--colorStrokeFocus1)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStrokeFocus2 | `colorStrokeFocus2`} design token.
+ * @public
+ */
 export declare const colorStrokeFocus2 = "var(--colorStrokeFocus2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackground | `colorSubtleBackground`} design token.
+ * @public
+ */
 export declare const colorSubtleBackground = "var(--colorSubtleBackground)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundHover | `colorSubtleBackgroundHover`} design token.
+ * @public
+ */
 export declare const colorSubtleBackgroundHover = "var(--colorSubtleBackgroundHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundInverted | `colorSubtleBackgroundInverted`} design token.
+ * @public
+ */
 export declare const colorSubtleBackgroundInverted = "var(--colorSubtleBackgroundInverted)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundInvertedHover | `colorSubtleBackgroundInvertedHover`} design token.
+ * @public
+ */
 export declare const colorSubtleBackgroundInvertedHover = "var(--colorSubtleBackgroundInvertedHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundInvertedPressed | `colorSubtleBackgroundInvertedPressed`} design token.
+ * @public
+ */
 export declare const colorSubtleBackgroundInvertedPressed = "var(--colorSubtleBackgroundInvertedPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundInvertedSelected | `colorSubtleBackgroundInvertedSelected`} design token.
+ * @public
+ */
 export declare const colorSubtleBackgroundInvertedSelected = "var(--colorSubtleBackgroundInvertedSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundLightAlphaHover | `colorSubtleBackgroundLightAlphaHover`} design token.
+ * @public
+ */
 export declare const colorSubtleBackgroundLightAlphaHover = "var(--colorSubtleBackgroundLightAlphaHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundLightAlphaPressed | `colorSubtleBackgroundLightAlphaPressed`} design token.
+ * @public
+ */
 export declare const colorSubtleBackgroundLightAlphaPressed = "var(--colorSubtleBackgroundLightAlphaPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundLightAlphaSelected | `colorSubtleBackgroundLightAlphaSelected`} design token.
+ * @public
+ */
 export declare const colorSubtleBackgroundLightAlphaSelected = "var(--colorSubtleBackgroundLightAlphaSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundPressed | `colorSubtleBackgroundPressed`} design token.
+ * @public
+ */
 export declare const colorSubtleBackgroundPressed = "var(--colorSubtleBackgroundPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundSelected | `colorSubtleBackgroundSelected`} design token.
+ * @public
+ */
 export declare const colorSubtleBackgroundSelected = "var(--colorSubtleBackgroundSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackground | `colorTransparentBackground`} design token.
+ * @public
+ */
 export declare const colorTransparentBackground = "var(--colorTransparentBackground)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundHover | `colorTransparentBackgroundHover`} design token.
+ * @public
+ */
 export declare const colorTransparentBackgroundHover = "var(--colorTransparentBackgroundHover)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundPressed | `colorTransparentBackgroundPressed`} design token.
+ * @public
+ */
 export declare const colorTransparentBackgroundPressed = "var(--colorTransparentBackgroundPressed)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundSelected | `colorTransparentBackgroundSelected`} design token.
+ * @public
+ */
 export declare const colorTransparentBackgroundSelected = "var(--colorTransparentBackgroundSelected)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentStroke | `colorTransparentStroke`} design token.
+ * @public
+ */
 export declare const colorTransparentStroke = "var(--colorTransparentStroke)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentStrokeDisabled | `colorTransparentStrokeDisabled`} design token.
+ * @public
+ */
 export declare const colorTransparentStrokeDisabled = "var(--colorTransparentStrokeDisabled)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentStrokeInteractive | `colorTransparentStrokeInteractive`} design token.
+ * @public
+ */
 export declare const colorTransparentStrokeInteractive = "var(--colorTransparentStrokeInteractive)";
 
 /**
@@ -2715,22 +4123,58 @@ export declare const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
  */
 declare type CSSDisplayPropertyValue = 'block' | 'contents' | 'flex' | 'grid' | 'inherit' | 'initial' | 'inline' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline-table' | 'list-item' | 'none' | 'run-in' | 'table' | 'table-caption' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row' | 'table-row-group';
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveAccelerateMax | `curveAccelerateMax`} design token.
+ * @public
+ */
 export declare const curveAccelerateMax = "var(--curveAccelerateMax)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveAccelerateMid | `curveAccelerateMid`} design token.
+ * @public
+ */
 export declare const curveAccelerateMid = "var(--curveAccelerateMid)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveAccelerateMin | `curveAccelerateMin`} design token.
+ * @public
+ */
 export declare const curveAccelerateMin = "var(--curveAccelerateMin)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveDecelerateMax | `curveDecelerateMax`} design token.
+ * @public
+ */
 export declare const curveDecelerateMax = "var(--curveDecelerateMax)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveDecelerateMid | `curveDecelerateMid`} design token.
+ * @public
+ */
 export declare const curveDecelerateMid = "var(--curveDecelerateMid)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveDecelerateMin | `curveDecelerateMin`} design token.
+ * @public
+ */
 export declare const curveDecelerateMin = "var(--curveDecelerateMin)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveEasyEase | `curveEasyEase`} design token.
+ * @public
+ */
 export declare const curveEasyEase = "var(--curveEasyEase)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveEasyEaseMax | `curveEasyEaseMax`} design token.
+ * @public
+ */
 export declare const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveLinear | `curveLinear`} design token.
+ * @public
+ */
 export declare const curveLinear = "var(--curveLinear)";
 
 /**
@@ -2764,42 +4208,16 @@ declare interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
 }
 
 /**
- * Dialog component that extends the FASTElement class.
+ * A Dialog Custom HTML Element.
  *
  * @public
- * @extends FASTElement
  */
 export declare class Dialog extends FASTElement {
-    /**
-     * @private
-     * Indicates whether focus is being trapped within the dialog
-     */
-    private isTrappingFocus;
-    /**
-     * @public
-     * Lifecycle method called when the element is connected to the DOM
-     */
-    connectedCallback(): void;
-    /**
-     * @public
-     * Lifecycle method called when the element is disconnected from the DOM
-     */
-    disconnectedCallback(): void;
     /**
      * @public
      * The dialog element
      */
     dialog: HTMLDialogElement;
-    /**
-     * @public
-     * The title action elements
-     */
-    titleAction: HTMLElement[];
-    /**
-     * @public
-     * The default title action button
-     */
-    defaultTitleAction?: Button;
     /**
      * @public
      * The ID of the element that describes the dialog
@@ -2814,43 +4232,19 @@ export declare class Dialog extends FASTElement {
      * @public
      * The type of the dialog modal
      */
-    modalType: DialogModalType;
-    /**
-     * @public
-     * Indicates whether the dialog is open
-     */
-    open: boolean;
-    /**
-     * @public
-     * Indicates whether the dialog has a title action
-     */
-    noTitleAction: boolean;
-    /**
-     * @private
-     * Indicates whether focus should be trapped within the dialog
-     */
-    private trapFocus;
-    /**
-     * @public
-     * Method called when the 'open' attribute changes
-     */
-    openChanged(oldValue: boolean, newValue: boolean): void;
-    /**
-     * @public
-     * Method called when the 'modalType' attribute changes
-     */
-    modalTypeChanged(oldValue: DialogModalType, newValue: DialogModalType): void;
+    type: DialogType;
     /**
      * @public
-     * Method to set the component's state based on its attributes
+     * Method to emit an event before the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
      */
-    setComponent(): void;
+    emitBeforeToggle: () => void;
     /**
      * @public
-     * Method to emit an event when the dialog's open state changes
-     * @param dismissed - Indicates whether the dialog was dismissed
+     * Method to emit an event after the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
      */
-    onOpenChangeEvent: (dismissed?: boolean) => void;
+    emitToggle: () => void;
     /**
      * @public
      * Method to show the dialog
@@ -2859,120 +4253,59 @@ export declare class Dialog extends FASTElement {
     /**
      * @public
      * Method to hide the dialog
-     * @param dismissed - Indicates whether the dialog was dismissed
-     */
-    hide(dismissed?: boolean): void;
-    /**
-     * @public
-     * Method to dismiss the dialog
      */
-    dismiss(): void;
+    hide(): void;
     /**
      * @public
-     * Handles click events on the dialog
+     * Handles click events on the dialog overlay for light-dismiss
      * @param event - The click event
      * @returns boolean
      */
-    handleClick(event: Event): boolean;
+    clickHandler(event: Event): boolean;
+}
+
+/**
+ * Dialog Body component that extends the FASTElement class.
+ *
+ * @public
+ * @extends FASTElement
+ */
+export declare class DialogBody extends FASTElement {
     /**
      * @public
-     * Handles keydown events on the dialog
-     * @param e - The keydown event
-     * @returns boolean | void
-     */
-    handleKeydown: (e: KeyboardEvent) => boolean | void;
-    /**
-     * @private
-     * Handles keydown events on the document
-     * @param e - The keydown event
-     */
-    private handleDocumentKeydown;
-    /**
-     * @private
-     * Handles tab keydown events
-     * @param e - The keydown event
-     */
-    private handleTabKeyDown;
-    /**
-     * @private
-     * Gets the bounds of the tab queue
-     * @returns (HTMLElement | SVGElement)[]
-     */
-    private getTabQueueBounds;
-    /**
-     * @private
-     * Focuses the first element in the tab queue
-     */
-    private focusFirstElement;
-    /**
-     * @private
-     * Determines if focus should be forced
-     * @param currentFocusElement - The currently focused element
-     * @returns boolean
-     */
-    private shouldForceFocus;
-    /**
-     * @private
-     * Determines if focus should be trapped
-     * @returns boolean
-     */
-    private shouldTrapFocus;
-    /**
-     * @private
-     * Handles focus events on the document
-     * @param e - The focus event
-     */
-    private handleDocumentFocus;
-    /**
-     * @private
-     * Updates the state of focus trapping
-     * @param shouldTrapFocusOverride - Optional override for whether focus should be trapped
-     */
-    private updateTrapFocus;
-    /**
-     * @private
-     * Reduces the list of tabbable items
-     * @param elements - The current list of elements
-     * @param element - The element to consider adding to the list
-     * @returns HTMLElement[]
-     */
-    private static reduceTabbableItems;
-    /**
-     * @private
-     * Determines if an element is a focusable FASTElement
-     * @param element - The element to check
-     * @returns boolean
-     */
-    private static isFocusableFastElement;
-    /**
-     * @private
-     * Determines if an element has a tabbable shadow
-     * @param element - The element to check
-     * @returns boolean
+     * Indicates whether the dialog has a title action
      */
-    private static hasTabbableShadow;
+    noTitleAction: boolean;
 }
 
 /**
- * The Fluent Dialog Element
+ * The Fluent Dialog Body Element
  *
  * @public
  * @remarks
- * HTML Element: \<fluent-dialog\>
+ * HTML Element: \<fluent-dialog-body\>
  */
-export declare const DialogDefinition: FASTElementDefinition<typeof Dialog>;
+export declare const DialogBodyDefinition: FASTElementDefinition<typeof DialogBody>;
+
+/** Dialog Body styles
+ * @public
+ */
+export declare const DialogBodyStyles: ElementStyles;
 
 /**
- * Dialog modal type
+ * Template for the dialog form
  * @public
  */
-export declare const DialogModalType: {
-    readonly modal: "modal";
-    readonly nonModal: "non-modal";
-    readonly alert: "alert";
-};
+export declare const DialogBodyTemplate: ElementViewTemplate;
 
-export declare type DialogModalType = ValuesOf<typeof DialogModalType>;
+/**
+ * The Fluent Dialog Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-dialog\>
+ */
+export declare const DialogDefinition: FASTElementDefinition<typeof Dialog>;
 
 /** Dialog styles
  * @public
@@ -2985,6 +4318,18 @@ export declare const DialogStyles: ElementStyles;
  */
 export declare const DialogTemplate: ElementViewTemplate<Dialog>;
 
+/**
+ * Dialog modal type
+ * @public
+ */
+export declare const DialogType: {
+    readonly modal: "modal";
+    readonly nonModal: "non-modal";
+    readonly alert: "alert";
+};
+
+export declare type DialogType = ValuesOf<typeof DialogType>;
+
 /**
  * Applies a CSS display property.
  * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
@@ -2994,7 +4339,7 @@ export declare const DialogTemplate: ElementViewTemplate<Dialog>;
 export declare function display(displayValue: CSSDisplayPropertyValue): string;
 
 /**
- * @class Divider component
+ * A Divider Custom HTML Element.
  *
  * @remarks
  * A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
@@ -3017,22 +4362,19 @@ export declare class Divider extends FASTElement {
      */
     orientation: DividerOrientation;
     /**
-     * @property alignContent
-     * @default center
+     * @public
      * @remarks
      * Determines the alignment of the content within the divider. Select from start or end. When not specified, the content will be aligned to the center.
      */
     alignContent?: DividerAlignContent;
     /**
-     * @property appearance
-     * @default default
+     * @public
      * @remarks
      * A divider can have one of the preset appearances. Select from strong, brand, subtle. When not specified, the divider has its default appearance.
      */
     appearance?: DividerAppearance;
     /**
-     * @property inset
-     * @default false
+     * @public
      * @remarks
      * Adds padding to the beginning and end of the divider.
      */
@@ -3131,20 +4473,52 @@ export declare const DividerStyles: ElementStyles;
  */
 export declare const DividerTemplate: ElementViewTemplate<Divider>;
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationFast | `durationFast`} design token.
+ * @public
+ */
 export declare const durationFast = "var(--durationFast)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationFaster | `durationFaster`} design token.
+ * @public
+ */
 export declare const durationFaster = "var(--durationFaster)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationGentle | `durationGentle`} design token.
+ * @public
+ */
 export declare const durationGentle = "var(--durationGentle)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationNormal | `durationNormal`} design token.
+ * @public
+ */
 export declare const durationNormal = "var(--durationNormal)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationSlow | `durationSlow`} design token.
+ * @public
+ */
 export declare const durationSlow = "var(--durationSlow)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationSlower | `durationSlower`} design token.
+ * @public
+ */
 export declare const durationSlower = "var(--durationSlower)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationUltraFast | `durationUltraFast`} design token.
+ * @public
+ */
 export declare const durationUltraFast = "var(--durationUltraFast)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationUltraSlow | `durationUltraSlow`} design token.
+ * @public
+ */
 export declare const durationUltraSlow = "var(--durationUltraSlow)";
 
 /**
@@ -3161,38 +4535,106 @@ export declare const FluentDesignSystem: Readonly<{
     registry: CustomElementRegistry;
 }>;
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontFamilyBase | `fontFamilyBase`} design token.
+ * @public
+ */
 export declare const fontFamilyBase = "var(--fontFamilyBase)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontFamilyMonospace | `fontFamilyMonospace`} design token.
+ * @public
+ */
 export declare const fontFamilyMonospace = "var(--fontFamilyMonospace)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontFamilyNumeric | `fontFamilyNumeric`} design token.
+ * @public
+ */
 export declare const fontFamilyNumeric = "var(--fontFamilyNumeric)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase100 | `fontSizeBase100`} design token.
+ * @public
+ */
 export declare const fontSizeBase100 = "var(--fontSizeBase100)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase200 | `fontSizeBase200`} design token.
+ * @public
+ */
 export declare const fontSizeBase200 = "var(--fontSizeBase200)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase300 | `fontSizeBase300`} design token.
+ * @public
+ */
 export declare const fontSizeBase300 = "var(--fontSizeBase300)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase400 | `fontSizeBase400`} design token.
+ * @public
+ */
 export declare const fontSizeBase400 = "var(--fontSizeBase400)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase500 | `fontSizeBase500`} design token.
+ * @public
+ */
 export declare const fontSizeBase500 = "var(--fontSizeBase500)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase600 | `fontSizeBase600`} design token.
+ * @public
+ */
 export declare const fontSizeBase600 = "var(--fontSizeBase600)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeHero1000 | `fontSizeHero1000`} design token.
+ * @public
+ */
 export declare const fontSizeHero1000 = "var(--fontSizeHero1000)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeHero700 | `fontSizeHero700`} design token.
+ * @public
+ */
 export declare const fontSizeHero700 = "var(--fontSizeHero700)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeHero800 | `fontSizeHero800`} design token.
+ * @public
+ */
 export declare const fontSizeHero800 = "var(--fontSizeHero800)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeHero900 | `fontSizeHero900`} design token.
+ * @public
+ */
 export declare const fontSizeHero900 = "var(--fontSizeHero900)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontWeightBold | `fontWeightBold`} design token.
+ * @public
+ */
 export declare const fontWeightBold = "var(--fontWeightBold)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontWeightMedium | `fontWeightMedium`} design token.
+ * @public
+ */
 export declare const fontWeightMedium = "var(--fontWeightMedium)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontWeightRegular | `fontWeightRegular`} design token.
+ * @public
+ */
 export declare const fontWeightRegular = "var(--fontWeightRegular)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontWeightSemibold | `fontWeightSemibold`} design token.
+ * @public
+ */
 export declare const fontWeightSemibold = "var(--fontWeightSemibold)";
 
 /**
@@ -3397,7 +4839,6 @@ export declare class Label extends FASTElement {
      * 	Specifies font size of a label
      *
      * @public
-     * @default 'medium'
      * @remarks
      * HTML Attribute: size
      */
@@ -3406,7 +4847,6 @@ export declare class Label extends FASTElement {
      * 	Specifies font weight of a label
      *
      * @public
-     * @default 'regular'
      * @remarks
      * HTML Attribute: weight
      */
@@ -3481,24 +4921,64 @@ export declare type LabelWeight = ValuesOf<typeof LabelWeight>;
  */
 export declare const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase100 | `lineHeightBase100`} design token.
+ * @public
+ */
 export declare const lineHeightBase100 = "var(--lineHeightBase100)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase200 | `lineHeightBase200`} design token.
+ * @public
+ */
 export declare const lineHeightBase200 = "var(--lineHeightBase200)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase300 | `lineHeightBase300`} design token.
+ * @public
+ */
 export declare const lineHeightBase300 = "var(--lineHeightBase300)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase400 | `lineHeightBase400`} design token.
+ * @public
+ */
 export declare const lineHeightBase400 = "var(--lineHeightBase400)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase500 | `lineHeightBase500`} design token.
+ * @public
+ */
 export declare const lineHeightBase500 = "var(--lineHeightBase500)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase600 | `lineHeightBase600`} design token.
+ * @public
+ */
 export declare const lineHeightBase600 = "var(--lineHeightBase600)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero1000 | `lineHeightHero1000`} design token.
+ * @public
+ */
 export declare const lineHeightHero1000 = "var(--lineHeightHero1000)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero700 | `lineHeightHero700`} design token.
+ * @public
+ */
 export declare const lineHeightHero700 = "var(--lineHeightHero700)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero800 | `lineHeightHero800`} design token.
+ * @public
+ */
 export declare const lineHeightHero800 = "var(--lineHeightHero800)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero900 | `lineHeightHero900`} design token.
+ * @public
+ */
 export declare const lineHeightHero900 = "var(--lineHeightHero900)";
 
 /**
@@ -3659,12 +5139,12 @@ export declare class Menu extends FASTElement {
     positioningContainer?: HTMLElement;
     /**
      * The trigger element of the menu.
-     * @private
+     * @internal
      */
     private _trigger?;
     /**
      * The menu list element of the menu.
-     * @private
+     * @internal
      */
     private _menuList?;
     /**
@@ -3720,51 +5200,53 @@ export declare class Menu extends FASTElement {
      * Updates the 'aria-expanded' attribute and sets the positioning of the menu.
      * Sets menu list position
      * emits openChanged event
+     *
+     * @param oldValue - The previous value of 'open'.
+     * @param newValue - The new value of 'open'.
      * @public
-     * @param {boolean} oldValue - The previous value of 'open'.
-     * @param {boolean} newValue - The new value of 'open'.
      */
     openChanged(oldValue: boolean, newValue: boolean): void;
     /**
      * Called whenever the 'openOnHover' property changes.
      * Adds or removes a 'mouseover' event listener to the trigger based on the new value.
+     *
+     * @param oldValue - The previous value of 'openOnHover'.
+     * @param newValue - The new value of 'openOnHover'.
      * @public
-     * @param {boolean} oldValue - The previous value of 'openOnHover'.
-     * @param {boolean} newValue - The new value of 'openOnHover'.
      */
     openOnHoverChanged(oldValue: boolean, newValue: boolean): void;
     /**
      * Called whenever the 'persistOnItemClick' property changes.
      * Adds or removes a 'click' event listener to the menu list based on the new value.
      * @public
-     * @param {boolean} oldValue - The previous value of 'persistOnItemClick'.
-     * @param {boolean} newValue - The new value of 'persistOnItemClick'.
+     * @param oldValue - The previous value of 'persistOnItemClick'.
+     * @param newValue - The new value of 'persistOnItemClick'.
      */
     persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void;
     /**
      * Called whenever the 'openOnContext' property changes.
      * Adds or removes a 'contextmenu' event listener to the trigger based on the new value.
      * @public
-     * @param {boolean} oldValue - The previous value of 'openOnContext'.
-     * @param {boolean} newValue - The new value of 'openOnContext'.
+     * @param oldValue - The previous value of 'openOnContext'.
+     * @param newValue - The new value of 'openOnContext'.
      */
     openOnContextChanged(oldValue: boolean, newValue: boolean): void;
     /**
      * Called whenever the 'closeOnScroll' property changes.
      * Adds or removes a 'closeOnScroll' event listener to the trigger based on the new value.
      * @public
-     * @param {boolean} oldValue - The previous value of 'closeOnScroll'.
-     * @param {boolean} newValue - The new value of 'closeOnScroll'.
+     * @param oldValue - The previous value of 'closeOnScroll'.
+     * @param newValue - The new value of 'closeOnScroll'.
      */
     closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
     /**
      * The task to set the positioning of the menu.
-     * @protected
+     * @internal
      */
     protected setPositioningTask: () => void;
     /**
      * Sets the positioning of the menu.
-     * @protected
+     * @internal
      */
     protected setPositioning(): void;
     /**
@@ -3778,29 +5260,29 @@ export declare class Menu extends FASTElement {
      * Removes event listeners.
      * Removes click and keydown event listeners from the trigger and a click event listener from the document.
      * Also removes 'mouseover' event listeners from the trigger.
-     * @private
+     * @internal
      */
     private removeListeners;
     /**
-     * Handles keyboard interaction for the menu.
-     * Closes the menu and focuses on the trigger when the Escape key is pressed.
-     * Closes the menu when the Tab key is pressed.
+     * Handles keyboard interaction for the menu. Closes the menu and focuses on the trigger when the Escape key is
+     * pressed. Closes the menu when the Tab key is pressed.
+     *
+     * @param e - the keyboard event
      * @public
-     * @param {KeyboardEvent} e - the keyboard event
      */
     handleMenuKeydown(e: KeyboardEvent): boolean | void;
     /**
-     * Handles keyboard interaction for the trigger.
-     * Toggles the menu when the Space or Enter key is pressed.
-     * If the menu is open, focuses on the menu list.
+     * Handles keyboard interaction for the trigger. Toggles the menu when the Space or Enter key is pressed. If the menu
+     * is open, focuses on the menu list.
+     *
+     * @param e - the keyboard event
      * @public
-     * @param {KeyboardEvent} e - the keyboard event
      */
     handleTriggerKeydown: (e: KeyboardEvent) => boolean | void;
     /**
      * Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
-     * @private
-     * @param {Event} e - The event triggered on document click.
+     * @internal
+     * @param e - The event triggered on document click.
      */
     private handleDocumentClick;
 }
@@ -4521,34 +6003,86 @@ export declare const roleForMenuItem: {
 
 /**
  * Sets the theme tokens on defaultNode.
- * @param theme Flat object of theme token values.
+ * @param theme - Flat object of theme token values.
+ * @internal
  */
 export declare const setTheme: (theme: Theme) => void;
 
+/**
+ * @internal
+ */
 export declare const setThemeFor: (element: HTMLElement, theme: Theme) => void;
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow16 | `shadow16`} design token.
+ * @public
+ */
 export declare const shadow16 = "var(--shadow16)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow16Brand | `shadow16Brand`} design token.
+ * @public
+ */
 export declare const shadow16Brand = "var(--shadow16Brand)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow2 | `shadow2`} design token.
+ * @public
+ */
 export declare const shadow2 = "var(--shadow2)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow28 | `shadow28`} design token.
+ * @public
+ */
 export declare const shadow28 = "var(--shadow28)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow28Brand | `shadow28Brand`} design token.
+ * @public
+ */
 export declare const shadow28Brand = "var(--shadow28Brand)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow2Brand | `shadow2Brand`} design token.
+ * @public
+ */
 export declare const shadow2Brand = "var(--shadow2Brand)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow4 | `shadow4`} design token.
+ * @public
+ */
 export declare const shadow4 = "var(--shadow4)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow4Brand | `shadow4Brand`} design token.
+ * @public
+ */
 export declare const shadow4Brand = "var(--shadow4Brand)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow64 | `shadow64`} design token.
+ * @public
+ */
 export declare const shadow64 = "var(--shadow64)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow64Brand | `shadow64Brand`} design token.
+ * @public
+ */
 export declare const shadow64Brand = "var(--shadow64Brand)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow8 | `shadow8`} design token.
+ * @public
+ */
 export declare const shadow8 = "var(--shadow8)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow8Brand | `shadow8Brand`} design token.
+ * @public
+ */
 export declare const shadow8Brand = "var(--shadow8Brand)";
 
 /**
@@ -4847,48 +6381,136 @@ export declare const SliderStyles: ElementStyles;
 
 export declare const SliderTemplate: ElementViewTemplate<Slider>;
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalL | `spacingHorizontalL`} design token.
+ * @public
+ */
 export declare const spacingHorizontalL = "var(--spacingHorizontalL)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalM | `spacingHorizontalM`} design token.
+ * @public
+ */
 export declare const spacingHorizontalM = "var(--spacingHorizontalM)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalMNudge | `spacingHorizontalMNudge`} design token.
+ * @public
+ */
 export declare const spacingHorizontalMNudge = "var(--spacingHorizontalMNudge)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalNone | `spacingHorizontalNone`} design token.
+ * @public
+ */
 export declare const spacingHorizontalNone = "var(--spacingHorizontalNone)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalS | `spacingHorizontalS`} design token.
+ * @public
+ */
 export declare const spacingHorizontalS = "var(--spacingHorizontalS)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalSNudge | `spacingHorizontalSNudge`} design token.
+ * @public
+ */
 export declare const spacingHorizontalSNudge = "var(--spacingHorizontalSNudge)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXL | `spacingHorizontalXL`} design token.
+ * @public
+ */
 export declare const spacingHorizontalXL = "var(--spacingHorizontalXL)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXS | `spacingHorizontalXS`} design token.
+ * @public
+ */
 export declare const spacingHorizontalXS = "var(--spacingHorizontalXS)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXXL | `spacingHorizontalXXL`} design token.
+ * @public
+ */
 export declare const spacingHorizontalXXL = "var(--spacingHorizontalXXL)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXXS | `spacingHorizontalXXS`} design token.
+ * @public
+ */
 export declare const spacingHorizontalXXS = "var(--spacingHorizontalXXS)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXXXL | `spacingHorizontalXXXL`} design token.
+ * @public
+ */
 export declare const spacingHorizontalXXXL = "var(--spacingHorizontalXXXL)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalL | `spacingVerticalL`} design token.
+ * @public
+ */
 export declare const spacingVerticalL = "var(--spacingVerticalL)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalM | `spacingVerticalM`} design token.
+ * @public
+ */
 export declare const spacingVerticalM = "var(--spacingVerticalM)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalMNudge | `spacingVerticalMNudge`} design token.
+ * @public
+ */
 export declare const spacingVerticalMNudge = "var(--spacingVerticalMNudge)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalNone | `spacingVerticalNone`} design token.
+ * @public
+ */
 export declare const spacingVerticalNone = "var(--spacingVerticalNone)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalS | `spacingVerticalS`} design token.
+ * @public
+ */
 export declare const spacingVerticalS = "var(--spacingVerticalS)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalSNudge | `spacingVerticalSNudge`} design token.
+ * @public
+ */
 export declare const spacingVerticalSNudge = "var(--spacingVerticalSNudge)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXL | `spacingVerticalXL`} design token.
+ * @public
+ */
 export declare const spacingVerticalXL = "var(--spacingVerticalXL)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXS | `spacingVerticalXS`} design token.
+ * @public
+ */
 export declare const spacingVerticalXS = "var(--spacingVerticalXS)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXXL | `spacingVerticalXXL`} design token.
+ * @public
+ */
 export declare const spacingVerticalXXL = "var(--spacingVerticalXXL)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXXS | `spacingVerticalXXS`} design token.
+ * @public
+ */
 export declare const spacingVerticalXXS = "var(--spacingVerticalXXS)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXXXL | `spacingVerticalXXXL`} design token.
+ * @public
+ */
 export declare const spacingVerticalXXXL = "var(--spacingVerticalXXXL)";
 
 /**
@@ -4906,7 +6528,6 @@ export declare class Spinner extends FASTElement {
      * The size of the spinner
      *
      * @public
-     * @default 'medium'
      * @remarks
      * HTML Attribute: size
      */
@@ -4914,7 +6535,6 @@ export declare class Spinner extends FASTElement {
     /**
      * The appearance of the spinner
      * @public
-     * @default 'primary'
      * @remarks
      * HTML Attribute: appearance
      */
@@ -5002,12 +6622,28 @@ declare type StartOptions<TSource = any, TParent = any> = {
  */
 declare type StaticallyComposableHTML<TSource = any, TParent = any> = string | HTMLDirective | SyntheticViewTemplate<TSource, TParent> | undefined;
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThick | `strokeWidthThick`} design token.
+ * @public
+ */
 export declare const strokeWidthThick = "var(--strokeWidthThick)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThicker | `strokeWidthThicker`} design token.
+ * @public
+ */
 export declare const strokeWidthThicker = "var(--strokeWidthThicker)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThickest | `strokeWidthThickest`} design token.
+ * @public
+ */
 export declare const strokeWidthThickest = "var(--strokeWidthThickest)";
 
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThin | `strokeWidthThin`} design token.
+ * @public
+ */
 export declare const strokeWidthThin = "var(--strokeWidthThin)";
 
 /**
@@ -5024,7 +6660,6 @@ export declare class Switch extends FormAssociatedSwitch {
      * The label position of the switch
      *
      * @public
-     * @default 'after'
      * @remarks
      * HTML Attribute: labelposition
      */
@@ -5191,21 +6826,25 @@ export declare class Tabs extends BaseTabs {
      */
     private getTabScale;
     /**
-     * applyUpdatedCSSValues
+     * Calculates and applies updated values to CSS variables.
      *
-     * calculates and applies updated values to CSS variables
-     * @param tab
+     * @param tab - the tab element to apply the updated values to
+     * @internal
      */
     private applyUpdatedCSSValues;
     /**
-     * animationLoop
-     * runs through all the operations required for setting the tab active indicator to its starting location, ending location, and applying the animated css class to the tab.
-     * @param tab
+     * Runs through all the operations required for setting the tab active indicator to its starting location, ending
+     * location, and applying the animated css class to the tab.
+     *
+     * @param tab - the tab element to apply the updated values to
+     * @internal
      */
     private animationLoop;
     /**
-     * setTabData
-     * sets the data from the active tab onto the class. used for making all the animation calculations for the active tab indicator.
+     * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
+     * tab indicator.
+     *
+     * @internal
      */
     private setTabData;
     private setTabOffsetCSSVar;
@@ -5414,7 +7053,6 @@ export declare class TextInput extends FASTElement {
      * Indicates the styled appearance of the element.
      *
      * @public
-     * @default 'outline'
      * @remarks
      * HTML Attribute: `appearance`
      */
@@ -5441,7 +7079,6 @@ export declare class TextInput extends FASTElement {
      * Sets the size of the control.
      *
      * @public
-     * @default 'medium'
      * @remarks
      * HTML Attribute: `control-size`
      */