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

package/dist/esm/tablist/tablist.styles.js

@@ -1,7 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../utils/index.js';
 import { borderRadiusCircular, colorCompoundBrandForeground1Hover, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground2, colorNeutralForegroundDisabled, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, curveDecelerateMax, durationSlow, fontSizeBase300, fontSizeBase400, lineHeightBase300, lineHeightBase400, spacingHorizontalMNudge, spacingHorizontalSNudge, spacingVerticalL, spacingVerticalMNudge, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXXS, strokeWidthThicker, } from '../theme/design-tokens.js';
-import { disabledState, largeState, smallState, subtleState, verticalState } from '../styles/states/index.js';
 /**
  * @public
  */
@@ -18,7 +17,7 @@ export const styles = css `
     flex-direction: row;
   }
 
-  :host(${verticalState}) {
+  :host([orientation='vertical']) {
     flex-direction: column;
   }
 
@@ -40,7 +39,7 @@ export const styles = css `
     transform: translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale));
   }
 
-  :host(${verticalState}) ::slotted([slot='tab'])::after {
+  :host([orientation='vertical']) ::slotted([slot='tab'])::after {
     width: ${strokeWidthThicker};
     height: unset;
     margin-block-start: unset;
@@ -74,27 +73,27 @@ export const styles = css `
     transform-origin: left;
   }
 
-  :host(${verticalState}) ::slotted([slot='tab'])::before,
-  :host(${verticalState}) ::slotted([slot='tab'][aria-selected='false']:hover)::after {
+  :host([orientation='vertical']) ::slotted([slot='tab'])::before,
+  :host([orientation='vertical']) ::slotted([slot='tab'][aria-selected='false']:hover)::after {
     height: unset;
     width: ${strokeWidthThicker};
     margin-inline-end: auto;
     transform-origin: top;
   }
 
-  :host(:where(${smallState}, ${largeState})) ::slotted([slot='tab']) {
+  :host(:where([size='small'], [size='large'])) ::slotted([slot='tab']) {
     padding-inline: var(--tabPaddingInline);
     padding-block: var(--tabPaddingBlock);
   }
 
-  :host(${smallState}) ::slotted([slot='tab']) {
+  :host([size='small']) ::slotted([slot='tab']) {
     --tabPaddingBlock: ${spacingVerticalSNudge};
     --tabPaddingInline: ${spacingHorizontalSNudge};
     font-size: ${fontSizeBase300};
     line-height: ${lineHeightBase300};
   }
 
-  :host(${largeState}) ::slotted([slot='tab']) {
+  :host([size='large']) ::slotted([slot='tab']) {
     --tabPaddingBlock: ${spacingVerticalL};
     --tabPaddingInline: ${spacingHorizontalMNudge};
     font-size: ${fontSizeBase400};
@@ -112,80 +111,80 @@ export const styles = css `
     --tabIndicatorInsetInline: ${spacingHorizontalMNudge};
   }
 
-  :host(${smallState}) ::slotted([slot='tab']) {
+  :host([size='small']) ::slotted([slot='tab']) {
     --tabIndicatorInsetInline: ${spacingHorizontalSNudge};
   }
 
-  :host(${largeState}) ::slotted([slot='tab']) {
+  :host([size='large']) ::slotted([slot='tab']) {
     --tabIndicatorInsetInline: ${spacingHorizontalMNudge};
   }
 
-  :host(${verticalState}) ::slotted([slot='tab']) {
+  :host([orientation='vertical']) ::slotted([slot='tab']) {
     padding-block: var(--tabPaddingBlock);
   }
 
-  :host(${verticalState}) ::slotted([slot='tab']) {
+  :host([orientation='vertical']) ::slotted([slot='tab']) {
     --tabPaddingBlock: ${spacingVerticalS};
   }
 
-  :host(${verticalState}${smallState}) ::slotted([slot='tab']) {
+  :host([orientation='vertical'][size='small']) ::slotted([slot='tab']) {
     --tabPaddingBlock: ${spacingVerticalXXS};
   }
 
-  :host(${verticalState}${largeState}) ::slotted([slot='tab']) {
+  :host([orientation='vertical'][size='large']) ::slotted([slot='tab']) {
     --tabPaddingBlock: ${spacingVerticalS};
   }
 
-  :host(${verticalState}) ::slotted([slot='tab'])::after,
-  :host(${verticalState}) ::slotted([slot='tab'])::before,
-  :host(${verticalState}) ::slotted([slot='tab']:hover)::after {
+  :host([orientation='vertical']) ::slotted([slot='tab'])::after,
+  :host([orientation='vertical']) ::slotted([slot='tab'])::before,
+  :host([orientation='vertical']) ::slotted([slot='tab']:hover)::after {
     inset-inline: 0;
     inset-block: var(--tabIndicatorInsetBlock);
   }
 
-  :host(${verticalState}) {
+  :host([orientation='vertical']) {
     --tabIndicatorInsetBlock: ${spacingVerticalS};
   }
 
-  :host(${verticalState}${smallState}) {
+  :host([orientation='vertical'][size='small']) {
     --tabIndicatorInsetBlock: ${spacingVerticalSNudge};
   }
 
-  :host(${verticalState}${largeState}) {
+  :host([orientation='vertical'][size='large']) {
     --tabIndicatorInsetBlock: ${spacingVerticalMNudge};
   }
 
   /* disabled styles */
-  :host(${disabledState}) {
+  :host([disabled]) {
     cursor: not-allowed;
     color: ${colorNeutralForegroundDisabled};
   }
 
-  :host(${disabledState}) ::slotted([slot='tab']) {
+  :host([disabled]) ::slotted([slot='tab']) {
     pointer-events: none;
     cursor: not-allowed;
     color: ${colorNeutralForegroundDisabled};
   }
 
-  :host(${disabledState}) ::slotted([slot='tab']:after) {
+  :host([disabled]) ::slotted([slot='tab']:after) {
     background-color: ${colorNeutralForegroundDisabled};
   }
 
-  :host(${disabledState}) ::slotted([slot='tab'][aria-selected='true'])::after {
+  :host([disabled]) ::slotted([slot='tab'][aria-selected='true'])::after {
     background-color: ${colorNeutralForegroundDisabled};
   }
 
-  :host(${disabledState}) ::slotted([slot='tab']:hover):before {
+  :host([disabled]) ::slotted([slot='tab']:hover):before {
     content: unset;
   }
 
-  :host(${subtleState}) ::slotted([slot='tab']:hover) {
+  :host([appearance='subtle']) ::slotted([slot='tab']:hover) {
     background-color: ${colorSubtleBackgroundHover};
     color: ${colorNeutralForeground1Hover};
     fill: ${colorCompoundBrandForeground1Hover};
   }
 
-  :host(${subtleState}) ::slotted([slot='tab']:active) {
+  :host([appearance='subtle']) ::slotted([slot='tab']:active) {
     background-color: ${colorSubtleBackgroundPressed};
     fill: ${colorSubtleBackgroundPressed};
     color: ${colorNeutralForeground1};

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

@@ -1 +1 @@
-{"version":3,"file":"tablist.styles.js","sourceRoot":"","sources":["../../../src/tablist/tablist.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,oBAAoB,EACpB,kCAAkC,EAClC,uBAAuB,EACvB,4BAA4B,EAC5B,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,4BAA4B,EAC5B,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9G;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;aAQN,uBAAuB;;;;UAI1B,aAAa;;;;;;;;;;;2BAWI,YAAY;kCACL,kBAAkB;;;;cAItC,kBAAkB;;;;;;UAMtB,aAAa;aACV,kBAAkB;;;;;;;;;cASjB,kBAAkB;qBACX,oBAAoB;;;;;;;;;;;;;;wBAcjB,8BAA8B;;;;cAIxC,kBAAkB;;;;;UAKtB,aAAa;UACb,aAAa;;aAEV,kBAAkB;;;;;iBAKd,UAAU,KAAK,UAAU;;;;;UAKhC,UAAU;yBACK,qBAAqB;0BACpB,uBAAuB;iBAChC,eAAe;mBACb,iBAAiB;;;UAG1B,UAAU;yBACK,gBAAgB;0BACf,uBAAuB;iBAChC,eAAe;mBACb,iBAAiB;;;;;;;;;;;iCAWH,uBAAuB;;;UAG9C,UAAU;iCACa,uBAAuB;;;UAG9C,UAAU;iCACa,uBAAuB;;;UAG9C,aAAa;;;;UAIb,aAAa;yBACE,gBAAgB;;;UAG/B,aAAa,GAAG,UAAU;yBACX,kBAAkB;;;UAGjC,aAAa,GAAG,UAAU;yBACX,gBAAgB;;;UAG/B,aAAa;UACb,aAAa;UACb,aAAa;;;;;UAKb,aAAa;gCACS,gBAAgB;;;UAGtC,aAAa,GAAG,UAAU;gCACJ,qBAAqB;;;UAG3C,aAAa,GAAG,UAAU;gCACJ,qBAAqB;;;;UAI3C,aAAa;;aAEV,8BAA8B;;;UAGjC,aAAa;;;aAGV,8BAA8B;;;UAGjC,aAAa;wBACC,8BAA8B;;;UAG5C,aAAa;wBACC,8BAA8B;;;UAG5C,aAAa;;;;UAIb,WAAW;wBACG,0BAA0B;aACrC,4BAA4B;YAC7B,kCAAkC;;;UAGpC,WAAW;wBACG,4BAA4B;YACxC,4BAA4B;aAC3B,uBAAuB;;CAEnC,CAAC"}
+{"version":3,"file":"tablist.styles.js","sourceRoot":"","sources":["../../../src/tablist/tablist.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,oBAAoB,EACpB,kCAAkC,EAClC,uBAAuB,EACvB,4BAA4B,EAC5B,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,4BAA4B,EAC5B,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;aAQN,uBAAuB;;;;;;;;;;;;;;;2BAeT,YAAY;kCACL,kBAAkB;;;;cAItC,kBAAkB;;;;;;;aAOnB,kBAAkB;;;;;;;;;cASjB,kBAAkB;qBACX,oBAAoB;;;;;;;;;;;;;;wBAcjB,8BAA8B;;;;cAIxC,kBAAkB;;;;;;;;aAQnB,kBAAkB;;;;;;;;;;;yBAWN,qBAAqB;0BACpB,uBAAuB;iBAChC,eAAe;mBACb,iBAAiB;;;;yBAIX,gBAAgB;0BACf,uBAAuB;iBAChC,eAAe;mBACb,iBAAiB;;;;;;;;;;;iCAWH,uBAAuB;;;;iCAIvB,uBAAuB;;;;iCAIvB,uBAAuB;;;;;;;;yBAQ/B,gBAAgB;;;;yBAIhB,kBAAkB;;;;yBAIlB,gBAAgB;;;;;;;;;;;gCAWT,gBAAgB;;;;gCAIhB,qBAAqB;;;;gCAIrB,qBAAqB;;;;;;aAMxC,8BAA8B;;;;;;aAM9B,8BAA8B;;;;wBAInB,8BAA8B;;;;wBAI9B,8BAA8B;;;;;;;;wBAQ9B,0BAA0B;aACrC,4BAA4B;YAC7B,kCAAkC;;;;wBAItB,4BAA4B;YACxC,4BAA4B;aAC3B,uBAAuB;;CAEnC,CAAC"}

package/dist/esm/text/text.js

@@ -1,7 +1,5 @@
 import { __decorate } from "tslib";
-import { attr, FASTElement, Observable } from '@microsoft/fast-element';
-import { swapStates, toggleState } from '../utils/element-internals.js';
-import { TextAlign, TextFont, TextSize, TextWeight } from './text.options.js';
+import { attr, FASTElement } from '@microsoft/fast-element';
 /**
  * The base class used for constructing a fluent-text custom element
  * @public
@@ -66,69 +64,6 @@ export class Text extends FASTElement {
          */
         this.block = 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, TextSize, 'size-');
-    }
-    /**
-     * Handles changes to font attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    fontChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, TextFont);
-    }
-    /**
-     * 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, TextWeight);
-    }
-    /**
-     * Handles changes to align attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    alignChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, TextAlign);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        Observable.getNotifier(this).subscribe(this);
-        Object.keys(this.$fastController.definition.attributeLookup).forEach(key => {
-            this.handleChange(this, key);
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        Observable.getNotifier(this).unsubscribe(this);
-    }
-    /**
-     * Handles changes to observable properties
-     * @internal
-     * @param source - the source of the change
-     * @param propertyName - the property name being changed
-     */
-    handleChange(source, propertyName) {
-        switch (propertyName) {
-            case 'nowrap':
-            case 'truncate':
-            case 'italic':
-            case 'underline':
-            case 'strikethrough':
-            case 'block':
-                toggleState(this.elementInternals, propertyName, !!this[propertyName]);
-                break;
-            default:
-                break;
-        }
-    }
 }
 __decorate([
     attr({ mode: 'boolean' })

package/dist/esm/text/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/text/text.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/text/text.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,IAAK,SAAQ,WAAW;IAArC;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAEnE;;;;;;;;WAQG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;;;;;WAMG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,cAAS,GAAY,KAAK,CAAC;QAE3B;;;;;;WAMG;QAEH,kBAAa,GAAY,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEH,UAAK,GAAY,KAAK,CAAC;IA0CzB,CAAC;CAAA;AA5FC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACF;AAUxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACA;AAU1B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACF;AAUxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACC;AAU3B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACK;AAU/B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mCACH;AAWvB;IADC,IAAI;kCACW;AAUhB;IADC,IAAI;kCACW;AAUhB;IADC,IAAI;oCACe;AAUpB;IADC,IAAI;mCACa"}

package/dist/esm/text/text.styles.js

@@ -1,7 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../utils/index.js';
 import { fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, } from '../theme/design-tokens.js';
-import { blockState, boldState, centerState, endState, italicState, justifyState, mediumState, monospaceState, nowrapState, numericState, semiboldState, size1000State, size100State, size200State, size400State, size500State, size600State, size700State, size800State, size900State, strikethroughState, truncateState, underlineState, } from '../styles/states/index.js';
 /** Text styles
  * @public
  */
@@ -17,88 +16,88 @@ export const styles = css `
     text-align: start;
   }
 
-  :host(${nowrapState}),
-  :host(${nowrapState}) ::slotted(*) {
+  :host([nowrap]),
+  :host([nowrap]) ::slotted(*) {
     white-space: nowrap;
     overflow: hidden;
   }
-  :host(${truncateState}),
-  :host(${truncateState}) ::slotted(*) {
+  :host([truncate]),
+  :host([truncate]) ::slotted(*) {
     text-overflow: ellipsis;
   }
-  :host(${blockState}) {
+  :host([block]) {
     display: block;
   }
-  :host(${italicState}) {
+  :host([italic]) {
     font-style: italic;
   }
-  :host(${underlineState}) {
+  :host([underline]) {
     text-decoration-line: underline;
   }
-  :host(${strikethroughState}) {
+  :host([strikethrough]) {
     text-decoration-line: line-through;
   }
-  :host(${underlineState}${strikethroughState}) {
+  :host([underline][strikethrough]) {
     text-decoration-line: line-through underline;
   }
-  :host(${size100State}) {
+  :host([size='100']) {
     font-size: ${fontSizeBase100};
     line-height: ${lineHeightBase100};
   }
-  :host(${size200State}) {
+  :host([size='200']) {
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
   }
-  :host(${size400State}) {
+  :host([size='400']) {
     font-size: ${fontSizeBase400};
     line-height: ${lineHeightBase400};
   }
-  :host(${size500State}) {
+  :host([size='500']) {
     font-size: ${fontSizeBase500};
     line-height: ${lineHeightBase500};
   }
-  :host(${size600State}) {
+  :host([size='600']) {
     font-size: ${fontSizeBase600};
     line-height: ${lineHeightBase600};
   }
-  :host(${size700State}) {
+  :host([size='700']) {
     font-size: ${fontSizeHero700};
     line-height: ${lineHeightHero700};
   }
-  :host(${size800State}) {
+  :host([size='800']) {
     font-size: ${fontSizeHero800};
     line-height: ${lineHeightHero800};
   }
-  :host(${size900State}) {
+  :host([size='900']) {
     font-size: ${fontSizeHero900};
     line-height: ${lineHeightHero900};
   }
-  :host(${size1000State}) {
+  :host([size='1000']) {
     font-size: ${fontSizeHero1000};
     line-height: ${lineHeightHero1000};
   }
-  :host(${monospaceState}) {
+  :host([font='monospace']) {
     font-family: ${fontFamilyMonospace};
   }
-  :host(${numericState}) {
+  :host([font='numeric']) {
     font-family: ${fontFamilyNumeric};
   }
-  :host(${mediumState}) {
+  :host([weight='medium']) {
     font-weight: ${fontWeightMedium};
   }
-  :host(${semiboldState}) {
+  :host([weight='semibold']) {
     font-weight: ${fontWeightSemibold};
   }
-  :host(${boldState}) {
+  :host([weight='bold']) {
     font-weight: ${fontWeightBold};
   }
-  :host(${centerState}) {
+  :host([align='center']) {
     text-align: center;
   }
-  :host(${endState}) {
+  :host([align='end']) {
     text-align: end;
   }
-  :host(${justifyState}) {
+  :host([align='justify']) {
     text-align: justify;
   }
 

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

@@ -1 +1 @@
-{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../src/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,UAAU,EACV,SAAS,EACT,WAAW,EACX,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,WAAW,EACX,cAAc,EACd,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,cAAc,GACf,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;mBAIF,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;UAI1B,WAAW;UACX,WAAW;;;;UAIX,aAAa;UACb,aAAa;;;UAGb,UAAU;;;UAGV,WAAW;;;UAGX,cAAc;;;UAGd,kBAAkB;;;UAGlB,cAAc,GAAG,kBAAkB;;;UAGnC,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,aAAa;iBACN,gBAAgB;mBACd,kBAAkB;;UAE3B,cAAc;mBACL,mBAAmB;;UAE5B,YAAY;mBACH,iBAAiB;;UAE1B,WAAW;mBACF,gBAAgB;;UAEzB,aAAa;mBACJ,kBAAkB;;UAE3B,SAAS;mBACA,cAAc;;UAEvB,WAAW;;;UAGX,QAAQ;;;UAGR,YAAY;;;;;;;;;;;;CAYrB,CAAC"}
+{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../src/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;mBAIF,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6BnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,gBAAgB;mBACd,kBAAkB;;;mBAGlB,mBAAmB;;;mBAGnB,iBAAiB;;;mBAGjB,gBAAgB;;;mBAGhB,kBAAkB;;;mBAGlB,cAAc;;;;;;;;;;;;;;;;;;;;CAoBhC,CAAC"}

package/dist/esm/text-input/text-input.js

@@ -2,9 +2,7 @@ import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 import { StartEnd } from '../patterns/start-end.js';
 import { applyMixins } from '../utils/apply-mixins.js';
-import { swapStates } from '../utils/element-internals.js';
 import { BaseTextInput } from './text-input.base.js';
-import { TextInputAppearance, TextInputControlSize } from './text-input.options.js';
 /**
  * A Text Input Custom HTML Element.
  * Based on BaseTextInput and includes style and layout specific attributes
@@ -12,22 +10,6 @@ import { TextInputAppearance, TextInputControlSize } from './text-input.options.
  * @public
  */
 export class TextInput extends BaseTextInput {
-    /**
-     * 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, TextInputAppearance);
-    }
-    /**
-     * Handles changes to `control-size` attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    controlSizeChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, TextInputControlSize);
-    }
 }
 __decorate([
     attr

package/dist/esm/text-input/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/text-input/text-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpF;;;;;GAKG;AACH,MAAM,OAAO,SAAU,SAAQ,aAAa;IAW1C;;;;OAIG;IACI,iBAAiB,CAAC,IAAqC,EAAE,IAAqC;QACnG,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,mBAAmB,CAAC,CAAC;IACrE,CAAC;IAYD;;;;OAIG;IACI,kBAAkB,CAAC,IAAsC,EAAE,IAAsC;QACtG,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,CAAC,CAAC;IACtE,CAAC;CACF;AA7BQ;IADN,IAAI;6CACmC;AAmBjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CACM;AAqB5C,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/text-input/text-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD;;;;;GAKG;AACH,MAAM,OAAO,SAAU,SAAQ,aAAa;CAoB3C;AAXQ;IADN,IAAI;6CACmC;AAUjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CACM;AAY5C,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC"}

package/dist/esm/text-input/text-input.styles.js

@@ -1,7 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { borderRadiusMedium, colorCompoundBrandStroke, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground3, colorNeutralBackgroundInverted, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorPaletteRedBorder2, colorTransparentBackground, colorTransparentStroke, colorTransparentStrokeInteractive, curveAccelerateMid, curveDecelerateMid, durationNormal, durationUltraFast, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontWeightRegular, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalXS, strokeWidthThin, } from '../theme/design-tokens.js';
 import { display } from '../utils/display.js';
-import { filledDarkerState, filledLighterState, largeState, outlineState, smallState, underlineState, } from '../styles/states/index.js';
 /**
  * Styles for the TextInput component.
  *
@@ -121,7 +120,7 @@ export const styles = css `
   :host(:focus-within:active) .root:after {
     border-bottom-color: ${colorCompoundBrandStrokePressed};
   }
-  :host(${outlineState}:focus-within) .root {
+  :host([appearance='outline']:focus-within) .root {
     border: ${strokeWidthThin} solid ${colorNeutralStroke1};
   }
   :host(:focus-within) .control {
@@ -140,70 +139,70 @@ export const styles = css `
     color: ${colorNeutralForegroundInverted};
     background-color: ${colorNeutralBackgroundInverted};
   }
-  :host(${smallState}) .control {
+  :host([control-size='small']) .control {
     font-size: ${fontSizeBase200};
     font-weight: ${fontWeightRegular};
     line-height: ${lineHeightBase200};
   }
-  :host(${smallState}) .root {
+  :host([control-size='small']) .root {
     height: 24px;
     gap: ${spacingHorizontalXXS};
     padding: 0 ${spacingHorizontalSNudge};
   }
-  :host(${smallState}) ::slotted([slot='start']),
-  :host(${smallState}) ::slotted([slot='end']) {
+  :host([control-size='small']) ::slotted([slot='start']),
+  :host([control-size='small']) ::slotted([slot='end']) {
     font-size: ${fontSizeBase400};
   }
-  :host(${largeState}) .control {
+  :host([control-size='large']) .control {
     font-size: ${fontSizeBase400};
     font-weight: ${fontWeightRegular};
     line-height: ${lineHeightBase400};
   }
-  :host(${largeState}) .root {
+  :host([control-size='large']) .root {
     height: 40px;
     gap: ${spacingHorizontalS};
     padding: 0 ${spacingHorizontalM};
   }
-  :host(${largeState}) ::slotted([slot='start']),
-  :host(${largeState}) ::slotted([slot='end']) {
+  :host([control-size='large']) ::slotted([slot='start']),
+  :host([control-size='large']) ::slotted([slot='end']) {
     font-size: ${fontSizeBase600};
   }
-  :host(${underlineState}) .root {
+  :host([appearance='underline']) .root {
     background: ${colorTransparentBackground};
     border: 0;
     border-radius: 0;
     border-bottom: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
   }
-  :host(${underlineState}:hover) .root {
+  :host([appearance='underline']:hover) .root {
     border-bottom-color: ${colorNeutralStrokeAccessibleHover};
   }
-  :host(${underlineState}:active) .root {
+  :host([appearance='underline']:active) .root {
     border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
   }
-  :host(${underlineState}:focus-within) .root {
+  :host([appearance='underline']:focus-within) .root {
     border: 0;
     border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
   }
-  :host(${underlineState}[disabled]) .root {
+  :host([appearance='underline'][disabled]) .root {
     border-bottom-color: ${colorNeutralStrokeDisabled};
   }
-  :host(${filledLighterState}) .root,
-  :host(${filledDarkerState}) .root {
+  :host([appearance='filled-lighter']) .root,
+  :host([appearance='filled-darker']) .root {
     border: ${strokeWidthThin} solid ${colorTransparentStroke};
     box-shadow: ${shadow2};
   }
-  :host(${filledLighterState}) .root {
+  :host([appearance='filled-lighter']) .root {
     background: ${colorNeutralBackground1};
   }
-  :host(${filledDarkerState}) .root {
+  :host([appearance='filled-darker']) .root {
     background: ${colorNeutralBackground3};
   }
-  :host(${filledLighterState}:hover) .root,
-  :host(${filledDarkerState}:hover) .root {
+  :host([appearance='filled-lighter']:hover) .root,
+  :host([appearance='filled-darker']:hover) .root {
     border-color: ${colorTransparentStrokeInteractive};
   }
-  :host(${filledLighterState}:active) .root,
-  :host(${filledDarkerState}:active) .root {
+  :host([appearance='filled-lighter']:active) .root,
+  :host([appearance='filled-darker']:active) .root {
     border-color: ${colorTransparentStrokeInteractive};
     background: ${colorNeutralBackground3};
   }

package/dist/esm/text-input/text-input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../src/text-input/text-input.styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../src/text-input/text-input.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,sBAAsB,EACtB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;IACpC,OAAO,CAAC,OAAO,CAAC;;;mBAGD,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;aAKvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;wBAUrB,uBAAuB;cACjC,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;;;;;WAK5B,oBAAoB;iBACd,uBAAuB;;;;;;oBAMpB,sBAAsB;;;;;;;;;;uBAUnB,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;aAM7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;;;;;;;;;aASnB,uBAAuB;;;;;;;aAOvB,uBAAuB;iBACnB,eAAe;;;qBAGX,oBAAoB;;;oBAGrB,oBAAoB;WAC7B,mBAAmB;;;oBAGV,wBAAwB;2BACjB,iCAAiC;;;oBAGxC,0BAA0B;;;;;;;;;2BASnB,cAAc;wBACjB,kBAAkB;;;2BAGf,+BAA+B;;;cAG5C,eAAe,UAAU,mBAAmB;;;aAG7C,uBAAuB;;;kBAGlB,0BAA0B;cAC9B,eAAe,UAAU,0BAA0B;;;;;aAKpD,8BAA8B;;;aAG9B,8BAA8B;wBACnB,8BAA8B;;;iBAGrC,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,oBAAoB;iBACd,uBAAuB;;;;iBAIvB,eAAe;;;iBAGf,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,kBAAkB;iBACZ,kBAAkB;;;;iBAIlB,eAAe;;;kBAGd,0BAA0B;;;qBAGvB,eAAe,UAAU,4BAA4B;;;2BAG/C,iCAAiC;;;2BAGjC,mCAAmC;;;;2BAInC,mCAAmC;;;2BAGnC,0BAA0B;;;;cAIvC,eAAe,UAAU,sBAAsB;kBAC3C,OAAO;;;kBAGP,uBAAuB;;;kBAGvB,uBAAuB;;;;oBAIrB,iCAAiC;;;;oBAIjC,iCAAiC;kBACnC,uBAAuB;;CAExC,CAAC"}

package/dist/esm/textarea/textarea.js

@@ -1,8 +1,7 @@
 import { __decorate } from "tslib";
 import { attr, Observable } from '@microsoft/fast-element';
-import { hasMatchingState, swapStates, toggleState } from '../utils/element-internals.js';
 import { BaseTextArea } from './textarea.base.js';
-import { TextAreaAppearance, TextAreaAppearancesForDisplayShadow, TextAreaSize } from './textarea.options.js';
+import { TextAreaAppearance } from './textarea.options.js';
 export class TextArea extends BaseTextArea {
     constructor() {
         super(...arguments);
@@ -29,21 +28,6 @@ export class TextArea extends BaseTextArea {
             node.size = this.size;
         });
     }
-    appearanceChanged(prev, next) {
-        toggleState(this.elementInternals, prev, false);
-        if (hasMatchingState(TextAreaAppearance, next)) {
-            toggleState(this.elementInternals, next, true);
-        }
-        else {
-            this.appearance = TextAreaAppearance.outline;
-        }
-    }
-    blockChanged() {
-        toggleState(this.elementInternals, 'block', this.block);
-    }
-    sizeChanged(prev, next) {
-        swapStates(this.elementInternals, prev, next, TextAreaSize);
-    }
     /**
      * @internal
      */
@@ -54,10 +38,6 @@ export class TextArea extends BaseTextArea {
                     node.size = this.size;
                 });
                 break;
-            case 'appearance':
-            case 'displayShadow':
-                this.maybeDisplayShadow();
-                break;
         }
     }
     /**
@@ -65,9 +45,6 @@ export class TextArea extends BaseTextArea {
      */
     connectedCallback() {
         super.connectedCallback();
-        this.maybeDisplayShadow();
-        Observable.getNotifier(this).subscribe(this, 'appearance');
-        Observable.getNotifier(this).subscribe(this, 'displayShadow');
         Observable.getNotifier(this).subscribe(this, 'size');
     }
     /**
@@ -75,13 +52,8 @@ export class TextArea extends BaseTextArea {
      */
     disconnectedCallback() {
         super.disconnectedCallback();
-        Observable.getNotifier(this).unsubscribe(this, 'appearance');
-        Observable.getNotifier(this).unsubscribe(this, 'displayShadow');
         Observable.getNotifier(this).unsubscribe(this, 'size');
     }
-    maybeDisplayShadow() {
-        toggleState(this.elementInternals, 'display-shadow', this.displayShadow && TextAreaAppearancesForDisplayShadow.includes(this.appearance));
-    }
 }
 __decorate([
     attr({ mode: 'fromView' })

package/dist/esm/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/textarea/textarea.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/textarea/textarea.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,uBAAuB,CAAC;AAEzE,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;QASE;;;;;;WAMG;QAEI,eAAU,GAAuB,kBAAkB,CAAC,OAAO,CAAC;QAEnE;;;;;;WAMG;QAEI,UAAK,GAAY,KAAK,CAAC;IA0ChC,CAAC;IApEW,wBAAwB;QAChC,KAAK,CAAC,wBAAwB,EAAE,CAAC;QAEjC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC;IAgCD;;OAEG;IACI,YAAY,CAAC,CAAM,EAAE,YAAoB;QAC9C,QAAQ,YAAY,EAAE,CAAC;YACrB,KAAK,MAAM;gBACT,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBACxB,CAAC,CAAC,CAAC;gBACH,MAAM;QACV,CAAC;IACH,CAAC;IAED;;OAEG;IACI,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACvD,CAAC;IAED;;OAEG;IACI,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACzD,CAAC;CACF;AApDQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;4CACwC;AAU5D;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACI;AAUvB;IADN,IAAI;sCACsB"}