@jobber/components 8.24.1 → 8.25.1

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

@@ -28,6 +28,7 @@
 [Datepicker](./Datepicker/Datepicker.md)
 [DatePickerNotes](./DatePickerNotes/DatePickerNotes.md)
 [DescriptionList](./DescriptionList/DescriptionList.md)
+[Dialog](./Dialog/Dialog.md)
 [disabled-states](./disabled-states/disabled-states.md)
 [Disclosure](./Disclosure/Disclosure.md)
 [Divider](./Divider/Divider.md)
@@ -73,6 +74,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.1",
+  "version": "8.25.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -155,6 +155,11 @@
       "import": "./dist/DescriptionList/index.mjs",
       "require": "./dist/DescriptionList/index.cjs"
     },
+    "./Dialog": {
+      "types": "./dist/Dialog/index.d.ts",
+      "import": "./dist/Dialog/index.mjs",
+      "require": "./dist/Dialog/index.cjs"
+    },
     "./Disclosure": {
       "types": "./dist/Disclosure/index.d.ts",
       "import": "./dist/Disclosure/index.mjs",
@@ -540,5 +545,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "b17211eb3d332daef1d38c66b5677c30598331f3"
+  "gitHead": "1ad8858948625e5d646ba969560948576dc5e721"
 }