@fluentui/web-components 3.0.0-rc.20 → 3.0.0-rc.22

package/dist/esm/toggle-button/toggle-button.styles.css

@@ -0,0 +1,358 @@
+
+  :host([hidden]){display:none}:host{display:inline-flex}
+
+  :host {
+    --icon-spacing: var(--spacingHorizontalSNudge);
+    position: relative;
+    contain: layout style;
+    vertical-align: middle;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+    text-align: center;
+    text-decoration-line: none;
+    margin: 0;
+    min-height: 32px;
+    outline-style: none;
+    background-color: var(--colorNeutralBackground1);
+    color: var(--colorNeutralForeground1);
+    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+    padding: 0 var(--spacingHorizontalM);
+    min-width: 96px;
+    border-radius: var(--borderRadiusMedium);
+    font-size: var(--fontSizeBase300);
+    font-family: var(--fontFamilyBase);
+    font-weight: var(--fontWeightSemibold);
+    line-height: var(--lineHeightBase300);
+    transition-duration: var(--durationFaster);
+    transition-property: background, border, color;
+    transition-timing-function: var(--curveEasyEase);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .content {
+    display: inherit;
+  }
+
+  :host(:hover) {
+    background-color: var(--colorNeutralBackground1Hover);
+    color: var(--colorNeutralForeground1Hover);
+    border-color: var(--colorNeutralStroke1Hover);
+  }
+
+  :host(:hover:active) {
+    background-color: var(--colorNeutralBackground1Pressed);
+    border-color: var(--colorNeutralStroke1Pressed);
+    color: var(--colorNeutralForeground1Pressed);
+    outline-style: none;
+  }
+
+  :host(:focus-visible) {
+    border-color: var(--colorTransparentStroke);
+    outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
+    box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    :host {
+      transition-duration: 0.01ms;
+    }
+  }
+
+  ::slotted(svg) {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+    fill: currentColor;
+  }
+
+  ::slotted([slot='start']) {
+    margin-inline-end: var(--icon-spacing);
+  }
+
+  ::slotted([slot='end']),
+  [slot='end'] {
+    flex-shrink: 0;
+    margin-inline-start: var(--icon-spacing);
+  }
+
+  :host([icon-only]) {
+    min-width: 32px;
+    max-width: 32px;
+  }
+
+  :host([size='small']) {
+    --icon-spacing: var(--spacingHorizontalXS);
+    min-height: 24px;
+    min-width: 64px;
+    padding: 0 var(--spacingHorizontalS);
+    border-radius: var(--borderRadiusSmall);
+    font-size: var(--fontSizeBase200);
+    line-height: var(--lineHeightBase200);
+    font-weight: var(--fontWeightRegular);
+  }
+
+  :host([size='small'][icon-only]) {
+    min-width: 24px;
+    max-width: 24px;
+  }
+
+  :host([size='large']) {
+    min-height: 40px;
+    border-radius: var(--borderRadiusLarge);
+    padding: 0 var(--spacingHorizontalL);
+    font-size: var(--fontSizeBase400);
+    line-height: var(--lineHeightBase400);
+  }
+
+  :host([size='large'][icon-only]) {
+    min-width: 40px;
+    max-width: 40px;
+  }
+
+  :host([size='large']) ::slotted(svg) {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
+
+  :host(:is([shape='circular'], [shape='circular']:focus-visible)) {
+    border-radius: var(--borderRadiusCircular);
+  }
+
+  :host(:is([shape='square'], [shape='square']:focus-visible)) {
+    border-radius: var(--borderRadiusNone);
+  }
+
+  :host([appearance='primary']) {
+    background-color: var(--colorBrandBackground);
+    color: var(--colorNeutralForegroundOnBrand);
+    border-color: transparent;
+  }
+
+  :host([appearance='primary']:hover) {
+    background-color: var(--colorBrandBackgroundHover);
+  }
+
+  :host([appearance='primary']:is(:hover, :hover:active):not(:focus-visible)) {
+    border-color: transparent;
+  }
+
+  :host([appearance='primary']:is(:hover, :hover:active)) {
+    color: var(--colorNeutralForegroundOnBrand);
+  }
+
+  :host([appearance='primary']:hover:active) {
+    background-color: var(--colorBrandBackgroundPressed);
+  }
+
+  :host([appearance='primary']:focus-visible) {
+    border-color: var(--colorNeutralForegroundOnBrand);
+    box-shadow: var(--shadow2), 0 0 0 2px var(--colorStrokeFocus2);
+  }
+
+  :host([appearance='outline']) {
+    background-color: var(--colorTransparentBackground);
+  }
+
+  :host([appearance='outline']:hover) {
+    background-color: var(--colorTransparentBackgroundHover);
+  }
+
+  :host([appearance='outline']:hover:active) {
+    background-color: var(--colorTransparentBackgroundPressed);
+  }
+
+  :host([appearance='subtle']) {
+    background-color: var(--colorSubtleBackground);
+    color: var(--colorNeutralForeground2);
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover) {
+    background-color: var(--colorSubtleBackgroundHover);
+    color: var(--colorNeutralForeground2Hover);
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover:active) {
+    background-color: var(--colorSubtleBackgroundPressed);
+    color: var(--colorNeutralForeground2Pressed);
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover) ::slotted(svg) {
+    fill: var(--colorNeutralForeground2BrandHover);
+  }
+
+  :host([appearance='subtle']:hover:active) ::slotted(svg) {
+    fill: var(--colorNeutralForeground2BrandPressed);
+  }
+
+  :host([appearance='transparent']) {
+    background-color: var(--colorTransparentBackground);
+    color: var(--colorNeutralForeground2);
+  }
+
+  :host([appearance='transparent']:hover) {
+    background-color: var(--colorTransparentBackgroundHover);
+    color: var(--colorNeutralForeground2BrandHover);
+  }
+
+  :host([appearance='transparent']:hover:active) {
+    background-color: var(--colorTransparentBackgroundPressed);
+    color: var(--colorNeutralForeground2BrandPressed);
+  }
+
+  :host(:is([appearance='transparent'], [appearance='transparent']:is(:hover, :active))) {
+    border-color: transparent;
+  }
+
+
+  
+
+  :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable])),
+  :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable]):hover),
+  :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable]):hover:active) {
+    background-color: var(--colorNeutralBackgroundDisabled);
+    border-color: var(--colorNeutralStrokeDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+    cursor: not-allowed;
+  }
+
+  :host([appearance='primary']:is(:disabled, [disabled-focusable])),
+  :host([appearance='primary']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+    border-color: transparent;
+  }
+
+  :host([appearance='outline']:is(:disabled, [disabled-focusable])),
+  :host([appearance='outline']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+    background-color: var(--colorTransparentBackground);
+  }
+
+  :host([appearance='subtle']:is(:disabled, [disabled-focusable])),
+  :host([appearance='subtle']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+    background-color: var(--colorTransparentBackground);
+    border-color: transparent;
+  }
+
+  :host([appearance='transparent']:is(:disabled, [disabled-focusable])),
+  :host([appearance='transparent']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+    border-color: transparent;
+    background-color: var(--colorTransparentBackground);
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      background-color: ButtonFace;
+      color: ButtonText;
+    }
+
+    :host(:is(:hover, :focus-visible)) {
+      border-color: Highlight !important;
+    }
+
+    :host([appearance='primary']:not(:is(:hover, :focus-visible))) {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+
+    :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable])) {
+      background-color: ButtonFace;
+      color: GrayText;
+      border-color: ButtonText;
+    }
+  }
+
+
+  
+
+  :host(:state(pressed)) {
+    border-color: var(--colorNeutralStroke1);
+    background-color: var(--colorNeutralBackground1Selected);
+    color: var(--colorNeutralForeground1);
+    border-width: var(--strokeWidthThin);
+  }
+
+  :host(:state(pressed):hover) {
+    border-color: var(--colorNeutralStroke1Hover);
+    background-color: var(--colorNeutralBackground1Hover);
+  }
+
+  :host(:state(pressed):active) {
+    border-color: var(--colorNeutralStroke1Pressed);
+    background-color: var(--colorNeutralBackground1Pressed);
+  }
+
+  :host(:state(pressed)[appearance='primary']:not(:focus-visible)) {
+    border-color: transparent;
+  }
+
+  :host(:state(pressed)[appearance='primary']) {
+    background-color: var(--colorBrandBackgroundSelected);
+    color: var(--colorNeutralForegroundOnBrand);
+  }
+
+  :host(:state(pressed)[appearance='primary']:hover) {
+    background-color: var(--colorBrandBackgroundHover);
+  }
+
+  :host(:state(pressed)[appearance='primary']:active) {
+    background-color: var(--colorBrandBackgroundPressed);
+  }
+
+  :host(:state(pressed)[appearance='subtle']) {
+    border-color: transparent;
+    background-color: var(--colorSubtleBackgroundSelected);
+    color: var(--colorNeutralForeground2Selected);
+  }
+
+  :host(:state(pressed)[appearance='subtle']:hover) {
+    background-color: var(--colorSubtleBackgroundHover);
+    color: var(--colorNeutralForeground2Hover);
+  }
+
+  :host(:state(pressed)[appearance='subtle']:active) {
+    background-color: var(--colorSubtleBackgroundPressed);
+    color: var(--colorNeutralForeground2Pressed);
+  }
+
+  :host(:state(pressed)[appearance='outline']),
+  :host(:state(pressed)[appearance='transparent']) {
+    background-color: var(--colorTransparentBackgroundSelected);
+  }
+
+  :host(:state(pressed)[appearance='outline']:hover),
+  :host(:state(pressed)[appearance='transparent']:hover) {
+    background-color: var(--colorTransparentBackgroundHover);
+  }
+
+  :host(:state(pressed)[appearance='outline']:active),
+  :host(:state(pressed)[appearance='transparent']:active) {
+    background-color: var(--colorTransparentBackgroundPressed);
+  }
+
+  :host(:state(pressed)[appearance='transparent']) {
+    border-color: transparent;
+    color: var(--colorNeutralForeground2BrandSelected);
+  }
+
+  :host(:state(pressed)[appearance='transparent']:hover) {
+    color: var(--colorNeutralForeground2BrandHover);
+  }
+
+  :host(:state(pressed)[appearance='transparent']:active) {
+    color: var(--colorNeutralForeground2BrandPressed);
+  }
+
+  @media (forced-colors: active) {
+    :host(:state(pressed)),
+    :host(
+        :state(pressed):is([appearance='primary'], [appearance='subtle'], [appearance='outline'], [appearance='transparent'])
+      ) {
+      background: SelectedItem;
+      color: SelectedItemText;
+    }
+  }

package/dist/esm/toggle-button/toggle-button.template.html

@@ -0,0 +1,12 @@
+<f-template name="fluent-toggle-button" shadowrootmode="open">
+<template
+      @click="{clickHandler($e)}"
+      @keypress="{keypressHandler($e)}"
+    >{{styles}}
+       <slot name="start" f-ref="{start}"></slot> 
+      <span class="content" part="content">
+        <slot f-slotted="{defaultSlottedContent}"></slot>
+      </span>
+       <slot name="end" f-ref="{end}"></slot> 
+    </template>
+</f-template>

package/dist/esm/tooltip/define-async.d.ts

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

package/dist/esm/tooltip/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './tooltip.definition-async.js';
+import { Tooltip } from './tooltip.js';
+RenderableFASTElement(Tooltip).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/tooltip/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/tooltip/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,qBAAqB,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/tooltip/tooltip.d.ts

@@ -85,14 +85,14 @@ export declare class Tooltip extends FASTElement {
      * Hide the tooltip on blur
      */
     blurAnchorHandler: () => void;
+    /**
+     * Indicates whether the tooltip styles have been applied for browsers that do not support anchor positioning.
+     * @internal
+     */
+    private anchorPositioningReady;
+    /**
+     * Sets fallback styles for the tooltip for browsers that do not support CSS anchor positioning.
+     * @internal
+     */
     private setFallbackStyles;
 }
-declare global {
-    interface Window {
-        CSS_ANCHOR_POLYFILL?: {
-            call: (options: {
-                element: HTMLStyleElement;
-            }) => void;
-        };
-    }
-}

package/dist/esm/tooltip/tooltip.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-tooltip element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/tooltip/tooltip.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './tooltip.options.js';
+/**
+ * The async definition configuration for the fluent-tooltip element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=tooltip.definition-async.js.map

package/dist/esm/tooltip/tooltip.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.definition-async.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}

package/dist/esm/tooltip/tooltip.js

@@ -17,9 +17,7 @@ export class Tooltip extends FASTElement {
      * @internal
      */
     positioningChanged() {
-        if (!AnchorPositioningCSSSupported) {
-            this.setFallbackStyles();
-        }
+        this.setFallbackStyles();
     }
     /**
      * Reference to the anchor element
@@ -73,10 +71,16 @@ export class Tooltip extends FASTElement {
          * Hide the tooltip on blur
          */
         this.blurAnchorHandler = () => this.hideTooltip(0);
+        /**
+         * Indicates whether the tooltip styles have been applied for browsers that do not support anchor positioning.
+         * @internal
+         */
+        this.anchorPositioningReady = false;
         this.elementInternals.role = 'tooltip';
     }
     connectedCallback() {
         super.connectedCallback();
+        this.popover ??= 'auto';
         // If the anchor element is not found, tooltip will not be shown
         if (!this.anchorElement) {
             return;
@@ -101,11 +105,24 @@ export class Tooltip extends FASTElement {
         Updates.enqueue(() => this.setFallbackStyles());
     }
     disconnectedCallback() {
-        super.disconnectedCallback();
         this.anchorElement?.removeEventListener('focus', this.focusAnchorHandler);
         this.anchorElement?.removeEventListener('blur', this.blurAnchorHandler);
         this.anchorElement?.removeEventListener('mouseenter', this.mouseenterAnchorHandler);
         this.anchorElement?.removeEventListener('mouseleave', this.mouseleaveAnchorHandler);
+        if (this.anchorElement) {
+            const describedBy = this.anchorElement.getAttribute('aria-describedby') ?? '';
+            const ids = describedBy
+                .trim()
+                .split(/\s+/)
+                .filter(id => id !== this.id);
+            if (ids.length) {
+                this.anchorElement.setAttribute('aria-describedby', ids.join(' '));
+            }
+            else {
+                this.anchorElement.removeAttribute('aria-describedby');
+            }
+        }
+        super.disconnectedCallback();
     }
     /**
      * Shows the tooltip
@@ -113,6 +130,12 @@ export class Tooltip extends FASTElement {
      * @internal
      */
     showTooltip(delay = this.defaultDelay) {
+        if (!this.anchorPositioningReady) {
+            this.setFallbackStyles().then(() => {
+                this.showTooltip(delay);
+            });
+            return;
+        }
         setTimeout(() => {
             this.setAttribute('aria-hidden', 'false');
             this.showPopover();
@@ -134,7 +157,15 @@ export class Tooltip extends FASTElement {
             this.hidePopover();
         }, delay);
     }
-    setFallbackStyles() {
+    /**
+     * Sets fallback styles for the tooltip for browsers that do not support CSS anchor positioning.
+     * @internal
+     */
+    async setFallbackStyles() {
+        if (AnchorPositioningCSSSupported) {
+            this.anchorPositioningReady = true;
+            return;
+        }
         if (!this.anchorElement) {
             return;
         }
@@ -183,7 +214,8 @@ export class Tooltip extends FASTElement {
       }
     `;
         if (window.CSS_ANCHOR_POLYFILL) {
-            window.CSS_ANCHOR_POLYFILL.call({ element: this.anchorPositioningStyleElement });
+            await window.CSS_ANCHOR_POLYFILL({ elements: [this.anchorPositioningStyleElement] });
+            this.anchorPositioningReady = true;
         }
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,6BAA6B,EAAE,8BAA8B,EAAE,MAAM,qBAAqB,CAAC;AAGpG;;;;;;;GAOG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IAkCtC;;;;OAIG;IACI,kBAAkB;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAQD;;;OAGG;IACH,IAAY,aAAa;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACpC,OAAO,CAAC,QAAQ,YAAY,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC;IAClG,CAAC;IAQD;QACE,KAAK,EAAE,CAAC;QAhEV;;WAEG;QACI,qBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAEjD;;;;;;WAMG;QAEI,OAAE,GAAW,QAAQ,CAAC,UAAU,CAAC,CAAC;QAQzC;;;WAGG;QACK,iBAAY,GAAW,GAAG,CAAC;QAiBnC;;WAEG;QAEI,WAAM,GAAW,EAAE,CAAC;QAW3B;;;WAGG;QACO,kCAA6B,GAA4B,IAAI,CAAC;QAoGxE;;WAEG;QACI,4BAAuB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpE;;WAEG;QACI,4BAAuB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpE;;WAEG;QACI,uBAAkB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QACtD;;WAEG;QACI,sBAAiB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAErD;;;WAGG;QACK,2BAAsB,GAAY,KAAK,CAAC;QArH9C,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,SAAS,CAAC;IACzC,CAAC;IAEM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;QAExB,gEAAgE;QAChE,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,mCAAmC;QACnC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;QAE7E,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACxE,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEzG,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACtE,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACpE,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAChF,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAEhF,IAAI,6BAA6B,EAAE,CAAC;YAClC,IAAI,CAAC,8BAA8B,EAAE,CAAC;gBACpC,mCAAmC;gBACnC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;gBACjD,mCAAmC;gBACnC,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,UAAU,CAAC;YACzC,CAAC;YACD,OAAO;QACT,CAAC;QAED,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAClD,CAAC;IAEM,oBAAoB;QACzB,IAAI,CAAC,aAAa,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC1E,IAAI,CAAC,aAAa,EAAE,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACxE,IAAI,CAAC,aAAa,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACpF,IAAI,CAAC,aAAa,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAEpF,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;YAC9E,MAAM,GAAG,GAAG,WAAW;iBACpB,IAAI,EAAE;iBACN,KAAK,CAAC,KAAK,CAAC;iBACZ,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;YAChC,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;gBACf,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,kBAAkB,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;YACrE,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;YACzD,CAAC;QACH,CAAC;QAED,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAED;;;;OAIG;IACI,WAAW,CAAC,QAAgB,IAAI,CAAC,YAAY;QAClD,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YACjC,IAAI,CAAC,iBAAiB,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;gBACjC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC,CAAC,CAAC;YACH,OAAO;QACT,CAAC;QAED,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAC1C,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC;IAED;;;;OAIG;IACI,WAAW,CAAC,QAAgB,IAAI,CAAC,YAAY;QAClD,UAAU,CAAC,GAAG,EAAE;YACd,oFAAoF;YACpF,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACpE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YACzC,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC;IAyBD;;;OAGG;IACK,KAAK,CAAC,iBAAiB;QAC7B,IAAI,6BAA6B,EAAE,CAAC;YAClC,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;YACnC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QACD,mCAAmC;QACnC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;QAE7E,6EAA6E;QAC7E,IAAI,CAAC,IAAI,CAAC,6BAA6B,EAAE,CAAC;YACxC,IAAI,CAAC,6BAA6B,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACrE,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;QAC3D,CAAC;QAED,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;QAEhE,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,IAAI,SAAS,KAAK,OAAO,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;gBACnD,SAAS,GAAG,SAAS,CAAC;YACxB,CAAC;YACD,IAAI,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;gBACpD,SAAS,GAAG,SAAS,CAAC;YACxB,CAAC;QACH,CAAC;QAED,MAAM,eAAe,GAAG;YACtB,KAAK,EAAE,sBAAsB;YAC7B,KAAK,EAAE,sBAAsB;YAC7B,MAAM,EAAE,sBAAsB;YAC9B,KAAK,EAAE,sBAAsB;SACrB,CAAC;QAEX,MAAM,YAAY,GAAG,eAAe,CAAC,SAAyC,CAAC,IAAI,eAAe,CAAC,KAAK,CAAC;QAEzG,MAAM,eAAe,GAAG;YACtB,KAAK,EAAE,qBAAqB;YAC5B,GAAG,EAAE,uBAAuB;YAC5B,GAAG,EAAE,mBAAmB;YACxB,MAAM,EAAE,yBAAyB;YACjC,OAAO,EAAE,0CAA0C;YACnD,OAAO,EAAE,yCAAyC;SAC1C,CAAC;QAEX,MAAM,YAAY,GAAG,eAAe,CAAC,SAAyC,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC;QAE3G,IAAI,CAAC,6BAA6B,CAAC,WAAW,GAAG,SAAS,CAAC;SACtD,IAAI,CAAC,MAAM;uBACG,UAAU;;SAExB,IAAI,CAAC,EAAE;;2BAEW,UAAU;;UAE3B,YAAY;UACZ,YAAY;;KAEjB,CAAC;QAEF,IAAK,MAAc,CAAC,mBAAmB,EAAE,CAAC;YACxC,MAAO,MAAc,CAAC,mBAAmB,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,6BAA8B,CAAC,EAAE,CAAC,CAAC;YAE/F,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;QACrC,CAAC;IACH,CAAC;CACF;AAnPQ;IADN,IAAI;mCACoC;AAMlC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;sCACvB;AAYf;IADN,IAAI;4CACyC;AAevC;IADN,IAAI;uCACsB"}

package/dist/esm/tooltip/tooltip.styles.css

@@ -0,0 +1,86 @@
+
+  :host([hidden]){display:none}:host{display:inline-flex}
+
+  :host(:not(:popover-open)) {
+    display: none;
+  }
+
+  :host {
+    --position-area: block-start;
+    --position-try-options: flip-block;
+    --block-offset: var(--spacingVerticalXS);
+    --inline-offset: var(--spacingHorizontalXS);
+    background: var(--colorNeutralBackground1);
+    border-radius: var(--borderRadiusMedium);
+    border: 1px solid var(--colorTransparentStroke);
+    box-sizing: border-box;
+    color: var(--colorNeutralForeground1);
+    display: inline-flex;
+    filter: drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase200);
+    inset: unset;
+    line-height: var(--lineHeightBase200);
+    margin: unset; /* Remove browser default for [popover] */
+    max-width: 240px;
+    overflow: visible;
+    padding: 4px var(--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: block-start span-inline-end;
+  }
+  :host([positioning='above']) {
+    --position-area: block-start;
+  }
+  :host([positioning='above-end']) {
+    --position-area: block-start span-inline-start;
+  }
+  :host([positioning='below-start']) {
+    --position-area: block-end span-inline-end;
+  }
+  :host([positioning='below']) {
+    --position-area: block-end;
+  }
+  :host([positioning='below-end']) {
+    --position-area: block-end span-inline-start;
+  }
+  :host([positioning='before-top']) {
+    --position-area: inline-start span-block-end;
+  }
+  :host([positioning='before']) {
+    --position-area: inline-start;
+  }
+  :host([positioning='before-bottom']) {
+    --position-area: inline-start span-block-start;
+  }
+  :host([positioning='after-top']) {
+    --position-area: inline-end span-block-end;
+  }
+  :host([positioning='after']) {
+    --position-area: inline-end;
+  }
+  :host([positioning='after-bottom']) {
+    --position-area: inline-end span-block-start;
+  }

package/dist/esm/tooltip/tooltip.template.html

@@ -0,0 +1 @@
+<f-template name="fluent-tooltip" shadowrootmode="open"><template>{{styles}}<slot></slot></template></f-template>

package/dist/esm/tree/define-async.d.ts

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

package/dist/esm/tree/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './tree.definition-async.js';
+import { Tree } from './tree.js';
+RenderableFASTElement(Tree).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/tree/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/tree/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,qBAAqB,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/tree/tree.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-tree element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;