@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.31

package/dist/esm/option/option.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.definition-async.js","sourceRoot":"","sources":["../../../src/option/option.definition-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAqC,MAAM,wCAAwC,CAAC;AAChH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiC;IACjE,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,QAAQ,EAAE,mBAAmB,EAAE;CAChC,CAAC"}

package/dist/esm/option/option.definition.d.ts

@@ -1,9 +1,7 @@
-import { DropdownOption } from './option.js';
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
 /**
- * The Fluent Option Element.
+ * The definition for the `<fluent-option>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-option>`
  */
-export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof DropdownOption>;
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/option/option.definition.js

@@ -1,17 +1,16 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
-import { DropdownOption } from './option.js';
+import { tagName } from './option.options.js';
 import { styles } from './option.styles.js';
 import { template } from './option.template.js';
 /**
- * The Fluent Option Element.
+ * The definition for the `<fluent-option>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-option>`
  */
-export const definition = DropdownOption.compose({
-    name: `${FluentDesignSystem.prefix}-option`,
-    template,
+export const definition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
     styles,
-});
+    template,
+};
 //# sourceMappingURL=option.definition.js.map

package/dist/esm/option/option.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.definition.js","sourceRoot":"","sources":["../../../src/option/option.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC;IAC/C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"option.definition.js","sourceRoot":"","sources":["../../../src/option/option.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,MAAM;IACN,QAAQ;CACT,CAAC"}

package/dist/esm/option/option.js

@@ -9,8 +9,11 @@ import { uniqueId } from '../utils/unique-id.js';
  * @tag fluent-dropdown-option
  *
  * @slot - The default slot for the option's content.
+ * @slot start - Optional content shown at the start of the option.
  * @slot checked-indicator - The checked indicator.
  * @slot description - Optional description content.
+ * @csspart content - The wrapper for the option content.
+ * @csspart description - The wrapper for the option description.
  *
  * @remarks
  * To support single and multiple selection modes with the {@link (BaseDropdown:class)} element, the Option element
@@ -140,7 +143,7 @@ export class DropdownOption extends FASTElement {
     set selected(next) {
         this.currentSelected = next;
         Updates.enqueue(() => {
-            if (this.$fastController.isConnected) {
+            if (this.elementInternals) {
                 this.setFormValue(next ? this.value : null);
                 this.elementInternals.ariaSelected = next ? 'true' : 'false';
                 toggleState(this.elementInternals, 'selected', next);

package/dist/esm/option/option.js.map

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

package/dist/esm/option/option.options.d.ts

@@ -18,3 +18,9 @@ export declare function isDropdownOption(value: Node | null, tagName?: string):
 export type DropdownOptionOptions = StartOptions<DropdownOption> & {
     checkedIndicator?: StaticallyComposableHTML<DropdownOption>;
 };
+/**
+ * The tag name for the option element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-option";

package/dist/esm/option/option.options.js

@@ -1,3 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 /**
  * Predicate function that determines if the element should be considered an option.
  *
@@ -12,4 +13,10 @@ export function isDropdownOption(value, tagName = '-option') {
     }
     return value.tagName.toLowerCase().endsWith(tagName);
 }
+/**
+ * The tag name for the option element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-option`;
 //# sourceMappingURL=option.options.js.map

package/dist/esm/option/option.options.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.options.js","sourceRoot":"","sources":["../../../src/option/option.options.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAkB,EAAE,UAAkB,SAAS;IAC9E,IAAI,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC1C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAQ,KAAiB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACpE,CAAC"}
+{"version":3,"file":"option.options.js","sourceRoot":"","sources":["../../../src/option/option.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAKhE;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAkB,EAAE,UAAkB,SAAS;IAC9E,IAAI,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC1C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAQ,KAAiB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACpE,CAAC;AAWD;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,SAAkB,CAAC"}

package/dist/esm/option/option.styles.css

@@ -0,0 +1,134 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-grid;
+}
+
+:host {
+  -webkit-tap-highlight-color: transparent;
+
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  line-height: var(--lineHeightBase300);
+  font-weight: var(--fontWeightRegular);
+
+  align-items: center;
+  background-color: var(--colorNeutralBackground1);
+  border-radius: var(--borderRadiusMedium);
+  box-sizing: border-box;
+  color: var(--colorNeutralForeground2);
+  column-gap: var(--spacingHorizontalXS);
+  cursor: pointer;
+  grid-template-areas: 'indicator start content';
+  grid-template-columns: auto auto 1fr;
+  min-height: 32px;
+  padding: var(--spacingHorizontalSNudge);
+  text-align: start;
+}
+
+.content {
+  grid-area: content;
+  line-height: 1;
+}
+
+::slotted([slot='start']) {
+  grid-area: start;
+}
+
+:host(:hover) {
+  background-color: var(--colorNeutralBackground1Hover);
+  color: var(--colorNeutralForeground2Hover);
+}
+
+:host(:active) {
+  background-color: var(--colorNeutralBackground1Pressed);
+  color: var(--colorNeutralForeground2Pressed);
+}
+
+:host(:disabled) {
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForegroundDisabled);
+  cursor: default;
+}
+
+.checkmark-16-filled {
+  fill: currentColor;
+  width: 16px;
+}
+
+slot[name='checked-indicator'] > *,
+::slotted([slot='checked-indicator']) {
+  aspect-ratio: 1;
+  flex: 0 0 auto;
+  grid-area: indicator;
+  visibility: hidden;
+}
+
+:host(:state(selected)) :is(slot[name='checked-indicator'] > *, ::slotted([slot='checked-indicator'])) {
+  visibility: visible;
+}
+
+:host(:state(multiple)) .checkmark-16-filled,
+:host(:not(:state(multiple))) .checkmark-12-regular {
+  display: none;
+}
+
+:host(:state(multiple)) .checkmark-12-regular {
+  background-color: var(--colorNeutralBackground1);
+  border-radius: var(--borderRadiusSmall);
+  border: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
+  box-sizing: border-box;
+  cursor: pointer;
+  fill: transparent;
+  position: relative;
+  visibility: visible;
+  width: 16px;
+}
+
+:host(:state(multiple):state(selected)) .checkmark-12-regular {
+  background-color: var(--colorCompoundBrandBackground);
+  border-color: var(--colorCompoundBrandStroke);
+  fill: var(--colorNeutralForegroundInverted);
+}
+
+:host(:disabled:state(multiple)) .checkmark-12-regular {
+  border-color: var(--colorNeutralStrokeDisabled);
+}
+
+:host(:disabled:state(multiple):state(selected)) .checkmark-12-regular {
+  background-color: var(--colorNeutralBackgroundDisabled);
+}
+
+:host(:state(active)) {
+  border: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
+}
+
+@supports (selector(:host(:has(*)))) {
+  :host(:has([slot='start']:not([size='16']))) {
+    column-gap: var(--spacingHorizontalSNudge);
+  }
+}
+
+:host(:state(description)) {
+  column-gap: var(--spacingHorizontalSNudge);
+  grid-template-areas:
+    'indicator start content'
+    'indicator start description';
+}
+
+::slotted([slot='description']) {
+  color: var(--colorNeutralForeground3);
+  grid-area: description;
+
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  font-weight: var(--fontWeightRegular);
+}
+
+@media (forced-colors: active) {
+  :host(:disabled) {
+    color: GrayText;
+  }
+}

package/dist/esm/option/option.template.html

@@ -0,0 +1,24 @@
+<f-template name="fluent-option" shadowrootmode="open">
+  <template>
+    {{styles}}
+    <slot name="checked-indicator">
+      <svg aria-hidden="true" class="checkmark-16-filled" viewBox="0 0 16 16">
+        <path
+          d="M14.046 3.486a.75.75 0 0 1-.032 1.06l-7.93 7.474a.85.85 0 0 1-1.188-.022l-2.68-2.72a.75.75 0 1 1 1.068-1.053l2.234 2.267l7.468-7.038a.75.75 0 0 1 1.06.032"
+        />
+      </svg>
+      <svg aria-hidden="true" class="checkmark-12-regular" viewBox="0 0 12 12">
+        <path
+          d="M9.854 3.146a.5.5 0 0 1 0 .708l-4.5 4.5a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L5 7.293l4.146-4.147a.5.5 0 0 1 .708 0"
+        />
+      </svg>
+    </slot>
+    <slot name="start" f-ref="{start}"></slot>
+    <div class="content" part="content">
+      <slot f-slotted="{freeformOutputs filter elements(output)}"></slot>
+    </div>
+    <div class="description" part="description">
+      <slot name="description" f-slotted="{descriptionSlot}"></slot>
+    </div>
+  </template>
+</f-template>

package/dist/esm/patterns/start-end.d.ts

@@ -1,5 +1,5 @@
 import { type CaptureType } from '@microsoft/fast-element';
-import type { StaticallyComposableHTML } from '../utils/index.js';
+import { type StaticallyComposableHTML } from '../utils/template-helpers.js';
 /**
  * Start configuration options
  * @public

package/dist/esm/patterns/start-end.js

@@ -1,6 +1,6 @@
 //Copied from @microsoft/fast-foundation
 import { html, ref } from '@microsoft/fast-element';
-import { staticallyCompose } from '../utils/index.js';
+import { staticallyCompose } from '../utils/template-helpers.js';
 /**
  * A mixin class implementing start slots.
  * @public

package/dist/esm/patterns/start-end.js.map

@@ -1 +1 @@
-{"version":3,"file":"start-end.js","sourceRoot":"","sources":["../../../src/patterns/start-end.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,OAAO,EAAoB,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAyBtD;;;GAGG;AACH,MAAM,OAAO,KAAK;CAEjB;AAED;;;GAGG;AACH,MAAM,OAAO,GAAG;CAEf;AAED;;;;GAIG;AACH,MAAM,OAAO,QAAQ;CAGpB;AAED;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAC7B,OAAqC;IAErC,OAAO,IAAI,CAAA,qBAAqB,GAAG,CAAC,KAAK,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AAClG,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAC/B,OAAuC;IAEvC,OAAO,IAAI,CAAA,uBAAuB,GAAG,CAAC,OAAO,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AACxG,CAAC"}
+{"version":3,"file":"start-end.js","sourceRoot":"","sources":["../../../src/patterns/start-end.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,OAAO,EAAoB,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAiC,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAyBhG;;;GAGG;AACH,MAAM,OAAO,KAAK;CAEjB;AAED;;;GAGG;AACH,MAAM,OAAO,GAAG;CAEf;AAED;;;;GAIG;AACH,MAAM,OAAO,QAAQ;CAGpB;AAED;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAC7B,OAAqC;IAErC,OAAO,IAAI,CAAA,qBAAqB,GAAG,CAAC,KAAK,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AAClG,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAC/B,OAAuC;IAEvC,OAAO,IAAI,CAAA,uBAAuB,GAAG,CAAC,OAAO,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AACxG,CAAC"}

package/dist/esm/progress-bar/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/progress-bar/define-async.js

@@ -0,0 +1,4 @@
+import { declarativeDefinition } from './progress-bar.definition-async.js';
+import { ProgressBar } from './progress-bar.js';
+ProgressBar.define(declarativeDefinition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/progress-bar/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/progress-bar/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,WAAW,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/esm/progress-bar/define.js

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
 import { definition } from './progress-bar.definition.js';
-definition.define(FluentDesignSystem.registry);
+import { ProgressBar } from './progress-bar.js';
+ProgressBar.define(definition);
 //# sourceMappingURL=define.js.map

package/dist/esm/progress-bar/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/progress-bar/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE1D,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/progress-bar/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/progress-bar/index.d.ts

@@ -4,3 +4,4 @@ export { ProgressBar } from './progress-bar.js';
 export { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 export { styles as ProgressBarStyles } from './progress-bar.styles.js';
 export { template as ProgressBarTemplate } from './progress-bar.template.js';
+export { tagName as ProgressBarTagName } from './progress-bar.options.js';

package/dist/esm/progress-bar/index.js

@@ -4,4 +4,5 @@ export { ProgressBar } from './progress-bar.js';
 export { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 export { styles as ProgressBarStyles } from './progress-bar.styles.js';
 export { template as ProgressBarTemplate } from './progress-bar.template.js';
+export { tagName as ProgressBarTagName } from './progress-bar.options.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/progress-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAC/G,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAC/G,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/esm/progress-bar/progress-bar.base.d.ts

@@ -7,8 +7,17 @@ import { ProgressBarValidationState } from './progress-bar.options.js';
  * @public
  */
 export declare class BaseProgressBar extends FASTElement {
-    /** @internal */
-    indicator: HTMLElement;
+    /**
+     * Reference to the indicator element which visually represents the progress.
+     *
+     * @internal
+     */
+    indicator?: HTMLElement;
+    /**
+     * Updates the indicator width after the element is connected to the DOM via the template.
+     * @internal
+     */
+    protected indicatorChanged(): void;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -17,8 +26,11 @@ export declare class BaseProgressBar extends FASTElement {
     elementInternals: ElementInternals;
     /**
      * The validation state of the progress bar
-     * @public
+     * The validation state of the progress bar
+     *
      * HTML Attribute: `validation-state`
+     *
+     * @public
      */
     validationState: ProgressBarValidationState | null;
     /**
@@ -29,8 +41,11 @@ export declare class BaseProgressBar extends FASTElement {
     validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
     /**
      * The value of the progress
-     * @internal
+     * The value of the progress
+     *
      * HTML Attribute: `value`
+     *
+     * @public
      */
     value?: number;
     /**
@@ -41,8 +56,11 @@ export declare class BaseProgressBar extends FASTElement {
     protected valueChanged(prev: number | undefined, next: number | undefined): void;
     /**
      * The minimum value
-     * @internal
+     * The minimum value
+     *
      * HTML Attribute: `min`
+     *
+     * @public
      */
     min?: number;
     /**
@@ -54,8 +72,11 @@ export declare class BaseProgressBar extends FASTElement {
     protected minChanged(prev: number | undefined, next: number | undefined): void;
     /**
      * The maximum value
-     * @internal
+     * The maximum value
+     *
      * HTML Attribute: `max`
+     *
+     * @public
      */
     max?: number;
     /**
@@ -67,6 +88,12 @@ export declare class BaseProgressBar extends FASTElement {
      */
     protected maxChanged(prev: number | undefined, next: number | undefined): void;
     constructor();
-    connectedCallback(): void;
-    private setIndicatorWidth;
+    /**
+     * Sets the width of the indicator element based on the value, min, and max
+     * properties. If the browser supports `width: attr(value)`, this method does
+     * nothing and allows CSS to handle the width.
+     *
+     * @internal
+     */
+    protected setIndicatorWidth(): void;
 }

package/dist/esm/progress-bar/progress-bar.base.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
+import { attr, FASTElement, nullableNumberConverter, observable, Updates } from '@microsoft/fast-element';
 import { swapStates } from '../utils/element-internals.js';
 import { ProgressBarValidationState } from './progress-bar.options.js';
 /**
@@ -9,6 +9,13 @@ import { ProgressBarValidationState } from './progress-bar.options.js';
  * @public
  */
 export class BaseProgressBar extends FASTElement {
+    /**
+     * Updates the indicator width after the element is connected to the DOM via the template.
+     * @internal
+     */
+    indicatorChanged() {
+        this.setIndicatorWidth();
+    }
     /**
      * Handles changes to validation-state attribute custom states
      * @param prev - the previous state
@@ -23,7 +30,9 @@ export class BaseProgressBar extends FASTElement {
      * @internal
      */
     valueChanged(prev, next) {
-        this.elementInternals.ariaValueNow = typeof next === 'number' ? `${next}` : null;
+        if (this.elementInternals) {
+            this.elementInternals.ariaValueNow = typeof next === 'number' ? `${next}` : null;
+        }
         this.setIndicatorWidth();
     }
     /**
@@ -33,7 +42,9 @@ export class BaseProgressBar extends FASTElement {
      * @param next - The current min value
      */
     minChanged(prev, next) {
-        this.elementInternals.ariaValueMin = typeof next === 'number' ? `${next}` : null;
+        if (this.elementInternals) {
+            this.elementInternals.ariaValueMin = typeof next === 'number' ? `${next}` : null;
+        }
         this.setIndicatorWidth();
     }
     /**
@@ -44,7 +55,9 @@ export class BaseProgressBar extends FASTElement {
      * @internal
      */
     maxChanged(prev, next) {
-        this.elementInternals.ariaValueMax = typeof next === 'number' ? `${next}` : null;
+        if (this.elementInternals) {
+            this.elementInternals.ariaValueMax = typeof next === 'number' ? `${next}` : null;
+        }
         this.setIndicatorWidth();
     }
     constructor() {
@@ -57,30 +70,38 @@ export class BaseProgressBar extends FASTElement {
         this.elementInternals = this.attachInternals();
         /**
          * The validation state of the progress bar
-         * @public
+         * The validation state of the progress bar
+         *
          * HTML Attribute: `validation-state`
+         *
+         * @public
          */
         this.validationState = null;
         this.elementInternals.role = 'progressbar';
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setIndicatorWidth();
-    }
+    /**
+     * Sets the width of the indicator element based on the value, min, and max
+     * properties. If the browser supports `width: attr(value)`, this method does
+     * nothing and allows CSS to handle the width.
+     *
+     * @internal
+     */
     setIndicatorWidth() {
-        if (!this.$fastController.isConnected || CSS.supports('width: attr(value type(<number>))')) {
-            return;
-        }
-        if (typeof this.value !== 'number') {
-            this.indicator.style.removeProperty('width');
+        if (CSS.supports('width: attr(value type(<number>))')) {
             return;
         }
-        const min = this.min ?? 0;
-        const max = this.max ?? 100;
-        const value = this.value ?? 0;
-        const range = max - min;
-        const width = range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
-        this.indicator.style.setProperty('width', `${width}%`);
+        Updates.enqueue(() => {
+            if (typeof this.value !== 'number') {
+                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;
+            const width = range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
+            this.indicator?.style.setProperty('width', `${width}%`);
+        });
     }
 }
 __decorate([

package/dist/esm/progress-bar/progress-bar.base.js.map

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

package/dist/esm/progress-bar/progress-bar.bench.d.ts

@@ -1,3 +1,4 @@
+import './define.js';
 declare const itemRenderer: () => HTMLElement;
 export default itemRenderer;
 export { tests } from '../utils/benchmark-wrapper.js';

package/dist/esm/progress-bar/progress-bar.bench.js

@@ -1,6 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './progress-bar.definition.js';
-definition.define(FluentDesignSystem.registry);
+import './define.js';
 const itemRenderer = () => {
     const progressBar = document.createElement('fluent-progress-bar');
     return progressBar;

package/dist/esm/progress-bar/progress-bar.bench.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.bench.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE1D,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAClE,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"progress-bar.bench.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.bench.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAClE,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/progress-bar/progress-bar.d.ts

@@ -5,6 +5,7 @@ import type { ProgressBarShape, ProgressBarThickness } from './progress-bar.opti
  * Based on BaseProgressBar and includes style and layout specific attributes
  *
  * @tag fluent-progress-bar
+ * @csspart indicator - The internal progress indicator element.
  *
  * @public
  */
@@ -12,14 +13,20 @@ export declare class ProgressBar extends BaseProgressBar {
     /**
      * The thickness of the progress bar
      *
-     * @public
+     * The thickness of the progress bar
+     *
      * HTML Attribute: `thickness`
+     *
+     * @public
      */
     thickness?: ProgressBarThickness;
     /**
      * The shape of the progress bar
-     * @public
+     * The shape of the progress bar
+     *
      * HTML Attribute: `shape`
+     *
+     * @public
      */
     shape?: ProgressBarShape;
 }

package/dist/esm/progress-bar/progress-bar.definition-async.d.ts

@@ -0,0 +1,10 @@
+import { type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+/**
+ * The async definition configuration for the `<fluent-progress-bar>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const declarativeDefinition: PartialFASTElementDefinition;