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

package/CHANGELOG.md

@@ -18,6 +18,24 @@ next major.
 
 ### Added
 
+- **`WorkspaceTray` is usable over an open modal.** It is portalled above the modal layer, labelled as a live region
+  (so Chakra's modal aria-hidden skips it) and outside the focus trap, so a window minimised over a wizard can be
+  restored without closing the wizard. New props: `placement` (`"bottom-end"` | `"bottom-start"`), `offset`,
+  `closeLabel(item)`, `dirtyLabel`, `label`; `WorkspaceTrayItem` gains `isDirty` (unsaved dot) and `subtitle`.
+  `WorkspaceWindow` gains `labels` ({minimize, close, openFullPage}) and `finalFocusRef`.
+  The tray now renders in a portal, so a test that queries inside its render container must query `document.body`.
+- **`optionRowFill(rows, isActive)`** and **`optionRowCursorSx(rows)`** are exported from the package root: the one
+  fill an option row paints (the cursor's), and its `:hover`/`:focus` form for roving-focus lists.
+- **`accentTextOnPlanes(scale, planes)`** is exported from the package root: the first accent rung clearing AA on every
+  plane in the list, for chrome that can land on the canvas, a card or an overlay.
+- **`ruleOn(colors, plane)`** and **`MOTION_PRESS_SCALE`** are exported from the package root. `ruleOn` draws a divider at the
+  in-card weight on any plane (`cardRule` is `ruleOn` on `background[50]`); the press scale was only reachable by deep import.
+- **`Card variant="elevated"`**: borderless, `background[50]` lifted by `shadows.card`; declares a 0 border width so it
+  never inherits an outline parent's rule.
+- **`bandOn`, `recessOn`, `cardRule`**: plane-step helpers that return the input unchanged in light and a visible step
+  off the dark plane a fill or rule sits on (`raisedRule` now matches `cardRule`'s weight).
+- **`buildDarkPalette`** takes an optional `{ planes: "lifted" | "flat" }` and `buildSurfaceRaised` an optional list of
+  filled marks to keep at 3:1.
 - **`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
@@ -316,8 +334,8 @@ next major.
 - **`Card` `padding` is no longer Chakra's style prop** — it is omitted from the type and now takes
   the `CardPadding` steps. A consumer passing `padding={4}` gets a compile error; use `p` or `sx`.
   Staged for the next major (see Breaking); consumer blast radius not measured.
-- **`SideBar` default box-shadow transition is 260ms** (was 200ms) so it follows `collapseTransition`
-  `speed="slow"`. The width transition is unchanged.
+- **`SideBar` `collapseTransition` defaults to `{ speed: "base" }`** (200ms width and shadow, was 260ms).
+  Pass `{ speed: "slow" }` for the old pace.
 - **`StageProgress variant="stepper"` renders an `ol` of `li`** (`StepperStageProps.asListItem`).
   Visual layout is unchanged; selectors that expected a `div` list no longer match.
 - **`PdfViewer` `pdfUrl` is optional** — pass exactly one of `pdfUrl` / `getBlob`. In `getBlob` mode
@@ -373,8 +391,110 @@ next major.
   `aria-readonly`, and `m`/`mt`/`mb`/`ml`/`mr`/`mx`/`my` on the wrapper. `InputSwitch` is now a
   genuine thin wrapper — no prop it previously accepted is silently dropped.
 
+### Changed (visual)
+
+- **`Table` loading state.** With `isLoading` and no rows, each row now draws one skeleton per column (a checkbox
+  placeholder in the checkbox column, blank spacer cells) with the variant's row rule, instead of one bar spanning the
+  table. If `columns` is still empty while loading, the header shows four placeholder cells and a disabled select-all
+  instead of a lone checkbox stretched across the row. The select-all checkbox is disabled while `isLoading`.
+- **`Table` defaults to `variant="studio"`.** Every `Table` rendered without `variant` (or with `variant={undefined}`)
+  now draws studio: flat small-caps header, one row rule, the select slot resting on the row number, status as a pill.
+  Keep the old look with `variant="classic"`. Measured 2026-10-14: crm-frontend has 38 `<Table>` call sites, none
+  passing `variant` (all 38 change); account-frontend 8 of 18 change (the other 10 already pass `"studio"`); hrms,
+  tickets and lfour render `Table` only through an `AppTable` wrapper that already defaults to studio (0 change).
+- **Option rows fill only under the cursor; selection is the trailing check and weight 500.** `Select`, `SearchSelect`,
+  `SelectSearch`, `CompactSelect` and `OrgSwitcher` no longer fill the selected row: the selected fill sat 1.00-1.02:1
+  from the hover fill on all 18 brand x mode palettes, so the two read as one state. `SelectSearch`/`CompactSelect` no
+  longer fill row 0 on open beside the hovered row. `Dropdown` items keep `text[700]` under the cursor instead of turning
+  `accentText`. `SearchSelect` rows sit inset (`mx`, rounded) with the check at the trailing edge and no hairline
+  between rows. Text on every row state measures 7.69:1 or more (selected 12.43-19.90:1).
+- **Chakra `Menu` items use option-row ink:** `text[700]` instead of `text[900]`; a checked `MenuItemOption` is weight
+  500 with an `accentText` check, matching `Select`.
+- **Dark `Button` `outline`/`ghost`/`link` ink is chosen against the canvas, the card and the overlay.** It cleared AA
+  on the canvas only, so in a dialog or popover it fell to 4.06-4.50:1 in 24 scheme x brand combos (lavender outline
+  4.46:1, rosewood 4.10:1); now AA on all three planes (lavender 6.28:1, rosewood 5.57:1). Light mode is unchanged
+  (0 light combos move); 62 dark combos step lighter (emerald primary `#0f9d8a` -> `#14e3c7`).
+- **Dark rules and pressed solids (owner review before release).** In dark only: the `NavigationBar` header rule and
+  leading divider, the `KanbanBoard` column edge, header rule and count pill, the filled `TextInput` (a visible band off
+  the card) and the Kanban drag-over column's dashed border (`focusRing.ring`, 3.1:1 or more instead of 1.7-2.7:1)
+  now read at the in-card rule weight instead of 1.03-1.16:1. Solid `hover`/`active` fills never fall below 1.5:1 against
+  the canvas (a pressed warning solid reached 1.00:1) and never flip the label colour, so zinc dark's pressed primary stays
+  light with dark ink instead of dropping to `#52525b`. `ScrollToTop`, `FilePreview`, `ProfilePhotoViewer`, the Table
+  clear-filters badge, Chakra `Badge`/`Radio` and the Table status pills now pass the canvas to `solidFillRung`: zinc dark
+  primary and every brand's dark gray solid move from `#52525b`/`#525252` (2.4:1) to `#e4e4e7`/`#a3a3a3` with dark ink.
+  Light mode and every other dark colour keep their fill; error/warning/info pressed fills in dark are lighter than before
+  and hover and press now share one rung.
+- **Elevation follows Pebble, per mode.** `shadows.sm`/`base`/`md`/`lg` are the Pebble card-press/
+  card/float/dialog stacks, with new `card`, `float`, `dialog` and `sheet` role keys. Light shadows are
+  softer and wider; dark mode gets its own heavier black ramp, so overlays cast a visible shadow on a
+  dark canvas. `xs`, `xl`, `2xl`, `inner`, `none`, `darkLg` and the focus `outline` are unchanged.
+- **`Menu` and `Popover` join the owned popup family:** radius `md` → `xl` (`RADIUS_ROLE.float`)
+  and shadow `sm` → `md` (float), like every other anchored popup. Their border stays.
+- **`fonts.mono` is a real monospace stack** (`ui-monospace, SFMono-Regular, Menlo, Consolas,
+  monospace`). It was Inter, so code and keyboard shortcuts never aligned.
+- **`Button` gray `ghost`/`outline` hover is visible.** Gray has no opacity ramp, so hover/active
+  take the list-row `active`/`selectedActive` steps (at least 1.15:1 on a card, all 9 brands x 2 modes)
+  instead of `gray.50` (1.04-1.08:1). `solid` and `gradient` hover no longer add a box-shadow; the
+  colour step carries hover.
+- **`Toaster` status-icon pulse** animates a pseudo-element's transform and opacity (scale 1 to 1.5,
+  faded out by 70%, the same 900 ms one-shot) instead of `box-shadow`, so it no longer repaints every
+  frame. The icon chip background is the same tint composited opaque over the toast surface.
+- **`Table` filter sidebar** opens on the 200 ms motion token (was 500 ms), does not animate on
+  mount, and is instant under reduced motion.
+- **`FileUpload` image thumbnails are a keyboard-operable "Preview <file name>" button**: a new tab
+  stop with the library focus ring; Enter or Space opens the preview. Each image row now has two
+  buttons (Preview and remove), so a test that queries an unnamed `getByRole("button")` inside a row
+  must name the one it means.
+- **`Menu` item highlight sits inside the menu.** A themed `MenuItem`/`MenuItemOption` is
+  `calc(100% - 2 * mx)` wide, so its hover/focus fill keeps the same 6px inset on both sides instead of
+  overhanging the menu's right edge by 6px. Menu size and row height are unchanged; a `MenuItem` given
+  its own `w`/`width` keeps that width.
+- **`Skeleton` shimmer is one depth on every brand and mode**: 1.35:1 between its two colours (the
+  mobile library's `SKELETON_SHIMMER_CONTRAST`), was 1.34-1.58:1 in light and 1.93-1.99:1 in dark. The
+  end colour is `gray[300]`'s tint settled against `gray[100]`; dark skeletons pulse much more gently.
+  An explicit `startColor`/`endColor` still wins.
+
+- **Motion comes from the tokens.** `SideBar`, `Notification`, `Toaster`, the Table settings sheet,
+  `ProfilePhotoViewer`, `TableToggle` and `StageProgress` take every duration and curve from the motion tokens
+  (colour fades 150ms, movement 200ms, enters on `MOTION_EASE_OUT`, exits on `MOTION_EASE_IN`). Most timings
+  move by under 60ms; the Table settings sheet goes from 400ms to 200ms. `Notification` cards no longer lift
+  2px on hover; the shadow still deepens.
+- **`Button` (solid, outline, ghost) and `IconButton` scale to 0.98 while pressed** (`MOTION_PRESS_SCALE`).
+  Never when disabled or loading, nor under `prefers-reduced-motion`.
+- **Dark planes carry the brand hue and separate by lift.** The dark canvas takes a faint brand tint and cards
+  (`background[50]`) sit one step (1.16:1) above it, with overlays (`surfaceRaised`) one step (1.15:1) above
+  the card; every filled mark keeps 3:1 on all three. Light mode is unchanged. A brand opts out with
+  `buildDarkPalette(light, { planes: "flat" })`. `meadow` and `rosewood` dark `accentText` move one rung
+  lighter so they clear AA on selected list rows.
+- **`zinc`:** muted text in light mode is `#515157` (was `#27272a`, 14.9:1), settled under a new 8:1 muted
+  ceiling; zinc's dark card is no longer darker than its canvas.
+- **A brand's primary never reads as danger.** `radiant`'s danger colour (`red` and `semantic.error`) is
+  crimson and `rosewood`'s primary rotates toward raspberry; a delta-E >= 10 gate in `brandIdentity.test.ts`
+  covers all 9 brands in both modes.
+- **`Button` solid primary paints `resolveFilledSurface`.** Only `zinc` dark moves: the primary fill goes from `#52525b` with
+  white ink (2.5:1 on the canvas) to `#e4e4e7` with black ink, matching `resolveFilledSurface`, the fill every other filled surface already paints.
+- **Dark mode: header strips, calendar off-days and in-card rules step visibly off the lifted planes.** Table header
+  strips (`CustomModulesTable`, `SignInActivityTable`), `DatePicker` weekly-off cells, and the rules inside cards and
+  dialogs (`Table`, `SettingRow`, `SettingsSection`, `StatCard`, `Drawer`, `Modal`, `ConfirmDialog` and the account
+  modals) now clear 1.15:1 (bands) and 1.31:1 (rules) off their plane. Light mode is unchanged.
+- **`Card` defaults to `variant="elevated"`** (borderless, `background[50]` lifted by `shadows.card`). Pass
+  `variant="outline"` for a Card that frames a table or a list of rows. Measured blast radius: 22 library `<Card>`
+  sites with no variant flip (hrms 18, account 1, tickets 3); 305 with an explicit variant are unchanged. The
+  `SettingsSection` danger zone keeps its red frame by taking `variant="outline"`.
+- **Light page canvas (`backgroundColor.base`) sits 1.09:1 below the card on all 9 brands**, so a borderless card keeps
+  its top edge (zinc and slate `#fafafa` to `#f5f5f5`, lavender `#fbfafd` to `#f5f4f8`). `main` and every other token
+  are unchanged.
+
 ### Fixed
 
+- **`WorkspaceTrayPreview`** reports `onOpenChange(false)` only after the card actually opened (it used to fire when
+  the pointer left before the open delay).
+- **`FileUploader`** revokes the blob URL of an image the moment it is removed, and of images it rejects (over the total
+  size or past `maxFiles`); those URLs were created and never freed. Surviving URLs stay yours to revoke.
+- **`Table` settings sheet** fades in place instead of dropping in when the user prefers reduced motion.
+- **`SearchSelect`**: the Select All and Add New rows are reachable from the keyboard. Arrow keys, Home and End walk
+  Select All, then the options, then Add New, and Enter runs them. Both are now `role="option"` rows, so a test that
+  counts `getAllByRole("option")` with either row shown sees one or two more.
 - **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`).

package/COMPONENT-GOTCHAS.md

@@ -215,7 +215,7 @@ and wires `aria-controls` to them. Pick by that, never by the picture. A screen
 
 | Need | Component | Why not the others |
 | --- | --- | --- |
-| Generic bordered/padded container, no commerce semantics | `Card` | Layout wrapper with `header`/`footer` slots and a padded body — see gotcha below |
+| Generic padded container (borderless by default; `variant="outline"` for a ruled one), no commerce semantics | `Card` | Layout wrapper with `header`/`footer` slots and a padded body — see gotcha below |
 | Product tile for a grid, list or rail (photo, price, rating, swatches, quick add) | `ProductCard` | Takes the same `axes` / `variants` as `ProductDetails`; for a whole page use `ProductDetails` |
 | A KPI figure with delta and sparkline | `StatCard` | Not a product or a container |
 | Subscription/pricing-tier card (plans, billing cycle, feature list) | `PaymentCard` | Takes a `Plan` object, unrelated to `options`/`productImage` |
@@ -342,7 +342,6 @@ rows per page does not reset `page` either. Reset it yourself, in `onPageSizeCha
 
 ### 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.
@@ -401,7 +400,7 @@ The wrapper is deliberately not a button; make the custom component a button, or
 | `InputTextArea` / `FileUpload` / `TextInput` | Width 500px → 100% / `maxSizeKB` 5 → 5120 / no default "Placeholder" text | `width="500px"` / — (5 KB was a bug) / — |
 | `DatePicker` (no `pickerType`) | Inference is case-sensitive: `MM` is month, `mm` minutes. `dd/MM/yyyy` was misread as date+time and showed time selects; it is now date-only | `pickerType="datetime"` |
 | `EmptyState` | Title is an `h3`; image is decorative (`alt=""`, was the title) | `titleAs`, `imageAlt` |
-| Theme `Badge` / `Card` / field labels | Badge: pill, no uppercase, default `sm`. Card: default variant `outline`. Label colour `text[700]`; helper/error row 12px | `size`/`variant` props |
+| Theme `Badge` / `Card` / field labels | Badge: pill, no uppercase, default `sm`. Card: default variant `elevated` (borderless, `shadows.card`). Label colour `text[700]`; helper/error row 12px | `size`/`variant` props |
 | `Header` | `position: sticky; top: 0`, z-index `sticky` (1100, was 1000); `rightSlot` mounts once, not per layout | — |
 | `Table` | Radius `xl`; row height 32/40/52 by density; filter button is named "Filter {label}" (tests querying "Search" break); client pagination resets to page 1 when `data.length` changes | — |
 | `KanbanBoard` | `height`/`maxH` props replace the clipping wrapper; `height="100%"` needs a parent with a definite height | — |
@@ -534,10 +533,32 @@ A popup opened inside another popup takes `zIndex="popoverNested"` (1510), never
 
 ### 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,
-popovers and menus now paint `colors.surfaceRaised` — identical `#ffffff` in light, one elevation
-step up in dark. A custom panel, popover or `ModalContent bg=` in an app should read
-`surfaceRaised` too, and a divider inside it `raisedRule(colors)`.
+In dark mode `background[50]` is the card plane, one step above the canvas; an overlay painted with it
+merges into the cards under it. Library dialogs, drawers, popovers and menus paint `colors.surfaceRaised`,
+one step above the card in dark and identical `#ffffff` in light. A custom panel, popover or
+`ModalContent bg=` should read `surfaceRaised` too, and a divider inside it `raisedRule(colors)`.
+
+### Named fills nearly vanish on a dark card
+
+In dark mode `backgroundColor.light`, `tertiary`, `medium` and `tableHeader` sit only 1.01-1.05:1 off
+`background[50]`, `muted` 1.00-1.06:1 off `surfaceRaised`, and `boxborder[200]` 1.10-1.16:1 off a card and
+1.00-1.06:1 off `surfaceRaised`. Never paint a named canvas fill or raw `boxborder[200]` on a card or overlay:
+use `bandOn(fill, surface)` for a header strip, hover or selection tint, `recessOn(fill, surface)` for a shaded
+or off cell, `cardRule(colors)` for a rule inside a card and `raisedRule(colors)` for a rule inside an overlay.
+All four return the old value unchanged in light mode.
+
+### A Chakra `ModalHeader` inside a coloured box keeps its own ink
+
+The theme gives `ModalHeader` `color: colors.header[900]` and a bottom rule. Wrapping it in a
+`Box bgGradient=… color={ink}` does not recolour it: the header paints `header[900]` itself, so the
+title is dark navy on a blue/purple gradient (3.11–4.11:1 in light across the 9 brands, against
+4.62:1 for the gradient's own ink). Icons and badges inside it that read `currentColor` follow the
+header, not the box.
+
+**Apply:** put the ink on the header itself — `<ModalHeader color={resolved.ink} borderBottomWidth={0}>`
+with `resolved = resolveGradient(stops, colors.white, colors.black)` — or use `LimitReachedModal`.
+For an accent icon on the gradient, use `resolved.ink` unless the accent clears 3:1 on both
+`resolved.from` and `resolved.to`; a theme `yellow[300]` drops to 2.61:1 in dark.
 
 ### `Drawer` / `Modal` / `ProfileCard` drop any child that isn't a named slot — use `portalChildren`
 
@@ -691,13 +712,13 @@ whose defaults arrive asynchronously doesn't open already red.
 ### A wrapper presetting a prop must destructure with a default, not rely on JSX prop order
 
 Wrapping a library component to preset a prop (e.g. `Table`'s `variant`) as
-`<Table variant="studio" {...props} />` silently reverts to the library's own default the moment a
+`<Table variant="classic" {...props} />` silently reverts to the library's own default the moment a
 caller passes `variant={undefined}` — a later spread always wins in JSX, even with `undefined`,
 and the library component resolves that `undefined` via its own default parameter.
 
 **Apply:**
 ```tsx
-const AppTable = ({ variant = 'studio', ...props }: TableProps) => <Table variant={variant} {...props} />;
+const AppTable = ({ variant = 'classic', ...props }: TableProps) => <Table variant={variant} {...props} />;
 ```
 Applies to any library prop with a default value, not just `Table`'s `variant`.
 
@@ -1834,6 +1855,17 @@ from `optionRowDescriptionInk(theme.colors)` (exported from the package root) ra
 `theme.colors.textMuted`. It is a no-op in light mode. The row's main label is
 `optionRowInk(theme.colors, isSelected)` with `optionRowWeight(isSelected)` — never brand ink.
 
+### A custom option list must not fill the selected row
+
+`listRowBackgrounds(colors).selected` and `.active` sit within 1.02:1 of each other on every brand
+and mode, so a list that fills both the selected row and the hovered row shows two identical fills
+and the user cannot tell which one is chosen. Library option lists paint one fill — the cursor's —
+and mark selection with `optionRowWeight` plus a trailing `Check` in `colors.accentText`.
+
+**Apply:** `bg={optionRowFill(listRowBackgrounds(colors), isActive)}` for an index-driven list, or
+`{...optionRowCursorSx(listRowBackgrounds(colors))}` for rows that take DOM focus; both are exported
+from the package root. Text is `optionRowInk(colors, isSelected)`, unchanged on hover.
+
 ### `Table`'s node column `label` needs `labelText` unless its text is plain children
 
 `columns[].label` accepts a node (an icon, a tooltip trigger) as well as a string or number. Every
@@ -1873,6 +1905,16 @@ can outgrow the column.
   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`.
+- **Button press scale matches a real `:active` only.** A `MenuButton as={Button}` held open by Chakra's
+  `data-active` keeps the darker pressed fill but does not stay at 0.98. A consumer `_active={{ transform }}`
+  loses to the press rule while the pointer is down; use `variant="unstyled"` or an `sx` `&:active` with
+  `!important`.
+
+### `Card` is borderless by default (`elevated`)
+
+A Card that frames a table or a list of rows needs `variant="outline"`. `borderColor` alone shows nothing, because
+the default border width is 0, and the outline rule is Chakra `gray[200]`, not `boxborder[200]`. Paint the page with
+`backgroundColor.base`: on `backgroundColor.main` a borderless card can be white on white.
 
 ### `Select` / `SearchSelect` multi rows have no checkbox role
 

package/DESIGN-GUIDE.md

@@ -12,15 +12,21 @@ tickets `layoutDensity.ts`), use it — it encodes these same rules. Otherwise t
 
 Calm, dense, professional SaaS admin — Linear/Stripe-dashboard, not a landing page.
 
-- **Hierarchy comes from type and whitespace, not boxes.** One border per surface. Never nest a
-  bordered card inside a bordered card; inside a card, separate with spacing or a `Divider`.
+- **Hierarchy comes from type and whitespace, not boxes.** One surface per level. Never nest a
+  card inside a card; inside a card, separate with spacing or a `Divider`.
 - **One primary action per view.** One `variant="solid"` button in the page header; everything
   else `outline` or `ghost`. The only exception is a composer's Send button.
 - **Left-aligned, scannable.** Titles and forms left-aligned; numbers right-aligned in tables.
 - **Color means something.** Neutral by default; brand color for the primary action and selection;
   semantic color only for status. No decorative gradients, no colored section backgrounds.
-- **Borders, not shadows, for resting surfaces.** Shadows only on floating things (menus, popovers,
-  modals) and on hover of a card that is itself clickable.
+- **Content cards float, data surfaces are ruled.** `Card` is borderless by default
+  (`variant="elevated"`: `background[50]` lifted by the soft `shadows.card`). Tables, filter bars,
+  list panes and fields keep their 1px `boxborder[200]` rule; a `Card` that frames a table or a
+  list of rows takes `variant="outline"`. Heavier shadows only on floating things (menus,
+  popovers, modals) and on hover of a card that is itself clickable.
+- **Paint the page with `backgroundColor.base`.** In light mode it sits one step (1.09:1) below
+  the card, which is what gives a borderless card its top edge; `backgroundColor.main` is a
+  component surface and can be as white as the card.
 
 ## 2. Spacing (Chakra units, 1 = 4px)
 
@@ -71,6 +77,7 @@ stay light in dark mode.
 | Status text/icon | `colors.semanticText.success \| error \| warning \| info` |
 | Status chip | `<Tag label="Won" colorScheme="green" />` (subtle, `sm` by default) — never a painted `Box`. Tone → `colorScheme`: success `green`, warning `orange`, error `red`, info `blue`, neutral `gray`. Quiet rows: `<Tag tone="success" display="dot" label=… />`; map an app's status vocabulary once with `<StatusTag status map label display />` |
 | Selectable list row (inbox, picker) | `listRowBackgrounds(colors)` for hover/selected + `sx={focusVisibleStyles(colors)}`; pad the list `p={2}` so the ring isn't clipped |
+| Option row in a dropdown/menu/select | `optionRowFill` / `optionRowCursorSx` (fill = cursor only) + `optionRowInk` + a trailing `Check` for the selected row — never a selected fill |
 | Any filled surface you paint | `resolveFilledSurface(colors.<scale>, colors)` → `{ fill, color }` |
 | Icon tint chip, avatar tint | `bg={colors.primary.opacity[8]}` + `color={colors.accentText}` (`opacity` exists on `primary`/`secondary`/`tertiary` only) |
 
@@ -228,7 +235,8 @@ hides its primary; when only one section is empty on a populated page, that sect
 - Reaching for `SelectV2`, `SearchSelect`, `SelectSearch` in new work — all `@deprecated`.
   One picker now: `Select` (`native={false}` for the themed, searchable, multi popup).
   `Dropdown` is the exception — it is an action menu, not a picker, and is not replaced.
-- A bordered card inside a bordered card; a shadow on a resting card.
+- A card inside a card; a border on a content `Card` (it is borderless by default), or any resting
+  shadow heavier than `shadows.card`.
 - Painting a whole table cell with a status color — use a `Tag` in the cell.
 - Centered page titles, hero-sized headings, `size="lg"` buttons, or `size` props restating the default.
 - More than one solid button in a view; a destructive action without `AlertDialog`.

package/dist/Components/Button/Button.styles.js

@@ -5,21 +5,43 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const motion_1 = require("../../Theme/chakra/motion");
 const primitives_1 = require("../../Theme/tokens/primitives");
+const BUTTON_TRANSITION = [
+    (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow", "filter"]),
+    (0, primitives_1.transitionFor)(["transform"], "fast", "out"),
+].join(", ");
+const PRESS = {
+    [motion_1.MOTION_OK_QUERY]: {
+        "&:active:not(:disabled):not([data-loading]):not([aria-disabled=true])": {
+            transform: `scale(${primitives_1.MOTION_PRESS_SCALE})`,
+        },
+    },
+};
 const controlSize = (size) => {
     const { height, fontSize, paddingX } = primitives_1.BUTTON_SIZES[size];
     return { h: height, minW: height, fontSize, px: paddingX };
 };
 // NOTE: [500] alone measures ~4.2 on a dark canvas — resolved per-mode so outline/ghost/link text stays readable.
-const onCanvasText = (theme, colorScheme) => (0, accentText_1.accentTextOnCanvas)(theme.colors[colorScheme], theme.colors.backgroundColor.main);
-// NOTE: [50] alone measured ~1.04 (invisible) in both modes — opacity ramp fixes it where available.
+// NOTE: a bare button sits on the canvas, a card or an overlay; dark overlays are the hardest plane.
+const onCanvasText = (theme, colorScheme) => (0, accentText_1.accentTextOnPlanes)(theme.colors[colorScheme], [
+    theme.colors.backgroundColor.main,
+    theme.colors.background[50],
+    theme.colors.surfaceRaised,
+]);
+// NOTE: [50] alone measured ~1.04 (invisible) in both modes — gray borrows the row-state steps.
 const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
-    return "opacity" in scale ? scale.opacity[step] : scale[50];
+    if ("opacity" in scale)
+        return scale.opacity[step];
+    if (colorScheme !== "gray")
+        return scale[50];
+    const rows = (0, rowStates_1.listRowBackgrounds)(theme.colors);
+    return step === 16 ? rows.active : rows.selectedActive;
 };
 const swatch = (theme, colorScheme) => theme.colors[colorScheme];
-const buttonSolidRung = (theme, colorScheme) => (0, filledSurface_1.solidFillRung)(swatch(theme, colorScheme), theme.colors.white);
+const buttonSolidRung = (theme, colorScheme) => (0, filledSurface_1.solidFillRung)(swatch(theme, colorScheme), theme.colors.white, theme.colors.backgroundColor.main);
 const darkerFill = (theme, colorScheme, step) => {
     const scale = swatch(theme, colorScheme);
     const rung = (0, filledSurface_1.darkerFillRung)(scale, theme.colors.backgroundColor.main, theme.colors.white, step);
@@ -27,6 +49,21 @@ const darkerFill = (theme, colorScheme, step) => {
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
 const labelFor = (theme, fill) => (0, filledSurface_1.labelOnFill)(fill, theme.colors.white, theme.colors.black);
+const solidSurface = (theme, colorScheme) => {
+    if (colorScheme === "primary")
+        return (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors);
+    const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
+    const hoverFill = darkerFill(theme, colorScheme, 0);
+    const activeFill = darkerFill(theme, colorScheme, 1);
+    return {
+        fill,
+        color: labelFor(theme, fill),
+        hoverFill,
+        hoverColor: labelFor(theme, hoverFill),
+        activeFill,
+        activeColor: labelFor(theme, activeFill),
+    };
+};
 // NOTE: replaces Chakra's stock ring, which failed WCAG 1.4.11 on every brand — gated by focusRing.test.ts.
 const focusRing = (theme) => (0, focusRing_styles_1.focusVisibleStyles)(theme.colors);
 exports.Button = {
@@ -35,7 +72,7 @@ exports.Button = {
     baseStyle: ({ theme }) => ({
         borderRadius: "lg",
         fontWeight: 500,
-        transition: (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow", "filter"]),
+        transition: BUTTON_TRANSITION,
         ...(0, motion_1.reducedMotionSx)(),
         _disabled: {
             opacity: 0.6,
@@ -45,35 +82,32 @@ exports.Button = {
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
-            const hoverFill = darkerFill(theme, colorScheme, 0);
-            const activeFill = darkerFill(theme, colorScheme, 1);
-            const hoverLabel = labelFor(theme, hoverFill);
+            const s = solidSurface(theme, colorScheme);
             return {
-                bg: fill,
-                color: labelFor(theme, fill),
+                bg: s.fill,
+                color: s.color,
                 _hover: {
-                    bg: hoverFill,
-                    color: hoverLabel,
-                    boxShadow: "sm",
+                    bg: s.hoverFill,
+                    color: s.hoverColor,
                     _disabled: {
-                        bg: hoverFill, // keep hover color on loading
-                        color: hoverLabel,
+                        bg: s.hoverFill, // keep hover color on loading
+                        color: s.hoverColor,
                     },
                 },
                 _active: {
-                    bg: activeFill,
-                    color: labelFor(theme, activeFill),
+                    bg: s.activeFill,
+                    color: s.activeColor,
                     boxShadow: "none",
                 },
                 _loading: {
-                    bg: hoverFill, // keep hover color while loading
-                    color: hoverLabel,
+                    bg: s.hoverFill, // keep hover color while loading
+                    color: s.hoverColor,
                     _hover: {
-                        bg: hoverFill,
-                        color: hoverLabel,
+                        bg: s.hoverFill,
+                        color: s.hoverColor,
                     },
                 },
+                ...PRESS,
                 ...focusRing(theme),
             };
         },
@@ -94,6 +128,7 @@ exports.Button = {
                 _loading: {
                     color: ink,
                 },
+                ...PRESS,
                 ...focusRing(theme),
             };
         },
@@ -107,6 +142,7 @@ exports.Button = {
             _active: {
                 bg: onCanvasHoverBg(theme, colorScheme, 24),
             },
+            ...PRESS,
             ...focusRing(theme),
         }),
         link: ({ theme, colorScheme = "primary" }) => ({
@@ -143,7 +179,6 @@ exports.Button = {
                 _hover: {
                     bgImage: bg,
                     filter: "brightness(0.92)",
-                    boxShadow: "md",
                     _disabled: { bgImage: bg, filter: "none" },
                 },
                 _active: {

package/dist/Components/Card/CardProps.d.ts

@@ -8,14 +8,14 @@ type DeadDividerProps = {
 };
 /** Padding steps: "none" flush, "2xs" 0.375rem, "xs" 0.75rem all round, "sm" / "md" / "lg" match `size`. */
 export type CardPadding = "none" | "2xs" | "xs" | "sm" | "md" | "lg";
-/** Themed outline surface with optional header/footer slots; children and direction/align/justify apply to the body. */
+/** Themed card surface (outline rule or borderless elevated) with optional header/footer slots; direction/align/justify apply to the body. */
 export type CardProps = Omit<ChakraCardProps, "children" | "variant" | "size" | "color" | "colorScheme" | "direction" | "align" | "justify" | "padding"> & DeadDividerProps & {
     /** Rendered in CardHeader (semibold header ink) only when truthy. */
     header?: React.ReactNode;
     /** Rendered in CardFooter only when truthy. */
     footer?: React.ReactNode;
     children: React.ReactNode;
-    /** Defaults to "outline", the only token-themed one; others fall back to Chakra's stock look. */
+    /** "elevated" (default): borderless, lifted by `shadows.card`. "outline": 1px rule, no shadow, for tables and row lists. */
     variant?: "elevated" | "outline" | "filled" | "unstyled";
     /** Padding scale for header/body/footer; defaults to "md". */
     size?: "sm" | "md" | "lg";

package/dist/Components/ConfirmDialog/ConfirmDialog.js

@@ -8,6 +8,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, iconBg, iconColor, tone = "destructive", cancelLabel = "Cancel", confirmLabel = "Confirm", confirmIcon, isConfirmLoading = false, disableCancelWhilePending = true, confirmationText, confirmationLabel, bodyLayout = "flush", bodySpacing = 4, actionsPt = 0, focusCancelOnOpen = true, isCentered = true, closeOnEsc, closeOnOverlayClick, }) => {
@@ -18,6 +19,6 @@ const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, icon
     const isConfirmDisabled = isConfirmLoading || (requiresTypedConfirmation && typedText !== confirmationText);
     const actions = ((0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, pt: actionsPt, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { ref: cancelRef, label: cancelLabel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", isDisabled: disableCancelWhilePending && isConfirmLoading }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: confirmLabel, onClick: onConfirm, colorScheme: tone === "destructive" ? "red" : "primary", size: "sm", isLoading: isConfirmLoading, isDisabled: isConfirmDisabled, leftIcon: confirmIcon })] }));
     const body = requiresTypedConfirmation ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: confirmationLabel, value: typedText, onChange: (event) => setTypedText(event.target.value) })] })) : (children);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg, color: iconColor, children: icon !== null && icon !== void 0 ? icon : (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "1.05rem", fontWeight: 600, children: title })] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 6, children: bodyLayout === "stack" ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [body, actions] })) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg, color: iconColor, children: icon !== null && icon !== void 0 ? icon : (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "1.05rem", fontWeight: 600, children: title })] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 6, children: bodyLayout === "stack" ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [body, actions] })) })] })] }));
 };
 exports.default = ConfirmDialog;

package/dist/Components/CustomModulesTable/CustomModulesTable.js

@@ -8,6 +8,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const Button_1 = __importDefault(require("../Button/Button"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const EditModuleModal_1 = __importDefault(require("./EditModuleModal"));
@@ -34,20 +35,21 @@ const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, is
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [editTarget, setEditTarget] = (0, react_1.useState)(null);
     const [deleteTarget, setDeleteTarget] = (0, react_1.useState)(null);
-    const border = colors.boxborder[200];
+    const edge = colors.boxborder[200];
     const surface = colors.background[50];
+    const rule = (0, planeStep_1.cardRule)(colors);
     const muted = colors.textMuted;
     const heading = colors.text[800];
-    const headBg = colors.backgroundColor.tableHeader;
+    const headBg = (0, planeStep_1.bandOn)(colors.backgroundColor.tableHeader, surface);
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
         letterSpacing: "0.04em",
         color: muted,
-        borderColor: border,
+        borderColor: rule,
         py: 3,
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "sm", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleOwner }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: modules.map((item) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, children: item.moduleName }) }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), (0, jsx_runtime_1.jsx)(EditModuleModal_1.default, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: edge, boxShadow: "sm", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleOwner }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: modules.map((item) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, children: item.moduleName }) }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), (0, jsx_runtime_1.jsx)(EditModuleModal_1.default, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
                     if (editTarget) {
                         await (onUpdateModule === null || onUpdateModule === void 0 ? void 0 : onUpdateModule({
                             moduleId: editTarget.module_id,

package/dist/Components/CustomModulesTable/EditModuleModal.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 surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Button_1 = __importDefault(require("../Button/Button"));
 const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, labels, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -15,7 +16,7 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
         if (isOpen)
             setName(initialName);
     }, [isOpen, initialName]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, "aria-label": labels.moduleNamePlaceholder, 
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, "aria-label": labels.moduleNamePlaceholder, 
                                 // NOTE: [200] is the decorative divider rung — a real control's outline needs 1.4.11's 3:1, from [800].
                                 borderColor: colors.boxborder[500], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -49,6 +49,7 @@ const useFieldIds_1 = require("../Common/useFieldIds");
 const pickerField_1 = require("./pickerField");
 const CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const textInputIconSize_1 = require("../Input/textInputIconSize");
 const TimePicker_1 = __importDefault(require("./TimePicker"));
@@ -264,7 +265,7 @@ exports.RangeDatePicker = (0, react_1.forwardRef)(function RangeDatePicker(props
                                                                 return;
                                                             }
                                                             setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 exports.RangeDatePicker.displayName = "RangeDatePicker";
 exports.default = exports.RangeDatePicker;

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -44,6 +44,7 @@ const date_fns_1 = require("date-fns");
 const lucide_react_1 = require("lucide-react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const textInputIconSize_1 = require("../Input/textInputIconSize");
 const DatePickerProps_1 = require("./DatePickerProps");
@@ -1026,7 +1027,7 @@ function SingleDatePickerInner(props, ref) {
                                                 setTempDate(updatedDate);
                                                 setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
                                                 setIsTyping(false);
-                                            }, isDisabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                            }, isDisabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
                                                     setTempDate(null);
                                                     requestClose(null);
                                                 }, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));