@fluentui/web-components 3.0.0-beta.10 → 3.0.0-beta.100

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,53 @@
 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.
+ *
+ * @tag fluent-toggle-button
+ *
  * @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.options.d.ts

@@ -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/toggle-button/toggle-button.template.d.ts

@@ -1,4 +1,4 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { ElementViewTemplate } from '@microsoft/fast-element';
 import type { ToggleButton } from './toggle-button.js';
 /**
  * The template for the ToggleButton component.

package/dist/dts/tooltip/define.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+export { definition as TooltipDefinition } from './tooltip.definition.js';
+export { Tooltip } from './tooltip.js';
+export { TooltipPositioningOption } from './tooltip.options.js';
+export { styles as TooltipStyles } from './tooltip.styles.js';
+export { template as TooltipTemplate } from './tooltip.template.js';

package/dist/dts/tooltip/tooltip.d.ts

@@ -0,0 +1,98 @@
+import { FASTElement } from '@microsoft/fast-element';
+import type { TooltipPositioningOption } from './tooltip.options.js';
+/**
+ * A Tooltip Custom HTML Element.
+ * Based on ARIA APG Tooltip Pattern {@link https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ }
+ *
+ * @tag fluent-tooltip
+ *
+ * @public
+ */
+export declare class Tooltip extends FASTElement {
+    /**
+     * The attached element internals
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The item ID
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: id
+     */
+    id: string;
+    /**
+     * Set the delay for the tooltip
+     */
+    delay?: number;
+    /**
+     * The default delay for the tooltip
+     * @internal
+     */
+    private defaultDelay;
+    /**
+     * Set the positioning of the tooltip
+     */
+    positioning?: TooltipPositioningOption;
+    /**
+     * Updates the fallback styles when the positioning changes.
+     *
+     * @internal
+     */
+    positioningChanged(): void;
+    /**
+     * The id of the anchor element for the tooltip
+     */
+    anchor: string;
+    /**
+     * Reference to the anchor element
+     * @internal
+     */
+    private get anchorElement();
+    /**
+     * Reference to the anchor positioning style element
+     * @internal
+     */
+    protected anchorPositioningStyleElement: HTMLStyleElement | null;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Shows the tooltip
+     * @param delay Number of milliseconds to delay showing the tooltip
+     * @internal
+     */
+    showTooltip(delay?: number): void;
+    /**
+     * Hide the tooltip
+     * @param delay Number of milliseconds to delay hiding the tooltip
+     * @internal
+     */
+    hideTooltip(delay?: number): void;
+    /**
+     * Show the tooltip on mouse enter
+     */
+    mouseenterAnchorHandler: () => void;
+    /**
+     * Hide the tooltip on mouse leave
+     */
+    mouseleaveAnchorHandler: () => void;
+    /**
+     * Show the tooltip on focus
+     */
+    focusAnchorHandler: () => void;
+    /**
+     * Hide the tooltip on blur
+     */
+    blurAnchorHandler: () => void;
+    private setFallbackStyles;
+}
+declare global {
+    interface Window {
+        CSS_ANCHOR_POLYFILL?: {
+            call: (options: {
+                element: HTMLStyleElement;
+            }) => void;
+        };
+    }
+}

package/dist/dts/tooltip/tooltip.definition.d.ts

@@ -0,0 +1,9 @@
+import { Tooltip } from './tooltip.js';
+/**
+ * The {@link Tooltip } custom element definition.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-tooltip>`
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Tooltip>;

package/dist/dts/tooltip/tooltip.options.d.ts

@@ -0,0 +1,24 @@
+import type { ValuesOf } from '../utils/typings.js';
+/**
+ * The TooltipPositioning options and their corresponding CSS values
+ * @public
+ */
+export declare const TooltipPositioningOption: {
+    readonly 'above-start': "block-start span-inline-end";
+    readonly above: "block-start";
+    readonly 'above-end': "block-start span-inline-start";
+    readonly 'below-start': "block-end span-inline-end";
+    readonly below: "block-end";
+    readonly 'below-end': "block-end span-inline-start";
+    readonly 'before-top': "inline-start span-block-end";
+    readonly before: "inline-start";
+    readonly 'before-bottom': "inline-start span-block-start";
+    readonly 'after-top': "inline-end span-block-end";
+    readonly after: "inline-end";
+    readonly 'after-bottom': "inline-end span-block-start";
+};
+/**
+ * The TooltipPositioning type
+ * @public
+ */
+export type TooltipPositioningOption = ValuesOf<typeof TooltipPositioningOption>;

package/dist/dts/tooltip/tooltip.styles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Styles for the tooltip component
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/tooltip/tooltip.template.d.ts

@@ -0,0 +1,6 @@
+import type { Tooltip } from './tooltip.js';
+/**
+ * Template for the tooltip component
+ * @public
+ */
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Tooltip, any>;

package/dist/dts/tree/define.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+export { BaseTree } from './tree.base.js';
+export { Tree } from './tree.js';
+export { template as TreeTemplate } from './tree.template.js';
+export { styles as TreeStyles } from './tree.styles.js';
+export { definition as TreeDefinition } from './tree.definition.js';

package/dist/dts/tree/tree.base.d.ts

@@ -0,0 +1,68 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { BaseTreeItem } from '../tree-item/tree-item.base';
+export declare class BaseTree extends FASTElement {
+    /**
+     * The currently selected tree item
+     * @public
+     */
+    currentSelected: HTMLElement | null;
+    /**
+     * The tree item that is designated to be in the tab queue.
+     *
+     * @internal
+     */
+    private currentFocused;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    constructor();
+    childTreeItems: BaseTreeItem[];
+    childTreeItemsChanged(): void;
+    /**
+     * Updates current selected when slottedTreeItems changes
+     */
+    private updateCurrentSelected;
+    /**
+     * KeyDown handler
+     *
+     *  @internal
+     */
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Handle focus events
+     *
+     * @internal
+     */
+    focusHandler(e: FocusEvent): void;
+    /**
+     * Handle blur events
+     *
+     * @internal
+     */
+    blurHandler(e: FocusEvent): void;
+    /**
+     * Handles click events bubbling up
+     *
+     *  @internal
+     */
+    clickHandler(e: Event): boolean | void;
+    /**
+     * Handles the selected-changed events bubbling up
+     * from child tree items
+     *
+     *  @internal
+     */
+    changeHandler(e: Event): boolean | void;
+    /**
+     * checks if there are any nested tree items
+     */
+    private getValidFocusableItem;
+    private getVisibleNodes;
+    /**
+     * Move focus to a tree item based on its offset from the provided item
+     */
+    private focusNextNode;
+}

package/dist/dts/tree/tree.bench.d.ts

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

package/dist/dts/tree/tree.d.ts

@@ -0,0 +1,34 @@
+import { TreeItemAppearance, TreeItemSize } from '../tree-item/tree-item.options';
+import { BaseTree } from './tree.base';
+/**
+ * The Fluent Tree Element. Implements {@link @microsoft/fast-foundation#BaseTree}.
+ *
+ * @tag fluent-tree
+ *
+ */
+export declare class Tree extends BaseTree {
+    /**
+     * The size of the tree item element
+     * @public
+     * HTML Attribute: size
+     */
+    size: TreeItemSize;
+    private sizeChanged;
+    /**
+     * The appearance variants of the tree item element
+     * @public
+     * HTML Attribute: appearance
+     */
+    appearance: TreeItemAppearance;
+    private appearanceChanged;
+    /**
+     * child tree items supered change event
+     * @internal
+     */
+    childTreeItemsChanged(): void;
+    /**
+     * 1. Update the child items' size based on the tree's size
+     * 2. Update the child items' appearance based on the tree's appearance
+     */
+    updateSizeAndAppearance(): void;
+}

package/dist/dts/tree/tree.definition.d.ts

@@ -0,0 +1,8 @@
+import { Tree } from './tree.js';
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-tree\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Tree>;

package/dist/dts/tree/tree.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/tree/tree.template.d.ts

@@ -0,0 +1,2 @@
+import type { Tree } from './tree.js';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Tree, any>;

package/dist/dts/tree-item/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dts/tree-item/index.d.ts

@@ -0,0 +1,6 @@
+export { BaseTreeItem } from './tree-item.base.js';
+export { TreeItem } from './tree-item.js';
+export { template as TreeItemTemplate } from './tree-item.template.js';
+export { styles as TreeItemStyles } from './tree-item.styles.js';
+export { definition as TreeItemDefinition } from './tree-item.definition.js';
+export type { isTreeItem, TreeItemAppearance, TreeItemSize } from './tree-item.options.js';

package/dist/dts/tree-item/tree-item.base.d.ts

@@ -0,0 +1,81 @@
+import { FASTElement } from '@microsoft/fast-element';
+export declare class BaseTreeItem extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    constructor();
+    /**
+     * When true, the control will be appear expanded by user interaction.
+     * @public
+     * HTML Attribute: `expanded`
+     */
+    expanded: boolean;
+    /**
+     * Handles changes to the expanded attribute
+     * @param prev - the previous state
+     * @param next - the next state
+     *
+     * @public
+     */
+    expandedChanged(prev: boolean, next: boolean): void;
+    /**
+     * When true, the control will appear selected by user interaction.
+     * @public
+     * @remarks
+     * HTML Attribute: selected
+     */
+    selected: boolean;
+    /**
+     * Handles changes to the selected attribute
+     * @param prev - the previous state
+     * @param next - the next state
+     *
+     * @internal
+     */
+    protected selectedChanged(prev: boolean, next: boolean): void;
+    /**
+     * When true, the control has no child tree items
+     * @public
+     * HTML Attribute: empty
+     */
+    empty: boolean;
+    private styles;
+    /**
+     * The indent of the tree item element.
+     * This is not needed once css attr() is supported (--indent: attr(data-indent type(<number>)));
+     * @public
+     */
+    dataIndent: number | undefined;
+    private dataIndentChanged;
+    childTreeItems: BaseTreeItem[] | undefined;
+    /**
+     * Handles changes to the child tree items
+     *
+     * @public
+     */
+    childTreeItemsChanged(): void;
+    /**
+     * Updates the childrens indent
+     *
+     * @public
+     */
+    updateChildTreeItems(): void;
+    /**
+     * Sets the indent for each item
+     */
+    private setIndent;
+    /**
+     * Toggle the expansion state of the tree item
+     *
+     * @public
+     */
+    toggleExpansion(): void;
+    /**
+     * Whether the tree is nested
+     * @internal
+     */
+    get isNestedItem(): boolean;
+}

package/dist/dts/tree-item/tree-item.bench.d.ts

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

package/dist/dts/tree-item/tree-item.d.ts

@@ -0,0 +1,44 @@
+import { TreeItemAppearance, TreeItemSize } from './tree-item.options.js';
+import { BaseTreeItem } from './tree-item.base.js';
+/**
+ * The Fluent Tree Item Element. Implements {@link @microsoft/fast-foundation#BaseTreeItem}.
+ *
+ * @tag fluent-tree-item
+ *
+ */
+export declare class TreeItem extends BaseTreeItem {
+    /**
+     * The size of the tree item element
+     * @public
+     */
+    size: TreeItemSize;
+    /**
+     * Handles changes to the size attribute
+     * we update the child tree items' size based on the size
+     *  @internal
+     */
+    private sizeChanged;
+    /**
+     * The size of the tree item element
+     * @public
+     */
+    appearance: TreeItemAppearance;
+    /**
+     * Handles changes to the appearance attribute
+     *
+     * @internal
+     */
+    private appearanceChanged;
+    /**
+     * child tree items supered change event
+     * @internal
+     */
+    childTreeItemsChanged(): void;
+    /**
+     * 1. Update the child items' size based on the tree's size
+     * 2. Update the child items' appearance based on the tree's appearance
+     *
+     * @public
+     */
+    updateSizeAndAppearance(): void;
+}