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

package/dist/esm/divider/divider.js

@@ -1,7 +1,5 @@
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
-import { swapStates, toggleState } from '../utils/element-internals.js';
-import { DividerAlignContent, DividerAppearance } from './divider.options.js';
 import { BaseDivider } from './divider.base.js';
 /**
  * A Divider Custom HTML Element.
@@ -10,30 +8,6 @@ import { BaseDivider } from './divider.base.js';
  * @public
  */
 export class Divider extends BaseDivider {
-    /**
-     * Handles changes to align-content attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    alignContentChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, DividerAlignContent, 'align-');
-    }
-    /**
-     * 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, DividerAppearance);
-    }
-    /**
-     * Handles changes to inset custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    insetChanged(prev, next) {
-        toggleState(this.elementInternals, 'inset', next);
-    }
 }
 __decorate([
     attr({ attribute: 'align-content' })

package/dist/esm/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/divider/divider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IAStC;;;;OAIG;IACI,mBAAmB,CAAC,IAAqC,EAAE,IAAqC;QACrG,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,mBAAmB,EAAE,QAAQ,CAAC,CAAC;IAC/E,CAAC;IAUD;;;;OAIG;IACI,iBAAiB,CAAC,IAAmC,EAAE,IAAmC;QAC/F,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,iBAAiB,CAAC,CAAC;IACnE,CAAC;IAUD;;;;OAIG;IACI,YAAY,CAAC,IAAa,EAAE,IAAa;QAC9C,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;IACpD,CAAC;CACF;AA5CQ;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;6CACK;AAiBnC;IADN,IAAI;2CACiC;AAiB/B;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACH"}
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/divider/divider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;CAwBvC;AAjBQ;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;6CACK;AAQnC;IADN,IAAI;2CACiC;AAQ/B;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACH"}

package/dist/esm/divider/divider.styles.js

@@ -1,7 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import { colorBrandForeground1, colorBrandStroke1, colorNeutralForeground1, colorNeutralForeground2, colorNeutralForeground3, colorNeutralStroke1, colorNeutralStroke2, colorNeutralStroke3, fontFamilyBase, fontSizeBase200, fontWeightRegular, strokeWidthThin, } from '../theme/design-tokens.js';
-import { alignEndState, alignStartState, brandState, insetState, strongState, subtleState, verticalState, } from '../styles/states/index.js';
 /** Divider styles
  * @public
  */
@@ -23,7 +22,7 @@ export const styles = css `
     height: ${strokeWidthThin};
   }
 
-  :host(${insetState}) {
+  :host([inset]) {
     padding: 0 12px;
   }
 
@@ -36,89 +35,87 @@ export const styles = css `
     padding: 0 12px;
   }
 
-  :host(${alignStartState})::before,
-  :host(${alignEndState})::after {
+  :host([align-content='start'])::before,
+  :host([align-content='end'])::after {
     flex-basis: 12px;
     flex-grow: 0;
     flex-shrink: 0;
   }
 
-  :host(${verticalState}) {
+  :host([orientation='vertical']) {
+    align-items: center;
+    flex-direction: column;
     height: 100%;
     min-height: 84px;
   }
-  :host(${verticalState}):empty {
-    min-height: 20px;
-  }
 
-  :host(${verticalState}) {
-    flex-direction: column;
-    align-items: center;
+  :host([orientation='vertical']):empty {
+    min-height: 20px;
   }
 
-  :host(${verticalState}${insetState})::before {
+  :host([orientation='vertical'][inset])::before {
     margin-top: 12px;
   }
-  :host(${verticalState}${insetState})::after {
+  :host([orientation='vertical'][inset])::after {
     margin-bottom: 12px;
   }
 
-  :host(${verticalState}):empty::before,
-  :host(${verticalState}):empty::after {
+  :host([orientation='vertical']):empty::before,
+  :host([orientation='vertical']):empty::after {
     height: 10px;
     min-height: 10px;
     flex-grow: 0;
   }
 
-  :host(${verticalState})::before,
-  :host(${verticalState})::after {
+  :host([orientation='vertical'])::before,
+  :host([orientation='vertical'])::after {
     width: ${strokeWidthThin};
     min-height: 20px;
     height: 100%;
   }
 
-  :host(${verticalState}) ::slotted(*) {
+  :host([orientation='vertical']) ::slotted(*) {
     display: flex;
     flex-direction: column;
     padding: 12px 0;
     line-height: 20px;
   }
 
-  :host(${verticalState}${alignStartState})::before {
+  :host([orientation='vertical'][align-content='start'])::before {
     min-height: 8px;
   }
-  :host(${verticalState}${alignEndState})::after {
+  :host([orientation='vertical'][align-content='end'])::after {
     min-height: 8px;
   }
 
-  :host(${strongState})::before,
-  :host(${strongState})::after {
+  :host([appearance='strong'])::before,
+  :host([appearance='strong'])::after {
     background: ${colorNeutralStroke1};
   }
-  :host(${strongState}) ::slotted(*) {
+  :host([appearance='strong']) ::slotted(*) {
     color: ${colorNeutralForeground1};
   }
-  :host(${brandState})::before,
-  :host(${brandState})::after {
+  :host([appearance='brand'])::before,
+  :host([appearance='brand'])::after {
     background: ${colorBrandStroke1};
   }
-  :host(${brandState}) ::slotted(*) {
+  :host([appearance='brand']) ::slotted(*) {
     color: ${colorBrandForeground1};
   }
-  :host(${subtleState})::before,
-  :host(${subtleState})::after {
+  :host([appearance='subtle'])::before,
+  :host([appearance='subtle'])::after {
     background: ${colorNeutralStroke3};
   }
-  :host(${subtleState}) ::slotted(*) {
+  :host([appearance='subtle']) ::slotted(*) {
     color: ${colorNeutralForeground3};
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :host(${strongState})::before,
-    :host(${strongState})::after,
-    :host(${brandState})::before,
-    :host(${brandState})::after,
-    :host(${subtleState})::before,
-    :host(${subtleState})::after,
+    :host([appearance='strong'])::before,
+    :host([appearance='strong'])::after,
+    :host([appearance='brand'])::before,
+    :host([appearance='brand'])::after,
+    :host([appearance='subtle'])::before,
+    :host([appearance='subtle'])::after,
     :host::after,
     :host::before {
       background: WindowText;

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

@@ -1 +1 @@
-{"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../src/divider/divider.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,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,aAAa,EACb,eAAe,EACf,UAAU,EACV,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa,GACd,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;kBASD,mBAAmB;;;;;cAKvB,eAAe;;;UAGnB,UAAU;;;;;aAKP,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;UAK1B,eAAe;UACf,aAAa;;;;;;UAMb,aAAa;;;;UAIb,aAAa;;;;UAIb,aAAa;;;;;UAKb,aAAa,GAAG,UAAU;;;UAG1B,aAAa,GAAG,UAAU;;;;UAI1B,aAAa;UACb,aAAa;;;;;;UAMb,aAAa;UACb,aAAa;aACV,eAAe;;;;;UAKlB,aAAa;;;;;;;UAOb,aAAa,GAAG,eAAe;;;UAG/B,aAAa,GAAG,aAAa;;;;UAI7B,WAAW;UACX,WAAW;kBACH,mBAAmB;;UAE3B,WAAW;aACR,uBAAuB;;UAE1B,UAAU;UACV,UAAU;kBACF,iBAAiB;;UAEzB,UAAU;aACP,qBAAqB;;UAExB,WAAW;UACX,WAAW;kBACH,mBAAmB;;UAE3B,WAAW;aACR,uBAAuB;;CAEnC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;YACxB,WAAW;YACX,WAAW;YACX,UAAU;YACV,UAAU;YACV,WAAW;YACX,WAAW;;;;;;GAMpB,CAAC,CACH,CAAC"}
+{"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../src/divider/divider.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,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;kBASD,mBAAmB;;;;;cAKvB,eAAe;;;;;;;;aAQhB,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAuCvB,eAAe;;;;;;;;;;;;;;;;;;;;;kBAqBV,mBAAmB;;;aAGxB,uBAAuB;;;;kBAIlB,iBAAiB;;;aAGtB,qBAAqB;;;;kBAIhB,mBAAmB;;;aAGxB,uBAAuB;;CAEnC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;GAYjC,CAAC,CACH,CAAC"}

package/dist/esm/dropdown/dropdown.js

@@ -1,8 +1,7 @@
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
-import { swapStates } from '../utils/element-internals.js';
 import { BaseDropdown } from './dropdown.base.js';
-import { DropdownAppearance, DropdownSize } from './dropdown.options.js';
+import { DropdownAppearance } from './dropdown.options.js';
 /**
  * The Fluent Dropdown Element. Implements {@link @microsoft/fast-foundation#BaseDropdown}.
  *
@@ -24,26 +23,6 @@ export class Dropdown extends BaseDropdown {
          */
         this.appearance = DropdownAppearance.outline;
     }
-    /**
-     * Swaps appearance states when the appearance property changes.
-     *
-     * @param prev - the previous appearance state
-     * @param next - the current appearance state
-     * @internal
-     */
-    appearanceChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, DropdownAppearance);
-    }
-    /**
-     * Swaps size states when the size property changes.
-     *
-     * @param prev - the previous size state
-     * @param next - the current size state
-     * @internal
-     */
-    sizeChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, DropdownSize);
-    }
 }
 __decorate([
     attr

package/dist/esm/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/dropdown.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEzE;;;;;;;;GAQG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;QACE;;;;;;WAMG;QAEI,eAAU,GAAuB,kBAAkB,CAAC,OAAO,CAAC;IAgCrE,CAAC;IA9BC;;;;;;OAMG;IACI,iBAAiB,CAAC,IAAoC,EAAE,IAAoC;QACjG,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,kBAAkB,CAAC,CAAC;IACpE,CAAC;IAWD;;;;;;OAMG;IACI,WAAW,CAAC,IAA8B,EAAE,IAA8B;QAC/E,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC;IAC9D,CAAC;CACF;AAhCQ;IADN,IAAI;4CAC8D;AAoB5D;IADN,IAAI;sCACsB"}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/dropdown.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,uBAAuB,CAAC;AAEzE;;;;;;;;GAQG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;QACE;;;;;;WAMG;QAEI,eAAU,GAAuB,kBAAkB,CAAC,OAAO,CAAC;IAUrE,CAAC;CAAA;AAVQ;IADN,IAAI;4CAC8D;AAS5D;IADN,IAAI;sCACsB"}

package/dist/esm/dropdown/dropdown.styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { typographyBody1Styles, typographyBody2Styles, typographyCaption1Styles, } from '../styles/partials/typography.partials.js';
-import { filledDarkerState, filledLighterState, flipBlockState, largeState, openState, outlineState, placeholderShownState, smallState, transparentState, } from '../styles/states/index.js';
+import { flipBlockState, openState, placeholderShownState } from '../styles/states/index.js';
 import { borderRadiusMedium, borderRadiusNone, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandStroke, colorNeutralBackground1, colorNeutralBackground3, colorNeutralBackgroundDisabled, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorTransparentBackground, colorTransparentStroke, colorTransparentStrokeInteractive, curveAccelerateMid, curveDecelerateMid, durationNormal, durationUltraFast, lineHeightBase200, lineHeightBase300, lineHeightBase400, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXXS, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXS, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
 import { display } from '../utils/display.js';
 /**
@@ -43,13 +43,13 @@ export const styles = css `
     ${typographyBody1Styles}
   }
 
-  :host(${smallState}) .control {
+  :host([size='small']) .control {
     column-gap: ${spacingHorizontalXXS};
     padding: ${spacingVerticalXS} ${spacingHorizontalSNudge};
     ${typographyCaption1Styles}
   }
 
-  :host(${largeState}) .control {
+  :host([size='large']) .control {
     column-gap: ${spacingHorizontalS};
     padding: ${spacingVerticalS} ${spacingHorizontalM};
     ${typographyBody2Styles}
@@ -79,11 +79,11 @@ export const styles = css `
     width: 20px;
   }
 
-  :host(${smallState}) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
+  :host([size='small']) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
     width: 16px;
   }
 
-  :host(${largeState}) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
+  :host([size='large']) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
     width: 24px;
   }
 
@@ -112,49 +112,49 @@ export const styles = css `
     transition-timing-function: ${curveAccelerateMid};
   }
 
-  :host(:where(${outlineState}, ${transparentState})) .control::before {
+  :host(:where([appearance='outline'], [appearance='transparent'])) .control::before {
     background-color: ${colorNeutralStrokeAccessible};
   }
 
-  :host(${transparentState}) .control {
+  :host([appearance='transparent']) .control {
     --control-border-color: ${colorTransparentStrokeInteractive};
     background-color: ${colorTransparentBackground};
     border-radius: ${borderRadiusNone};
   }
 
-  :host(${outlineState}) .control {
+  :host([appearance='outline']) .control {
     --control-border-color: ${colorNeutralStroke1};
   }
 
-  :host(${outlineState}) .control:hover {
+  :host([appearance='outline']) .control:hover {
     --control-border-color: ${colorNeutralStroke1Hover};
   }
 
-  :host(:where(${outlineState}, ${transparentState})) .control:hover::before {
+  :host(:where([appearance='outline'], [appearance='transparent'])) .control:hover::before {
     background-color: ${colorNeutralStrokeAccessibleHover};
   }
 
-  :host(${outlineState}) .control:hover::after {
+  :host([appearance='outline']) .control:hover::after {
     background-color: ${colorCompoundBrandBackgroundHover};
   }
 
-  :host(${outlineState}) .control:active {
+  :host([appearance='outline']) .control:active {
     --control-border-color: ${colorNeutralStroke1Pressed};
   }
 
-  :host(:where(${outlineState}, ${transparentState})) .control:active::before {
+  :host(:where([appearance='outline'], [appearance='transparent'])) .control:active::before {
     background-color: ${colorNeutralStrokeAccessiblePressed};
   }
 
-  :host(:where(${outlineState}, ${transparentState})) .control:active::after {
+  :host(:where([appearance='outline'], [appearance='transparent'])) .control:active::after {
     background-color: ${colorCompoundBrandBackgroundPressed};
   }
 
-  :host(${filledDarkerState}) .control {
+  :host([appearance='filled-darker']) .control {
     background-color: ${colorNeutralBackground3};
   }
 
-  :host(:where(${filledLighterState}, ${filledDarkerState})) .control {
+  :host(:where([appearance='filled-lighter'], [appearance='filled-darker'])) .control {
     --control-border-color: ${colorTransparentStroke};
   }
 
@@ -196,11 +196,11 @@ export const styles = css `
       max-height: 50vh;
     }
 
-    :host(${smallState}) ::slotted([popover]) {
+    :host([size='small']) ::slotted([popover]) {
       margin-block-start: calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin});
     }
 
-    :host(${largeState}) ::slotted([popover]) {
+    :host([size='large']) ::slotted([popover]) {
       margin-block-start: calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin});
     }
 

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.styles.js","sourceRoot":"","sources":["../../../src/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,SAAS,EACT,YAAY,EACZ,qBAAqB,EACrB,UAAU,EACV,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;aAKb,uBAAuB;;;;UAI1B,qBAAqB;aAClB,uBAAuB;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;;8BAET,eAAe;;;kBAG3B,oBAAoB;;;;;eAKvB,qBAAqB,IAAI,uBAAuB;;;;;MAKzD,qBAAqB;;;UAGjB,UAAU;kBACF,oBAAoB;eACvB,iBAAiB,IAAI,uBAAuB;MACrD,wBAAwB;;;UAGpB,UAAU;kBACF,kBAAkB;eACrB,gBAAgB,IAAI,kBAAkB;MAC/C,qBAAqB;;;;;;;;;;;;;;;;;;;;;aAqBd,uBAAuB;;;;;;UAM1B,UAAU;;;;UAIV,UAAU;;;;;;;;;;;;;cAaN,eAAe;;;;wBAIL,wBAAwB;cAClC,gBAAgB;;wBAEN,iBAAiB,IAAI,kBAAkB;;;iBAG9C,SAAS;;2BAEC,cAAc;kCACP,kBAAkB;;;iBAGnC,YAAY,KAAK,gBAAgB;wBAC1B,4BAA4B;;;UAG1C,gBAAgB;8BACI,iCAAiC;wBACvC,0BAA0B;qBAC7B,gBAAgB;;;UAG3B,YAAY;8BACQ,mBAAmB;;;UAGvC,YAAY;8BACQ,wBAAwB;;;iBAGrC,YAAY,KAAK,gBAAgB;wBAC1B,iCAAiC;;;UAG/C,YAAY;wBACE,iCAAiC;;;UAG/C,YAAY;8BACQ,0BAA0B;;;iBAGvC,YAAY,KAAK,gBAAgB;wBAC1B,mCAAmC;;;iBAG1C,YAAY,KAAK,gBAAgB;wBAC1B,mCAAmC;;;UAGjD,iBAAiB;wBACH,uBAAuB;;;iBAG9B,kBAAkB,KAAK,iBAAiB;8BAC3B,sBAAsB;;;;;;;;;;;;;;;8BAetB,0BAA0B;wBAChC,8BAA8B;aACzC,8BAA8B;;;;;;;;;;;;;;;;;;;;iCAoBV,iBAAiB,OAAO,qBAAqB,WAAW,eAAe;;;;YAI5F,UAAU;iCACW,iBAAiB,OAAO,iBAAiB,WAAW,eAAe;;;YAGxF,UAAU;iCACW,iBAAiB,OAAO,gBAAgB,WAAW,eAAe;;;YAGvF,cAAc;;;;;CAKzB,CAAC"}
+{"version":3,"file":"dropdown.styles.js","sourceRoot":"","sources":["../../../src/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7F,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;aAKb,uBAAuB;;;;UAI1B,qBAAqB;aAClB,uBAAuB;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;;8BAET,eAAe;;;kBAG3B,oBAAoB;;;;;eAKvB,qBAAqB,IAAI,uBAAuB;;;;;MAKzD,qBAAqB;;;;kBAIT,oBAAoB;eACvB,iBAAiB,IAAI,uBAAuB;MACrD,wBAAwB;;;;kBAIZ,kBAAkB;eACrB,gBAAgB,IAAI,kBAAkB;MAC/C,qBAAqB;;;;;;;;;;;;;;;;;;;;;aAqBd,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;cAuBtB,eAAe;;;;wBAIL,wBAAwB;cAClC,gBAAgB;;wBAEN,iBAAiB,IAAI,kBAAkB;;;iBAG9C,SAAS;;2BAEC,cAAc;kCACP,kBAAkB;;;;wBAI5B,4BAA4B;;;;8BAItB,iCAAiC;wBACvC,0BAA0B;qBAC7B,gBAAgB;;;;8BAIP,mBAAmB;;;;8BAInB,wBAAwB;;;;wBAI9B,iCAAiC;;;;wBAIjC,iCAAiC;;;;8BAI3B,0BAA0B;;;;wBAIhC,mCAAmC;;;;wBAInC,mCAAmC;;;;wBAInC,uBAAuB;;;;8BAIjB,sBAAsB;;;;;;;;;;;;;;;8BAetB,0BAA0B;wBAChC,8BAA8B;aACzC,8BAA8B;;;;;;;;;;;;;;;;;;;;iCAoBV,iBAAiB,OAAO,qBAAqB,WAAW,eAAe;;;;;iCAKvE,iBAAiB,OAAO,iBAAiB,WAAW,eAAe;;;;iCAInE,iBAAiB,OAAO,gBAAgB,WAAW,eAAe;;;YAGvF,cAAc;;;;;CAKzB,CAAC"}

package/dist/esm/image/image.js

@@ -1,61 +1,10 @@
 import { __decorate } from "tslib";
 import { attr, FASTElement } from '@microsoft/fast-element';
-import { swapStates, toggleState } from '../utils/element-internals.js';
-import { ImageFit, ImageShape } from './image.options.js';
 /**
  * The base class used for constucting a fluent image custom element
  * @public
  */
 export class Image 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();
-    }
-    /**
-     * Handles changes to block custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    blockChanged(prev, next) {
-        toggleState(this.elementInternals, 'block', next);
-    }
-    /**
-     * Handles changes to bordered custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    borderedChanged(prev, next) {
-        toggleState(this.elementInternals, 'bordered', next);
-    }
-    /**
-     * Handles changes to shadow custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    shadowChanged(prev, next) {
-        toggleState(this.elementInternals, 'shadow', next);
-    }
-    /**
-     * Handles changes to fit attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    fitChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, ImageFit, 'fit-');
-    }
-    /**
-     * 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, ImageShape);
-    }
 }
 __decorate([
     attr({ mode: 'boolean' })

package/dist/esm/image/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/image/image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;IAgGrE,CAAC;IApFC;;;;OAIG;IACI,YAAY,CAAC,IAAa,EAAE,IAAa;QAC9C,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;IACpD,CAAC;IAYD;;;;OAIG;IACI,eAAe,CAAC,IAAa,EAAE,IAAa;QACjD,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IACvD,CAAC;IAYD;;;;OAIG;IACI,aAAa,CAAC,IAAa,EAAE,IAAa;QAC/C,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;IAYD;;;;OAIG;IACI,UAAU,CAAC,IAA0B,EAAE,IAA0B;QACtE,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAClE,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;CACF;AAtFQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACH;AAmBhB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACA;AAmBnB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACF;AAmBjB;IADN,IAAI;kCACiB;AAmBf;IADN,IAAI;oCACqB"}
+{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/image/image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;CAkDrC;AAzCQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACH;AAUhB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACA;AAUnB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACF;AAUjB;IADN,IAAI;kCACiB;AAUf;IADN,IAAI;oCACqB"}

package/dist/esm/image/image.styles.js

@@ -1,6 +1,5 @@
 import { css } from '@microsoft/fast-element';
 import { borderRadiusCircular, borderRadiusMedium, colorNeutralStroke2, shadow4, strokeWidthThin, } from '../theme/design-tokens.js';
-import { blockState, borderedState, circularState, fitCenterState, fitContainState, fitCoverState, fitNoneState, roundedState, shadowState, } from '../styles/states/index.js';
 /** Image styles
  *
  * @public
@@ -16,44 +15,44 @@ export const styles = css `
     min-width: 8px;
     display: inline-block;
   }
-  :host(${blockState}) ::slotted(img) {
+  :host([block]) ::slotted(img) {
     width: 100%;
     height: auto;
   }
-  :host(${borderedState}) ::slotted(img) {
+  :host([bordered]) ::slotted(img) {
     border: ${strokeWidthThin} solid ${colorNeutralStroke2};
   }
-  :host(${fitNoneState}) ::slotted(img) {
+  :host([fit='none']) ::slotted(img) {
     object-fit: none;
     object-position: top left;
     height: 100%;
     width: 100%;
   }
-  :host(${fitCenterState}) ::slotted(img) {
+  :host([fit='center']) ::slotted(img) {
     object-fit: none;
     object-position: center;
     height: 100%;
     width: 100%;
   }
-  :host(${fitContainState}) ::slotted(img) {
+  :host([fit='contain']) ::slotted(img) {
     object-fit: contain;
     object-position: center;
     height: 100%;
     width: 100%;
   }
-  :host(${fitCoverState}) ::slotted(img) {
+  :host([fit='cover']) ::slotted(img) {
     object-fit: cover;
     object-position: center;
     height: 100%;
     width: 100%;
   }
-  :host(${shadowState}) ::slotted(img) {
+  :host([shadow]) ::slotted(img) {
     box-shadow: ${shadow4};
   }
-  :host(${circularState}) ::slotted(img) {
+  :host([shape='circular']) ::slotted(img) {
     border-radius: ${borderRadiusCircular};
   }
-  :host(${roundedState}) ::slotted(img) {
+  :host([shape='rounded']) ::slotted(img) {
     border-radius: ${borderRadiusMedium};
   }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"image.styles.js","sourceRoot":"","sources":["../../../src/image/image.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,OAAO,EACP,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,UAAU,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,GACZ,MAAM,2BAA2B,CAAC;AAEnC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;UAWf,UAAU;;;;UAIV,aAAa;cACT,eAAe,UAAU,mBAAmB;;UAEhD,YAAY;;;;;;UAMZ,cAAc;;;;;;UAMd,eAAe;;;;;;UAMf,aAAa;;;;;;UAMb,WAAW;kBACH,OAAO;;UAEf,aAAa;qBACF,oBAAoB;;UAE/B,YAAY;qBACD,kBAAkB;;CAEtC,CAAC"}
+{"version":3,"file":"image.styles.js","sourceRoot":"","sources":["../../../src/image/image.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,OAAO,EACP,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;cAgBX,eAAe,UAAU,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA2BxC,OAAO;;;qBAGJ,oBAAoB;;;qBAGpB,kBAAkB;;CAEtC,CAAC"}

package/dist/esm/label/label.js

@@ -1,7 +1,5 @@
 import { __decorate } from "tslib";
 import { attr, FASTElement } from '@microsoft/fast-element';
-import { swapStates, toggleState } from '../utils/element-internals.js';
-import { LabelSize, LabelWeight } from './label.options.js';
 /**
  * The base class used for constructing a fluent-label custom element
  * @public
@@ -9,12 +7,6 @@ import { LabelSize, LabelWeight } from './label.options.js';
 export class Label 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();
         /**
          * 	Specifies styles for label when associated input is disabled
          *
@@ -32,30 +24,6 @@ export class Label extends FASTElement {
          */
         this.required = false;
     }
-    /**
-     * 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, LabelSize);
-    }
-    /**
-     * Handles changes to weight attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    weightChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, LabelWeight);
-    }
-    /**
-     * Handles changes to disabled attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    disabledChanged(prev, next) {
-        toggleState(this.elementInternals, 'disabled', next);
-    }
 }
 __decorate([
     attr

package/dist/esm/label/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/label/label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAE5D;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAwCnE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAWjC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;IACnC,CAAC;IAxDC;;;;OAIG;IACI,WAAW,CAAC,IAA2B,EAAE,IAA2B;QACzE,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;IAC3D,CAAC;IAYD;;;;OAIG;IACI,aAAa,CAAC,IAA6B,EAAE,IAA6B;QAC/E,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC;IAC7D,CAAC;IAYD;;;;OAIG;IACI,eAAe,CAAC,IAAyB,EAAE,IAAyB;QACzE,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IACvD,CAAC;CAWF;AA1DQ;IADN,IAAI;mCACmB;AAmBjB;IADN,IAAI;qCACuB;AAmBrB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACO;AAmB1B;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACO"}
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/label/label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QAqBE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;IACnC,CAAC;CAAA;AA/BQ;IADN,IAAI;mCACmB;AAUjB;IADN,IAAI;qCACuB;AAUrB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACO;AAU1B;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACO"}

package/dist/esm/label/label.styles.js

@@ -1,7 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../utils/index.js';
 import { colorNeutralForeground1, colorNeutralForegroundDisabled, colorPaletteRedForeground1, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, spacingHorizontalXS, } from '../theme/design-tokens.js';
-import { disabledState, largeState, semiboldState, smallState } from '../styles/states/index.js';
 /** Label styles
  * @public
  */
@@ -23,22 +22,22 @@ export const styles = css `
     margin-inline-start: ${spacingHorizontalXS};
   }
 
-  :host(${smallState}) {
+  :host([size='small']) {
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
   }
 
-  :host(${largeState}) {
+  :host([size='large']) {
     font-size: ${fontSizeBase400};
     line-height: ${lineHeightBase400};
   }
 
-  :host(:is(${largeState}, ${semiboldState})) {
+  :host(:is([size='large'], [weight='semibold'])) {
     font-weight: ${fontWeightSemibold};
   }
 
-  :host(${disabledState}),
-  :host(${disabledState}) .asterisk {
+  :host([disabled]),
+  :host([disabled]) .asterisk {
     color: ${colorNeutralForegroundDisabled};
   }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"label.styles.js","sourceRoot":"","sources":["../../../src/label/label.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEjG;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;aAGb,uBAAuB;;mBAEjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;aAKvB,0BAA0B;2BACZ,mBAAmB;;;UAGpC,UAAU;iBACH,eAAe;mBACb,iBAAiB;;;UAG1B,UAAU;iBACH,eAAe;mBACb,iBAAiB;;;cAGtB,UAAU,KAAK,aAAa;mBACvB,kBAAkB;;;UAG3B,aAAa;UACb,aAAa;aACV,8BAA8B;;CAE1C,CAAC"}
+{"version":3,"file":"label.styles.js","sourceRoot":"","sources":["../../../src/label/label.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;aAGb,uBAAuB;;mBAEjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;aAKvB,0BAA0B;2BACZ,mBAAmB;;;;iBAI7B,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;mBAIjB,kBAAkB;;;;;aAKxB,8BAA8B;;CAE1C,CAAC"}

package/dist/esm/link/link.js

@@ -1,8 +1,6 @@
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 import { BaseAnchor } from '../anchor-button/anchor-button.base.js';
-import { swapStates, toggleState } from '../utils/element-internals.js';
-import { LinkAppearance } from './link.options.js';
 /**
  * An Anchor Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
@@ -28,22 +26,6 @@ export class Link extends BaseAnchor {
          */
         this.inline = 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, LinkAppearance);
-    }
-    /**
-     * Handles changes to inline attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    inlineChanged(prev, next) {
-        toggleState(this.elementInternals, 'inline', next);
-    }
 }
 __decorate([
     attr

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

@@ -1 +1 @@
-{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/link/link.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QAoBE;;;;;;;;;WASG;QAEI,WAAM,GAAY,KAAK,CAAC;IAUjC,CAAC;IA9BC;;;;OAIG;IACI,iBAAiB,CAAC,IAAgC,EAAE,IAAgC;QACzF,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC;IAChE,CAAC;IAeD;;;;OAIG;IACI,aAAa,CAAC,IAAa,EAAE,IAAa;QAC/C,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;CACF;AAhCQ;IADN,IAAI;wCAC0C;AAsBxC;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACK"}
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/link/link.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAGpE;;;;;;;;;GASG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QAWE;;;;;;;;;WASG;QAEI,WAAM,GAAY,KAAK,CAAC;IACjC,CAAC;CAAA;AAdQ;IADN,IAAI;wCAC0C;AAaxC;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACK"}