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

package/dist/esm/toggle-button/toggle-button.js

@@ -1,107 +1,62 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { attr, observable } from '@microsoft/fast-element';
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
 import { Button } from '../button/button.js';
+import { toggleState } from '../utils/element-internals.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 class ToggleButton extends Button {
-    constructor() {
-        super();
-        /**
-         * Tracks whether the "checked" property has been changed.
-         * This is necessary to provide consistent behavior with
-         * normal input checkboxes
-         */
-        this.dirtyChecked = false;
-        /**
-         * Provides the default checkedness of the input element
-         * Passed down to proxy
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: checked
-         */
-        this.checkedAttribute = false;
-        this.defaultChecked = false;
-        /**
-         * The checked state of the control.
-         *
-         * @public
-         */
-        this.checked = false;
-        /**
-         * 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.
-         */
-        this.currentChecked = false;
-        /**
-         * @internal
-         */
-        this.handleToggleButtonClick = (e) => {
-            if (!this.disabled && !this.disabledFocusable) {
-                this.checked = !this.checked;
-            }
-        };
-        // Re-initialize dirtyChecked because initialization of other values
-        // causes it to become true
-        this.dirtyChecked = false;
+    /**
+     * Updates the pressed state when the `pressed` property changes.
+     *
+     * @internal
+     */
+    pressedChanged() {
+        this.setPressedState();
     }
-    checkedAttributeChanged() {
-        this.defaultChecked = this.checkedAttribute;
+    /**
+     * Updates the pressed state when the `mixed` property changes.
+     *
+     * @param previous - the previous mixed state
+     * @param next - the current mixed state
+     * @internal
+     */
+    mixedChanged() {
+        this.setPressedState();
     }
-    defaultCheckedChanged() {
-        if (!this.dirtyChecked) {
-            // Setting this.checked will cause us to enter a dirty state,
-            // but if we are clean when defaultChecked is changed, we want to stay
-            // in a clean state, so reset this.dirtyChecked
-            this.checked = this.defaultChecked;
-            this.dirtyChecked = false;
-        }
-    }
-    checkedChanged(prev, next) {
-        if (!this.$fastController.isConnected) {
-            return;
-        }
-        if (!this.dirtyChecked) {
-            this.dirtyChecked = true;
-        }
-        this.currentChecked = this.checked;
-        this.setAttribute('aria-pressed', `${this.currentChecked}`);
-        if (prev !== undefined) {
-            this.$emit('change');
-        }
-    }
-    currentCheckedChanged(prev, next) {
-        this.checked = this.currentChecked;
+    /**
+     * Toggles the pressed state of the button.
+     *
+     * @override
+     */
+    press() {
+        this.pressed = !this.pressed;
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('click', this.handleToggleButtonClick);
+        this.setPressedState();
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('click', this.handleToggleButtonClick);
+    /**
+     * Sets the `aria-pressed` attribute based on the `pressed` and `mixed` properties.
+     *
+     * @internal
+     */
+    setPressedState() {
+        if (this.$fastController.isConnected) {
+            const ariaPressed = `${this.mixed ? 'mixed' : !!this.pressed}`;
+            this.elementInternals.ariaPressed = ariaPressed;
+            toggleState(this.elementInternals, 'pressed', !!this.pressed || !!this.mixed);
+        }
     }
 }
 __decorate([
-    attr({ attribute: 'checked', mode: 'boolean' })
-], ToggleButton.prototype, "checkedAttribute", void 0);
-__decorate([
-    observable
-], ToggleButton.prototype, "defaultChecked", void 0);
-__decorate([
-    observable
-], ToggleButton.prototype, "checked", void 0);
+    attr({ mode: 'boolean' })
+], ToggleButton.prototype, "pressed", void 0);
 __decorate([
-    attr({ attribute: 'current-checked', mode: 'boolean' })
-], ToggleButton.prototype, "currentChecked", void 0);
+    attr({ mode: 'boolean' })
+], ToggleButton.prototype, "mixed", void 0);
 //# sourceMappingURL=toggle-button.js.map

package/dist/esm/toggle-button/toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,MAAM;IAwEtC;QACE,KAAK,EAAE,CAAC;QAxEV;;;;WAIG;QACO,iBAAY,GAAY,KAAK,CAAC;QAExC;;;;;;;WAOG;QAEI,qBAAgB,GAAY,KAAK,CAAC;QAMlC,mBAAc,GAAY,KAAK,CAAC;QAWvC;;;;WAIG;QAEI,YAAO,GAAY,KAAK,CAAC;QAmBhC;;;;;;WAMG;QAEI,mBAAc,GAAY,KAAK,CAAC;QAyBvC;;WAEG;QACO,4BAAuB,GAAG,CAAC,CAAa,EAAQ,EAAE;YAC1D,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;gBAC7C,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;aAC9B;QACH,CAAC,CAAC;QAxBA,oEAAoE;QACpE,2BAA2B;QAC3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC5B,CAAC;IA5DS,uBAAuB;QAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC;IAC9C,CAAC;IAIS,qBAAqB;QAC7B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,6DAA6D;YAC7D,sEAAsE;YACtE,+CAA+C;YAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;YACnC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;SAC3B;IACH,CAAC;IASS,cAAc,CAAC,IAAyB,EAAE,IAAa;QAC/D,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACrC,OAAO;SACR;QAED,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;QAED,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC;QAEjC,IAAgC,CAAC,YAAY,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QAE1F,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SACtB;IACH,CAAC;IAWM,qBAAqB,CAAC,IAAyB,EAAE,IAAa;QACnE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;IACrC,CAAC;IAUM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAExB,IAAgC,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;IAC7F,CAAC;IAEM,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE3B,IAAgC,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;IAChG,CAAC;CAUF;AAnFC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sDACP;AAMzC;IADC,UAAU;oDAC4B;AAiBvC;IADC,UAAU;6CACqB;AA2BhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oDACjB"}
+{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,OAAO,YAAa,SAAQ,MAAM;IAWtC;;;;OAIG;IACO,cAAc;QACtB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAYD;;;;;;OAMG;IACO,YAAY;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED;;;;OAIG;IACO,KAAK;QACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED;;;;OAIG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;YACrC,MAAM,WAAW,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAC/D,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,WAAW,CAAC;YAChD,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChF,CAAC;IACH,CAAC;CACF;AA1DQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CACD;AAmBlB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACH"}

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

@@ -1,92 +1,100 @@
 import { css } from '@microsoft/fast-element';
-import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
 import { styles as ButtonStyles } from '../button/button.styles.js';
 import { colorBrandBackgroundHover, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralForeground1, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForegroundOnBrand, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, strokeWidthThin, } from '../theme/design-tokens.js';
-// Need to support icon hover styles
+import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
+import { pressedState } from '../styles/states/index.js';
+/**
+ * The styles for the ToggleButton component.
+ *
+ * @public
+ * @privateRemarks
+ * TODO: Need to support icon hover styles
+ */
 export const styles = css `
   ${ButtonStyles}
 
-  :host([aria-pressed="true"]) .control {
+  :host(${pressedState}) {
     border-color: ${colorNeutralStroke1};
     background-color: ${colorNeutralBackground1Selected};
     color: ${colorNeutralForeground1};
     border-width: ${strokeWidthThin};
   }
 
-  :host([aria-pressed='true']:hover) .control {
+  :host(${pressedState}:hover) {
     border-color: ${colorNeutralStroke1Hover};
     background-color: ${colorNeutralBackground1Hover};
   }
 
-  :host([aria-pressed='true']:active) .control {
+  :host(${pressedState}:active) {
     border-color: ${colorNeutralStroke1Pressed};
     background-color: ${colorNeutralBackground1Pressed};
   }
 
-  :host([aria-pressed='true'][appearance='primary']) .control {
+  :host(${pressedState}[appearance='primary']:not(:focus-visible)) {
     border-color: transparent;
+  }
+
+  :host(${pressedState}[appearance='primary']) {
     background-color: ${colorBrandBackgroundSelected};
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([aria-pressed='true'][appearance='primary']:hover) .control {
+  :host(${pressedState}[appearance='primary']:hover) {
     background-color: ${colorBrandBackgroundHover};
   }
 
-  :host([aria-pressed='true'][appearance='primary']:active) .control {
+  :host(${pressedState}[appearance='primary']:active) {
     background-color: ${colorBrandBackgroundPressed};
   }
 
-  :host([aria-pressed='true'][appearance='subtle']) .control {
+  :host(${pressedState}[appearance='subtle']) {
     border-color: transparent;
     background-color: ${colorSubtleBackgroundSelected};
     color: ${colorNeutralForeground2Selected};
   }
 
-  :host([aria-pressed='true'][appearance='subtle']:hover) .control {
+  :host(${pressedState}[appearance='subtle']:hover) {
     background-color: ${colorSubtleBackgroundHover};
     color: ${colorNeutralForeground2Hover};
   }
 
-  :host([aria-pressed='true'][appearance='subtle']:active) .control {
+  :host(${pressedState}[appearance='subtle']:active) {
     background-color: ${colorSubtleBackgroundPressed};
     color: ${colorNeutralForeground2Pressed};
   }
 
-  :host([aria-pressed='true'][appearance='outline']) .control,
-  :host([aria-pressed='true'][appearance='transparent']) .control {
+  :host(${pressedState}[appearance='outline']),
+  :host(${pressedState}[appearance='transparent']) {
     background-color: ${colorTransparentBackgroundSelected};
   }
 
-  :host([aria-pressed='true'][appearance='outline']:hover) .control,
-  :host([aria-pressed='true'][appearance='transparent']:hover) .control {
+  :host(${pressedState}[appearance='outline']:hover),
+  :host(${pressedState}[appearance='transparent']:hover) {
     background-color: ${colorTransparentBackgroundHover};
   }
 
-  :host([aria-pressed='true'][appearance='outline']:active) .control,
-  :host([aria-pressed='true'][appearance='transparent']:active) .control {
+  :host(${pressedState}[appearance='outline']:active),
+  :host(${pressedState}[appearance='transparent']:active) {
     background-color: ${colorTransparentBackgroundPressed};
   }
 
-  :host([aria-pressed='true'][appearance='transparent']) .control {
+  :host(${pressedState}[appearance='transparent']) {
     border-color: transparent;
     color: ${colorNeutralForeground2BrandSelected};
   }
 
-  :host([aria-pressed='true'][appearance='transparent']:hover) .control {
+  :host(${pressedState}[appearance='transparent']:hover) {
     color: ${colorNeutralForeground2BrandHover};
   }
 
-  :host([aria-pressed='true'][appearance='transparent']:active) .control {
+  :host(${pressedState}[appearance='transparent']:active) {
     color: ${colorNeutralForeground2BrandPressed};
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :host([aria-pressed='true']) .control,
-    :host([aria-pressed='true'][appearance='primary']) .control,
-    :host([aria-pressed='true'][appearance='subtle']) .control,
-    :host([aria-pressed='true'][appearance='outline']) .control,
-    :host([aria-pressed='true'][appearance='transparent']) .control,
-    :host([aria-pressed='true'][appearance='transparent']) .control {
+    :host(${pressedState}),
+    :host(
+        ${pressedState}:is([appearance='primary'], [appearance='subtle'], [appearance='outline'], [appearance='transparent'])
+      ) {
       background: SelectedItem;
       color: SelectedItemText;
     }

package/dist/esm/toggle-button/toggle-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,yBAAyB,EACzB,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,oCAAoC,EACpC,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,4BAA4B,EAC5B,6BAA6B,EAC7B,+BAA+B,EAC/B,iCAAiC,EACjC,kCAAkC,EAClC,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;oBAGI,mBAAmB;wBACf,+BAA+B;aAC1C,uBAAuB;oBAChB,eAAe;;;;oBAIf,wBAAwB;wBACpB,4BAA4B;;;;oBAIhC,0BAA0B;wBACtB,8BAA8B;;;;;wBAK9B,4BAA4B;aACvC,6BAA6B;;;;wBAIlB,yBAAyB;;;;wBAIzB,2BAA2B;;;;;wBAK3B,6BAA6B;aACxC,+BAA+B;;;;wBAIpB,0BAA0B;aACrC,4BAA4B;;;;wBAIjB,4BAA4B;aACvC,8BAA8B;;;;;wBAKnB,kCAAkC;;;;;wBAKlC,+BAA+B;;;;;wBAK/B,iCAAiC;;;;;aAK5C,oCAAoC;;;;aAIpC,iCAAiC;;;;aAIjC,mCAAmC;;CAE/C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;GAUjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,yBAAyB,EACzB,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,oCAAoC,EACpC,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,4BAA4B,EAC5B,6BAA6B,EAC7B,+BAA+B,EAC/B,iCAAiC,EACjC,kCAAkC,EAClC,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AACvG,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;UAEN,YAAY;oBACF,mBAAmB;wBACf,+BAA+B;aAC1C,uBAAuB;oBAChB,eAAe;;;UAGzB,YAAY;oBACF,wBAAwB;wBACpB,4BAA4B;;;UAG1C,YAAY;oBACF,0BAA0B;wBACtB,8BAA8B;;;UAG5C,YAAY;;;;UAIZ,YAAY;wBACE,4BAA4B;aACvC,6BAA6B;;;UAGhC,YAAY;wBACE,yBAAyB;;;UAGvC,YAAY;wBACE,2BAA2B;;;UAGzC,YAAY;;wBAEE,6BAA6B;aACxC,+BAA+B;;;UAGlC,YAAY;wBACE,0BAA0B;aACrC,4BAA4B;;;UAG/B,YAAY;wBACE,4BAA4B;aACvC,8BAA8B;;;UAGjC,YAAY;UACZ,YAAY;wBACE,kCAAkC;;;UAGhD,YAAY;UACZ,YAAY;wBACE,+BAA+B;;;UAG7C,YAAY;UACZ,YAAY;wBACE,iCAAiC;;;UAG/C,YAAY;;aAET,oCAAoC;;;UAGvC,YAAY;aACT,iCAAiC;;;UAGpC,YAAY;aACT,mCAAmC;;CAE/C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;YACxB,YAAY;;UAEd,YAAY;;;;;GAKnB,CAAC,CACH,CAAC"}

package/dist/esm/tooltip/define.js

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './tooltip.definition.js';
+definition.define(FluentDesignSystem.registry);
+//# sourceMappingURL=define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/tooltip/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/tooltip/index.js

@@ -0,0 +1,6 @@
+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';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -0,0 +1,17 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Tooltip } from './tooltip.js';
+import { styles } from './tooltip.styles.js';
+import { template } from './tooltip.template.js';
+/**
+ * The {@link Tooltip } custom element definition.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-tooltip>`
+ */
+export const definition = Tooltip.compose({
+    name: `${FluentDesignSystem.prefix}-tooltip`,
+    template,
+    styles,
+});
+//# sourceMappingURL=tooltip.definition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.definition.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,UAAU;IAC5C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/tooltip/tooltip.js

@@ -0,0 +1,202 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, nullableNumberConverter, Updates } from '@microsoft/fast-element';
+import { uniqueId } from '@microsoft/fast-web-utilities';
+import { AnchorPositioningCSSSupported, AnchorPositioningHTMLSupported } from '../utils/support.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 class Tooltip extends FASTElement {
+    /**
+     * Updates the fallback styles when the positioning changes.
+     *
+     * @internal
+     */
+    positioningChanged() {
+        if (!AnchorPositioningCSSSupported) {
+            this.setFallbackStyles();
+        }
+    }
+    /**
+     * Reference to the anchor element
+     * @internal
+     */
+    get anchorElement() {
+        const rootNode = this.getRootNode();
+        return (rootNode instanceof ShadowRoot ? rootNode : document).getElementById(this.anchor ?? '');
+    }
+    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() {
+        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);
+        this.anchorElement.addEventListener('focus', this.focusAnchorHandler);
+        this.anchorElement.addEventListener('blur', this.blurAnchorHandler);
+        this.anchorElement.addEventListener('mouseenter', this.mouseenterAnchorHandler);
+        this.anchorElement.addEventListener('mouseleave', this.mouseleaveAnchorHandler);
+        if (AnchorPositioningCSSSupported) {
+            if (!AnchorPositioningHTMLSupported) {
+                // @ts-expect-error - Baseline 2024
+                this.anchorElement.style.anchorName = anchorName;
+                // @ts-expect-error - Baseline 2024
+                this.style.positionAnchor = anchorName;
+            }
+            return;
+        }
+        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);
+    }
+    /**
+     * Shows the tooltip
+     * @param delay Number of milliseconds to delay showing the tooltip
+     * @internal
+     */
+    showTooltip(delay = this.defaultDelay) {
+        setTimeout(() => {
+            this.setAttribute('aria-hidden', 'false');
+            this.showPopover();
+        }, delay);
+    }
+    /**
+     * Hide the tooltip
+     * @param delay Number of milliseconds to delay hiding the tooltip
+     * @internal
+     */
+    hideTooltip(delay = this.defaultDelay) {
+        setTimeout(() => {
+            // Detect if the tooltip or anchor element is still hovered and enqueue another hide
+            if (this.matches(':hover') || this.anchorElement?.matches(':hover')) {
+                this.hideTooltip(delay);
+                return;
+            }
+            this.setAttribute('aria-hidden', 'true');
+            this.hidePopover();
+        }, delay);
+    }
+    setFallbackStyles() {
+        if (!this.anchorElement) {
+            return;
+        }
+        // @ts-expect-error - Baseline 2024
+        const anchorName = this.anchorElement.style.anchorName || `--${this.anchor}`;
+        // Provide style fallback for browsers that do not support anchor positioning
+        if (!this.anchorPositioningStyleElement) {
+            this.anchorPositioningStyleElement = document.createElement('style');
+            document.head.append(this.anchorPositioningStyleElement);
+        }
+        let [direction, alignment] = this.positioning?.split('-') ?? [];
+        if (!alignment) {
+            if (direction === 'above' || direction === 'below') {
+                alignment = 'centerX';
+            }
+            if (direction === 'before' || direction === 'after') {
+                alignment = 'centerY';
+            }
+        }
+        const directionCSSMap = {
+            above: `bottom: anchor(top);`,
+            below: `top: anchor(bottom);`,
+            before: `right: anchor(left);`,
+            after: `left: anchor(right);`,
+        };
+        const directionCSS = directionCSSMap[direction] ?? directionCSSMap.above;
+        const alignmentCSSMap = {
+            start: `left: anchor(left);`,
+            end: `right: anchor(right);`,
+            top: `top: anchor(top);`,
+            bottom: `bottom: anchor(bottom);`,
+            centerX: `left: anchor(center); translate: -50% 0;`,
+            centerY: `top: anchor(center); translate: 0 -50%;`,
+        };
+        const alignmentCSS = alignmentCSSMap[alignment] ?? alignmentCSSMap.centerX;
+        this.anchorPositioningStyleElement.textContent = /* css */ `
+      #${this.anchor} {
+        anchor-name: ${anchorName};
+      }
+      #${this.id} {
+        inset: unset;
+        position-anchor: ${anchorName};
+        position: absolute;
+        ${directionCSS}
+        ${alignmentCSS}
+      }
+    `;
+        if (window.CSS_ANCHOR_POLYFILL) {
+            window.CSS_ANCHOR_POLYFILL.call({ element: this.anchorPositioningStyleElement });
+        }
+    }
+}
+__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":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,6BAA6B,EAAE,8BAA8B,EAAE,MAAM,qBAAqB,CAAC;AAGpG;;;;;;;GAOG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IAkCtC;;;;OAIG;IACI,kBAAkB;QACvB,IAAI,CAAC,6BAA6B,EAAE,CAAC;YACnC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,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;QAlEV;;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;QAmBnC;;WAEG;QAEI,WAAM,GAAW,EAAE,CAAC;QAW3B;;;WAGG;QACO,kCAA6B,GAA4B,IAAI,CAAC;QA6ExE;;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;QAxFnD,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,SAAS,CAAC;IACzC,CAAC;IAEM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,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,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,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;IACtF,CAAC;IAED;;;;OAIG;IACI,WAAW,CAAC,QAAgB,IAAI,CAAC,YAAY;QAClD,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;IAmBO,iBAAiB;QACvB,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,IAAI,MAAM,CAAC,mBAAmB,EAAE,CAAC;YAC/B,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,6BAA6B,EAAE,CAAC,CAAC;QACnF,CAAC;IACH,CAAC;CACF;AA7MQ;IADN,IAAI;mCACoC;AAMlC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;sCACvB;AAYf;IADN,IAAI;4CACyC;AAiBvC;IADN,IAAI;uCACsB"}

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"}