@stackone/malachite 2.2.3 → 2.4.0

package/COMPONENTS.md

@@ -9,7 +9,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`Surface`** — Rounded, bordered card container with the standard elevation shadow. Use `overflow="clip"` to keep the rounded clipping while letting a `position: sticky` descendant still pin (`hidden` would trap it); `visible` disables clipping. _Key props:_ `children`, `padding`, `overflow`, `className`, `style`.
 - **`SurfaceRow`** — A full-bleed row inside a Surface (used as `Surface.Row`). Owns hover highlight, colour transition and an optional bottom divider. Pass `onClick`/`href` to make the whole row clickable (renders as a real button/anchor, so keyboard nav works). For a selectable row use `role="radio"` + `selected` and put a presentational `<Radio>` inside as the indicator. _Key props:_ `divider`, `disabled`, `onClick`, `href`, `selected`, `role`, `className`, `style`.
 - **`Card`** — Generic content card.
-- **`SelectableCard`** — A card that is one option in a radio group — eyebrow, optional status tag, title, description, a count label and a footer action slot. Use inside a `CardStrip`. Selection is controlled by the consumer: pass `selected`, which drives both the visual treatment and `aria-checked`. A selected card meets the sheet below the way a browser tab meets its toolbar — its bottom corners flare outward onto the strip’s rule — so its outline is one SVG path rather than borders, which would split into two lines at the tangent. `variant` picks the palette: `profile` (green), `library` (neutral) or `editing` (amber, for a profile with unsaved changes). `footerActions` renders outside the control so a menu or icon button inside it stays clickable and keeps its own tab stop. For a row-shaped selectable use `Surface.Row` instead. _Key props:_ `value`, `title`, `titleIcon`, `variant` (`profile` | `library` | `editing`), `eyebrow`, `status` (`label`, `type`), `description`, `countLabel`, `footerActions`, `selected`, `selectedLabel`, `hoverLabel`, `loading` (`loadingLabel`, `loadingHint`), `disabled`, `dimmed`, `onSelect`, `tabIndex`, `aria-label`, `className`, `style`.
+- **`SelectableCard`** — A card that is one option in a radio group — eyebrow, optional status tag, title, description, a count label and a footer action slot. Use inside a `CardStrip`. Selection is controlled by the consumer: pass `selected`, which drives both the visual treatment and `aria-checked`. A selected card meets the sheet below the way a browser tab meets its toolbar — its bottom corners flare outward onto the strip’s rule — so its outline is one SVG path rather than borders, which would split into two lines at the tangent. `variant` picks the palette: `profile` (green), `library` (neutral) or `editing` (amber, for a profile with unsaved changes). `footerActions` renders outside the control so a menu or icon button inside it stays clickable and keeps its own tab stop. `isDefault` marks the card as the account default with a pin beside the title, named for assistive tech and tooltipped for everyone else — it belongs with the name it qualifies rather than among the footer’s controls, which read as things to press. For a row-shaped selectable use `Surface.Row` instead. _Key props:_ `value`, `title`, `titleIcon`, `isDefault`, `variant` (`profile` | `library` | `editing`), `eyebrow`, `status` (`label`, `type`), `description`, `countLabel`, `footerActions`, `selected`, `selectedLabel`, `hoverLabel`, `loading` (`loadingLabel`, `loadingHint`), `disabled`, `dimmed`, `onSelect`, `tabIndex`, `aria-label`, `className`, `style`.
 - **`CardStrip`** — Horizontally scrolling radio group of cards, with edge arrows that appear only when the content overflows, an edge fade, scroll-snap and arrow-key navigation matching `SegmentedControl`. Owns interaction only: it finds its options by looking for `role="radio"` descendants carrying `data-value`, so any such child works (`SelectableCard` emits both). Pass a non-selectable terminal tile as `CardStrip.AddTile` — it sits inside the group but outside the radio set, and must be a direct child or it scrolls with the cards. Use `leading` to pin a card that should not scroll away; the strip tells the cards which slot they are in, so a pinned `SelectableCard` drops the left rule the scrolling ones draw. Set `bleed` when the strip sits in a `PageLayout`: the strip stretches past the horizontal padding of the layout so its bottom rule runs the full width of the page card, while the cards stay aligned to the gutter. With no cards at all the strip degenerates to its pinned slots alone — no trough, no scroller and no arrows — with the add tile standing beside `leading` and taking `primary` emphasis automatically, since adding the first card is the only thing on offer. _Key props:_ `value`, `tone` (`profile` | `library` | `editing` — read off the selected card unless set), `onChange`, `children`, `leading`, `arrows`, `fadeEdges`, `snap`, `bleed`, `scrollSelectedIntoView`, `aria-label`, `aria-labelledby`, `className`, `style`. `CardStrip.AddTile`: `label`, `icon`, `onClick`, `disabled`, `emphasis` (`primary` | `secondary` — left to the strip unless set: `primary` while there are no cards, `secondary` once there are), `className`.
 - **`SplitScreenLayout`** — Two-pane full-screen layout (content + preview/aside) with an optional dismiss button.
 - **`PageLayout`** — Standard page chrome: a bordered card holding a breadcrumb bar, an optional alert strip, and a header block (subtitle, title + suffix, description) above the page body. Used as `PageLayout.Regular`; `PageLayout.Empty` is the chrome-only variant for pre-auth and error screens, with `headerActions` and `background` slots. Actions are declared as data (`buttons`) rather than children, and any that do not fit collapse into an overflow `ActionMenu` via `OverflowRow`. A client-side-routed app must pass `renderLink` so crumbs and the back button go through its router instead of reloading the document. Both layouts render a `main` landmark, demoted via `role` when the app owns its own. Deliberately not a `Surface` — the page card is 16px and carries no shadow. _Key props:_ `PageLayout.Regular`: `breadcrumbLinks`, `breadcrumbActions`, `renderLink`, `title`, `titleSuffix`, `subtitle`, `description`, `buttons`, `loading`, `centered`, `noPadding`, `contentGap` (`small` | `medium` | `large` | `xlarge`, default `small`), `alert`, `role`, `aria-label`, `aria-labelledby`, `className`, `style`. `PageLayout.Empty`: `title`, `centered`, `uniformPadding`, `headerActions`, `background`, `role`, `aria-label`, `aria-labelledby`, `className`, `style`.
@@ -65,7 +65,8 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`Button`** — Primary button. Variants: `filled`, `outline`, `destructive`, `success`, `warning`, `error`, `ghost`, `no-style`. Supports `iconOnly`, `loading`, `tooltip`. _Key props:_ `variant`, `size`, `icon`, `iconOnly`, `loading`, `disabled`, `fill`, `tooltip`.
 - **`PillButton`** — Pill-shaped button, often used for filters/toggleable chips.
 - **`Link`** — Styled anchor/link text. _Key props:_ `LinkProps`.
-- **`SelectionBar`** — A bar reporting a pending selection and the actions that resolve it, for flows where changes accumulate and save once rather than writing on every toggle. Paints its own inverted surface from the `selectionBar` theme tokens, so its buttons are its own rather than `Button`. Defaults to `placement="sticky"` — render it as the last child of the scrolling content and it holds its place over a long list. Counts are announced through a live region that outlives the bar, so the first change is not lost; `open` drives an animated mount so it can appear and leave as the selection goes dirty and clean. Every action closes the bar, so the caller must move focus deliberately in `onClick`. _Key props:_ `open`, `counts` (`value`, `label`), `actions` (`label`, `onClick`, `emphasis`, `icon`, `iconPosition`, `disabled`, `dividerBefore`), `placement`, `aria-label`, `className`.
+- **`InlineConfirm`** — A confirmation asked on the control that triggered it rather than in a modal, for a reversible bulk edit where a dialog would be heavier than the change it guards. Drawn to the design's chip: 33px tall, 12px radius, its confirm cell running to the pill's own edge between two rules. Reads its own `inlineConfirm` theme tokens — a shade off the `SelectionBar` it appears beside, by design. Carries a spinning glyph by default — its own, so it takes the pill's colour rather than the sheet's dimmed grey — standing for a change waiting on an answer; pass `icon={null}` to drop it or a node to replace it. Anchored placement is in viewport coordinates, so the chip must not sit inside an ancestor carrying `transform`, `filter` or `contain`. It takes focus on open so `Enter` confirms, dismisses on `Escape` (through the shared escape-layer stack, so the topmost overlay answers) or a click outside, and returns focus to whatever opened it. `role="alertdialog"` named by the message itself, so the confirm button is never announced bare. Only one can be open at a time: opening a second dismisses the first, so it is never ambiguous what Yes answers. Pass `anchorTo` (a ref to the control it answers for) and it pins itself to that control's left, follows it while the page or a sticky header scrolls, dismisses once it scrolls out of view, and treats clicks on it as inside — without which the same click would dismiss and reopen. Left unanchored it renders in flow for the consumer to place, and must then not sit in a container that clips overflow (`Table` header cells among them). Nothing renders while `open` is false, and its listeners are attached only while it is open. _Key props:_ `open`, `message`, `confirmLabel`, `onConfirm`, `onDismiss`, `anchorTo`, `icon`, `className`, `style`.
+- **`SelectionBar`** — A bar reporting a pending selection and the actions that resolve it, for flows where changes accumulate and save once rather than writing on every toggle. Paints its own inverted surface from the `selectionBar` theme tokens, so its buttons are its own rather than `Button`. A count renders as one phrase (`3 Added`), not a number styled apart from its label, and an empty `value` carries a bare message instead; the separators between counts and before an action are glyphs (`•`, `|`) in the muted colour, not drawn rules. `emphasis` runs `primary` (a light filled button with its own edge, for the action that commits) → `secondary`, the default (a filled chip) → `quiet` (unfilled, taking a wash on hover). The pill is edgeless in light mode and keeps a hairline `border` token in dark, where a shadow alone would not separate it from the sheet. Defaults to `placement="sticky"` — render it as the last child of the scrolling content and it holds its place over a long list. Counts are announced through a live region that outlives the bar, so the first change is not lost; `open` drives an animated mount so it can appear and leave as the selection goes dirty and clean. Every action closes the bar, so the caller must move focus deliberately in `onClick`. _Key props:_ `open`, `counts` (`value`, `label`), `actions` (`label`, `onClick`, `emphasis`, `icon`, `iconPosition`, `disabled`, `dividerBefore`), `placement`, `aria-label`, `className`.
 
 ## Feedback & status
 

package/dist/{CodeBlockHighlighter-CqiWgzsB.js → CodeBlockHighlighter-BMhfTnVI.js}

@@ -1,5 +1,5 @@
 import { jsx as Oe } from "react/jsx-runtime";
-import { _ as un, a as sn, C as re, b as fn } from "./index-DFSCup2y.js";
+import { _ as un, a as sn, C as re, b as fn } from "./index-xzf88_tq.js";
 import H from "react";
 function dn(e, n) {
   if (e == null) return {};
@@ -2781,4 +2781,4 @@ const ht = {
 export {
   bt as default
 };
-//# sourceMappingURL=CodeBlockHighlighter-CqiWgzsB.js.map
+//# sourceMappingURL=CodeBlockHighlighter-BMhfTnVI.js.map