@fluentui/web-components 3.0.0-beta.106 → 3.0.0-beta.108

package/dist/esm/radio-group/radio-group.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.styles.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;WAKR,gBAAgB;;;;;;;;;;;;;aAad,uBAAuB;;;;aAIvB,uBAAuB;;;;aAIvB,uBAAuB;;;cAGtB,aAAa;aACd,8BAA8B;;;cAG7B,YAAY;aACb,uBAAuB;;CAEnC,CAAC"}
+{"version":3,"file":"radio-group.styles.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;WAKR,gBAAgB;;;;;;;;;;;;;aAad,uBAAuB;;;;aAIvB,uBAAuB;;;;aAIvB,uBAAuB;;;cAGtB,aAAa;aACd,8BAA8B;;;cAG7B,YAAY;aACb,uBAAuB;;;;cAItB,gBAAgB,IAAI,kBAAkB;;CAEnD,CAAC"}

package/dist/esm/styles/states/index.d.ts

@@ -87,6 +87,11 @@ export declare const rangeOverflowState: ":state(range-overflow)" | "[state--ran
  * @public
  */
 export declare const rangeUnderflowState: ":state(range-underflow)" | "[state--range-underflow]";
+/**
+ * Selector for the `required` state.
+ * @public
+ */
+export declare const requiredState: ":state(required)" | "[state--required]";
 /**
  * Selector for the `selected` state.
  * @public

package/dist/esm/styles/states/index.js

@@ -88,6 +88,11 @@ export const rangeOverflowState = stateSelector('range-overflow');
  * @public
  */
 export const rangeUnderflowState = stateSelector('range-underflow');
+/**
+ * Selector for the `required` state.
+ * @public
+ */
+export const requiredState = stateSelector('required');
 /**
  * Selector for the `selected` state.
  * @public

package/dist/esm/styles/states/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/styles/states/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;AAEnD;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;AAExD;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;AAErD;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;AAE9D;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;AAE7D;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;AAEvD;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;AAE1D;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;AAE5D;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEjE;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;AAEvD;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;AAE/C;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAC;AAEtE;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,mBAAmB,CAAC,CAAC;AAExE;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;AAErD;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;AAElE;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAEpE;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;AAEvD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;AAErD;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;AAEtD;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;AAExD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/styles/states/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;AAEnD;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;AAExD;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;AAErD;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;AAE9D;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;AAE7D;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;AAEvD;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;AAE1D;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;AAE5D;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEjE;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;AAEvD;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;AAE/C;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAC;AAEtE;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,mBAAmB,CAAC,CAAC;AAExE;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;AAErD;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;AAElE;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAEpE;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;AAEvD;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;AAEvD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;AAErD;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;AAEtD;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;AAExD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC"}

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

@@ -8,7 +8,6 @@ export const styles = css `
   ${display('inline')}
 
   :host {
-    contain: content;
     font-family: ${fontFamilyBase};
     font-size: ${fontSizeBase300};
     line-height: ${lineHeightBase300};

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;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"}
+{"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;;;mBAGF,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/web-components.d.ts

@@ -1336,6 +1336,14 @@ export declare class BaseCheckbox extends FASTElement {
      * @internal
      */
     protected initialValueChanged(prev: string, next: string): void;
+    /**
+     * Tracks whether the space key was pressed down while the checkbox was focused.
+     * This is used to prevent inadvertently checking a required, unchecked checkbox when the space key is pressed on a
+     * submit button and field validation is triggered.
+     *
+     * @internal
+     */
+    private _keydownPressed;
     /**
      * The name of the element. This element's value will be surfaced during form submission under the provided name.
      *
@@ -1467,7 +1475,8 @@ export declare class BaseCheckbox extends FASTElement {
      */
     inputHandler(e: InputEvent): boolean | void;
     /**
-     * Prevents scrolling when the user presses the space key.
+     * Prevents scrolling when the user presses the space key, and sets a flag to indicate that the space key was pressed
+     * down while the checkbox was focused.
      *
      * @param e - the event object
      * @internal
@@ -2140,6 +2149,8 @@ export declare class BaseField extends FASTElement {
      */
     clickHandler(e: MouseEvent): boolean | void;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
      *
@@ -2183,6 +2194,8 @@ export declare class BaseField extends FASTElement {
  * @public
  */
 export declare class BaseProgressBar extends FASTElement {
+    /** @internal */
+    indicator: HTMLElement;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -2240,12 +2253,9 @@ export declare class BaseProgressBar extends FASTElement {
      * @internal
      */
     protected maxChanged(prev: number | undefined, next: number | undefined): void;
-    /**
-     * Indicates progress in %
-     * @internal
-     */
-    get percentComplete(): number;
     constructor();
+    connectedCallback(): void;
+    private setIndicatorWidth;
 }
 
 /**

package/dist/web-components.js

@@ -5961,7 +5961,7 @@ class BaseButton extends FASTElement {
     if (!this.elementInternals.form || this.disabled || this.type !== ButtonType.submit) {
       return;
     }
-    if (!this.name && !this.formAction && !this.formEnctype && !this.form && !this.formMethod && !this.formNoValidate && !this.formTarget) {
+    if (!this.name && !this.formAction && !this.formEnctype && !this.formAttribute && !this.formMethod && !this.formNoValidate && !this.formTarget) {
       this.elementInternals.form.requestSubmit();
       return;
     }
@@ -6069,6 +6069,14 @@ class BaseCheckbox extends FASTElement {
   constructor() {
     super(...arguments);
     this.initialValue = "on";
+    /**
+     * Tracks whether the space key was pressed down while the checkbox was focused.
+     * This is used to prevent inadvertently checking a required, unchecked checkbox when the space key is pressed on a
+     * submit button and field validation is triggered.
+     *
+     * @internal
+     */
+    this._keydownPressed = false;
     /**
      * Indicates that the checked state has been changed by the user.
      *
@@ -6287,7 +6295,8 @@ class BaseCheckbox extends FASTElement {
     return true;
   }
   /**
-   * Prevents scrolling when the user presses the space key.
+   * Prevents scrolling when the user presses the space key, and sets a flag to indicate that the space key was pressed
+   * down while the checkbox was focused.
    *
    * @param e - the event object
    * @internal
@@ -6296,6 +6305,7 @@ class BaseCheckbox extends FASTElement {
     if (e.key !== " ") {
       return true;
     }
+    this._keydownPressed = true;
   }
   /**
    * Toggles the checked state when the user releases the space key.
@@ -6304,9 +6314,10 @@ class BaseCheckbox extends FASTElement {
    * @internal
    */
   keyupHandler(e) {
-    if (e.key !== " ") {
+    if (!this._keydownPressed || e.key !== " ") {
       return true;
     }
+    this._keydownPressed = false;
     this.click();
   }
   /**
@@ -6481,7 +6492,7 @@ const disabledState = stateSelector("disabled");
 stateSelector("error");
 const flipBlockState = stateSelector("flip-block");
 const focusVisibleState = stateSelector("focus-visible");
-const hasMessageState = stateSelector("has-message");
+stateSelector("has-message");
 const indeterminateState = stateSelector("indeterminate");
 const multipleState = stateSelector("multiple");
 const openState = stateSelector("open");
@@ -6490,6 +6501,7 @@ const placeholderShownState = stateSelector("placeholder-shown");
 const pressedState = stateSelector("pressed");
 const rangeOverflowState = stateSelector("range-overflow");
 const rangeUnderflowState = stateSelector("range-underflow");
+const requiredState = stateSelector("required");
 const selectedState = stateSelector("selected");
 const stepMismatchState = stateSelector("step-mismatch");
 const submenuState = stateSelector("submenu");
@@ -7209,6 +7221,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     if (next) {
       next.dropdown = this;
       next.popover = "manual";
+      next.tabIndex = -1;
       this.listboxSlot.assign(next);
       const notifier = Observable.getNotifier(this);
       notifier.subscribe(next);
@@ -7895,15 +7908,6 @@ class BaseField extends FASTElement {
    */
   messageSlotChanged(prev, next) {
     toggleState(this.elementInternals, "has-message", !!next.length);
-    if (!next.length) {
-      this.removeEventListener("invalid", this.invalidHandler, {
-        capture: true
-      });
-      return;
-    }
-    this.addEventListener("invalid", this.invalidHandler, {
-      capture: true
-    });
   }
   /**
    * Sets the `input` property to the first slotted input.
@@ -7953,6 +7957,18 @@ class BaseField extends FASTElement {
     }
     return true;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("invalid", this.invalidHandler, {
+      capture: true
+    });
+  }
+  disconnectedCallback() {
+    this.removeEventListener("invalid", this.invalidHandler, {
+      capture: true
+    });
+    super.disconnectedCallback();
+  }
   /**
    * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
    *
@@ -8053,7 +8069,7 @@ __decorateClass$w([attr({
 const styles$r = css`
   ${display("inline-grid")}
 
-  :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start;position:relative}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host([label-position='below']:not(${hasMessageState})){grid-template-areas:'input' 'label'}::slotted([slot='label'])::after{content:'';display:block;position:absolute;inset:0}::slotted([slot='input']){grid-area:input;position:relative;z-index:1}::slotted([slot='message']){margin-block-start:${spacingVerticalXXS};grid-area:message}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;line-height:${lineHeightBase300};user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}){cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
+  :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start;position:relative}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host(${requiredState}) ::slotted([slot='label'])::after{content:'*' / '';color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}::slotted([slot='input']){grid-area:input;position:relative;z-index:1}::slotted([slot='message']){color:${colorNeutralForeground3};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};grid-area:message;line-height:${lineHeightBase200};margin-block-start:${spacingVerticalXXS}}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;line-height:${lineHeightBase300};justify-self:stretch;user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}){cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
 
 const template$s = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" ${children({
   property: "slottedInputs",
@@ -8142,7 +8158,7 @@ const styles$p = css`
   :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(:is([size='large'],[weight='semibold'])){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
 
 function labelTemplate() {
-  return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
+  return html`<slot></slot><span part="asterisk" class="asterisk" aria-hidden="true" ?hidden="${x => !x.required}">*</span>`;
 }
 const template$q = labelTemplate();
 
@@ -9595,6 +9611,7 @@ class BaseProgressBar extends FASTElement {
    */
   valueChanged(prev, next) {
     this.elementInternals.ariaValueNow = typeof next === "number" ? `${next}` : null;
+    this.setIndicatorWidth();
   }
   /**
    * Updates the percent complete when the `min` property changes.
@@ -9604,6 +9621,7 @@ class BaseProgressBar extends FASTElement {
    */
   minChanged(prev, next) {
     this.elementInternals.ariaValueMin = typeof next === "number" ? `${next}` : null;
+    this.setIndicatorWidth();
   }
   /**
    * Updates the percent complete when the `max` property changes.
@@ -9614,15 +9632,29 @@ class BaseProgressBar extends FASTElement {
    */
   maxChanged(prev, next) {
     this.elementInternals.ariaValueMax = typeof next === "number" ? `${next}` : null;
+    this.setIndicatorWidth();
   }
-  get percentComplete() {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setIndicatorWidth();
+  }
+  setIndicatorWidth() {
+    if (!this.$fastController.isConnected || CSS.supports("width: attr(value type(<number>))")) {
+      return;
+    }
+    if (Number.isNaN(this.value)) {
+      this.indicator.style.removeProperty("width");
+      return;
+    }
     const min = this.min ?? 0;
     const max = this.max ?? 100;
     const value = this.value ?? 0;
     const range = max - min;
-    return range === 0 ? 0 : Math.fround((value - min) / range * 100);
+    const width = range === 0 ? 0 : Math.fround((value - min) / range * 100);
+    this.indicator.style.setProperty("width", `${width}%`);
   }
 }
+__decorateClass$m([observable], BaseProgressBar.prototype, "indicator", 2);
 __decorateClass$m([attr({
   attribute: "validation-state"
 })], BaseProgressBar.prototype, "validationState", 2);
@@ -9635,7 +9667,6 @@ __decorateClass$m([attr({
 __decorateClass$m([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "max", 2);
-__decorateClass$m([volatile], BaseProgressBar.prototype, "percentComplete", 1);
 
 var __defProp$l = Object.defineProperty;
 var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
@@ -9652,13 +9683,13 @@ __decorateClass$l([attr], ProgressBar.prototype, "shape", 2);
 const styles$h = css`
   ${display("block")}
 
-  :host{width:100%;height:2px;overflow-x:hidden;background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};contain:content}:host([thickness='large']){height:4px}:host([shape='square']){border-radius:${borderRadiusNone}}.indicator{background-color:${colorCompoundBrandBackground};border-radius:inherit;height:100%}:host([value]) .indicator{transition:all 0.2s ease-in-out}:host(:not([value])) .indicator{position:relative;width:33%;background-image:linear-gradient(
+  :host{width:100%;height:2px;overflow-x:hidden;background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};contain:content;@supports (width:attr(value type(<number>))){--max:attr(max type(<number>),100);--min:attr(min type(<number>),0);--value:attr(value type(<number>),0);--indicator-width:clamp(0%,calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%),100%)}}:host([thickness='large']){height:4px}:host([shape='square']){border-radius:${borderRadiusNone}}.indicator{background-color:${colorCompoundBrandBackground};border-radius:inherit;height:100%}:host([value]) .indicator{transition:all 0.2s ease-in-out;@supports (width:attr(value type(<number>))){width:var(--indicator-width)}}:host(:not([value])) .indicator{position:relative;width:33%;background-image:linear-gradient(
       to right,${colorNeutralBackground6} 0%,${colorTransparentBackground} 50%,${colorNeutralBackground6} 100%
     );animation-name:indeterminate;animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite}:host([validation-state='error']) .indicator{background-color:${colorPaletteRedBackground3}}:host([validation-state='warning']) .indicator{background-color:${colorPaletteDarkOrangeBackground3}}:host([validation-state='success']) .indicator{background-color:${colorPaletteGreenBackground3}}@layer animations{@media (prefers-reduced-motion:no-preference){:host([value]){transition:none}:host(:not([value])) .indicator{animation-duration:0.01ms;animation-iteration-count:1}}}@keyframes indeterminate{0%{inset-inline-start:-33%}100%{inset-inline-start:100%}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{background-color:CanvasText}.indicator,:host(:is([validation-state='success'],[validation-state='warning'],[validation-state='error'])) .indicator{background-color:Highlight}`));
 
 function progressTemplate() {
-  return html`<div class="indicator" part="indicator" style="${x => typeof x.value === "number" ? `width: ${x.percentComplete}%` : void 0}"></div>`;
+  return html`<div class="indicator" part="indicator" ${ref("indicator")}></div>`;
 }
 const template$h = progressTemplate();
 
@@ -10206,7 +10237,7 @@ __decorateClass$k([attr({
 const styles$g = css`
   ${display("flex")}
 
-  :host{-webkit-tap-highlight-color:transparent;cursor:pointer;gap:${spacingVerticalL}}:host([orientation='vertical']){flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']){flex-direction:row}::slotted(*){color:${colorNeutralForeground3}}::slotted(:hover){color:${colorNeutralForeground2}}::slotted(:active){color:${colorNeutralForeground1}}::slotted(${disabledState}){color:${colorNeutralForegroundDisabled}}::slotted(${checkedState}){color:${colorNeutralForeground1}}`;
+  :host{-webkit-tap-highlight-color:transparent;cursor:pointer;gap:${spacingVerticalL}}:host([orientation='vertical']){flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']){flex-direction:row}::slotted(*){color:${colorNeutralForeground3}}::slotted(:hover){color:${colorNeutralForeground2}}::slotted(:active){color:${colorNeutralForeground1}}::slotted(${disabledState}){color:${colorNeutralForegroundDisabled}}::slotted(${checkedState}){color:${colorNeutralForeground1}}:host([slot='input']){margin:${spacingVerticalS} ${spacingHorizontalS}}`;
 
 function radioGroupTemplate() {
   return html`<template @disabled="${(x, c) => x.disabledRadioHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
@@ -12965,7 +12996,7 @@ __decorateClass$6([attr], Text.prototype, "align", 2);
 const styles$4 = css`
   ${display("inline")}
 
-  :host{contain:content;font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start}:host([nowrap]),:host([nowrap]) ::slotted(*){white-space:nowrap;overflow:hidden}:host([truncate]),:host([truncate]) ::slotted(*){text-overflow:ellipsis}:host([block]){display:block}:host([italic]){font-style:italic}:host([underline]){text-decoration-line:underline}:host([strikethrough]){text-decoration-line:line-through}:host([underline][strikethrough]){text-decoration-line:line-through underline}:host([size='100']){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']){font-family:${fontFamilyMonospace}}:host([font='numeric']){font-family:${fontFamilyNumeric}}:host([weight='medium']){font-weight:${fontWeightMedium}}:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([weight='bold']){font-weight:${fontWeightBold}}:host([align='center']){text-align:center}:host([align='end']){text-align:end}:host([align='justify']){text-align:justify}::slotted(*){font:inherit;line-height:inherit;text-decoration-line:inherit;text-align:inherit;text-decoration-line:inherit;margin:0}`;
+  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start}:host([nowrap]),:host([nowrap]) ::slotted(*){white-space:nowrap;overflow:hidden}:host([truncate]),:host([truncate]) ::slotted(*){text-overflow:ellipsis}:host([block]){display:block}:host([italic]){font-style:italic}:host([underline]){text-decoration-line:underline}:host([strikethrough]){text-decoration-line:line-through}:host([underline][strikethrough]){text-decoration-line:line-through underline}:host([size='100']){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']){font-family:${fontFamilyMonospace}}:host([font='numeric']){font-family:${fontFamilyNumeric}}:host([weight='medium']){font-weight:${fontWeightMedium}}:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([weight='bold']){font-weight:${fontWeightBold}}:host([align='center']){text-align:center}:host([align='end']){text-align:end}:host([align='justify']){text-align:justify}::slotted(*){font:inherit;line-height:inherit;text-decoration-line:inherit;text-align:inherit;text-decoration-line:inherit;margin:0}`;
 
 const template$4 = html`<slot></slot>`;