@fluentui/web-components 2.5.5 → 2.5.7

package/dist/web-components.d.ts

@@ -35,7 +35,6 @@ import { FlipperOptions } from '@microsoft/fast-foundation';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import { FoundationElementTemplate } from '@microsoft/fast-foundation';
 import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation';
 import { HorizontalScrollOptions } from '@microsoft/fast-foundation';
 import { Listbox as Listbox_2 } from '@microsoft/fast-foundation';
@@ -66,7 +65,6 @@ import { TabPanel } from '@microsoft/fast-foundation';
 import { Tabs } from '@microsoft/fast-foundation';
 import { TextArea as TextArea_2 } from '@microsoft/fast-foundation';
 import { TextField as TextField_2 } from '@microsoft/fast-foundation';
-import { TextFieldOptions } from '@microsoft/fast-foundation';
 import { Toolbar as Toolbar_2 } from '@microsoft/fast-foundation';
 import { Tooltip as Tooltip_2 } from '@microsoft/fast-foundation';
 import { TreeItem } from '@microsoft/fast-foundation';
@@ -80,7 +78,7 @@ export declare const accentBaseColor: CSSDesignToken<Swatch>;
 /**
  * @internal
  */
-export declare const AccentButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
+export declare const AccentButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
 
 /** @public */
 export declare const accentFillActive: CSSDesignToken<Swatch>;
@@ -227,40 +225,8 @@ export declare const allComponents: {
     fluentTabs: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Tabs>;
     fluentTab: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Tab>;
     fluentTabPanel: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, TabPanel>;
-    fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition<    {
-    baseName: string;
-    baseClass: typeof TextArea_2;
-    template: FoundationElementTemplate<ViewTemplate<TextArea_2, any>, FoundationElementDefinition>;
-    styles: (context: any, definition: any) => ElementStyles;
-    shadowOptions: {
-    delegatesFocus: true;
-    };
-    }> | undefined) => FoundationElementRegistry<    {
-    baseName: string;
-    baseClass: typeof TextArea_2;
-    template: FoundationElementTemplate<ViewTemplate<TextArea_2, any>, FoundationElementDefinition>;
-    styles: (context: any, definition: any) => ElementStyles;
-    shadowOptions: {
-    delegatesFocus: true;
-    };
-    }, TextArea>;
-    fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition<    {
-    baseName: string;
-    baseClass: typeof TextField_2;
-    template: FoundationElementTemplate<ViewTemplate<TextField_2, any>, TextFieldOptions>;
-    styles: (context: any, definition: any) => ElementStyles;
-    shadowOptions: {
-    delegatesFocus: true;
-    };
-    }> | undefined) => FoundationElementRegistry<    {
-    baseName: string;
-    baseClass: typeof TextField_2;
-    template: FoundationElementTemplate<ViewTemplate<TextField_2, any>, TextFieldOptions>;
-    styles: (context: any, definition: any) => ElementStyles;
-    shadowOptions: {
-    delegatesFocus: true;
-    };
-    }, TextField>;
+    fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, TextArea>;
+    fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, TextField>;
     fluentToolbar: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Toolbar>;
     fluentTooltip: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Tooltip>;
     fluentTreeView: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TreeView>;
@@ -349,9 +315,11 @@ export declare type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | str
 export declare const badgeStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
 
 /**
+ * The base styles for button controls, without `appearance` visual differences.
+ *
  * @internal
  */
-export declare const baseButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
+export declare const baseButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
 
 /** @public */
 export declare const baseHeightMultiplier: CSSDesignToken<number>;
@@ -359,6 +327,13 @@ export declare const baseHeightMultiplier: CSSDesignToken<number>;
 /** @public */
 export declare const baseHorizontalSpacingMultiplier: CSSDesignToken<number>;
 
+/**
+ * The base styles for input controls, without `appearance` visual differences.
+ *
+ * @internal
+ */
+export declare const baseInputStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string) => ElementStyles;
+
 /** @public */
 export declare const baseLayerLuminance: CSSDesignToken<number>;
 
@@ -1693,23 +1668,7 @@ export declare const fluentTabs: (overrideDefinition?: OverrideFoundationElement
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
-export declare const fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition<    {
-baseName: string;
-baseClass: typeof TextArea_2;
-template: FoundationElementTemplate<ViewTemplate<TextArea_2, any>, FoundationElementDefinition>;
-styles: (context: any, definition: any) => ElementStyles;
-shadowOptions: {
-delegatesFocus: true;
-};
-}> | undefined) => FoundationElementRegistry<    {
-baseName: string;
-baseClass: typeof TextArea_2;
-template: FoundationElementTemplate<ViewTemplate<TextArea_2, any>, FoundationElementDefinition>;
-styles: (context: any, definition: any) => ElementStyles;
-shadowOptions: {
-delegatesFocus: true;
-};
-}, typeof TextArea>;
+export declare const fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TextArea>;
 
 /**
  * The Fluent Text Field Custom Element. Implements {@link @microsoft/fast-foundation#TextField},
@@ -1722,23 +1681,7 @@ delegatesFocus: true;
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
-export declare const fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition<    {
-baseName: string;
-baseClass: typeof TextField_2;
-template: FoundationElementTemplate<ViewTemplate<TextField_2, any>, TextFieldOptions>;
-styles: (context: any, definition: any) => ElementStyles;
-shadowOptions: {
-delegatesFocus: true;
-};
-}> | undefined) => FoundationElementRegistry<    {
-baseName: string;
-baseClass: typeof TextField_2;
-template: FoundationElementTemplate<ViewTemplate<TextField_2, any>, TextFieldOptions>;
-styles: (context: any, definition: any) => ElementStyles;
-shadowOptions: {
-delegatesFocus: true;
-};
-}, typeof TextField>;
+export declare const fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TextField>;
 
 /**
  * The Fluent Toolbar Custom Element. Implements {@link @microsoft/fast-foundation#Toolbar},
@@ -1804,6 +1747,21 @@ export declare const focusStrokeOuterRecipe: DesignToken<ColorRecipe>;
 /** @public */
 export declare const focusStrokeWidth: CSSDesignToken<number>;
 
+/**
+ * Partial CSS for the focus treatment for most typical sized components like Button, Menu Item, etc.
+ *
+ * @public
+ */
+export declare const focusTreatmentBase: CSSDirective;
+
+/**
+ * Partial CSS for the focus treatment for tighter components with spacing constraints, like Checkbox
+ * and Radio, or plain text like Hypertext appearance Anchor or Breadcrumb Item.
+ *
+ * @public
+ */
+export declare const focusTreatmentTight: CSSDirective;
+
 /** @public */
 export declare const fontWeight: CSSDesignToken<number>;
 
@@ -1870,32 +1828,33 @@ export declare const horizontalScrollStyles: (context: ElementDefinitionContext,
 /**
  * @internal
  */
-export declare const HypertextStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
-
-/**
- * @internal
- */
-export declare const inputFilledForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+export declare const HypertextStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
 
 /**
+ * The visual styles for inputs with `appearance='filled'`.
+ *
  * @internal
  */
-export declare const inputFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+export declare const inputFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
 
 /**
  * @internal
  */
-export declare const inputForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+export declare const inputForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
 
 /**
+ * The visual styles for inputs with `appearance='outline'`.
+ *
  * @internal
  */
-export declare const inputStateStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+export declare const inputOutlineStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
 
 /**
+ * The styles for active and focus interactions for input controls.
+ *
  * @internal
  */
-export declare const inputStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+export declare const inputStateStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string) => ElementStyles;
 
 /** @public */
 export declare interface InteractiveColorRecipe {
@@ -1937,7 +1896,7 @@ export declare const layerCornerRadius: CSSDesignToken<number>;
 /**
  * @internal
  */
-export declare const LightweightButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
+export declare const LightweightButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
 
 export declare class Listbox extends Listbox_2 {
 }
@@ -1976,6 +1935,11 @@ export declare const menuStyles: (context: ElementDefinitionContext, definition:
 /** @public */
 export declare const neutralBaseColor: CSSDesignToken<Swatch>;
 
+/**
+ * @internal
+ */
+export declare const NeutralButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
+
 /** @public @deprecated Use neutralFillInverseActive */
 export declare const neutralContrastFillActive: CSSDesignToken<Swatch>;
 
@@ -2497,7 +2461,7 @@ export declare type NumberFieldAppearance = 'filled' | 'outline';
  * Styles for NumberField
  * @public
  */
-export declare const numberFieldStyles: (context: any, definition: any) => ElementStyles;
+export declare const numberFieldStyles: (context: ElementDefinitionContext, definition: NumberFieldOptions) => ElementStyles;
 
 /**
  * Styles for Option
@@ -2508,7 +2472,7 @@ export declare const OptionStyles: (context: ElementDefinitionContext, definitio
 /**
  * @internal
  */
-export declare const OutlineButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
+export declare const OutlineButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
 
 /** @public @deprecated Use strokeWidth */
 export declare const outlineWidth: CSSDesignToken<number>;
@@ -2661,7 +2625,7 @@ export declare type SearchAppearance = 'filled' | 'outline';
  * Styles for Search
  * @public
  */
-export declare const searchStyles: (context: any, definition: any) => ElementStyles;
+export declare const searchStyles: (context: ElementDefinitionContext, definition: SearchOptions) => ElementStyles;
 
 /**
  * @public
@@ -2701,7 +2665,7 @@ export declare type SelectAppearance = 'filled' | 'outline' | 'stealth';
  * Styles for Select
  * @public
  */
-export declare const selectStyles: (context: any, definition: any) => ElementStyles;
+export declare const selectStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles;
 
 export { Skeleton }
 
@@ -2740,7 +2704,7 @@ export declare enum StandardLuminance {
 /**
  * @internal
  */
-export declare const StealthButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
+export declare const StealthButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
 
 /** @public */
 export declare const strokeWidth: CSSDesignToken<number>;
@@ -2836,7 +2800,7 @@ export declare type TextAreaAppearance = 'filled' | 'outline';
  * Styles for TextArea
  * @public
  */
-export declare const textAreaStyles: (context: any, definition: any) => ElementStyles;
+export declare const textAreaStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
 
 /**
  * The Fluent text field class
@@ -2871,7 +2835,7 @@ export declare type TextFieldAppearance = 'filled' | 'outline';
  * Styles for TextField
  * @public
  */
-export declare const textFieldStyles: (context: any, definition: any) => ElementStyles;
+export declare const textFieldStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
 
 /**
  * The Fluent toolbar class