@jobber/components 8.24.0 → 8.25.0

package/ProgressIndicator.d.ts

@@ -0,0 +1 @@
+export * from "./dist/ProgressIndicator";

package/ProgressIndicator.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var ProgressIndicator = require("./dist/ProgressIndicator");
+
+Object.keys(ProgressIndicator).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return ProgressIndicator[key];
+    },
+  });
+});

package/dist/Avatar-cjs.js

@@ -41,6 +41,7 @@ function deconstructCssCustomProperty(color) {
         .trim();
 }
 
+const MAX_VISIBLE_INITIALS = 3;
 function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const style = Object.assign({ backgroundColor: color, borderColor: color }, UNSAFE_style.container);
     if (imageUrl) {
@@ -72,9 +73,9 @@ function Initials({ initials, iconColor = "textReverse", iconSize = "base", UNSA
         return (React.createElement(Icon.Icon, { name: "person", color: iconColor, size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.fallbackIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fallbackIcon }));
     }
     const className = classnames(styles.initials, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.initials, {
-        [styles.smallInitials]: initials.length > 2,
+        [styles.smallInitials]: initials.length >= MAX_VISIBLE_INITIALS,
     });
-    return (React.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.substr(0, 3)));
+    return (React.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.slice(0, MAX_VISIBLE_INITIALS)));
 }
 
 exports.Avatar = Avatar;

package/dist/Avatar-es.js

@@ -39,6 +39,7 @@ function deconstructCssCustomProperty(color) {
         .trim();
 }
 
+const MAX_VISIBLE_INITIALS = 3;
 function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const style = Object.assign({ backgroundColor: color, borderColor: color }, UNSAFE_style.container);
     if (imageUrl) {
@@ -70,9 +71,9 @@ function Initials({ initials, iconColor = "textReverse", iconSize = "base", UNSA
         return (React__default.createElement(Icon, { name: "person", color: iconColor, size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.fallbackIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fallbackIcon }));
     }
     const className = classnames(styles.initials, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.initials, {
-        [styles.smallInitials]: initials.length > 2,
+        [styles.smallInitials]: initials.length >= MAX_VISIBLE_INITIALS,
     });
-    return (React__default.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.substr(0, 3)));
+    return (React__default.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.slice(0, MAX_VISIBLE_INITIALS)));
 }
 
 export { Avatar as A };

package/dist/ProgressBar/ProgressBar.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import sizes from "./ProgressBarSizes.module.css";
+/**
+ * @deprecated Use `ProgressIndicator` instead.
+ */
 interface ProgressBarProps {
     /**
      * The current step that the progress bar is on.
@@ -30,5 +33,9 @@ interface ProgressBarProps {
      */
     readonly UNSAFE_style?: React.CSSProperties;
 }
+/**
+ * @deprecated Use `ProgressIndicator` from
+ * `@jobber/components/ProgressIndicator` instead.
+ */
 export declare function ProgressBar({ currentStep, totalSteps, size, variation, UNSAFE_className, UNSAFE_style, }: ProgressBarProps): React.JSX.Element;
 export {};

package/dist/ProgressBar-cjs.js

@@ -19,6 +19,10 @@ function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base"
     })));
 }
 
+/**
+ * @deprecated Use `ProgressIndicator` from
+ * `@jobber/components/ProgressIndicator` instead.
+ */
 function ProgressBar({ currentStep, totalSteps, size = "base", variation = "progress", UNSAFE_className, UNSAFE_style, }) {
     const percentage = (currentStep / totalSteps) * 100;
     const progressBarClassName = classnames(styles.ProgressBar, sizes[size]);

package/dist/ProgressBar-es.js

@@ -17,6 +17,10 @@ function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base"
     })));
 }
 
+/**
+ * @deprecated Use `ProgressIndicator` from
+ * `@jobber/components/ProgressIndicator` instead.
+ */
 function ProgressBar({ currentStep, totalSteps, size = "base", variation = "progress", UNSAFE_className, UNSAFE_style, }) {
     const percentage = (currentStep / totalSteps) * 100;
     const progressBarClassName = classnames(styles.ProgressBar, sizes[size]);

package/dist/ProgressIndicator/ProgressIndicator.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import type { CSSProperties } from "react";
+export interface ProgressIndicatorProps {
+    /**
+     * Current progress. Expected to be in the range `0..max` inclusive.
+     */
+    readonly value: number;
+    /**
+     * Maximum value. Pass `max={4}` with `value={2}` for "2 of 4 steps"; pass
+     * `value={75}` for "75%".
+     *
+     * @default 100
+     */
+    readonly max?: number;
+    /**
+     * Visual variation:
+     * - `continuous` renders a single fill bar driven by `value / max`.
+     * - `stepped` renders `max` segments, the first `value` of which are filled.
+     *
+     * @default "continuous"
+     */
+    readonly variation?: "continuous" | "stepped";
+    /**
+     * Visual size. `smaller` renders at 4px tall, `small` at 8px, `base` at 16px.
+     *
+     * @default "base"
+     */
+    readonly size?: "smaller" | "small" | "base";
+    /**
+     * Accessible label exposed via `aria-label` on the root element. When
+     * omitted, defaults to `"{value}%"` when `max === 100` (or `max` is
+     * omitted), and `"{value} / {max}"` otherwise.
+     *
+     * Override to localize or to describe the specific activity (e.g.
+     * `"Uploading file"`).
+     */
+    readonly ariaLabel?: string;
+    /**
+     * Custom class name merged onto the root element alongside the component's
+     * own classes.
+     */
+    readonly className?: string;
+    /**
+     * Custom inline styles applied to the root element.
+     */
+    readonly style?: CSSProperties;
+}
+/**
+ * `ProgressIndicator` communicates **determinate** progress — a known fraction
+ * of a task that has been completed. Use it when you can express progress as
+ * `value / max`, such as a multi-step setup wizard or a file upload with a
+ * known total size.
+ *
+ * For indeterminate activity (loading time or fraction unknown), use
+ * `ActivityIndicator` instead.
+ *
+ * For now, the legacy `ProgressBar` component also remains available; new code
+ * should prefer `ProgressIndicator`.
+ */
+export declare function ProgressIndicator({ value, max, variation, size, ariaLabel, className, style, }: ProgressIndicatorProps): React.JSX.Element;

package/dist/ProgressIndicator/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ProgressIndicator = require('../ProgressIndicator-cjs.js');
+require('react');
+require('classnames');
+
+
+
+exports.ProgressIndicator = ProgressIndicator.ProgressIndicator;

package/dist/ProgressIndicator/index.d.ts

@@ -0,0 +1 @@
+export { ProgressIndicator } from "./ProgressIndicator";

package/dist/ProgressIndicator/index.mjs

@@ -0,0 +1,3 @@
+export { P as ProgressIndicator } from '../ProgressIndicator-es.js';
+import 'react';
+import 'classnames';

package/dist/ProgressIndicator-cjs.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+
+var styles = {"indicator":"-TBRV1VUsfc-","smaller":"MStgN8AhV3s-","small":"iAlYWHjs6JQ-","base":"WWEzA1-OjSM-","continuous":"r9ShSj58V6w-","fill":"Hsuq8zT-KzY-","stepped":"FB1e9bL90tI-","segment":"bpLIiDGlsCs-","filled":"_0FxmImvY-04-","spinning":"_2aJghEPvl14-"};
+
+/**
+ * `ProgressIndicator` communicates **determinate** progress — a known fraction
+ * of a task that has been completed. Use it when you can express progress as
+ * `value / max`, such as a multi-step setup wizard or a file upload with a
+ * known total size.
+ *
+ * For indeterminate activity (loading time or fraction unknown), use
+ * `ActivityIndicator` instead.
+ *
+ * For now, the legacy `ProgressBar` component also remains available; new code
+ * should prefer `ProgressIndicator`.
+ */
+function ProgressIndicator({ value, max = 100, variation = "continuous", size = "base", ariaLabel, className, style, }) {
+    const clampedValue = Math.min(value, max);
+    const resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : defaultAriaLabel(clampedValue, max);
+    return (React.createElement("div", { role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": resolvedAriaLabel, className: classnames(styles.indicator, styles[size], variation === "stepped" ? styles.stepped : styles.continuous, className), style: style }, variation === "stepped"
+        ? SteppedSegments({ value: clampedValue, max })
+        : ContinuousFill({ value: clampedValue, max })));
+}
+function ContinuousFill({ value, max, }) {
+    const percentage = max === 0 ? 0 : (value / max) * 100;
+    return (React.createElement("div", { className: styles.fill, style: { "--progress-indicator--fill-amount": percentage } }));
+}
+function SteppedSegments({ value, max, }) {
+    return (React.createElement(React.Fragment, null, Array.from({ length: max }).map((_, index) => {
+        const step = index + 1;
+        return (React.createElement("div", { key: step, className: classnames(styles.segment, step <= value && styles.filled) }));
+    })));
+}
+function defaultAriaLabel(value, max) {
+    if (max === 100)
+        return `${value}%`;
+    return `${value} / ${max}`;
+}
+
+exports.ProgressIndicator = ProgressIndicator;

package/dist/ProgressIndicator-es.js

@@ -0,0 +1,41 @@
+import React__default from 'react';
+import classnames from 'classnames';
+
+var styles = {"indicator":"-TBRV1VUsfc-","smaller":"MStgN8AhV3s-","small":"iAlYWHjs6JQ-","base":"WWEzA1-OjSM-","continuous":"r9ShSj58V6w-","fill":"Hsuq8zT-KzY-","stepped":"FB1e9bL90tI-","segment":"bpLIiDGlsCs-","filled":"_0FxmImvY-04-","spinning":"_2aJghEPvl14-"};
+
+/**
+ * `ProgressIndicator` communicates **determinate** progress — a known fraction
+ * of a task that has been completed. Use it when you can express progress as
+ * `value / max`, such as a multi-step setup wizard or a file upload with a
+ * known total size.
+ *
+ * For indeterminate activity (loading time or fraction unknown), use
+ * `ActivityIndicator` instead.
+ *
+ * For now, the legacy `ProgressBar` component also remains available; new code
+ * should prefer `ProgressIndicator`.
+ */
+function ProgressIndicator({ value, max = 100, variation = "continuous", size = "base", ariaLabel, className, style, }) {
+    const clampedValue = Math.min(value, max);
+    const resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : defaultAriaLabel(clampedValue, max);
+    return (React__default.createElement("div", { role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": resolvedAriaLabel, className: classnames(styles.indicator, styles[size], variation === "stepped" ? styles.stepped : styles.continuous, className), style: style }, variation === "stepped"
+        ? SteppedSegments({ value: clampedValue, max })
+        : ContinuousFill({ value: clampedValue, max })));
+}
+function ContinuousFill({ value, max, }) {
+    const percentage = max === 0 ? 0 : (value / max) * 100;
+    return (React__default.createElement("div", { className: styles.fill, style: { "--progress-indicator--fill-amount": percentage } }));
+}
+function SteppedSegments({ value, max, }) {
+    return (React__default.createElement(React__default.Fragment, null, Array.from({ length: max }).map((_, index) => {
+        const step = index + 1;
+        return (React__default.createElement("div", { key: step, className: classnames(styles.segment, step <= value && styles.filled) }));
+    })));
+}
+function defaultAriaLabel(value, max) {
+    if (max === 100)
+        return `${value}%`;
+    return `${value} / ${max}`;
+}
+
+export { ProgressIndicator as P };

package/dist/docs/ProgressBar/ProgressBar.md

@@ -1,5 +1,14 @@
 # Progress Bar
 
+> **Deprecated.** Use [ProgressIndicator](../ProgressIndicator/ProgressIndicator.md) for new
+> work. `ProgressIndicator` is the supported determinate progress indicator
+> going forward — it offers the same semantic with a cleaner prop surface
+> (`value` / `max` instead of `currentStep` / `totalSteps`,
+> `variation="continuous"` instead of `"progress"`, plain `className` / `style`
+> instead of `UNSAFE_*`), theme-adaptive tokens, and a unified
+> `<div role="progressbar">` structure across continuous and stepped variations.
+> `ProgressBar` continues to work unchanged for existing call sites.
+
 A ProgressBar is a visual indicator of how close something is to completion.
 
 ## Design & usage guidelines

package/dist/docs/ProgressIndicator/ProgressIndicator.md

@@ -0,0 +1,105 @@
+# Progress Indicator
+
+`ProgressIndicator` communicates **determinate** progress — a known fraction of
+a task that has been completed. Use it when you can express progress as
+`value / max`, such as a multi-step setup wizard or a file upload with a known
+total size.
+
+For indeterminate activity (loading time or fraction unknown), use
+[ActivityIndicator](../ActivityIndicator/ActivityIndicator.md) instead.
+
+Some great use cases for a `ProgressIndicator` include:
+
+* Setup wizards, where we know how many steps the user has completed and how
+  many steps remain (use `variation="stepped"`).
+* File uploads, where we know the total file size and how much data has already
+  been sent (use the default `variation="continuous"`).
+
+## Design & usage guidelines
+
+The default `ProgressIndicator` size is `base` (16px tall) and can be used in
+most cases. The `small` (8px) and `smaller` (4px) sizes should be used when the
+indicator sits inline with text or in tight surface layouts.
+
+`ProgressIndicator` always fills the width of its parent. Layout — including
+inline-vs-block placement — is the consumer's responsibility. Wrap the indicator
+with your own flex / `<Stack>` / `<Box>` container, or pass a `className` /
+`style`, to control the surrounding layout.
+
+### Continuous vs. stepped
+
+Use `variation="continuous"` (the default) when progress is a smooth value
+between `0` and `max` — for example, a file upload where any percentage is
+meaningful.
+
+Use `variation="stepped"` when progress is naturally segmented — for example, a
+multi-step wizard where the user is on step 2 of 5. Stepped renders `max`
+discrete segments and fills the first `value` of them.
+
+## Accessibility
+
+`ProgressIndicator` announces itself politely to assistive technology:
+
+* `role="progressbar"` marks the root element as a progress bar.
+* `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` reflect the current
+  progress so screen readers can announce the value as a percentage or ratio
+  appropriately.
+* `aria-label` defaults to a localized-as-English template: `"{value}%"` when
+  `max === 100` (or `max` is omitted), and `"{value} / {max}"` otherwise. Pass a
+  custom `ariaLabel` to localize or to describe the specific activity (e.g.
+  `ariaLabel="Uploading file"`).
+
+In the stepped variation, the individual segments are presentational `<div>`s
+with no `role` or `aria-*` attributes. The whole indicator announces once as a
+single progressbar — the outer `aria-valuenow` / `aria-valuemax` already carry
+the progress information.
+
+The indicator does not participate in the keyboard tab order.
+
+### Reduced motion
+
+The width transition between `value` updates is intentionally **preserved**
+under
+[`prefers-reduced-motion: reduce`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion).
+The slide between progress values conveys functional information about progress,
+direction, and magnitude — it is exempt under
+[WCAG 2.3.3 ("Animation from Interactions")](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html).
+Removing the transition would make progress harder to perceive, not easier.
+
+## Relationship to ProgressBar
+
+The legacy [ProgressBar](../ProgressBar/ProgressBar.md) component remains available
+and unchanged. New code should prefer `ProgressIndicator`. A follow-up change is
+expected to consolidate `ProgressBar` onto `ProgressIndicator`.
+
+`ProgressIndicator` renames `ProgressBar`'s props to align with HTML5
+`<progress>` semantics and mobile naming:
+
+| `ProgressBar` (legacy) | `ProgressIndicator` (new) |
+| ---------------------- | ------------------------- |
+| `currentStep`          | `value`                   |
+| `totalSteps`           | `max`                     |
+| `variation="progress"` | `variation="continuous"`  |
+| `UNSAFE_className`     | `className`               |
+| `UNSAFE_style`         | `style`                   |
+
+## Mobile
+
+Mobile (`@jobber/components-native`) has its own `ProgressBar` with a richer
+API. The mobile `ProgressIndicator` counterpart is forthcoming as a separate
+deliverable.
+
+
+## Props
+
+### Web
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `value` | `number` | Yes | — | Current progress. Expected to be in the range `0..max` inclusive. |
+| `ariaLabel` | `string` | No | — | Accessible label exposed via `aria-label` on the root element. When omitted, defaults to `"{value}%"` when `max === 1... |
+| `className` | `string` | No | — | Custom class name merged onto the root element alongside the component's own classes. |
+| `max` | `number` | No | `100` | Maximum value. Pass `max={4}` with `value={2}` for "2 of 4 steps"; pass `value={75}` for "75%". |
+| `size` | `"base" | "small" | "smaller"` | No | `base` | Visual size. `smaller` renders at 4px tall, `small` at 8px, `base` at 16px. |
+| `style` | `CSSProperties` | No | — | Custom inline styles applied to the root element. |
+| `variation` | `"continuous" | "stepped"` | No | `continuous` | Visual variation: - `continuous` renders a single fill bar driven by `value / max`. - `stepped` renders `max` segment... |

package/dist/docs/index.md

@@ -73,6 +73,7 @@
 [Popover](./Popover/Popover.md)
 [product-vocabulary](./product-vocabulary/product-vocabulary.md)
 [ProgressBar](./ProgressBar/ProgressBar.md)
+[ProgressIndicator](./ProgressIndicator/ProgressIndicator.md)
 [Radii](./Radii/Radii.md)
 [RadioGroup](./RadioGroup/RadioGroup.md)
 [ResponsiveBreakpoint](./ResponsiveBreakpoint/ResponsiveBreakpoint.md)

package/dist/index.cjs

@@ -70,6 +70,7 @@ var MultiSelect = require('./MultiSelect-cjs.js');
 var Page = require('./Page-cjs.js');
 var Popover = require('./Popover-cjs.js');
 var ProgressBar = require('./ProgressBar-cjs.js');
+var ProgressIndicator = require('./ProgressIndicator-cjs.js');
 var RadioGroup = require('./RadioGroup-cjs.js');
 var ResponsiveSwitcher = require('./ResponsiveSwitcher-cjs.js');
 var LegacySelect = require('./LegacySelect-cjs.js');
@@ -316,6 +317,7 @@ exports.Popover = Popover.Popover;
 exports.usePopoverContext = Popover.usePopoverContext;
 exports.usePopoverStyles = Popover.usePopoverStyles;
 exports.ProgressBar = ProgressBar.ProgressBar;
+exports.ProgressIndicator = ProgressIndicator.ProgressIndicator;
 exports.RadioGroup = RadioGroup.RadioGroup;
 exports.RadioOption = RadioGroup.RadioOption;
 exports.ResponsiveSwitcher = ResponsiveSwitcher.ResponsiveSwitcher;

package/dist/index.d.mts

@@ -60,6 +60,7 @@ export * from "./MultiSelect";
 export * from "./Page";
 export * from "./Popover";
 export * from "./ProgressBar";
+export * from "./ProgressIndicator";
 export * from "./RadioGroup";
 export * from "./ResponsiveSwitcher";
 export * from "./LegacySelect";

package/dist/index.d.ts

@@ -60,6 +60,7 @@ export * from "./MultiSelect";
 export * from "./Page";
 export * from "./Popover";
 export * from "./ProgressBar";
+export * from "./ProgressIndicator";
 export * from "./RadioGroup";
 export * from "./ResponsiveSwitcher";
 export * from "./LegacySelect";

package/dist/index.mjs

@@ -68,6 +68,7 @@ export { M as MultiSelect } from './MultiSelect-es.js';
 export { P as Page } from './Page-es.js';
 export { P as Popover, u as usePopoverContext, a as usePopoverStyles } from './Popover-es.js';
 export { P as ProgressBar } from './ProgressBar-es.js';
+export { P as ProgressIndicator } from './ProgressIndicator-es.js';
 export { R as RadioGroup, a as RadioOption } from './RadioGroup-es.js';
 export { R as ResponsiveSwitcher } from './ResponsiveSwitcher-es.js';
 export { L as LegacySelect, S as Option } from './LegacySelect-es.js';

package/dist/styles.css

@@ -13104,6 +13104,107 @@ input.oOrjwubmsVA- {
           transform: rotate(-45deg);
 }
 
+/*
+ * ProgressIndicator
+ *
+ * Determinate progress, rendered as a horizontal bar. The component supports
+ * two variations:
+ *
+ *   - `continuous` — a single fill element whose width is driven by the
+ *     CSS-registered custom property `--progress-indicator--fill-amount` (a <number> from
+ *     0 to 100). The browser interpolates the number during a
+ *     `transition: width var(--timing-base) ease-out`.
+ *   - `stepped` — N presentational segment children, the first `value` of
+ *     which are filled. The outer shell is the flex container.
+ *
+ * Colour tokens mirror ActivityIndicator: fill / filled segments use
+ * --color-interactive--subtle; track / empty segments use
+ * --color-surface--active.
+ *
+ * The width transition is intentionally preserved under
+ * prefers-reduced-motion: reduce because the slide between progress values
+ * conveys functional information about progress (WCAG 2.3.3, "Animation from
+ * Interactions"). Removing it would make progress harder to perceive, not
+ * easier.
+ */
+
+/*
+ * Register --progress-indicator--fill-amount so the browser knows it is a real <number>
+ * and can interpolate between values during the width transition. Without
+ * this @property declaration the custom property is treated as an opaque
+ * string and the transition would snap rather than animate smoothly.
+ */
+
+@property --progress-indicator--fill-amount {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
+
+.-TBRV1VUsfc- {
+  --progress-indicator--height: 16px;
+
+  width: 100%;
+  height: 16px;
+  height: var(--progress-indicator--height);
+}
+
+.MStgN8AhV3s- {
+  --progress-indicator--height: 4px;
+}
+
+.iAlYWHjs6JQ- {
+  --progress-indicator--height: 8px;
+}
+
+.WWEzA1-OjSM- {
+  --progress-indicator--height: 16px;
+}
+
+/* Continuous: the indicator IS the track; the .fill child sits on top. */
+
+.r9ShSj58V6w- {
+  border-radius: calc(var(--progress-indicator--height) / 2);
+  overflow: hidden;
+  background-color: hsl(40, 9%, 85%);
+  background-color: var(--color-surface--active);
+}
+
+.Hsuq8zT-KzY- {
+  width: calc(var(--progress-indicator--fill-amount) * 1%);
+  height: 100%;
+  border-radius: inherit;
+  background-color: hsl(198, 35%, 21%);
+  background-color: var(--color-interactive--subtle);
+  transition: width 200ms ease-out;
+  transition: width var(--timing-base) ease-out;
+}
+
+/* Stepped: the indicator IS the flex container; segments are direct children. */
+
+.FB1e9bL90tI- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: row;
+      flex-direction: row;
+  gap: 8px;
+  gap: var(--space-small);
+}
+
+.bpLIiDGlsCs- {
+  height: 100%;
+  border-radius: calc(var(--progress-indicator--height) / 2);
+  background-color: hsl(40, 9%, 85%);
+  background-color: var(--color-surface--active);
+  -ms-flex: 1 1 0px;
+      flex: 1 1 0;
+}
+
+.bpLIiDGlsCs-._0FxmImvY-04- {
+  background-color: hsl(198, 35%, 21%);
+  background-color: var(--color-interactive--subtle);
+}
+
 .KZfSK2vhTyI- {
   --radio--checked-thickness: 6px;
   --radio-diameter: 20px;

package/dist/utils/meta/meta.json

@@ -203,6 +203,7 @@
     "Popover.DismissButton",
     "Popover.Provider",
     "ProgressBar",
+    "ProgressIndicator",
     "RadioGroup",
     "RadioOption",
     "ResponsiveSwitcher",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.24.0",
+  "version": "8.25.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -540,5 +540,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "a0a4e20fd87528ebfff6970e6566a1b94b927578"
+  "gitHead": "e3d3191e8f89a2d1d1ebde4fb8d93706ecfdd511"
 }