@stackone/malachite 2.49.2 → 2.50.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/COMPONENTS.md +1 -1
- package/dist/components/CardStrip.js +3 -3
- package/dist/components/CardStrip.js.map +1 -1
- package/dist/components/SelectableCard.js +273 -206
- package/dist/components/SelectableCard.js.map +1 -1
- package/dist/index.d.ts +10 -0
- package/dist/tailwind.css.js +1 -1
- package/package.json +1 -1
package/COMPONENTS.md
CHANGED
|
@@ -12,7 +12,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
|
|
|
12
12
|
- **`SurfaceExpandableRow`** — A row that opens to reveal a body (used as `Surface.ExpandableRow`), for a line that carries its own controls. Not `Accordion`, which puts its header inside the toggle button, so a header holding a dropdown or a second button would be invalid: here the row surface takes the click and a cell opts out by wrapping its controls in `ExpandableRow.Controls`, while the arrow stays a real button so the keyboard reaches it. That opt-out is explicit rather than sniffing the event target for an interactive ancestor, because a control rendering into a shadow root retargets the event to its host. `sticky` pins the row while its body scrolls, offset by `stickyTopOffset` for whatever is already pinned above it; it only pins while open, since a closed row has nothing to scroll past. _Key props:_ `header`, `children`, `expanded`, `onToggle`, `sticky`, `stickyTopOffset`, `divider`, `tone`, `aria-label`, `className`, `style`.
|
|
13
13
|
- **`DisclosureArrow`** — The expand/collapse triangle disclosure UI shares (`Accordion`, `Surface.ExpandableRow`). Owns its colour states so they never drift between usages: `text-primary` when expanded, `text-placeholder` otherwise, and dark on hover inside a `group` ancestor — put `group` on the clickable header or row so that hover state activates. _Key props:_ `expanded`, `size`, `className`.
|
|
14
14
|
- **`Card`** — Generic content card.
|
|
15
|
-
- **`SelectableCard`** — A card that is one option in a radio group — eyebrow, optional status tag, title, description, a count label and a top-right 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). `actions` stands in the card’s top-right corner, on the eyebrow row, and renders outside the control so a menu or icon button inside it stays clickable and keeps its own tab stop. Nothing else marks that corner: the flared outline, the tint and the green eyebrow already say which card is selected, so a radio there would only repeat them. `onDismiss` adds an x after `actions`, tinted like the eyebrow so it reads as part of the card — for discarding a draft card; `dismissDisabledReason` disables it and explains why in its tooltip. `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 actions, 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`, `actions`, `onDismiss` (`dismissLabel`, `dismissDisabledReason`), `selected`, `loading` (`loadingLabel`, `loadingHint`), `disabled`, `dimmed`, `onSelect`, `tabIndex`, `aria-label`, `className`, `style`.
|
|
15
|
+
- **`SelectableCard`** — A card that is one option in a radio group — eyebrow, optional status tag, title, description, a count label and a top-right 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). `actions` stands in the card’s top-right corner, on the eyebrow row, and renders outside the control so a menu or icon button inside it stays clickable and keeps its own tab stop. Nothing else marks that corner: the flared outline, the tint and the green eyebrow already say which card is selected, so a radio there would only repeat them. `onDismiss` adds an x after `actions`, tinted like the eyebrow so it reads as part of the card — for discarding a draft card; `dismissDisabledReason` disables it and explains why in its tooltip. `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 actions, which read as things to press. `address` puts a one-line chip above the count for a copyable address such as a server URL: its `label` is cut short with an ellipsis, and its full `value` shows in a tooltip and is copied on click, without selecting the card. It takes the place of `description`, since the card has room for one or the other. For a row-shaped selectable use `Surface.Row` instead. _Key props:_ `value`, `title`, `titleIcon`, `isDefault`, `variant` (`profile` | `library` | `editing`), `eyebrow`, `status` (`label`, `type`), `description`, `address` (`label`, `value`), `countLabel`, `actions`, `onDismiss` (`dismissLabel`, `dismissDisabledReason`), `selected`, `loading` (`loadingLabel`, `loadingHint`), `disabled`, `dimmed`, `onSelect`, `tabIndex`, `aria-label`, `className`, `style`.
|
|
16
16
|
- **`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`.
|
|
17
17
|
- **`SplitScreenLayout`** — Two-pane full-screen layout (content + preview/aside) with an optional dismiss button.
|
|
18
18
|
- **`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`.
|
|
@@ -9,7 +9,7 @@ import { revealTargetFor as Ot, pageTargetFor as pe, EDGE_EPSILON_PX as at, isCa
|
|
|
9
9
|
import { CardStripSlotContext as vt, PINNED_SLOT as me, SCROLLED_SLOT as be } from "./cardStripSlot.js";
|
|
10
10
|
import { FOCUS_RING as Re } from "./focusRing.js";
|
|
11
11
|
import { useAdoptedStyleSheet as wt } from "./useAdoptedStyleSheet.js";
|
|
12
|
-
const ge = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]), G = '[role="radio"]', _e = "data-card-strip-scroller", Ae = "data-card-strip-trough", j = "malachite-card-strip", R = "malachite-card-strip-scroller", zt = "malachite-card-strip-fade", g = "malachite-card-strip-add-tile", it = "data-card-strip-add-slot", Yt = "[data-selectable-card-actions]", Vt = "[data-selectable-card-link]", Se = 'a[href], area[href], button, input, select, textarea, iframe, [contenteditable="true"], [tabindex]', B = "data-card-strip-prev-tabindex", xe = 80, Ct = 11, H = 12, qt = "var(--malachite-shadow-default)", Le = "var(--malachite-card-strip-arrow-background, var(--malachite-card-background, #ffffff))", Ee = "var(--malachite-card-strip-arrow-border, #e8e8e8)", lt = "var(--malachite-card-strip-background, #f1f1f1)", It = "var(--malachite-radius-xxl, 14px)", Te = `${It} ${It} 0 0`, Pt = "var(--malachite-radius-xxxl, 16px)", $e = `${Pt} ${Pt} 0 0`, w = 4, ye = H + w, Mt = H, kt = xe + (Mt - w), ut = ue, De = 2 * (H + w) + ut, Oe = "var(--malachite-card-strip-divider, #dddddd)", Nt = "var(--malachite-card-strip-fade, transparent)", ve = "var(--malachite-selectable-card-hover-background, #e8e8e8)", we = "var(--malachite-card-strip-arrow-border, #e8e8e8)", Ft = "var(--malachite-selectable-card-hover-rule, #bbbbbb)", Ut = "0px 1px 0px 0px rgba(0, 0, 0, 0.4)", Ce = "var(--malachite-card-background, #ffffff)", Ie = "var(--malachite-text-primary, #0a0a0a)", Pe = "var(--malachite-card-strip-add-primary-background, var(--malachite-text-primary, #0a0a0a))", ke = "var(--malachite-card-strip-add-primary-foreground, var(--malachite-card-background, #ffffff))", Ne = "0px 1px 0px 0px rgba(10, 10, 10, 0.7)", ft = de, Bt = 16, M = 9999, Fe = 4, Ue = `
|
|
12
|
+
const ge = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]), G = '[role="radio"]', _e = "data-card-strip-scroller", Ae = "data-card-strip-trough", j = "malachite-card-strip", R = "malachite-card-strip-scroller", zt = "malachite-card-strip-fade", g = "malachite-card-strip-add-tile", it = "data-card-strip-add-slot", Yt = "[data-selectable-card-actions]", Vt = "[data-selectable-card-link], [data-selectable-card-address]", Se = 'a[href], area[href], button, input, select, textarea, iframe, [contenteditable="true"], [tabindex]', B = "data-card-strip-prev-tabindex", xe = 80, Ct = 11, H = 12, qt = "var(--malachite-shadow-default)", Le = "var(--malachite-card-strip-arrow-background, var(--malachite-card-background, #ffffff))", Ee = "var(--malachite-card-strip-arrow-border, #e8e8e8)", lt = "var(--malachite-card-strip-background, #f1f1f1)", It = "var(--malachite-radius-xxl, 14px)", Te = `${It} ${It} 0 0`, Pt = "var(--malachite-radius-xxxl, 16px)", $e = `${Pt} ${Pt} 0 0`, w = 4, ye = H + w, Mt = H, kt = xe + (Mt - w), ut = ue, De = 2 * (H + w) + ut, Oe = "var(--malachite-card-strip-divider, #dddddd)", Nt = "var(--malachite-card-strip-fade, transparent)", ve = "var(--malachite-selectable-card-hover-background, #e8e8e8)", we = "var(--malachite-card-strip-arrow-border, #e8e8e8)", Ft = "var(--malachite-selectable-card-hover-rule, #bbbbbb)", Ut = "0px 1px 0px 0px rgba(0, 0, 0, 0.4)", Ce = "var(--malachite-card-background, #ffffff)", Ie = "var(--malachite-text-primary, #0a0a0a)", Pe = "var(--malachite-card-strip-add-primary-background, var(--malachite-text-primary, #0a0a0a))", ke = "var(--malachite-card-strip-add-primary-foreground, var(--malachite-card-background, #ffffff))", Ne = "0px 1px 0px 0px rgba(10, 10, 10, 0.7)", ft = de, Bt = 16, M = 9999, Fe = 4, Ue = `
|
|
13
13
|
.${j} {
|
|
14
14
|
clip-path: inset(-${M}px -${M}px 0);
|
|
15
15
|
}
|
|
@@ -123,10 +123,10 @@ const ge = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
|
|
|
123
123
|
return null;
|
|
124
124
|
}, ze = (e) => {
|
|
125
125
|
var d;
|
|
126
|
-
const a = Xe(e), s = (d = Kt(e)) == null ? void 0 : d.
|
|
126
|
+
const a = Xe(e), s = (d = Kt(e)) == null ? void 0 : d.querySelectorAll(Vt);
|
|
127
127
|
return [
|
|
128
128
|
...a ? Array.from(a.querySelectorAll(Se)) : [],
|
|
129
|
-
...s ?
|
|
129
|
+
...s ? Array.from(s) : []
|
|
130
130
|
];
|
|
131
131
|
}, Ye = (e) => {
|
|
132
132
|
e.hasAttribute(B) || e.setAttribute(B, e.getAttribute("tabindex") ?? ""), e.setAttribute("tabindex", "-1");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardStrip.js","sources":["../../src/components/CardStrip.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport ForwardArrowIcon from './CustomIcons/ForwardArrowIcon';\nimport PlusIcon from './CustomIcons/PlusIcon';\nimport { CONTENT_INSET } from './PageLayout/constants';\nimport {\n CARD_FLARE_PX,\n CARD_FLARE_TIP_PX,\n CARD_WIDTH_PX,\n FLARE_CLASS,\n STRIP_RULE_PX,\n} from './SelectableCard';\nimport { EDGE_EPSILON_PX, isCardInView, pageTargetFor, revealTargetFor } from './cardStripGeometry';\nimport { CardStripSlotContext, PINNED_SLOT, SCROLLED_SLOT } from './cardStripSlot';\nimport { FOCUS_RING } from './focusRing';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport type CardStripAddTileEmphasis = 'primary' | 'secondary';\n\nexport interface CardStripAddTileProps {\n /** Visible label, e.g. \"Add Profile\". Also names the button for assistive tech. */\n label: string;\n /** Defaults to a plus. */\n icon?: React.ReactNode;\n onClick: () => void;\n disabled?: boolean;\n /** Leave unset: CardStrip picks `primary` while the strip is empty and `secondary` once cards exist. */\n emphasis?: CardStripAddTileEmphasis;\n className?: string;\n}\n\n/** Palette for the strip's rule. Pass the tone of whatever card is selected. */\nexport type CardStripTone = 'profile' | 'library' | 'editing';\n\nexport interface CardStripProps {\n /** The selected card's value, matched against each radio child's `data-value`. */\n value: string;\n /** Overrides the palette the strip reads off the selected card. See `CardStripTone`. */\n tone?: CardStripTone;\n onChange: (value: string) => void;\n /** Cards. Any element with `role=\"radio\"` and a `data-value` joins the group; an\n * add tile must be a direct child or it scrolls with the cards. */\n children: React.ReactNode;\n /** Pinned, non-scrolling slot before the cards (the Library card in the profile picker). */\n leading?: React.ReactNode;\n /** Circular scroll affordances, shown only on an edge that can actually scroll. */\n arrows?: boolean;\n /** Fade the cards out at any edge they scroll past. */\n fadeEdges?: boolean;\n /** Snap cards to the leading edge as the strip scrolls. */\n snap?: boolean;\n /** Run the bottom rule the full width of the page card while the cards stay on the gutter.\n * Only has an effect inside a layout that publishes its inset (`PageLayout`). */\n bleed?: boolean;\n /** Whether a selection change scrolls the selected card into view. The strip's opening\n * selection is placed instantly; later ones slide, unless motion is reduced. Set `false`\n * when the value comes from a URL, or a deep-linked strip below the fold jumps the page\n * on load. */\n scrollSelectedIntoView?: boolean;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n className?: string;\n style?: React.CSSProperties;\n}\n\n/** Arrow keys move AND select, per the WAI-ARIA radiogroup pattern. */\nconst NAV_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);\n\nconst RADIO_SELECTOR = '[role=\"radio\"]';\nconst SCROLLER_ATTR = 'data-card-strip-scroller';\nconst TROUGH_ATTR = 'data-card-strip-trough';\nconst ROOT_CLASS = 'malachite-card-strip';\nconst SCROLLER_CLASS = 'malachite-card-strip-scroller';\nconst FADE_CLASS = 'malachite-card-strip-fade';\nconst ADD_TILE_CLASS = 'malachite-card-strip-add-tile';\nconst ADD_SLOT_ATTR = 'data-card-strip-add-slot';\n\nconst ACTIONS_SELECTOR = '[data-selectable-card-actions]';\nconst LINK_SELECTOR = '[data-selectable-card-link]';\nconst FOCUSABLE_SELECTOR =\n 'a[href], area[href], button, input, select, textarea, iframe, [contenteditable=\"true\"], [tabindex]';\nconst PREV_TABINDEX_ATTR = 'data-card-strip-prev-tabindex';\n\nconst FADE_WIDTH_PX = 80;\n\nconst ARROW_GLYPH_PX = 11;\nconst GUTTER_REST_PX = 12;\n\nconst LIP_SHADOW = 'var(--malachite-shadow-default)';\nconst ARROW_BACKGROUND =\n 'var(--malachite-card-strip-arrow-background, var(--malachite-card-background, #ffffff))';\nconst ARROW_BORDER = 'var(--malachite-card-strip-arrow-border, #e8e8e8)';\nconst TROUGH_BACKGROUND = 'var(--malachite-card-strip-background, #f1f1f1)';\nconst CARD_CORNER = 'var(--malachite-radius-xxl, 14px)';\nconst CARD_RADIUS = `${CARD_CORNER} ${CARD_CORNER} 0 0`;\nconst TROUGH_CORNER = 'var(--malachite-radius-xxxl, 16px)';\nconst TROUGH_RADIUS = `${TROUGH_CORNER} ${TROUGH_CORNER} 0 0`;\nconst TROUGH_SHOULDER_PX = 4;\n// Fills the gap between the edge card and its neighbour, covering neither.\nconst ARROW_OFFSET_PX = GUTTER_REST_PX + TROUGH_SHOULDER_PX;\n// Any wider and the fade paints over the neighbouring slot.\nconst FADE_OVERHANG_PX = GUTTER_REST_PX;\nconst FADE_RAMP_PX = FADE_WIDTH_PX + (FADE_OVERHANG_PX - TROUGH_SHOULDER_PX);\nconst SLOT_WIDTH_PX = CARD_WIDTH_PX;\nconst TROUGH_FLOOR_PX = 2 * (GUTTER_REST_PX + TROUGH_SHOULDER_PX) + SLOT_WIDTH_PX;\nconst DIVIDER_COLOR = 'var(--malachite-card-strip-divider, #dddddd)';\nconst FADE_COLOR = 'var(--malachite-card-strip-fade, transparent)';\nconst ADD_HOVER_BACKGROUND = 'var(--malachite-selectable-card-hover-background, #e8e8e8)';\nconst ADD_PILL_BORDER = 'var(--malachite-card-strip-arrow-border, #e8e8e8)';\nconst ADD_PILL_BORDER_ACTIVE = 'var(--malachite-selectable-card-hover-rule, #bbbbbb)';\nconst ADD_PILL_SHADOW_DEEP = '0px 1px 0px 0px rgba(0, 0, 0, 0.4)';\nconst ADD_PILL_BACKGROUND = 'var(--malachite-card-background, #ffffff)';\nconst ADD_PILL_FOREGROUND = 'var(--malachite-text-primary, #0a0a0a)';\nconst ADD_PILL_PRIMARY_BACKGROUND =\n 'var(--malachite-card-strip-add-primary-background, var(--malachite-text-primary, #0a0a0a))';\nconst ADD_PILL_PRIMARY_FOREGROUND =\n 'var(--malachite-card-strip-add-primary-foreground, var(--malachite-card-background, #ffffff))';\nconst ADD_PILL_PRIMARY_SHADOW = '0px 1px 0px 0px rgba(10, 10, 10, 0.7)';\n\nconst BOTTOM_RULE_WEIGHT_PX = STRIP_RULE_PX;\n\nconst OVERFLOW_INSET_PX = 16;\n\nconst CLIP_SLACK_PX = 9999;\nconst FOCUS_RING_REACH_PX = 4;\n\n/** A sheet, not inline styles: these rules have to reach children this component does not render. */\nconst SCROLLER_CSS = `\n.${ROOT_CLASS} {\n clip-path: inset(-${CLIP_SLACK_PX}px -${CLIP_SLACK_PX}px 0);\n}\n.${ROOT_CLASS}:has(:focus-visible) {\n clip-path: inset(-${CLIP_SLACK_PX}px -${CLIP_SLACK_PX}px -${FOCUS_RING_REACH_PX}px);\n}\n.${SCROLLER_CLASS} {\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-behavior: smooth;\n scrollbar-width: none;\n -ms-overflow-style: none;\n padding-block: ${OVERFLOW_INSET_PX}px;\n margin-block: -${OVERFLOW_INSET_PX}px;\n /* overflow-x clips both axes, so the end cards would lose a flare; the negative margin trades\n the padding back out and scroll-padding keeps the rest position at zero. */\n padding-inline: ${CARD_FLARE_PX}px;\n margin-inline: -${CARD_FLARE_PX}px;\n scroll-padding-inline: ${CARD_FLARE_PX}px;\n}\n/* A card focused at a faded edge has to stay readable, so the fade lifts entirely. */\n.${ROOT_CLASS}:has(:focus-visible) .${FADE_CLASS} {\n display: none;\n}\n.${SCROLLER_CLASS}::-webkit-scrollbar {\n display: none;\n}\n/* No bottom edge: the strip's rule is the baseline for the add tile as much as for a card. */\n.${ADD_TILE_CLASS} > * {\n background: ${TROUGH_BACKGROUND};\n border-radius: ${CARD_RADIUS};\n}\n.${ADD_TILE_CLASS}:hover:not(:has(button:disabled)) > * {\n background: ${ADD_HOVER_BACKGROUND};\n}\n.${ADD_TILE_CLASS} button:active:not(:disabled) {\n opacity: 0.8;\n}\n.${ADD_TILE_CLASS}:has(button:active) > * {\n background: ${TROUGH_BACKGROUND};\n}\n.${ADD_TILE_CLASS}[data-emphasis='secondary'] button {\n border-color: ${ADD_PILL_BORDER};\n box-shadow: ${LIP_SHADOW};\n}\n.${ADD_TILE_CLASS}[data-emphasis='secondary']:hover:not(:has(button:disabled)) button {\n border-color: ${ADD_PILL_BORDER_ACTIVE};\n box-shadow: ${ADD_PILL_SHADOW_DEEP};\n}\n.${ADD_TILE_CLASS}[data-emphasis='secondary'] button:active:not(:disabled) {\n border-color: ${ADD_PILL_BORDER_ACTIVE};\n box-shadow: ${ADD_PILL_SHADOW_DEEP};\n}\n.${ADD_TILE_CLASS}[data-emphasis='primary'] button {\n border-color: transparent;\n box-shadow: ${ADD_PILL_PRIMARY_SHADOW};\n}\n.${SCROLLER_CLASS} > * {\n flex: 0 0 auto;\n min-width: 0;\n}\n.${SCROLLER_CLASS} > * + * {\n border-left: 1px solid ${DIVIDER_COLOR};\n}\n.${SCROLLER_CLASS}[data-snap='true'] {\n scroll-snap-type: x proximity;\n}\n.${SCROLLER_CLASS}[data-snap='true'] > * {\n scroll-snap-align: start;\n}\n@media (prefers-reduced-motion: reduce) {\n .${SCROLLER_CLASS} {\n scroll-behavior: auto;\n }\n .${SCROLLER_CLASS}[data-snap='true'] {\n scroll-snap-type: none;\n }\n .${SCROLLER_CLASS}[data-snap='true'] > * {\n scroll-snap-align: none;\n }\n}`;\n\nconst STYLE_ID = 'malachite-card-strip-style';\n// Its own id: an older malachite copy on the page may already own STYLE_ID without these rules.\nconst ADD_SLOT_STYLE_ID = 'malachite-card-strip-add-slot';\n// In the track the trough is already the tile's shoulder, and it is no card to rule off.\nconst ADD_SLOT_CSS = `\n.${SCROLLER_CLASS} > [${ADD_SLOT_ATTR}] {\n display: flex;\n border-left: none;\n}\n[${ADD_SLOT_ATTR}] > .${ADD_TILE_CLASS} {\n height: 100% !important;\n padding: 0 !important;\n}\n`;\n\n/** `window.matchMedia` is absent under SSR and in older test environments. */\nconst prefersReducedMotion = (): boolean => {\n if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n return true;\n }\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n};\n\nconst radioValue = (radio: HTMLElement): string | null =>\n radio.dataset.value ?? radio.getAttribute('value');\n\nconst isRadioDisabled = (radio: HTMLElement): boolean =>\n radio.hasAttribute('disabled') || radio.getAttribute('aria-disabled') === 'true';\n\nconst cardFor = (radio: HTMLElement): HTMLElement | null => {\n const card = radio.parentElement;\n return card && card.querySelectorAll(RADIO_SELECTOR).length === 1 ? card : null;\n};\n\nconst actionsFor = (radio: HTMLElement): HTMLElement | null =>\n cardFor(radio)?.querySelector<HTMLElement>(ACTIONS_SELECTOR) ?? null;\n\n/** A card is wider than its radio, so `closest` misses clicks on the count row. */\nconst radioForClick = (target: Element, root: Element): HTMLElement | null => {\n const direct = target.closest<HTMLElement>(RADIO_SELECTOR);\n if (direct) {\n return direct;\n }\n if (target.closest(ACTIONS_SELECTOR) || target.closest(LINK_SELECTOR)) {\n return null;\n }\n let node: Element | null = target;\n while (node && root.contains(node)) {\n const radios: NodeListOf<HTMLElement> = node.querySelectorAll(RADIO_SELECTOR);\n if (radios.length === 1 && radios[0].parentElement === node) {\n return radios[0];\n }\n node = node.parentElement;\n }\n return null;\n};\n\n// The card's own controls beside its radio, which only the card holding the tab stop keeps.\nconst cardControls = (radio: HTMLElement): HTMLElement[] => {\n const actions = actionsFor(radio);\n const link = cardFor(radio)?.querySelector<HTMLElement>(LINK_SELECTOR);\n return [\n ...(actions ? Array.from(actions.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)) : []),\n ...(link ? [link] : []),\n ];\n};\n\nconst suppressTabStop = (element: HTMLElement): void => {\n if (!element.hasAttribute(PREV_TABINDEX_ATTR)) {\n element.setAttribute(PREV_TABINDEX_ATTR, element.getAttribute('tabindex') ?? '');\n }\n element.setAttribute('tabindex', '-1');\n};\n\nconst restoreTabStop = (element: HTMLElement): void => {\n if (!element.hasAttribute(PREV_TABINDEX_ATTR)) {\n return;\n }\n const previous = element.getAttribute(PREV_TABINDEX_ATTR);\n element.removeAttribute(PREV_TABINDEX_ATTR);\n if (previous) {\n element.setAttribute('tabindex', previous);\n } else {\n element.removeAttribute('tabindex');\n }\n};\n\nconst TONE_RULE: Record<CardStripTone, string> = {\n profile: 'var(--malachite-selectable-card-selected-border, #047b43)',\n library: 'var(--malachite-selectable-card-library-selected-border, #bbbbbb)',\n editing: 'var(--malachite-selectable-card-pending-foreground, #96580a)',\n};\nconst RULE_ROW_STYLE: React.CSSProperties = {\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'left bottom',\n backgroundSize: `100% ${BOTTOM_RULE_WEIGHT_PX}px`,\n};\n\n/** The rule runs under the flare's tip rather than butting against it, so antialiasing\n * cannot open the junction into a gap. */\nconst RULE_GAP_OVERLAP_PX = 0.5;\n\nconst FLARE_TIP_INSET_PX = CARD_FLARE_PX - CARD_FLARE_TIP_PX;\n\nconst flareTips = (card: HTMLElement): { left: number; right: number } | null => {\n const flare = card.querySelector(`:scope > .${FLARE_CLASS}`);\n if (!flare) {\n return null;\n }\n const { left, right } = flare.getBoundingClientRect();\n return { left: left + FLARE_TIP_INSET_PX, right: right - FLARE_TIP_INSET_PX };\n};\n\n/** The rule is cut where the selected card stands, never covered: the strip's clip lands on the\n * rule's own edge, so a cover takes the same partial alpha and the rule bleeds through it. */\nconst paintRule = (\n root: HTMLElement | null,\n scroller: HTMLElement | null,\n card: HTMLElement | null | undefined,\n tone: CardStripTone,\n): void => {\n if (!root) {\n return;\n }\n const colour = TONE_RULE[tone];\n const rootRect = root.getBoundingClientRect();\n const rootLeft = rootRect.left;\n const clip = card && scroller?.contains(card) ? scroller.getBoundingClientRect() : rootRect;\n const cardRect = card?.getBoundingClientRect();\n const tips = card ? flareTips(card) : null;\n const tipLeft = tips?.left ?? (cardRect ? cardRect.left - CARD_FLARE_TIP_PX : 0);\n const tipRight = tips?.right ?? (cardRect ? cardRect.right + CARD_FLARE_TIP_PX : 0);\n const from = cardRect ? Math.max(tipLeft, clip.left) + RULE_GAP_OVERLAP_PX - rootLeft : 0;\n const to = cardRect ? Math.min(tipRight, clip.right) - RULE_GAP_OVERLAP_PX - rootLeft : 0;\n\n root.style.backgroundImage =\n to > from\n ? `linear-gradient(to right, ${colour} 0 ${from}px, transparent ${from}px ${to}px, ${colour} ${to}px 100%)`\n : `linear-gradient(to right, ${colour} 0 100%)`;\n};\n\nconst BLEED_STYLE: React.CSSProperties = {\n marginInline: `calc(${CONTENT_INSET} * -1)`,\n paddingInline: CONTENT_INSET,\n};\n\n/** The rule's row is a margin, never padding: a background paints under its own padding, which\n * would hide the very line the troughs stand on. */\nconst TROUGH_SURFACE: React.CSSProperties = {\n background: TROUGH_BACKGROUND,\n borderRadius: TROUGH_RADIUS,\n paddingTop: `${TROUGH_SHOULDER_PX}px`,\n paddingInline: `${TROUGH_SHOULDER_PX}px`,\n marginBottom: `${BOTTOM_RULE_WEIGHT_PX}px`,\n};\nconst TROUGH_STYLE: React.CSSProperties = {\n ...TROUGH_SURFACE,\n marginInline: `${GUTTER_REST_PX}px`,\n};\nconst ADD_TILE_SHAPE_STYLE: React.CSSProperties = TROUGH_SURFACE;\n\nconst PINNED_SLOT_STYLE: React.CSSProperties = TROUGH_SURFACE;\n\nconst EMPTY_ADD_SLOT_STYLE: React.CSSProperties = {\n marginInlineStart: `${GUTTER_REST_PX}px`,\n};\n\nconst ADD_PILL_FILL: Record<CardStripAddTileEmphasis, React.CSSProperties> = {\n primary: {\n backgroundColor: ADD_PILL_PRIMARY_BACKGROUND,\n color: ADD_PILL_PRIMARY_FOREGROUND,\n },\n secondary: { backgroundColor: ADD_PILL_BACKGROUND, color: ADD_PILL_FOREGROUND },\n};\n\nconst AddTile: React.FC<CardStripAddTileProps> = ({\n label,\n icon,\n onClick,\n disabled = false,\n emphasis = 'secondary',\n className = '',\n}) => (\n <div\n className={ADD_TILE_CLASS}\n data-emphasis={emphasis}\n style={{\n ...ADD_TILE_SHAPE_STYLE,\n width: `${SLOT_WIDTH_PX}px`,\n height: `calc(100% - ${BOTTOM_RULE_WEIGHT_PX}px)`,\n }}\n >\n <div className=\"flex h-full items-center justify-center px-4\">\n <button\n type=\"button\"\n onClick={onClick}\n disabled={disabled}\n style={ADD_PILL_FILL[emphasis]}\n className={`${FOCUS_RING} inline-flex items-center justify-center gap-1.5 h-[var(--malachite-control-height-medium,32px)] w-[108px] px-2.5 rounded-xl border border-solid text-[length:var(--malachite-font-size-small,13px)] font-medium whitespace-nowrap ${\n disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'\n } ${className}`}\n >\n <span className=\"inline-flex h-[13px] w-[13px] shrink-0 items-center justify-center\">\n {icon ?? <PlusIcon size={13} />}\n </span>\n {label}\n </button>\n </div>\n </div>\n);\n\nconst isAddTile = (node: React.ReactNode): node is React.ReactElement<CardStripAddTileProps> =>\n React.isValidElement(node) && node.type === AddTile;\n\nconst hidesAddTile = (child: React.ReactNode): boolean =>\n React.isValidElement<{ children?: React.ReactNode }>(child) &&\n child.type === React.Fragment &&\n React.Children.toArray(child.props.children).some(isAddTile);\n\ninterface ArrowButtonProps {\n side: 'left' | 'right';\n onClick: () => void;\n}\n\nconst ArrowButton: React.FC<ArrowButtonProps> = ({ side, onClick }) => (\n <button\n type=\"button\"\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={side === 'left' ? 'Scroll left' : 'Scroll right'}\n onClick={onClick}\n className=\"absolute top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center w-5 h-5 rounded-lg cursor-pointer text-[var(--malachite-text-secondary)]\"\n style={{\n [side]: `-${ARROW_OFFSET_PX}px`,\n background: ARROW_BACKGROUND,\n border: `1px solid ${ARROW_BORDER}`,\n boxShadow: LIP_SHADOW,\n }}\n >\n {side === 'left' ? (\n <ArrowLeftIcon size={ARROW_GLYPH_PX} />\n ) : (\n <ForwardArrowIcon size={ARROW_GLYPH_PX} />\n )}\n </button>\n);\n\n/** A horizontally scrolling radiogroup of cards — the \"pick one of these\" strip. */\nconst CardStrip: React.FC<CardStripProps> & { AddTile: React.FC<CardStripAddTileProps> } = ({\n value,\n tone,\n onChange,\n children,\n leading,\n arrows = true,\n fadeEdges = true,\n snap = true,\n bleed = false,\n scrollSelectedIntoView = true,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n className = '',\n style,\n}) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const pinnedRef = useRef<HTMLDivElement>(null);\n const scrollerRef = useRef<HTMLDivElement>(null);\n const hasPositioned = useRef(false);\n const [edges, setEdges] = useState({ canScrollLeft: false, canScrollRight: false });\n const [cramped, setCramped] = useState(false);\n const addHostRef = useRef<HTMLDivElement>(null);\n const addTileFocused = useRef(false);\n\n useAdoptedStyleSheet(rootRef, SCROLLER_CSS, STYLE_ID);\n useAdoptedStyleSheet(rootRef, ADD_SLOT_CSS, ADD_SLOT_STYLE_ID);\n\n const childList = React.Children.toArray(children);\n const cards = childList.filter((child) => !isAddTile(child));\n const wrappedAddTile = cards.some(hidesAddTile);\n const hasCards = cards.length > 0;\n\n const addTiles = childList\n .filter(isAddTile)\n .map((tile) =>\n tile.props.emphasis === undefined\n ? React.cloneElement(tile, { emphasis: hasCards ? 'secondary' : 'primary' })\n : tile,\n );\n\n const childCount = childList.length;\n const addTileCount = addTiles.length;\n const hasLeading = Boolean(leading);\n\n // With no room for a card between the pinned tiles, the add tile scrolls with the cards.\n // biome-ignore lint/correctness/useExhaustiveDependencies: a new pinned slot needs observing\n useLayoutEffect(() => {\n const root = rootRef.current;\n if (!root || !hasCards || addTileCount === 0) {\n setCramped(false);\n return;\n }\n const pinnedSlot = pinnedRef.current;\n const { paddingLeft, paddingRight } = getComputedStyle(root);\n const inset = (parseFloat(paddingLeft) || 0) + (parseFloat(paddingRight) || 0);\n let content = root.clientWidth - inset;\n let pinned = pinnedSlot?.offsetWidth ?? 0;\n const decide = (): void => {\n const needs = pinned + addTileCount * SLOT_WIDTH_PX + TROUGH_FLOOR_PX;\n setCramped(content > 0 && content < needs);\n };\n decide();\n // Sizes from the entries: reading layout here would force the layout the observer spares.\n const observer =\n typeof ResizeObserver !== 'undefined'\n ? new ResizeObserver((entries) => {\n for (const entry of entries ?? []) {\n if (entry.target === root) {\n content = entry.contentRect.width;\n } else {\n pinned =\n entry.borderBoxSize?.[0]?.inlineSize ??\n entry.contentRect.width + 2 * TROUGH_SHOULDER_PX;\n }\n }\n decide();\n })\n : null;\n observer?.observe(root);\n if (pinnedSlot) {\n observer?.observe(pinnedSlot);\n }\n return () => observer?.disconnect();\n }, [hasCards, addTileCount, hasLeading]);\n\n const addInTrack = cramped && hasCards;\n const trackAddTileFocus = useCallback((event: React.FocusEvent) => {\n const focused = event.type === 'focus' ? event.target : event.relatedTarget;\n addTileFocused.current = Boolean(\n focused instanceof Node && addHostRef.current?.contains(focused),\n );\n }, []);\n\n // The tile remounts wherever it moves, so focus has to follow it there. Removing a focused\n // element fires no blur, so the flag survives the move.\n // biome-ignore lint/correctness/useExhaustiveDependencies: the tile moving is the signal\n useLayoutEffect(() => {\n const host = addHostRef.current;\n const active = host ? (host.getRootNode() as Document | ShadowRoot).activeElement : null;\n if (addTileFocused.current && host && !(active && host.contains(active))) {\n host.querySelector('button')?.focus({ preventScroll: true });\n }\n }, [addInTrack]);\n\n const getRadios = useCallback((): HTMLElement[] => {\n const root = rootRef.current;\n if (!root) {\n return [];\n }\n return Array.from(root.querySelectorAll<HTMLElement>(RADIO_SELECTOR));\n }, []);\n\n // Read off the DOM rather than the children's keys: unkeyed cards reorder under positional\n // keys that never change. Attribute reads only, so this forces no layout.\n const radioOrder = useRef<string | null>(null);\n const [reorders, setReorders] = useState(0);\n useLayoutEffect(() => {\n const next = JSON.stringify(getRadios().map(radioValue));\n if (radioOrder.current !== null && radioOrder.current !== next) {\n setReorders((count) => count + 1);\n }\n radioOrder.current = next;\n });\n\n const getNavigableRadios = useCallback(\n (): HTMLElement[] => getRadios().filter((radio) => radioValue(radio) !== null),\n [getRadios],\n );\n\n const warned = useRef(new Set<string>());\n const warnOnce = useCallback((key: string, message: string): void => {\n if (warned.current.has(key)) {\n return;\n }\n warned.current.add(key);\n console.warn(message);\n }, []);\n\n const [derivedTone, setDerivedTone] = useState<CardStripTone>('profile');\n\n useLayoutEffect(() => {\n const selectedCard = getRadios()\n .find((radio) => radioValue(radio) === value)\n ?.parentElement?.getAttribute('data-variant');\n if (\n selectedCard === 'profile' ||\n selectedCard === 'library' ||\n selectedCard === 'editing'\n ) {\n setDerivedTone(selectedCard);\n }\n }, [getRadios, value]);\n\n useLayoutEffect(() => {\n const radios = getRadios();\n const navigable = getNavigableRadios();\n const selected = navigable.find((radio) => radioValue(radio) === value);\n const tabStop = selected ?? navigable.find((radio) => !isRadioDisabled(radio)) ?? null;\n\n radios.forEach((radio) => {\n const holdsTabStop = radio === tabStop;\n const nextTabIndex = holdsTabStop ? 0 : -1;\n if (radio.tabIndex !== nextTabIndex) {\n radio.tabIndex = nextTabIndex;\n }\n for (const control of cardControls(radio)) {\n if (holdsTabStop) {\n restoreTabStop(control);\n } else {\n suppressTabStop(control);\n }\n }\n });\n\n if (process.env.NODE_ENV === 'production') {\n return;\n }\n\n if (navigable.length !== radios.length) {\n warnOnce(\n 'missing-value',\n 'CardStrip: a child with role=\"radio\" has no `data-value`. It cannot be selected or reached by arrow keys, so it is excluded from the radio set. Give every card a `data-value`.',\n );\n }\n\n const values = new Set<string>();\n for (const radio of navigable) {\n const current = radioValue(radio);\n if (current === null) {\n continue;\n }\n if (values.has(current)) {\n warnOnce(\n `duplicate:${current}`,\n `CardStrip: two cards share the data-value \"${current}\". Both will read as checked and only the first is selectable — data-value must be unique.`,\n );\n }\n values.add(current);\n }\n\n const selectionSettled = value !== '';\n\n if (radios.length > 0 && selectionSettled && !values.has(value)) {\n warnOnce(\n `unmatched:${value}`,\n `CardStrip: value \"${value}\" matches no card's data-value, so the group reports no selection.`,\n );\n }\n\n const checked = radios.filter(\n (radio) => radio.getAttribute('aria-checked') === 'true',\n ).length;\n if (radios.length > 0 && selectionSettled && checked !== 1) {\n warnOnce(\n `checked:${checked}`,\n `CardStrip: ${checked} cards are aria-checked, but a radiogroup has exactly one. Drive each card's checked state from the strip's \\`value\\`.`,\n );\n }\n\n if (wrappedAddTile) {\n warnOnce(\n 'wrapped-add-tile',\n 'CardStrip: a CardStrip.AddTile inside a fragment is treated as a card and scrolls with them. The add tile must be a direct child of CardStrip.',\n );\n }\n });\n\n const selectedCard = useCallback((): HTMLElement | null => {\n const selected = getRadios().find((radio) => radioValue(radio) === value);\n return selected ? ((selected.closest('[role=\"radio\"]') ?? selected) as HTMLElement) : null;\n }, [getRadios, value]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: cards arriving is the signal\n useLayoutEffect(() => {\n if (!scrollSelectedIntoView) {\n return;\n }\n const scroller = scrollerRef.current;\n const card = selectedCard();\n // jsdom implements neither, and a strip that cannot scroll has nothing to bring into view.\n if (!scroller || !card || typeof scroller.scrollTo !== 'function') {\n return;\n }\n\n // The first placement is where the strip opens — a deep link, not a move — so it is\n // instant. Every later one is the selection travelling, and travel is legible only if\n // you can see it happen.\n const wasPositioned = hasPositioned.current;\n hasPositioned.current = true;\n\n const target = revealTargetFor(scroller, card, snap);\n if (target !== null) {\n scroller.scrollTo({\n left: target,\n behavior: wasPositioned && !prefersReducedMotion() ? 'smooth' : 'instant',\n });\n }\n }, [selectedCard, scrollSelectedIntoView, snap, childCount, reorders]);\n\n const ruleTone = tone ?? derivedTone;\n const callerPaintsBackground =\n style?.background !== undefined || style?.backgroundImage !== undefined;\n\n const measure = useCallback(() => {\n const scroller = scrollerRef.current;\n if (!callerPaintsBackground) {\n paintRule(\n rootRef.current,\n scroller,\n getRadios().find((radio) => radioValue(radio) === value)?.parentElement,\n ruleTone,\n );\n }\n if (!scroller) {\n return;\n }\n const { scrollWidth, clientWidth, scrollLeft } = scroller;\n const overflows = scrollWidth > clientWidth + EDGE_EPSILON_PX;\n const next = {\n canScrollLeft: overflows && scrollLeft > EDGE_EPSILON_PX,\n canScrollRight: overflows && scrollLeft + clientWidth < scrollWidth - EDGE_EPSILON_PX,\n };\n setEdges((previous) =>\n previous.canScrollLeft === next.canScrollLeft &&\n previous.canScrollRight === next.canScrollRight\n ? previous\n : next,\n );\n }, [callerPaintsBackground, getRadios, ruleTone, value]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: adding, removing or reordering cards moves the selected card, so re-measure on the order\n useLayoutEffect(() => {\n measure();\n\n const scroller = scrollerRef.current;\n if (!scroller) {\n return;\n }\n\n const selectedInView = (): boolean => {\n const card = selectedCard();\n return card !== null && isCardInView(scroller, card);\n };\n let wasInView = selectedInView();\n\n const onScroll = (): void => {\n measure();\n wasInView = selectedInView();\n };\n scroller.addEventListener('scroll', onScroll, { passive: true });\n\n // Bring back a selected card the resize cut off, unless the reader scrolled it away.\n // Next frame rather than in the callback, whose layout reads would force a layout.\n let frame = 0;\n const reveal = (): void => {\n const card = selectedCard();\n const canReveal =\n scrollSelectedIntoView && wasInView && typeof scroller.scrollTo === 'function';\n const target = canReveal && card ? revealTargetFor(scroller, card, snap) : null;\n if (target !== null) {\n scroller.scrollTo({ left: target, behavior: 'instant' });\n }\n wasInView = selectedInView();\n };\n const onResize = (): void => {\n measure();\n if (typeof requestAnimationFrame !== 'function') {\n reveal();\n return;\n }\n cancelAnimationFrame(frame);\n frame = requestAnimationFrame(reveal);\n };\n const observer =\n typeof ResizeObserver !== 'undefined' ? new ResizeObserver(onResize) : null;\n observer?.observe(scroller);\n\n return () => {\n scroller.removeEventListener('scroll', onScroll);\n observer?.disconnect();\n if (typeof cancelAnimationFrame === 'function') {\n cancelAnimationFrame(frame);\n }\n };\n }, [measure, selectedCard, scrollSelectedIntoView, snap, childCount, reorders]);\n\n const scrollByStep = useCallback(\n (direction: -1 | 1) => {\n const scroller = scrollerRef.current;\n if (!scroller || typeof scroller.scrollBy !== 'function') {\n return;\n }\n scroller.scrollBy({\n left: pageTargetFor(scroller, direction, snap) - scroller.scrollLeft,\n behavior: prefersReducedMotion() ? 'auto' : 'smooth',\n });\n },\n [snap],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (!NAV_KEYS.has(event.key)) {\n return;\n }\n\n const target = event.target;\n if (!(target instanceof Element) || !target.closest(RADIO_SELECTOR)) {\n return;\n }\n\n const enabled = getNavigableRadios().filter((radio) => !isRadioDisabled(radio));\n if (enabled.length === 0) {\n return;\n }\n\n event.preventDefault();\n\n const currentPosition = enabled.findIndex((radio) => radioValue(radio) === value);\n let nextPosition: number;\n if (event.key === 'Home') {\n nextPosition = 0;\n } else if (event.key === 'End') {\n nextPosition = enabled.length - 1;\n } else {\n const delta = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1;\n const from = currentPosition === -1 ? 0 : currentPosition;\n nextPosition = (from + delta + enabled.length) % enabled.length;\n }\n\n const next = enabled[nextPosition];\n const nextValue = radioValue(next);\n if (nextValue !== null && nextValue !== value) {\n onChange(nextValue);\n }\n next.focus();\n },\n [getNavigableRadios, onChange, value],\n );\n\n const handleClick = useCallback(\n (event: React.MouseEvent) => {\n const target = event.target;\n if (!(target instanceof Element) || target.closest(`.${ADD_TILE_CLASS}`)) {\n return;\n }\n const root = rootRef.current;\n if (!root) {\n return;\n }\n const radio = radioForClick(target, root);\n if (!radio || isRadioDisabled(radio)) {\n return;\n }\n const clicked = radioValue(radio);\n if (clicked !== null && clicked !== value) {\n onChange(clicked);\n }\n },\n [onChange, value],\n );\n\n const showLeftArrow = arrows && edges.canScrollLeft;\n const showRightArrow = arrows && edges.canScrollRight;\n\n const fadeLeft = fadeEdges && edges.canScrollLeft;\n const fadeRight = fadeEdges && edges.canScrollRight;\n\n return (\n <div\n ref={rootRef}\n onKeyDown={handleKeyDown}\n onFocus={trackAddTileFocus}\n onBlur={trackAddTileFocus}\n onClick={handleClick}\n className={`${ROOT_CLASS} flex items-stretch ${className}`}\n style={{\n ...RULE_ROW_STYLE,\n ...(bleed ? BLEED_STYLE : null),\n ...style,\n }}\n >\n <div\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n className={hasCards ? 'flex items-stretch min-w-0' : 'flex items-stretch'}\n >\n {leading ? (\n <CardStripSlotContext.Provider value={PINNED_SLOT}>\n <div ref={pinnedRef} className=\"shrink-0\" style={PINNED_SLOT_STYLE}>\n {leading}\n </div>\n </CardStripSlotContext.Provider>\n ) : null}\n {hasCards ? (\n <div\n {...{ [TROUGH_ATTR]: '' }}\n className=\"relative min-w-0 shrink basis-auto\"\n style={TROUGH_STYLE}\n >\n <div\n ref={scrollerRef}\n tabIndex={-1}\n {...{ [SCROLLER_ATTR]: '' }}\n data-snap={snap ? 'true' : 'false'}\n className={SCROLLER_CLASS}\n >\n <CardStripSlotContext.Provider value={SCROLLED_SLOT}>\n {cards}\n </CardStripSlotContext.Provider>\n {addInTrack ? (\n <div ref={addHostRef} {...{ [ADD_SLOT_ATTR]: '' }}>\n {addTiles}\n </div>\n ) : null}\n </div>\n {showLeftArrow ? (\n <ArrowButton side=\"left\" onClick={() => scrollByStep(-1)} />\n ) : null}\n {showRightArrow ? (\n <ArrowButton side=\"right\" onClick={() => scrollByStep(1)} />\n ) : null}\n {fadeLeft || fadeRight ? (\n <div\n aria-hidden\n data-card-strip-fade=\"\"\n className={`${FADE_CLASS} absolute pointer-events-none`}\n style={{\n inset: `-${TROUGH_SHOULDER_PX}px -${FADE_OVERHANG_PX}px 0`,\n background: `linear-gradient(to right, ${fadeLeft ? FADE_COLOR : 'transparent'} 0, transparent ${FADE_RAMP_PX}px, transparent calc(100% - ${FADE_RAMP_PX}px), ${fadeRight ? FADE_COLOR : 'transparent'} 100%)`,\n }}\n />\n ) : null}\n </div>\n ) : null}\n </div>\n {addTiles.length > 0 && !addInTrack ? (\n <div\n ref={addHostRef}\n className=\"shrink-0\"\n style={!hasCards && leading ? EMPTY_ADD_SLOT_STYLE : undefined}\n >\n {addTiles}\n </div>\n ) : null}\n </div>\n );\n};\n\nCardStrip.AddTile = AddTile;\n\nexport default CardStrip;\nexport { CardStrip };\n"],"names":["NAV_KEYS","RADIO_SELECTOR","SCROLLER_ATTR","TROUGH_ATTR","ROOT_CLASS","SCROLLER_CLASS","FADE_CLASS","ADD_TILE_CLASS","ADD_SLOT_ATTR","ACTIONS_SELECTOR","LINK_SELECTOR","FOCUSABLE_SELECTOR","PREV_TABINDEX_ATTR","FADE_WIDTH_PX","ARROW_GLYPH_PX","GUTTER_REST_PX","LIP_SHADOW","ARROW_BACKGROUND","ARROW_BORDER","TROUGH_BACKGROUND","CARD_CORNER","CARD_RADIUS","TROUGH_CORNER","TROUGH_RADIUS","TROUGH_SHOULDER_PX","ARROW_OFFSET_PX","FADE_OVERHANG_PX","FADE_RAMP_PX","SLOT_WIDTH_PX","CARD_WIDTH_PX","TROUGH_FLOOR_PX","DIVIDER_COLOR","FADE_COLOR","ADD_HOVER_BACKGROUND","ADD_PILL_BORDER","ADD_PILL_BORDER_ACTIVE","ADD_PILL_SHADOW_DEEP","ADD_PILL_BACKGROUND","ADD_PILL_FOREGROUND","ADD_PILL_PRIMARY_BACKGROUND","ADD_PILL_PRIMARY_FOREGROUND","ADD_PILL_PRIMARY_SHADOW","BOTTOM_RULE_WEIGHT_PX","STRIP_RULE_PX","OVERFLOW_INSET_PX","CLIP_SLACK_PX","FOCUS_RING_REACH_PX","SCROLLER_CSS","CARD_FLARE_PX","STYLE_ID","ADD_SLOT_STYLE_ID","ADD_SLOT_CSS","prefersReducedMotion","radioValue","radio","isRadioDisabled","cardFor","card","actionsFor","_a","radioForClick","target","root","direct","node","radios","cardControls","actions","link","suppressTabStop","element","restoreTabStop","previous","TONE_RULE","RULE_ROW_STYLE","RULE_GAP_OVERLAP_PX","FLARE_TIP_INSET_PX","CARD_FLARE_TIP_PX","flareTips","flare","FLARE_CLASS","left","right","paintRule","scroller","tone","colour","rootRect","rootLeft","clip","cardRect","tips","tipLeft","tipRight","from","to","BLEED_STYLE","CONTENT_INSET","TROUGH_SURFACE","TROUGH_STYLE","ADD_TILE_SHAPE_STYLE","PINNED_SLOT_STYLE","EMPTY_ADD_SLOT_STYLE","ADD_PILL_FILL","AddTile","label","icon","onClick","disabled","emphasis","className","jsx","jsxs","FOCUS_RING","PlusIcon","isAddTile","React","hidesAddTile","child","ArrowButton","side","ArrowLeftIcon","ForwardArrowIcon","CardStrip","value","onChange","children","leading","arrows","fadeEdges","snap","bleed","scrollSelectedIntoView","ariaLabel","ariaLabelledBy","style","rootRef","useRef","pinnedRef","scrollerRef","hasPositioned","edges","setEdges","useState","cramped","setCramped","addHostRef","addTileFocused","useAdoptedStyleSheet","childList","cards","wrappedAddTile","hasCards","addTiles","tile","childCount","addTileCount","useLayoutEffect","pinnedSlot","paddingLeft","paddingRight","inset","content","pinned","decide","needs","observer","entries","entry","_b","addInTrack","trackAddTileFocus","useCallback","event","focused","host","active","getRadios","radioOrder","reorders","setReorders","next","count","getNavigableRadios","warned","warnOnce","key","message","derivedTone","setDerivedTone","selectedCard","navigable","tabStop","holdsTabStop","nextTabIndex","control","values","current","selectionSettled","checked","selected","wasPositioned","revealTargetFor","ruleTone","callerPaintsBackground","measure","scrollWidth","clientWidth","scrollLeft","overflows","EDGE_EPSILON_PX","selectedInView","isCardInView","wasInView","onScroll","frame","reveal","onResize","scrollByStep","direction","pageTargetFor","handleKeyDown","enabled","currentPosition","nextPosition","delta","nextValue","handleClick","clicked","showLeftArrow","showRightArrow","fadeLeft","fadeRight","CardStripSlotContext","PINNED_SLOT","SCROLLED_SLOT"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CardStrip.js","sources":["../../src/components/CardStrip.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport ForwardArrowIcon from './CustomIcons/ForwardArrowIcon';\nimport PlusIcon from './CustomIcons/PlusIcon';\nimport { CONTENT_INSET } from './PageLayout/constants';\nimport {\n CARD_FLARE_PX,\n CARD_FLARE_TIP_PX,\n CARD_WIDTH_PX,\n FLARE_CLASS,\n STRIP_RULE_PX,\n} from './SelectableCard';\nimport { EDGE_EPSILON_PX, isCardInView, pageTargetFor, revealTargetFor } from './cardStripGeometry';\nimport { CardStripSlotContext, PINNED_SLOT, SCROLLED_SLOT } from './cardStripSlot';\nimport { FOCUS_RING } from './focusRing';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport type CardStripAddTileEmphasis = 'primary' | 'secondary';\n\nexport interface CardStripAddTileProps {\n /** Visible label, e.g. \"Add Profile\". Also names the button for assistive tech. */\n label: string;\n /** Defaults to a plus. */\n icon?: React.ReactNode;\n onClick: () => void;\n disabled?: boolean;\n /** Leave unset: CardStrip picks `primary` while the strip is empty and `secondary` once cards exist. */\n emphasis?: CardStripAddTileEmphasis;\n className?: string;\n}\n\n/** Palette for the strip's rule. Pass the tone of whatever card is selected. */\nexport type CardStripTone = 'profile' | 'library' | 'editing';\n\nexport interface CardStripProps {\n /** The selected card's value, matched against each radio child's `data-value`. */\n value: string;\n /** Overrides the palette the strip reads off the selected card. See `CardStripTone`. */\n tone?: CardStripTone;\n onChange: (value: string) => void;\n /** Cards. Any element with `role=\"radio\"` and a `data-value` joins the group; an\n * add tile must be a direct child or it scrolls with the cards. */\n children: React.ReactNode;\n /** Pinned, non-scrolling slot before the cards (the Library card in the profile picker). */\n leading?: React.ReactNode;\n /** Circular scroll affordances, shown only on an edge that can actually scroll. */\n arrows?: boolean;\n /** Fade the cards out at any edge they scroll past. */\n fadeEdges?: boolean;\n /** Snap cards to the leading edge as the strip scrolls. */\n snap?: boolean;\n /** Run the bottom rule the full width of the page card while the cards stay on the gutter.\n * Only has an effect inside a layout that publishes its inset (`PageLayout`). */\n bleed?: boolean;\n /** Whether a selection change scrolls the selected card into view. The strip's opening\n * selection is placed instantly; later ones slide, unless motion is reduced. Set `false`\n * when the value comes from a URL, or a deep-linked strip below the fold jumps the page\n * on load. */\n scrollSelectedIntoView?: boolean;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n className?: string;\n style?: React.CSSProperties;\n}\n\n/** Arrow keys move AND select, per the WAI-ARIA radiogroup pattern. */\nconst NAV_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);\n\nconst RADIO_SELECTOR = '[role=\"radio\"]';\nconst SCROLLER_ATTR = 'data-card-strip-scroller';\nconst TROUGH_ATTR = 'data-card-strip-trough';\nconst ROOT_CLASS = 'malachite-card-strip';\nconst SCROLLER_CLASS = 'malachite-card-strip-scroller';\nconst FADE_CLASS = 'malachite-card-strip-fade';\nconst ADD_TILE_CLASS = 'malachite-card-strip-add-tile';\nconst ADD_SLOT_ATTR = 'data-card-strip-add-slot';\n\nconst ACTIONS_SELECTOR = '[data-selectable-card-actions]';\nconst BESIDE_RADIO_SELECTOR = '[data-selectable-card-link], [data-selectable-card-address]';\nconst FOCUSABLE_SELECTOR =\n 'a[href], area[href], button, input, select, textarea, iframe, [contenteditable=\"true\"], [tabindex]';\nconst PREV_TABINDEX_ATTR = 'data-card-strip-prev-tabindex';\n\nconst FADE_WIDTH_PX = 80;\n\nconst ARROW_GLYPH_PX = 11;\nconst GUTTER_REST_PX = 12;\n\nconst LIP_SHADOW = 'var(--malachite-shadow-default)';\nconst ARROW_BACKGROUND =\n 'var(--malachite-card-strip-arrow-background, var(--malachite-card-background, #ffffff))';\nconst ARROW_BORDER = 'var(--malachite-card-strip-arrow-border, #e8e8e8)';\nconst TROUGH_BACKGROUND = 'var(--malachite-card-strip-background, #f1f1f1)';\nconst CARD_CORNER = 'var(--malachite-radius-xxl, 14px)';\nconst CARD_RADIUS = `${CARD_CORNER} ${CARD_CORNER} 0 0`;\nconst TROUGH_CORNER = 'var(--malachite-radius-xxxl, 16px)';\nconst TROUGH_RADIUS = `${TROUGH_CORNER} ${TROUGH_CORNER} 0 0`;\nconst TROUGH_SHOULDER_PX = 4;\n// Fills the gap between the edge card and its neighbour, covering neither.\nconst ARROW_OFFSET_PX = GUTTER_REST_PX + TROUGH_SHOULDER_PX;\n// Any wider and the fade paints over the neighbouring slot.\nconst FADE_OVERHANG_PX = GUTTER_REST_PX;\nconst FADE_RAMP_PX = FADE_WIDTH_PX + (FADE_OVERHANG_PX - TROUGH_SHOULDER_PX);\nconst SLOT_WIDTH_PX = CARD_WIDTH_PX;\nconst TROUGH_FLOOR_PX = 2 * (GUTTER_REST_PX + TROUGH_SHOULDER_PX) + SLOT_WIDTH_PX;\nconst DIVIDER_COLOR = 'var(--malachite-card-strip-divider, #dddddd)';\nconst FADE_COLOR = 'var(--malachite-card-strip-fade, transparent)';\nconst ADD_HOVER_BACKGROUND = 'var(--malachite-selectable-card-hover-background, #e8e8e8)';\nconst ADD_PILL_BORDER = 'var(--malachite-card-strip-arrow-border, #e8e8e8)';\nconst ADD_PILL_BORDER_ACTIVE = 'var(--malachite-selectable-card-hover-rule, #bbbbbb)';\nconst ADD_PILL_SHADOW_DEEP = '0px 1px 0px 0px rgba(0, 0, 0, 0.4)';\nconst ADD_PILL_BACKGROUND = 'var(--malachite-card-background, #ffffff)';\nconst ADD_PILL_FOREGROUND = 'var(--malachite-text-primary, #0a0a0a)';\nconst ADD_PILL_PRIMARY_BACKGROUND =\n 'var(--malachite-card-strip-add-primary-background, var(--malachite-text-primary, #0a0a0a))';\nconst ADD_PILL_PRIMARY_FOREGROUND =\n 'var(--malachite-card-strip-add-primary-foreground, var(--malachite-card-background, #ffffff))';\nconst ADD_PILL_PRIMARY_SHADOW = '0px 1px 0px 0px rgba(10, 10, 10, 0.7)';\n\nconst BOTTOM_RULE_WEIGHT_PX = STRIP_RULE_PX;\n\nconst OVERFLOW_INSET_PX = 16;\n\nconst CLIP_SLACK_PX = 9999;\nconst FOCUS_RING_REACH_PX = 4;\n\n/** A sheet, not inline styles: these rules have to reach children this component does not render. */\nconst SCROLLER_CSS = `\n.${ROOT_CLASS} {\n clip-path: inset(-${CLIP_SLACK_PX}px -${CLIP_SLACK_PX}px 0);\n}\n.${ROOT_CLASS}:has(:focus-visible) {\n clip-path: inset(-${CLIP_SLACK_PX}px -${CLIP_SLACK_PX}px -${FOCUS_RING_REACH_PX}px);\n}\n.${SCROLLER_CLASS} {\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-behavior: smooth;\n scrollbar-width: none;\n -ms-overflow-style: none;\n padding-block: ${OVERFLOW_INSET_PX}px;\n margin-block: -${OVERFLOW_INSET_PX}px;\n /* overflow-x clips both axes, so the end cards would lose a flare; the negative margin trades\n the padding back out and scroll-padding keeps the rest position at zero. */\n padding-inline: ${CARD_FLARE_PX}px;\n margin-inline: -${CARD_FLARE_PX}px;\n scroll-padding-inline: ${CARD_FLARE_PX}px;\n}\n/* A card focused at a faded edge has to stay readable, so the fade lifts entirely. */\n.${ROOT_CLASS}:has(:focus-visible) .${FADE_CLASS} {\n display: none;\n}\n.${SCROLLER_CLASS}::-webkit-scrollbar {\n display: none;\n}\n/* No bottom edge: the strip's rule is the baseline for the add tile as much as for a card. */\n.${ADD_TILE_CLASS} > * {\n background: ${TROUGH_BACKGROUND};\n border-radius: ${CARD_RADIUS};\n}\n.${ADD_TILE_CLASS}:hover:not(:has(button:disabled)) > * {\n background: ${ADD_HOVER_BACKGROUND};\n}\n.${ADD_TILE_CLASS} button:active:not(:disabled) {\n opacity: 0.8;\n}\n.${ADD_TILE_CLASS}:has(button:active) > * {\n background: ${TROUGH_BACKGROUND};\n}\n.${ADD_TILE_CLASS}[data-emphasis='secondary'] button {\n border-color: ${ADD_PILL_BORDER};\n box-shadow: ${LIP_SHADOW};\n}\n.${ADD_TILE_CLASS}[data-emphasis='secondary']:hover:not(:has(button:disabled)) button {\n border-color: ${ADD_PILL_BORDER_ACTIVE};\n box-shadow: ${ADD_PILL_SHADOW_DEEP};\n}\n.${ADD_TILE_CLASS}[data-emphasis='secondary'] button:active:not(:disabled) {\n border-color: ${ADD_PILL_BORDER_ACTIVE};\n box-shadow: ${ADD_PILL_SHADOW_DEEP};\n}\n.${ADD_TILE_CLASS}[data-emphasis='primary'] button {\n border-color: transparent;\n box-shadow: ${ADD_PILL_PRIMARY_SHADOW};\n}\n.${SCROLLER_CLASS} > * {\n flex: 0 0 auto;\n min-width: 0;\n}\n.${SCROLLER_CLASS} > * + * {\n border-left: 1px solid ${DIVIDER_COLOR};\n}\n.${SCROLLER_CLASS}[data-snap='true'] {\n scroll-snap-type: x proximity;\n}\n.${SCROLLER_CLASS}[data-snap='true'] > * {\n scroll-snap-align: start;\n}\n@media (prefers-reduced-motion: reduce) {\n .${SCROLLER_CLASS} {\n scroll-behavior: auto;\n }\n .${SCROLLER_CLASS}[data-snap='true'] {\n scroll-snap-type: none;\n }\n .${SCROLLER_CLASS}[data-snap='true'] > * {\n scroll-snap-align: none;\n }\n}`;\n\nconst STYLE_ID = 'malachite-card-strip-style';\n// Its own id: an older malachite copy on the page may already own STYLE_ID without these rules.\nconst ADD_SLOT_STYLE_ID = 'malachite-card-strip-add-slot';\n// In the track the trough is already the tile's shoulder, and it is no card to rule off.\nconst ADD_SLOT_CSS = `\n.${SCROLLER_CLASS} > [${ADD_SLOT_ATTR}] {\n display: flex;\n border-left: none;\n}\n[${ADD_SLOT_ATTR}] > .${ADD_TILE_CLASS} {\n height: 100% !important;\n padding: 0 !important;\n}\n`;\n\n/** `window.matchMedia` is absent under SSR and in older test environments. */\nconst prefersReducedMotion = (): boolean => {\n if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n return true;\n }\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n};\n\nconst radioValue = (radio: HTMLElement): string | null =>\n radio.dataset.value ?? radio.getAttribute('value');\n\nconst isRadioDisabled = (radio: HTMLElement): boolean =>\n radio.hasAttribute('disabled') || radio.getAttribute('aria-disabled') === 'true';\n\nconst cardFor = (radio: HTMLElement): HTMLElement | null => {\n const card = radio.parentElement;\n return card && card.querySelectorAll(RADIO_SELECTOR).length === 1 ? card : null;\n};\n\nconst actionsFor = (radio: HTMLElement): HTMLElement | null =>\n cardFor(radio)?.querySelector<HTMLElement>(ACTIONS_SELECTOR) ?? null;\n\n/** A card is wider than its radio, so `closest` misses clicks on the count row. */\nconst radioForClick = (target: Element, root: Element): HTMLElement | null => {\n const direct = target.closest<HTMLElement>(RADIO_SELECTOR);\n if (direct) {\n return direct;\n }\n if (target.closest(ACTIONS_SELECTOR) || target.closest(BESIDE_RADIO_SELECTOR)) {\n return null;\n }\n let node: Element | null = target;\n while (node && root.contains(node)) {\n const radios: NodeListOf<HTMLElement> = node.querySelectorAll(RADIO_SELECTOR);\n if (radios.length === 1 && radios[0].parentElement === node) {\n return radios[0];\n }\n node = node.parentElement;\n }\n return null;\n};\n\n// The card's own controls beside its radio, which only the card holding the tab stop keeps.\nconst cardControls = (radio: HTMLElement): HTMLElement[] => {\n const actions = actionsFor(radio);\n const besideRadio = cardFor(radio)?.querySelectorAll<HTMLElement>(BESIDE_RADIO_SELECTOR);\n return [\n ...(actions ? Array.from(actions.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)) : []),\n ...(besideRadio ? Array.from(besideRadio) : []),\n ];\n};\n\nconst suppressTabStop = (element: HTMLElement): void => {\n if (!element.hasAttribute(PREV_TABINDEX_ATTR)) {\n element.setAttribute(PREV_TABINDEX_ATTR, element.getAttribute('tabindex') ?? '');\n }\n element.setAttribute('tabindex', '-1');\n};\n\nconst restoreTabStop = (element: HTMLElement): void => {\n if (!element.hasAttribute(PREV_TABINDEX_ATTR)) {\n return;\n }\n const previous = element.getAttribute(PREV_TABINDEX_ATTR);\n element.removeAttribute(PREV_TABINDEX_ATTR);\n if (previous) {\n element.setAttribute('tabindex', previous);\n } else {\n element.removeAttribute('tabindex');\n }\n};\n\nconst TONE_RULE: Record<CardStripTone, string> = {\n profile: 'var(--malachite-selectable-card-selected-border, #047b43)',\n library: 'var(--malachite-selectable-card-library-selected-border, #bbbbbb)',\n editing: 'var(--malachite-selectable-card-pending-foreground, #96580a)',\n};\nconst RULE_ROW_STYLE: React.CSSProperties = {\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'left bottom',\n backgroundSize: `100% ${BOTTOM_RULE_WEIGHT_PX}px`,\n};\n\n/** The rule runs under the flare's tip rather than butting against it, so antialiasing\n * cannot open the junction into a gap. */\nconst RULE_GAP_OVERLAP_PX = 0.5;\n\nconst FLARE_TIP_INSET_PX = CARD_FLARE_PX - CARD_FLARE_TIP_PX;\n\nconst flareTips = (card: HTMLElement): { left: number; right: number } | null => {\n const flare = card.querySelector(`:scope > .${FLARE_CLASS}`);\n if (!flare) {\n return null;\n }\n const { left, right } = flare.getBoundingClientRect();\n return { left: left + FLARE_TIP_INSET_PX, right: right - FLARE_TIP_INSET_PX };\n};\n\n/** The rule is cut where the selected card stands, never covered: the strip's clip lands on the\n * rule's own edge, so a cover takes the same partial alpha and the rule bleeds through it. */\nconst paintRule = (\n root: HTMLElement | null,\n scroller: HTMLElement | null,\n card: HTMLElement | null | undefined,\n tone: CardStripTone,\n): void => {\n if (!root) {\n return;\n }\n const colour = TONE_RULE[tone];\n const rootRect = root.getBoundingClientRect();\n const rootLeft = rootRect.left;\n const clip = card && scroller?.contains(card) ? scroller.getBoundingClientRect() : rootRect;\n const cardRect = card?.getBoundingClientRect();\n const tips = card ? flareTips(card) : null;\n const tipLeft = tips?.left ?? (cardRect ? cardRect.left - CARD_FLARE_TIP_PX : 0);\n const tipRight = tips?.right ?? (cardRect ? cardRect.right + CARD_FLARE_TIP_PX : 0);\n const from = cardRect ? Math.max(tipLeft, clip.left) + RULE_GAP_OVERLAP_PX - rootLeft : 0;\n const to = cardRect ? Math.min(tipRight, clip.right) - RULE_GAP_OVERLAP_PX - rootLeft : 0;\n\n root.style.backgroundImage =\n to > from\n ? `linear-gradient(to right, ${colour} 0 ${from}px, transparent ${from}px ${to}px, ${colour} ${to}px 100%)`\n : `linear-gradient(to right, ${colour} 0 100%)`;\n};\n\nconst BLEED_STYLE: React.CSSProperties = {\n marginInline: `calc(${CONTENT_INSET} * -1)`,\n paddingInline: CONTENT_INSET,\n};\n\n/** The rule's row is a margin, never padding: a background paints under its own padding, which\n * would hide the very line the troughs stand on. */\nconst TROUGH_SURFACE: React.CSSProperties = {\n background: TROUGH_BACKGROUND,\n borderRadius: TROUGH_RADIUS,\n paddingTop: `${TROUGH_SHOULDER_PX}px`,\n paddingInline: `${TROUGH_SHOULDER_PX}px`,\n marginBottom: `${BOTTOM_RULE_WEIGHT_PX}px`,\n};\nconst TROUGH_STYLE: React.CSSProperties = {\n ...TROUGH_SURFACE,\n marginInline: `${GUTTER_REST_PX}px`,\n};\nconst ADD_TILE_SHAPE_STYLE: React.CSSProperties = TROUGH_SURFACE;\n\nconst PINNED_SLOT_STYLE: React.CSSProperties = TROUGH_SURFACE;\n\nconst EMPTY_ADD_SLOT_STYLE: React.CSSProperties = {\n marginInlineStart: `${GUTTER_REST_PX}px`,\n};\n\nconst ADD_PILL_FILL: Record<CardStripAddTileEmphasis, React.CSSProperties> = {\n primary: {\n backgroundColor: ADD_PILL_PRIMARY_BACKGROUND,\n color: ADD_PILL_PRIMARY_FOREGROUND,\n },\n secondary: { backgroundColor: ADD_PILL_BACKGROUND, color: ADD_PILL_FOREGROUND },\n};\n\nconst AddTile: React.FC<CardStripAddTileProps> = ({\n label,\n icon,\n onClick,\n disabled = false,\n emphasis = 'secondary',\n className = '',\n}) => (\n <div\n className={ADD_TILE_CLASS}\n data-emphasis={emphasis}\n style={{\n ...ADD_TILE_SHAPE_STYLE,\n width: `${SLOT_WIDTH_PX}px`,\n height: `calc(100% - ${BOTTOM_RULE_WEIGHT_PX}px)`,\n }}\n >\n <div className=\"flex h-full items-center justify-center px-4\">\n <button\n type=\"button\"\n onClick={onClick}\n disabled={disabled}\n style={ADD_PILL_FILL[emphasis]}\n className={`${FOCUS_RING} inline-flex items-center justify-center gap-1.5 h-[var(--malachite-control-height-medium,32px)] w-[108px] px-2.5 rounded-xl border border-solid text-[length:var(--malachite-font-size-small,13px)] font-medium whitespace-nowrap ${\n disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'\n } ${className}`}\n >\n <span className=\"inline-flex h-[13px] w-[13px] shrink-0 items-center justify-center\">\n {icon ?? <PlusIcon size={13} />}\n </span>\n {label}\n </button>\n </div>\n </div>\n);\n\nconst isAddTile = (node: React.ReactNode): node is React.ReactElement<CardStripAddTileProps> =>\n React.isValidElement(node) && node.type === AddTile;\n\nconst hidesAddTile = (child: React.ReactNode): boolean =>\n React.isValidElement<{ children?: React.ReactNode }>(child) &&\n child.type === React.Fragment &&\n React.Children.toArray(child.props.children).some(isAddTile);\n\ninterface ArrowButtonProps {\n side: 'left' | 'right';\n onClick: () => void;\n}\n\nconst ArrowButton: React.FC<ArrowButtonProps> = ({ side, onClick }) => (\n <button\n type=\"button\"\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={side === 'left' ? 'Scroll left' : 'Scroll right'}\n onClick={onClick}\n className=\"absolute top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center w-5 h-5 rounded-lg cursor-pointer text-[var(--malachite-text-secondary)]\"\n style={{\n [side]: `-${ARROW_OFFSET_PX}px`,\n background: ARROW_BACKGROUND,\n border: `1px solid ${ARROW_BORDER}`,\n boxShadow: LIP_SHADOW,\n }}\n >\n {side === 'left' ? (\n <ArrowLeftIcon size={ARROW_GLYPH_PX} />\n ) : (\n <ForwardArrowIcon size={ARROW_GLYPH_PX} />\n )}\n </button>\n);\n\n/** A horizontally scrolling radiogroup of cards — the \"pick one of these\" strip. */\nconst CardStrip: React.FC<CardStripProps> & { AddTile: React.FC<CardStripAddTileProps> } = ({\n value,\n tone,\n onChange,\n children,\n leading,\n arrows = true,\n fadeEdges = true,\n snap = true,\n bleed = false,\n scrollSelectedIntoView = true,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n className = '',\n style,\n}) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const pinnedRef = useRef<HTMLDivElement>(null);\n const scrollerRef = useRef<HTMLDivElement>(null);\n const hasPositioned = useRef(false);\n const [edges, setEdges] = useState({ canScrollLeft: false, canScrollRight: false });\n const [cramped, setCramped] = useState(false);\n const addHostRef = useRef<HTMLDivElement>(null);\n const addTileFocused = useRef(false);\n\n useAdoptedStyleSheet(rootRef, SCROLLER_CSS, STYLE_ID);\n useAdoptedStyleSheet(rootRef, ADD_SLOT_CSS, ADD_SLOT_STYLE_ID);\n\n const childList = React.Children.toArray(children);\n const cards = childList.filter((child) => !isAddTile(child));\n const wrappedAddTile = cards.some(hidesAddTile);\n const hasCards = cards.length > 0;\n\n const addTiles = childList\n .filter(isAddTile)\n .map((tile) =>\n tile.props.emphasis === undefined\n ? React.cloneElement(tile, { emphasis: hasCards ? 'secondary' : 'primary' })\n : tile,\n );\n\n const childCount = childList.length;\n const addTileCount = addTiles.length;\n const hasLeading = Boolean(leading);\n\n // With no room for a card between the pinned tiles, the add tile scrolls with the cards.\n // biome-ignore lint/correctness/useExhaustiveDependencies: a new pinned slot needs observing\n useLayoutEffect(() => {\n const root = rootRef.current;\n if (!root || !hasCards || addTileCount === 0) {\n setCramped(false);\n return;\n }\n const pinnedSlot = pinnedRef.current;\n const { paddingLeft, paddingRight } = getComputedStyle(root);\n const inset = (parseFloat(paddingLeft) || 0) + (parseFloat(paddingRight) || 0);\n let content = root.clientWidth - inset;\n let pinned = pinnedSlot?.offsetWidth ?? 0;\n const decide = (): void => {\n const needs = pinned + addTileCount * SLOT_WIDTH_PX + TROUGH_FLOOR_PX;\n setCramped(content > 0 && content < needs);\n };\n decide();\n // Sizes from the entries: reading layout here would force the layout the observer spares.\n const observer =\n typeof ResizeObserver !== 'undefined'\n ? new ResizeObserver((entries) => {\n for (const entry of entries ?? []) {\n if (entry.target === root) {\n content = entry.contentRect.width;\n } else {\n pinned =\n entry.borderBoxSize?.[0]?.inlineSize ??\n entry.contentRect.width + 2 * TROUGH_SHOULDER_PX;\n }\n }\n decide();\n })\n : null;\n observer?.observe(root);\n if (pinnedSlot) {\n observer?.observe(pinnedSlot);\n }\n return () => observer?.disconnect();\n }, [hasCards, addTileCount, hasLeading]);\n\n const addInTrack = cramped && hasCards;\n const trackAddTileFocus = useCallback((event: React.FocusEvent) => {\n const focused = event.type === 'focus' ? event.target : event.relatedTarget;\n addTileFocused.current = Boolean(\n focused instanceof Node && addHostRef.current?.contains(focused),\n );\n }, []);\n\n // The tile remounts wherever it moves, so focus has to follow it there. Removing a focused\n // element fires no blur, so the flag survives the move.\n // biome-ignore lint/correctness/useExhaustiveDependencies: the tile moving is the signal\n useLayoutEffect(() => {\n const host = addHostRef.current;\n const active = host ? (host.getRootNode() as Document | ShadowRoot).activeElement : null;\n if (addTileFocused.current && host && !(active && host.contains(active))) {\n host.querySelector('button')?.focus({ preventScroll: true });\n }\n }, [addInTrack]);\n\n const getRadios = useCallback((): HTMLElement[] => {\n const root = rootRef.current;\n if (!root) {\n return [];\n }\n return Array.from(root.querySelectorAll<HTMLElement>(RADIO_SELECTOR));\n }, []);\n\n // Read off the DOM rather than the children's keys: unkeyed cards reorder under positional\n // keys that never change. Attribute reads only, so this forces no layout.\n const radioOrder = useRef<string | null>(null);\n const [reorders, setReorders] = useState(0);\n useLayoutEffect(() => {\n const next = JSON.stringify(getRadios().map(radioValue));\n if (radioOrder.current !== null && radioOrder.current !== next) {\n setReorders((count) => count + 1);\n }\n radioOrder.current = next;\n });\n\n const getNavigableRadios = useCallback(\n (): HTMLElement[] => getRadios().filter((radio) => radioValue(radio) !== null),\n [getRadios],\n );\n\n const warned = useRef(new Set<string>());\n const warnOnce = useCallback((key: string, message: string): void => {\n if (warned.current.has(key)) {\n return;\n }\n warned.current.add(key);\n console.warn(message);\n }, []);\n\n const [derivedTone, setDerivedTone] = useState<CardStripTone>('profile');\n\n useLayoutEffect(() => {\n const selectedCard = getRadios()\n .find((radio) => radioValue(radio) === value)\n ?.parentElement?.getAttribute('data-variant');\n if (\n selectedCard === 'profile' ||\n selectedCard === 'library' ||\n selectedCard === 'editing'\n ) {\n setDerivedTone(selectedCard);\n }\n }, [getRadios, value]);\n\n useLayoutEffect(() => {\n const radios = getRadios();\n const navigable = getNavigableRadios();\n const selected = navigable.find((radio) => radioValue(radio) === value);\n const tabStop = selected ?? navigable.find((radio) => !isRadioDisabled(radio)) ?? null;\n\n radios.forEach((radio) => {\n const holdsTabStop = radio === tabStop;\n const nextTabIndex = holdsTabStop ? 0 : -1;\n if (radio.tabIndex !== nextTabIndex) {\n radio.tabIndex = nextTabIndex;\n }\n for (const control of cardControls(radio)) {\n if (holdsTabStop) {\n restoreTabStop(control);\n } else {\n suppressTabStop(control);\n }\n }\n });\n\n if (process.env.NODE_ENV === 'production') {\n return;\n }\n\n if (navigable.length !== radios.length) {\n warnOnce(\n 'missing-value',\n 'CardStrip: a child with role=\"radio\" has no `data-value`. It cannot be selected or reached by arrow keys, so it is excluded from the radio set. Give every card a `data-value`.',\n );\n }\n\n const values = new Set<string>();\n for (const radio of navigable) {\n const current = radioValue(radio);\n if (current === null) {\n continue;\n }\n if (values.has(current)) {\n warnOnce(\n `duplicate:${current}`,\n `CardStrip: two cards share the data-value \"${current}\". Both will read as checked and only the first is selectable — data-value must be unique.`,\n );\n }\n values.add(current);\n }\n\n const selectionSettled = value !== '';\n\n if (radios.length > 0 && selectionSettled && !values.has(value)) {\n warnOnce(\n `unmatched:${value}`,\n `CardStrip: value \"${value}\" matches no card's data-value, so the group reports no selection.`,\n );\n }\n\n const checked = radios.filter(\n (radio) => radio.getAttribute('aria-checked') === 'true',\n ).length;\n if (radios.length > 0 && selectionSettled && checked !== 1) {\n warnOnce(\n `checked:${checked}`,\n `CardStrip: ${checked} cards are aria-checked, but a radiogroup has exactly one. Drive each card's checked state from the strip's \\`value\\`.`,\n );\n }\n\n if (wrappedAddTile) {\n warnOnce(\n 'wrapped-add-tile',\n 'CardStrip: a CardStrip.AddTile inside a fragment is treated as a card and scrolls with them. The add tile must be a direct child of CardStrip.',\n );\n }\n });\n\n const selectedCard = useCallback((): HTMLElement | null => {\n const selected = getRadios().find((radio) => radioValue(radio) === value);\n return selected ? ((selected.closest('[role=\"radio\"]') ?? selected) as HTMLElement) : null;\n }, [getRadios, value]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: cards arriving is the signal\n useLayoutEffect(() => {\n if (!scrollSelectedIntoView) {\n return;\n }\n const scroller = scrollerRef.current;\n const card = selectedCard();\n // jsdom implements neither, and a strip that cannot scroll has nothing to bring into view.\n if (!scroller || !card || typeof scroller.scrollTo !== 'function') {\n return;\n }\n\n // The first placement is where the strip opens — a deep link, not a move — so it is\n // instant. Every later one is the selection travelling, and travel is legible only if\n // you can see it happen.\n const wasPositioned = hasPositioned.current;\n hasPositioned.current = true;\n\n const target = revealTargetFor(scroller, card, snap);\n if (target !== null) {\n scroller.scrollTo({\n left: target,\n behavior: wasPositioned && !prefersReducedMotion() ? 'smooth' : 'instant',\n });\n }\n }, [selectedCard, scrollSelectedIntoView, snap, childCount, reorders]);\n\n const ruleTone = tone ?? derivedTone;\n const callerPaintsBackground =\n style?.background !== undefined || style?.backgroundImage !== undefined;\n\n const measure = useCallback(() => {\n const scroller = scrollerRef.current;\n if (!callerPaintsBackground) {\n paintRule(\n rootRef.current,\n scroller,\n getRadios().find((radio) => radioValue(radio) === value)?.parentElement,\n ruleTone,\n );\n }\n if (!scroller) {\n return;\n }\n const { scrollWidth, clientWidth, scrollLeft } = scroller;\n const overflows = scrollWidth > clientWidth + EDGE_EPSILON_PX;\n const next = {\n canScrollLeft: overflows && scrollLeft > EDGE_EPSILON_PX,\n canScrollRight: overflows && scrollLeft + clientWidth < scrollWidth - EDGE_EPSILON_PX,\n };\n setEdges((previous) =>\n previous.canScrollLeft === next.canScrollLeft &&\n previous.canScrollRight === next.canScrollRight\n ? previous\n : next,\n );\n }, [callerPaintsBackground, getRadios, ruleTone, value]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: adding, removing or reordering cards moves the selected card, so re-measure on the order\n useLayoutEffect(() => {\n measure();\n\n const scroller = scrollerRef.current;\n if (!scroller) {\n return;\n }\n\n const selectedInView = (): boolean => {\n const card = selectedCard();\n return card !== null && isCardInView(scroller, card);\n };\n let wasInView = selectedInView();\n\n const onScroll = (): void => {\n measure();\n wasInView = selectedInView();\n };\n scroller.addEventListener('scroll', onScroll, { passive: true });\n\n // Bring back a selected card the resize cut off, unless the reader scrolled it away.\n // Next frame rather than in the callback, whose layout reads would force a layout.\n let frame = 0;\n const reveal = (): void => {\n const card = selectedCard();\n const canReveal =\n scrollSelectedIntoView && wasInView && typeof scroller.scrollTo === 'function';\n const target = canReveal && card ? revealTargetFor(scroller, card, snap) : null;\n if (target !== null) {\n scroller.scrollTo({ left: target, behavior: 'instant' });\n }\n wasInView = selectedInView();\n };\n const onResize = (): void => {\n measure();\n if (typeof requestAnimationFrame !== 'function') {\n reveal();\n return;\n }\n cancelAnimationFrame(frame);\n frame = requestAnimationFrame(reveal);\n };\n const observer =\n typeof ResizeObserver !== 'undefined' ? new ResizeObserver(onResize) : null;\n observer?.observe(scroller);\n\n return () => {\n scroller.removeEventListener('scroll', onScroll);\n observer?.disconnect();\n if (typeof cancelAnimationFrame === 'function') {\n cancelAnimationFrame(frame);\n }\n };\n }, [measure, selectedCard, scrollSelectedIntoView, snap, childCount, reorders]);\n\n const scrollByStep = useCallback(\n (direction: -1 | 1) => {\n const scroller = scrollerRef.current;\n if (!scroller || typeof scroller.scrollBy !== 'function') {\n return;\n }\n scroller.scrollBy({\n left: pageTargetFor(scroller, direction, snap) - scroller.scrollLeft,\n behavior: prefersReducedMotion() ? 'auto' : 'smooth',\n });\n },\n [snap],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (!NAV_KEYS.has(event.key)) {\n return;\n }\n\n const target = event.target;\n if (!(target instanceof Element) || !target.closest(RADIO_SELECTOR)) {\n return;\n }\n\n const enabled = getNavigableRadios().filter((radio) => !isRadioDisabled(radio));\n if (enabled.length === 0) {\n return;\n }\n\n event.preventDefault();\n\n const currentPosition = enabled.findIndex((radio) => radioValue(radio) === value);\n let nextPosition: number;\n if (event.key === 'Home') {\n nextPosition = 0;\n } else if (event.key === 'End') {\n nextPosition = enabled.length - 1;\n } else {\n const delta = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1;\n const from = currentPosition === -1 ? 0 : currentPosition;\n nextPosition = (from + delta + enabled.length) % enabled.length;\n }\n\n const next = enabled[nextPosition];\n const nextValue = radioValue(next);\n if (nextValue !== null && nextValue !== value) {\n onChange(nextValue);\n }\n next.focus();\n },\n [getNavigableRadios, onChange, value],\n );\n\n const handleClick = useCallback(\n (event: React.MouseEvent) => {\n const target = event.target;\n if (!(target instanceof Element) || target.closest(`.${ADD_TILE_CLASS}`)) {\n return;\n }\n const root = rootRef.current;\n if (!root) {\n return;\n }\n const radio = radioForClick(target, root);\n if (!radio || isRadioDisabled(radio)) {\n return;\n }\n const clicked = radioValue(radio);\n if (clicked !== null && clicked !== value) {\n onChange(clicked);\n }\n },\n [onChange, value],\n );\n\n const showLeftArrow = arrows && edges.canScrollLeft;\n const showRightArrow = arrows && edges.canScrollRight;\n\n const fadeLeft = fadeEdges && edges.canScrollLeft;\n const fadeRight = fadeEdges && edges.canScrollRight;\n\n return (\n <div\n ref={rootRef}\n onKeyDown={handleKeyDown}\n onFocus={trackAddTileFocus}\n onBlur={trackAddTileFocus}\n onClick={handleClick}\n className={`${ROOT_CLASS} flex items-stretch ${className}`}\n style={{\n ...RULE_ROW_STYLE,\n ...(bleed ? BLEED_STYLE : null),\n ...style,\n }}\n >\n <div\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n className={hasCards ? 'flex items-stretch min-w-0' : 'flex items-stretch'}\n >\n {leading ? (\n <CardStripSlotContext.Provider value={PINNED_SLOT}>\n <div ref={pinnedRef} className=\"shrink-0\" style={PINNED_SLOT_STYLE}>\n {leading}\n </div>\n </CardStripSlotContext.Provider>\n ) : null}\n {hasCards ? (\n <div\n {...{ [TROUGH_ATTR]: '' }}\n className=\"relative min-w-0 shrink basis-auto\"\n style={TROUGH_STYLE}\n >\n <div\n ref={scrollerRef}\n tabIndex={-1}\n {...{ [SCROLLER_ATTR]: '' }}\n data-snap={snap ? 'true' : 'false'}\n className={SCROLLER_CLASS}\n >\n <CardStripSlotContext.Provider value={SCROLLED_SLOT}>\n {cards}\n </CardStripSlotContext.Provider>\n {addInTrack ? (\n <div ref={addHostRef} {...{ [ADD_SLOT_ATTR]: '' }}>\n {addTiles}\n </div>\n ) : null}\n </div>\n {showLeftArrow ? (\n <ArrowButton side=\"left\" onClick={() => scrollByStep(-1)} />\n ) : null}\n {showRightArrow ? (\n <ArrowButton side=\"right\" onClick={() => scrollByStep(1)} />\n ) : null}\n {fadeLeft || fadeRight ? (\n <div\n aria-hidden\n data-card-strip-fade=\"\"\n className={`${FADE_CLASS} absolute pointer-events-none`}\n style={{\n inset: `-${TROUGH_SHOULDER_PX}px -${FADE_OVERHANG_PX}px 0`,\n background: `linear-gradient(to right, ${fadeLeft ? FADE_COLOR : 'transparent'} 0, transparent ${FADE_RAMP_PX}px, transparent calc(100% - ${FADE_RAMP_PX}px), ${fadeRight ? FADE_COLOR : 'transparent'} 100%)`,\n }}\n />\n ) : null}\n </div>\n ) : null}\n </div>\n {addTiles.length > 0 && !addInTrack ? (\n <div\n ref={addHostRef}\n className=\"shrink-0\"\n style={!hasCards && leading ? EMPTY_ADD_SLOT_STYLE : undefined}\n >\n {addTiles}\n </div>\n ) : null}\n </div>\n );\n};\n\nCardStrip.AddTile = AddTile;\n\nexport default CardStrip;\nexport { CardStrip };\n"],"names":["NAV_KEYS","RADIO_SELECTOR","SCROLLER_ATTR","TROUGH_ATTR","ROOT_CLASS","SCROLLER_CLASS","FADE_CLASS","ADD_TILE_CLASS","ADD_SLOT_ATTR","ACTIONS_SELECTOR","BESIDE_RADIO_SELECTOR","FOCUSABLE_SELECTOR","PREV_TABINDEX_ATTR","FADE_WIDTH_PX","ARROW_GLYPH_PX","GUTTER_REST_PX","LIP_SHADOW","ARROW_BACKGROUND","ARROW_BORDER","TROUGH_BACKGROUND","CARD_CORNER","CARD_RADIUS","TROUGH_CORNER","TROUGH_RADIUS","TROUGH_SHOULDER_PX","ARROW_OFFSET_PX","FADE_OVERHANG_PX","FADE_RAMP_PX","SLOT_WIDTH_PX","CARD_WIDTH_PX","TROUGH_FLOOR_PX","DIVIDER_COLOR","FADE_COLOR","ADD_HOVER_BACKGROUND","ADD_PILL_BORDER","ADD_PILL_BORDER_ACTIVE","ADD_PILL_SHADOW_DEEP","ADD_PILL_BACKGROUND","ADD_PILL_FOREGROUND","ADD_PILL_PRIMARY_BACKGROUND","ADD_PILL_PRIMARY_FOREGROUND","ADD_PILL_PRIMARY_SHADOW","BOTTOM_RULE_WEIGHT_PX","STRIP_RULE_PX","OVERFLOW_INSET_PX","CLIP_SLACK_PX","FOCUS_RING_REACH_PX","SCROLLER_CSS","CARD_FLARE_PX","STYLE_ID","ADD_SLOT_STYLE_ID","ADD_SLOT_CSS","prefersReducedMotion","radioValue","radio","isRadioDisabled","cardFor","card","actionsFor","_a","radioForClick","target","root","direct","node","radios","cardControls","actions","besideRadio","suppressTabStop","element","restoreTabStop","previous","TONE_RULE","RULE_ROW_STYLE","RULE_GAP_OVERLAP_PX","FLARE_TIP_INSET_PX","CARD_FLARE_TIP_PX","flareTips","flare","FLARE_CLASS","left","right","paintRule","scroller","tone","colour","rootRect","rootLeft","clip","cardRect","tips","tipLeft","tipRight","from","to","BLEED_STYLE","CONTENT_INSET","TROUGH_SURFACE","TROUGH_STYLE","ADD_TILE_SHAPE_STYLE","PINNED_SLOT_STYLE","EMPTY_ADD_SLOT_STYLE","ADD_PILL_FILL","AddTile","label","icon","onClick","disabled","emphasis","className","jsx","jsxs","FOCUS_RING","PlusIcon","isAddTile","React","hidesAddTile","child","ArrowButton","side","ArrowLeftIcon","ForwardArrowIcon","CardStrip","value","onChange","children","leading","arrows","fadeEdges","snap","bleed","scrollSelectedIntoView","ariaLabel","ariaLabelledBy","style","rootRef","useRef","pinnedRef","scrollerRef","hasPositioned","edges","setEdges","useState","cramped","setCramped","addHostRef","addTileFocused","useAdoptedStyleSheet","childList","cards","wrappedAddTile","hasCards","addTiles","tile","childCount","addTileCount","useLayoutEffect","pinnedSlot","paddingLeft","paddingRight","inset","content","pinned","decide","needs","observer","entries","entry","_b","addInTrack","trackAddTileFocus","useCallback","event","focused","host","active","getRadios","radioOrder","reorders","setReorders","next","count","getNavigableRadios","warned","warnOnce","key","message","derivedTone","setDerivedTone","selectedCard","navigable","tabStop","holdsTabStop","nextTabIndex","control","values","current","selectionSettled","checked","selected","wasPositioned","revealTargetFor","ruleTone","callerPaintsBackground","measure","scrollWidth","clientWidth","scrollLeft","overflows","EDGE_EPSILON_PX","selectedInView","isCardInView","wasInView","onScroll","frame","reveal","onResize","scrollByStep","direction","pageTargetFor","handleKeyDown","enabled","currentPosition","nextPosition","delta","nextValue","handleClick","clicked","showLeftArrow","showRightArrow","fadeLeft","fadeRight","CardStripSlotContext","PINNED_SLOT","SCROLLED_SLOT"],"mappings":"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"}
|