@fluentui/react-progress 9.4.15 → 9.4.17

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-progress
 
-This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
+This log was last generated on Mon, 30 Mar 2026 14:35:49 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.4.17)
+
+Mon, 30 Mar 2026 14:35:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.4.16..@fluentui/react-progress_v9.4.17)
+
+### Patches
+
+- refactor: migrate ProgressBar from CSS to motion components ([PR #35883](https://github.com/microsoft/fluentui/pull/35883) by robertpenner@microsoft.com)
+- Bump @fluentui/react-motion to v9.14.0 ([PR #35907](https://github.com/microsoft/fluentui/pull/35907) by beachball)
+
+## [9.4.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.4.16)
+
+Wed, 11 Mar 2026 09:22:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.4.15..@fluentui/react-progress_v9.4.16)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
+
 ## [9.4.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.4.15)
 
-Wed, 25 Feb 2026 13:28:23 GMT 
+Wed, 25 Feb 2026 13:32:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.4.14..@fluentui/react-progress_v9.4.15)
 
 ### Patches

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
+import type { MotionSlotProps } from '@fluentui/react-motion';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -11,7 +12,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const ProgressBar: ForwardRefComponent<ProgressBarProps>;
 
-export declare const progressBarClassNames: SlotClassNames<ProgressBarSlots>;
+export declare const progressBarClassNames: SlotClassNames<Omit<ProgressBarSlots, 'indeterminateMotion'>>;
 
 /**
  * ProgressBar Props
@@ -56,6 +57,10 @@ export declare type ProgressBarSlots = {
      * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.
      */
     bar?: NonNullable<Slot<'div'>>;
+    /**
+     * Motion slot for the indeterminate animation. Pass `null` to disable the animation.
+     */
+    indeterminateMotion?: Slot<MotionSlotProps>;
 };
 
 /**

package/lib/components/ProgressBar/ProgressBar.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n  /**\n   * The track behind the ProgressBar bar\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n   */\n  bar?: NonNullable<Slot<'div'>>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n  /**\n   * The shape of the bar and track.\n   * @default rounded\n   */\n  shape?: 'rounded' | 'square';\n  /**\n   * A decimal number between `0` and `1` (or between `0` and `max` if given),\n   * which specifies how much of the task has been completed.\n   *\n   * If `undefined` (default), the ProgressBar will display an **indeterminate** state.\n   */\n  value?: number;\n  /**\n   * The maximum value, which indicates the task is complete.\n   * The ProgressBar bar will be full when `value` equals `max`.\n   * @default 1\n   */\n  max?: number;\n  /**\n   * The thickness of the ProgressBar bar\n   * @default medium\n   */\n  thickness?: 'medium' | 'large';\n\n  /**\n   * The status of the ProgressBar bar. Changes the color of the bar.\n   * @default brand\n   */\n  color?: 'brand' | 'success' | 'warning' | 'error';\n};\n\n/**\n * State used in rendering ProgressBar\n */\nexport type ProgressBarState = ComponentState<Required<ProgressBarSlots>> &\n  Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &\n  Pick<ProgressBarProps, 'value' | 'color'>;\n"],"names":[],"mappings":"AAgDA;;CAEC,GACD,WAE4C"}
+{"version":3,"sources":["../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { MotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n  /**\n   * The track behind the ProgressBar bar\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n   */\n  bar?: NonNullable<Slot<'div'>>;\n  /**\n   * Motion slot for the indeterminate animation. Pass `null` to disable the animation.\n   */\n  indeterminateMotion?: Slot<MotionSlotProps>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n  /**\n   * The shape of the bar and track.\n   * @default rounded\n   */\n  shape?: 'rounded' | 'square';\n  /**\n   * A decimal number between `0` and `1` (or between `0` and `max` if given),\n   * which specifies how much of the task has been completed.\n   *\n   * If `undefined` (default), the ProgressBar will display an **indeterminate** state.\n   */\n  value?: number;\n  /**\n   * The maximum value, which indicates the task is complete.\n   * The ProgressBar bar will be full when `value` equals `max`.\n   * @default 1\n   */\n  max?: number;\n  /**\n   * The thickness of the ProgressBar bar\n   * @default medium\n   */\n  thickness?: 'medium' | 'large';\n\n  /**\n   * The status of the ProgressBar bar. Changes the color of the bar.\n   * @default brand\n   */\n  color?: 'brand' | 'success' | 'warning' | 'error';\n};\n\n/**\n * State used in rendering ProgressBar\n */\nexport type ProgressBarState = ComponentState<Required<ProgressBarSlots>> &\n  Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &\n  Pick<ProgressBarProps, 'value' | 'color'>;\n"],"names":[],"mappings":"AAqDA;;CAEC,GACD,WAE4C"}

package/lib/components/ProgressBar/progressBarMotions.js

@@ -0,0 +1,37 @@
+import { createMotionComponent, motionTokens } from '@fluentui/react-motion';
+/**
+ * Motion component for the indeterminate ProgressBar bar:
+ * a horizontal sliding animation that loops indefinitely.
+ * In reduced motion mode, the bar pulses opacity instead of sliding.
+ */ export const ProgressBarIndeterminateMotion = createMotionComponent({
+    // translate percentages are relative to the element's own width, not the container's.
+    // The indeterminate bar is ~33% the width of its container, so:
+    //   translate: '-100%' === left: '-33%' (one bar-width off-screen to the left)
+    //   translate: '300%'  === left: '100%' (3 × bar-width ≈ full container width, off-screen to the right)
+    keyframes: [
+        {
+            translate: '-100%'
+        },
+        {
+            translate: '300%'
+        }
+    ],
+    duration: 3000,
+    iterations: Infinity,
+    easing: motionTokens.curveLinear,
+    reducedMotion: {
+        keyframes: [
+            {
+                opacity: 0.2
+            },
+            {
+                opacity: 1
+            },
+            {
+                opacity: 0.2
+            }
+        ],
+        duration: 3000,
+        iterations: Infinity
+    }
+});

package/lib/components/ProgressBar/progressBarMotions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ProgressBar/progressBarMotions.ts"],"sourcesContent":["import { createMotionComponent, motionTokens } from '@fluentui/react-motion';\n\n/**\n * Motion component for the indeterminate ProgressBar bar:\n * a horizontal sliding animation that loops indefinitely.\n * In reduced motion mode, the bar pulses opacity instead of sliding.\n */\nexport const ProgressBarIndeterminateMotion = createMotionComponent({\n  // translate percentages are relative to the element's own width, not the container's.\n  // The indeterminate bar is ~33% the width of its container, so:\n  //   translate: '-100%' === left: '-33%' (one bar-width off-screen to the left)\n  //   translate: '300%'  === left: '100%' (3 × bar-width ≈ full container width, off-screen to the right)\n  keyframes: [{ translate: '-100%' }, { translate: '300%' }],\n  duration: 3000,\n  iterations: Infinity,\n  easing: motionTokens.curveLinear,\n\n  reducedMotion: {\n    keyframes: [{ opacity: 0.2 }, { opacity: 1 }, { opacity: 0.2 }],\n    duration: 3000,\n    iterations: Infinity,\n  },\n});\n"],"names":["createMotionComponent","motionTokens","ProgressBarIndeterminateMotion","keyframes","translate","duration","iterations","Infinity","easing","curveLinear","reducedMotion","opacity"],"mappings":"AAAA,SAASA,qBAAqB,EAAEC,YAAY,QAAQ,yBAAyB;AAE7E;;;;CAIC,GACD,OAAO,MAAMC,iCAAiCF,sBAAsB;IAClE,sFAAsF;IACtF,gEAAgE;IAChE,+EAA+E;IAC/E,wGAAwG;IACxGG,WAAW;QAAC;YAAEC,WAAW;QAAQ;QAAG;YAAEA,WAAW;QAAO;KAAE;IAC1DC,UAAU;IACVC,YAAYC;IACZC,QAAQP,aAAaQ,WAAW;IAEhCC,eAAe;QACbP,WAAW;YAAC;gBAAEQ,SAAS;YAAI;YAAG;gBAAEA,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAI;SAAE;QAC/DN,UAAU;QACVC,YAAYC;IACd;AACF,GAAG"}

package/lib/components/ProgressBar/renderProgressBar.js

@@ -5,6 +5,8 @@ import { assertSlots } from '@fluentui/react-utilities';
  */ export const renderProgressBar_unstable = (state)=>{
     assertSlots(state);
     return /*#__PURE__*/ _jsx(state.root, {
-        children: state.bar && /*#__PURE__*/ _jsx(state.bar, {})
+        children: state.bar && (state.indeterminateMotion ? /*#__PURE__*/ _jsx(state.indeterminateMotion, {
+            children: /*#__PURE__*/ _jsx(state.bar, {})
+        }) : /*#__PURE__*/ _jsx(state.bar, {}))
     });
 };

package/lib/components/ProgressBar/renderProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState): JSXElement => {\n  assertSlots<ProgressBarSlots>(state);\n  return <state.root>{state.bar && <state.bar />}</state.root>;\n};\n"],"names":["assertSlots","renderProgressBar_unstable","state","root","bar"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAC9B,qBAAO,KAACA,MAAMC,IAAI;kBAAED,MAAME,GAAG,kBAAI,KAACF,MAAME,GAAG;;AAC7C,EAAE"}
+{"version":3,"sources":["../src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState): JSXElement => {\n  assertSlots<ProgressBarSlots>(state);\n  return (\n    <state.root>\n      {state.bar &&\n        (state.indeterminateMotion ? (\n          <state.indeterminateMotion>\n            <state.bar />\n          </state.indeterminateMotion>\n        ) : (\n          <state.bar />\n        ))}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderProgressBar_unstable","state","root","bar","indeterminateMotion"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAC9B,qBACE,KAACA,MAAMC,IAAI;kBACRD,MAAME,GAAG,IACPF,CAAAA,MAAMG,mBAAmB,iBACxB,KAACH,MAAMG,mBAAmB;sBACxB,cAAA,KAACH,MAAME,GAAG;2BAGZ,KAACF,MAAME,GAAG,KACZ;;AAGR,EAAE"}

package/lib/components/ProgressBar/useProgressBar.js

@@ -1,8 +1,10 @@
 'use client';
 import * as React from 'react';
 import { useFieldContext_unstable } from '@fluentui/react-field';
+import { motionSlot } from '@fluentui/react-motion';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { clampValue, clampMax } from '../../utils/index';
+import { ProgressBarIndeterminateMotion } from './progressBarMotions';
 /**
  * Create the state required to render ProgressBar.
  *
@@ -51,10 +53,15 @@ import { clampValue, clampMax } from '../../utils/index';
         value,
         components: {
             root: 'div',
-            bar: 'div'
+            bar: 'div',
+            indeterminateMotion: ProgressBarIndeterminateMotion
         },
         root,
-        bar
+        bar,
+        indeterminateMotion: value === undefined ? motionSlot(props.indeterminateMotion, {
+            elementType: ProgressBarIndeterminateMotion,
+            defaultProps: {}
+        }) : undefined
     };
     return state;
 };

package/lib/components/ProgressBar/useProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  const field = useFieldContext_unstable();\n  const fieldState = field?.validationState;\n\n  const {\n    color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand',\n    shape = 'rounded',\n    thickness = 'medium',\n  } = props;\n  const max = clampMax(props.max ?? 1);\n  const value = clampValue(props.value, max);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: ref as React.Ref<HTMLDivElement>,\n      role: 'progressbar',\n      'aria-valuemin': value !== undefined ? 0 : undefined,\n      'aria-valuemax': value !== undefined ? max : undefined,\n      'aria-valuenow': value,\n      'aria-labelledby': field?.labelId,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n  if (field && (field.validationMessageId || field.hintId)) {\n    // Prepend the field's validation message and/or hint to the user's aria-describedby\n    root['aria-describedby'] = [field?.validationMessageId, field?.hintId, root['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n  const bar = slot.always(props.bar, { elementType: 'div' });\n  const state: ProgressBarState = {\n    color,\n    max,\n    shape,\n    thickness,\n    value,\n    components: { root: 'div', bar: 'div' },\n    root,\n    bar,\n  };\n\n  return state;\n};\n"],"names":["React","useFieldContext_unstable","getIntrinsicElementProps","slot","clampValue","clampMax","useProgressBar_unstable","props","ref","field","fieldState","validationState","color","shape","thickness","max","value","root","always","role","undefined","labelId","elementType","validationMessageId","hintId","filter","Boolean","join","bar","state","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,UAAU,EAAEC,QAAQ,QAAQ,oBAAoB;AAGzD;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,QAAQR;IACd,MAAMS,aAAaD,kBAAAA,4BAAAA,MAAOE,eAAe;IAEzC,MAAM,EACJC,QAAQF,eAAe,WAAWA,eAAe,aAAaA,eAAe,YAAYA,aAAa,OAAO,EAC7GG,QAAQ,SAAS,EACjBC,YAAY,QAAQ,EACrB,GAAGP;QACiBA;IAArB,MAAMQ,MAAMV,SAASE,CAAAA,aAAAA,MAAMQ,GAAG,cAATR,wBAAAA,aAAa;IAClC,MAAMS,QAAQZ,WAAWG,MAAMS,KAAK,EAAED;IAEtC,MAAME,OAAOd,KAAKe,MAAM,CACtBhB,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FM,KAAKA;QACLW,MAAM;QACN,iBAAiBH,UAAUI,YAAY,IAAIA;QAC3C,iBAAiBJ,UAAUI,YAAYL,MAAMK;QAC7C,iBAAiBJ;QACjB,iBAAiB,EAAEP,kBAAAA,4BAAAA,MAAOY,OAAO;QACjC,GAAGd,KAAK;IACV,IACA;QAAEe,aAAa;IAAM;IAEvB,IAAIb,SAAUA,CAAAA,MAAMc,mBAAmB,IAAId,MAAMe,MAAM,AAAD,GAAI;QACxD,oFAAoF;QACpFP,IAAI,CAAC,mBAAmB,GAAG;YAACR,kBAAAA,4BAAAA,MAAOc,mBAAmB;YAAEd,kBAAAA,4BAAAA,MAAOe,MAAM;YAAEP,IAAI,CAAC,mBAAmB;SAAC,CAC7FQ,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IACA,MAAMC,MAAMzB,KAAKe,MAAM,CAACX,MAAMqB,GAAG,EAAE;QAAEN,aAAa;IAAM;IACxD,MAAMO,QAA0B;QAC9BjB;QACAG;QACAF;QACAC;QACAE;QACAc,YAAY;YAAEb,MAAM;YAAOW,KAAK;QAAM;QACtCX;QACAW;IACF;IAEA,OAAOC;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { motionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\nimport { ProgressBarIndeterminateMotion } from './progressBarMotions';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  const field = useFieldContext_unstable();\n  const fieldState = field?.validationState;\n\n  const {\n    color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand',\n    shape = 'rounded',\n    thickness = 'medium',\n  } = props;\n  const max = clampMax(props.max ?? 1);\n  const value = clampValue(props.value, max);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: ref as React.Ref<HTMLDivElement>,\n      role: 'progressbar',\n      'aria-valuemin': value !== undefined ? 0 : undefined,\n      'aria-valuemax': value !== undefined ? max : undefined,\n      'aria-valuenow': value,\n      'aria-labelledby': field?.labelId,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n  if (field && (field.validationMessageId || field.hintId)) {\n    // Prepend the field's validation message and/or hint to the user's aria-describedby\n    root['aria-describedby'] = [field?.validationMessageId, field?.hintId, root['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n  const bar = slot.always(props.bar, { elementType: 'div' });\n  const state: ProgressBarState = {\n    color,\n    max,\n    shape,\n    thickness,\n    value,\n    components: { root: 'div', bar: 'div', indeterminateMotion: ProgressBarIndeterminateMotion },\n    root,\n    bar,\n    indeterminateMotion:\n      value === undefined\n        ? motionSlot(props.indeterminateMotion, {\n            elementType: ProgressBarIndeterminateMotion,\n            defaultProps: {},\n          })\n        : undefined,\n  };\n\n  return state;\n};\n"],"names":["React","useFieldContext_unstable","motionSlot","getIntrinsicElementProps","slot","clampValue","clampMax","ProgressBarIndeterminateMotion","useProgressBar_unstable","props","ref","field","fieldState","validationState","color","shape","thickness","max","value","root","always","role","undefined","labelId","elementType","validationMessageId","hintId","filter","Boolean","join","bar","state","components","indeterminateMotion","defaultProps"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,UAAU,EAAEC,QAAQ,QAAQ,oBAAoB;AAEzD,SAASC,8BAA8B,QAAQ,uBAAuB;AAEtE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,QAAQV;IACd,MAAMW,aAAaD,kBAAAA,4BAAAA,MAAOE,eAAe;IAEzC,MAAM,EACJC,QAAQF,eAAe,WAAWA,eAAe,aAAaA,eAAe,YAAYA,aAAa,OAAO,EAC7GG,QAAQ,SAAS,EACjBC,YAAY,QAAQ,EACrB,GAAGP;QACiBA;IAArB,MAAMQ,MAAMX,SAASG,CAAAA,aAAAA,MAAMQ,GAAG,cAATR,wBAAAA,aAAa;IAClC,MAAMS,QAAQb,WAAWI,MAAMS,KAAK,EAAED;IAEtC,MAAME,OAAOf,KAAKgB,MAAM,CACtBjB,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FO,KAAKA;QACLW,MAAM;QACN,iBAAiBH,UAAUI,YAAY,IAAIA;QAC3C,iBAAiBJ,UAAUI,YAAYL,MAAMK;QAC7C,iBAAiBJ;QACjB,iBAAiB,EAAEP,kBAAAA,4BAAAA,MAAOY,OAAO;QACjC,GAAGd,KAAK;IACV,IACA;QAAEe,aAAa;IAAM;IAEvB,IAAIb,SAAUA,CAAAA,MAAMc,mBAAmB,IAAId,MAAMe,MAAM,AAAD,GAAI;QACxD,oFAAoF;QACpFP,IAAI,CAAC,mBAAmB,GAAG;YAACR,kBAAAA,4BAAAA,MAAOc,mBAAmB;YAAEd,kBAAAA,4BAAAA,MAAOe,MAAM;YAAEP,IAAI,CAAC,mBAAmB;SAAC,CAC7FQ,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IACA,MAAMC,MAAM1B,KAAKgB,MAAM,CAACX,MAAMqB,GAAG,EAAE;QAAEN,aAAa;IAAM;IACxD,MAAMO,QAA0B;QAC9BjB;QACAG;QACAF;QACAC;QACAE;QACAc,YAAY;YAAEb,MAAM;YAAOW,KAAK;YAAOG,qBAAqB1B;QAA+B;QAC3FY;QACAW;QACAG,qBACEf,UAAUI,YACNpB,WAAWO,MAAMwB,mBAAmB,EAAE;YACpCT,aAAajB;YACb2B,cAAc,CAAC;QACjB,KACAZ;IACR;IAEA,OAAOS;AACT,EAAE"}

package/lib/components/ProgressBar/useProgressBarStyles.styles.js

@@ -13,25 +13,6 @@ const barThicknessValues = {
   medium: '2px',
   large: '4px'
 };
-const indeterminateProgressBar = {
-  '0%': {
-    left: '-33%'
-  },
-  '100%': {
-    left: '100%'
-  }
-};
-const indeterminateProgressBarReducedMotion = {
-  '0%': {
-    opacity: '.2'
-  },
-  '50%': {
-    opacity: '1'
-  },
-  '100%': {
-    opacity: '.2'
-  }
-};
 /**
  * Styles for the root slot
  */
@@ -99,14 +80,7 @@ const useBarStyles = /*#__PURE__*/__styles({
     B2u0y6b: "fa0wk36",
     qhf8xq: "f10pi13n",
     Bcmaq0h: ["fpo0yib", "f1u5hf6c"],
-    Bv12yb3: ["fwd2bol", "f14gig94"],
-    vin17d: "f1a27w2r",
-    Ezkn3b: "f452v7t",
-    w3vfg9: "f1cpbl36",
-    jpy9cc: "f3z2g5w",
-    Bqo2lbl: "fz5izi4",
-    B6plc1d: "fv40pdu",
-    I82g5a: "f1uj6jbf"
+    jpy9cc: "f3z2g5w"
   },
   brand: {
     De3pzq: "ftywsgz"
@@ -125,17 +99,10 @@ const useBarStyles = /*#__PURE__*/__styles({
     m: "screen and (forced-colors: active)"
   }], ["@media screen and (prefers-reduced-motion: reduce){.f3z2g5w{max-width:100%;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
-  }], ["@media screen and (prefers-reduced-motion: reduce){.fz5izi4{animation-iteration-count:infinite;}}", {
-    m: "screen and (prefers-reduced-motion: reduce)"
-  }], ["@media screen and (prefers-reduced-motion: reduce){.fv40pdu{animation-duration:3s;}}", {
-    m: "screen and (prefers-reduced-motion: reduce)"
-  }], ["@media screen and (prefers-reduced-motion: reduce){.f1uj6jbf{animation-name:ftc26vs;}}", {
-    m: "screen and (prefers-reduced-motion: reduce)"
   }]],
   d: [[".f12b9xdw{border-radius:inherit;}", {
     p: -1
-  }], ".f1l02sjl{height:100%;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1u5hf6c{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".fwd2bol{animation-name:f1keuaan;}", ".f14gig94{animation-name:f10x8f8u;}", ".f1a27w2r{animation-duration:3s;}", ".f452v7t{animation-timing-function:linear;}", ".f1cpbl36{animation-iteration-count:infinite;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
-  k: ["@keyframes f1keuaan{0%{left:-33%;}100%{left:100%;}}", "@keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}", "@keyframes ftc26vs{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}"]
+  }], ".f1l02sjl{height:100%;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1u5hf6c{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"]
 });
 /**
  * Apply styling to the ProgressBar slots based on the state

package/lib/components/ProgressBar/useProgressBarStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bomf52o","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","Ezkn3b","w3vfg9","jpy9cc","Bqo2lbl","B6plc1d","I82g5a","brand","error","warning","success","k","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n    root: 'fui-ProgressBar',\n    bar: 'fui-ProgressBar__bar'\n};\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\nconst barThicknessValues = {\n    medium: '2px',\n    large: '4px'\n};\nconst indeterminateProgressBar = {\n    '0%': {\n        left: '-33%'\n    },\n    '100%': {\n        left: '100%'\n    }\n};\nconst indeterminateProgressBarReducedMotion = {\n    '0%': {\n        opacity: '.2'\n    },\n    '50%': {\n        opacity: '1'\n    },\n    '100%': {\n        opacity: '.2'\n    }\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        display: 'block',\n        backgroundColor: tokens.colorNeutralBackground6,\n        width: '100%',\n        overflow: 'hidden',\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'CanvasText'\n        }\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    medium: {\n        height: barThicknessValues.medium\n    },\n    large: {\n        height: barThicknessValues.large\n    }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n    base: {\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'Highlight'\n        },\n        borderRadius: 'inherit',\n        height: '100%'\n    },\n    nonZeroDeterminate: {\n        transitionProperty: 'width',\n        transitionDuration: '0.3s',\n        transitionTimingFunction: 'ease'\n    },\n    indeterminate: {\n        maxWidth: '33%',\n        position: 'relative',\n        backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n        animationName: indeterminateProgressBar,\n        animationDuration: '3s',\n        animationTimingFunction: 'linear',\n        animationIterationCount: 'infinite',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            maxWidth: '100%',\n            animationIterationCount: 'infinite',\n            animationDuration: '3s',\n            animationName: indeterminateProgressBarReducedMotion\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorCompoundBrandBackground\n    },\n    error: {\n        backgroundColor: tokens.colorPaletteRedBackground3\n    },\n    warning: {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3\n    },\n    success: {\n        backgroundColor: tokens.colorPaletteGreenBackground3\n    }\n});\n/**\n * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n    'use no memo';\n    const { color, max, shape, thickness, value } = state;\n    const rootStyles = useRootStyles();\n    const barStyles = useBarStyles();\n    state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n    if (state.bar) {\n        state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n    }\n    if (state.bar && value !== undefined) {\n        state.bar.style = {\n            width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n            ...state.bar.style\n        };\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bomf52o","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","jpy9cc","brand","error","warning","success","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n    root: 'fui-ProgressBar',\n    bar: 'fui-ProgressBar__bar'\n};\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\nconst barThicknessValues = {\n    medium: '2px',\n    large: '4px'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        display: 'block',\n        backgroundColor: tokens.colorNeutralBackground6,\n        width: '100%',\n        overflow: 'hidden',\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'CanvasText'\n        }\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    medium: {\n        height: barThicknessValues.medium\n    },\n    large: {\n        height: barThicknessValues.large\n    }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n    base: {\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'Highlight'\n        },\n        borderRadius: 'inherit',\n        height: '100%'\n    },\n    nonZeroDeterminate: {\n        transitionProperty: 'width',\n        transitionDuration: '0.3s',\n        transitionTimingFunction: 'ease'\n    },\n    indeterminate: {\n        maxWidth: '33%',\n        position: 'relative',\n        backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n            maxWidth: '100%'\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorCompoundBrandBackground\n    },\n    error: {\n        backgroundColor: tokens.colorPaletteRedBackground3\n    },\n    warning: {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3\n    },\n    success: {\n        backgroundColor: tokens.colorPaletteGreenBackground3\n    }\n});\n/**\n * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n    'use no memo';\n    const { color, max, shape, thickness, value } = state;\n    const rootStyles = useRootStyles();\n    const barStyles = useBarStyles();\n    state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n    if (state.bar) {\n        state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n    }\n    if (state.bar && value !== undefined) {\n        state.bar.style = {\n            width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n            ...state.bar.style\n        };\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/ProgressBar/useProgressBarStyles.styles.raw.js

@@ -12,25 +12,6 @@ const barThicknessValues = {
     medium: '2px',
     large: '4px'
 };
-const indeterminateProgressBar = {
-    '0%': {
-        left: '-33%'
-    },
-    '100%': {
-        left: '100%'
-    }
-};
-const indeterminateProgressBarReducedMotion = {
-    '0%': {
-        opacity: '.2'
-    },
-    '50%': {
-        opacity: '1'
-    },
-    '100%': {
-        opacity: '.2'
-    }
-};
 /**
  * Styles for the root slot
  */ const useRootStyles = makeStyles({
@@ -80,15 +61,9 @@ const indeterminateProgressBarReducedMotion = {
       ${tokens.colorTransparentBackground} 50%,
       ${tokens.colorNeutralBackground6} 100%
     )`,
-        animationName: indeterminateProgressBar,
-        animationDuration: '3s',
-        animationTimingFunction: 'linear',
-        animationIterationCount: 'infinite',
         '@media screen and (prefers-reduced-motion: reduce)': {
-            maxWidth: '100%',
-            animationIterationCount: 'infinite',
-            animationDuration: '3s',
-            animationName: indeterminateProgressBarReducedMotion
+            // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion
+            maxWidth: '100%'
         }
     },
     brand: {

package/lib/components/ProgressBar/useProgressBarStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\nconst indeterminateProgressBar = {\n  '0%': {\n    left: '-33%', // matches indeterminate bar width\n  },\n  '100%': {\n    left: '100%',\n  },\n};\n\nconst indeterminateProgressBarReducedMotion = {\n  '0%': {\n    opacity: '.2',\n  },\n  '50%': {\n    opacity: '1',\n  },\n  '100%': {\n    opacity: '.2',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    width: '100%',\n    overflow: 'hidden',\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    borderRadius: 'inherit',\n    height: '100%',\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    animationName: indeterminateProgressBar,\n    animationDuration: '3s',\n    animationTimingFunction: 'linear',\n    animationIterationCount: 'infinite',\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      maxWidth: '100%',\n      animationIterationCount: 'infinite',\n      animationDuration: '3s',\n      animationName: indeterminateProgressBarReducedMotion,\n    },\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  'use no memo';\n\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","animationName","animationDuration","animationTimingFunction","animationIterationCount","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<Omit<ProgressBarSlots, 'indeterminateMotion'>> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    width: '100%',\n    overflow: 'hidden',\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    borderRadius: 'inherit',\n    height: '100%',\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n      maxWidth: '100%',\n    },\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  'use no memo';\n\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,wBAAuF;IAClGC,MAAM;IACNC,KAAK;AACP,EAAE;AAEF,sDAAsD;AACtD,oDAAoD;AACpD,MAAMC,iBAAiB;AAEvB,MAAMC,qBAAqB;IACzBC,QAAQ;IACRC,OAAO;AACT;AAEA;;CAEC,GACD,MAAMC,gBAAgBV,WAAW;IAC/BI,MAAM;QACJO,SAAS;QACTC,iBAAiBV,OAAOW,uBAAuB;QAC/CC,OAAO;QACPC,UAAU;QAEV,6CAA6C;YAC3CH,iBAAiB;QACnB;IACF;IACAI,SAAS;QACPC,cAAcf,OAAOgB,kBAAkB;IACzC;IACAC,QAAQ;QACNF,cAAcf,OAAOkB,gBAAgB;IACvC;IACAZ,QAAQ;QACNa,QAAQd,mBAAmBC,MAAM;IACnC;IACAC,OAAO;QACLY,QAAQd,mBAAmBE,KAAK;IAClC;AACF;AAEA;;CAEC,GACD,MAAMa,eAAetB,WAAW;IAC9BuB,MAAM;QACJ,6CAA6C;YAC3CX,iBAAiB;QACnB;QACAK,cAAc;QACdI,QAAQ;IACV;IACAG,oBAAoB;QAClBC,oBAAoB;QACpBC,oBAAoB;QACpBC,0BAA0B;IAC5B;IACAC,eAAe;QACbC,UAAU;QACVC,UAAU;QACVC,iBAAiB,CAAC;;MAEhB,EAAE7B,OAAOW,uBAAuB,CAAC;MACjC,EAAEX,OAAO8B,0BAA0B,CAAC;MACpC,EAAE9B,OAAOW,uBAAuB,CAAC;KAClC,CAAC;QACF,sDAAsD;YACpD,iGAAiG;YACjGgB,UAAU;QACZ;IACF;IAEAI,OAAO;QACLrB,iBAAiBV,OAAOgC,4BAA4B;IACtD;IAEAC,OAAO;QACLvB,iBAAiBV,OAAOkC,0BAA0B;IACpD;IACAC,SAAS;QACPzB,iBAAiBV,OAAOoC,iCAAiC;IAC3D;IACAC,SAAS;QACP3B,iBAAiBV,OAAOsC,4BAA4B;IACtD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,KAAK,EAAEC,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGL;IAChD,MAAMM,aAAatC;IACnB,MAAMuC,YAAY3B;IAElBoB,MAAMtC,IAAI,CAAC8C,SAAS,GAAGjD,aACrBE,sBAAsBC,IAAI,EAC1B4C,WAAW5C,IAAI,EACf4C,UAAU,CAACH,MAAM,EACjBG,UAAU,CAACF,UAAU,EACrBJ,MAAMtC,IAAI,CAAC8C,SAAS;IAGtB,IAAIR,MAAMrC,GAAG,EAAE;QACbqC,MAAMrC,GAAG,CAAC6C,SAAS,GAAGjD,aACpBE,sBAAsBE,GAAG,EACzB4C,UAAU1B,IAAI,EACd0B,UAAUhB,KAAK,EACfc,UAAUI,aAAaF,UAAUrB,aAAa,EAC9CmB,UAAUI,aAAaJ,QAAQzC,kBAAkB2C,UAAUzB,kBAAkB,EAC7EmB,SAASI,UAAUI,aAAaF,SAAS,CAACN,MAAM,EAChDD,MAAMrC,GAAG,CAAC6C,SAAS;IAEvB;IAEA,IAAIR,MAAMrC,GAAG,IAAI0C,UAAUI,WAAW;QACpCT,MAAMrC,GAAG,CAAC+C,KAAK,GAAG;YAChBtC,OAAOuC,KAAKC,GAAG,CAAC,KAAKD,KAAKT,GAAG,CAAC,GAAG,AAACG,QAAQH,MAAO,QAAQ;YACzD,GAAGF,MAAMrC,GAAG,CAAC+C,KAAK;QACpB;IACF;IAEA,OAAOV;AACT,EAAE"}

package/lib-commonjs/components/ProgressBar/ProgressBar.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n  /**\n   * The track behind the ProgressBar bar\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n   */\n  bar?: NonNullable<Slot<'div'>>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n  /**\n   * The shape of the bar and track.\n   * @default rounded\n   */\n  shape?: 'rounded' | 'square';\n  /**\n   * A decimal number between `0` and `1` (or between `0` and `max` if given),\n   * which specifies how much of the task has been completed.\n   *\n   * If `undefined` (default), the ProgressBar will display an **indeterminate** state.\n   */\n  value?: number;\n  /**\n   * The maximum value, which indicates the task is complete.\n   * The ProgressBar bar will be full when `value` equals `max`.\n   * @default 1\n   */\n  max?: number;\n  /**\n   * The thickness of the ProgressBar bar\n   * @default medium\n   */\n  thickness?: 'medium' | 'large';\n\n  /**\n   * The status of the ProgressBar bar. Changes the color of the bar.\n   * @default brand\n   */\n  color?: 'brand' | 'success' | 'warning' | 'error';\n};\n\n/**\n * State used in rendering ProgressBar\n */\nexport type ProgressBarState = ComponentState<Required<ProgressBarSlots>> &\n  Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &\n  Pick<ProgressBarProps, 'value' | 'color'>;\n"],"names":[],"mappings":"AAgDA;;CAEC,GACD,WAE4C"}
+{"version":3,"sources":["../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { MotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n  /**\n   * The track behind the ProgressBar bar\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n   */\n  bar?: NonNullable<Slot<'div'>>;\n  /**\n   * Motion slot for the indeterminate animation. Pass `null` to disable the animation.\n   */\n  indeterminateMotion?: Slot<MotionSlotProps>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n  /**\n   * The shape of the bar and track.\n   * @default rounded\n   */\n  shape?: 'rounded' | 'square';\n  /**\n   * A decimal number between `0` and `1` (or between `0` and `max` if given),\n   * which specifies how much of the task has been completed.\n   *\n   * If `undefined` (default), the ProgressBar will display an **indeterminate** state.\n   */\n  value?: number;\n  /**\n   * The maximum value, which indicates the task is complete.\n   * The ProgressBar bar will be full when `value` equals `max`.\n   * @default 1\n   */\n  max?: number;\n  /**\n   * The thickness of the ProgressBar bar\n   * @default medium\n   */\n  thickness?: 'medium' | 'large';\n\n  /**\n   * The status of the ProgressBar bar. Changes the color of the bar.\n   * @default brand\n   */\n  color?: 'brand' | 'success' | 'warning' | 'error';\n};\n\n/**\n * State used in rendering ProgressBar\n */\nexport type ProgressBarState = ComponentState<Required<ProgressBarSlots>> &\n  Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &\n  Pick<ProgressBarProps, 'value' | 'color'>;\n"],"names":[],"mappings":"AAqDA;;CAEC,GACD,WAE4C"}

package/lib-commonjs/components/ProgressBar/progressBarMotions.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ProgressBarIndeterminateMotion", {
+    enumerable: true,
+    get: function() {
+        return ProgressBarIndeterminateMotion;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const ProgressBarIndeterminateMotion = (0, _reactmotion.createMotionComponent)({
+    // translate percentages are relative to the element's own width, not the container's.
+    // The indeterminate bar is ~33% the width of its container, so:
+    //   translate: '-100%' === left: '-33%' (one bar-width off-screen to the left)
+    //   translate: '300%'  === left: '100%' (3 × bar-width ≈ full container width, off-screen to the right)
+    keyframes: [
+        {
+            translate: '-100%'
+        },
+        {
+            translate: '300%'
+        }
+    ],
+    duration: 3000,
+    iterations: Infinity,
+    easing: _reactmotion.motionTokens.curveLinear,
+    reducedMotion: {
+        keyframes: [
+            {
+                opacity: 0.2
+            },
+            {
+                opacity: 1
+            },
+            {
+                opacity: 0.2
+            }
+        ],
+        duration: 3000,
+        iterations: Infinity
+    }
+});

package/lib-commonjs/components/ProgressBar/progressBarMotions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ProgressBar/progressBarMotions.ts"],"sourcesContent":["import { createMotionComponent, motionTokens } from '@fluentui/react-motion';\n\n/**\n * Motion component for the indeterminate ProgressBar bar:\n * a horizontal sliding animation that loops indefinitely.\n * In reduced motion mode, the bar pulses opacity instead of sliding.\n */\nexport const ProgressBarIndeterminateMotion = createMotionComponent({\n  // translate percentages are relative to the element's own width, not the container's.\n  // The indeterminate bar is ~33% the width of its container, so:\n  //   translate: '-100%' === left: '-33%' (one bar-width off-screen to the left)\n  //   translate: '300%'  === left: '100%' (3 × bar-width ≈ full container width, off-screen to the right)\n  keyframes: [{ translate: '-100%' }, { translate: '300%' }],\n  duration: 3000,\n  iterations: Infinity,\n  easing: motionTokens.curveLinear,\n\n  reducedMotion: {\n    keyframes: [{ opacity: 0.2 }, { opacity: 1 }, { opacity: 0.2 }],\n    duration: 3000,\n    iterations: Infinity,\n  },\n});\n"],"names":["createMotionComponent","motionTokens","ProgressBarIndeterminateMotion","keyframes","translate","duration","iterations","Infinity","easing","curveLinear","reducedMotion","opacity"],"mappings":";;;;+BAOaE;;;;;;6BAPuC,yBAAyB;AAOtE,2CAAuCF,kCAAAA,EAAsB;IAClE,sFAAsF;IACtF,gEAAgE;IAChE,+EAA+E;IAC/E,wGAAwG;IACxGG,WAAW;QAAC;YAAEC,WAAW;QAAQ;QAAG;YAAEA,WAAW;QAAO;KAAE;IAC1DC,UAAU;IACVC,YAAYC;IACZC,QAAQP,yBAAAA,CAAaQ,WAAW;IAEhCC,eAAe;QACbP,WAAW;YAAC;gBAAEQ,SAAS;YAAI;YAAG;gBAAEA,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAI;SAAE;QAC/DN,UAAU;QACVC,YAAYC;IACd;AACF,GAAG"}

package/lib-commonjs/components/ProgressBar/renderProgressBar.js

@@ -13,6 +13,8 @@ const _reactutilities = require("@fluentui/react-utilities");
 const renderProgressBar_unstable = (state)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
-        children: state.bar && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bar, {})
+        children: state.bar && (state.indeterminateMotion ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.indeterminateMotion, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bar, {})
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bar, {}))
     });
 };

package/lib-commonjs/components/ProgressBar/renderProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState): JSXElement => {\n  assertSlots<ProgressBarSlots>(state);\n  return <state.root>{state.bar && <state.bar />}</state.root>;\n};\n"],"names":["assertSlots","renderProgressBar_unstable","state","root","bar"],"mappings":";;;;+BAUaC;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAC9B,OAAA,WAAA,GAAO,mBAAA,EAACA,MAAMC,IAAI,EAAA;kBAAED,MAAME,GAAG,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,GAAG,EAAA,CAAA;;AAC7C,EAAE"}
+{"version":3,"sources":["../src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState): JSXElement => {\n  assertSlots<ProgressBarSlots>(state);\n  return (\n    <state.root>\n      {state.bar &&\n        (state.indeterminateMotion ? (\n          <state.indeterminateMotion>\n            <state.bar />\n          </state.indeterminateMotion>\n        ) : (\n          <state.bar />\n        ))}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderProgressBar_unstable","state","root","bar","indeterminateMotion"],"mappings":";;;;+BAUaC;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAC9B,OAAA,WAAA,OACE,eAAA,EAACA,MAAMC,IAAI,EAAA;kBACRD,MAAME,GAAG,IACPF,CAAAA,MAAMG,mBAAmB,GAAA,WAAA,OACxB,eAAA,EAACH,MAAMG,mBAAmB,EAAA;sBACxB,WAAA,OAAA,eAAA,EAACH,MAAME,GAAG,EAAA,CAAA;+BAGZ,eAAA,EAACF,MAAME,GAAG,EAAA,CAAA,EAAA,CACZ;;AAGR,EAAE"}

package/lib-commonjs/components/ProgressBar/useProgressBar.js

@@ -12,8 +12,10 @@ Object.defineProperty(exports, "useProgressBar_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactfield = require("@fluentui/react-field");
+const _reactmotion = require("@fluentui/react-motion");
 const _reactutilities = require("@fluentui/react-utilities");
 const _index = require("../../utils/index");
+const _progressBarMotions = require("./progressBarMotions");
 const useProgressBar_unstable = (props, ref)=>{
     const field = (0, _reactfield.useFieldContext_unstable)();
     const fieldState = field === null || field === void 0 ? void 0 : field.validationState;
@@ -54,10 +56,15 @@ const useProgressBar_unstable = (props, ref)=>{
         value,
         components: {
             root: 'div',
-            bar: 'div'
+            bar: 'div',
+            indeterminateMotion: _progressBarMotions.ProgressBarIndeterminateMotion
         },
         root,
-        bar
+        bar,
+        indeterminateMotion: value === undefined ? (0, _reactmotion.motionSlot)(props.indeterminateMotion, {
+            elementType: _progressBarMotions.ProgressBarIndeterminateMotion,
+            defaultProps: {}
+        }) : undefined
     };
     return state;
 };

package/lib-commonjs/components/ProgressBar/useProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  const field = useFieldContext_unstable();\n  const fieldState = field?.validationState;\n\n  const {\n    color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand',\n    shape = 'rounded',\n    thickness = 'medium',\n  } = props;\n  const max = clampMax(props.max ?? 1);\n  const value = clampValue(props.value, max);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: ref as React.Ref<HTMLDivElement>,\n      role: 'progressbar',\n      'aria-valuemin': value !== undefined ? 0 : undefined,\n      'aria-valuemax': value !== undefined ? max : undefined,\n      'aria-valuenow': value,\n      'aria-labelledby': field?.labelId,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n  if (field && (field.validationMessageId || field.hintId)) {\n    // Prepend the field's validation message and/or hint to the user's aria-describedby\n    root['aria-describedby'] = [field?.validationMessageId, field?.hintId, root['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n  const bar = slot.always(props.bar, { elementType: 'div' });\n  const state: ProgressBarState = {\n    color,\n    max,\n    shape,\n    thickness,\n    value,\n    components: { root: 'div', bar: 'div' },\n    root,\n    bar,\n  };\n\n  return state;\n};\n"],"names":["React","useFieldContext_unstable","getIntrinsicElementProps","slot","clampValue","clampMax","useProgressBar_unstable","props","ref","field","fieldState","validationState","color","shape","thickness","max","value","root","always","role","undefined","labelId","elementType","validationMessageId","hintId","filter","Boolean","join","bar","state","components"],"mappings":"AAAA;;;;;+BAiBaM;;;;;;;iEAfU,QAAQ;4BACU,wBAAwB;gCAClB,4BAA4B;uBACtC,oBAAoB;AAYlD,gCAAgC,CAACC,OAAyBC;IAC/D,MAAMC,YAAQR,oCAAAA;IACd,MAAMS,aAAaD,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOE,eAAe;IAEzC,MAAM,EACJC,QAAQF,eAAe,WAAWA,eAAe,aAAaA,eAAe,YAAYA,aAAa,OAAO,EAC7GG,QAAQ,SAAS,EACjBC,YAAY,QAAQ,EACrB,GAAGP;QACiBA;IAArB,MAAMQ,UAAMV,eAAAA,EAASE,CAAAA,aAAAA,MAAMQ,GAAAA,AAAG,MAAA,QAATR,eAAAA,KAAAA,IAAAA,aAAa;IAClC,MAAMS,YAAQZ,iBAAAA,EAAWG,MAAMS,KAAK,EAAED;IAEtC,MAAME,OAAOd,oBAAAA,CAAKe,MAAM,KACtBhB,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FM,KAAKA;QACLW,MAAM;QACN,iBAAiBH,UAAUI,YAAY,IAAIA;QAC3C,iBAAiBJ,UAAUI,YAAYL,MAAMK;QAC7C,iBAAiBJ;QACjB,iBAAiB,EAAEP,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOY,OAAO;QACjC,GAAGd,KAAK;IACV,IACA;QAAEe,aAAa;IAAM;IAEvB,IAAIb,SAAUA,CAAAA,MAAMc,mBAAmB,IAAId,MAAMe,MAAAA,AAAK,GAAI;QACxD,oFAAoF;QACpFP,IAAI,CAAC,mBAAmB,GAAG;YAACR,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOc,mBAAmB;YAAEd,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOe,MAAM;YAAEP,IAAI,CAAC,mBAAmB;SAAC,CAC7FQ,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IACA,MAAMC,MAAMzB,oBAAAA,CAAKe,MAAM,CAACX,MAAMqB,GAAG,EAAE;QAAEN,aAAa;IAAM;IACxD,MAAMO,QAA0B;QAC9BjB;QACAG;QACAF;QACAC;QACAE;QACAc,YAAY;YAAEb,MAAM;YAAOW,KAAK;QAAM;QACtCX;QACAW;IACF;IAEA,OAAOC;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { motionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\nimport { ProgressBarIndeterminateMotion } from './progressBarMotions';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  const field = useFieldContext_unstable();\n  const fieldState = field?.validationState;\n\n  const {\n    color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand',\n    shape = 'rounded',\n    thickness = 'medium',\n  } = props;\n  const max = clampMax(props.max ?? 1);\n  const value = clampValue(props.value, max);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: ref as React.Ref<HTMLDivElement>,\n      role: 'progressbar',\n      'aria-valuemin': value !== undefined ? 0 : undefined,\n      'aria-valuemax': value !== undefined ? max : undefined,\n      'aria-valuenow': value,\n      'aria-labelledby': field?.labelId,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n  if (field && (field.validationMessageId || field.hintId)) {\n    // Prepend the field's validation message and/or hint to the user's aria-describedby\n    root['aria-describedby'] = [field?.validationMessageId, field?.hintId, root['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n  const bar = slot.always(props.bar, { elementType: 'div' });\n  const state: ProgressBarState = {\n    color,\n    max,\n    shape,\n    thickness,\n    value,\n    components: { root: 'div', bar: 'div', indeterminateMotion: ProgressBarIndeterminateMotion },\n    root,\n    bar,\n    indeterminateMotion:\n      value === undefined\n        ? motionSlot(props.indeterminateMotion, {\n            elementType: ProgressBarIndeterminateMotion,\n            defaultProps: {},\n          })\n        : undefined,\n  };\n\n  return state;\n};\n"],"names":["React","useFieldContext_unstable","motionSlot","getIntrinsicElementProps","slot","clampValue","clampMax","ProgressBarIndeterminateMotion","useProgressBar_unstable","props","ref","field","fieldState","validationState","color","shape","thickness","max","value","root","always","role","undefined","labelId","elementType","validationMessageId","hintId","filter","Boolean","join","bar","state","components","indeterminateMotion","defaultProps"],"mappings":"AAAA;;;;;+BAmBaQ;;;;;;;iEAjBU,QAAQ;4BACU,wBAAwB;6BACtC,yBAAyB;gCACL,4BAA4B;uBACtC,oBAAoB;oCAEV,uBAAuB;AAW/D,gCAAgC,CAACC,OAAyBC;IAC/D,MAAMC,YAAQV,oCAAAA;IACd,MAAMW,aAAaD,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOE,eAAe;IAEzC,MAAM,EACJC,QAAQF,eAAe,WAAWA,eAAe,aAAaA,eAAe,YAAYA,aAAa,OAAO,EAC7GG,QAAQ,SAAS,EACjBC,YAAY,QAAQ,EACrB,GAAGP;QACiBA;IAArB,MAAMQ,UAAMX,eAAAA,EAASG,CAAAA,aAAAA,MAAMQ,GAAAA,AAAG,MAAA,QAATR,eAAAA,KAAAA,IAAAA,aAAa;IAClC,MAAMS,YAAQb,iBAAAA,EAAWI,MAAMS,KAAK,EAAED;IAEtC,MAAME,OAAOf,oBAAAA,CAAKgB,MAAM,KACtBjB,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FO,KAAKA;QACLW,MAAM;QACN,iBAAiBH,UAAUI,YAAY,IAAIA;QAC3C,iBAAiBJ,UAAUI,YAAYL,MAAMK;QAC7C,iBAAiBJ;QACjB,iBAAiB,EAAEP,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOY,OAAO;QACjC,GAAGd,KAAK;IACV,IACA;QAAEe,aAAa;IAAM;IAEvB,IAAIb,SAAUA,CAAAA,MAAMc,mBAAmB,IAAId,MAAMe,MAAAA,AAAK,GAAI;QACxD,oFAAoF;QACpFP,IAAI,CAAC,mBAAmB,GAAG;YAACR,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOc,mBAAmB;YAAEd,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOe,MAAM;YAAEP,IAAI,CAAC,mBAAmB;SAAC,CAC7FQ,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IACA,MAAMC,MAAM1B,oBAAAA,CAAKgB,MAAM,CAACX,MAAMqB,GAAG,EAAE;QAAEN,aAAa;IAAM;IACxD,MAAMO,QAA0B;QAC9BjB;QACAG;QACAF;QACAC;QACAE;QACAc,YAAY;YAAEb,MAAM;YAAOW,KAAK;YAAOG,qBAAqB1B,kDAAAA;QAA+B;QAC3FY;QACAW;QACAG,qBACEf,UAAUI,gBACNpB,uBAAAA,EAAWO,MAAMwB,mBAAmB,EAAE;YACpCT,aAAajB,kDAAAA;YACb2B,cAAc,CAAC;QACjB,KACAZ;IACR;IAEA,OAAOS;AACT,EAAE"}

package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.js

@@ -29,25 +29,6 @@ const barThicknessValues = {
     medium: '2px',
     large: '4px'
 };
-const indeterminateProgressBar = {
-    '0%': {
-        left: '-33%'
-    },
-    '100%': {
-        left: '100%'
-    }
-};
-const indeterminateProgressBarReducedMotion = {
-    '0%': {
-        opacity: '.2'
-    },
-    '50%': {
-        opacity: '1'
-    },
-    '100%': {
-        opacity: '.2'
-    }
-};
 /**
  * Styles for the root slot
  */ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -139,17 +120,7 @@ const indeterminateProgressBarReducedMotion = {
             "fpo0yib",
             "f1u5hf6c"
         ],
-        Bv12yb3: [
-            "fwd2bol",
-            "f14gig94"
-        ],
-        vin17d: "f1a27w2r",
-        Ezkn3b: "f452v7t",
-        w3vfg9: "f1cpbl36",
-        jpy9cc: "f3z2g5w",
-        Bqo2lbl: "fz5izi4",
-        B6plc1d: "fv40pdu",
-        I82g5a: "f1uj6jbf"
+        jpy9cc: "f3z2g5w"
     },
     brand: {
         De3pzq: "ftywsgz"
@@ -176,24 +147,6 @@ const indeterminateProgressBarReducedMotion = {
             {
                 m: "screen and (prefers-reduced-motion: reduce)"
             }
-        ],
-        [
-            "@media screen and (prefers-reduced-motion: reduce){.fz5izi4{animation-iteration-count:infinite;}}",
-            {
-                m: "screen and (prefers-reduced-motion: reduce)"
-            }
-        ],
-        [
-            "@media screen and (prefers-reduced-motion: reduce){.fv40pdu{animation-duration:3s;}}",
-            {
-                m: "screen and (prefers-reduced-motion: reduce)"
-            }
-        ],
-        [
-            "@media screen and (prefers-reduced-motion: reduce){.f1uj6jbf{animation-name:ftc26vs;}}",
-            {
-                m: "screen and (prefers-reduced-motion: reduce)"
-            }
         ]
     ],
     d: [
@@ -211,20 +164,10 @@ const indeterminateProgressBarReducedMotion = {
         ".f10pi13n{position:relative;}",
         ".fpo0yib{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}",
         ".f1u5hf6c{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}",
-        ".fwd2bol{animation-name:f1keuaan;}",
-        ".f14gig94{animation-name:f10x8f8u;}",
-        ".f1a27w2r{animation-duration:3s;}",
-        ".f452v7t{animation-timing-function:linear;}",
-        ".f1cpbl36{animation-iteration-count:infinite;}",
         ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}",
         ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}",
         ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}",
         ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"
-    ],
-    k: [
-        "@keyframes f1keuaan{0%{left:-33%;}100%{left:100%;}}",
-        "@keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}",
-        "@keyframes ftc26vs{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}"
     ]
 });
 const useProgressBarStyles_unstable = (state)=>{

package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n    root: 'fui-ProgressBar',\n    bar: 'fui-ProgressBar__bar'\n};\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\nconst barThicknessValues = {\n    medium: '2px',\n    large: '4px'\n};\nconst indeterminateProgressBar = {\n    '0%': {\n        left: '-33%'\n    },\n    '100%': {\n        left: '100%'\n    }\n};\nconst indeterminateProgressBarReducedMotion = {\n    '0%': {\n        opacity: '.2'\n    },\n    '50%': {\n        opacity: '1'\n    },\n    '100%': {\n        opacity: '.2'\n    }\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        display: 'block',\n        backgroundColor: tokens.colorNeutralBackground6,\n        width: '100%',\n        overflow: 'hidden',\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'CanvasText'\n        }\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    medium: {\n        height: barThicknessValues.medium\n    },\n    large: {\n        height: barThicknessValues.large\n    }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n    base: {\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'Highlight'\n        },\n        borderRadius: 'inherit',\n        height: '100%'\n    },\n    nonZeroDeterminate: {\n        transitionProperty: 'width',\n        transitionDuration: '0.3s',\n        transitionTimingFunction: 'ease'\n    },\n    indeterminate: {\n        maxWidth: '33%',\n        position: 'relative',\n        backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n        animationName: indeterminateProgressBar,\n        animationDuration: '3s',\n        animationTimingFunction: 'linear',\n        animationIterationCount: 'infinite',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            maxWidth: '100%',\n            animationIterationCount: 'infinite',\n            animationDuration: '3s',\n            animationName: indeterminateProgressBarReducedMotion\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorCompoundBrandBackground\n    },\n    error: {\n        backgroundColor: tokens.colorPaletteRedBackground3\n    },\n    warning: {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3\n    },\n    success: {\n        backgroundColor: tokens.colorPaletteGreenBackground3\n    }\n});\n/**\n * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n    'use no memo';\n    const { color, max, shape, thickness, value } = state;\n    const rootStyles = useRootStyles();\n    const barStyles = useBarStyles();\n    state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n    if (state.bar) {\n        state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n    }\n    if (state.bar && value !== undefined) {\n        state.bar.style = {\n            width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n            ...state.bar.style\n        };\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bomf52o","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","Ezkn3b","w3vfg9","jpy9cc","Bqo2lbl","B6plc1d","I82g5a","brand","error","warning","success","k","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"mappings":"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"}
+{"version":3,"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n    root: 'fui-ProgressBar',\n    bar: 'fui-ProgressBar__bar'\n};\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\nconst barThicknessValues = {\n    medium: '2px',\n    large: '4px'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        display: 'block',\n        backgroundColor: tokens.colorNeutralBackground6,\n        width: '100%',\n        overflow: 'hidden',\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'CanvasText'\n        }\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    medium: {\n        height: barThicknessValues.medium\n    },\n    large: {\n        height: barThicknessValues.large\n    }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n    base: {\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'Highlight'\n        },\n        borderRadius: 'inherit',\n        height: '100%'\n    },\n    nonZeroDeterminate: {\n        transitionProperty: 'width',\n        transitionDuration: '0.3s',\n        transitionTimingFunction: 'ease'\n    },\n    indeterminate: {\n        maxWidth: '33%',\n        position: 'relative',\n        backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n            maxWidth: '100%'\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorCompoundBrandBackground\n    },\n    error: {\n        backgroundColor: tokens.colorPaletteRedBackground3\n    },\n    warning: {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3\n    },\n    success: {\n        backgroundColor: tokens.colorPaletteGreenBackground3\n    }\n});\n/**\n * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n    'use no memo';\n    const { color, max, shape, thickness, value } = state;\n    const rootStyles = useRootStyles();\n    const barStyles = useBarStyles();\n    state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n    if (state.bar) {\n        state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n    }\n    if (state.bar && value !== undefined) {\n        state.bar.style = {\n            width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n            ...state.bar.style\n        };\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bomf52o","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","jpy9cc","brand","error","warning","success","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"mappings":"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"}

package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.raw.js

@@ -30,25 +30,6 @@ const barThicknessValues = {
     medium: '2px',
     large: '4px'
 };
-const indeterminateProgressBar = {
-    '0%': {
-        left: '-33%'
-    },
-    '100%': {
-        left: '100%'
-    }
-};
-const indeterminateProgressBarReducedMotion = {
-    '0%': {
-        opacity: '.2'
-    },
-    '50%': {
-        opacity: '1'
-    },
-    '100%': {
-        opacity: '.2'
-    }
-};
 /**
  * Styles for the root slot
  */ const useRootStyles = (0, _react.makeStyles)({
@@ -98,15 +79,9 @@ const indeterminateProgressBarReducedMotion = {
       ${_reacttheme.tokens.colorTransparentBackground} 50%,
       ${_reacttheme.tokens.colorNeutralBackground6} 100%
     )`,
-        animationName: indeterminateProgressBar,
-        animationDuration: '3s',
-        animationTimingFunction: 'linear',
-        animationIterationCount: 'infinite',
         '@media screen and (prefers-reduced-motion: reduce)': {
-            maxWidth: '100%',
-            animationIterationCount: 'infinite',
-            animationDuration: '3s',
-            animationName: indeterminateProgressBarReducedMotion
+            // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion
+            maxWidth: '100%'
         }
     },
     brand: {

package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\nconst indeterminateProgressBar = {\n  '0%': {\n    left: '-33%', // matches indeterminate bar width\n  },\n  '100%': {\n    left: '100%',\n  },\n};\n\nconst indeterminateProgressBarReducedMotion = {\n  '0%': {\n    opacity: '.2',\n  },\n  '50%': {\n    opacity: '1',\n  },\n  '100%': {\n    opacity: '.2',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    width: '100%',\n    overflow: 'hidden',\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    borderRadius: 'inherit',\n    height: '100%',\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    animationName: indeterminateProgressBar,\n    animationDuration: '3s',\n    animationTimingFunction: 'linear',\n    animationIterationCount: 'infinite',\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      maxWidth: '100%',\n      animationIterationCount: 'infinite',\n      animationDuration: '3s',\n      animationName: indeterminateProgressBarReducedMotion,\n    },\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  'use no memo';\n\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","animationName","animationDuration","animationTimingFunction","animationIterationCount","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<Omit<ProgressBarSlots, 'indeterminateMotion'>> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    width: '100%',\n    overflow: 'hidden',\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    borderRadius: 'inherit',\n    height: '100%',\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n      maxWidth: '100%',\n    },\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  'use no memo';\n\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,qBAAAA;;;IA2FAsC,6BAAAA;;;;uBAhG4B,iBAAiB;4BACnC,wBAAwB;AAIxC,8BAA6F;IAClGrC,MAAM;IACNC,KAAK;AACP,EAAE;AAEF,sDAAsD;AACtD,oDAAoD;AACpD,MAAMC,iBAAiB;AAEvB,MAAMC,qBAAqB;IACzBC,QAAQ;IACRC,OAAO;AACT;AAEA;;CAEC,GACD,MAAMC,oBAAgBV,iBAAAA,EAAW;IAC/BI,MAAM;QACJO,SAAS;QACTC,iBAAiBV,kBAAAA,CAAOW,uBAAuB;QAC/CC,OAAO;QACPC,UAAU;QAEV,6CAA6C;YAC3CH,iBAAiB;QACnB;IACF;IACAI,SAAS;QACPC,cAAcf,kBAAAA,CAAOgB,kBAAkB;IACzC;IACAC,QAAQ;QACNF,cAAcf,kBAAAA,CAAOkB,gBAAgB;IACvC;IACAZ,QAAQ;QACNa,QAAQd,mBAAmBC,MAAM;IACnC;IACAC,OAAO;QACLY,QAAQd,mBAAmBE,KAAK;IAClC;AACF;AAEA;;CAEC,GACD,MAAMa,mBAAetB,iBAAAA,EAAW;IAC9BuB,MAAM;QACJ,6CAA6C;YAC3CX,iBAAiB;QACnB;QACAK,cAAc;QACdI,QAAQ;IACV;IACAG,oBAAoB;QAClBC,oBAAoB;QACpBC,oBAAoB;QACpBC,0BAA0B;IAC5B;IACAC,eAAe;QACbC,UAAU;QACVC,UAAU;QACVC,iBAAiB,CAAC;;MAEhB,EAAE7B,kBAAAA,CAAOW,uBAAuB,CAAC;MACjC,EAAEX,kBAAAA,CAAO8B,0BAA0B,CAAC;MACpC,EAAE9B,kBAAAA,CAAOW,uBAAuB,CAAC;KAClC,CAAC;QACF,sDAAsD;YACpD,iGAAiG;YACjGgB,UAAU;QACZ;IACF;IAEAI,OAAO;QACLrB,iBAAiBV,kBAAAA,CAAOgC,4BAA4B;IACtD;IAEAC,OAAO;QACLvB,iBAAiBV,kBAAAA,CAAOkC,0BAA0B;IACpD;IACAC,SAAS;QACPzB,iBAAiBV,kBAAAA,CAAOoC,iCAAiC;IAC3D;IACAC,SAAS;QACP3B,iBAAiBV,kBAAAA,CAAOsC,4BAA4B;IACtD;AACF;AAKO,sCAAsC,CAACE;IAC5C;IAEA,MAAM,EAAEC,KAAK,EAAEC,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGL;IAChD,MAAMM,aAAatC;IACnB,MAAMuC,YAAY3B;IAElBoB,MAAMtC,IAAI,CAAC8C,SAAS,OAAGjD,mBAAAA,EACrBE,sBAAsBC,IAAI,EAC1B4C,WAAW5C,IAAI,EACf4C,UAAU,CAACH,MAAM,EACjBG,UAAU,CAACF,UAAU,EACrBJ,MAAMtC,IAAI,CAAC8C,SAAS;IAGtB,IAAIR,MAAMrC,GAAG,EAAE;QACbqC,MAAMrC,GAAG,CAAC6C,SAAS,OAAGjD,mBAAAA,EACpBE,sBAAsBE,GAAG,EACzB4C,UAAU1B,IAAI,EACd0B,UAAUhB,KAAK,EACfc,UAAUI,aAAaF,UAAUrB,aAAa,EAC9CmB,UAAUI,aAAaJ,QAAQzC,kBAAkB2C,UAAUzB,kBAAkB,EAC7EmB,SAASI,UAAUI,aAAaF,SAAS,CAACN,MAAM,EAChDD,MAAMrC,GAAG,CAAC6C,SAAS;IAEvB;IAEA,IAAIR,MAAMrC,GAAG,IAAI0C,UAAUI,WAAW;QACpCT,MAAMrC,GAAG,CAAC+C,KAAK,GAAG;YAChBtC,OAAOuC,KAAKC,GAAG,CAAC,KAAKD,KAAKT,GAAG,CAAC,GAAIG,QAAQH,MAAO,QAAQ;YACzD,GAAGF,MAAMrC,GAAG,CAAC+C,KAAK;QACpB;IACF;IAEA,OAAOV;AACT,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-progress",
-  "version": "9.4.15",
+  "version": "9.4.17",
   "description": "Progress component for FluentUI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,7 +12,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.4.15",
+    "@fluentui/react-motion": "^9.14.0",
+    "@fluentui/react-field": "^9.4.16",
     "@fluentui/react-jsx-runtime": "^9.4.1",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",