@jobber/components 9.16.3 → 9.16.5

package/dist/ActivityIndicator/ActivityIndicator.d.ts

@@ -8,8 +8,9 @@ export interface ActivityIndicatorProps {
      */
     readonly size?: "small" | "base";
     /**
-     * Accessible label exposed via `aria-label` on the root element. Override
-     * to localize or to describe the specific activity (e.g. "Uploading file").
+     * Accessible label exposed via `aria-label` on the root element. Defaults
+     * to the localized "Loading" message. Override it to describe the specific
+     * activity (e.g. "Uploading file").
      *
      * @default "Loading"
      */
@@ -30,7 +31,7 @@ export interface ActivityIndicatorProps {
  * external system.
  *
  * For determinate progress (a known fraction completed), use
- * `ProgressIndicator` instead (forthcoming).
+ * `ProgressIndicator` instead.
  *
  * For now, the legacy `Spinner` component also remains available; new code
  * should prefer `ActivityIndicator`.

package/dist/ActivityIndicator-cjs.js

@@ -14,7 +14,7 @@ var styles = {"indicator":"YST686vLR3c-","screenReaderOnly":"MmNHh-oCyxc-","smal
  * external system.
  *
  * For determinate progress (a known fraction completed), use
- * `ProgressIndicator` instead (forthcoming).
+ * `ProgressIndicator` instead.
  *
  * For now, the legacy `Spinner` component also remains available; new code
  * should prefer `ActivityIndicator`.

package/dist/ActivityIndicator-es.js

@@ -12,7 +12,7 @@ var styles = {"indicator":"YST686vLR3c-","screenReaderOnly":"MmNHh-oCyxc-","smal
  * external system.
  *
  * For determinate progress (a known fraction completed), use
- * `ProgressIndicator` instead (forthcoming).
+ * `ProgressIndicator` instead.
  *
  * For now, the legacy `Spinner` component also remains available; new code
  * should prefer `ActivityIndicator`.

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -5,101 +5,79 @@ directly control or measure — loading, fetching, or waiting on an external
 system.
 
 Use `ActivityIndicator` when the loading time or fraction of progress is
-unknown. If you know the fraction of progress (for example, "3 of 4 files
-uploaded"), use `ProgressBar` instead. A `ProgressIndicator` counterpart that
-will subsume `ProgressBar` under the new Indicators naming is forthcoming.
+unknown. When the amount completed is known, use `ProgressIndicator` instead.
 
 ## Design & usage guidelines
 
-The default `ActivityIndicator` size is `base` (44px) and can be used in most
-cases. The `small` size (28px) should be used on individual elements of an
-interface (e.g. inside a `Button` or `Card`) or when sitting next to short
-inline text.
+Web and mobile share the same visual language: a non-interactive ring with a
+muted track and an animated foreground arc. The platform implementations use
+different sizes and motion timing so each reads appropriately in its context.
 
-Layout is the consumer's responsibility — `ActivityIndicator` does not expose an
-`inline` prop. Place it inside your own flex / inline-block container, or pass a
-`style`, to control surrounding layout.
-
-## Accessibility
-
-`ActivityIndicator` announces itself to assistive technology on every platform:
+### Web
 
-* `accessibilityRole="progressbar"` and `accessibilityState={{ busy: true }}`
-  mark the component as an ongoing indeterminate activity.
-* `accessibilityLabel` defaults to a localized `"Loading"` string via
-  `useAtlantisI18n("loading")`. Pass a custom `accessibilityLabel` to describe
-  the specific activity (e.g. `accessibilityLabel="Uploading file"`).
-* On mount and whenever the label changes, the component calls
-  `AccessibilityInfo.announceForAccessibility` so VoiceOver and TalkBack
-  announce the label once.
-
-The indicator is not focusable and is not in the accessibility navigation order
-beyond the mount-time announcement.
-
-### Reduced motion
-
-When the operating system reports the Reduce Motion accessibility setting, the
-indicator hides the rocking and rotating layers, repaints a single static ring
-in the icon foreground colour, and gently pulses its opacity so the indicator
-still reads as "busy" without rotational motion. Detection is reactive — the
-component responds to OS toggles without requiring a remount.
-
-## Cross-platform parity
-
-`ActivityIndicator` renders the same Material Design 3 three-layer indeterminate
-ring on iOS, Android, and web (`@jobber/components`). The visual identity,
-sizes, motion durations, and reduced-motion fallback are unified across
-platforms. Public prop names diverge to follow each platform's native
-conventions (`accessibilityLabel` here vs `ariaLabel` on web; `style` here vs
-`className` + `style` on web).
+The default `base` size is 32px. Use the 16px `small` size beside short text or
+inside compact interface elements such as buttons.
 
-Use `ActivityIndicator` when the loading time or fraction of progress is
-unknown. If you know the fraction of progress (for example, "3 of 4 files
-uploaded"), use `ProgressBar` instead. A `ProgressIndicator` counterpart that
-will subsume `ProgressBar` under the new naming is forthcoming.
+Layout is the consumer's responsibility. Place the indicator in a suitable
+container, or use `className` and `style`, to control alignment and spacing.
 
-## Design & usage guidelines
+### Mobile
 
-The default `ActivityIndicator` size is `base` (32px) and can be used in most
-cases. The `small` size (16px) should be used on individual elements of an
-interface (e.g. inside a `Button` or `Card`) or when sitting next to short
-inline text.
+The default `base` size is 44px. Use the 28px `small` size for compact mobile
+interfaces. Layout is controlled by the surrounding `View` or by passing
+`style`.
 
-Layout is the consumer's responsibility — `ActivityIndicator` does not expose an
-`inline` prop. Place it inside your own flex / inline-block container, or pass a
-`className` / `style`, to control surrounding layout.
+Both implementations use `color-text--secondary` for the active arc and
+`color-surface--active` for the track, allowing the indicator to adapt across
+supported themes and surfaces.
 
 ## Accessibility
 
-`ActivityIndicator` announces itself politely to assistive technology:
+### Web
 
-* `role="status"` marks the element as a polite live region, appropriate for a
-  non-urgent loading state.
-* `aria-label` defaults to the literal English string `"Loading"`. Pass a custom
-  `ariaLabel` to localize or to describe the specific activity (e.g.
-  `ariaLabel="Uploading file"`).
+* `role="status"` creates a polite live region for non-urgent loading states.
+* `ariaLabel` defaults to the localized `"Loading"` message. Override it when a
+  more specific description is helpful, such as `"Uploading file"`.
+* Visually hidden label text ensures the status is announced when it mounts.
 
 The indicator does not participate in the keyboard tab order.
 
-### Reduced motion
+### Mobile
 
-When the user's operating system reports
-[`prefers-reduced-motion: reduce`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion),
-the indicator hides its rocking and rotating layers, repaints a single static
-ring in the icon foreground colour, and gently pulses its opacity so the
-indicator still reads as "busy" without rotational motion.
+* `accessibilityRole="progressbar"` and `accessibilityState={{ busy: true }}`
+  identify an ongoing indeterminate activity.
+* `accessibilityLabel` defaults to the localized `"Loading"` message. Override
+  it to describe a specific activity.
+* The resolved label is announced when the indicator mounts and whenever the
+  label changes.
 
-## Relationship to Spinner
+The indicator is non-interactive. It exposes one accessible progress element and
+does not require an action from the user.
+
+## Reduced motion
+
+The indicator automatically follows the operating system's reduced-motion
+preference. Web reads `prefers-reduced-motion`; mobile reacts to the iOS Reduce
+Motion or Android Remove Animations setting.
 
-The legacy [Spinner](../Spinner/Spinner.md) component remains available and
-unchanged. New code should prefer `ActivityIndicator`. A follow-up change is
-expected to deprecate `Spinner` in favour of `ActivityIndicator`.
+With reduced motion enabled, the rotating and rocking layers are replaced by a
+single static ring that gently pulses its opacity. This preserves the busy state
+without rotational motion.
 
-## Mobile
+## Cross-platform behavior
+
+| Aspect           | Web                     | Mobile                                  |
+| ---------------- | ----------------------- | --------------------------------------- |
+| Sizes            | 16px small, 32px base   | 28px small, 44px base                   |
+| Accessible label | `ariaLabel`             | `accessibilityLabel`                    |
+| Default label    | Localized `"Loading"`   | Localized `"Loading"`                   |
+| Styling          | `className` and `style` | `style`                                 |
+| Reduced motion   | CSS media query         | Operating-system setting via Reanimated |
+
+## Relationship to Spinner
 
-On mobile (`@jobber/components-native`), `ActivityIndicator` uses the
-[ActivityIndicator](https://reactnative.dev/docs/activityIndicator) core
-component from React Native.
+The legacy [Spinner](../Spinner/Spinner.md) remains available during migration but
+is deprecated. New code should use `ActivityIndicator`.
 
 ## Mockup
 
@@ -110,7 +88,7 @@ component from React Native.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `ariaLabel` | `string` | No | `"Loading"` | Accessible label exposed via `aria-label` on the root element. Override to localize or to describe the specific activ... |
+| `ariaLabel` | `string` | No | `"Loading"` | Accessible label exposed via `aria-label` on the root element. Defaults to the localized "Loading" message. Override ... |
 | `className` | `string` | No | — | Custom class name merged onto the root element alongside the component's own classes. |
 | `size` | `"base" | "small"` | No | `base` | Visual size. `base` renders at 32px, `small` renders at 16px. |
 | `style` | `CSSProperties` | No | — | Custom inline styles applied to the root element. |

package/dist/docs/Banner/Banner.md

@@ -166,6 +166,13 @@ See
 [Actions in Banners](/storybook/mobile/?path=/story/components-status-and-feedback-banner--actions-in-banners)
 for an example.
 
+### Dismissal (mobile)
+
+Set `dismissible` to render a dismiss button in the top-right corner of the
+Banner. The dismiss button hides the Banner and calls `onDismiss` when pressed.
+If the Banner also has an `action`, pressing the dismiss button does not trigger
+the action.
+
 ## Component customization
 
 ### Composable usage

package/dist/docs/ProgressIndicator/ProgressIndicator.md

@@ -58,13 +58,10 @@ The indicator does not participate in the keyboard tab order.
 
 ### Reduced motion
 
-The width transition between `value` updates is intentionally **preserved**
-under
+The width transition between `value` updates is disabled 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.
+The fill updates immediately to the new value, so current progress remains
+visible without interpolation. The stepped variation does not animate.
 
 ## Relationship to ProgressBar
 

package/dist/styles.css

@@ -15046,11 +15046,8 @@ input.oOrjwubmsVA- {
  * --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.
+ * The width transition is disabled when the user prefers reduced motion. The
+ * fill still updates to the current value without interpolating between values.
  */
 
 /*
@@ -15103,6 +15100,12 @@ input.oOrjwubmsVA- {
   transition: width var(--timing-base) ease-out;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .Hsuq8zT-KzY- {
+    transition: none;
+  }
+}
+
 /* Stepped: the indicator IS the flex container; segments are direct children. */
 .FB1e9bL90tI- {
   display: -ms-flexbox;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.16.3",
+  "version": "9.16.5",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -553,5 +553,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "8f831f66d1314ac6df0dd80e2e468841223b5cbd"
+  "gitHead": "b499bb6c3219b55c6de2614a8d83b44a4800980b"
 }