@fluentui/web-components 3.0.0-beta.14 → 3.0.0-beta.16

package/dist/web-components.d.ts

@@ -73,7 +73,7 @@ export declare const accordionDefinition: FASTElementDefinition<typeof Accordion
  * Expand mode for {@link FASTAccordion}
  * @public
  */
-declare const AccordionExpandMode: {
+export declare const AccordionExpandMode: {
     readonly single: "single";
     readonly multi: "multi";
 };
@@ -82,7 +82,7 @@ declare const AccordionExpandMode: {
  * Type for the {@link FASTAccordion} Expand Mode
  * @public
  */
-declare type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
+export declare type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
 
 /**
  *
@@ -412,6 +412,12 @@ export declare type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppeara
  */
 export declare const AnchorButtonDefinition: FASTElementDefinition<typeof AnchorButton>;
 
+/**
+ * Anchor configuration options
+ * @public
+ */
+export declare type AnchorButtonOptions = StartEndOptions<AnchorButton>;
+
 /**
  * An Anchor Button can be square, circular or rounded.
  * @public
@@ -450,14 +456,6 @@ export declare type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;
  */
 export declare const AnchorButtonTemplate: ElementViewTemplate<AnchorButton>;
 
-/**
- * Anchor configuration options
- * @public
- */
-declare type AnchorOptions = StartEndOptions<AnchorButton>;
-export { AnchorOptions as AnchorButtonOptions }
-export { AnchorOptions }
-
 /**
  * Anchor target values.
  *
@@ -1026,13 +1024,6 @@ export declare type BadgeColor = ValuesOf<typeof BadgeColor>;
  */
 export declare const BadgeDefinition: FASTElementDefinition<typeof Badge>;
 
-/**
- * @internal - marking as internal update when Badge PR for start/end is in
- */
-export declare type BadgeOptions = StartEndOptions<Badge> & {
-    defaultContent?: StaticallyComposableHTML;
-};
-
 /**
  * A Badge can be square, circular or rounded.
  * @public
@@ -1121,7 +1112,7 @@ declare class BaseProgress extends FASTElement {
  * @class TabList component
  * @public
  */
-export declare class BaseTabs extends FASTElement {
+declare class BaseTabs extends FASTElement {
     /**
      * The orientation
      * @public
@@ -1541,7 +1532,6 @@ export declare type ButtonFormTarget = ValuesOf<typeof ButtonFormTarget>;
  */
 declare type ButtonOptions = StartEndOptions<Button>;
 export { ButtonOptions }
-export { ButtonOptions as CompoundButtonOptions }
 export { ButtonOptions as MenuButtonOptions }
 export { ButtonOptions as ToggleButtonOptions }
 
@@ -1766,6 +1756,14 @@ export declare const colorBrandBackground = "var(--colorBrandBackground)";
 
 export declare const colorBrandBackground2 = "var(--colorBrandBackground2)";
 
+export declare const colorBrandBackground2Hover = "var(--colorBrandBackground2Hover)";
+
+export declare const colorBrandBackground2Pressed = "var(--colorBrandBackground2Pressed)";
+
+export declare const colorBrandBackground3Static = "var(--colorBrandBackground3Static)";
+
+export declare const colorBrandBackground4Static = "var(--colorBrandBackground4Static)";
+
 export declare const colorBrandBackgroundHover = "var(--colorBrandBackgroundHover)";
 
 export declare const colorBrandBackgroundInverted = "var(--colorBrandBackgroundInverted)";
@@ -1786,6 +1784,10 @@ export declare const colorBrandForeground1 = "var(--colorBrandForeground1)";
 
 export declare const colorBrandForeground2 = "var(--colorBrandForeground2)";
 
+export declare const colorBrandForeground2Hover = "var(--colorBrandForeground2Hover)";
+
+export declare const colorBrandForeground2Pressed = "var(--colorBrandForeground2Pressed)";
+
 export declare const colorBrandForegroundInverted = "var(--colorBrandForegroundInverted)";
 
 export declare const colorBrandForegroundInvertedHover = "var(--colorBrandForegroundInvertedHover)";
@@ -1816,6 +1818,12 @@ export declare const colorBrandStroke1 = "var(--colorBrandStroke1)";
 
 export declare const colorBrandStroke2 = "var(--colorBrandStroke2)";
 
+export declare const colorBrandStroke2Contrast = "var(--colorBrandStroke2Contrast)";
+
+export declare const colorBrandStroke2Hover = "var(--colorBrandStroke2Hover)";
+
+export declare const colorBrandStroke2Pressed = "var(--colorBrandStroke2Pressed)";
+
 export declare const colorCompoundBrandBackground = "var(--colorCompoundBrandBackground)";
 
 export declare const colorCompoundBrandBackgroundHover = "var(--colorCompoundBrandBackgroundHover)";
@@ -1876,6 +1884,10 @@ export declare const colorNeutralBackground5Selected = "var(--colorNeutralBackgr
 
 export declare const colorNeutralBackground6 = "var(--colorNeutralBackground6)";
 
+export declare const colorNeutralBackgroundAlpha = "var(--colorNeutralBackgroundAlpha)";
+
+export declare const colorNeutralBackgroundAlpha2 = "var(--colorNeutralBackgroundAlpha2)";
+
 export declare const colorNeutralBackgroundDisabled = "var(--colorNeutralBackgroundDisabled)";
 
 export declare const colorNeutralBackgroundInverted = "var(--colorNeutralBackgroundInverted)";
@@ -1884,6 +1896,16 @@ export declare const colorNeutralBackgroundInvertedDisabled = "var(--colorNeutra
 
 export declare const colorNeutralBackgroundStatic = "var(--colorNeutralBackgroundStatic)";
 
+export declare const colorNeutralCardBackground = "var(--colorNeutralCardBackground)";
+
+export declare const colorNeutralCardBackgroundDisabled = "var(--colorNeutralCardBackgroundDisabled)";
+
+export declare const colorNeutralCardBackgroundHover = "var(--colorNeutralCardBackgroundHover)";
+
+export declare const colorNeutralCardBackgroundPressed = "var(--colorNeutralCardBackgroundPressed)";
+
+export declare const colorNeutralCardBackgroundSelected = "var(--colorNeutralCardBackgroundSelected)";
+
 export declare const colorNeutralForeground1 = "var(--colorNeutralForeground1)";
 
 export declare const colorNeutralForeground1Hover = "var(--colorNeutralForeground1Hover)";
@@ -1998,6 +2020,10 @@ export declare const colorNeutralStrokeAccessiblePressed = "var(--colorNeutralSt
 
 export declare const colorNeutralStrokeAccessibleSelected = "var(--colorNeutralStrokeAccessibleSelected)";
 
+export declare const colorNeutralStrokeAlpha = "var(--colorNeutralStrokeAlpha)";
+
+export declare const colorNeutralStrokeAlpha2 = "var(--colorNeutralStrokeAlpha2)";
+
 export declare const colorNeutralStrokeDisabled = "var(--colorNeutralStrokeDisabled)";
 
 export declare const colorNeutralStrokeInvertedDisabled = "var(--colorNeutralStrokeInvertedDisabled)";
@@ -2012,6 +2038,8 @@ export declare const colorNeutralStrokeOnBrand2Pressed = "var(--colorNeutralStro
 
 export declare const colorNeutralStrokeOnBrand2Selected = "var(--colorNeutralStrokeOnBrand2Selected)";
 
+export declare const colorNeutralStrokeSubtle = "var(--colorNeutralStrokeSubtle)";
+
 export declare const colorPaletteAnchorBackground2 = "var(--colorPaletteAnchorBackground2)";
 
 export declare const colorPaletteAnchorBorderActive = "var(--colorPaletteAnchorBorderActive)";
@@ -2314,6 +2342,70 @@ export declare const colorPaletteYellowForegroundInverted = "var(--colorPaletteY
 
 export declare const colorScrollbarOverlay = "var(--colorScrollbarOverlay)";
 
+export declare const colorStatusDangerBackground1 = "var(--colorStatusDangerBackground1)";
+
+export declare const colorStatusDangerBackground2 = "var(--colorStatusDangerBackground2)";
+
+export declare const colorStatusDangerBackground3 = "var(--colorStatusDangerBackground3)";
+
+export declare const colorStatusDangerBackground3Hover = "var(--colorStatusDangerBackground3Hover)";
+
+export declare const colorStatusDangerBackground3Pressed = "var(--colorStatusDangerBackground3Pressed)";
+
+export declare const colorStatusDangerBorder1 = "var(--colorStatusDangerBorder1)";
+
+export declare const colorStatusDangerBorder2 = "var(--colorStatusDangerBorder2)";
+
+export declare const colorStatusDangerBorderActive = "var(--colorStatusDangerBorderActive)";
+
+export declare const colorStatusDangerForeground1 = "var(--colorStatusDangerForeground1)";
+
+export declare const colorStatusDangerForeground2 = "var(--colorStatusDangerForeground2)";
+
+export declare const colorStatusDangerForeground3 = "var(--colorStatusDangerForeground3)";
+
+export declare const colorStatusDangerForegroundInverted = "var(--colorStatusDangerForegroundInverted)";
+
+export declare const colorStatusSuccessBackground1 = "var(--colorStatusSuccessBackground1)";
+
+export declare const colorStatusSuccessBackground2 = "var(--colorStatusSuccessBackground2)";
+
+export declare const colorStatusSuccessBackground3 = "var(--colorStatusSuccessBackground3)";
+
+export declare const colorStatusSuccessBorder1 = "var(--colorStatusSuccessBorder1)";
+
+export declare const colorStatusSuccessBorder2 = "var(--colorStatusSuccessBorder2)";
+
+export declare const colorStatusSuccessBorderActive = "var(--colorStatusSuccessBorderActive)";
+
+export declare const colorStatusSuccessForeground1 = "var(--colorStatusSuccessForeground1)";
+
+export declare const colorStatusSuccessForeground2 = "var(--colorStatusSuccessForeground2)";
+
+export declare const colorStatusSuccessForeground3 = "var(--colorStatusSuccessForeground3)";
+
+export declare const colorStatusSuccessForegroundInverted = "var(--colorStatusSuccessForegroundInverted)";
+
+export declare const colorStatusWarningBackground1 = "var(--colorStatusWarningBackground1)";
+
+export declare const colorStatusWarningBackground2 = "var(--colorStatusWarningBackground2)";
+
+export declare const colorStatusWarningBackground3 = "var(--colorStatusWarningBackground3)";
+
+export declare const colorStatusWarningBorder1 = "var(--colorStatusWarningBorder1)";
+
+export declare const colorStatusWarningBorder2 = "var(--colorStatusWarningBorder2)";
+
+export declare const colorStatusWarningBorderActive = "var(--colorStatusWarningBorderActive)";
+
+export declare const colorStatusWarningForeground1 = "var(--colorStatusWarningForeground1)";
+
+export declare const colorStatusWarningForeground2 = "var(--colorStatusWarningForeground2)";
+
+export declare const colorStatusWarningForeground3 = "var(--colorStatusWarningForeground3)";
+
+export declare const colorStatusWarningForegroundInverted = "var(--colorStatusWarningForegroundInverted)";
+
 export declare const colorStrokeFocus1 = "var(--colorStrokeFocus1)";
 
 export declare const colorStrokeFocus2 = "var(--colorStrokeFocus2)";
@@ -2569,12 +2661,6 @@ export declare type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
  */
 export declare const CounterBadgeDefinition: FASTElementDefinition<typeof CounterBadge>;
 
-/**
- * CounterBadge options
- * @public
- */
-export declare type CounterBadgeOptions = BadgeOptions;
-
 /**
  * A CounterBadge shape can be circular or rounded.
  * @public
@@ -2624,7 +2710,7 @@ export declare const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
  * Define all possible CSS display values.
  * @public
  */
-export 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';
+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';
 
 export declare const curveAccelerateMax = "var(--curveAccelerateMax)";
 
@@ -2655,7 +2741,7 @@ export declare const darkModeStylesheetBehavior: (styles: ElementStyles) => Matc
  *
  * @public
  */
-export declare class DelegatesARIALink {
+declare class DelegatesARIALink {
     /**
      * See {@link https://www.w3.org/WAI/PF/aria/roles#link} for more information
      * @public
@@ -2671,7 +2757,7 @@ export declare class DelegatesARIALink {
  * TODO: https://github.com/microsoft/fast/issues/3317
  * @internal
  */
-export declare interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
+declare interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
 }
 
 /**
@@ -2679,10 +2765,10 @@ export declare interface DelegatesARIALink extends ARIAGlobalStatesAndProperties
  *
  * @public
  */
-export declare class DelegatesARIATextbox {
+declare class DelegatesARIATextbox {
 }
 
-export declare interface DelegatesARIATextbox extends ARIAGlobalStatesAndProperties {
+declare interface DelegatesARIATextbox extends ARIAGlobalStatesAndProperties {
 }
 
 /**
@@ -2888,13 +2974,13 @@ export declare const DialogDefinition: FASTElementDefinition<typeof Dialog>;
  * Dialog modal type
  * @public
  */
-declare const DialogModalType: {
+export declare const DialogModalType: {
     readonly modal: "modal";
     readonly nonModal: "non-modal";
     readonly alert: "alert";
 };
 
-declare type DialogModalType = ValuesOf<typeof DialogModalType>;
+export declare type DialogModalType = ValuesOf<typeof DialogModalType>;
 
 /** Dialog styles
  * @public
@@ -3057,6 +3143,8 @@ export declare const durationFast = "var(--durationFast)";
 
 export declare const durationFaster = "var(--durationFaster)";
 
+export declare const durationGentle = "var(--durationGentle)";
+
 export declare const durationNormal = "var(--durationNormal)";
 
 export declare const durationSlow = "var(--durationSlow)";
@@ -3218,12 +3306,6 @@ declare const FormAssociatedTextField_base: typeof _TextField;
  */
 export declare const getDirection: (rootNode: HTMLElement) => Direction;
 
-/**
- * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
- * @public
- */
-export declare const hidden = ":host([hidden]){display:none}";
-
 /**
  * The base class used for constucting a fluent image custom element
  * @public
@@ -3377,7 +3459,7 @@ export declare const LabelDefinition: FASTElementDefinition<typeof Label>;
 /**
  * A Labels font size can be small, medium, or large
  */
-declare const LabelSize: {
+export declare const LabelSize: {
     readonly small: "small";
     readonly medium: "medium";
     readonly large: "large";
@@ -3387,7 +3469,7 @@ declare const LabelSize: {
  * Applies font size to label
  * @public
  */
-declare type LabelSize = ValuesOf<typeof LabelSize>;
+export declare type LabelSize = ValuesOf<typeof LabelSize>;
 
 /** Label styles
  * @public
@@ -3399,7 +3481,7 @@ export declare const LabelTemplate: ElementViewTemplate<Label>;
 /**
  * A label can have a font weight of regular or strong
  */
-declare const LabelWeight: {
+export declare const LabelWeight: {
     readonly regular: "regular";
     readonly semibold: "semibold";
 };
@@ -3408,7 +3490,7 @@ declare const LabelWeight: {
  * Applies font weight to label
  * @public
  */
-declare type LabelWeight = ValuesOf<typeof LabelWeight>;
+export declare type LabelWeight = ValuesOf<typeof LabelWeight>;
 
 /**
  * This can be used to construct a behavior to apply a prefers color scheme: light only stylesheet.
@@ -4227,21 +4309,6 @@ export declare type ProgressOptions = {
     indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar>;
 };
 
-/**
- * An circular Progress HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
- *
- * @slot indeterminate - The slot for a custom indeterminate indicator
- * @slot determinate - The slot for a custom determinate indicator
- * @csspart progress - Represents the progress element
- * @csspart determinate - The determinate indicator
- * @csspart background - The background
- *
- * @public
- */
-declare class ProgressRing extends BaseProgress {
-}
-
 /**
  * A Radio Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
@@ -4426,7 +4493,7 @@ export declare const RadioGroupDefinition: FASTElementDefinition<typeof RadioGro
  * Radio Group orientation
  * @public
  */
-declare const RadioGroupOrientation: {
+export declare const RadioGroupOrientation: {
     readonly horizontal: "horizontal"; /**
     * Radio Group orientation
     * @public
@@ -4438,7 +4505,7 @@ declare const RadioGroupOrientation: {
  * Types of Radio Group orientation
  * @public
  */
-declare type RadioGroupOrientation = ValuesOf<typeof RadioGroupOrientation>;
+export declare type RadioGroupOrientation = ValuesOf<typeof RadioGroupOrientation>;
 
 /** RadioGroup styles
  * @public
@@ -4466,7 +4533,7 @@ export declare const RadioTemplate: ElementViewTemplate<Radio>;
  * @internal
  */
 export declare const roleForMenuItem: {
-    [value in keyof typeof MenuItemRole]: typeof MenuItemRole[value];
+    [value in keyof typeof MenuItemRole]: (typeof MenuItemRole)[value];
 };
 
 /**
@@ -4845,7 +4912,7 @@ export declare const spacingVerticalXXXL = "var(--spacingVerticalXXXL)";
  * The base class used for constructing a fluent-spinner custom element
  * @public
  */
-export declare class Spinner extends ProgressRing {
+export declare class Spinner extends BaseProgress {
     /**
      * The size of the spinner
      *
@@ -4887,6 +4954,14 @@ export declare type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
  */
 export declare const SpinnerDefinition: FASTElementDefinition<typeof Spinner>;
 
+/**
+ * Progress configuration options
+ * @public
+ */
+export declare type SpinnerOptions = {
+    indeterminateIndicator?: StaticallyComposableHTML<Spinner>;
+};
+
 /**
  * SpinnerSize constants
  * @public
@@ -5330,41 +5405,6 @@ declare class _TextField extends FASTElement {
 declare interface _TextField extends FormAssociated {
 }
 
-export declare type TextFieldOptions = StartEndOptions<TextInput>;
-
-/**
- * Text field sub-types
- * @public
- */
-export declare const TextFieldType: {
-    /**
-     * An email TextField
-     */
-    readonly email: "email";
-    /**
-     * A password TextField
-     */
-    readonly password: "password";
-    /**
-     * A telephone TextField
-     */
-    readonly tel: "tel";
-    /**
-     * A text TextField
-     */
-    readonly text: "text";
-    /**
-     * A URL TextField
-     */
-    readonly url: "url";
-};
-
-/**
- * Types for the text field sub-types
- * @public
- */
-export declare type TextFieldType = ValuesOf<typeof TextFieldType>;
-
 /**
  * TextFont Constants
  * @public
@@ -5431,7 +5471,7 @@ export declare class TextInput extends FormAssociatedTextField {
      * @remarks
      * HTML Attribute: type
      */
-    type: TextFieldType;
+    type: TextInputType;
     private typeChanged;
     /**
      * Allows associating a {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist} to the element by {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/id}.
@@ -5565,6 +5605,8 @@ export declare type TextInputControlSize = ValuesOf<typeof TextInputControlSize>
  */
 export declare const TextInputDefinition: FASTElementDefinition<typeof TextInput>;
 
+export declare type TextInputOptions = StartEndOptions<TextInput>;
+
 /** TextInput styles
  * @public
  */
@@ -5575,6 +5617,39 @@ export declare const TextInputStyles: ElementStyles;
  */
 export declare const TextInputTemplate: ElementViewTemplate<TextInput>;
 
+/**
+ * Text field sub-types
+ * @public
+ */
+export declare const TextInputType: {
+    /**
+     * An email TextInput
+     */
+    readonly email: "email";
+    /**
+     * A password TextInput
+     */
+    readonly password: "password";
+    /**
+     * A telephone TextInput
+     */
+    readonly tel: "tel";
+    /**
+     * A text TextInput
+     */
+    readonly text: "text";
+    /**
+     * A URL TextInput
+     */
+    readonly url: "url";
+};
+
+/**
+ * Types for the text field sub-types
+ * @public
+ */
+export declare type TextInputType = ValuesOf<typeof TextInputType>;
+
 /**
  * TextSize constants
  * @public