@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.71

package/dist/dts/theme/index.d.ts

@@ -1,2 +1,2 @@
 export { borderRadiusNone, borderRadiusSmall, borderRadiusMedium, borderRadiusLarge, borderRadiusXLarge, borderRadiusCircular, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontSizeHero1000, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero700, lineHeightHero800, lineHeightHero900, lineHeightHero1000, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontWeightRegular, fontWeightMedium, fontWeightSemibold, fontWeightBold, strokeWidthThin, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, spacingHorizontalNone, spacingHorizontalXXS, spacingHorizontalXS, spacingHorizontalSNudge, spacingHorizontalS, spacingHorizontalMNudge, spacingHorizontalM, spacingHorizontalL, spacingHorizontalXL, spacingHorizontalXXL, spacingHorizontalXXXL, spacingVerticalNone, spacingVerticalXXS, spacingVerticalXS, spacingVerticalSNudge, spacingVerticalS, spacingVerticalMNudge, spacingVerticalM, spacingVerticalL, spacingVerticalXL, spacingVerticalXXL, spacingVerticalXXXL, durationUltraFast, durationFaster, durationFast, durationNormal, durationSlow, durationSlower, durationUltraSlow, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEaseMax, curveEasyEase, curveLinear, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground2, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground3, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInvertedDisabled, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorBrandForeground1, colorBrandForeground2, colorNeutralForeground1Static, colorNeutralForegroundStaticInverted, colorNeutralForegroundInverted, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundInverted2, colorNeutralForegroundOnBrand, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackgroundInverted, colorNeutralBackgroundStatic, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorNeutralBackgroundDisabled, colorNeutralBackgroundInvertedDisabled, colorNeutralStencil1, colorNeutralStencil2, colorNeutralStencil1Alpha, colorNeutralStencil2Alpha, colorBackgroundOverlay, colorScrollbarOverlay, colorBrandBackground, colorBrandBackgroundHover, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorBrandBackgroundStatic, colorBrandBackground2, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorBrandStroke1, colorBrandStroke2, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralStrokeDisabled, colorNeutralStrokeInvertedDisabled, colorTransparentStroke, colorTransparentStrokeInteractive, colorTransparentStrokeDisabled, colorStrokeFocus1, colorStrokeFocus2, colorNeutralShadowAmbient, colorNeutralShadowKey, colorNeutralShadowAmbientLighter, colorNeutralShadowKeyLighter, colorNeutralShadowAmbientDarker, colorNeutralShadowKeyDarker, colorBrandShadowAmbient, colorBrandShadowKey, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedBorderActive, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenBorderActive, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowBorderActive, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBerryBorderActive, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightGreenBorderActive, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMarigoldBorderActive, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteDarkRedBackground2, colorPaletteDarkRedForeground2, colorPaletteDarkRedBorderActive, colorPaletteCranberryBackground2, colorPaletteCranberryForeground2, colorPaletteCranberryBorderActive, colorPalettePumpkinBackground2, colorPalettePumpkinForeground2, colorPalettePumpkinBorderActive, colorPalettePeachBackground2, colorPalettePeachForeground2, colorPalettePeachBorderActive, colorPaletteGoldBackground2, colorPaletteGoldForeground2, colorPaletteGoldBorderActive, colorPaletteBrassBackground2, colorPaletteBrassForeground2, colorPaletteBrassBorderActive, colorPaletteBrownBackground2, colorPaletteBrownForeground2, colorPaletteBrownBorderActive, colorPaletteForestBackground2, colorPaletteForestForeground2, colorPaletteForestBorderActive, colorPaletteSeafoamBackground2, colorPaletteSeafoamForeground2, colorPaletteSeafoamBorderActive, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenForeground2, colorPaletteDarkGreenBorderActive, colorPaletteLightTealBackground2, colorPaletteLightTealForeground2, colorPaletteLightTealBorderActive, colorPaletteTealBackground2, colorPaletteTealForeground2, colorPaletteTealBorderActive, colorPaletteSteelBackground2, colorPaletteSteelForeground2, colorPaletteSteelBorderActive, colorPaletteBlueBackground2, colorPaletteBlueForeground2, colorPaletteBlueBorderActive, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueForeground2, colorPaletteRoyalBlueBorderActive, colorPaletteCornflowerBackground2, colorPaletteCornflowerForeground2, colorPaletteCornflowerBorderActive, colorPaletteNavyBackground2, colorPaletteNavyForeground2, colorPaletteNavyBorderActive, colorPaletteLavenderBackground2, colorPaletteLavenderForeground2, colorPaletteLavenderBorderActive, colorPalettePurpleBackground2, colorPalettePurpleForeground2, colorPalettePurpleBorderActive, colorPaletteGrapeBackground2, colorPaletteGrapeForeground2, colorPaletteGrapeBorderActive, colorPaletteLilacBackground2, colorPaletteLilacForeground2, colorPaletteLilacBorderActive, colorPalettePinkBackground2, colorPalettePinkForeground2, colorPalettePinkBorderActive, colorPaletteMagentaBackground2, colorPaletteMagentaForeground2, colorPaletteMagentaBorderActive, colorPalettePlumBackground2, colorPalettePlumForeground2, colorPalettePlumBorderActive, colorPaletteBeigeBackground2, colorPaletteBeigeForeground2, colorPaletteBeigeBorderActive, colorPaletteMinkBackground2, colorPaletteMinkForeground2, colorPaletteMinkBorderActive, colorPalettePlatinumBackground2, colorPalettePlatinumForeground2, colorPalettePlatinumBorderActive, colorPaletteAnchorBackground2, colorPaletteAnchorForeground2, colorPaletteAnchorBorderActive, colorPaletteRedForegroundInverted, colorPaletteGreenForegroundInverted, colorPaletteYellowForegroundInverted, shadow2, shadow4, shadow8, shadow16, shadow28, shadow64, shadow2Brand, shadow4Brand, shadow8Brand, shadow16Brand, shadow28Brand, shadow64Brand, } from './design-tokens.js';
-export { setTheme, setThemeFor } from './set-theme.js';
+export { setTheme, setThemeFor, type Theme } from './set-theme.js';

package/dist/dts/theme/set-theme.d.ts

@@ -1,7 +1,29 @@
-import type { Theme } from '@fluentui/tokens';
 /**
- * Sets the theme tokens on defaultNode.
- * @param theme Flat object of theme token values.
+ * Not using the `Theme` type from `@fluentui/tokens` package to allow custom
+ * tokens to be added.
+ * @internal
  */
-export declare const setTheme: (theme: Theme) => void;
-export declare const setThemeFor: (element: HTMLElement, theme: Theme) => void;
+export type Theme = Record<string, string | number>;
+/**
+ * Sets the theme tokens as CSS Custom Properties. The Custom Properties are
+ * set in a constructed stylesheet on `document.adoptedStyleSheets` if
+ * supported, and on `document.documentElement.style` as a fallback.
+ *
+ * @param theme - Flat object of theme tokens. Each object entry must follow
+ *     these rules: the key is the name of the token, usually in camel case, it
+ *     must be a valid CSS Custom Property name WITHOUT the starting two dashes
+ *     (`--`), the two dashes are added inside the function; the value must be
+ *     a valid CSS value, e.g. it cannot contain semicolons (`;`).
+ *     Note that this argument is not limited to existing theme objects (from
+ *     `@fluentui/tokens`), you can pass in an arbitrary theme object as long
+ *     as each entry’s value is either a string or a number.
+ * @param node - The node to set the theme on, defaults to `document` for
+ *     setting global theme.
+ * @internal
+ */
+export declare function setTheme(theme: Theme | null, node?: Document | HTMLElement): void;
+/**
+ * @internal
+ * @deprecated Use `setTheme(theme, element)` instead.
+ */
+export declare function setThemeFor(element: HTMLElement, theme: Theme | null): void;

package/dist/dts/theme/set-theme.global.bench.d.ts

@@ -0,0 +1,3 @@
+import { type TestRenderFunction } from '@tensile-perf/web-components';
+declare const tests: Record<string, TestRenderFunction>;
+export { tests };

package/dist/dts/theme/set-theme.local.bench.d.ts

@@ -0,0 +1,3 @@
+import { type TestRenderFunction } from '@tensile-perf/web-components';
+declare const tests: Record<string, TestRenderFunction>;
+export { tests };

package/dist/dts/theme/set-theme.shadow.bench.d.ts

@@ -0,0 +1,3 @@
+import { type TestRenderFunction } from '@tensile-perf/web-components';
+declare const tests: Record<string, TestRenderFunction>;
+export { tests };

package/dist/dts/toggle-button/index.d.ts

@@ -1,5 +1,6 @@
-export * from './toggle-button.js';
-export * from './toggle-button.options.js';
-export { template as ToggleButtonTemplate } from './toggle-button.template.js';
-export { styles as ToggleButtonStyles } from './toggle-button.styles.js';
 export { definition as ToggleButtonDefinition } from './toggle-button.definition.js';
+export { ToggleButton } from './toggle-button.js';
+export { ToggleButtonAppearance, ToggleButtonShape, ToggleButtonSize } from './toggle-button.options.js';
+export type { ToggleButtonOptions } from './toggle-button.options.js';
+export { styles as ToggleButtonStyles } from './toggle-button.styles.js';
+export { template as ToggleButtonTemplate } from './toggle-button.template.js';

package/dist/dts/toggle-button/toggle-button.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

package/dist/dts/toggle-button/toggle-button.d.ts

@@ -1,48 +1,51 @@
 import { Button } from '../button/button.js';
 /**
- * The base class used for constructing a fluent-toggle-button custom element
+ * The base class used for constructing a `<fluent-toggle-button>` custom element.
+ *
  * @public
  */
 export declare class ToggleButton extends Button {
     /**
-     * Tracks whether the "checked" property has been changed.
-     * This is necessary to provide consistent behavior with
-     * normal input checkboxes
+     * Indicates the pressed state of the control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `pressed`
      */
-    protected dirtyChecked: boolean;
+    pressed: boolean;
     /**
-     * Provides the default checkedness of the input element
-     * Passed down to proxy
+     * Updates the pressed state when the `pressed` property changes.
+     *
+     * @internal
+     */
+    protected pressedChanged(): void;
+    /**
+     * Indicates the mixed state of the control. This property takes precedence over `pressed`.
      *
      * @public
      * @remarks
-     * HTML Attribute: checked
+     * HTML Attribute: `mixed`
      */
-    checkedAttribute: boolean;
-    protected checkedAttributeChanged(): void;
-    defaultChecked: boolean;
-    protected defaultCheckedChanged(): void;
+    mixed?: boolean;
     /**
-     * The checked state of the control.
+     * Updates the pressed state when the `mixed` property changes.
      *
-     * @public
+     * @param previous - the previous mixed state
+     * @param next - the current mixed state
+     * @internal
      */
-    checked: boolean;
-    protected checkedChanged(prev: boolean | undefined, next: boolean): void;
+    protected mixedChanged(): void;
     /**
-     * The current checkedness of the element. This property serves as a mechanism
-     * to set the `checked` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's checkedness
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * Toggles the pressed state of the button.
+     *
+     * @override
      */
-    currentChecked: boolean;
-    currentCheckedChanged(prev: boolean | undefined, next: boolean): void;
-    constructor();
+    protected press(): void;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     /**
+     * Sets the `aria-pressed` attribute based on the `pressed` and `mixed` properties.
+     *
      * @internal
      */
-    protected handleToggleButtonClick: (e: MouseEvent) => void;
+    private setPressedState;
 }

package/dist/dts/toggle-button/toggle-button.definition.d.ts

@@ -1,7 +1,5 @@
 import { ToggleButton } from './toggle-button.js';
 /**
- * The Fluent Toggle Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
  *
  * @public
  * @remarks

package/dist/dts/toggle-button/toggle-button.options.d.ts

@@ -1,5 +1,5 @@
-import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ButtonOptions } from '../button/index.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * Toggle Button Appearance constants
  * @public
@@ -8,14 +8,13 @@ export declare const ToggleButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 /**
  * A Toggle Button can be secondary, primary, outline, subtle, transparent
  * @public
  */
-export declare type ToggleButtonAppearance = ValuesOf<typeof ToggleButtonAppearance>;
+export type ToggleButtonAppearance = ValuesOf<typeof ToggleButtonAppearance>;
 /**
  * A Toggle Button can be square, circular or rounded.
  * @public
@@ -29,7 +28,7 @@ export declare const ToggleButtonShape: {
  * A Toggle Button can be square, circular or rounded
  * @public
  */
-export declare type ToggleButtonShape = ValuesOf<typeof ToggleButtonShape>;
+export type ToggleButtonShape = ValuesOf<typeof ToggleButtonShape>;
 /**
  * A Toggle Button can be a size of small, medium or large.
  * @public
@@ -43,5 +42,5 @@ export declare const ToggleButtonSize: {
  * A Toggle Button can be on of several preset sizes.
  * @public
  */
-export declare type ToggleButtonSize = ValuesOf<typeof ToggleButtonSize>;
-export { ButtonOptions as ToggleButtonOptions };
+export type ToggleButtonSize = ValuesOf<typeof ToggleButtonSize>;
+export type { ButtonOptions as ToggleButtonOptions };

package/dist/dts/toggle-button/toggle-button.styles.d.ts

@@ -1 +1,8 @@
+/**
+ * The styles for the ToggleButton component.
+ *
+ * @public
+ * @privateRemarks
+ * TODO: Need to support icon hover styles
+ */
 export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/utils/behaviors/match-media-stylesheet-behavior.d.ts

@@ -0,0 +1,124 @@
+import type { ElementStyles, HostBehavior, HostController } from '@microsoft/fast-element';
+/**
+ * An event listener fired by a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList | MediaQueryList }.
+ * @public
+ */
+export type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
+/**
+ * An abstract behavior to react to media queries. Implementations should implement
+ * the `constructListener` method to perform some action based on media query changes.
+ *
+ * @public
+ */
+export declare abstract class MatchMediaBehavior implements HostBehavior {
+    /**
+     * The behavior needs to operate on element instances but elements might share a behavior instance.
+     * To ensure proper attachment / detachment per instance, we construct a listener for
+     * each bind invocation and cache the listeners by element reference.
+     */
+    private listenerCache;
+    /**
+     * The media query that the behavior operates on.
+     */
+    readonly query: MediaQueryList;
+    /**
+     *
+     * @param query - The media query to operate from.
+     */
+    constructor(query: MediaQueryList);
+    /**
+     * Constructs a function that will be invoked with the MediaQueryList context
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    protected abstract constructListener(controller: HostController): MediaQueryListListener;
+    /**
+     * Binds the behavior to the element.
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    connectedCallback(controller: HostController): void;
+    /**
+     * Unbinds the behavior from the element.
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    disconnectedCallback(controller: HostController): void;
+}
+/**
+ * A behavior to add or remove a stylesheet from an element based on a media query. The behavior ensures that
+ * styles are applied while the a query matches the environment and that styles are not applied if the query does
+ * not match the environment.
+ *
+ * @public
+ */
+export declare class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
+    /**
+     * The media query that the behavior operates on.
+     */
+    readonly query: MediaQueryList;
+    /**
+     * The styles object to be managed by the behavior.
+     */
+    readonly styles: ElementStyles;
+    /**
+     * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
+     * @param query - The media query to operate from.
+     * @param styles - The styles to coordinate with the query.
+     */
+    constructor(query: MediaQueryList, styles: ElementStyles);
+    /**
+     * Defines a function to construct {@link MatchMediaStyleSheetBehavior | MatchMediaStyleSheetBehaviors} for
+     * a provided query.
+     * @param query - The media query to operate from.
+     *
+     * @public
+     * @example
+     *
+     * ```ts
+     * import { css } from "@microsoft/fast-element";
+     * import { MatchMediaStyleSheetBehavior } from "@fluentui/web-components";
+     *
+     * const landscapeBehavior = MatchMediaStyleSheetBehavior.with(
+     *   window.matchMedia("(orientation: landscape)")
+     * );
+     *
+     * const styles = css`
+     *   :host {
+     *     width: 200px;
+     *     height: 400px;
+     *   }
+     * `
+     * .withBehaviors(landscapeBehavior(css`
+     *   :host {
+     *     width: 400px;
+     *     height: 200px;
+     *   }
+     * `))
+     * ```
+     */
+    static with(query: MediaQueryList): (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+    /**
+     * Constructs a match-media listener for a provided element.
+     * @param source - the element for which to attach or detach styles.
+     */
+    protected constructListener(controller: HostController): MediaQueryListListener;
+    /**
+     * Unbinds the behavior from the element.
+     * @param controller - The host controller orchestrating this behavior.
+     * @internal
+     */
+    removedCallback(controller: HostController<any>): void;
+}
+/**
+ * This can be used to construct a behavior to apply a forced-colors only stylesheet.
+ * @public
+ */
+export declare const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: dark only stylesheet.
+ * @public
+ */
+export declare const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: light only stylesheet.
+ * @public
+ */
+export declare const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;

package/dist/dts/utils/benchmark-dependencies/tokens.d.ts

@@ -0,0 +1 @@
+export * from '@fluentui/tokens';

package/dist/dts/utils/benchmark-wrapper.d.ts

@@ -0,0 +1,2 @@
+declare const wrappedTests: {};
+export { wrappedTests as tests };

package/dist/dts/utils/converters.d.ts

@@ -0,0 +1,17 @@
+import type { ValueConverter } from '@microsoft/fast-element';
+/**
+ * A {@link ValueConverter} that makes sure the attribute and property values
+ * are a string representation of a number, e.g. `'10'` instead of `10`.
+ *
+ * @remarks
+ * This converter allows any data type, but if the data is evaluated as `NaN`
+ * by `Number.isNaN()`, it’d be converted to an empty string. Otherwise, the
+ * converted value is a string of number.
+ *
+ * It is useful for somm  custom element’s attributes and properties, e.g.
+ * `min`, `max`, `step` on an `<input type=range>`-like element, to align with
+ * the built-in HTML element behavior, those property values should be strings.
+ *
+ * @public
+ */
+export declare const numberLikeStringConverter: ValueConverter;

package/dist/dts/utils/direction.d.ts

@@ -0,0 +1,10 @@
+import { Direction } from '@microsoft/fast-web-utilities';
+/**
+ * Determines the current localization direction of an element.
+ *
+ * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
+ * @returns the localization direction of the element
+ *
+ * @public
+ */
+export declare const getDirection: (rootNode: HTMLElement) => Direction;

package/dist/dts/utils/display.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Define all possible CSS display values.
+ * @public
+ */
+export 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';
+/**
+ * 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}";
+/**
+ * Applies a CSS display property.
+ * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
+ * @param display - The CSS display property value
+ * @public
+ */
+export declare function display(displayValue: CSSDisplayPropertyValue): string;

package/dist/dts/utils/element-internals.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Inference type for a CSS custom state selector.
+ * @public
+ */
+export type StateSelector<S> = S extends string ? `:state(${S})` | `[state--${S}]` : never;
+/**
+ * Check if the browser supports Custom States.
+ * @public
+ */
+export declare const CustomStatesSetSupported: boolean;
+/**
+ * Returns a string that represents a CSS custom state selector.
+ *
+ * @param state - the state value.
+ * @returns a string that represents a CSS state selector, or a custom attribute selector if the browser does not
+ * support Custom States.
+ *
+ * @public
+ */
+export declare function stateSelector<S extends string>(state: S): StateSelector<S>;
+/**
+ * This function is used to toggle a state on the control. If the browser supports Custom States, the state is toggled
+ * on the `ElementInternals.states` set. If the browser does not support Custom States, the state is toggled on the host
+ * element as an attribute with the format `state--{state}`.
+ *
+ * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet | CustomStateSet} interface
+ * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | ElementInternals} interface
+ * @see The CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/:state | `:state()`} pseudo-class
+ *
+ * @param elementInternals - the `ElementInternals` instance for the component
+ * @param state - the state to toggle
+ * @param force - force the state to be toggled on or off
+ * @internal
+ */
+export declare function toggleState(elementInternals: ElementInternals, state: string, force?: boolean): void;

package/dist/dts/utils/focusable-element.d.ts

@@ -0,0 +1,3 @@
+export declare const isARIADisabledElement: (el: Element) => boolean;
+export declare const isHiddenElement: (el: Element) => boolean;
+export declare const isFocusableElement: (el: Element) => boolean;

package/dist/dts/utils/index.d.ts

@@ -0,0 +1,7 @@
+export * from './converters.js';
+export * from './direction.js';
+export * from './typings.js';
+export * from './template-helpers.js';
+export * from './whitespace-filter.js';
+export * from './display.js';
+export * from './behaviors/match-media-stylesheet-behavior.js';

package/dist/dts/utils/root-active-element.d.ts

@@ -0,0 +1 @@
+export declare function getRootActiveElement(element: Element): Element | null;

package/dist/dts/utils/template-helpers.d.ts

@@ -0,0 +1,16 @@
+import { CaptureType, HTMLDirective } from '@microsoft/fast-element';
+import type { SyntheticViewTemplate } from '@microsoft/fast-element';
+/**
+ * A value that can be statically composed into a
+ * foundation template.
+ * @remarks
+ * When providing a string, take care to ensure that it is
+ * safe and will not enable an XSS attack.
+ * @public
+ */
+export type StaticallyComposableHTML<TSource = any, TParent = any> = string | HTMLDirective | SyntheticViewTemplate<TSource, TParent> | undefined;
+/**
+ * A function to compose template options.
+ * @public
+ */
+export declare function staticallyCompose<TSource = any, TParent = any>(item: StaticallyComposableHTML<TSource, TParent>): CaptureType<TSource, TParent>;

package/dist/dts/utils/typings.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Helper for enumerating a type from a const object
+ * Example: export type Foo = ValuesOf\<typeof Foo\>
+ * @public
+ */
+export type ValuesOf<T> = T[keyof T];

package/dist/dts/utils/whitespace-filter.d.ts

@@ -0,0 +1,12 @@
+import type { ElementsFilter } from '@microsoft/fast-element';
+/**
+ * filters out any whitespace-only nodes, to be used inside a template.
+ *
+ * @param value - The Node that is being inspected
+ * @param index - The index of the node within the array
+ * @param array - The Node array that is being filtered
+ * @returns true if the node is not a whitespace-only node, false otherwise
+ *
+ * @public
+ */
+export declare const whitespaceFilter: ElementsFilter;

package/dist/esm/accordion/accordion.bench.js

@@ -0,0 +1,30 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition as accordionItemDefinition } from '../accordion-item/accordion-item.definition.js';
+import { definition as accordiongDefinition } from './accordion.definition.js';
+accordiongDefinition.define(FluentDesignSystem.registry);
+accordionItemDefinition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const accordion = document.createElement('fluent-accordion');
+    const accordionItem = document.createElement('fluent-accordion-item');
+    const accordionItem2 = document.createElement('fluent-accordion-item');
+    const accordionItem3 = document.createElement('fluent-accordion-item');
+    const heading = document.createElement('span');
+    const heading2 = document.createElement('span');
+    const heading3 = document.createElement('span');
+    heading.setAttribute('slot', 'heading');
+    heading2.setAttribute('slot', 'heading');
+    heading3.setAttribute('slot', 'heading');
+    heading.appendChild(document.createTextNode('Accordion item 1'));
+    heading2.appendChild(document.createTextNode('Accordion item 2'));
+    heading3.appendChild(document.createTextNode('Accordion item 3'));
+    accordionItem.appendChild(heading);
+    accordionItem2.appendChild(heading2);
+    accordionItem3.appendChild(heading3);
+    accordion.appendChild(accordionItem);
+    accordion.appendChild(accordionItem2);
+    accordion.appendChild(accordionItem3);
+    return accordion;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=accordion.bench.js.map

package/dist/esm/accordion/accordion.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.bench.js","sourceRoot":"","sources":["../../../src/accordion/accordion.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AACvG,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,oBAAoB,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AACzD,uBAAuB,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE5D,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC7D,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACtE,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACvE,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACvE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAEhD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACzC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACzC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACjE,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClE,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAElE,aAAa,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACnC,cAAc,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IACrC,cAAc,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAErC,SAAS,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IACrC,SAAS,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IACtC,SAAS,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAEtC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/accordion/accordion.definition.js

@@ -3,10 +3,6 @@ import { Accordion } from './accordion.js';
 import { styles } from './accordion.styles.js';
 import { template } from './accordion.template.js';
 /**
- * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion },
- * {@link @microsoft/fast-foundation#accordionTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-accordion\>

package/dist/esm/accordion/accordion.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.definition.js","sourceRoot":"","sources":["../../../src/accordion/accordion.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC;IAC1C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,YAAY;IAC9C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"accordion.definition.js","sourceRoot":"","sources":["../../../src/accordion/accordion.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC;IAC1C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,YAAY;IAC9C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}