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

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

@@ -1,107 +1,60 @@
-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.
+ *
  * @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;;;;GAIG;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;YACpC,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;SAC/E;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.options.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.options.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAExF;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAOvD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAQ7C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAAC"}
+{"version":3,"file":"toggle-button.options.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAIxF;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAOvD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAQ7C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAAC"}

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

@@ -1,92 +1,98 @@
 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 { outlineState, pressedState, primaryState, subtleState, transparentState } 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 {
-    border-color: var(${colorNeutralStroke1});
-    background-color: var(${colorNeutralBackground1Selected});
-    color: var(${colorNeutralForeground1});
-    border-width: var(${strokeWidthThin});
+  :host(${pressedState}) {
+    border-color: ${colorNeutralStroke1};
+    background-color: ${colorNeutralBackground1Selected};
+    color: ${colorNeutralForeground1};
+    border-width: ${strokeWidthThin};
   }
 
-  :host([aria-pressed='true']:hover) .control {
-    border-color: var(${colorNeutralStroke1Hover});
-    background-color: var(${colorNeutralBackground1Hover});
+  :host(${pressedState}:hover) {
+    border-color: ${colorNeutralStroke1Hover};
+    background-color: ${colorNeutralBackground1Hover};
   }
 
-  :host([aria-pressed='true']:active) .control {
-    border-color: var(${colorNeutralStroke1Pressed});
-    background-color: var(${colorNeutralBackground1Pressed});
+  :host(${pressedState}:active) {
+    border-color: ${colorNeutralStroke1Pressed};
+    background-color: ${colorNeutralBackground1Pressed};
   }
 
-  :host([aria-pressed='true'][appearance='primary']) .control {
+  :host(${pressedState}${primaryState}) {
     border-color: transparent;
-    background-color: var(${colorBrandBackgroundSelected});
-    color: var(${colorNeutralForegroundOnBrand});
+    background-color: ${colorBrandBackgroundSelected};
+    color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([aria-pressed='true'][appearance='primary']:hover) .control {
-    background-color: var(${colorBrandBackgroundHover});
+  :host(${pressedState}${primaryState}:hover) {
+    background-color: ${colorBrandBackgroundHover};
   }
 
-  :host([aria-pressed='true'][appearance='primary']:active) .control {
-    background-color: var(${colorBrandBackgroundPressed});
+  :host(${pressedState}${primaryState}:active) {
+    background-color: ${colorBrandBackgroundPressed};
   }
 
-  :host([aria-pressed='true'][appearance='subtle']) .control {
+  :host(${pressedState}${subtleState}) {
     border-color: transparent;
-    background-color: var(${colorSubtleBackgroundSelected});
-    color: var(${colorNeutralForeground2Selected});
+    background-color: ${colorSubtleBackgroundSelected};
+    color: ${colorNeutralForeground2Selected};
   }
 
-  :host([aria-pressed='true'][appearance='subtle']:hover) .control {
-    background-color: var(${colorSubtleBackgroundHover});
-    color: var(${colorNeutralForeground2Hover});
+  :host(${pressedState}${subtleState}:hover) {
+    background-color: ${colorSubtleBackgroundHover};
+    color: ${colorNeutralForeground2Hover};
   }
 
-  :host([aria-pressed='true'][appearance='subtle']:active) .control {
-    background-color: var(${colorSubtleBackgroundPressed});
-    color: var(${colorNeutralForeground2Pressed});
+  :host(${pressedState}${subtleState}:active) {
+    background-color: ${colorSubtleBackgroundPressed};
+    color: ${colorNeutralForeground2Pressed};
   }
 
-  :host([aria-pressed='true'][appearance='outline']) .control,
-  :host([aria-pressed='true'][appearance='transparent']) .control {
-    background-color: var(${colorTransparentBackgroundSelected});
+  :host(${pressedState}${outlineState}),
+  :host(${pressedState}${transparentState}) {
+    background-color: ${colorTransparentBackgroundSelected};
   }
 
-  :host([aria-pressed='true'][appearance='outline']:hover) .control,
-  :host([aria-pressed='true'][appearance='transparent']:hover) .control {
-    background-color: var(${colorTransparentBackgroundHover});
+  :host(${pressedState}${outlineState}:hover),
+  :host(${pressedState}${transparentState}:hover) {
+    background-color: ${colorTransparentBackgroundHover};
   }
 
-  :host([aria-pressed='true'][appearance='outline']:active) .control,
-  :host([aria-pressed='true'][appearance='transparent']:active) .control {
-    background-color: var(${colorTransparentBackgroundPressed});
+  :host(${pressedState}${outlineState}:active),
+  :host(${pressedState}${transparentState}:active) {
+    background-color: ${colorTransparentBackgroundPressed};
   }
 
-  :host([aria-pressed='true'][appearance='transparent']) .control {
+  :host(${pressedState}${transparentState}) {
     border-color: transparent;
-    color: var(${colorNeutralForeground2BrandSelected});
+    color: ${colorNeutralForeground2BrandSelected};
   }
 
-  :host([aria-pressed='true'][appearance='transparent']:hover) .control {
-    color: var(${colorNeutralForeground2BrandHover});
+  :host(${pressedState}${transparentState}:hover) {
+    color: ${colorNeutralForeground2BrandHover};
   }
 
-  :host([aria-pressed='true'][appearance='transparent']:active) .control {
-    color: var(${colorNeutralForeground2BrandPressed});
+  :host(${pressedState}${transparentState}: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}${primaryState}),
+    :host(${pressedState}${subtleState}),
+    :host(${pressedState}${outlineState}),
+    :host(${pressedState}${transparentState}) {
       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;;;wBAGQ,mBAAmB;4BACf,+BAA+B;iBAC1C,uBAAuB;wBAChB,eAAe;;;;wBAIf,wBAAwB;4BACpB,4BAA4B;;;;wBAIhC,0BAA0B;4BACtB,8BAA8B;;;;;4BAK9B,4BAA4B;iBACvC,6BAA6B;;;;4BAIlB,yBAAyB;;;;4BAIzB,2BAA2B;;;;;4BAK3B,6BAA6B;iBACxC,+BAA+B;;;;4BAIpB,0BAA0B;iBACrC,4BAA4B;;;;4BAIjB,4BAA4B;iBACvC,8BAA8B;;;;;4BAKnB,kCAAkC;;;;;4BAKlC,+BAA+B;;;;;4BAK/B,iCAAiC;;;;;iBAK5C,oCAAoC;;;;iBAIpC,iCAAiC;;;;iBAIjC,mCAAmC;;CAEnD,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,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAEpH;;;;;;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,GAAG,YAAY;;wBAEb,4BAA4B;aACvC,6BAA6B;;;UAGhC,YAAY,GAAG,YAAY;wBACb,yBAAyB;;;UAGvC,YAAY,GAAG,YAAY;wBACb,2BAA2B;;;UAGzC,YAAY,GAAG,WAAW;;wBAEZ,6BAA6B;aACxC,+BAA+B;;;UAGlC,YAAY,GAAG,WAAW;wBACZ,0BAA0B;aACrC,4BAA4B;;;UAG/B,YAAY,GAAG,WAAW;wBACZ,4BAA4B;aACvC,8BAA8B;;;UAGjC,YAAY,GAAG,YAAY;UAC3B,YAAY,GAAG,gBAAgB;wBACjB,kCAAkC;;;UAGhD,YAAY,GAAG,YAAY;UAC3B,YAAY,GAAG,gBAAgB;wBACjB,+BAA+B;;;UAG7C,YAAY,GAAG,YAAY;UAC3B,YAAY,GAAG,gBAAgB;wBACjB,iCAAiC;;;UAG/C,YAAY,GAAG,gBAAgB;;aAE5B,oCAAoC;;;UAGvC,YAAY,GAAG,gBAAgB;aAC5B,iCAAiC;;;UAGpC,YAAY,GAAG,gBAAgB;aAC5B,mCAAmC;;CAE/C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;YACxB,YAAY;YACZ,YAAY,GAAG,YAAY;YAC3B,YAAY,GAAG,WAAW;YAC1B,YAAY,GAAG,YAAY;YAC3B,YAAY,GAAG,gBAAgB;;;;GAIxC,CAAC,CACH,CAAC"}

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

@@ -1,4 +1,4 @@
-import { buttonTemplate } from '@microsoft/fast-foundation/button.js';
+import { buttonTemplate } from '../button/button.template.js';
 /**
  * The template for the ToggleButton component.
  * @public

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.template.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAGtE;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAsC,cAAc,EAAE,CAAC"}
+{"version":3,"file":"toggle-button.template.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAG9D;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAsC,cAAc,EAAE,CAAC"}

package/dist/esm/utils/behaviors/match-media-stylesheet-behavior.js

@@ -0,0 +1,142 @@
+/**
+ * An abstract behavior to react to media queries. Implementations should implement
+ * the `constructListener` method to perform some action based on media query changes.
+ *
+ * @public
+ */
+export class MatchMediaBehavior {
+    /**
+     *
+     * @param query - The media query to operate from.
+     */
+    constructor(query) {
+        /**
+         * The behavior needs to operate on element instances but elements might share a behavior instance.
+         * To ensure proper attachment / detachment per instance, we construct a listener for
+         * each bind invocation and cache the listeners by element reference.
+         */
+        this.listenerCache = new WeakMap();
+        this.query = query;
+    }
+    /**
+     * Binds the behavior to the element.
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    connectedCallback(controller) {
+        const { query } = this;
+        let listener = this.listenerCache.get(controller);
+        if (!listener) {
+            listener = this.constructListener(controller);
+            this.listenerCache.set(controller, listener);
+        }
+        // Invoke immediately to add if the query currently matches
+        listener.bind(query)();
+        query.addEventListener('change', listener);
+    }
+    /**
+     * Unbinds the behavior from the element.
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    disconnectedCallback(controller) {
+        const listener = this.listenerCache.get(controller);
+        if (listener) {
+            this.query.removeEventListener('change', listener);
+        }
+    }
+}
+/**
+ * A behavior to add or remove a stylesheet from an element based on a media query. The behavior ensures that
+ * styles are applied while the a query matches the environment and that styles are not applied if the query does
+ * not match the environment.
+ *
+ * @public
+ */
+export class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
+    /**
+     * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
+     * @param query - The media query to operate from.
+     * @param styles - The styles to coordinate with the query.
+     */
+    constructor(query, styles) {
+        super(query);
+        this.styles = styles;
+    }
+    /**
+     * Defines a function to construct {@link MatchMediaStyleSheetBehavior | MatchMediaStyleSheetBehaviors} for
+     * a provided query.
+     * @param query - The media query to operate from.
+     *
+     * @public
+     * @example
+     *
+     * ```ts
+     * import { css } from "@microsoft/fast-element";
+     * import { MatchMediaStyleSheetBehavior } from "@fluentui/web-components";
+     *
+     * const landscapeBehavior = MatchMediaStyleSheetBehavior.with(
+     *   window.matchMedia("(orientation: landscape)")
+     * );
+     *
+     * const styles = css`
+     *   :host {
+     *     width: 200px;
+     *     height: 400px;
+     *   }
+     * `
+     * .withBehaviors(landscapeBehavior(css`
+     *   :host {
+     *     width: 400px;
+     *     height: 200px;
+     *   }
+     * `))
+     * ```
+     */
+    static with(query) {
+        return (styles) => {
+            return new MatchMediaStyleSheetBehavior(query, styles);
+        };
+    }
+    /**
+     * Constructs a match-media listener for a provided element.
+     * @param source - the element for which to attach or detach styles.
+     */
+    constructListener(controller) {
+        let attached = false;
+        const styles = this.styles;
+        return function listener() {
+            const { matches } = this;
+            if (matches && !attached) {
+                controller.addStyles(styles);
+                attached = matches;
+            }
+            else if (!matches && attached) {
+                controller.removeStyles(styles);
+                attached = matches;
+            }
+        };
+    }
+    /**
+     * Unbinds the behavior from the element.
+     * @param controller - The host controller orchestrating this behavior.
+     * @internal
+     */
+    removedCallback(controller) {
+        controller.removeStyles(this.styles);
+    }
+}
+/**
+ * This can be used to construct a behavior to apply a forced-colors only stylesheet.
+ * @public
+ */
+export const forcedColorsStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia('(forced-colors)'));
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: dark only stylesheet.
+ * @public
+ */
+export const darkModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia('(prefers-color-scheme: dark)'));
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: light only stylesheet.
+ * @public
+ */
+export const lightModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia('(prefers-color-scheme: light)'));
+//# sourceMappingURL=match-media-stylesheet-behavior.js.map

package/dist/esm/utils/behaviors/match-media-stylesheet-behavior.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"match-media-stylesheet-behavior.js","sourceRoot":"","sources":["../../../../src/utils/behaviors/match-media-stylesheet-behavior.ts"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,MAAM,OAAgB,kBAAkB;IAatC;;;OAGG;IACH,YAAY,KAAqB;QAhBjC;;;;WAIG;QACK,kBAAa,GAAG,IAAI,OAAO,EAA0C,CAAC;QAY5E,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAQD;;;OAGG;IACH,iBAAiB,CAAC,UAA0B;QAC1C,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACvB,IAAI,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAElD,IAAI,CAAC,QAAQ,EAAE;YACb,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;YAC9C,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;SAC9C;QAED,2DAA2D;QAC3D,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QACvB,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAED;;;OAGG;IACH,oBAAoB,CAAC,UAA0B;QAC7C,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;SACpD;IACH,CAAC;CACF;AAED;;;;;;GAMG;AACH,MAAM,OAAO,4BAA6B,SAAQ,kBAAkB;IAWlE;;;;OAIG;IACH,YAAY,KAAqB,EAAE,MAAqB;QACtD,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACI,MAAM,CAAC,IAAI,CAAC,KAAqB;QACtC,OAAO,CAAC,MAAqB,EAAE,EAAE;YAC/B,OAAO,IAAI,4BAA4B,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC;IAED;;;OAGG;IACO,iBAAiB,CAAC,UAA0B;QACpD,IAAI,QAAQ,GAAG,KAAK,CAAC;QACrB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAE3B,OAAO,SAAS,QAAQ;YACtB,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;YAEzB,IAAI,OAAO,IAAI,CAAC,QAAQ,EAAE;gBACxB,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;gBAC7B,QAAQ,GAAG,OAAO,CAAC;aACpB;iBAAM,IAAI,CAAC,OAAO,IAAI,QAAQ,EAAE;gBAC/B,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;gBAChC,QAAQ,GAAG,OAAO,CAAC;aACpB;QACH,CAAC,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACI,eAAe,CAAC,UAA+B;QACpD,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACvC,CAAC;CACF;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,4BAA4B,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC;AAEtH;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,4BAA4B,CAAC,IAAI,CACzE,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAClD,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,4BAA4B,CAAC,IAAI,CAC1E,MAAM,CAAC,UAAU,CAAC,+BAA+B,CAAC,CACnD,CAAC"}

package/dist/esm/utils/benchmark-dependencies/tokens.js

@@ -0,0 +1,2 @@
+export * from '@fluentui/tokens';
+//# sourceMappingURL=tokens.js.map

package/dist/esm/utils/benchmark-dependencies/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../../src/utils/benchmark-dependencies/tokens.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/esm/utils/benchmark-wrapper.js

@@ -0,0 +1,18 @@
+// eslint-disable-next-line
+// @ts-nocheck
+import { tests } from '@tensile-perf/web-components';
+import { webLightTheme } from '@fluentui/tokens';
+import { setTheme } from '@fluentui/web-components';
+const testWrapper = (test, args) => {
+    setTheme(webLightTheme);
+    return test(args);
+};
+const wrappedTests = {};
+for (const testName of Object.keys(tests)) {
+    const test = tests[testName];
+    wrappedTests[testName] = (args) => {
+        return testWrapper(test, args);
+    };
+}
+export { wrappedTests as tests };
+//# sourceMappingURL=benchmark-wrapper.js.map

package/dist/esm/utils/benchmark-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"benchmark-wrapper.js","sourceRoot":"","sources":["../../../src/utils/benchmark-wrapper.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,cAAc;AACd,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,MAAM,WAAW,GAAG,CAAC,IAAS,EAAE,IAAS,EAAE,EAAE;IAC3C,QAAQ,CAAC,aAAa,CAAC,CAAC;IACxB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,EAAE,CAAC;AAExB,KAAK,MAAM,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;IACzC,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE7B,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAS,EAAE,EAAE;QACrC,OAAO,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACjC,CAAC,CAAC;CACH;AAED,OAAO,EAAE,YAAY,IAAI,KAAK,EAAE,CAAC"}

package/dist/esm/utils/converters.js

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

package/dist/esm/utils/converters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"converters.js","sourceRoot":"","sources":["../../../src/utils/converters.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAmB;IACvD,QAAQ,CAAC,KAAa;QACpB,MAAM,aAAa,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QACxC,OAAO,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;IACrE,CAAC;IACD,MAAM,CAAC,KAAU;QACf,MAAM,aAAa,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QACxC,OAAO,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;IAC5E,CAAC;CACF,CAAC"}

package/dist/esm/utils/direction.js

@@ -0,0 +1,15 @@
+//Copied from @microsoft/fast-foundation
+import { Direction } from '@microsoft/fast-web-utilities';
+/**
+ * Determines the current localization direction of an element.
+ *
+ * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
+ * @returns the localization direction of the element
+ *
+ * @public
+ */
+export const getDirection = (rootNode) => {
+    var _a;
+    return ((_a = rootNode.closest('[dir]')) === null || _a === void 0 ? void 0 : _a.dir) === 'rtl' ? Direction.rtl : Direction.ltr;
+};
+//# sourceMappingURL=direction.js.map

package/dist/esm/utils/direction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"direction.js","sourceRoot":"","sources":["../../../src/utils/direction.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAqB,EAAa,EAAE;;IAC/D,OAAO,CAAA,MAAA,QAAQ,CAAC,OAAO,CAAc,OAAO,CAAC,0CAAE,GAAG,MAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC;AAC/F,CAAC,CAAC"}

package/dist/esm/utils/display.js

@@ -0,0 +1,15 @@
+/**
+ * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
+ * @public
+ */
+export const hidden = `:host([hidden]){display:none}`;
+/**
+ * Applies a CSS display property.
+ * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
+ * @param display - The CSS display property value
+ * @public
+ */
+export function display(displayValue) {
+    return `${hidden}:host{display:${displayValue}}`;
+}
+//# sourceMappingURL=display.js.map

package/dist/esm/utils/display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.js","sourceRoot":"","sources":["../../../src/utils/display.ts"],"names":[],"mappings":"AA6BA;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,+BAA+B,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,YAAqC;IAC3D,OAAO,GAAG,MAAM,iBAAiB,YAAY,GAAG,CAAC;AACnD,CAAC"}