@jobber/components 8.24.0 → 8.24.2-visual-reg-5479aeb.18

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/Table/Table.md

@@ -25,9 +25,7 @@ distinctions in dollar amounts, inventory counts, and other key business data.
 
 To list more complex collections of information (such as multi-line content like
 a detailed property address), you may want to consider the
-[List](../List/List.md) component. If you have a small list of information with
-a 1:1 label-to-data relationship (for example, the issued and due dates on an
-invoice), consider using [DescriptionList](../DescriptionList/DescriptionList.md).
+[List](../List/List.md) component.
 
 
 ## Configuration

package/dist/docs/index.md

@@ -27,7 +27,7 @@
 [DataTable](./DataTable/DataTable.md)
 [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)
@@ -54,6 +54,7 @@
 [InputFile](./InputFile/InputFile.md)
 [InputGroup](./InputGroup/InputGroup.md)
 [InputNumber](./InputNumber/InputNumber.md)
+[InputNumberExperimental](./InputNumberExperimental/InputNumberExperimental.md)
 [InputPhoneNumber](./InputPhoneNumber/InputPhoneNumber.md)
 [InputText](./InputText/InputText.md)
 [InputTime](./InputTime/InputTime.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

@@ -3,7 +3,6 @@
 var ActivityIndicator = require('./ActivityIndicator-cjs.js');
 var AtlantisContext = require('./AtlantisContext-cjs.js');
 var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
-var updateTheme = require('./updateTheme-cjs.js');
 var Autocomplete = require('./Autocomplete-cjs.js');
 var Avatar = require('./Avatar-cjs.js');
 var Banner = require('./Banner-cjs.js');
@@ -33,7 +32,6 @@ require('@jobber/hooks');
 require('./DataTableTable-cjs.js');
 var reactTable = require('@tanstack/react-table');
 var DatePicker = require('./DatePicker-cjs.js');
-var DescriptionList = require('./DescriptionList-cjs.js');
 var dialogReturnFocus = require('./dialogReturnFocus-cjs.js');
 var Disclosure = require('./Disclosure-cjs.js');
 var Divider = require('./Divider-cjs.js');
@@ -70,6 +68,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');
@@ -214,8 +213,8 @@ exports.useAtlantisContext = AtlantisContext.useAtlantisContext;
 exports.AtlantisThemeContextProvider = AtlantisThemeContext.AtlantisThemeContextProvider;
 exports.THEME_CHANGE_EVENT = AtlantisThemeContext.THEME_CHANGE_EVENT;
 exports.atlantisThemeContextDefaultValues = AtlantisThemeContext.atlantisThemeContextDefaultValues;
+exports.updateTheme = AtlantisThemeContext.updateTheme;
 exports.useAtlantisTheme = AtlantisThemeContext.useAtlantisTheme;
-exports.updateTheme = updateTheme.updateTheme;
 exports.Autocomplete = Autocomplete.Autocomplete;
 exports.Avatar = Avatar.Avatar;
 exports.Banner = Banner.Banner;
@@ -248,7 +247,6 @@ Object.defineProperty(exports, "createColumnHelper", {
     get: function () { return reactTable.createColumnHelper; }
 });
 exports.DatePicker = DatePicker.DatePicker;
-exports.DescriptionList = DescriptionList.DescriptionList;
 exports.Dialog = dialogReturnFocus.Dialog;
 exports.getDialogReturnFocus = dialogReturnFocus.getDialogReturnFocus;
 exports.getFirstFocusableWithin = dialogReturnFocus.getFirstFocusableWithin;
@@ -316,6 +314,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

@@ -23,7 +23,6 @@ export * from "./DataDump";
 export * from "./DataList";
 export { DataTable, createColumnHelper } from "./DataTable";
 export * from "./DatePicker";
-export * from "./DescriptionList";
 export * from "./Dialog";
 export * from "./Disclosure";
 export * from "./Divider";
@@ -60,6 +59,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

@@ -23,7 +23,6 @@ export * from "./DataDump";
 export * from "./DataList";
 export { DataTable, createColumnHelper } from "./DataTable";
 export * from "./DatePicker";
-export * from "./DescriptionList";
 export * from "./Dialog";
 export * from "./Disclosure";
 export * from "./Divider";
@@ -60,6 +59,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

@@ -1,7 +1,6 @@
 export { A as ActivityIndicator } from './ActivityIndicator-es.js';
 export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from './AtlantisContext-es.js';
-export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, u as useAtlantisTheme } from './AtlantisThemeContext-es.js';
-export { u as updateTheme } from './updateTheme-es.js';
+export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, b as updateTheme, u as useAtlantisTheme } from './AtlantisThemeContext-es.js';
 export { A as Autocomplete } from './Autocomplete-es.js';
 export { A as Avatar } from './Avatar-es.js';
 export { B as Banner } from './Banner-es.js';
@@ -31,7 +30,6 @@ import '@jobber/hooks';
 import './DataTableTable-es.js';
 export { createColumnHelper } from '@tanstack/react-table';
 export { D as DatePicker } from './DatePicker-es.js';
-export { D as DescriptionList } from './DescriptionList-es.js';
 export { D as Dialog, g as getDialogReturnFocus, a as getFirstFocusableWithin } from './dialogReturnFocus-es.js';
 export { D as Disclosure } from './Disclosure-es.js';
 export { D as Divider } from './Divider-es.js';
@@ -68,6 +66,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/isTypedArray-es.js

@@ -586,4 +586,4 @@ var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedA
 
 var isTypedArray_1 = isTypedArray;
 
-export { _isPrototype as _, isArray_1 as a, isArrayLike_1 as b, isBufferExports as c, isTypedArray_1 as d, _overArg as e, _getNative as f, _Map as g, _toSource as h, isArguments_1 as i, isFunction_1 as j, _baseUnary as k, isLength_1 as l, _nodeUtilExports as m };
+export { _isPrototype as _, isArray_1 as a, isArrayLike_1 as b, isBufferExports as c, isTypedArray_1 as d, _overArg as e, _getNative as f, _Map as g, _toSource as h, isArguments_1 as i, _baseUnary as j, isFunction_1 as k, isLength_1 as l, _nodeUtilExports as m };

package/dist/primitives/InputNumberExperimental/InputNumberExperimental.d.ts

@@ -1,5 +1,12 @@
+import type { Ref } from "react";
 import React from "react";
 import type { InputNumberExperimentalAffixCompoundProps, InputNumberExperimentalDescriptionProps, InputNumberExperimentalErrorProps, InputNumberExperimentalFooterProps, InputNumberExperimentalGroupProps, InputNumberExperimentalInputProps, InputNumberExperimentalLabelProps, InputNumberExperimentalLoadingProps, InputNumberExperimentalProps, InputNumberExperimentalRef, InputNumberExperimentalStepButtonProps, InputNumberExperimentalStepperProps, InputNumberExperimentalWrapperProps } from "./types";
+declare function InputNumberExperimentalWrapper({ ref, ...props }: InputNumberExperimentalWrapperProps & {
+    readonly ref?: Ref<InputNumberExperimentalRef>;
+}): React.JSX.Element;
+declare namespace InputNumberExperimentalWrapper {
+    var displayName: string;
+}
 declare function InputNumberExperimentalGroup({ children, className, style, }: InputNumberExperimentalGroupProps): React.JSX.Element;
 declare namespace InputNumberExperimentalGroup {
     var displayName: string;
@@ -44,18 +51,27 @@ declare function InputNumberExperimentalAffixCompound({ variation, label, icon,
 declare namespace InputNumberExperimentalAffixCompound {
     var displayName: string;
 }
-export declare const InputNumberExperimental: React.ForwardRefExoticComponent<InputNumberExperimentalProps & React.RefAttributes<InputNumberExperimentalRef>> & {
-    Wrapper: React.ForwardRefExoticComponent<InputNumberExperimentalWrapperProps & React.RefAttributes<InputNumberExperimentalRef>>;
-    Group: typeof InputNumberExperimentalGroup;
-    Footer: typeof InputNumberExperimentalFooter;
-    Input: typeof InputNumberExperimentalInput;
-    Label: typeof InputNumberExperimentalLabel;
-    Description: typeof InputNumberExperimentalDescription;
-    Error: typeof InputNumberExperimentalError;
-    Loading: typeof InputNumberExperimentalLoading;
-    Stepper: typeof InputNumberExperimentalStepper;
-    Increment: typeof InputNumberExperimentalIncrement;
-    Decrement: typeof InputNumberExperimentalDecrement;
-    Affix: typeof InputNumberExperimentalAffixCompound;
-};
-export type { InputNumberExperimentalAffix, InputNumberExperimentalProps, InputNumberExperimentalRef, InputNumberExperimentalSuffix, InputNumberExperimentalSuffixProp, InputNumberExperimentalWrapperProps, } from "./types";
+/**
+ * Sugar layer: composes the parts from props. This is the same composition a
+ * consumer would write by hand with `<InputNumberExperimental.Wrapper>` and the
+ * parts — to customize a single piece, copy this tree and swap that part.
+ */
+declare function InputNumberExperimental({ ref, ...props }: InputNumberExperimentalProps & {
+    readonly ref?: Ref<InputNumberExperimentalRef>;
+}): React.JSX.Element;
+declare namespace InputNumberExperimental {
+    var displayName: string;
+    var Wrapper: typeof InputNumberExperimentalWrapper;
+    var Group: typeof InputNumberExperimentalGroup;
+    var Footer: typeof InputNumberExperimentalFooter;
+    var Input: typeof InputNumberExperimentalInput;
+    var Label: typeof InputNumberExperimentalLabel;
+    var Description: typeof InputNumberExperimentalDescription;
+    var Error: typeof InputNumberExperimentalError;
+    var Loading: typeof InputNumberExperimentalLoading;
+    var Stepper: typeof InputNumberExperimentalStepper;
+    var Increment: typeof InputNumberExperimentalIncrement;
+    var Decrement: typeof InputNumberExperimentalDecrement;
+    var Affix: typeof InputNumberExperimentalAffixCompound;
+}
+export { InputNumberExperimental };

package/dist/primitives/InputNumberExperimental/types.d.ts

@@ -63,7 +63,6 @@ export interface InputNumberExperimentalWrapperProps extends InputNumberExperime
      */
     readonly loading?: boolean;
     readonly max?: number;
-    readonly maxLength?: number;
     readonly min?: number;
     readonly name?: string;
     readonly onBlur?: (event?: FocusEvent<HTMLInputElement>) => void;

package/dist/styles.css

@@ -4055,7 +4055,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
    */
 }
 
-.Qf3IFhKJwQ0-:has(~ ._868PDAA3U2M-[data-nested-drawer-open]) {
+.Qf3IFhKJwQ0-:has(~ .U069n8h0urk- ._868PDAA3U2M-[data-nested-drawer-open]) {
     background-color: transparent;
   }
 
@@ -4154,6 +4154,24 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   }
 }
 
+/*
+ * Positioning container for the popup, spanning the whole screen. Base UI's
+ * Drawer expects the popup to render within a viewport (it enables swipe
+ * handling and touch scroll locking). The popup positions itself (fixed, pinned
+ * to the bottom); the viewport only establishes the full-screen area above the
+ * backdrop.
+ */
+
+.U069n8h0urk- {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+}
+
 .yL7--3ni8BM- {
   display: -ms-flexbox;
   display: flex;
@@ -4176,6 +4194,11 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   line-height: 0;
 }
 
+.yL7--3ni8BM- p {
+  margin-top: 1px;
+  margin-top: var(--space-minuscule);
+}
+
 .qWsLxPjCBI8- {
   display: inline-block;
   margin-bottom: 4px;
@@ -10365,47 +10388,6 @@ h2.react-datepicker__current-month {
   color: var(--color-heading);
 }
 
-.BkruJ2-bRWg- {
-  margin: 0;
-}
-
-.tpCvfS7kyDQ- {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  padding: 8px 0;
-  padding: var(--space-small) 0;
-  border-bottom: 1px solid hsl(200, 13%, 87%);
-  border-bottom: var(--border-base) solid var(--color-border);
-}
-
-.tpCvfS7kyDQ-:first-child {
-  padding-top: 0;
-}
-
-.tpCvfS7kyDQ-:last-child {
-  padding-bottom: 0;
-  border-bottom: none;
-}
-
-.tpCvfS7kyDQ- dd {
-  min-width: calc(16px * 7.5);
-  min-width: calc(var(--base-unit) * 7.5);
-  box-sizing: border-box;
-  padding-right: 8px;
-  padding-right: var(--space-small);
-  -webkit-margin-start: 0;
-          margin-left: 0;
-  -ms-flex: 1 1 60%;
-      flex: 1 1 60%;
-}
-
-.tpCvfS7kyDQ- dt {
-  -ms-flex: 1 1 40%;
-      flex: 1 1 40%;
-}
-
 /* Dialog Sizes */
 .uYYyCR3l6E8- {
   --dialog-popup-max-width: 440px;
@@ -10417,8 +10399,14 @@ h2.react-datepicker__current-month {
   --dialog-popup-max-width: 1032px;
 }
 .nJoCr8oWJ7w- {
-  --dialog-popup-width: 100vw;
-  --dialog-popup-max-width: 100vw;
+  /* Use 100% (not 100vw) so the popup fills the viewport's scrollable content
+     box rather than the full vw since the vertical scrollbar takes up layout space */
+  --dialog-popup-width: 100%;
+  --dialog-popup-max-width: 100%;
+  /* Always cap the popup to the viewport height for full-screen, regardless of
+     whether any region is sticky. Without this, the "nothing-sticky" scroll
+     composition will not be able to scroll. */
+  --dialog-popup-max-height: 100dvh;
   --dialog-popup-min-height: 100dvh;
   /* No margins full screen — the viewport also drops its padding-block for
      fullScreen (below) so the popup sits flush against every edge. Zeroing the
@@ -10492,12 +10480,8 @@ h2.react-datepicker__current-month {
   padding: 0 24px 24px;
   padding: 0 var(--space-large) var(--space-large);
 }
-/* Slide the bottom sheet up from the bottom on open/close. */
+/* Slide the sheet up on open, down on close. */
 .vmcZRwOcNMo- {
-  -webkit-transform: translateY(0px);
-  -webkit-transform: translateY(var(--drawer-swipe-movement-y, 0px));
-          transform: translateY(0px);
-          transform: translateY(var(--drawer-swipe-movement-y, 0px));
   transition: -webkit-transform 200ms ease;
   transition: -webkit-transform var(--timing-base) ease;
   transition: transform 200ms ease;
@@ -10510,12 +10494,44 @@ h2.react-datepicker__current-month {
     -webkit-transform: translateY(100%);
             transform: translateY(100%);
   }
+/*
+   * Only transform the sheet mid-swipe, never while it's just sitting open.
+   * Why it matters: any transform on this element makes its `position: fixed`
+   * children size themselves to the sheet instead of the screen. FilterPicker's
+   * click-away layer is one of those fixed, full-screen children — with a
+   * transform here it shrinks to the sheet's box, so tapping the backdrop misses
+   * it, hits the sheet, and closes the whole sheet instead of just the picker.
+   * A swipe is the one time we need the transform, and there's no open picker to
+   * break then. base-ui adds `data-swiping` and updates the movement variable
+   * while a swipe is happening.
+   */
+.vmcZRwOcNMo-[data-swiping] {
+    -webkit-transform: translateY(0px);
+    -webkit-transform: translateY(var(--drawer-swipe-movement-y, 0px));
+            transform: translateY(0px);
+            transform: translateY(var(--drawer-swipe-movement-y, 0px));
+  }
 /* Full-screen bottom sheet */
 .vmcZRwOcNMo-[data-size="fullScreen"] {
   height: 100dvh;
   max-height: 100dvh;
   border-radius: 0;
 }
+/* The sheet content renders inside a `Drawer.Content` region (`data-drawer-content`,
+   swipe-ignored so a nested floater can catch an outside press). It's a direct
+   child of the popup, so pass the popup's flex column through it — otherwise the
+   Header/ScrollArea/Footer no longer flex against the popup and the scroll region
+   can't fill/scroll (most visibly on fullScreen at 100dvh). */
+.vmcZRwOcNMo- > [data-drawer-content] {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  min-height: 0;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  overflow: hidden;
+}
 /* Scroll divider — shown on a sticky Header/Footer only while the scroll region
    actually overflows (BaseUI sets `data-has-overflow-y` on the ScrollArea root
    when its content overflows). */
@@ -10584,8 +10600,12 @@ h2.react-datepicker__current-month {
     background-color: transparent;
     backdrop-filter: none;
   }
-/* Bottom sheet backdrop */
-[data-testid="ATL-BottomSheet-Backdrop"]:has(~ [data-dialog-variant="sheet"]) {
+/* Bottom sheet backdrop. The sheet popup (`data-dialog-variant="sheet"`) renders
+   inside the drawer viewport, which is the backdrop's following sibling, so
+   target the viewport by its testid then match the sheet popup within it. */
+[data-testid="ATL-BottomSheet-Backdrop"]:has(
+    ~ [data-testid="ATL-BottomSheet-Viewport"] [data-dialog-variant="sheet"]
+  ) {
   background-color: rgba(121, 119, 114, 0.48);
   backdrop-filter: blur(2px);
 }
@@ -13104,6 +13124,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;