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

package/dist/dts/text-input/text-input.d.ts

@@ -16,12 +16,6 @@ export declare class TextInput extends BaseTextInput {
      * HTML Attribute: `appearance`
      */
     appearance?: TextInputAppearance;
-    /**
-     * Handles changes to appearance attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    appearanceChanged(prev: TextInputAppearance | undefined, next: TextInputAppearance | undefined): void;
     /**
      * Sets the size of the control.
      *
@@ -30,12 +24,6 @@ export declare class TextInput extends BaseTextInput {
      * HTML Attribute: `control-size`
      */
     controlSize?: TextInputControlSize;
-    /**
-     * Handles changes to `control-size` attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    controlSizeChanged(prev: TextInputControlSize | undefined, next: TextInputControlSize | undefined): void;
 }
 /**
  * @internal

package/dist/dts/textarea/textarea.d.ts

@@ -10,7 +10,6 @@ export declare class TextArea extends BaseTextArea {
      * HTML Attribute: `appearance`
      */
     appearance: TextAreaAppearance;
-    protected appearanceChanged(prev: TextAreaAppearance | undefined, next: TextAreaAppearance | undefined): void;
     /**
      * Indicates whether the textarea should be a block-level element.
      *
@@ -19,7 +18,6 @@ export declare class TextArea extends BaseTextArea {
      * HTML Attribute: `block`
      */
     block: boolean;
-    protected blockChanged(): void;
     /**
      * Sets the size of the control.
      *
@@ -28,7 +26,6 @@ export declare class TextArea extends BaseTextArea {
      * HTML Attribute: `size`
      */
     size?: TextAreaSize;
-    protected sizeChanged(prev: TextAreaSize | undefined, next: TextAreaSize | undefined): void;
     /**
      * @internal
      */
@@ -41,5 +38,4 @@ export declare class TextArea extends BaseTextArea {
      * @internal
      */
     disconnectedCallback(): void;
-    private maybeDisplayShadow;
 }

package/dist/dts/tree-item/tree-item.d.ts

@@ -1,5 +1,5 @@
 import { TreeItemAppearance, TreeItemSize } from './tree-item.options.js';
-import { BaseTreeItem } from './tree-item.base';
+import { BaseTreeItem } from './tree-item.base.js';
 export declare class TreeItem extends BaseTreeItem {
     /**
      * The size of the tree item element

package/dist/esm/accordion-item/accordion-item.base.js

@@ -1,7 +1,6 @@
 import { __decorate } from "tslib";
 import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
 import { uniqueId } from '@microsoft/fast-web-utilities';
-import { toggleState } from '../utils/element-internals.js';
 /**
  *
  * @slot start - Content positioned before heading in the collapsed state
@@ -58,22 +57,6 @@ export class BaseAccordionItem extends FASTElement {
          */
         this.id = uniqueId('accordion-');
     }
-    /**
-     * Handles expanded changes
-     * @param prev - previous value
-     * @param next - next value
-     */
-    expandedChanged(prev, next) {
-        toggleState(this.elementInternals, 'expanded', next);
-    }
-    /**
-     * Handles disabled changes
-     * @param prev - previous value
-     * @param next - next value
-     */
-    disabledChanged(prev, next) {
-        toggleState(this.elementInternals, 'disabled', next);
-    }
 }
 __decorate([
     attr({

package/dist/esm/accordion-item/accordion-item.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.base.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAAlD;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAEnE;;;;;;;WAOG;QAMI,iBAAY,GAA0B,CAAC,CAAC;QAE/C;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAWjC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAWjC;;;;;;WAMG;QAEI,OAAE,GAAW,QAAQ,CAAC,YAAY,CAAC,CAAC;IAM7C,CAAC;IA1CC;;;;OAIG;IACI,eAAe,CAAC,IAAa,EAAE,IAAa;QACjD,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IACvD,CAAC;IAYD;;;;OAIG;IACI,eAAe,CAAC,IAAa,EAAE,IAAa;QACjD,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IACvD,CAAC;CAgBF;AAtDQ;IALN,IAAI,CAAC;QACJ,SAAS,EAAE,eAAe;QAC1B,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,uBAAuB;KACnC,CAAC;uDAC6C;AAUxC;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDACO;AAmB1B;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDACO;AAmB1B;IADN,IAAI;6CACsC"}
+{"version":3,"file":"accordion-item.base.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAGzD;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAAlD;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAEnE;;;;;;;WAOG;QAMI,iBAAY,GAA0B,CAAC,CAAC;QAE/C;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,OAAE,GAAW,QAAQ,CAAC,YAAY,CAAC,CAAC;IAM7C,CAAC;CAAA;AApCQ;IALN,IAAI,CAAC;QACJ,SAAS,EAAE,eAAe;QAC1B,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,uBAAuB;KACnC,CAAC;uDAC6C;AAUxC;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDACO;AAU1B;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDACO;AAU1B;IADN,IAAI;6CACsC"}

package/dist/esm/accordion-item/accordion-item.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 { BaseAccordionItem } from './accordion-item.base.js';
-import { AccordionItemMarkerPosition, AccordionItemSize } from './accordion-item.options.js';
 /**
  * An Accordion Item Custom HTML Element.
  * Based on BaseAccordionItem and includes style and layout specific attributes
@@ -23,30 +21,6 @@ export class AccordionItem extends BaseAccordionItem {
          */
         this.block = false;
     }
-    /**
-     * Handles changes to size attribute
-     * @param prev - previous value
-     * @param next - next value
-     */
-    sizeChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, AccordionItemSize);
-    }
-    /**
-     * Handles changes to marker-position attribute
-     * @param prev - previous value
-     * @param next - next value
-     */
-    markerPositionChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, AccordionItemMarkerPosition, 'align-');
-    }
-    /**
-     * Handles changes to block attribute
-     * @param prev - previous value
-     * @param next - next value
-     */
-    blockChanged(prev, next) {
-        toggleState(this.elementInternals, 'block', next);
-    }
 }
 __decorate([
     attr

package/dist/esm/accordion-item/accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,2BAA2B,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAW7F;;;;;GAKG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QA0CE;;;;;;WAMG;QAEI,UAAK,GAAY,KAAK,CAAC;IAUhC,CAAC;IAjDC;;;;OAIG;IACI,WAAW,CAAC,IAAmC,EAAE,IAAmC;QACzF,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,iBAAiB,CAAC,CAAC;IACnE,CAAC;IAYD;;;;OAIG;IACI,qBAAqB,CAC1B,IAA6C,EAC7C,IAA6C;QAE7C,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;IACvF,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAAa,EAAE,IAAa;QAC9C,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;IACpD,CAAC;CACF;AAnDQ;IADN,IAAI;2CAC2B;AAmBzB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;qDACa;AAsB7C;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACI;AAoBhC,WAAW,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAY7D;;;;;GAKG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QAqBE;;;;;;WAMG;QAEI,UAAK,GAAY,KAAK,CAAC;IAChC,CAAC;CAAA;AArBQ;IADN,IAAI;2CAC2B;AAUzB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;qDACa;AAU7C;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACI;AAWhC,WAAW,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC"}

package/dist/esm/accordion-item/accordion-item.styles.js

@@ -1,6 +1,5 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../utils/index.js';
-import { alignEndState, blockState, disabledState, expandedState, extraLargeState, largeState, smallState, } from '../styles/states/index.js';
 import { borderRadiusMedium, borderRadiusSmall, colorNeutralForeground1, colorNeutralForegroundDisabled, colorStrokeFocus1, colorStrokeFocus2, colorTransparentBackground, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontWeightRegular, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalS, } from '../theme/design-tokens.js';
 export const styles = css `
   ${display('block')}
@@ -86,29 +85,29 @@ export const styles = css `
 
   /* --- Disabled attr styles --- */
 
-  :host(${disabledState}) .button {
+  :host([disabled]) .button {
     color: ${colorNeutralForegroundDisabled};
   }
 
-  :host(${disabledState}) svg {
+  :host([disabled]) svg {
     filter: invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%);
   }
 
   /* --- Expanded attr styles --- */
 
-  :host(${expandedState}) .content {
+  :host([expanded]) .content {
     display: block;
   }
 
-  :host(${expandedState}) .default-marker-collapsed,
-  :host(${expandedState}) ::slotted([slot='marker-collapsed']),
-  :host(:not(${expandedState})) :is(.default-marker-expanded, .content),
-  :host(:not(${expandedState})) ::slotted([slot='marker-expanded']) {
+  :host([expanded]) .default-marker-collapsed,
+  :host([expanded]) ::slotted([slot='marker-collapsed']),
+  :host(:not([expanded])) :is(.default-marker-expanded, .content),
+  :host(:not([expanded])) ::slotted([slot='marker-expanded']) {
     display: none;
   }
 
-  :host(${expandedState}) ::slotted([slot='marker-expanded']),
-  :host(:not(${expandedState})) ::slotted([slot='marker-collapsed']) {
+  :host([expanded]) ::slotted([slot='marker-expanded']),
+  :host(:not([expanded])) ::slotted([slot='marker-collapsed']) {
     display: flex;
   }
 
@@ -119,34 +118,34 @@ export const styles = css `
     line-height: ${lineHeightBase300};
   }
 
-  :host(${smallState}) .heading {
+  :host([size='small']) .heading {
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
   }
 
-  :host(${largeState}) .heading {
+  :host([size='large']) .heading {
     font-size: ${fontSizeBase400};
     line-height: ${lineHeightBase400};
   }
 
-  :host(${extraLargeState}) .heading {
+  :host([size='extra-large']) .heading {
     font-size: ${fontSizeBase500};
     line-height: ${lineHeightBase500};
   }
 
   /* --- marker-position attr styles --- */
 
-  :host(${alignEndState}) :slotted([slot='start']) {
+  :host([marker-position='end']) ::slotted([slot='start']) {
     grid-column: 1 / span 1;
   }
 
-  :host(${alignEndState}) :is(.default-marker-collapsed, .default-marker-expanded) {
+  :host([marker-position='end']) :is(.default-marker-collapsed, .default-marker-expanded) {
     grid-column: 4 / span 1;
     padding-inline-start: ${spacingHorizontalS};
     padding-inline-end: 0;
   }
 
-  :host(${alignEndState}) .button {
+  :host([marker-position='end']) .button {
     grid-column: 2 / span 3;
   }
 
@@ -156,20 +155,20 @@ export const styles = css `
     max-width: 100%;
   }
 
-  :host(${alignEndState}) .heading {
+  :host([marker-position='end']) .heading {
     grid-template-columns: auto auto 28px;
     padding-inline: ${spacingHorizontalM};
   }
 
-  :host(${alignEndState}:has([slot='start'])) .heading {
+  :host([marker-position='end']:has([slot='start'])) .heading {
     padding-inline: ${spacingHorizontalMNudge} ${spacingHorizontalM};
   }
 
-  :host(${blockState}${alignEndState}) .heading {
+  :host([block][marker-position='end']) .heading {
     grid-template-columns: auto 1fr;
   }
 
-  :host(${alignEndState}) :is(.default-marker-collapsed, .default-marker-expanded) {
+  :host([marker-position='end']) :is(.default-marker-collapsed, .default-marker-expanded) {
     grid-column: 5 / span 1;
   }
 `;

package/dist/esm/accordion-item/accordion-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.styles.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,aAAa,EACb,UAAU,EACV,aAAa,EACb,aAAa,EACb,eAAe,EACf,UAAU,EACV,UAAU,GACX,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;;sBAWE,kBAAkB,IAAI,uBAAuB;qBAC9C,kBAAkB;mBACpB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;kBAMlB,0BAA0B;;;aAG/B,uBAAuB;;;;;;;;;;;;;;;;qBAgBf,iBAAiB;;;;;;;;;;;0BAWZ,kBAAkB;;;;;;gBAM5B,kBAAkB;;;;;;;qBAOb,kBAAkB;;;;;;;;;;qBAUlB,iBAAiB;;wBAEd,iBAAiB;kCACP,iBAAiB;;;;;UAKzC,aAAa;aACV,8BAA8B;;;UAGjC,aAAa;;;;;;UAMb,aAAa;;;;UAIb,aAAa;UACb,aAAa;eACR,aAAa;eACb,aAAa;;;;UAIlB,aAAa;eACR,aAAa;;;;;;;iBAOX,eAAe;mBACb,iBAAiB;;;UAG1B,UAAU;iBACH,eAAe;mBACb,iBAAiB;;;UAG1B,UAAU;iBACH,eAAe;mBACb,iBAAiB;;;UAG1B,eAAe;iBACR,eAAe;mBACb,iBAAiB;;;;;UAK1B,aAAa;;;;UAIb,aAAa;;4BAEK,kBAAkB;;;;UAIpC,aAAa;;;;;;;;;;UAUb,aAAa;;sBAED,kBAAkB;;;UAG9B,aAAa;sBACD,uBAAuB,IAAI,kBAAkB;;;UAGzD,UAAU,GAAG,aAAa;;;;UAI1B,aAAa;;;CAGtB,CAAC"}
+{"version":3,"file":"accordion-item.styles.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;;sBAWE,kBAAkB,IAAI,uBAAuB;qBAC9C,kBAAkB;mBACpB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;kBAMlB,0BAA0B;;;aAG/B,uBAAuB;;;;;;;;;;;;;;;;qBAgBf,iBAAiB;;;;;;;;;;;0BAWZ,kBAAkB;;;;;;gBAM5B,kBAAkB;;;;;;;qBAOb,kBAAkB;;;;;;;;;;qBAUlB,iBAAiB;;wBAEd,iBAAiB;kCACP,iBAAiB;;;;;;aAMtC,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4B1B,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;;;;;;;;4BAWR,kBAAkB;;;;;;;;;;;;;;;;sBAgBxB,kBAAkB;;;;sBAIlB,uBAAuB,IAAI,kBAAkB;;;;;;;;;;CAUlE,CAAC"}

package/dist/esm/avatar/avatar.base.js

@@ -22,7 +22,4 @@ __decorate([
 __decorate([
     attr
 ], BaseAvatar.prototype, "initials", void 0);
-__decorate([
-    attr
-], BaseAvatar.prototype, "active", void 0);
 //# sourceMappingURL=avatar.base.js.map

package/dist/esm/avatar/avatar.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.base.js","sourceRoot":"","sources":["../../../src/avatar/avatar.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAyCzC;QACE,KAAK,EAAE,CAAC;QAzCV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAsCjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,CAAC;IACrC,CAAC;CACF;AA9BQ;IADN,IAAI;wCAC4B;AAU1B;IADN,IAAI;4CACgC;AAa9B;IADN,IAAI;0CACoC"}
+{"version":3,"file":"avatar.base.js","sourceRoot":"","sources":["../../../src/avatar/avatar.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IA4BzC;QACE,KAAK,EAAE,CAAC;QA5BV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAyBjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,CAAC;IACrC,CAAC;CACF;AAjBQ;IADN,IAAI;wCAC4B;AAU1B;IADN,IAAI;4CACgC"}

package/dist/esm/avatar/avatar.js

@@ -1,7 +1,6 @@
 import { __decorate } from "tslib";
 import { attr, nullableNumberConverter, Observable } from '@microsoft/fast-element';
 import { getInitials } from '../utils/get-initials.js';
-import { swapStates } from '../utils/element-internals.js';
 import { BaseAvatar } from './avatar.base.js';
 import { AvatarColor, AvatarNamedColor, } from './avatar.options.js';
 /**
@@ -55,7 +54,7 @@ export class Avatar extends BaseAvatar {
                 : colorful
                     ? Avatar.colors[getHashCode(this.name ?? '') % Avatar.colors.length]
                     : this.color ?? AvatarColor.neutral;
-        swapStates(this.elementInternals, prev, this.currentColor);
+        this.setAttribute('data-color', this.currentColor);
     }
     /**
      * An array of the available Avatar named colors
@@ -71,6 +70,9 @@ export class Avatar extends BaseAvatar {
         Observable.getNotifier(this).unsubscribe(this);
     }
 }
+__decorate([
+    attr
+], Avatar.prototype, "active", void 0);
 __decorate([
     attr
 ], Avatar.prototype, "shape", void 0);

package/dist/esm/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAEL,WAAW,EACX,gBAAgB,GAGjB,MAAM,qBAAqB,CAAC;AAE7B;;;;;GAKG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAgEpC;;;;;OAKG;IACI,YAAY,CAAC,MAAW,EAAE,YAAoB;QACnD,QAAQ,YAAY,EAAE,CAAC;YACrB,KAAK,OAAO,CAAC;YACb,KAAK,SAAS;gBACZ,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,MAAM;YACR;gBACE,MAAM;QACV,CAAC;IACH,CAAC;IAED;;;OAGG;IACI,gBAAgB;QACrB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QAED,wDAAwD;QACxD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;QAE7B,OAAO,CACL,IAAI,CAAC,QAAQ;YACb,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAA8B,CAAC,CAAC,SAAS,KAAK,KAAK,EAAE;gBAClG,gBAAgB,EAAE,IAAI,IAAI,EAAE;aAC7B,CAAC,CACH,CAAC;IACJ,CAAC;IAED;;;OAGG;IACI,aAAa;QAClB,MAAM,QAAQ,GAAY,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,QAAQ,CAAC;QAC9D,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;QAE/B,IAAI,CAAC,YAAY;YACf,QAAQ,IAAI,IAAI,CAAC,OAAO;gBACtB,CAAC,CAAC,IAAI,CAAC,OAAO;gBACd,CAAC,CAAC,QAAQ;oBACV,CAAC,CAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAiB;oBACrF,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,WAAW,CAAC,OAAO,CAAC;QAExC,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7D,CAAC;IAED;;OAEG;aACW,WAAM,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAEhD,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEM,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACjD,CAAC;;AA/HM;IADN,IAAI;qCACkC;AAUhC;IADN,IAAI;0CAC4C;AAiB1C;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;oCACR;AAc9B;IADN,IAAI;qCACkC;AAOhC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;uCACc;AAkFhD,2BAA2B;AAC3B,MAAM,WAAW,GAAG,CAAC,GAAW,EAAU,EAAE;IAC1C,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,KAAK,IAAI,GAAG,GAAW,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC;QACvD,MAAM,EAAE,GAAG,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QAC/B,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC;QACtB,QAAQ,IAAI,CAAC,EAAE,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,iCAAiC;IACpF,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC"}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":"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"}

package/dist/esm/avatar/avatar.styles.js

@@ -1,6 +1,5 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../utils/index.js';
-import { anchorState, beigeState, blueState, brandState, brassState, brownState, cornflowerState, cranberryState, darkGreenState, darkRedState, forestState, goldState, grapeState, lavenderState, lightTealState, lilacState, magentaState, marigoldState, minkState, navyState, peachState, pinkState, platinumState, plumState, pumpkinState, purpleState, redState, royalBlueState, seafoamState, steelState, tealState, } from '../styles/states/index.js';
 import { borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusSmall, borderRadiusXLarge, colorBrandBackgroundStatic, colorNeutralBackground1, colorNeutralBackground6, colorNeutralForeground3, colorNeutralForegroundStaticInverted, colorPaletteAnchorBackground2, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeForeground2, colorPaletteBlueBackground2, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenForeground2, colorPaletteDarkRedBackground2, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeForeground2, colorPaletteLavenderBackground2, colorPaletteLavenderForeground2, colorPaletteLightTealBackground2, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground2, colorPaletteMarigoldForeground2, colorPaletteMinkBackground2, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleForeground2, colorPaletteRedBackground2, colorPaletteRedForeground2, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealForeground2, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, durationFaster, durationSlower, durationUltraSlow, fontFamilyBase, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontWeightRegular, fontWeightSemibold, shadow16, shadow28, shadow4, shadow8, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin, } from '../theme/design-tokens.js';
 const animations = {
     fastOutSlowInMax: curveDecelerateMax,
@@ -221,157 +220,157 @@ export const styles = css `
     border-radius: ${borderRadiusXLarge};
   }
 
-  :host(${brandState}) {
+  :host([data-color='brand']) {
     color: ${colorNeutralForegroundStaticInverted};
     background-color: ${colorBrandBackgroundStatic};
   }
 
-  :host(${darkRedState}) {
+  :host([data-color='dark-red']) {
     color: ${colorPaletteDarkRedForeground2};
     background-color: ${colorPaletteDarkRedBackground2};
   }
 
-  :host(${cranberryState}) {
+  :host([data-color='cranberry']) {
     color: ${colorPaletteCranberryForeground2};
     background-color: ${colorPaletteCranberryBackground2};
   }
 
-  :host(${redState}) {
+  :host([data-color='red']) {
     color: ${colorPaletteRedForeground2};
     background-color: ${colorPaletteRedBackground2};
   }
 
-  :host(${pumpkinState}) {
+  :host([data-color='pumpkin']) {
     color: ${colorPalettePumpkinForeground2};
     background-color: ${colorPalettePumpkinBackground2};
   }
 
-  :host(${peachState}) {
+  :host([data-color='peach']) {
     color: ${colorPalettePeachForeground2};
     background-color: ${colorPalettePeachBackground2};
   }
 
-  :host(${marigoldState}) {
+  :host([data-color='marigold']) {
     color: ${colorPaletteMarigoldForeground2};
     background-color: ${colorPaletteMarigoldBackground2};
   }
 
-  :host(${goldState}) {
+  :host([data-color='gold']) {
     color: ${colorPaletteGoldForeground2};
     background-color: ${colorPaletteGoldBackground2};
   }
 
-  :host(${brassState}) {
+  :host([data-color='brass']) {
     color: ${colorPaletteBrassForeground2};
     background-color: ${colorPaletteBrassBackground2};
   }
 
-  :host(${brownState}) {
+  :host([data-color='brown']) {
     color: ${colorPaletteBrownForeground2};
     background-color: ${colorPaletteBrownBackground2};
   }
 
-  :host(${forestState}) {
+  :host([data-color='forest']) {
     color: ${colorPaletteForestForeground2};
     background-color: ${colorPaletteForestBackground2};
   }
 
-  :host(${seafoamState}) {
+  :host([data-color='seafoam']) {
     color: ${colorPaletteSeafoamForeground2};
     background-color: ${colorPaletteSeafoamBackground2};
   }
 
-  :host(${darkGreenState}) {
+  :host([data-color='dark-green']) {
     color: ${colorPaletteDarkGreenForeground2};
     background-color: ${colorPaletteDarkGreenBackground2};
   }
 
-  :host(${lightTealState}) {
+  :host([data-color='light-teal']) {
     color: ${colorPaletteLightTealForeground2};
     background-color: ${colorPaletteLightTealBackground2};
   }
 
-  :host(${tealState}) {
+  :host([data-color='teal']) {
     color: ${colorPaletteTealForeground2};
     background-color: ${colorPaletteTealBackground2};
   }
 
-  :host(${steelState}) {
+  :host([data-color='steel']) {
     color: ${colorPaletteSteelForeground2};
     background-color: ${colorPaletteSteelBackground2};
   }
 
-  :host(${blueState}) {
+  :host([data-color='blue']) {
     color: ${colorPaletteBlueForeground2};
     background-color: ${colorPaletteBlueBackground2};
   }
 
-  :host(${royalBlueState}) {
+  :host([data-color='royal-blue']) {
     color: ${colorPaletteRoyalBlueForeground2};
     background-color: ${colorPaletteRoyalBlueBackground2};
   }
 
-  :host(${cornflowerState}) {
+  :host([data-color='cornflower']) {
     color: ${colorPaletteCornflowerForeground2};
     background-color: ${colorPaletteCornflowerBackground2};
   }
 
-  :host(${navyState}) {
+  :host([data-color='navy']) {
     color: ${colorPaletteNavyForeground2};
     background-color: ${colorPaletteNavyBackground2};
   }
 
-  :host(${lavenderState}) {
+  :host([data-color='lavender']) {
     color: ${colorPaletteLavenderForeground2};
     background-color: ${colorPaletteLavenderBackground2};
   }
 
-  :host(${purpleState}) {
+  :host([data-color='purple']) {
     color: ${colorPalettePurpleForeground2};
     background-color: ${colorPalettePurpleBackground2};
   }
 
-  :host(${grapeState}) {
+  :host([data-color='grape']) {
     color: ${colorPaletteGrapeForeground2};
     background-color: ${colorPaletteGrapeBackground2};
   }
 
-  :host(${lilacState}) {
+  :host([data-color='lilac']) {
     color: ${colorPaletteLilacForeground2};
     background-color: ${colorPaletteLilacBackground2};
   }
 
-  :host(${pinkState}) {
+  :host([data-color='pink']) {
     color: ${colorPalettePinkForeground2};
     background-color: ${colorPalettePinkBackground2};
   }
 
-  :host(${magentaState}) {
+  :host([data-color='magenta']) {
     color: ${colorPaletteMagentaForeground2};
     background-color: ${colorPaletteMagentaBackground2};
   }
 
-  :host(${plumState}) {
+  :host([data-color='plum']) {
     color: ${colorPalettePlumForeground2};
     background-color: ${colorPalettePlumBackground2};
   }
 
-  :host(${beigeState}) {
+  :host([data-color='beige']) {
     color: ${colorPaletteBeigeForeground2};
     background-color: ${colorPaletteBeigeBackground2};
   }
 
-  :host(${minkState}) {
+  :host([data-color='mink']) {
     color: ${colorPaletteMinkForeground2};
     background-color: ${colorPaletteMinkBackground2};
   }
 
-  :host(${platinumState}) {
+  :host([data-color='platinum']) {
     color: ${colorPalettePlatinumForeground2};
     background-color: ${colorPalettePlatinumBackground2};
   }
 
-  :host(${anchorState}) {
+  :host([data-color='anchor']) {
     color: ${colorPaletteAnchorForeground2};
     background-color: ${colorPaletteAnchorBackground2};
   }

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

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

package/dist/esm/badge/badge.js

@@ -2,8 +2,7 @@ import { __decorate } from "tslib";
 import { attr, FASTElement } from '@microsoft/fast-element';
 import { applyMixins } from '../utils/apply-mixins.js';
 import { StartEnd } from '../patterns/index.js';
-import { swapStates } from '../utils/element-internals.js';
-import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
+import { BadgeAppearance, BadgeColor } from './badge.options.js';
 /**
  * The base class used for constructing a fluent-badge custom element
  * @public
@@ -11,12 +10,6 @@ import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.opti
 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.
          *
@@ -34,38 +27,6 @@ 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) {
-        swapStates(this.elementInternals, prev, next, BadgeAppearance);
-    }
-    /**
-     * 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, BadgeColor);
-    }
-    /**
-     * 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, BadgeShape);
-    }
-    /**
-     * 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, BadgeSize);
-    }
 }
 __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,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,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;QAW5D;;;;;;WAMG;QAEI,UAAK,GAAe,UAAU,CAAC,KAAK,CAAC;IAgD9C,CAAC;IAjEC;;;;OAIG;IACI,iBAAiB,CAAC,IAAiC,EAAE,IAAiC;QAC3F,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,eAAe,CAAC,CAAC;IACjE,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAA4B,EAAE,IAA4B;QAC5E,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC;IAC5D,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAA4B,EAAE,IAA4B;QAC5E,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC;IAC5D,CAAC;IAYD;;;;OAIG;IACI,WAAW,CAAC,IAA2B,EAAE,IAA2B;QACzE,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;IAC3D,CAAC;CACF;AAnEQ;IADN,IAAI;yCACuD;AAmBrD;IADN,IAAI;oCACuC;AAmBrC;IADN,IAAI;oCACqB;AAmBnB;IADN,IAAI;mCACmB;AAoB1B,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,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;IAqB9C,CAAC;CAAA;AA/BQ;IADN,IAAI;yCACuD;AAUrD;IADN,IAAI;oCACuC;AAUrC;IADN,IAAI;oCACqB;AAUnB;IADN,IAAI;mCACmB;AAW1B,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC"}