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

package/dist/esm/tooltip/tooltip.js

@@ -0,0 +1,188 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
+import { uniqueId } from '@microsoft/fast-web-utilities';
+const SUPPORTS_CSS_ANCHOR_POSITIONING = CSS.supports('anchor-name: --a');
+const SUPPORTS_HTML_ANCHOR_POSITIONING = 'anchor' in HTMLElement.prototype;
+/**
+ * A Tooltip Custom HTML Element.
+ * Based on ARIA APG Tooltip Pattern {@link https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ }
+ * @public
+ */
+export class Tooltip extends FASTElement {
+    /**
+     * Reference to the anchor element
+     * @internal
+     */
+    get anchorElement() {
+        var _a;
+        const rootNode = this.getRootNode();
+        return (rootNode instanceof ShadowRoot ? rootNode : document).getElementById((_a = this.anchor) !== null && _a !== void 0 ? _a : '');
+    }
+    constructor() {
+        super();
+        /**
+         * The attached element internals
+         */
+        this.elementInternals = this.attachInternals();
+        /**
+         * The item ID
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: id
+         */
+        this.id = uniqueId('tooltip-');
+        /**
+         * The default delay for the tooltip
+         * @internal
+         */
+        this.defaultDelay = 250;
+        /**
+         * The id of the anchor element for the tooltip
+         */
+        this.anchor = '';
+        /**
+         * Reference to the anchor positioning style element
+         * @internal
+         */
+        this.anchorPositioningStyleElement = null;
+        /**
+         * Show the tooltip on mouse enter
+         */
+        this.mouseenterAnchorHandler = () => this.showTooltip(this.delay);
+        /**
+         * Hide the tooltip on mouse leave
+         */
+        this.mouseleaveAnchorHandler = () => this.hideTooltip(this.delay);
+        /**
+         * Show the tooltip on focus
+         */
+        this.focusAnchorHandler = () => this.showTooltip(0);
+        /**
+         * Hide the tooltip on blur
+         */
+        this.blurAnchorHandler = () => this.hideTooltip(0);
+        this.elementInternals.role = 'tooltip';
+    }
+    connectedCallback() {
+        var _a, _b, _c, _d;
+        super.connectedCallback();
+        // If the anchor element is not found, tooltip will not be shown
+        if (!this.anchorElement) {
+            return;
+        }
+        // @ts-expect-error - Baseline 2024
+        const anchorName = this.anchorElement.style.anchorName || `--${this.anchor}`;
+        const describedBy = this.anchorElement.getAttribute('aria-describedby');
+        this.anchorElement.setAttribute('aria-describedby', describedBy ? `${describedBy} ${this.id}` : this.id);
+        if (SUPPORTS_CSS_ANCHOR_POSITIONING) {
+            if (!SUPPORTS_HTML_ANCHOR_POSITIONING) {
+                // @ts-expect-error - Baseline 2024
+                this.anchorElement.style.anchorName = anchorName;
+                // @ts-expect-error - Baseline 2024
+                this.style.positionAnchor = anchorName;
+            }
+        }
+        else {
+            // Provide style fallback for browsers that do not support anchor positioning
+            if (!this.anchorPositioningStyleElement) {
+                this.anchorPositioningStyleElement = document.createElement('style');
+                document.head.append(this.anchorPositioningStyleElement);
+            }
+            // Given a position with <direction>-<alignment> format, return the proper CSS properties
+            // eslint-disable-next-line prefer-const
+            let [direction, alignment] = (_b = (_a = this.positioning) === null || _a === void 0 ? void 0 : _a.split('-')) !== null && _b !== void 0 ? _b : [];
+            if (alignment === undefined && (direction === 'above' || direction === 'below')) {
+                alignment = 'centerX';
+            }
+            if (alignment === undefined && (direction === 'before' || direction === 'after')) {
+                alignment = 'centerY';
+            }
+            const directionCSSMap = {
+                above: `bottom: anchor(${anchorName} top);`,
+                below: `top: anchor(${anchorName} bottom);`,
+                before: `right: anchor(${anchorName} left);`,
+                after: `left: anchor(${anchorName} right);`,
+            };
+            const directionCSS = (_c = directionCSSMap[direction]) !== null && _c !== void 0 ? _c : directionCSSMap.above;
+            const alignmentCSSMap = {
+                start: `left: anchor(${anchorName} left);`,
+                end: `right: anchor(${anchorName} right);`,
+                top: `top: anchor(${anchorName} top);`,
+                bottom: `bottom: anchor(${anchorName} bottom);`,
+                centerX: `left: anchor(${anchorName} center); translate: -50% 0;`,
+                centerY: `top: anchor(${anchorName} center); translate: 0 -50%;`,
+            };
+            const alignmentCSS = (_d = alignmentCSSMap[alignment]) !== null && _d !== void 0 ? _d : alignmentCSSMap.centerX;
+            this.anchorPositioningStyleElement.textContent = `
+          #${this.anchor} {
+            anchor-name: ${anchorName};
+          }
+          #${this.id} {
+            inset: unset;
+            ${directionCSS}
+            ${alignmentCSS}
+            position: absolute;
+          }
+        `;
+            if (window.CSS_ANCHOR_POLYFILL) {
+                window.CSS_ANCHOR_POLYFILL.call({ element: this.anchorPositioningStyleElement });
+            }
+        }
+        this.anchorElement.addEventListener('focus', this.focusAnchorHandler);
+        this.anchorElement.addEventListener('blur', this.blurAnchorHandler);
+        this.anchorElement.addEventListener('mouseenter', this.mouseenterAnchorHandler);
+        this.anchorElement.addEventListener('mouseleave', this.mouseleaveAnchorHandler);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        super.disconnectedCallback();
+        (_a = this.anchorElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('focus', this.focusAnchorHandler);
+        (_b = this.anchorElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('blur', this.blurAnchorHandler);
+        (_c = this.anchorElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseenter', this.mouseenterAnchorHandler);
+        (_d = this.anchorElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseleave', this.mouseleaveAnchorHandler);
+    }
+    /**
+     * Shows the tooltip
+     * @param delay Number of milliseconds to delay showing the tooltip
+     * @internal
+     */
+    showTooltip(delay = this.defaultDelay) {
+        setTimeout(() => {
+            this.setAttribute('aria-hidden', 'false');
+            //// @ts-expect-error - Baseline 2024
+            this.showPopover();
+        }, delay);
+    }
+    /**
+     * Hide the tooltip
+     * @param delay Number of milliseconds to delay hiding the tooltip
+     * @internal
+     */
+    hideTooltip(delay = this.defaultDelay) {
+        setTimeout(() => {
+            var _a;
+            // Detect if the tooltip or anchor element is still hovered and enqueue another hide
+            if (this.matches(':hover') || ((_a = this.anchorElement) === null || _a === void 0 ? void 0 : _a.matches(':hover'))) {
+                this.hideTooltip(delay);
+                return;
+            }
+            this.setAttribute('aria-hidden', 'true');
+            //// @ts-expect-error - Baseline 2024
+            this.hidePopover();
+        }, delay);
+    }
+}
+__decorate([
+    attr
+], Tooltip.prototype, "id", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], Tooltip.prototype, "delay", void 0);
+__decorate([
+    attr
+], Tooltip.prototype, "positioning", void 0);
+__decorate([
+    attr
+], Tooltip.prototype, "anchor", void 0);
+//# sourceMappingURL=tooltip.js.map

package/dist/esm/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.ts"],"names":[],"mappings":"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"}

package/dist/esm/tooltip/tooltip.options.js

@@ -0,0 +1,19 @@
+/**
+ * The TooltipPositioning options and their corresponding CSS values
+ * @public
+ */
+export const TooltipPositioningOption = {
+    'above-start': 'block-start span-inline-end',
+    above: 'block-start',
+    'above-end': 'block-start span-inline-start',
+    'below-start': 'block-end span-inline-end',
+    below: 'block-end',
+    'below-end': 'block-end span-inline-start',
+    'before-top': 'inline-start span-block-end',
+    before: 'inline-start',
+    'before-bottom': 'inline-start span-block-start',
+    'after-top': 'inline-end span-block-end',
+    after: 'inline-end',
+    'after-bottom': 'inline-end span-block-start',
+};
+//# sourceMappingURL=tooltip.options.js.map

package/dist/esm/tooltip/tooltip.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.options.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,aAAa,EAAE,6BAA6B;IAC5C,KAAK,EAAE,aAAa;IACpB,WAAW,EAAE,+BAA+B;IAC5C,aAAa,EAAE,2BAA2B;IAC1C,KAAK,EAAE,WAAW;IAClB,WAAW,EAAE,6BAA6B;IAC1C,YAAY,EAAE,6BAA6B;IAC3C,MAAM,EAAE,cAAc;IACtB,eAAe,EAAE,+BAA+B;IAChD,WAAW,EAAE,2BAA2B;IACxC,KAAK,EAAE,YAAY;IACnB,cAAc,EAAE,6BAA6B;CACrC,CAAC"}

package/dist/esm/tooltip/tooltip.styles.js

@@ -0,0 +1,95 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../utils/display.js';
+import { borderRadiusMedium, colorNeutralBackground1, colorNeutralForeground1, colorNeutralShadowAmbient, colorNeutralShadowKey, colorTransparentStroke, fontFamilyBase, fontSizeBase200, lineHeightBase200, spacingHorizontalMNudge, spacingHorizontalXS, spacingVerticalXS, } from '../theme/design-tokens.js';
+import { TooltipPositioningOption } from './tooltip.options.js';
+/**
+ * Styles for the tooltip component
+ * @public
+ */
+export const styles = css `
+  ${display('inline-flex')}
+
+  :host(:not(:popover-open)) {
+    display: none;
+  }
+
+  :host {
+    --position-area: block-start;
+    --position-try-options: flip-block;
+    --block-offset: ${spacingVerticalXS};
+    --inline-offset: ${spacingHorizontalXS};
+    background: ${colorNeutralBackground1};
+    border-radius: ${borderRadiusMedium};
+    border: 1px solid ${colorTransparentStroke};
+    box-sizing: border-box;
+    color: ${colorNeutralForeground1};
+    display: inline-flex;
+    filter: drop-shadow(0 0 2px ${colorNeutralShadowAmbient}) drop-shadow(0 4px 8px ${colorNeutralShadowKey});
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase200};
+    inset: unset;
+    line-height: ${lineHeightBase200};
+    margin: unset; /* Remove browser default for [popover] */
+    max-width: 240px;
+    padding: 4px ${spacingHorizontalMNudge} 6px;
+    position: absolute;
+    position-area: var(--position-area);
+    position-try-options: var(--position-try-options);
+    width: auto;
+    z-index: 1;
+  }
+
+  @supports (inset-area: block-start) {
+    :host {
+      inset-area: var(--position-area);
+      position-try-fallbacks: var(--position-try-options);
+    }
+  }
+
+  :host(:is([positioning^='above'], [positioning^='below'], :not([positioning]))) {
+    margin-block: var(--block-offset);
+  }
+
+  :host(:is([positioning^='before'], [positioning^='after'])) {
+    margin-inline: var(--inline-offset);
+    --position-try-options: flip-inline;
+  }
+
+  :host([positioning='above-start']) {
+    --position-area: ${TooltipPositioningOption['above-start']};
+  }
+  :host([positioning='above']) {
+    --position-area: ${TooltipPositioningOption.above};
+  }
+  :host([positioning='above-end']) {
+    --position-area: ${TooltipPositioningOption['above-end']};
+  }
+  :host([positioning='below-start']) {
+    --position-area: ${TooltipPositioningOption['below-start']};
+  }
+  :host([positioning='below']) {
+    --position-area: ${TooltipPositioningOption.below};
+  }
+  :host([positioning='below-end']) {
+    --position-area: ${TooltipPositioningOption.below};
+  }
+  :host([positioning='before-top']) {
+    --position-area: ${TooltipPositioningOption['before-top']};
+  }
+  :host([positioning='before']) {
+    --position-area: ${TooltipPositioningOption.before};
+  }
+  :host([positioning='before-bottom']) {
+    --position-area: ${TooltipPositioningOption['before-bottom']};
+  }
+  :host([positioning='after-top']) {
+    --position-area: ${TooltipPositioningOption['after-top']};
+  }
+  :host([positioning='after']) {
+    --position-area: ${TooltipPositioningOption.after};
+  }
+  :host([positioning='after-bottom']) {
+    --position-area: ${TooltipPositioningOption['after-bottom']};
+  }
+`;
+//# sourceMappingURL=tooltip.styles.js.map

package/dist/esm/tooltip/tooltip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.styles.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,yBAAyB,EACzB,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;sBASJ,iBAAiB;uBAChB,mBAAmB;kBACxB,uBAAuB;qBACpB,kBAAkB;wBACf,sBAAsB;;aAEjC,uBAAuB;;kCAEF,yBAAyB,2BAA2B,qBAAqB;mBACxF,cAAc;iBAChB,eAAe;;mBAEb,iBAAiB;;;mBAGjB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;uBAyBnB,wBAAwB,CAAC,aAAa,CAAC;;;uBAGvC,wBAAwB,CAAC,KAAK;;;uBAG9B,wBAAwB,CAAC,WAAW,CAAC;;;uBAGrC,wBAAwB,CAAC,aAAa,CAAC;;;uBAGvC,wBAAwB,CAAC,KAAK;;;uBAG9B,wBAAwB,CAAC,KAAK;;;uBAG9B,wBAAwB,CAAC,YAAY,CAAC;;;uBAGtC,wBAAwB,CAAC,MAAM;;;uBAG/B,wBAAwB,CAAC,eAAe,CAAC;;;uBAGzC,wBAAwB,CAAC,WAAW,CAAC;;;uBAGrC,wBAAwB,CAAC,KAAK;;;uBAG9B,wBAAwB,CAAC,cAAc,CAAC;;CAE9D,CAAC"}

package/dist/esm/tooltip/tooltip.template.js

@@ -0,0 +1,11 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Template for the tooltip component
+ * @public
+ */
+export const template = html `
+  <template popover aria-hidden="true">
+    <slot></slot>
+  </template>
+`;
+//# sourceMappingURL=tooltip.template.js.map

package/dist/esm/tooltip/tooltip.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.template.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;;;;CAIpC,CAAC"}

package/dist/esm/utils/element-internals.js

@@ -38,6 +38,9 @@ export function stateSelector(state) {
  * @internal
  */
 export function toggleState(elementInternals, state, force) {
+    if (!state) {
+        return;
+    }
     if (!CustomStatesSetSupported) {
         elementInternals.shadowRoot.host.toggleAttribute(`state--${state}`, force);
         return;
@@ -51,4 +54,46 @@ export function toggleState(elementInternals, state, force) {
     // @ts-expect-error - Baseline 2024
     elementInternals.states.delete(state);
 }
+/**
+ * A weak map to store the valid states for attributes.
+ * @internal
+ */
+const matchingStateMap = new WeakMap();
+/**
+ * Check if a given attribute value is a valid state. Attribute values are often kebab-cased, so this function converts
+ * the kebab-cased `state` to camelCase and checks if it exists in as a key in the `States` object.
+ *
+ * @param States  - the object containing valid states for the attribute
+ * @param state - the state to check
+ * @returns true if the state is in the States object
+ * @internal
+ */
+export function hasMatchingState(States, state) {
+    if (!States || !state) {
+        return false;
+    }
+    if (matchingStateMap.has(States)) {
+        return matchingStateMap.get(States).has(state);
+    }
+    const stateSet = new Set(Object.values(States));
+    matchingStateMap.set(States, stateSet);
+    return stateSet.has(state);
+}
+/**
+ * Swap an old state for a new state.
+ *
+ * @param elementInternals - the `ElementInternals` instance for the component
+ * @param prev - the previous state to remove
+ * @param next - the new state to add
+ * @param States - the object containing valid states for the attribute
+ * @param prefix - an optional prefix to add to the state
+ *
+ * @internal
+ */
+export function swapStates(elementInternals, prev = '', next = '', States, prefix = '') {
+    toggleState(elementInternals, `${prefix}${prev}`, false);
+    if (!States || hasMatchingState(States, next)) {
+        toggleState(elementInternals, `${prefix}${next}`, true);
+    }
+}
 //# sourceMappingURL=element-internals.js.map

package/dist/esm/utils/element-internals.js.map

@@ -1 +1 @@
-{"version":3,"file":"element-internals.js","sourceRoot":"","sources":["../../../src/utils/element-internals.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC;AAE5E;;;GAGG;AACH,MAAM,SAAS,GAAG,IAAI,GAAG,EAAiC,CAAC;AAE3D;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAAmB,KAAQ;;IACtD,OAAO,CAAC,MAAA,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,mCAC1B,SAAS;SACN,GAAG,CAAC,KAAK,EAAE,wBAAwB,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,WAAW,KAAK,GAAG,CAAC;SAC/E,GAAG,CAAC,KAAK,CAAC,CAAqB,CAAC;AACvC,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,gBAAkC,EAAE,KAAa,EAAE,KAAe;IAC5F,IAAI,CAAC,wBAAwB,EAAE;QAC7B,gBAAgB,CAAC,UAAW,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC;QAC5E,OAAO;KACR;IACD,mCAAmC;IACnC,IAAI,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QAChD,mCAAmC;QACnC,gBAAgB,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACnC,OAAO;KACR;IACD,mCAAmC;IACnC,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACxC,CAAC"}
+{"version":3,"file":"element-internals.js","sourceRoot":"","sources":["../../../src/utils/element-internals.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC;AAE5E;;;GAGG;AACH,MAAM,SAAS,GAAG,IAAI,GAAG,EAAiC,CAAC;AAE3D;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAAmB,KAAQ;;IACtD,OAAO,CAAC,MAAA,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,mCAC1B,SAAS;SACN,GAAG,CAAC,KAAK,EAAE,wBAAwB,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,WAAW,KAAK,GAAG,CAAC;SAC/E,GAAG,CAAC,KAAK,CAAC,CAAqB,CAAC;AACvC,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,gBAAkC,EAAE,KAAyB,EAAE,KAAe;IACxG,IAAI,CAAC,KAAK,EAAE;QACV,OAAO;KACR;IAED,IAAI,CAAC,wBAAwB,EAAE;QAC7B,gBAAgB,CAAC,UAAW,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC;QAC5E,OAAO;KACR;IACD,mCAAmC;IACnC,IAAI,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QAChD,mCAAmC;QACnC,gBAAgB,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACnC,OAAO;KACR;IACD,mCAAmC;IACnC,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACxC,CAAC;AAED;;;GAGG;AACH,MAAM,gBAAgB,GAAG,IAAI,OAAO,EAAuC,CAAC;AAE5E;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,MAA0C,EAAE,KAAyB;IACpG,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE;QACrB,OAAO,KAAK,CAAC;KACd;IAED,IAAI,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QAChC,OAAO,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;KACjD;IAED,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IAChD,gBAAgB,CAAC,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACvC,OAAO,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAC7B,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,UAAU,CACxB,gBAAkC,EAClC,OAA2B,EAAE,EAC7B,OAA2B,EAAE,EAC7B,MAA+B,EAC/B,SAAiB,EAAE;IAEnB,WAAW,CAAC,gBAAgB,EAAE,GAAG,MAAM,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IAEzD,IAAI,CAAC,MAAM,IAAI,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE;QAC7C,WAAW,CAAC,gBAAgB,EAAE,GAAG,MAAM,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;KACzD;AACH,CAAC"}

package/dist/esm/utils/template-helpers.js

@@ -1,5 +1,5 @@
 //Copied from @microsoft/fast-foundation
-import { InlineTemplateDirective } from '@microsoft/fast-element';
+import { InlineTemplateDirective, } from '@microsoft/fast-element';
 /**
  * A function to compose template options.
  * @public

package/dist/esm/utils/template-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"template-helpers.js","sourceRoot":"","sources":["../../../src/utils/template-helpers.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,OAAO,EAA8B,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAiB9F;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAC/B,IAAgD;IAEhD,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,uBAAuB,CAAC,KAAK,CAAC;KACtC;IAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAO,IAAI,uBAAuB,CAAC,IAAI,CAAC,CAAC;KAC1C;IAED,IAAI,QAAQ,IAAI,IAAI,EAAE;QACpB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC;KACtB;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}
+{"version":3,"file":"template-helpers.js","sourceRoot":"","sources":["../../../src/utils/template-helpers.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,OAAO,EAGL,uBAAuB,GAExB,MAAM,yBAAyB,CAAC;AAgBjC;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAC/B,IAAgD;IAEhD,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,uBAAuB,CAAC,KAAK,CAAC;KACtC;IAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAO,IAAI,uBAAuB,CAAC,IAAI,CAAC,CAAC;KAC1C;IAED,IAAI,QAAQ,IAAI,IAAI,EAAE;QACpB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC;KACtB;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/web-components.d.ts

@@ -9,7 +9,7 @@ import type { HostBehavior } from '@microsoft/fast-element';
 import type { HostController } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
-import type { SyntheticViewTemplate } from '@microsoft/fast-element';
+import { SyntheticViewTemplate } from '@microsoft/fast-element';
 import { ViewTemplate } from '@microsoft/fast-element';
 
 /**
@@ -127,7 +127,7 @@ export declare class AccordionItem extends BaseAccordionItem {
      * @param prev - previous value
      * @param next - next value
      */
-    sizeChanged(prev: AccordionItemSize, next: AccordionItemSize): void;
+    sizeChanged(prev: AccordionItemSize | undefined, next: AccordionItemSize | undefined): void;
     /**
      * Sets expand and collapsed icon position.
      *
@@ -141,7 +141,7 @@ export declare class AccordionItem extends BaseAccordionItem {
      * @param prev - previous value
      * @param next - next value
      */
-    markerPositionChanged(prev: AccordionItemMarkerPosition, next: AccordionItemMarkerPosition): void;
+    markerPositionChanged(prev: AccordionItemMarkerPosition | undefined, next: AccordionItemMarkerPosition | undefined): void;
     /**
      * Sets the width of the focus state.
      *
@@ -1629,7 +1629,7 @@ export declare class BaseDivider extends FASTElement {
      * @param next - the current orientation value
      * @internal
      */
-    orientationChanged(previous: string | null, next: string | null): void;
+    orientationChanged(previous: DividerRole | undefined, next: DividerRole | undefined): void;
 }
 
 /**
@@ -8280,7 +8280,7 @@ export declare class Slider extends FASTElement implements SliderConfiguration {
      * HTML Attribute: size
      */
     size?: SliderSize;
-    protected sizeChanged(prev: string, next: string): void;
+    protected sizeChanged(prev: SliderSize | undefined, next: SliderSize | undefined): void;
     handleChange(_: any, propertyName: string): void;
     private stepStyles?;
     /**
@@ -8519,7 +8519,7 @@ export declare class Slider extends FASTElement implements SliderConfiguration {
      * apply different behavior when it’s vertical.
      */
     orientation?: Orientation;
-    protected orientationChanged(prev: string | undefined, next: string | undefined): void;
+    protected orientationChanged(prev: Orientation | undefined, next: Orientation | undefined): void;
     /**
      * The selection mode.
      *
@@ -9943,6 +9943,130 @@ export declare const ToggleButtonStyles: ElementStyles;
  */
 export declare const ToggleButtonTemplate: ElementViewTemplate<ToggleButton>;
 
+/**
+ * A Tooltip Custom HTML Element.
+ * Based on ARIA APG Tooltip Pattern {@link https://www.w3.org/WAI/ARIA/apg/patterns/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;
+    /**
+     * 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;
+}
+
+/**
+ * The {@link Tooltip } custom element definition.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-tooltip>`
+ */
+export declare const TooltipDefinition: FASTElementDefinition<typeof Tooltip>;
+
+/**
+ * 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 declare type TooltipPositioningOption = ValuesOf<typeof TooltipPositioningOption>;
+
+/**
+ * Styles for the tooltip component
+ * @public
+ */
+export declare const TooltipStyles: ElementStyles;
+
+/**
+ * Template for the tooltip component
+ * @public
+ */
+export declare const TooltipTemplate: ViewTemplate<Tooltip, any>;
+
 export declare const typographyBody1StrongerStyles: CSSDirective;
 
 export declare const typographyBody1StrongStyles: CSSDirective;