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

package/dist/esm/counter-badge/counter-badge.js

@@ -3,6 +3,7 @@ import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-elem
 // 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';
 /**
  * The base class used for constructing a fluent-badge custom element
  * @public
@@ -10,6 +11,12 @@ import { StartEnd } from '../patterns/index.js';
 export class CounterBadge 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 count the badge should have.
          *
@@ -43,12 +50,72 @@ export class CounterBadge extends FASTElement {
          */
         this.dot = false;
     }
+    /**
+     * 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);
+        }
+    }
     countChanged() {
         this.setCount();
     }
     overflowCountChanged() {
         this.setCount();
     }
+    /**
+     * Handles changes to dot attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    dotChanged(prev, next) {
+        toggleState(this.elementInternals, 'dot', !!next);
+    }
     /**
      * @internal
      * Function to set the count

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

@@ -1 +1 @@
-{"version":3,"file":"counter-badge.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,gEAAgE;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAQhD;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QAwCE;;;;;;WAMG;QAEI,UAAK,GAAW,CAAC,CAAC;QAKzB;;;;;;WAMG;QAEI,kBAAa,GAAW,EAAE,CAAC;QAKlC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,QAAG,GAAY,KAAK,CAAC;IAiB9B,CAAC;IApDW,YAAY;QACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAWS,oBAAoB;QAC5B,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAsBD;;;;;OAKG;IACI,QAAQ;;QACb,MAAM,KAAK,GAAkB,MAAA,IAAI,CAAC,KAAK,mCAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YAC/C,OAAO,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC;SAC3E;QAED,OAAO;IACT,CAAC;CACF;AA5FC;IADC,IAAI;gDACsC;AAU3C;IADC,IAAI;2CAC4B;AASjC;IADC,IAAI;2CAC4B;AAUjC;IADC,IAAI;0CAC0B;AAU/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;2CACpB;AAazB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;mDACxC;AAalC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACjB;AAUjC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;yCACE;AA2B9B,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"counter-badge.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.ts"],"names":[],"mappings":"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"}

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

@@ -1,17 +1,23 @@
 import { css } from '@microsoft/fast-element';
 import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeSizeStyles } from '../styles/index.js';
 import { borderRadiusMedium, borderRadiusSmall } from '../theme/design-tokens.js';
+import { extraSmallState, roundedState, smallState, tinyState } from '../styles/states/index.js';
+/**
+ * Selector for the `dot` state.
+ * @public
+ */
+const dotState = css.partial `:is([state--dot], :state(dot))`;
 /** Badge styles
  * @public
  */
 export const styles = css `
-  :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};
   }
 
@@ -20,8 +26,8 @@ export const styles = css `
   ${badgeGhostStyles}
   ${badgeBaseStyles}
 
-  :host([dot]),
-  :host([dot][appearance][size]) {
+  :host(${dotState}),
+  :host(${dotState}[appearance][size]) {
     min-width: auto;
     width: 6px;
     height: 6px;

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

@@ -1 +1 @@
-{"version":3,"file":"counter-badge.styles.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC3G,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAElF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;qBAEJ,kBAAkB;;;;;;qBAMlB,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,eAAe;;;;;;;;;CASlB,CAAC"}
+{"version":3,"file":"counter-badge.styles.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC3G,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEjG;;;GAGG;AACH,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA,gCAAgC,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;UACf,YAAY;qBACD,kBAAkB;;;UAG7B,YAAY,GAAG,SAAS;UACxB,YAAY,GAAG,eAAe;UAC9B,YAAY,GAAG,UAAU;qBACd,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,eAAe;;UAET,QAAQ;UACR,QAAQ;;;;;;CAMjB,CAAC"}

package/dist/esm/link/link.styles.js

@@ -5,6 +5,7 @@ export const styles = css `
   ${display('inline')}
 
   :host {
+    position: relative;
     box-sizing: border-box;
     background-color: transparent;
     color: ${colorBrandForegroundLink};
@@ -59,6 +60,11 @@ export const styles = css `
     color: inherit;
     text-decoration: none;
   }
+
+  ::slotted(a) {
+    position: absolute;
+    inset: 0;
+  }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
     :host {
       color: LinkText;

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

@@ -1 +1 @@
-{"version":3,"file":"link.styles.js","sourceRoot":"","sources":["../../../src/link/link.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,wBAAwB,EACxB,6BAA6B,EAC7B,+BAA+B,EAC/B,2BAA2B,EAC3B,gCAAgC,EAChC,kCAAkC,EAClC,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;;aAKR,wBAAwB;;mBAElB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;iCAMH,eAAe;;;;;;;;;;;;eAYjC,6BAA6B;;;;eAI7B,+BAA+B;;;;eAI/B,gCAAgC;;;;eAIhC,kCAAkC;;;;;aAKpC,2BAA2B;;;;;;;;;;;;;CAavC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"link.styles.js","sourceRoot":"","sources":["../../../src/link/link.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,wBAAwB,EACxB,6BAA6B,EAC7B,+BAA+B,EAC/B,2BAA2B,EAC3B,gCAAgC,EAChC,kCAAkC,EAClC,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;;;aAMR,wBAAwB;;mBAElB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;iCAMH,eAAe;;;;;;;;;;;;eAYjC,6BAA6B;;;;eAI7B,+BAA+B;;;;eAI/B,gCAAgC;;;;eAIhC,kCAAkC;;;;;aAKpC,2BAA2B;;;;;;;;;;;;;;;;;;CAkBvC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}

package/dist/esm/link/link.template.js

@@ -7,8 +7,8 @@ export function anchorTemplate() {
     return html `
     <template
       tabindex="0"
-      @click="${x => x.clickHandler()}"
-      @keypress="${(x, c) => x.keypressHandler(c.event)}"
+      @click="${(x, c) => x.clickHandler(c.event)}"
+      @keydown="${(x, c) => x.keydownHandler(c.event)}"
     >
       <slot></slot>
     </template>

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

@@ -1 +1 @@
-{"version":3,"file":"link.template.js","sourceRoot":"","sources":["../../../src/link/link.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAGlF;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;;;gBAGA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE;mBAClB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;;;;GAIrE,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA8B,cAAc,EAAE,CAAC"}
+{"version":3,"file":"link.template.js","sourceRoot":"","sources":["../../../src/link/link.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAGlF;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;;;gBAGA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAqB,CAAC;kBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;;;GAInE,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA8B,cAAc,EAAE,CAAC"}

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

@@ -1,6 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../../utils/index.js';
 import { borderRadiusCircular, colorBrandBackground, colorBrandBackground2, colorBrandForeground1, colorBrandForeground2, colorBrandStroke2, colorNeutralBackground1, colorNeutralBackground4, colorNeutralBackground5, colorNeutralForeground1, colorNeutralForeground1Static, colorNeutralForeground3, colorNeutralForegroundInverted, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralStroke2, colorNeutralStrokeAccessible, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground3, colorPaletteGreenBackground1, colorPaletteGreenBackground3, colorPaletteGreenBorder2, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteRedBackground1, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedForeground1, colorPaletteRedForeground3, colorPaletteYellowBackground1, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowForeground2, colorTransparentStroke, fontFamilyBase, fontSizeBase100, fontSizeBase200, fontWeightSemibold, lineHeightBase100, lineHeightBase200, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, strokeWidthThin, } from '../../theme/design-tokens.js';
+import { dangerState, extraLargeState, extraSmallState, ghostState, importantState, informativeState, largeState, outlineState, severeState, smallState, subtleState, successState, tintState, tinyState, warningState, } from '../states/index.js';
 const textPadding = spacingHorizontalXXS;
 export const badgeBaseStyles = css.partial `
   ${display('inline-flex')} :host {
@@ -26,7 +27,7 @@ export const badgeBaseStyles = css.partial `
     font-size: 12px;
   }
 
-  :host(:not([appearance='ghost']))::after {
+  :host(:not(${ghostState}))::after {
     position: absolute;
     content: '';
     top: 0;
@@ -44,7 +45,7 @@ export const badgeBaseStyles = css.partial `
  * The badge's size styles
  */
 export const badgeSizeStyles = css.partial `
-  :host([size='tiny']) {
+  :host(${tinyState}) {
     width: 6px;
     height: 6px;
     font-size: 4px;
@@ -52,10 +53,10 @@ export const badgeSizeStyles = css.partial `
     padding-inline: 0;
     min-width: unset;
   }
-  :host([size='tiny']) ::slotted(svg) {
+  :host(${tinyState}) ::slotted(svg) {
     font-size: 6px;
   }
-  :host([size='extra-small']) {
+  :host(${extraSmallState}) {
     width: 10px;
     height: 10px;
     font-size: 6px;
@@ -63,37 +64,37 @@ export const badgeSizeStyles = css.partial `
     padding-inline: 0;
     min-width: unset;
   }
-  :host([size='extra-small']) ::slotted(svg) {
+  :host(${extraSmallState}) ::slotted(svg) {
     font-size: 10px;
   }
-  :host([size='small']) {
+  :host(${smallState}) {
     min-width: 16px;
     height: 16px;
     font-size: ${fontSizeBase100};
     line-height: ${lineHeightBase100};
     padding-inline: calc(${spacingHorizontalXXS} + ${textPadding});
   }
-  :host([size='small']) ::slotted(svg) {
+  :host(${smallState}) ::slotted(svg) {
     font-size: 12px;
   }
-  :host([size='large']) {
+  :host(${largeState}) {
     min-width: 24px;
     height: 24px;
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
     padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
   }
-  :host([size='large']) ::slotted(svg) {
+  :host(${largeState}) ::slotted(svg) {
     font-size: 16px;
   }
-  :host([size='extra-large']) {
+  :host(${extraLargeState}) {
     min-width: 32px;
     height: 32px;
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
     padding-inline: calc(${spacingHorizontalSNudge} + ${textPadding});
   }
-  :host([size='extra-large']) ::slotted(svg) {
+  :host(${extraLargeState}) ::slotted(svg) {
     font-size: 20px;
   }
 `;
@@ -104,37 +105,37 @@ export const badgeSizeStyles = css.partial `
  * @public
  */
 export const badgeFilledStyles = css.partial `
-  :host([color='danger']) {
+  :host(${dangerState}) {
     background-color: ${colorPaletteRedBackground3};
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([color='important']) {
+  :host(${importantState}) {
     background-color: ${colorNeutralForeground1};
     color: ${colorNeutralBackground1};
   }
 
-  :host([color='informative']) {
+  :host(${informativeState}) {
     background-color: ${colorNeutralBackground5};
     color: ${colorNeutralForeground3};
   }
 
-  :host([color='severe']) {
+  :host(${severeState}) {
     background-color: ${colorPaletteDarkOrangeBackground3};
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([color='subtle']) {
+  :host(${subtleState}) {
     background-color: ${colorNeutralBackground1};
     color: ${colorNeutralForeground1};
   }
 
-  :host([color='success']) {
+  :host(${successState}) {
     background-color: ${colorPaletteGreenBackground3};
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([color='warning']) {
+  :host(${warningState}) {
     background-color: ${colorPaletteYellowBackground3};
     color: ${colorNeutralForeground1Static};
   }
@@ -144,36 +145,36 @@ export const badgeFilledStyles = css.partial `
  * @public
  */
 export const badgeGhostStyles = css.partial `
-  :host([appearance='ghost']) {
+  :host(${ghostState}) {
     color: ${colorBrandForeground1};
     background-color: initial;
   }
 
-  :host([appearance='ghost'][color='danger']) {
+  :host(${ghostState}${dangerState}) {
     color: ${colorPaletteRedForeground3};
   }
 
-  :host([appearance='ghost'][color='important']) {
+  :host(${ghostState}${importantState}) {
     color: ${colorNeutralForeground1};
   }
 
-  :host([appearance='ghost'][color='informative']) {
+  :host(${ghostState}${informativeState}) {
     color: ${colorNeutralForeground3};
   }
 
-  :host([appearance='ghost'][color='severe']) {
+  :host(${ghostState}${severeState}) {
     color: ${colorPaletteDarkOrangeForeground3};
   }
 
-  :host([appearance='ghost'][color='subtle']) {
+  :host(${ghostState}${subtleState}) {
     color: ${colorNeutralForegroundInverted};
   }
 
-  :host([appearance='ghost'][color='success']) {
+  :host(${ghostState}${successState}) {
     color: ${colorPaletteGreenForeground3};
   }
 
-  :host([appearance='ghost'][color='warning']) {
+  :host(${ghostState}${warningState}) {
     color: ${colorPaletteYellowForeground2};
   }
 `;
@@ -182,39 +183,39 @@ export const badgeGhostStyles = css.partial `
  * @public
  */
 export const badgeOutlineStyles = css.partial `
-  :host([appearance='outline']) {
+  :host(${outlineState}) {
     border-color: currentColor;
     color: ${colorBrandForeground1};
     background-color: initial;
   }
 
-  :host([appearance='outline'][color='danger']) {
+  :host(${outlineState}${dangerState}) {
     color: ${colorPaletteRedForeground3};
   }
 
-  :host([appearance='outline'][color='important']) {
+  :host(${outlineState}${importantState}) {
     color: ${colorNeutralForeground3};
     border-color: ${colorNeutralStrokeAccessible};
   }
 
-  :host([appearance='outline'][color='informative']) {
+  :host(${outlineState}${informativeState}) {
     color: ${colorNeutralForeground3};
     border-color: ${colorNeutralStroke2};
   }
 
-  :host([appearance='outline'][color='severe']) {
+  :host(${outlineState}${severeState}) {
     color: ${colorPaletteDarkOrangeForeground3};
   }
 
-  :host([appearance='outline'][color='subtle']) {
+  :host(${outlineState}${subtleState}) {
     color: ${colorNeutralForegroundStaticInverted};
   }
 
-  :host([appearance='outline'][color='success']) {
+  :host(${outlineState}${successState}) {
     color: ${colorPaletteGreenForeground2};
   }
 
-  :host([appearance='outline'][color='warning']) {
+  :host(${outlineState}${warningState}) {
     color: ${colorPaletteYellowForeground2};
   }
 `;
@@ -223,49 +224,49 @@ export const badgeOutlineStyles = css.partial `
  * @public
  */
 export const badgeTintStyles = css.partial `
-  :host([appearance='tint']) {
+  :host(${tintState}) {
     background-color: ${colorBrandBackground2};
     color: ${colorBrandForeground2};
     border-color: ${colorBrandStroke2};
   }
 
-  :host([appearance='tint'][color='danger']) {
+  :host(${tintState}${dangerState}) {
     background-color: ${colorPaletteRedBackground1};
     color: ${colorPaletteRedForeground1};
     border-color: ${colorPaletteRedBorder1};
   }
 
-  :host([appearance='tint'][color='important']) {
+  :host(${tintState}${importantState}) {
     background-color: ${colorNeutralForeground3};
     color: ${colorNeutralBackground1};
     border-color: ${colorTransparentStroke};
   }
 
-  :host([appearance='tint'][color='informative']) {
+  :host(${tintState}${informativeState}) {
     background-color: ${colorNeutralBackground4};
     color: ${colorNeutralForeground3};
     border-color: ${colorNeutralStroke2};
   }
 
-  :host([appearance='tint'][color='severe']) {
+  :host(${tintState}${severeState}) {
     background-color: ${colorPaletteDarkOrangeBackground1};
     color: ${colorPaletteDarkOrangeForeground1};
     border-color: ${colorPaletteDarkOrangeBorder1};
   }
 
-  :host([appearance='tint'][color='subtle']) {
+  :host(${tintState}${subtleState}) {
     background-color: ${colorNeutralBackground1};
     color: ${colorNeutralForeground3};
     border-color: ${colorNeutralStroke2};
   }
 
-  :host([appearance='tint'][color='success']) {
+  :host(${tintState}${successState}) {
     background-color: ${colorPaletteGreenBackground1};
     color: ${colorPaletteGreenForeground1};
     border-color: ${colorPaletteGreenBorder2};
   }
 
-  :host([appearance='tint'][color='warning']) {
+  :host(${tintState}${warningState}) {
     background-color: ${colorPaletteYellowBackground1};
     color: ${colorPaletteYellowForeground2};
     border-color: ${colorPaletteYellowBorder1};

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

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

package/dist/esm/styles/states/index.js

@@ -0,0 +1,112 @@
+import { css } from '@microsoft/fast-element';
+/**
+ * Selector for the `ghost` state.
+ * @public
+ */
+export const ghostState = css.partial `:is([state--ghost], :state(ghost))`;
+/**
+ * Selector for the `primary` state.
+ * @public
+ */
+export const primaryState = css.partial `:is([state--primary], :state(primary))`;
+/**
+ * Selector for the `outline` state.
+ * @public
+ */
+export const outlineState = css.partial `:is([state--outline], :state(outline))`;
+/**
+ * Selector for the `subtle` state.
+ * @public
+ */
+export const subtleState = css.partial `:is([state--subtle], :state(subtle))`;
+/**
+ * Selector for the `tint` state.
+ * @public
+ */
+export const tintState = css.partial `:is([state--tint], :state(tint))`;
+/**
+ * Selector for the `transparent` state.
+ * @public
+ */
+export const transparentState = css.partial `:is([state--transparent], :state(transparent))`;
+/**
+ * Selector for the `circular` state.
+ * @public
+ */
+export const circularState = css.partial `:is([state--circular], :state(circular))`;
+/**
+ * Selector for the `rounded` state.
+ * @public
+ */
+export const roundedState = css.partial `:is([state--rounded], :state(rounded))`;
+/**
+ * Selector for the `square` state.
+ * @public
+ */
+export const squareState = css.partial `:is([state--square], :state(square))`;
+/**
+ * Selector for the `tiny` state.
+ * @public
+ */
+export const tinyState = css.partial `:is([state--tiny], :state(tiny))`;
+/**
+ * Selector for the `extra-small` state.
+ * @public
+ */
+export const extraSmallState = css.partial `:is([state--extra-small], :state(extra-small))`;
+/**
+ * Selector for the `small` state.
+ * @public
+ */
+export const smallState = css.partial `:is([state--small], :state(small))`;
+/**
+ * Selector for the `large` state.
+ * @public
+ */
+export const largeState = css.partial `:is([state--large], :state(large))`;
+/**
+ * Selector for the `extra-large` state.
+ * @public
+ */
+export const extraLargeState = css.partial `:is([state--extra-large], :state(extra-large))`;
+/**
+ * Selector for the `iconOnly` state.
+ * @public
+ */
+export const iconOnlyState = css.partial `:is([state--icon], :state(icon))`;
+/**
+ * Selector for the `pressed` state.
+ * @public
+ */
+export const pressedState = css.partial `:is([state--pressed], :state(pressed))`;
+/**
+ * Selector for the `danger` state.
+ * @public
+ */
+export const dangerState = css.partial `:is([state--danger], :state(danger))`;
+/**
+ * Selector for the `important` state.
+ * @public
+ */
+export const importantState = css.partial `:is([state--important], :state(important))`;
+/**
+ * Selector for the `informative` state.
+ * @public
+ */
+export const informativeState = css.partial `:is([state--informative], :state(informative))`;
+/**
+ * Selector for the `severe` state.
+ * @public
+ */
+export const severeState = css.partial `:is([state--severe], :state(severe))`;
+/**
+ * Selector for the `success` state.
+ * @public
+ */
+export const successState = css.partial `:is([state--success], :state(success))`;
+/**
+ * Selector for the `warning` state.
+ * @public
+ */
+export const warningState = css.partial `:is([state--warning], :state(warning))`;
+//# sourceMappingURL=index.js.map

package/dist/esm/styles/states/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/styles/states/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAA,oCAAoC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAE7E;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA,kCAAkC,CAAC;AAEvE;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAAA,gDAAgD,CAAC;AAE5F;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAA,0CAA0C,CAAC;AAEnF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAE7E;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA,kCAAkC,CAAC;AAEvE;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,CAAA,gDAAgD,CAAC;AAE3F;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAA,oCAAoC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAA,oCAAoC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,CAAA,gDAAgD,CAAC;AAE3F;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAA,kCAAkC,CAAC;AAE3E;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAE7E;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC,OAAO,CAAA,4CAA4C,CAAC;AAEtF;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAAA,gDAAgD,CAAC;AAE5F;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAE7E;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC"}

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

@@ -1,6 +1,7 @@
 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.
  *
@@ -46,7 +47,7 @@ export class ToggleButton extends Button {
         if (this.$fastController.isConnected) {
             const ariaPressed = `${this.mixed ? 'mixed' : !!this.pressed}`;
             this.elementInternals.ariaPressed = ariaPressed;
-            this.setAttribute('aria-pressed', ariaPressed);
+            toggleState(this.elementInternals, 'pressed', !!this.pressed || !!this.mixed);
         }
     }
 }

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,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C;;;;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,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;SAChD;IACH,CAAC;CACF;AA1DC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CACD;AAmBzB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACH"}
+{"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;AA1DC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CACD;AAmBzB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACH"}