pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.62

package/CHANGELOG.md

@@ -18,6 +18,65 @@ next major.
 
 ### Added
 
+- **`formatDate` / `formatDateTime` / `formatDateRange`**: Intl-based date text, en-IN by default ("09 Oct 2026"),
+  with `locale`, `timeZone`, `year: "never"`, `time: "12h" | "24h"` and a `fallback` (default "—") for null or
+  invalid input instead of "Invalid Date". A bare `YYYY-MM-DD` is that calendar day in every zone; ranges write a
+  shared month and year once. Output is the same across browser and Node ICU versions (no "Sept", no thin or
+  narrow spaces).
+- **`TimePicker`**: inline hour, minute and AM/PM selects as a field (label, required, error, helper), with
+  `use24Hour`, `minuteStep`, `baseDate` and `name`. Same look as DatePicker's time selects. `TimePickerProps` now
+  describes this component; the old `date`, `dateFormat` and `disabled` fields still type-check as deprecated
+  aliases.
+- **`TagInput`**: free-text chips. Enter or comma adds, Backspace removes the last, a pasted list splits on commas
+  and new lines; optional `validate`, `maxTags` and `allowDuplicates`. Same look as `MultiSelect`, without its
+  email lock.
+- **`IconButton`** is now owned: it renders exactly what the Chakra `IconButton` rendered (same props, theme,
+  sizes `xs 24 · sm 32 · md 40 · lg 48 · xl 56`, `isLoading` keeps the box) and, in development, warns once per
+  mount when it has neither `aria-label` nor `aria-labelledby`. `aria-label` is optional in its type.
+- **`FormField`**: label, required asterisk, helper text and error message around any one control. A single
+  child element receives `id`, `aria-labelledby`, `aria-describedby`, `aria-invalid` and `aria-required`, or pass
+  a function that places them on a composite. `TextInput` inside inherits the error and required state.
+  `layout="horizontal"` puts the label in a `labelWidth` column (default 12rem) from `md` up. Root attributes
+  and `ref` land on the root `div`.
+- **`VisuallyHidden`**: text for screen readers only, pinned to the viewport so a hidden live region can never
+  extend a scrolled page. It takes `as`, `ref`, every attribute and style prop.
+- **`SkipLink`**: a "Skip to main content" link that paints nothing until keyboard focus, then shows top-left on
+  the `skipLink` layer. Activating it focuses `#targetId` (default `main-content`) without changing the URL hash.
+- **`Pagination`**: standalone, controlled page navigation. Numbered pages collapse behind ellipses (first
+  and last always show, `siblingCount` defaults to 1), with previous and next buttons and an optional
+  rows-per-page picker (`pageSizeOptions` + `pageSize` + `onPageSizeChange`). `page` is 1-based; the count
+  comes from `pageCount` or from `totalItems` + `pageSize`. `size` follows the Button scale, `isDisabled`
+  disables the pager, `labels` overrides the names. It renders a named `nav` of real buttons and the
+  current page carries `aria-current="page"`. `Table` keeps its own pager unchanged.
+- **`ChoiceCard` / `ChoiceCardGroup`**: radio cards for picking one of a few options that each need a line of
+  explanation. Group: `value` / `defaultValue` / `onValueChange`; card: `label`, `description`, `icon`,
+  `disabled`. One tab stop; arrows, Home and End move focus and selection. Same look as `PaymentOption`.
+- **Plain HTML attributes on the page primitives**: `PageHeader`, `StatCard`, `SaveBar`, `EmptyState`,
+  `DescriptionList`, `FilterBar` and `Skeletons` pass `id`, `className`, `style`, `data-*`, `aria-*` and
+  event handlers to their root element; the component's own props still win and Chakra style props are
+  still not accepted.
+- **`ref` forwarding**: `Checkbox`, `RadioButton`, `ToggleSwitch` and `DatePicker` (single, range and time,
+  including the deep-imported `SingleDatePicker` / `RangeDatePicker` / `TimeOnlyPicker`) forward to their
+  native `<input>`; `SegmentedControl` to its `role="radiogroup"` root; `Tab` to its `role="tab"` button;
+  `Avatar` and `Tag` to their root element.
+- **`PinInput` `error`, `errorMessage`, `helperText` and `isDisabled`**: the message renders under the
+  cells and every digit gets `aria-invalid` / `aria-describedby`.
+- **`WizardDialog` / `Wizard` `finishDisabled` and `finishBlockedReason`**: disable Finish on the last
+  step (a pending upload, say) and show why beside it; the reason is Finish's `aria-describedby`.
+  Back and the stepper keep working; nothing changes when they are not passed.
+- **`CircularProgress` `size` takes a px number** (clamped to 24..160) as well as `sm | md | lg`; stroke
+  and label scale with it (`CircularProgressDiameter` type). The presets render exactly as before.
+- **Token foundation** (web premium/perf campaign; nothing changes on screen until you use them):
+  `RADIUS_ROLE` (radius by surface role), `BORDER_WIDTHS` (px hairline), `DISABLED_OPACITY` (0.5),
+  `NUMERIC_TEXT` (tabular figures), `zIndices.popoverNested` (1510), `fontSizes["xs-minus"]` (11px) and
+  `fontSizes["xs-plus"]` (13px), and `TEXT_STYLES` bound as Chakra `textStyles` (`title`, `heading`,
+  `subheading`, `body`, `ui`, `label`, `caption`, `overline`). Motion: `MOTION_MS.enter` / `.exit`
+  (200ms), `MOTION_BEZIER`, `MOTION_EASE_OUT`, `MOTION_EASE_IN`, `MOTION_LOOP_MS`, `motionTransition()`;
+  `transitionFor` takes an optional curve. `shadowsFor(mode)` returns the shadow ramp a theme carries.
+  Opt-in `reducedMotion="global"` on `PixelizeThemeProvider` and `createBrandTheme` adds one
+  document-wide `prefers-reduced-motion` rule; `pz-motion-keep` (`MOTION_KEEP_CLASS`) opts an element out.
+  The default is unchanged. `CustomThemeProps` gains `zIndices.popoverNested` and the two font sizes, so
+  code that hand-builds a full `CustomThemeProps` needs those keys.
 - **HRMS library requests** — a navigation launcher, key caps, a merge-field `Editor`, a wizard and
   smaller gaps found by the HRMS migration:
   - `NavLauncher` — full-height navigation launcher (browse modules, pins, Frequent, Recent, search
@@ -205,6 +264,52 @@ next major.
 
 ### Changed
 
+- **Performance, no visual change** (web premium/perf campaign):
+  - Theme colour math is memoised (`resolveFilledSurface`, `liftToContrast`, `softenToContrast`,
+    `resolveSoftTone`, luminance) in bounded, content-keyed caches: the hot calls are 5-20x faster and
+    restyling 50 `Button`s and 50 `Checkbox`es dropped from about 1.4 ms to 0.15 ms.
+  - Brand palettes (`lightPalettes`, `darkPalettes`, `palettes`, `<brand>Dark`) and the eight
+    non-default light themes are built on first read instead of at import; keys, key order, values and
+    object identity are unchanged, and importing the theme module is about 2x faster. The `ThemeSwitcher`
+    brand picker no longer builds every brand's Chakra theme when it mounts.
+  - Themes from `createBrandTheme` cache each component style function's output per theme, keyed on the
+    props that function reads: output is identical and style resolution per component render is about 2x
+    faster.
+  - Switching light/dark no longer blocks: the switcher repaints first and the app re-themes in an
+    interruptible render. Document `color-scheme`, `data-mode` and the `--color-*` variables follow the
+    new palette together, never ahead of it. `PixelizeThemeProvider` memoises its Chakra subtree, so the urgent
+    half of a switch re-renders only the switcher.
+  - `KanbanBoard` adopts a new `data` prop during render instead of in an effect, so a board whose data
+    follows the theme renders once per theme flip instead of twice.
+  - `Table`: passing an equal `columns` array again no longer re-renders every visible row; column
+    search popovers and row action menus mount their popover only while open (closed rows register no
+    global listeners); virtualised rows are measured through one shared `ResizeObserver` with no forced
+    layout read on mount.
+  - `ToolTip` mounts Chakra's tooltip only after the first hover or focus of its trigger; until then
+    (and while disabled or without a label) it renders just the child, with no document listeners.
+  - `SideBar`: the swipe-to-close drag no longer re-renders the sidebar or creates a CSS rule per
+    pointer move; row labels share one `ResizeObserver` and pause measuring while the rail width
+    animates, and their tooltips arm on first use. `useIsTruncated` uses a single shared
+    `ResizeObserver`; its signature is unchanged.
+  - `SearchSelect` option rows are memoised, so hovering, ArrowDown and toggling an option re-render only
+    the rows whose state changed (300 options: 300 row renders per hover to 1-2), and the menu's
+    scroll-driven position is an inline style instead of a new Emotion class per position.
+  - `KanbanBoard`: hovering a column and expanding a card no longer re-render the whole board (4 x 30
+    board, hover sweep: 960 card renders to 0); virtualized cards share one `ResizeObserver`.
+  - `Search` instances share one window `keydown` listener for Ctrl+K (it was one per instance);
+    with several on a page the last mounted still takes focus.
+  - `Dropdown` and `SelectSearch` add their outside-click `document` listener only while open, so closed
+    instances cost nothing on every page click.
+  - `MediaVideoPlayer` and `MediaAudioPlayer` no longer re-render the whole player on each `timeupdate`;
+    only the scrubber and the time readout update.
+  - `RangeSlider`, `MediaImageViewer` (pan/zoom), `FilterSidebar` (range slider), the media scrubber and
+    the `Dropdown` menu position apply per-frame values as inline styles, so dragging, panning and
+    scrolling no longer insert a CSS rule per value (40 slider moves used to leave 160 rules behind).
+  - `Notification` and `UpgradeButton`: the card and dismiss control transition named properties instead
+    of `all` (same 0.2s ease), and both drop their transitions, the shimmer sweep and the hover lift under
+    `prefers-reduced-motion`.
+  - `CalendarGrid` reuses `Intl.DateTimeFormat` instances per locale and options (was about 70 per
+    month render). `Toaster` cards no longer hold a permanent `will-change` layer.
 - **`PageHeader` `actionsLayout` defaults to `"auto"`**: at `md` and up the actions wrap below the
   title when they do not fit (before, they squeezed the title). Identical whenever title and
   actions fit on one row; pass `actionsLayout="inline"` for the old behaviour.
@@ -270,6 +375,49 @@ next major.
 
 ### Fixed
 
+- **Field helper text no longer leaves a dangling `<id>-helptext` in `aria-describedby`** when a field with an
+  explicit `id` sits inside a consumer `FormControl` (`TextInput` and every field rendering
+  `FieldMessage`/`HelperText`).
+- **`SearchSelect` and `Select` (`native={false}`) multi rows**: the decorative checkbox is no longer a focusable,
+  unnamed control nested in the option; the row's `role="option"` with `aria-selected` is the single accessible
+  control. No visual change.
+- **`SearchSelect`'s open listbox and `Select`'s popup dialog have an accessible name**, from `label`, then
+  `aria-label`, then `placeholder`.
+- **`WorkspaceWindow`'s dialog is named by its visible title**; while a window is open the page behind it is
+  `aria-hidden`, as for any modal.
+- **`CustomModulesTable`'s edit-module field is named** by `labels.moduleNamePlaceholder`.
+- **`StageProgress` no longer scrolls the page when it mounts**: the active stage was revealed with
+  `scrollIntoView`, which also scrolled every ancestor, so a tracker below the fold pulled the page down
+  to it. The active stage is now centred inside the stage strip only (`scrollActiveIntoView` still
+  turns that off).
+- **`Tabs` no longer scrolls the page when it mounts**: the selected tab was revealed with
+  `scrollIntoView`, which also scrolled every scrolling ancestor, so a page with tabs below the fold
+  jumped to them on load. The first reveal now scrolls only the tab list; later focus and selection
+  moves behave as before.
+- **The legacy `DatePicker` behind Table's filter pane opens from the keyboard**: Enter or ArrowDown on the
+  focused field opens the calendar (it was mouse-only).
+- **Keyboard access for click-only elements** (WCAG 2.1.1): `NoteTextArea` (the collapsed placeholder and
+  the attach control, now a named button "Attach files"), `Notification` (the title when `onClick` is
+  passed; the dismiss control is announced as "Dismiss notification"), `OrganizationDetails` ("Set as
+  Default"), `UserDetails` (member rows, the selected one marked `aria-current`), `FileUploader` (the drop
+  target opens the picker from the keyboard; it was the only way to add files), `KanbanBoard` (both
+  add-column affordances) and the `SearchSelect` `insideSelect` prefix and menu (Enter/Space, arrow
+  keys, Home/End, Escape). Each takes Tab, activates on Enter and Space, and shows the library focus
+  ring on keyboard focus only; resting looks are unchanged.
+- **`ProductCard` no longer throws "Rendered more hooks than during the previous render"** when `isLoading`
+  goes from `true` to `false` (a hook sat below the loading early return).
+- **`KanbanBoard` no longer logs React's "Cannot update during an existing state transition"** when a
+  card is expanded in a virtualized column.
+- **`PhoneNumberInput` follows a changed `value`.** It used to read `value` once on mount; a form reset
+  or a loaded record now updates the field, and a leading dial code (the `onChange` shape) is stripped,
+  so echoing `onChange` back into `value` is safe.
+- **`CopyButton variant="menu-item"` is keyboard-operable** (focusable, Enter and Space copy, focus
+  ring), and every variant announces the copied label through a polite live region.
+- **`Slider` no longer auto-advances while hovered or focused, nor under reduced motion** (WCAG 2.2.2);
+  the slide transition is instant under reduced motion. The default interval is unchanged.
+- **`FileUpload` no longer leaks a blob URL per image thumbnail per render.** Each file gets one URL,
+  revoked when the file is removed or the component unmounts.
+- **`Table` column search shows the current search when reopened**, instead of stale text.
 - **`NavigationBar` right cluster no longer overflows onto the avatar at phone widths.** The title
   truncates first (overflow-only tooltip when it is a string); the `moreIcon` cluster can shrink, while
   the sidebar toggle, back button and avatar menu never do. (HRMS, beta.60 launcher trigger overflow)
@@ -517,6 +665,11 @@ next major.
 
 Nothing is removed yet — each of these still ships its full implementation.
 
+- `UploadedFile.type` (FileUploader) — never set; read the extension from `name`.
+- `ProfileCard` `color` — no visual effect; Card styles never read a colour scheme.
+- `NotificationData.status` — never read; the status dot colour comes from `dueDate`/`endDate`.
+- `CustomModulesTableLabels.loading` — never rendered; the loading state shows skeleton bars only.
+- `WorkspaceWindow` `onMedium` and `onMaximize` — never called; the window has no such controls.
 - `NavLauncher` `openShortcutHint` and `LauncherLabels.hintOpenMenu` — no longer rendered (the launcher
   is already open when its footer shows); bind the open chord in the app only.
 - `SelectV2` — use `Select` with `native={false}`; it is already a thin wrapper over it.

package/COMPONENT-GOTCHAS.md

@@ -157,7 +157,8 @@ visible at the call site, or declare the handler with both parameters. Grep for
 
 ### `Slider` is an image carousel, not a numeric range input
 
-`Slider` auto-advances a set of images/content on a timer — no numeric value, min/max, or step. The
+`Slider` auto-advances a set of images/content on a timer (paused while hovered or focused, never
+under reduced motion) — no numeric value, min/max, or step. The
 range-input slider is a separate component named `RangeSlider`, because this library's `Slider`
 already owns the name. `RangeSlider` used to be a Chakra passthrough on the `Primitives` barrel; it
 is now the library's own themed component, with a real dual-thumb mode and a `marks` prop.
@@ -319,6 +320,53 @@ not enough when the overlay sits inside a transition wrapper — the wrapper kee
 
 ## Known gotchas (silent failures)
 
+### `withTheme` mounts a full provider stack per wrapped instance
+
+Each wrapped component gets its own `ChakraProvider` (CSS reset, global styles, CSS variables), `ToasterProvider` and `ColorModeScript`. Wrap the app root once with `PixelizeThemeProvider`; never wrap list items or repeated rows.
+
+### `SearchSelect` with `insideSelect` shows a second `role="listbox"` while open
+
+A test that finds the main dropdown with `getByRole("listbox")` must now pick it by id (`<id>-listbox`).
+
+### `ChoiceCardGroup`'s children must be `ChoiceCard` elements, and the prop is `disabled`
+
+A wrapper component hides each card's `value` and `disabled` from the roving tab stop, so with nothing
+selected the group has no Tab stop at all (same rule as `PaymentOptionGroup` / `AddressCardGroup`). The
+card's prop is `disabled`, not `isDisabled`: the shared machinery reads `disabled` off the child element.
+The group is a column only.
+
+### `Pagination` never resets `page` for you
+
+An out-of-range `page` (a filter shrank the result) is displayed clamped but never reported, and changing
+rows per page does not reset `page` either. Reset it yourself, in `onPageSizeChange` and when the filters change.
+
+### Four components with a behaviour their props do not hint at
+
+- `WorkspaceTrayPreview` `onOpenChange(false)` also fires when the pointer leaves before the card ever opened; track your own open state from `true`.
+- `Notification`'s countdown is computed when its dates change and never ticks; remount or change a date to refresh it. Overdue labels read "overdue by N hours ago".
+- `NoteTextArea` checks `maxNoteWordCount` against the title only until the note is next edited, so a long title can be saved; `handleCancel` always receives `false`.
+- `VerifyEmailOtp` fields set `autocomplete="off"`, so browser or OS one-time-code autofill never offers the code.
+
+### Where `ref` lands, and what does not take one
+
+`Checkbox`, `RadioButton`, `ToggleSwitch` and `DatePicker` (every mode) forward to the native `<input>`.
+`SegmentedControl` forwards to the radiogroup `<div>`, not a segment; `Tab` to its tab `<button>` (`Tabs`
+itself takes no ref); `Avatar` to the outer box; `Tag` to its root, which is a `<button>` only for
+`display="dot"` with `onTagClick`, so type that ref as `HTMLElement`. `PinInput`, `FileUpload`,
+`SettingRow` and `Tabs` do not forward a ref.
+
+### Root attributes on the page primitives, and `Skeletons` props that are ignored
+
+`PageHeader`, `StatCard`, `SaveBar`, `EmptyState`, `DescriptionList`, `FilterBar` and `Skeletons` put
+`className`, `style`, `id`, `data-*` and `aria-*` on their outermost element. `StatCard` applies
+`aria-label` only when `onClick` makes it a button; `DescriptionList`'s loading grid keeps its own
+`aria-label="Loading"`. `Skeletons` still accepts `alignSelf` and `flexShrink` in its type but never
+applies them; wrap it in a `Box` to position it.
+
+### `Table` `HeaderActions` item with `customComponent` and `onClick` is mouse-only unless the custom component is focusable
+
+The wrapper is deliberately not a button; make the custom component a button, or the action cannot be reached from the keyboard.
+
 ### Defaults changed in 2.4.2-beta.44 — read this first when upgrading from beta.43
 
 | Component | beta.43 → beta.44 | Restore the old look |
@@ -465,6 +513,25 @@ so the two schemes were indistinguishable. It is now `primary`'s hue turned 60°
 which is near-grey and has almost no hue to turn — use a semantic scheme (`blue`, `teal`, `purple`)
 there if the two categories must read apart.
 
+### Brand palettes and non-default themes are lazy; library style functions may return cached objects
+
+Before its first read, a brand palette or a non-default light theme is an object of getters. Reading
+any key turns it into plain data; spread, `Object.keys`, JSON and assignment behave as before, but
+`Object.getOwnPropertyDescriptor` reports an accessor until then. Style functions in a library
+theme's `theme.components` receive props through a tracking Proxy and may return a cached object, so
+never mutate what they return.
+
+### Reduced motion is per component unless the app passes `reducedMotion="global"`
+
+The library's own animations honour `prefers-reduced-motion` one component at a time. For one
+document-wide rule, pass `reducedMotion="global"` to `PixelizeThemeProvider` (or `createBrandTheme`);
+transitions and animations then collapse to one near-instant pass. Add `pz-motion-keep`
+(`MOTION_KEEP_CLASS`) to any loop that is essential feedback; Chakra spinners and progress bars are
+kept automatically.
+
+A popup opened inside another popup takes `zIndex="popoverNested"` (1510), never `skipLink` (1600).
+`fontSize="xs-plus"` is 13px, the control size; use it instead of a `13px` literal.
+
 ### Your own overlay painted `background[50]` sinks into the dark canvas
 
 In dark mode `background[50]` equals the page canvas on 8 of 9 brands. Library dialogs, drawers,
@@ -961,6 +1028,13 @@ only-when-truncated (the opposite of the prop's contract).
 **Apply:** give `overflowOnly`/`OverflowToolTip` exactly one real element as `children` (e.g. a
 single `Text noOfLines`), never a Fragment or bare text.
 
+### `ToolTip` mounts Chakra's tooltip only after the first hover or focus
+
+Until the trigger is hovered or focused (or `isOpen`/`defaultIsOpen` is set), `ToolTip` renders just the
+child, with no tooltip element and no document listeners. A test that mocks Chakra's `Tooltip` and
+expects it mounted at render time must hover or focus the trigger first
+(`fireEvent.pointerEnter(trigger)` or `userEvent.hover`).
+
 ### `Toaster`'s `showToast({ children })` is a dead prop, and its two `onClose`s are different functions
 
 `children` is `@deprecated` and never read — only `title`/`description`/`actions` render. The `onClose` you pass to `showToast` is wired to
@@ -1146,6 +1220,9 @@ wrong-type file. Exceeding `maxFiles` silently truncates the list with no error.
 
 **Apply:** need real file bytes or enforced validation → use `FileUpload`, not `FileUploader`.
 
+Each image's `previewUrl` is a `blob:` URL that `FileUploader` never revokes. Call
+`URL.revokeObjectURL` when you drop the entry or unmount. (`FileUpload` revokes its own thumbnail URLs.)
+
 ### `DatePicker`'s `pickerType` does nothing when `isRange` is set, and no variant has a seconds control
 
 `RangeDatePicker` never reads `pickerType` — whether time inputs show is controlled entirely by
@@ -1395,6 +1472,13 @@ It spreads after the built-in `bg`/`_hover` that encode `isExpanded` state — p
 **Apply:** style around the defaults via `customStyles` (merged through `sx`) when the highlight
 must survive.
 
+### `Table`: memoise `columns` if users can hide or reorder columns without `savePreferences`
+
+A new `columns` identity re-applies the column defaults and discards those local changes. Passing an
+equal array again no longer costs a re-render, but the reset still happens.
+
+**Apply:** define `columns` at module level or in `useMemo`.
+
 ### `Table`'s `LeftFilterPane` Clear All only re-applies filters in `"sidebar"` mode
 
 `handleClear` calls `onClear` unconditionally, but only calls `onApply(cleared)` when
@@ -1764,3 +1848,37 @@ text. Column widths come from the rendered DOM, never from label length, so sizi
 
 **Apply:** set `labelText` on every node label; put an `isTruncated` `Text` inside the node if it
 can outgrow the column.
+
+### `FormField`, `IconButton`, `SkipLink`: what their props do not hint at
+
+- **`FormField` + library fields:** `TextInput` inherits FormField's `error` and `isRequired` because it checks
+  for a parent `FormControl`. `InputTextArea`, `NumberInput`, `Select`, the date pickers and `PhoneNumberInput`
+  wrap themselves in their own and do **not**: pass `error`/`isRequired` to those directly, and never give a
+  wrapped field its own `label` as well, or it renders two.
+- **`FormField isRequired` sets native `required` on Chakra-based controls** (as Chakra's `FormControl` does), so
+  the browser blocks an empty submit. Add `noValidate` to the `<form>` if you validate yourself. Native children
+  get `aria-required` only.
+- **`FormField` children:** pass one element or a function. A Fragment is rendered untouched and gets no wiring.
+  `id` is the control's id (the root takes none); a child's own `id` is adopted when FormField has none.
+- **`IconButton` warns once per mount in development without `aria-label`/`aria-labelledby`.** `title` does not
+  count. Size the icon yourself (xs 12 · sm 14 · md 16 · lg 18): the button does not resize it.
+- **`SkipLink`** must be the first focusable element on the page. Its target gains `tabindex="-1"` if it is not
+  focusable, and keeps it. A missing target falls back to the browser's hash jump (and warns in development).
+
+### `formatDate`, `TimePicker`, `TagInput`: what their props do not hint at
+
+- `formatDate` reads a bare `YYYY-MM-DD` as that calendar day, not UTC midnight. Pass a `Date` only when you mean
+  an instant. Epoch *seconds* are not detected: multiply by 1000 first.
+- `TimePicker` fires `onChange` with a `Date` on the day of `value` (else `baseDate`, else today). It never clears
+  to `null`, so put a Clear action beside it if one is needed.
+- For free-text chips that are not email addresses use `TagInput`: same look as `MultiSelect`, any text, with
+  your own `validate`.
+
+### `Select` / `SearchSelect` multi rows have no checkbox role
+
+Query rows with `getAllByRole("option")` and check `aria-selected`. The row's checkbox is decorative and no longer
+exposes `role="checkbox"`, so `getByRole("checkbox")` finds nothing inside the popup.
+
+### Page behind an open `WorkspaceWindow` is `aria-hidden`
+
+While a window is open (not minimized) role queries for background elements need `{ hidden: true }` or a test id.

package/dist/Components/Accordion/Accordion.js

@@ -22,13 +22,13 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
             var _a;
             return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: "1px solid", borderColor: border, borderRadius: "xl", bg: colors.background[50], boxShadow: "none", mb: 3, overflow: "hidden", _last: { mb: 0 }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
                     var _a, _b, _c;
-                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
+                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
                                         ...(0, motion_2.reducedMotionSx)(),
                                         ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
                                         "&:hover": {
                                             ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.hoverbuttonStyle,
                                         },
-                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform", "color", "background-color"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
+                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform", "color", "background-color"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/Components/AddressCard/AddressCard.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const selectable_1 = require("../CheckoutKit/selectable");
 const Button_1 = __importDefault(require("../Button/Button"));
 const Tag_1 = __importDefault(require("../Tag/Tag"));
@@ -20,6 +21,6 @@ const AddressCard = ({ value, name, phone, lines, tag, isDefault = false, note,
     const copy = { ...DEFAULT_LABELS, ...labels };
     const { isSelected, interactive, inGroup, ringed, props } = (0, selectable_1.useSelectable)({ value, selected, disabled, onSelect });
     const selectable = inGroup || !!onSelect;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...(0, selectable_1.selectableSurface)(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...props, "data-radio": true, "aria-disabled": selectable && disabled ? true : undefined, "aria-labelledby": props.role ? nameId : undefined, "aria-describedby": props.role ? bodyId : undefined, gap: 3, p: 4, pb: onEdit || onRemove ? 2 : 4, borderRadius: "1rem", cursor: interactive ? "pointer" : "default", outline: "none", align: "flex-start", children: [selectable && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: 0.5, children: (0, jsx_runtime_1.jsx)(selectable_1.RadioIndicator, { selected: isSelected }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: nameId, fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], children: name }), tag && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: tag, size: "xs", tone: "neutral" }), isDefault && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: copy.default, size: "xs", tone: "neutral" })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: bodyId, children: [lines.map((line) => ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", lineHeight: 1.5, color: colors.text[800], children: line }, line))), phone && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: phone })), note && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note }))] })] })] }), (onEdit || onRemove) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 1, pl: selectable ? "2.75rem" : 1, pr: 2, pb: 2, children: [onEdit && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onEdit, "aria-label": `${copy.edit} address: ${name}`, children: copy.edit })), onRemove && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} address: ${name}`, children: copy.remove }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...(0, selectable_1.selectableSurface)(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...props, "data-radio": true, "aria-disabled": selectable && disabled ? true : undefined, "aria-labelledby": props.role ? nameId : undefined, "aria-describedby": props.role ? bodyId : undefined, gap: 3, p: 4, pb: onEdit || onRemove ? 2 : 4, borderRadius: "2xl", cursor: interactive ? "pointer" : "default", outline: "none", align: "flex-start", children: [selectable && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: 0.5, children: (0, jsx_runtime_1.jsx)(selectable_1.RadioIndicator, { selected: isSelected }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: nameId, fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], children: name }), tag && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: tag, size: "xs", tone: "neutral" }), isDefault && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: copy.default, size: "xs", tone: "neutral" })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: bodyId, children: [lines.map((line) => ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", lineHeight: 1.5, color: colors.text[800], children: line }, line))), phone && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: phone })), note && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note }))] })] })] }), (onEdit || onRemove) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 1, pl: selectable ? "2.75rem" : 1, pr: 2, pb: 2, children: [onEdit && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onEdit, "aria-label": `${copy.edit} address: ${name}`, children: copy.edit })), onRemove && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} address: ${name}`, children: copy.remove }))] }))] }));
 };
 exports.default = AddressCard;

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -137,7 +137,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
         showSeries,
         palette,
     ]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, children: [title && isSmall && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", isDisabled: !isTruncated, children: (0, jsx_runtime_1.jsx)("div", { ref: titleRef, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, children: [title && isSmall && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "xs", isDisabled: !isTruncated, children: (0, jsx_runtime_1.jsx)("div", { ref: titleRef, style: {
                         textAlign: "left",
                         color: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.color,
                         fontSize: computedFontSize,

package/dist/Components/AppSwitcher/AppSwitcher.js

@@ -229,7 +229,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                             return;
                         }
                         handlePanelKeyDown(e);
-                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Grip, { size: s.icon + 1 }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1" }), hint && (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: hint })] }), showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pb: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Grip, { size: s.icon + 1 }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1" }), hint && (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: hint })] }), showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pb: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && visible.length > 0) {
                                                 e.preventDefault();
                                                 focusItem(0);

package/dist/Components/AppearanceSettings/AppearanceSettings.js

@@ -16,7 +16,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const SelectV2_1 = __importDefault(require("../SelectV2/SelectV2"));
 const FieldLabel = ({ children }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: colors.textMuted, mb: 2, children: children }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 500, color: colors.textMuted, mb: 2, children: children }));
 };
 const brandSwatch = (name, colors) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "14px", h: "14px", borderRadius: "full", bg: brands_1.lightPalettes[name].primary[500], border: "1px solid", borderColor: (0, outlineRung_1.ruleInk)(colors.boxborder[200], [colors.backgroundColor.light, colors.backgroundColor.tertiary], outlineRung_1.CHROME_RULE) }));
 const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand = true, showColorMode = true, showFontSize = true, size = "sm", labels, }) => {

package/dist/Components/AudioRecorder/AudioRecorder.js

@@ -9,6 +9,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const DEFAULT_LABELS = {
     start: "Start recording",
     stop: "Stop recording",
@@ -164,6 +165,6 @@ const AudioRecorder = ({ onRecorded, maxDurationSec, isDisabled = false, labels
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: isRecording ? text.stop : text.start, size: "sm", colorScheme: isRecording ? "red" : undefined, variant: isRecording ? "solid" : "outline", "aria-pressed": isRecording, isDisabled: isRecording ? false : isDisabled || blocked, onClick: isRecording ? stop : () => void start() }), isRecording ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "audio-recorder-dot", boxSize: "0.5rem", borderRadius: "full", bg: colors.semanticText.error, "aria-hidden": true, sx: {
                                     "@media (prefers-reduced-motion: no-preference)": { animation: "audio-recorder-pulse 1.2s ease-in-out infinite" },
                                     "@keyframes audio-recorder-pulse": { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.35 } },
-                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", role: "timer", fontSize: "0.875rem", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: (0, exports.formatElapsed)(elapsedMs) })] })) : null] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", children: announcement }), status === "denied" || status === "unsupported" ? ((0, jsx_runtime_1.jsx)(react_2.Text, { role: "alert", mt: 1, fontSize: "0.75rem", color: colors.semanticText.error, children: status === "denied" ? text.permissionDenied : text.unsupported })) : null] }));
+                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", role: "timer", fontSize: "sm", color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: (0, exports.formatElapsed)(elapsedMs) })] })) : null] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", children: announcement }), status === "denied" || status === "unsupported" ? ((0, jsx_runtime_1.jsx)(react_2.Text, { role: "alert", mt: 1, fontSize: "xs", color: colors.semanticText.error, children: status === "denied" ? text.permissionDenied : text.unsupported })) : null] }));
 };
 exports.default = AudioRecorder;

package/dist/Components/Avatar/Avatar.d.ts

@@ -1,3 +1,4 @@
 import type { AvatarProps } from "./AvatarProps";
-declare const Avatar: ({ name, src, size, status, ariaLabel, getInitials, "data-testid": testId }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+/** Initials or image avatar with an optional status dot; `ref` is the outer box. */
+declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Avatar;

package/dist/Components/Avatar/Avatar.js

@@ -13,12 +13,14 @@ const STATUS_TONE = {
 const STATUS_LABEL = {
     online: "Online", away: "Away", busy: "Busy", offline: "Offline",
 };
-const Avatar = ({ name, src, size = "md", status, ariaLabel, getInitials, "data-testid": testId }) => {
+/** Initials or image avatar with an optional status dot; `ref` is the outer box. */
+const Avatar = (0, react_1.forwardRef)(function Avatar({ name, src, size = "md", status, ariaLabel, getInitials, "data-testid": testId }, ref) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [imageFailed, setImageFailed] = (0, react_1.useState)(false);
     const px = avatarSizing_1.SIZE_PX[size];
     const showImage = Boolean(src) && !imageFailed;
     const { bg, color } = (0, avatarColorway_1.resolveAvatarColorway)(name, colors);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", boxSize: `${px}px`, flexShrink: 0, "data-testid": testId, children: [showImage ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: src, alt: name, boxSize: `${px}px`, borderRadius: "full", objectFit: "cover", onError: () => setImageFailed(true) })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "img", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: bg, color: color, fontSize: avatarSizing_1.FONT_SIZE[size], fontWeight: 600, userSelect: "none", children: (getInitials !== null && getInitials !== void 0 ? getInitials : avatarColorway_1.initialsFor)(name) })), status ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: "0", right: "0", boxSize: avatarSizing_1.DOT_SIZE[size], borderRadius: "full", bg: (0, tone_1.toneInk)(colors, STATUS_TONE[status]), border: "2px solid", borderColor: colors.background[50] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: STATUS_LABEL[status] })] })) : null] }));
-};
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: ref, position: "relative", boxSize: `${px}px`, flexShrink: 0, "data-testid": testId, children: [showImage ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: src, alt: name, boxSize: `${px}px`, borderRadius: "full", objectFit: "cover", onError: () => setImageFailed(true) })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "img", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: bg, color: color, fontSize: avatarSizing_1.FONT_SIZE[size], fontWeight: 600, userSelect: "none", children: (getInitials !== null && getInitials !== void 0 ? getInitials : avatarColorway_1.initialsFor)(name) })), status ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: "0", right: "0", boxSize: avatarSizing_1.DOT_SIZE[size], borderRadius: "full", bg: (0, tone_1.toneInk)(colors, STATUS_TONE[status]), border: "2px solid", borderColor: colors.background[50] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: STATUS_LABEL[status] })] })) : null] }));
+});
+Avatar.displayName = "Avatar";
 exports.default = Avatar;

package/dist/Components/Backdrop/Backdrop.js

@@ -30,5 +30,5 @@ function Backdrop({ open, variant = "dim", loader = false, text, invisible = fal
             inset: 0,
             zIndex: Number(zIndex !== null && zIndex !== void 0 ? zIndex : (container ? 10 : 1300)),
             pointerEvents: allowBackgroundInteraction ? "none" : "auto",
-        }, children: (0, jsx_runtime_1.jsx)(react_1.Box, { role: loader ? "status" : "presentation", "aria-live": loader ? "polite" : undefined, "aria-busy": loader || undefined, "aria-label": label, onClick: allowBackgroundInteraction ? undefined : onClick, position: "absolute", inset: "0", bg: scrim, backdropFilter: !isDim && !invisible ? overlay_styles_1.OVERLAY_BLUR : undefined, color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, pointerEvents: allowBackgroundInteraction ? "none" : "auto", cursor: onClick && !allowBackgroundInteraction ? "pointer" : undefined, sx: { WebkitTapHighlightColor: "transparent", ...(0, motion_1.reducedMotionSx)() }, children: children !== null && children !== void 0 ? children : (loader ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "lg", boxSize: SPINNER_BOX, thickness: SPINNER_THICKNESS, color: colors.white, label: text ? "" : "Loading" }), text && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.875rem", children: text })] })) : null) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(react_1.Box, { role: loader ? "status" : "presentation", "aria-live": loader ? "polite" : undefined, "aria-busy": loader || undefined, "aria-label": label, onClick: allowBackgroundInteraction ? undefined : onClick, position: "absolute", inset: "0", bg: scrim, backdropFilter: !isDim && !invisible ? overlay_styles_1.OVERLAY_BLUR : undefined, color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, pointerEvents: allowBackgroundInteraction ? "none" : "auto", cursor: onClick && !allowBackgroundInteraction ? "pointer" : undefined, sx: { WebkitTapHighlightColor: "transparent", ...(0, motion_1.reducedMotionSx)() }, children: children !== null && children !== void 0 ? children : (loader ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "lg", boxSize: SPINNER_BOX, thickness: SPINNER_THICKNESS, color: colors.white, label: text ? "" : "Loading" }), text && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: text })] })) : null) }) }));
 }

package/dist/Components/BagBar/BagBar.js

@@ -10,6 +10,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const scrim_1 = require("../../Theme/tokens/builders/scrim");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const price_1 = require("../../Utils/price");
 const Button_1 = __importDefault(require("../Button/Button"));
@@ -23,7 +24,7 @@ const BagBar = ({ total, note, onViewDetails, ctaLabel, onCta, ctaDisabled = fal
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const copy = { ...DEFAULT_LABELS, ...labels };
     const sticky = position === "bottom";
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", "aria-label": copy.region, align: "center", justify: "space-between", gap: 4, px: 4, pt: 3, pb: SAFE_BOTTOM, borderTopRadius: "1.5rem", bg: `${colors.surfaceRaised}${GLASS_ALPHA}`, backdropFilter: BLUR, position: sticky ? "sticky" : "static", bottom: sticky ? 0 : undefined, zIndex: sticky ? zIndex : undefined, boxShadow: sticky ? `0 -12px 32px -16px ${(0, scrim_1.overlayScrim)(colors)}` : "none", "data-testid": testId, sx: { WebkitBackdropFilter: BLUR, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, color: colors.textMuted, children: copy.total }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "1.25rem", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": "bag-bar-total", children: (0, price_1.formatPrice)(total, { currency, locale }) })] }), note && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note })), onViewDetails && ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", onClick: onViewDetails, display: "inline-flex", alignItems: "center", gap: 1, position: "relative", fontSize: "xs", fontWeight: 600, color: colors.accentText, borderRadius: "sm", transition: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", "aria-label": copy.region, align: "center", justify: "space-between", gap: 4, px: 4, pt: 3, pb: SAFE_BOTTOM, borderTopRadius: "3xl", bg: `${colors.surfaceRaised}${GLASS_ALPHA}`, backdropFilter: BLUR, position: sticky ? "sticky" : "static", bottom: sticky ? 0 : undefined, zIndex: sticky ? zIndex : undefined, boxShadow: sticky ? `0 -12px 32px -16px ${(0, scrim_1.overlayScrim)(colors)}` : "none", "data-testid": testId, sx: { WebkitBackdropFilter: BLUR, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, color: colors.textMuted, children: copy.total }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xl", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em", color: colors.header[900], sx: typography_1.NUMERIC_TEXT, "data-testid": "bag-bar-total", children: (0, price_1.formatPrice)(total, { currency, locale }) })] }), note && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note })), onViewDetails && ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", onClick: onViewDetails, display: "inline-flex", alignItems: "center", gap: 1, position: "relative", fontSize: "xs", fontWeight: 600, color: colors.accentText, borderRadius: "sm", transition: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: {
                             ...(0, focusRing_styles_1.focusVisibleStyles)(colors),
                             ...(0, motion_2.reducedMotionSx)(),
                             "&::before": { content: '""', position: "absolute", inset: "-0.75rem -0.5rem" },

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -73,7 +73,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                     px: "0.625rem",
                                     py: "0.5rem",
                                     borderRadius: "lg",
-                                    fontSize: "13px",
+                                    fontSize: "xs-plus",
                                     fontWeight: 500,
                                     color: theme.colors.text[700],
                                     transition: "background 0.12s",

package/dist/Components/CalendarGrid/CalendarGrid.js

@@ -52,7 +52,7 @@ const EventChip = ({ event, colors, surface, onEventClick, segment }) => {
         alignItems: "center",
         h: CHIP_HEIGHT,
         px: 2,
-        fontSize: "0.75rem",
+        fontSize: "xs",
         fontWeight: 500,
         lineHeight: 1,
         textAlign: "left",
@@ -154,7 +154,7 @@ const CalendarGrid = ({ view, date, events, onViewChange, onDateChange, onEventC
             body = ((0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: 1, mt: 2, children: dayEvents.map((event) => ((0, jsx_runtime_1.jsx)(EventChip, { event: event, colors: colors, surface: surface, onEventClick: onEventClick }, event.id))) }));
         }
         else {
-            body = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", mt: 1, h: `calc(${layout.visibleLanes} * ${LANE_HEIGHT})`, children: ownSegments.map((s) => ((0, jsx_runtime_1.jsx)(EventChip, { event: s.event, colors: colors, surface: surface, onEventClick: onEventClick, segment: s }, s.event.id))) }), hidden > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": text.moreLabel(hidden, (0, calendarMath_1.formatFullDate)(day, locale)), onClick: () => drillIntoDay(day), px: 1, fontSize: "0.75rem", fontWeight: 600, color: colors.header[900], textAlign: "left", textDecoration: "underline", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: text.more(hidden) })) : null] }));
+            body = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", mt: 1, h: `calc(${layout.visibleLanes} * ${LANE_HEIGHT})`, children: ownSegments.map((s) => ((0, jsx_runtime_1.jsx)(EventChip, { event: s.event, colors: colors, surface: surface, onEventClick: onEventClick, segment: s }, s.event.id))) }), hidden > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": text.moreLabel(hidden, (0, calendarMath_1.formatFullDate)(day, locale)), onClick: () => drillIntoDay(day), px: 1, fontSize: "xs", fontWeight: 600, color: colors.header[900], textAlign: "left", textDecoration: "underline", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: text.more(hidden) })) : null] }));
         }
         return ((0, jsx_runtime_1.jsxs)(react_2.Box, { role: "gridcell", ref: (el) => {
                 if (el)
@@ -162,10 +162,10 @@ const CalendarGrid = ({ view, date, events, onViewChange, onDateChange, onEventC
                 else
                     cellRefs.current.delete(key);
             }, "data-date": key, "aria-label": label, "aria-current": isToday ? "date" : undefined, tabIndex: active ? 0 : -1, onFocus: () => setFocusedKey(key), onKeyDown: (e) => handleCellKeyDown(e, day), position: "relative", minH: MIN_CELL_HEIGHT[view], p: 1, bg: surface, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, outline: "none", _focusVisible: {
-                boxShadow: `inset 0 0 0 2px ${colors.focusRing.halo}, inset 0 0 0 4px ${colors.focusRing.ring}`,
-            }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: "1.5rem", h: "1.5rem", px: 1, borderRadius: "full", fontSize: "0.8125rem", fontWeight: isToday ? 700 : 500, color: isToday ? colors.accentText : inMonth ? colors.header[900] : colors.textMuted, boxShadow: isToday ? `inset 0 0 0 1.5px ${colors.accentText}` : undefined, "aria-hidden": true, children: day.getDate() }), body] }, key));
+                boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(colors),
+            }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: "1.5rem", h: "1.5rem", px: 1, borderRadius: "full", fontSize: "xs-plus", fontWeight: isToday ? 700 : 500, color: isToday ? colors.accentText : inMonth ? colors.header[900] : colors.textMuted, boxShadow: isToday ? `inset 0 0 0 1.5px ${colors.accentText}` : undefined, "aria-hidden": true, children: day.getDate() }), body] }, key));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", wrap: "wrap", gap: 2, mb: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [onDateChange ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: text.today, size: "sm", variant: "outline", onClick: () => onDateChange((0, calendarMath_1.startOfDay)(new Date())) }), (0, jsx_runtime_1.jsx)(Button_1.default, { "aria-label": text.previous, size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 16, "aria-hidden": true }), onClick: () => onDateChange((0, calendarMath_1.shiftAnchor)(view, anchor, -1)) }), (0, jsx_runtime_1.jsx)(Button_1.default, { "aria-label": text.next, size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16, "aria-hidden": true }), onClick: () => onDateChange((0, calendarMath_1.shiftAnchor)(view, anchor, 1)) })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h2", fontSize: "1rem", fontWeight: 600, color: colors.header[900], children: title })] }), onViewChange ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "group", "aria-label": text[view], gap: 1, children: VIEWS.map((v) => ((0, jsx_runtime_1.jsx)(Button_1.default, { label: text[v], size: "sm", variant: v === view ? "solid" : "outline", "aria-pressed": v === view, onClick: () => onViewChange(v) }, v))) })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "grid", "aria-label": title, "aria-busy": isLoading || undefined, "data-view": view, minW: view === "day" ? undefined : "42rem", borderTop: "1px solid", borderLeft: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Grid, { role: "row", templateColumns: template, children: headerDays.map((i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "columnheader", "aria-label": weekdayLong[i], px: 2, py: 1, fontSize: "0.75rem", fontWeight: 600, color: colors.textMuted, bg: colors.backgroundColor.main, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, children: weekdayShort[i] }, i))) }), weeks.map((week, weekIndex) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", wrap: "wrap", gap: 2, mb: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [onDateChange ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: text.today, size: "sm", variant: "outline", onClick: () => onDateChange((0, calendarMath_1.startOfDay)(new Date())) }), (0, jsx_runtime_1.jsx)(Button_1.default, { "aria-label": text.previous, size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 16, "aria-hidden": true }), onClick: () => onDateChange((0, calendarMath_1.shiftAnchor)(view, anchor, -1)) }), (0, jsx_runtime_1.jsx)(Button_1.default, { "aria-label": text.next, size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16, "aria-hidden": true }), onClick: () => onDateChange((0, calendarMath_1.shiftAnchor)(view, anchor, 1)) })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title })] }), onViewChange ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "group", "aria-label": text[view], gap: 1, children: VIEWS.map((v) => ((0, jsx_runtime_1.jsx)(Button_1.default, { label: text[v], size: "sm", variant: v === view ? "solid" : "outline", "aria-pressed": v === view, onClick: () => onViewChange(v) }, v))) })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "grid", "aria-label": title, "aria-busy": isLoading || undefined, "data-view": view, minW: view === "day" ? undefined : "42rem", borderTop: "1px solid", borderLeft: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Grid, { role: "row", templateColumns: template, children: headerDays.map((i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "columnheader", "aria-label": weekdayLong[i], px: 2, py: 1, fontSize: "xs", fontWeight: 600, color: colors.textMuted, bg: colors.backgroundColor.main, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, children: weekdayShort[i] }, i))) }), weeks.map((week, weekIndex) => {
                             const layout = (0, calendarMath_1.layoutWeek)(week, shownEvents, maxLanes);
                             return ((0, jsx_runtime_1.jsx)(react_2.Grid, { role: "row", templateColumns: template, children: week.map((day, col) => renderCell(day, col, weekIndex, layout)) }, (0, calendarMath_1.dayKey)(week[0])));
                         })] }) })] }));