@fluentui/web-components 3.0.0-beta.89 → 3.0.0-beta.90

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

@@ -2,31 +2,28 @@ 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(${squareState}) {
+  :host([shape='square']) {
     border-radius: ${borderRadiusNone};
   }
 
-  :host(${roundedState}) {
+  :host([shape='rounded']) {
     border-radius: ${borderRadiusMedium};
   }
 
-  :host(${roundedState}${tinyState}),
-  :host(${roundedState}${extraSmallState}),
-  :host(${roundedState}${smallState}) {
+  :host([shape='rounded']:is([size='tiny'], [size='extra-small'], [size='small'])) {
     border-radius: ${borderRadiusSmall};
   }
 
-  ${badgeSizeStyles}
-  ${badgeFilledStyles}
-  ${badgeGhostStyles}
-  ${badgeOutlineStyles}
   ${badgeTintStyles}
+  ${badgeOutlineStyles}
+  ${badgeGhostStyles}
+  ${badgeFilledStyles}
+  ${badgeSizeStyles}
   ${badgeBaseStyles}
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
     :host,

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,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"}
+{"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;;;;qBAIlB,iBAAiB;;;IAGlC,eAAe;IACf,kBAAkB;IAClB,gBAAgB;IAChB,iBAAiB;IACjB,eAAe;IACf,eAAe;CAClB,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;GAMjC,CAAC,CACH,CAAC"}

package/dist/esm/button/button.js

@@ -2,9 +2,7 @@ import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 import { StartEnd } from '../patterns/index.js';
 import { applyMixins } from '../utils/apply-mixins.js';
-import { swapStates, toggleState } from '../utils/element-internals.js';
 import { BaseButton } from './button.base.js';
-import { ButtonAppearance, ButtonShape, ButtonSize } from './button.options.js';
 /**
  * A Button Custom HTML Element.
  * Based on BaseButton and includes style and layout specific attributes
@@ -23,38 +21,6 @@ export class Button extends BaseButton {
          */
         this.iconOnly = false;
     }
-    /**
-     * Handles changes to appearance attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    appearanceChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, ButtonAppearance);
-    }
-    /**
-     * Handles changes to shape attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    shapeChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, ButtonShape);
-    }
-    /**
-     * Handles changes to size attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    sizeChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, ButtonSize);
-    }
-    /**
-     * 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);
-    }
 }
 __decorate([
     attr

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/button/button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEhF;;;;;GAKG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QA0DE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;IAUnC,CAAC;IAjEC;;;;OAIG;IACI,iBAAiB,CAAC,IAAkC,EAAE,IAAkC;QAC7F,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC;IAClE,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAA6B,EAAE,IAA6B;QAC9E,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC;IAC7D,CAAC;IAYD;;;;OAIG;IACI,WAAW,CAAC,IAA4B,EAAE,IAA4B;QAC3E,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC;IAC5D,CAAC;IAYD;;;;OAIG;IACI,eAAe,CAAC,IAAa,EAAE,IAAa;QACjD,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;IACnD,CAAC;CACF;AAnEQ;IADN,IAAI;0CACgC;AAmB9B;IADN,IAAI;qCACsB;AAmBpB;IADN,IAAI;oCACoB;AAmBlB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACjB;AAoBnC,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/button/button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C;;;;;GAKG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QA+BE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;IACnC,CAAC;CAAA;AA/BQ;IADN,IAAI;0CACgC;AAU9B;IADN,IAAI;qCACsB;AAUpB;IADN,IAAI;oCACoB;AAUlB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACjB;AAWnC,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC"}

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

@@ -1,7 +1,6 @@
 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
  */
@@ -84,12 +83,12 @@ export const baseButtonStyles = css `
     margin-inline-start: var(--icon-spacing);
   }
 
-  :host(${iconOnlyState}) {
+  :host([icon-only]) {
     min-width: 32px;
     max-width: 32px;
   }
 
-  :host(${smallState}) {
+  :host([size='small']) {
     --icon-spacing: ${spacingHorizontalXS};
     min-height: 24px;
     min-width: 64px;
@@ -100,12 +99,12 @@ export const baseButtonStyles = css `
     font-weight: ${fontWeightRegular};
   }
 
-  :host(${smallState}${iconOnlyState}) {
+  :host([size='small'][icon-only]) {
     min-width: 24px;
     max-width: 24px;
   }
 
-  :host(${largeState}) {
+  :host([size='large']) {
     min-height: 40px;
     border-radius: ${borderRadiusLarge};
     padding: 0 ${spacingHorizontalL};
@@ -113,103 +112,103 @@ export const baseButtonStyles = css `
     line-height: ${lineHeightBase400};
   }
 
-  :host(${largeState}${iconOnlyState}) {
+  :host([size='large'][icon-only]) {
     min-width: 40px;
     max-width: 40px;
   }
 
-  :host(${largeState}) ::slotted(svg) {
+  :host([size='large']) ::slotted(svg) {
     font-size: 24px;
     height: 24px;
     width: 24px;
   }
 
-  :host(:is(${circularState}, ${circularState}:focus-visible)) {
+  :host(:is([shape='circular'], [shape='circular']:focus-visible)) {
     border-radius: ${borderRadiusCircular};
   }
 
-  :host(:is(${squareState}, ${squareState}:focus-visible)) {
+  :host(:is([shape='square'], [shape='square']:focus-visible)) {
     border-radius: ${borderRadiusNone};
   }
 
-  :host(${primaryState}) {
+  :host([appearance='primary']) {
     background-color: ${colorBrandBackground};
     color: ${colorNeutralForegroundOnBrand};
     border-color: transparent;
   }
 
-  :host(${primaryState}:hover) {
+  :host([appearance='primary']:hover) {
     background-color: ${colorBrandBackgroundHover};
   }
 
-  :host(${primaryState}:is(:hover, :hover:active)) {
+  :host([appearance='primary']:is(:hover, :hover:active)) {
     border-color: transparent;
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host(${primaryState}:hover:active) {
+  :host([appearance='primary']:hover:active) {
     background-color: ${colorBrandBackgroundPressed};
   }
 
-  :host(${primaryState}:focus-visible) {
+  :host([appearance='primary']:focus-visible) {
     border-color: ${colorNeutralForegroundOnBrand};
     box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
   }
 
-  :host(${outlineState}) {
+  :host([appearance='outline']) {
     background-color: ${colorTransparentBackground};
   }
 
-  :host(${outlineState}:hover) {
+  :host([appearance='outline']:hover) {
     background-color: ${colorTransparentBackgroundHover};
   }
 
-  :host(${outlineState}:hover:active) {
+  :host([appearance='outline']:hover:active) {
     background-color: ${colorTransparentBackgroundPressed};
   }
 
-  :host(${subtleState}) {
+  :host([appearance='subtle']) {
     background-color: ${colorSubtleBackground};
     color: ${colorNeutralForeground2};
     border-color: transparent;
   }
 
-  :host(${subtleState}:hover) {
+  :host([appearance='subtle']:hover) {
     background-color: ${colorSubtleBackgroundHover};
     color: ${colorNeutralForeground2Hover};
     border-color: transparent;
   }
 
-  :host(${subtleState}:hover:active) {
+  :host([appearance='subtle']:hover:active) {
     background-color: ${colorSubtleBackgroundPressed};
     color: ${colorNeutralForeground2Pressed};
     border-color: transparent;
   }
 
-  :host(${subtleState}:hover) ::slotted(svg) {
+  :host([appearance='subtle']:hover) ::slotted(svg) {
     fill: ${colorNeutralForeground2BrandHover};
   }
 
-  :host(${subtleState}:hover:active) ::slotted(svg) {
+  :host([appearance='subtle']:hover:active) ::slotted(svg) {
     fill: ${colorNeutralForeground2BrandPressed};
   }
 
-  :host(${transparentState}) {
+  :host([appearance='transparent']) {
     background-color: ${colorTransparentBackground};
     color: ${colorNeutralForeground2};
   }
 
-  :host(${transparentState}:hover) {
+  :host([appearance='transparent']:hover) {
     background-color: ${colorTransparentBackgroundHover};
     color: ${colorNeutralForeground2BrandHover};
   }
 
-  :host(${transparentState}:hover:active) {
+  :host([appearance='transparent']:hover:active) {
     background-color: ${colorTransparentBackgroundPressed};
     color: ${colorNeutralForeground2BrandPressed};
   }
 
-  :host(:is(${transparentState}, ${transparentState}:is(:hover, :active))) {
+  :host(:is([appearance='transparent'], [appearance='transparent']:is(:hover, :active))) {
     border-color: transparent;
   }
 `;
@@ -230,24 +229,24 @@ export const styles = css `
     cursor: not-allowed;
   }
 
-  :host(${primaryState}:is(:disabled, [disabled-focusable])),
-  :host(${primaryState}:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+  :host([appearance='primary']:is(:disabled, [disabled-focusable])),
+  :host([appearance='primary']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
     border-color: transparent;
   }
 
-  :host(${outlineState}:is(:disabled, [disabled-focusable])),
-  :host(${outlineState}:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+  :host([appearance='outline']:is(:disabled, [disabled-focusable])),
+  :host([appearance='outline']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
     background-color: ${colorTransparentBackground};
   }
 
-  :host(${subtleState}:is(:disabled, [disabled-focusable])),
-  :host(${subtleState}:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+  :host([appearance='subtle']:is(:disabled, [disabled-focusable])),
+  :host([appearance='subtle']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
     background-color: ${colorTransparentBackground};
     border-color: transparent;
   }
 
-  :host(${transparentState}:is(:disabled, [disabled-focusable])),
-  :host(${transparentState}:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+  :host([appearance='transparent']:is(:disabled, [disabled-focusable])),
+  :host([appearance='transparent']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
     border-color: transparent;
     background-color: ${colorTransparentBackground};
   }
@@ -261,7 +260,7 @@ export const styles = css `
       border-color: Highlight !important;
     }
 
-    :host(${primaryState}:not(:is(:hover, :focus-visible))) {
+    :host([appearance='primary']:not(:is(:hover, :focus-visible))) {
       background-color: Highlight;
       color: HighlightText;
       forced-color-adjust: none;

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

package/dist/esm/checkbox/checkbox.js

@@ -1,8 +1,7 @@
 import { __decorate } from "tslib";
 import { attr, observable } from '@microsoft/fast-element';
-import { swapStates, toggleState } from '../utils/element-internals.js';
+import { toggleState } from '../utils/element-internals.js';
 import { BaseCheckbox } from './checkbox.base.js';
-import { CheckboxShape, CheckboxSize } from './checkbox.options.js';
 /**
  * A Checkbox Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria/#checkbox | ARIA checkbox }.
@@ -26,26 +25,6 @@ export class Checkbox extends BaseCheckbox {
         this.setAriaChecked();
         toggleState(this.elementInternals, 'indeterminate', next);
     }
-    /**
-     * Applies shape states when the `shape` property changes.
-     *
-     * @param prev - the previous shape value
-     * @param next - the next shape value
-     * @internal
-     */
-    shapeChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, CheckboxShape);
-    }
-    /**
-     * Applies size states when the `size` property changes.
-     *
-     * @param prev - the previous state
-     * @param next - the next state
-     * @internal
-     */
-    sizeChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, CheckboxSize);
-    }
     constructor() {
         super();
         this.elementInternals.role = 'checkbox';

package/dist/esm/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEpE;;;;;;;;;;GAUG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;IASxC;;;;;;OAMG;IACO,oBAAoB,CAAC,IAAyB,EAAE,IAAyB;QACjF,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;IAC5D,CAAC;IAYD;;;;;;OAMG;IACO,YAAY,CAAC,IAA+B,EAAE,IAA+B;QACrF,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,CAAC,CAAC;IAC/D,CAAC;IAYD;;;;;;OAMG;IACO,WAAW,CAAC,IAA8B,EAAE,IAA8B;QAClF,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC;IAC9D,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,UAAU,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACO,cAAc,CAAC,QAAiB,IAAI,CAAC,OAAO;QACpD,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,OAAO,CAAC;YAC5C,OAAO;QACT,CAAC;QAED,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED;;;;;OAKG;IACI,aAAa,CAAC,QAAiB,CAAC,IAAI,CAAC,OAAO;QACjD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;CACF;AAtFQ;IADN,UAAU;+CACoB;AAsBxB;IADN,IAAI;uCACwB;AAqBtB;IADN,IAAI;sCACsB"}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAc,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;IASxC;;;;;;OAMG;IACO,oBAAoB,CAAC,IAAyB,EAAE,IAAyB;QACjF,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;IAC5D,CAAC;IAsBD;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,UAAU,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACO,cAAc,CAAC,QAAiB,IAAI,CAAC,OAAO;QACpD,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,OAAO,CAAC;YAC5C,OAAO;QACT,CAAC;QAED,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED;;;;;OAKG;IACI,aAAa,CAAC,QAAiB,CAAC,IAAI,CAAC,OAAO;QACjD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;CACF;AAhEQ;IADN,UAAU;+CACoB;AAsBxB;IADN,IAAI;uCACwB;AAUtB;IADN,IAAI;sCACsB"}

package/dist/esm/checkbox/checkbox.styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { checkedState, circularState, indeterminateState, largeState } from '../styles/states/index.js';
+import { checkedState, indeterminateState } from '../styles/states/index.js';
 import { borderRadiusCircular, borderRadiusMedium, borderRadiusSmall, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackgroundDisabled, colorNeutralForegroundInverted, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorTransparentStroke, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
 import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
 import { display } from '../utils/display.js';
@@ -100,17 +100,17 @@ export const styles = css `
     inset: 0;
   }
 
-  :host(${largeState}) {
+  :host([size='large']) {
     --size: 20px;
   }
 
-  :host(${largeState}) ::slotted([slot='checked-indicator']),
-  :host(${largeState}) .checked-indicator {
+  :host([size='large']) ::slotted([slot='checked-indicator']),
+  :host([size='large']) .checked-indicator {
     width: 16px;
   }
 
-  :host(${circularState}),
-  :host(${circularState}) .indeterminate-indicator {
+  :host([shape='circular']),
+  :host([shape='circular']) .indeterminate-indicator {
     border-radius: ${borderRadiusCircular};
   }
 

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.styles.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACxG,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AACvG,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;wBAIF,uBAAuB;qBAC1B,iBAAiB;cACxB,eAAe,UAAU,4BAA4B;;;;;;;;;;;;;;oBAc/C,iCAAiC;;;;oBAIjC,mCAAmC;;;UAG7C,YAAY;wBACE,iCAAiC;oBACrC,6BAA6B;;;UAGvC,YAAY;wBACE,mCAAmC;oBACvC,+BAA+B;;;;;;;;;;;;;cAarC,gBAAgB,UAAU,sBAAsB;qBACzC,kBAAkB;;;;oBAInB,iBAAiB;;;;;aAKxB,8BAA8B;;;;;;;;;;;;;;eAc5B,YAAY;;;;UAIjB,YAAY;UACZ,kBAAkB;oBACR,wBAAwB;;;UAGlC,YAAY;UACZ,kBAAkB;wBACJ,4BAA4B;;;UAG1C,kBAAkB;qBACP,iBAAiB;;;;;;UAM5B,UAAU;;;;UAIV,UAAU;UACV,UAAU;;;;UAIV,aAAa;UACb,aAAa;qBACF,oBAAoB;;;;oBAIrB,YAAY;wBACR,8BAA8B;oBAClC,0BAA0B;;;;;;;oBAO1B,kBAAkB;wBACd,0BAA0B;;;oBAG9B,YAAY;aACnB,0BAA0B;;CAEtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;YAUxB,YAAY;;;;;;;;;;YAUZ,YAAY;YACZ,kBAAkB;;;;YAIlB,YAAY;YACZ,kBAAkB;;;;;;;;sBAQR,kBAAkB;;;;;sBAKlB,YAAY;;;GAG/B,CAAC,CACH,CAAC"}
+{"version":3,"file":"checkbox.styles.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AACvG,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;wBAIF,uBAAuB;qBAC1B,iBAAiB;cACxB,eAAe,UAAU,4BAA4B;;;;;;;;;;;;;;oBAc/C,iCAAiC;;;;oBAIjC,mCAAmC;;;UAG7C,YAAY;wBACE,iCAAiC;oBACrC,6BAA6B;;;UAGvC,YAAY;wBACE,mCAAmC;oBACvC,+BAA+B;;;;;;;;;;;;;cAarC,gBAAgB,UAAU,sBAAsB;qBACzC,kBAAkB;;;;oBAInB,iBAAiB;;;;;aAKxB,8BAA8B;;;;;;;;;;;;;;eAc5B,YAAY;;;;UAIjB,YAAY;UACZ,kBAAkB;oBACR,wBAAwB;;;UAGlC,YAAY;UACZ,kBAAkB;wBACJ,4BAA4B;;;UAG1C,kBAAkB;qBACP,iBAAiB;;;;;;;;;;;;;;;;;qBAiBjB,oBAAoB;;;;oBAIrB,YAAY;wBACR,8BAA8B;oBAClC,0BAA0B;;;;;;;oBAO1B,kBAAkB;wBACd,0BAA0B;;;oBAG9B,YAAY;aACnB,0BAA0B;;CAEtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;YAUxB,YAAY;;;;;;;;;;YAUZ,YAAY;YACZ,kBAAkB;;;;YAIlB,YAAY;YACZ,kBAAkB;;;;;;;;sBAQR,kBAAkB;;;;;sBAKlB,YAAY;;;GAG/B,CAAC,CACH,CAAC"}

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

@@ -1,7 +1,6 @@
 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}
@@ -31,7 +30,7 @@ export const styles = css `
   }
 
   ::slotted(svg),
-  :host(${largeState}) ::slotted(svg) {
+  :host([size='large']) ::slotted(svg) {
     font-size: 40px;
     height: 40px;
     width: 40px;
@@ -45,20 +44,20 @@ export const styles = css `
     color: ${colorNeutralForeground2Pressed};
   }
 
-  :host(:is(${primaryState}, ${primaryState}:hover, ${primaryState}:active)) ::slotted([slot='description']) {
+  :host(:is([appearance='primary'], [appearance='primary']:is(:hover, :active))) ::slotted([slot='description']) {
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host(:is(${subtleState}, ${subtleState}:hover, ${subtleState}:active)) ::slotted([slot='description']),
-  :host(${transparentState}) ::slotted([slot='description']) {
+  :host(:is([appearance='transparent'], [appearance='subtle'], [appearance='subtle']:is(:hover, :active)))
+    ::slotted([slot='description']) {
     color: ${colorNeutralForeground2};
   }
 
-  :host(${transparentState}:hover) ::slotted([slot='description']) {
+  :host([appearance='transparent']:hover) ::slotted([slot='description']) {
     color: ${colorNeutralForeground2BrandHover};
   }
 
-  :host(${transparentState}:active) ::slotted([slot='description']) {
+  :host([appearance='transparent']:active) ::slotted([slot='description']) {
     color: ${colorNeutralForeground2BrandPressed};
   }
 
@@ -67,37 +66,37 @@ export const styles = css `
     color: ${colorNeutralForegroundDisabled};
   }
 
-  :host(${smallState}) {
+  :host([size='small']) {
     padding: 8px;
     padding-bottom: 10px;
   }
 
-  :host(${iconOnlyState}) {
+  :host([icon-only]) {
     min-width: 52px;
     max-width: 52px;
     padding: ${spacingHorizontalSNudge};
   }
 
-  :host(${iconOnlyState}${smallState}) {
+  :host([icon-only][size='small']) {
     min-width: 48px;
     max-width: 48px;
     padding: ${spacingHorizontalXS};
   }
 
-  :host(${iconOnlyState}${largeState}) {
+  :host([icon-only][size='large']) {
     min-width: 56px;
     max-width: 56px;
     padding: ${spacingHorizontalS};
   }
 
-  :host(${largeState}) {
+  :host([size='large']) {
     padding-top: 18px;
     padding-inline: 16px;
     padding-bottom: 20px;
     font-size: ${fontSizeBase400};
     line-height: ${lineHeightBase400};
   }
-  :host(${largeState}) ::slotted([slot='description']) {
+  :host([size='large']) ::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;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"}
+{"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;;;;aAI9B,6BAA6B;;;;;aAK7B,uBAAuB;;;;aAIvB,iCAAiC;;;;aAIjC,mCAAmC;;;;;aAKnC,8BAA8B;;;;;;;;;;;eAW5B,uBAAuB;;;;;;eAMvB,mBAAmB;;;;;;eAMnB,kBAAkB;;;;;;;iBAOhB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;;CAE/B,CAAC"}

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

@@ -2,8 +2,6 @@ import { __decorate } from "tslib";
 import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
 import { applyMixins } from '../utils/apply-mixins.js';
 import { StartEnd } from '../patterns/index.js';
-import { swapStates, toggleState } from '../utils/element-internals.js';
-import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, } from './counter-badge.options.js';
 /**
  * The base class used for constructing a fluent-badge custom element
  * @public
@@ -50,52 +48,12 @@ 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) {
-        swapStates(this.elementInternals, prev, next, CounterBadgeAppearance);
-    }
-    /**
-     * Handles changes to color attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    colorChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, CounterBadgeColor);
-    }
-    /**
-     * Handles changes to shape attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    shapeChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, CounterBadgeShape);
-    }
-    /**
-     * Handles changes to size attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    sizeChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, CounterBadgeSize);
-    }
     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":"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"}
+{"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,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAQhD;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QA0CnE;;;;;;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,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;YAChD,OAAO,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC;QAC5E,CAAC;QAED,OAAO;IACT,CAAC;CACF;AA7FQ;IADN,IAAI;gDACsC;AAUpC;IADN,IAAI;2CAC4B;AAU1B;IADN,IAAI;2CAC4B;AAU1B;IADN,IAAI;0CAC0B;AAUxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;2CACpB;AAalB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;mDACxC;AAa3B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACjB;AAU1B;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;yCACE;AA2B9B,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}

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

@@ -1,18 +1,15 @@
 import { css } from '@microsoft/fast-element';
 import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeSizeStyles } from '../styles/index.js';
 import { borderRadiusMedium, borderRadiusSmall } from '../theme/design-tokens.js';
-import { dotState, extraSmallState, roundedState, smallState, tinyState } from '../styles/states/index.js';
 /** Badge styles
  * @public
  */
 export const styles = css `
-  :host(${roundedState}) {
+  :host([shape='rounded']) {
     border-radius: ${borderRadiusMedium};
   }
 
-  :host(${roundedState}${tinyState}),
-  :host(${roundedState}${extraSmallState}),
-  :host(${roundedState}${smallState}) {
+  :host([shape='rounded']:is([size='tiny'], [size='extra-small'], [size='small'])) {
     border-radius: ${borderRadiusSmall};
   }
 
@@ -21,8 +18,7 @@ export const styles = css `
   ${badgeGhostStyles}
   ${badgeBaseStyles}
 
-  :host(${dotState}),
-  :host(${dotState}[appearance][size]) {
+  :host(:is([dot], [dot][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;AAClF,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE3G;;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"}
+{"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;;;;qBAIlB,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,eAAe;;;;;;;;CAQlB,CAAC"}