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

package/dist/esm/divider/divider.js

@@ -1,5 +1,6 @@
 import { __decorate } from "tslib";
 import { attr, FASTElement } from '@microsoft/fast-element';
+import { toggleState } from '../utils/element-internals.js';
 import { DividerOrientation, DividerRole } from './divider.options.js';
 /**
  * A Divider Custom HTML Element.
@@ -16,6 +17,46 @@ export class Divider extends FASTElement {
          * @internal
          */
         this.elementInternals = this.attachInternals();
+        /**
+         * @public
+         * @remarks
+         * Adds padding to the beginning and end of the divider.
+         */
+        this.inset = false;
+    }
+    /**
+     * Handles changes to align-content attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    alignContentChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `align-${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `align-${next}`, true);
+        }
+    }
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
+    /**
+     * Handles changes to inset custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    insetChanged(prev, next) {
+        toggleState(this.elementInternals, 'inset', next);
     }
     connectedCallback() {
         var _a, _b;
@@ -48,8 +89,12 @@ export class Divider extends FASTElement {
      * @internal
      */
     orientationChanged(previous, next) {
-        if (this.$fastController.isConnected) {
-            this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next : null;
+        this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next : null;
+        if (previous) {
+            toggleState(this.elementInternals, `${previous}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
         }
     }
 }

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,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAA0C,kBAAkB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAE/G;;;;;GAKG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IAAxC;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;IAqFrE,CAAC;IAvCQ,iBAAiB;;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,WAAW,CAAC,SAAS,CAAC;QAEhE,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,YAAY,EAAE;YAC1C,IAAI,CAAC,gBAAgB,CAAC,eAAe,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,kBAAkB,CAAC,UAAU,CAAC;SAC3F;IACH,CAAC;IAED;;;;;;OAMG;IACI,WAAW,CAAC,QAAuB,EAAE,IAAmB;QAC7D,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACpC,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,WAAW,CAAC,SAAS,EAAE,CAAC;SACjE;QAED,IAAI,IAAI,KAAK,WAAW,CAAC,YAAY,EAAE;YACrC,IAAI,CAAC,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC;SAC9C;IACH,CAAC;IAED;;;;;;OAMG;IACI,kBAAkB,CAAC,QAAuB,EAAE,IAAmB;QACpE,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACpC,IAAI,CAAC,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;SAC9F;IACH,CAAC;CACF;AA3EC;IADC,IAAI;qCACqB;AAU1B;IADC,IAAI;4CACmC;AAQxC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;6CACK;AAQ1C;IADC,IAAI;2CACiC;AAQtC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACH"}
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/divider/divider.ts"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 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
  */
@@ -22,7 +23,7 @@ export const styles = css `
     height: ${strokeWidthThin};
   }
 
-  :host([inset]) {
+  :host(${insetState}) {
     padding: 0 12px;
   }
 
@@ -35,89 +36,89 @@ export const styles = css `
     padding: 0 12px;
   }
 
-  :host([align-content='start'])::before,
-  :host([align-content='end'])::after {
+  :host(${alignStartState})::before,
+  :host(${alignEndState})::after {
     flex-basis: 12px;
     flex-grow: 0;
     flex-shrink: 0;
   }
 
-  :host([orientation='vertical']) {
+  :host(${verticalState}) {
     height: 100%;
     min-height: 84px;
   }
-  :host([orientation='vertical']):empty {
+  :host(${verticalState}):empty {
     min-height: 20px;
   }
 
-  :host([orientation='vertical']) {
+  :host(${verticalState}) {
     flex-direction: column;
     align-items: center;
   }
 
-  :host([orientation='vertical'][inset])::before {
+  :host(${verticalState}${insetState})::before {
     margin-top: 12px;
   }
-  :host([orientation='vertical'][inset])::after {
+  :host(${verticalState}${insetState})::after {
     margin-bottom: 12px;
   }
 
-  :host([orientation='vertical']):empty::before,
-  :host([orientation='vertical']):empty::after {
+  :host(${verticalState}):empty::before,
+  :host(${verticalState}):empty::after {
     height: 10px;
     min-height: 10px;
     flex-grow: 0;
   }
 
-  :host([orientation='vertical'])::before,
-  :host([orientation='vertical'])::after {
+  :host(${verticalState})::before,
+  :host(${verticalState})::after {
     width: ${strokeWidthThin};
     min-height: 20px;
     height: 100%;
   }
 
-  :host([orientation='vertical']) ::slotted(*) {
+  :host(${verticalState}) ::slotted(*) {
     display: flex;
     flex-direction: column;
     padding: 12px 0;
     line-height: 20px;
   }
 
-  :host([orientation='vertical'][align-content='start'])::before {
+  :host(${verticalState}${alignStartState})::before {
     min-height: 8px;
   }
-  :host([orientation='vertical'][align-content='end'])::after {
+  :host(${verticalState}${alignEndState})::after {
     min-height: 8px;
   }
 
-  :host([appearance='strong'])::before,
-  :host([appearance='strong'])::after {
+  :host(${strongState})::before,
+  :host(${strongState})::after {
     background: ${colorNeutralStroke1};
   }
-  :host([appearance='strong']) ::slotted(*) {
+  :host(${strongState}) ::slotted(*) {
     color: ${colorNeutralForeground1};
   }
-  :host([appearance='brand'])::before,
-  :host([appearance='brand'])::after {
+  :host(${brandState})::before,
+  :host(${brandState})::after {
     background: ${colorBrandStroke1};
   }
-  :host([appearance='brand']) ::slotted(*) {
+  :host(${brandState}) ::slotted(*) {
     color: ${colorBrandForeground1};
   }
-  :host([appearance='subtle'])::before,
-  :host([appearance='subtle'])::after {
+  :host(${subtleState})::before,
+  :host(${subtleState})::after {
     background: ${colorNeutralStroke3};
   }
-  :host([appearance='subtle']) ::slotted(*) {
+  :host(${subtleState}) ::slotted(*) {
     color: ${colorNeutralForeground3};
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :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(${strongState})::before,
+    :host(${strongState})::after,
+    :host(${brandState})::before,
+    :host(${brandState})::after,
+    :host(${subtleState})::before,
+    :host(${subtleState})::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;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAyCvB,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"}
+{"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"}

package/dist/esm/image/image.js

@@ -1,10 +1,78 @@
 import { __decorate } from "tslib";
 import { attr, FASTElement } from '@microsoft/fast-element';
+import { toggleState } from '../utils/element-internals.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();
+        /**
+         * Image layout
+         *
+         * @public
+         * @remarks
+         * HTML attribute: block.
+         */
+        this.block = false;
+    }
+    /**
+     * 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) {
+        if (prev) {
+            toggleState(this.elementInternals, `fit-${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `fit-${next}`, true);
+        }
+    }
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
 }
 __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;AAG5D;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;CA8CrC;AArCC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACH;AASvB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACA;AAS1B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACF;AASxB;IADC,IAAI;kCACiB;AAStB;IADC,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;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAEnE;;;;;;WAMG;QAEI,UAAK,GAAa,KAAK,CAAC;IAgGjC,CAAC;IA9FC;;;;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,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SAC1D;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACzD;IACH,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAA4B,EAAE,IAA4B;QAC5E,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;CACF;AAhGC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACK;AAmB/B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACA;AAmB1B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACF;AAmBxB;IADC,IAAI;kCACiB;AAwBtB;IADC,IAAI;oCACqB"}

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

@@ -1,5 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { borderRadiusCircular, borderRadiusMedium, colorNeutralStroke2, shadow4, strokeWidthThin, } from '../theme/design-tokens.js';
+import { circularState, roundedState } from '../styles/states/index.js';
 /** Image styles
  *
  * @public
@@ -15,44 +16,44 @@ export const styles = css `
     min-width: 8px;
     display: inline-block;
   }
-  :host([block]) ::slotted(img) {
+  :host(:is([state--block], :state(block))) ::slotted(img) {
     width: 100%;
     height: auto;
   }
-  :host([bordered]) ::slotted(img) {
+  :host(:is([state--bordered], :state(bordered))) ::slotted(img) {
     border: ${strokeWidthThin} solid ${colorNeutralStroke2};
   }
-  :host([fit='none']) ::slotted(img) {
+  :host(:is([state--fit-none], :state(fit-none))) ::slotted(img) {
     object-fit: none;
     object-position: top left;
     height: 100%;
     width: 100%;
   }
-  :host([fit='center']) ::slotted(img) {
+  :host(:is([state--fit-center], :state(fit-center))) ::slotted(img) {
     object-fit: none;
     object-position: center;
     height: 100%;
     width: 100%;
   }
-  :host([fit='contain']) ::slotted(img) {
+  :host(:is([state--fit-contain], :state(fit-contain))) ::slotted(img) {
     object-fit: contain;
     object-position: center;
     height: 100%;
     width: 100%;
   }
-  :host([fit='cover']) ::slotted(img) {
+  :host(:is([state--fit-cover], :state(fit-cover))) ::slotted(img) {
     object-fit: cover;
     object-position: center;
     height: 100%;
     width: 100%;
   }
-  :host([shadow]) ::slotted(img) {
+  :host(:is([state--shadowed], :state(shadowed))) ::slotted(img) {
     box-shadow: ${shadow4};
   }
-  :host([shape='circular']) ::slotted(img) {
+  :host(${circularState}) ::slotted(img) {
     border-radius: ${borderRadiusCircular};
   }
-  :host([shape='rounded']) ::slotted(img) {
+  :host(${roundedState}) ::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;AAEnC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;cAgBX,eAAe,UAAU,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA2BxC,OAAO;;;qBAGJ,oBAAoB;;;qBAGpB,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;AACnC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAExE;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;cAgBX,eAAe,UAAU,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA2BxC,OAAO;;UAEf,aAAa;qBACF,oBAAoB;;UAE/B,YAAY;qBACD,kBAAkB;;CAEtC,CAAC"}

package/dist/esm/label/label.js

@@ -1,5 +1,6 @@
 import { __decorate } from "tslib";
 import { attr, FASTElement } from '@microsoft/fast-element';
+import { toggleState } from '../utils/element-internals.js';
 /**
  * The base class used for constructing a fluent-label custom element
  * @public
@@ -7,6 +8,12 @@ import { attr, FASTElement } from '@microsoft/fast-element';
 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
          *
@@ -24,6 +31,40 @@ 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) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
+    /**
+     * Handles changes to weight attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    weightChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
+    /**
+     * 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;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/BC;IADC,IAAI;mCACmB;AAUxB;IADC,IAAI;qCACuB;AAU5B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACO;AAUjC;IADC,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;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAkDnE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAWjC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;IACnC,CAAC;IAlEC;;;;OAIG;IACI,WAAW,CAAC,IAA2B,EAAE,IAA2B;QACzE,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAYD;;;;OAIG;IACI,aAAa,CAAC,IAA6B,EAAE,IAA6B;QAC/E,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAYD;;;;OAIG;IACI,eAAe,CAAC,IAAyB,EAAE,IAAyB;QACzE,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IACvD,CAAC;CAWF;AApEC;IADC,IAAI;mCACmB;AAwBxB;IADC,IAAI;qCACuB;AAwB5B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACO;AAmBjC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACO"}

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

@@ -1,6 +1,7 @@
 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 { largeState, smallState } from '../styles/states/index.js';
 /** Label styles
  * @public
  */
@@ -22,23 +23,23 @@ export const styles = css `
     margin-inline-start: ${spacingHorizontalXS};
   }
 
-  :host([size='small']) {
+  :host(${smallState}) {
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
   }
 
-  :host([size='large']) {
+  :host(${largeState}) {
     font-size: ${fontSizeBase400};
     line-height: ${lineHeightBase400};
   }
 
-  :host([size='large']),
-  :host([weight='semibold']) {
+  :host(${largeState}),
+  :host(:is([state--semibold], :state(semibold))) {
     font-weight: ${fontWeightSemibold};
   }
 
-  :host([disabled]),
-  :host([disabled]) .asterisk {
+  :host(:is([state--disabled], :state(disabled))),
+  :host(:is([state--disabled], :state(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;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;;;;;mBAKjB,kBAAkB;;;;;aAKxB,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;AACnC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEnE;;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;;;UAG1B,UAAU;;mBAED,kBAAkB;;;;;aAKxB,8BAA8B;;CAE1C,CAAC"}

package/dist/esm/link/link.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 import { BaseAnchor } from '../anchor-button/anchor-button.js';
+import { toggleState } from '../utils/element-internals.js';
 /**
  * An Anchor Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
@@ -26,6 +27,27 @@ 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) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
+    /**
+     * 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,mCAAmC,CAAC;AAG/D;;;;;;;;;GASG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QAWE;;;;;;;;;WASG;QAEI,WAAM,GAAY,KAAK,CAAC;IACjC,CAAC;CAAA;AAdC;IADC,IAAI;wCAC0C;AAa/C;IADC,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,mCAAmC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAG5D;;;;;;;;;GASG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QAyBE;;;;;;;;;WASG;QAEI,WAAM,GAAY,KAAK,CAAC;IAUjC,CAAC;IAnCC;;;;OAIG;IACI,iBAAiB,CAAC,IAAgC,EAAE,IAAgC;QACzF,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,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;AArCC;IADC,IAAI;wCAC0C;AA2B/C;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACK"}

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

@@ -1,10 +1,12 @@
 import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import { colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, fontFamilyBase, fontSizeBase300, fontWeightRegular, strokeWidthThin, } from '../theme/design-tokens.js';
+import { subtleState } from '../styles/states/index.js';
 export const styles = css `
   ${display('inline')}
 
   :host {
+    position: relative;
     box-sizing: border-box;
     background-color: transparent;
     color: ${colorBrandForegroundLink};
@@ -36,21 +38,21 @@ export const styles = css `
       color: ${colorBrandForegroundLinkPressed};
     }
 
-    :host([appearance='subtle']:hover) {
+    :host(${subtleState}:hover) {
       color: ${colorNeutralForeground2LinkHover};
     }
 
-    :host([appearance='subtle']:active) {
+    :host(${subtleState}:active) {
       color: ${colorNeutralForeground2LinkPressed};
     }
   }
 
-  :host([appearance='subtle']) {
+  :host(${subtleState}) {
     color: ${colorNeutralForeground2Link};
   }
 
   :host-context(:is(h1, h2, h3, h4, h5, h6, p, fluent-text)),
-  :host([inline]) {
+  :host(:is([state--inline], :state(inline))) {
     font: inherit;
     text-decoration: underline;
   }
@@ -59,6 +61,11 @@ export const styles = css `
     color: inherit;
     text-decoration: none;
   }
+
+  ::slotted(a) {
+    position: absolute;
+    inset: 0;
+  }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
     :host {
       color: LinkText;

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

@@ -1 +1 @@
-{"version":3,"file":"link.styles.js","sourceRoot":"","sources":["../../../src/link/link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,wBAAwB,EACxB,6BAA6B,EAC7B,+BAA+B,EAC/B,2BAA2B,EAC3B,gCAAgC,EAChC,kCAAkC,EAClC,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;;aAKR,wBAAwB;;mBAElB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;iCAMH,eAAe;;;;;;;;;;;;eAYjC,6BAA6B;;;;eAI7B,+BAA+B;;;;eAI/B,gCAAgC;;;;eAIhC,kCAAkC;;;;;aAKpC,2BAA2B;;;;;;;;;;;;;CAavC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"link.styles.js","sourceRoot":"","sources":["../../../src/link/link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,wBAAwB,EACxB,6BAA6B,EAC7B,+BAA+B,EAC/B,2BAA2B,EAC3B,gCAAgC,EAChC,kCAAkC,EAClC,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;;;aAMR,wBAAwB;;mBAElB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;iCAMH,eAAe;;;;;;;;;;;;eAYjC,6BAA6B;;;;eAI7B,+BAA+B;;;YAGlC,WAAW;eACR,gCAAgC;;;YAGnC,WAAW;eACR,kCAAkC;;;;UAIvC,WAAW;aACR,2BAA2B;;;;;;;;;;;;;;;;;;CAkBvC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}

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

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

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

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