@fluentui/web-components 3.0.0-beta.30 → 3.0.0-beta.31

package/dist/esm/badge/badge.js

@@ -3,6 +3,7 @@ import { attr, FASTElement } from '@microsoft/fast-element';
 // TODO: Remove with https://github.com/microsoft/fast/pull/6797
 import { applyMixins } from '../utils/apply-mixins.js';
 import { StartEnd } from '../patterns/index.js';
+import { toggleState } from '../utils/element-internals.js';
 import { BadgeAppearance, BadgeColor } from './badge.options.js';
 /**
  * The base class used for constructing a fluent-badge custom element
@@ -11,6 +12,12 @@ import { BadgeAppearance, BadgeColor } from './badge.options.js';
 export class Badge extends FASTElement {
     constructor() {
         super(...arguments);
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
         /**
          * The appearance the badge should have.
          *
@@ -28,6 +35,58 @@ export class Badge extends FASTElement {
          */
         this.color = BadgeColor.brand;
     }
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
+    /**
+     * Handles changes to color attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    colorChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
 }
 __decorate([
     attr

package/dist/esm/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/badge/badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,gEAAgE;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAyB,MAAM,oBAAoB,CAAC;AAExF;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QACE;;;;;;WAMG;QAEI,eAAU,GAAoB,eAAe,CAAC,MAAM,CAAC;QAE5D;;;;;;WAMG;QAEI,UAAK,GAAe,UAAU,CAAC,KAAK,CAAC;IAoB9C,CAAC;CAAA;AA9BC;IADC,IAAI;yCACuD;AAU5D;IADC,IAAI;oCACuC;AAS5C;IADC,IAAI;oCACqB;AAU1B;IADC,IAAI;mCACmB;AAW1B,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/badge/badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,gEAAgE;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,UAAU,EAAyB,MAAM,oBAAoB,CAAC;AAExF;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAEnE;;;;;;WAMG;QAEI,eAAU,GAAoB,eAAe,CAAC,MAAM,CAAC;QAgB5D;;;;;;WAMG;QAEI,UAAK,GAAe,UAAU,CAAC,KAAK,CAAC;IA+D9C,CAAC;IArFC;;;;OAIG;IACI,iBAAiB,CAAC,IAAiC,EAAE,IAAiC;QAC3F,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAA4B,EAAE,IAA4B;QAC5E,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAA4B,EAAE,IAA4B;QAC5E,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAYD;;;;OAIG;IACI,WAAW,CAAC,IAA2B,EAAE,IAA2B;QACzE,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;CACF;AAvFC;IADC,IAAI;yCACuD;AAwB5D;IADC,IAAI;oCACuC;AAwB5C;IADC,IAAI;oCACqB;AAwB1B;IADC,IAAI;mCACmB;AAyB1B,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC"}

package/dist/esm/badge/badge.styles.js

@@ -2,22 +2,23 @@ import { css } from '@microsoft/fast-element';
 import { forcedColorsStylesheetBehavior } from '../utils/index.js';
 import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeOutlineStyles, badgeSizeStyles, badgeTintStyles, } from '../styles/index.js';
 import { borderRadiusMedium, borderRadiusNone, borderRadiusSmall } from '../theme/design-tokens.js';
+import { extraSmallState, roundedState, smallState, squareState, tinyState } from '../styles/states/index.js';
 // why is the border not showing up?
 /** Badge styles
  * @public
  */
 export const styles = css `
-  :host([shape='square']) {
+  :host(${squareState}) {
     border-radius: ${borderRadiusNone};
   }
 
-  :host([shape='rounded']) {
+  :host(${roundedState}) {
     border-radius: ${borderRadiusMedium};
   }
 
-  :host([shape='rounded'][size='tiny']),
-  :host([shape='rounded'][size='extra-small']),
-  :host([shape='rounded'][size='small']) {
+  :host(${roundedState}${tinyState}),
+  :host(${roundedState}${extraSmallState}),
+  :host(${roundedState}${smallState}) {
     border-radius: ${borderRadiusSmall};
   }
 

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

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../src/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACpG,oCAAoC;AACpC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;qBAEJ,gBAAgB;;;;qBAIhB,kBAAkB;;;;;;qBAMlB,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,kBAAkB;IAClB,eAAe;IACf,eAAe;CAClB,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;GAMjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../src/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACpG,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC9G,oCAAoC;AACpC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;UACf,WAAW;qBACA,gBAAgB;;;UAG3B,YAAY;qBACD,kBAAkB;;;UAG7B,YAAY,GAAG,SAAS;UACxB,YAAY,GAAG,eAAe;UAC9B,YAAY,GAAG,UAAU;qBACd,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,kBAAkB;IAClB,eAAe;IACf,eAAe;CAClB,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;GAMjC,CAAC,CACH,CAAC"}

package/dist/esm/button/button.js

@@ -3,6 +3,7 @@ import { attr, FASTElement, observable } from '@microsoft/fast-element';
 import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';
 import { StartEnd } from '../patterns/index.js';
 import { applyMixins } from '../utils/apply-mixins.js';
+import { toggleState } from '../utils/element-internals.js';
 import { ButtonType } from './button.options.js';
 /**
  * A Button Custom HTML Element.
@@ -16,6 +17,19 @@ import { ButtonType } from './button.options.js';
  * @public
  */
 export class Button extends FASTElement {
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
     /**
      * Sets the element's internal disabled state when the element is focusable while disabled.
      *
@@ -36,6 +50,14 @@ export class Button extends FASTElement {
     get form() {
         return this.elementInternals.form;
     }
+    /**
+     * Handles changes to icon only custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    iconOnlyChanged(prev, next) {
+        toggleState(this.elementInternals, 'icon', next);
+    }
     /**
      * A reference to all associated label elements.
      *
@@ -44,6 +66,32 @@ export class Button extends FASTElement {
     get labels() {
         return Object.freeze(Array.from(this.elementInternals.labels));
     }
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
     /**
      * Removes the form submission fallback control when the type changes.
      *

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

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

package/dist/esm/button/button.options.js

@@ -6,7 +6,6 @@ export const ButtonAppearance = {
     primary: 'primary',
     outline: 'outline',
     subtle: 'subtle',
-    secondary: 'secondary',
     transparent: 'transparent',
 };
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"button.options.js","sourceRoot":"","sources":["../../../src/button/button.options.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,aAAa;CAClB,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAeX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,SAAS;IACjB,GAAG,EAAE,MAAM;CACH,CAAC"}
+{"version":3,"file":"button.options.js","sourceRoot":"","sources":["../../../src/button/button.options.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,aAAa;CAClB,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAeX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,SAAS;IACjB,GAAG,EAAE,MAAM;CACH,CAAC"}

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

@@ -1,6 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import { borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, colorBrandBackground, colorBrandBackgroundHover, colorBrandBackgroundPressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackgroundDisabled, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundOnBrand, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentStroke, curveEasyEase, durationFaster, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, shadow4, spacingHorizontalL, spacingHorizontalM, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
+import { circularState, iconOnlyState, largeState, outlineState, primaryState, smallState, squareState, subtleState, transparentState, } from '../styles/states/index.js';
 /**
  * @internal
  */
@@ -9,6 +10,7 @@ export const baseButtonStyles = css `
 
   :host {
     --icon-spacing: ${spacingHorizontalSNudge};
+    position: relative;
     contain: layout style;
     vertical-align: middle;
     align-items: center;
@@ -70,22 +72,20 @@ export const baseButtonStyles = css `
     fill: currentColor;
   }
 
-  [slot='start'],
-  ::slotted([slot='start']) {
+  :is([slot='start'], ::slotted([slot='start'])) {
     margin-inline-end: var(--icon-spacing);
   }
 
-  [slot='end'],
-  ::slotted([slot='end']) {
+  :is([slot='end'], ::slotted([slot='end'])) {
     margin-inline-start: var(--icon-spacing);
   }
 
-  :host([icon-only]) {
+  :host(${iconOnlyState}) {
     min-width: 32px;
     max-width: 32px;
   }
 
-  :host([size='small']) {
+  :host(${smallState}) {
     --icon-spacing: ${spacingHorizontalXS};
     min-height: 24px;
     min-width: 64px;
@@ -96,12 +96,12 @@ export const baseButtonStyles = css `
     font-weight: ${fontWeightRegular};
   }
 
-  :host([size='small'][icon-only]) {
+  :host(${smallState}${iconOnlyState}) {
     min-width: 24px;
     max-width: 24px;
   }
 
-  :host([size='large']) {
+  :host(${largeState}) {
     min-height: 40px;
     border-radius: ${borderRadiusLarge};
     padding: 0 ${spacingHorizontalL};
@@ -109,108 +109,103 @@ export const baseButtonStyles = css `
     line-height: ${lineHeightBase400};
   }
 
-  :host([size='large'][icon-only]) {
+  :host(${largeState}${iconOnlyState}) {
     min-width: 40px;
     max-width: 40px;
   }
 
-  :host([size='large']) ::slotted(svg) {
+  :host(${largeState}) ::slotted(svg) {
     font-size: 24px;
     height: 24px;
     width: 24px;
   }
 
-  :host([shape='circular']),
-  :host([shape='circular']:focus-visible) {
+  :host(:is(${circularState}, ${circularState}:focus-visible)) {
     border-radius: ${borderRadiusCircular};
   }
 
-  :host([shape='square']),
-  :host([shape='square']:focus-visible) {
+  :host(:is(${squareState}, ${squareState}:focus-visible)) {
     border-radius: ${borderRadiusNone};
   }
 
-  :host([appearance='primary']) {
+  :host(${primaryState}) {
     background-color: ${colorBrandBackground};
     color: ${colorNeutralForegroundOnBrand};
     border-color: transparent;
   }
 
-  :host([appearance='primary']:hover) {
+  :host(${primaryState}:hover) {
     background-color: ${colorBrandBackgroundHover};
   }
 
-  :host([appearance='primary']:hover),
-  :host([appearance='primary']:hover:active) {
+  :host(${primaryState}:is(:hover, :hover:active)) {
     border-color: transparent;
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([appearance='primary']:hover:active) {
+  :host(${primaryState}:hover:active) {
     background-color: ${colorBrandBackgroundPressed};
   }
 
-  :host([appearance='primary']:focus-visible) {
+  :host(${primaryState}:focus-visible) {
     border-color: ${colorNeutralForegroundOnBrand};
     box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
   }
 
-  :host([appearance='outline']) {
+  :host(${outlineState}) {
     background-color: ${colorTransparentBackground};
   }
 
-  :host([appearance='outline']:hover) {
+  :host(${outlineState}:hover) {
     background-color: ${colorTransparentBackgroundHover};
   }
 
-  :host([appearance='outline']:hover:active) {
+  :host(${outlineState}:hover:active) {
     background-color: ${colorTransparentBackgroundPressed};
   }
 
-  :host([appearance='subtle']) {
+  :host(${subtleState}) {
     background-color: ${colorSubtleBackground};
     color: ${colorNeutralForeground2};
     border-color: transparent;
   }
 
-  :host([appearance='subtle']:hover) {
+  :host(${subtleState}:hover) {
     background-color: ${colorSubtleBackgroundHover};
     color: ${colorNeutralForeground2Hover};
     border-color: transparent;
   }
 
-  :host([appearance='subtle']:hover:active) {
+  :host(${subtleState}:hover:active) {
     background-color: ${colorSubtleBackgroundPressed};
     color: ${colorNeutralForeground2Pressed};
     border-color: transparent;
   }
 
-  :host([appearance='subtle']:hover) ::slotted(svg) {
+  :host(${subtleState}:hover) ::slotted(svg) {
     fill: ${colorNeutralForeground2BrandHover};
   }
 
-  :host([appearance='subtle']:hover:active) ::slotted(svg) {
+  :host(${subtleState}:hover:active) ::slotted(svg) {
     fill: ${colorNeutralForeground2BrandPressed};
   }
 
-  :host([appearance='transparent']) {
+  :host(${transparentState}) {
     background-color: ${colorTransparentBackground};
     color: ${colorNeutralForeground2};
   }
 
-  :host([appearance='transparent']:hover) {
+  :host(${transparentState}:hover) {
     background-color: ${colorTransparentBackgroundHover};
     color: ${colorNeutralForeground2BrandHover};
   }
 
-  :host([appearance='transparent']:hover:active) {
+  :host(${transparentState}:hover:active) {
     background-color: ${colorTransparentBackgroundPressed};
     color: ${colorNeutralForeground2BrandPressed};
   }
 
-  :host([appearance='transparent']),
-  :host([appearance='transparent']:hover),
-  :host([appearance='transparent']:hover:active) {
+  :host(:is(${transparentState}, ${transparentState}:is(:hover, :active))) {
     border-color: transparent;
   }
 `;
@@ -222,37 +217,33 @@ export const baseButtonStyles = css `
 export const styles = css `
   ${baseButtonStyles}
 
-  :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) {
+  :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: ${colorNeutralBackgroundDisabled};
     border-color: ${colorNeutralStrokeDisabled};
     color: ${colorNeutralForegroundDisabled};
     cursor: not-allowed;
   }
 
-  :host(:is([disabled][appearance='primary'], [disabled-focusable][appearance='primary'])),
-  :host(:is([disabled][appearance='primary'], [disabled-focusable][appearance='primary']):hover),
-  :host(:is([disabled][appearance='primary'], [disabled-focusable][appearance='primary']):hover:active) {
+  :host(${primaryState}:is(:disabled, [disabled-focusable])),
+  :host(${primaryState}:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
     border-color: transparent;
   }
 
-  :host(:is([disabled][appearance='outline'], [disabled-focusable][appearance='outline'])),
-  :host(:is([disabled][appearance='outline'], [disabled-focusable][appearance='outline']):hover),
-  :host(:is([disabled][appearance='outline'], [disabled-focusable][appearance='outline']):hover:active) {
+  :host(${outlineState}:is(:disabled, [disabled-focusable])),
+  :host(${outlineState}:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
     background-color: ${colorTransparentBackground};
   }
 
-  :host(:is([disabled][appearance='subtle'], [disabled-focusable][appearance='subtle'])),
-  :host(:is([disabled][appearance='subtle'], [disabled-focusable][appearance='subtle']):hover),
-  :host(:is([disabled][appearance='subtle'], [disabled-focusable][appearance='subtle']):hover:active) {
+  :host(${subtleState}:is(:disabled, [disabled-focusable])),
+  :host(${subtleState}:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
     background-color: ${colorTransparentBackground};
     border-color: transparent;
   }
 
-  :host(:is([disabled][appearance='transparent'], [disabled-focusable][appearance='transparent'])),
-  :host(:is([disabled][appearance='transparent'], [disabled-focusable][appearance='transparent']):hover),
-  :host(:is([disabled][appearance='transparent'], [disabled-focusable][appearance='transparent']):hover:active) {
+  :host(${transparentState}:is(:disabled, [disabled-focusable])),
+  :host(${transparentState}:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
     border-color: transparent;
     background-color: ${colorTransparentBackground};
   }

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

@@ -1 +1 @@
-{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,2BAA2B,EAC3B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,qBAAqB,EACrB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,+BAA+B,EAC/B,iCAAiC,EACjC,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,aAAa,EACb,aAAa,EACb,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;IAC/B,OAAO,CAAC,aAAa,CAAC;;;sBAGJ,uBAAuB;;;;;;;;;;;;wBAYrB,uBAAuB;aAClC,uBAAuB;cACtB,eAAe,UAAU,mBAAmB;iBACzC,kBAAkB;;qBAEd,kBAAkB;iBACtB,eAAe;mBACb,cAAc;mBACd,kBAAkB;mBAClB,iBAAiB;2BACT,cAAc;;kCAEP,aAAa;;;;;;;;;;wBAUvB,4BAA4B;aACvC,4BAA4B;oBACrB,wBAAwB;;;;wBAIpB,8BAA8B;oBAClC,0BAA0B;aACjC,8BAA8B;;;;;oBAKvB,sBAAsB;eAC3B,gBAAgB,UAAU,sBAAsB;kBAC7C,OAAO,eAAe,iBAAiB;;;;;;;;;;;;;;;;;;;;;;UAsB/C,aAAa;;;;;UAKb,UAAU;sBACE,mBAAmB;;;iBAGxB,kBAAkB;qBACd,iBAAiB;iBACrB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;UAG1B,UAAU,GAAG,aAAa;;;;;UAK1B,UAAU;;qBAEC,iBAAiB;iBACrB,kBAAkB;iBAClB,eAAe;mBACb,iBAAiB;;;UAG1B,UAAU,GAAG,aAAa;;;;;UAK1B,UAAU;;;;;;cAMN,aAAa,KAAK,aAAa;qBACxB,oBAAoB;;;cAG3B,WAAW,KAAK,WAAW;qBACpB,gBAAgB;;;UAG3B,YAAY;wBACE,oBAAoB;aAC/B,6BAA6B;;;;UAIhC,YAAY;wBACE,yBAAyB;;;UAGvC,YAAY;;aAET,6BAA6B;;;UAGhC,YAAY;wBACE,2BAA2B;;;UAGzC,YAAY;oBACF,6BAA6B;kBAC/B,OAAO,eAAe,iBAAiB;;;UAG/C,YAAY;wBACE,0BAA0B;;;UAGxC,YAAY;wBACE,+BAA+B;;;UAG7C,YAAY;wBACE,iCAAiC;;;UAG/C,WAAW;wBACG,qBAAqB;aAChC,uBAAuB;;;;UAI1B,WAAW;wBACG,0BAA0B;aACrC,4BAA4B;;;;UAI/B,WAAW;wBACG,4BAA4B;aACvC,8BAA8B;;;;UAIjC,WAAW;YACT,iCAAiC;;;UAGnC,WAAW;YACT,mCAAmC;;;UAGrC,gBAAgB;wBACF,0BAA0B;aACrC,uBAAuB;;;UAG1B,gBAAgB;wBACF,+BAA+B;aAC1C,iCAAiC;;;UAGpC,gBAAgB;wBACF,iCAAiC;aAC5C,mCAAmC;;;cAGlC,gBAAgB,KAAK,gBAAgB;;;CAGlD,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,gBAAgB;;;;;wBAKI,8BAA8B;oBAClC,0BAA0B;aACjC,8BAA8B;;;;UAIjC,YAAY;UACZ,YAAY;;;;UAIZ,YAAY;UACZ,YAAY;wBACE,0BAA0B;;;UAGxC,WAAW;UACX,WAAW;wBACG,0BAA0B;;;;UAIxC,gBAAgB;UAChB,gBAAgB;;wBAEF,0BAA0B;;CAEjD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;GASjC,CAAC,CACH,CAAC"}

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

@@ -1,6 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { styles as ButtonStyles } from '../button/button.styles.js';
 import { colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundOnBrand, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, lineHeightBase300, lineHeightBase400, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, } from '../theme/design-tokens.js';
+import { iconOnlyState, largeState, primaryState, smallState, subtleState, transparentState, } from '../styles/states/index.js';
 // Need to support icon hover styles
 export const styles = css `
   ${ButtonStyles}
@@ -30,7 +31,7 @@ export const styles = css `
   }
 
   ::slotted(svg),
-  :host([size='large']) ::slotted(svg) {
+  :host(${largeState}) ::slotted(svg) {
     font-size: 40px;
     height: 40px;
     width: 40px;
@@ -44,61 +45,59 @@ export const styles = css `
     color: ${colorNeutralForeground2Pressed};
   }
 
-  :host(:is([appearance='primary'], [appearance='primary']:hover, [appearance='primary']:active))
-    ::slotted([slot='description']) {
+  :host(:is(${primaryState}, ${primaryState}:hover, ${primaryState}:active)) ::slotted([slot='description']) {
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host(:is([appearance='subtle'], [appearance='subtle']:hover, [appearance='subtle']:active))
-    ::slotted([slot='description']),
-  :host([appearance='transparent']) ::slotted([slot='description']) {
+  :host(:is(${subtleState}, ${subtleState}:hover, ${subtleState}:active)) ::slotted([slot='description']),
+  :host(${transparentState}) ::slotted([slot='description']) {
     color: ${colorNeutralForeground2};
   }
 
-  :host([appearance='transparent']:hover) ::slotted([slot='description']) {
+  :host(${transparentState}:hover) ::slotted([slot='description']) {
     color: ${colorNeutralForeground2BrandHover};
   }
 
-  :host([appearance='transparent']:active) ::slotted([slot='description']) {
+  :host(${transparentState}:active) ::slotted([slot='description']) {
     color: ${colorNeutralForeground2BrandPressed};
   }
 
-  :host(:is([disabled], [disabled][appearance], [disabled-focusable], [disabled-focusable][appearance]))
+  :host(:is(:disabled, :disabled[appearance], [disabled-focusable], [disabled-focusable][appearance]))
     ::slotted([slot='description']) {
     color: ${colorNeutralForegroundDisabled};
   }
 
-  :host([size='small']) {
+  :host(${smallState}) {
     padding: 8px;
     padding-bottom: 10px;
   }
 
-  :host([icon-only]) {
+  :host(${iconOnlyState}) {
     min-width: 52px;
     max-width: 52px;
     padding: ${spacingHorizontalSNudge};
   }
 
-  :host([icon-only][size='small']) {
+  :host(${iconOnlyState}${smallState}) {
     min-width: 48px;
     max-width: 48px;
     padding: ${spacingHorizontalXS};
   }
 
-  :host([icon-only][size='large']) {
+  :host(${iconOnlyState}${largeState}) {
     min-width: 56px;
     max-width: 56px;
     padding: ${spacingHorizontalS};
   }
 
-  :host([size='large']) {
+  :host(${largeState}) {
     padding-top: 18px;
     padding-inline: 16px;
     padding-bottom: 20px;
     font-size: ${fontSizeBase400};
     line-height: ${lineHeightBase400};
   }
-  :host([size='large']) ::slotted([slot='description']) {
+  :host(${largeState}) ::slotted([slot='description']) {
     font-size: ${fontSizeBase300};
   }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"compound-button.styles.js","sourceRoot":"","sources":["../../../src/compound-button/compound-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,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;;;;;iBASC,eAAe;mBACb,iBAAiB;;;;;;;;;;aAUvB,uBAAuB;;iBAEnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;aAWvB,4BAA4B;;;;aAI5B,8BAA8B;;;;;aAK9B,6BAA6B;;;;;;aAM7B,uBAAuB;;;;aAIvB,iCAAiC;;;;aAIjC,mCAAmC;;;;;aAKnC,8BAA8B;;;;;;;;;;;eAW5B,uBAAuB;;;;;;eAMvB,mBAAmB;;;;;;eAMnB,kBAAkB;;;;;;;iBAOhB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;;CAE/B,CAAC"}
+{"version":3,"file":"compound-button.styles.js","sourceRoot":"","sources":["../../../src/compound-button/compound-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,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,aAAa,EACb,UAAU,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;;;;;iBASC,eAAe;mBACb,iBAAiB;;;;;;;;;;aAUvB,uBAAuB;;iBAEnB,eAAe;mBACb,iBAAiB;;;;UAI1B,UAAU;;;;;;;aAOP,4BAA4B;;;;aAI5B,8BAA8B;;;cAG7B,YAAY,KAAK,YAAY,WAAW,YAAY;aACrD,6BAA6B;;;cAG5B,WAAW,KAAK,WAAW,WAAW,WAAW;UACrD,gBAAgB;aACb,uBAAuB;;;UAG1B,gBAAgB;aACb,iCAAiC;;;UAGpC,gBAAgB;aACb,mCAAmC;;;;;aAKnC,8BAA8B;;;UAGjC,UAAU;;;;;UAKV,aAAa;;;eAGR,uBAAuB;;;UAG5B,aAAa,GAAG,UAAU;;;eAGrB,mBAAmB;;;UAGxB,aAAa,GAAG,UAAU;;;eAGrB,kBAAkB;;;UAGvB,UAAU;;;;iBAIH,eAAe;mBACb,iBAAiB;;UAE1B,UAAU;iBACH,eAAe;;CAE/B,CAAC"}