@blakesteve/roster 5.13.0 → 5.15.0

package/README.md

@@ -268,9 +268,9 @@ changes nothing.
 | token | default | reshapes |
 | ----- | ------- | -------- |
 | `--roster-radius-sm` | `0.25rem` | `Button` `xs`, `Checkbox` `sm` and `md`, `InlineCode`, `Link`, `MultiSelect`'s chip dismiss, the dismiss and reveal buttons in `Alert`, `Toast` and `PasswordInput` |
-| `--roster-radius-md` | `0.375rem` | `Button`, `Input`, `Textarea`, `Select`, `MultiSelect`, `Badge`, `Avatar` and its popover, `Checkbox` `lg`, `CheckboxGroup`'s panel, `Disclosure`, `Dialog`'s and `Sheet`'s close buttons, `Navbar`'s links and menu, popup panels, `Table` |
-| `--roster-radius-lg` | `0.5rem` | `Alert`, `Toast`, `Tooltip`, `CallToAction`, `EmptyState`, `ErrorState`, `LiquidTabs`, `MatchupCard`, `Navbar`'s mobile panel, `Skeleton` blocks (unless `--roster-skeleton-radius` is set) |
-| `--roster-radius-xl` | `0.75rem` | `Card`, `LiquidTabs`' `pill` strip |
+| `--roster-radius-md` | `0.375rem` | `Button`, `Input`, `Textarea`, `Select`, `MultiSelect`, `Badge`, `Avatar` and its popover, `Checkbox` `lg`, `CheckboxGroup`'s panel, `Disclosure`, `Dialog`'s and `Sheet`'s close buttons, `Navbar`'s links and menu, popup panels, `Table`, a plain `Tabs`' focus ring |
+| `--roster-radius-lg` | `0.5rem` | `Alert`, `Toast`, `Tooltip`, `CallToAction`, `EmptyState`, `ErrorState`, `Tabs`' liquid variant, `MatchupCard`, `Navbar`'s mobile panel, `Skeleton` blocks (unless `--roster-skeleton-radius` is set) |
+| `--roster-radius-xl` | `0.75rem` | `Card`, the liquid `Tabs`' `pill` strip |
 | `--roster-radius-2xl` | `1rem` | `Dialog`, the top of `Sheet` |
 | `--roster-radius-3xl` | `1.5rem` | nothing yet; wired for the first component that uses it |
 | `--roster-border-width` | `1px` | every 1px edge: borders, `divide-y`, the ring `Select`'s trigger and the anchored panels draw their edge with, and the rules in `Accordion` and `LabeledDivider` |
@@ -477,11 +477,12 @@ Replace the rule with the token:
 :root { --roster-primary-600-ink: #10142e; }
 ```
 
-`LiquidTabs` followed later: its active label reads `--roster-lt-text-active`,
-which defaults to `--roster-primary-500-ink`, the ink of the pill's default
-fill. A rule naming `rst:text-white` on a tab stops matching; a rule on
-`[role="tab"][aria-selected="true"]` still does. If you repaint the pill with
-`--roster-lt-pill`, set `--roster-lt-text-active` to match it.
+`LiquidTabs` followed later (now `Tabs`' liquid variant): its active label
+reads `--roster-lt-text-active`, which defaults to `--roster-primary-500-ink`,
+the ink of the pill's default fill. A rule naming `rst:text-white` on a tab
+stops matching; a rule on `[role="tab"][aria-selected="true"]` still does. If
+you repaint the pill with `--roster-lt-pill`, set `--roster-lt-text-active` to
+match it.
 
 **If you pass a foreground through `className`, add the hover modifier.** Solid
 variants now carry `hover:text-*`, and `tailwind-merge` resolves conflicts per
@@ -565,7 +566,7 @@ a click. A small tracker marks those elements: keyboard mode starts on a navigat
 arrows, Escape, Enter, Space, Home, End, PageUp, PageDown) and ends on pointer
 input, and it marks only what Chromium's own `:focus-visible` already matches,
 so Chromium's rings are unchanged. It runs while a component that moves focus
-is mounted (Menu, the select family, Dialog, Sheet, RadioGroup, LiquidTabs,
+is mounted (Menu, the select family, Dialog, Sheet, RadioGroup, Tabs,
 Slider and the rest), on one set of document listeners.
 
 Your own components' rings come from your Tailwind, not Roster's, so they
@@ -1382,7 +1383,7 @@ What it promises:
   sideways at 320px. Nothing animates as an item leaves.
 
 Counts for a tab need no API: the app holds the items, so it's
-`items.length`, passed as a `LiquidTabs` tab's `count`. `MediaPreview` is the
+`items.length`, passed as a `Tabs` tab's `count`. `MediaPreview` is the
 thumbnail to use in an item: when the image can't render (an expired link, a
 format the browser can't draw), it falls back to a link to the original in the
 same footprint.
@@ -1861,8 +1862,8 @@ Things to know:
 
 ### Carousel
 
-A sideways row: a row of cards, a selection strip, or a gallery of one per
-view. It is a real scroll container with CSS scroll snap, so touch, trackpad,
+A sideways row: a row of cards, a selection strip (`selectable`, below), or a
+gallery of one per view. It is a real scroll container with CSS scroll snap, so touch, trackpad,
 Shift with the wheel and keyboard focus all scroll it without script, and every
 item is in the server render. No clones, no virtualization, no loop, and
 nothing moves on its own.
@@ -1895,22 +1896,142 @@ Script adds what a mouse is missing:
 
 A vertical wheel over the row scrolls the page, and sideways overscroll is
 contained. Under reduced motion every scroll the component makes is instant.
-`ref` gives `scrollToIndex(i)`, `scrollPrev()` and `scrollNext()`;
+`ref` gives `scrollToIndex(i)`, `scrollPrev()`, `scrollNext()` and `focus()`;
 `onIndexChange` reports the first item wholly in view. For a gallery,
 `showPosition` shows "2 of 5", which is also each item's name and is announced
 politely when it changes.
 
-### LiquidTabs
+#### Selection mode
 
-A tab strip with a sliding pill, on the WAI tabs pattern: one tab stop, arrows
-that wrap, Home and End, and `activation="manual"` for tabs that are costly to
-switch. `LiquidNav` is the same strip as a `nav` of links.
+For a strip of choices, one of which is picked, pass `selectable`. The row
+becomes a horizontal listbox: one tab stop, the keys moving focus between
+options, and one option selected. A row of buttons with `aria-pressed` is a tab
+stop per button (300 options, 300 Tab presses), and a screen reader hears a
+list of unrelated buttons. Without `selectable` nothing changes.
 
-**Counts.** A tab or a nav link takes `count`, shown in a small mark after its
-label:
+```tsx
+<Carousel
+  aria-label="Choose a record"
+  aria-describedby="how"
+  selectable
+  selectedKey={chosen}
+  onSelectionChange={setChosen}
+  onActivate={play}
+  clearable
+  itemWidth={150}
+>
+  {records.map((r) => <RecordCell key={r.id} record={r} selected={r.id === chosen} />)}
+</Carousel>
+```
+
+- **Tab** lands on the selected option, or the first when nothing is. Leaving
+  the row hands the tab stop back to the selected option.
+- **Left and Right** move by one, without wrapping; **Home and End** go to the
+  ends; **Page Up and Page Down** move by as many options as are wholly in
+  view.
+- **Type-ahead:** typing jumps to the next option whose name starts with what
+  was typed. A pause of 700ms starts over, and the same letter again steps on
+  to the next option starting with it.
+- **Enter or Space selects. Selection doesn't follow focus:** arrowing only
+  moves focus, so whatever a selection sets off (a pan, a fetch, an
+  announcement) happens once, on purpose.
+- **Enter, a click or a tap on the selected option** calls `onActivate`, the
+  step after choosing: open it, read it, play it. A click or tap on any other
+  option selects it.
+- **Escape** clears the selection when `clearable` is set, and calls
+  `onSelectionChange(null)`.
+
+Moving focus with the keys scrolls the option into view, smoothly, or at once
+under reduced motion; a click doesn't move the row. A selection doesn't scroll
+the row at all, so a `scrollToIndex` of your own (centering the choice, say)
+isn't undone. The keyboard-mode tracker is mounted, so the ring shows in Safari
+after a click too (see [Focus](#focus)).
+
+**Identity is the child's `key`.** `selectedKey`, `defaultSelectedKey` and both
+callbacks deal in it, as React stores it: a string. Keys, not positions,
+because a consumer that filters the row changes every position after the first
+option it hides. A development build warns about a child without a key.
+Controlled (`selectedKey` with `onSelectionChange`) or uncontrolled
+(`defaultSelectedKey`); where focus is stays internal, and `focus()` on the
+`ref` moves focus onto the tab stop, from a find field's Down Arrow, say.
+
+**Names.** An option is named by its content, or by `getOptionLabel(key,
+index)`, which is also the text type-ahead matches. Name the listbox with
+`aria-label` or `aria-labelledby`, and put a sentence saying how it works in
+`aria-describedby`.
+
+**Nothing interactive inside an option.** An option is one choice, reached with
+the arrow keys; a link or a button inside it is a tab stop the keys skip, and
+a screen reader can't reach it as anything but text. Put actions outside the
+row, or behind `onActivate`. A development build warns when an option holds
+something that takes focus.
+
+**Filtering.** Render fewer children and `aria-setsize` and `aria-posinset`
+describe what's shown. The tab stop stays on its option if that's still shown;
+otherwise it moves to the nearest option still shown, in the order before the
+change, after it if there is one, else before it. A selection made elsewhere
+moves the tab stop to the selected option while focus is outside the row, and
+leaves it where the keys put it while focus is inside.
+
+**The selected look is yours.** Roster draws the focus ring, an outline 2px out,
+so a selected look drawn with a ring or a border sits inside it. Draw the
+selection in the child, from `selectedKey`, or on the option with
+`itemClassName` and the `aria-selected:` variant.
+
+**Scale.** Every option is in the DOM, for the keys and for screen readers;
+draw expensive content lazily inside it. Options are memoized and the keys,
+clicks and focus are one listener each on the row. Measured at 1,000 options
+in Chromium: mounting takes about 30ms longer than the default mode, a key
+moves focus within a millisecond, and the frame after it lands in about 7ms.
+
+### Tabs
+
+A controlled tab strip, on the WAI tabs pattern in every variant: one tab
+stop, arrows that wrap, Home and End, and `activation="manual"` for tabs that
+are costly to switch. Every tab is `type="button"`, so a strip inside a form
+never submits it.
+
+```tsx
+import { Tabs } from "@blakesteve/roster";
+
+<Tabs aria-label="Project" tabs={[{ id: "overview", label: "Overview" }, …]} activeTab={tab} onChange={setTab} />
+```
+
+**Plain, by default.** The selected tab is underlined, 2px, on a 1px rule
+that runs the strip's width. The other tabs are muted and darken under the
+pointer, with a lighter underline as a hint. The weight never changes, so
+selecting a tab never moves the row. Keyboard focus is Roster's ring. The
+underline is a border, so it stays in forced colors, and only the selected
+tab draws one there. Its colors are tokens, each set in light and dark:
+
+| token | light | dark | paints |
+| ----- | ----- | ---- | ------ |
+| `--roster-tabs-indicator` | `primary-500` | `primary-400` | the selected tab's underline |
+| `--roster-tabs-indicator-hover` | `gray-300` | `gray-600` | the underline under the pointer |
+| `--roster-tabs-border` | `gray-200` | `gray-800` | the rule along the strip |
+| `--roster-tabs-text` | `gray-500` | `gray-400` | a tab at rest |
+| `--roster-tabs-text-hover` | `gray-900` | `gray-100` | a tab under the pointer |
+| `--roster-tabs-text-active` | `gray-900` | `gray-100` | the selected tab |
+
+On Roster's own surfaces the underline clears 3:1 against the page (6.37:1 in
+light, 7.31:1 in dark), a label at rest 4.5:1 (5.99:1 and 7.83:1), and a
+count's number 4.5:1 against its mark (5.07:1 at the least). `fullWidth` gives
+every tab an equal share of the row, and `size="lg"` makes each at least 44px
+tall.
+
+**Liquid.** `variant="liquid"` draws the sliding pill instead:
+`liquidStyle="pill"` (the default), a floating pill in a padded strip, or
+`"filled"`, where the selected tab fills its cell. The pill follows
+`activeTab`, never the click, and moves in two phases, a stretch and a
+settle, or not at all under reduced motion. Its colors are the
+`--roster-lt-*` tokens. `liquidStyle` is a type error without
+`variant="liquid"`.
+
+**Counts.** A tab takes `count`, in every variant, and so does a `LiquidNav` link, shown
+in a small mark after its label:
 
 ```tsx
-<LiquidTabs tabs={[{ id: "queue", label: "Queue", count: queue.length }, …]} … />
+<Tabs tabs={[{ id: "queue", label: "Queue", count: queue.length }, …]} … />
 ```
 
 The count is part of the name, "Queue, 12 items" rather than "Queue12" or
@@ -1931,29 +2052,29 @@ labels={{ count: (n) => (n === 1 ? "1 game" : `${n.toLocaleString()} games`) }}
   shorten the mark, pass `labels.countMark` (`(n) => "12K"`); the name stays
   whole, since a screen reader has no width to save.
 - **The mark is drawn from the tab's own text color:** its number in that
-  color on a 12% tint of it. So it follows the tab through every state, both
-  variants and both themes, and through any palette set on the
-  `--roster-lt-*` tokens, and its number clears 4.5:1 in every state on
-  Roster's own (4.88:1 at the least). `Badge` and `Pill` each draw from a fixed
+  color on a 12% tint of it. So it follows the tab through every state, every
+  variant and both themes, and through any palette set on the tabs' tokens,
+  and its number clears 4.5:1 in every state on Roster's own (4.88:1 at the
+  least, on the liquid pill). `Badge` and `Pill` each draw from a fixed
   palette, which on the selected tab would be a second chip sitting on the
   pill.
-- **The pill follows,** re-measuring when a count widens its tab or one
-  before it.
+- **The liquid pill follows,** re-measuring when a count widens its tab or
+  one before it.
 
-**The panel.** `LiquidTabPanel` is the `role="tabpanel"` a tab controls, paired
-with it by construction: its `id` is the tab's `panelId`, and its
-`aria-labelledby` points at the tab through `liquidTabId`, so the panel takes
-the tab's name, count included. Give the `LiquidTabs` an `id` to pair it with.
-One panel that swaps its content, or a panel per tab:
+**The panel.** `TabPanel` is the `role="tabpanel"` a tab controls, in every
+variant, paired with it by construction: its `id` is the tab's `panelId`, and
+its `aria-labelledby` points at the tab through `tabId`, so the panel takes the
+tab's name, count included. Give the `Tabs` an `id` to pair it with. One panel
+that swaps its content, or a panel per tab:
 
 ```tsx
 // One panel: every tab carries the same panelId, and `tab` is the selected one.
-<LiquidTabs id="lists" tabs={tabs.map((t) => ({ ...t, panelId: "lists-panel" }))} activeTab={list} onChange={setList} />
-<LiquidTabPanel tabsId="lists" id="lists-panel" tab={list}>…</LiquidTabPanel>
+<Tabs id="lists" tabs={tabs.map((t) => ({ ...t, panelId: "lists-panel" }))} activeTab={list} onChange={setList} />
+<TabPanel tabsId="lists" id="lists-panel" tab={list}>…</TabPanel>
 
 // A panel per tab: each its own panelId, and every panel gets activeTab.
-<LiquidTabPanel tabsId="views" id="views-board" tab="board" activeTab={view}>…</LiquidTabPanel>
-<LiquidTabPanel tabsId="views" id="views-list" tab="list" activeTab={view} keepMounted>…</LiquidTabPanel>
+<TabPanel tabsId="views" id="views-board" tab="board" activeTab={view}>…</TabPanel>
+<TabPanel tabsId="views" id="views-list" tab="list" activeTab={view} keepMounted>…</TabPanel>
 ```
 
 Per tab, a panel that isn't selected stays in the page, hidden, so every tab's
@@ -1965,6 +2086,22 @@ can reach what they just selected; it leaves the tab order once its content
 holds a link, a button or a field, rechecked as the content changes. Pass
 `tabIndex` to decide it yourself.
 
+**From `LiquidTabs`.** `LiquidTabs` is deprecated, and keeps working,
+unchanged: it renders `Tabs` with the liquid variant, the same markup, styles
+and test ids it always has. To move, rename it and add the variant; a
+`variant="filled"` moves to `liquidStyle`:
+
+```tsx
+<LiquidTabs … />                    →  <Tabs variant="liquid" … />
+<LiquidTabs variant="filled" … />   →  <Tabs variant="liquid" liquidStyle="filled" … />
+<LiquidTabPanel … />                →  <TabPanel … />
+liquidTabId(id, tab)                →  tabId(id, tab)
+```
+
+Nothing else changes: the props, ids, keys, pill and `data-testid` hooks are
+the same. `LiquidTabsLabels` is now `TabsLabels`, and the old name still works.
+`LiquidNav`, the liquid strip as a `nav` of links, is unchanged.
+
 ### Components that render links
 
 `Breadcrumbs` renders a plain `<a>` by default, which is right for a static
@@ -2015,8 +2152,8 @@ Dialog or Sheet), alongside `Pagination`, the loading system and DataTable's
 instead, and 5.8.0 adds the ones that were missing: MultiSelect's
 `countLabel`, DataTable's `emptyMessage` and MediaPreview's `newTabLabel`, next
 to the existing `dismissLabel`, `placeholder`, `removeLabel`, `prevLabel` and
-the like. `LiquidTabs` and `LiquidNav` take `labels` for the words a count
-says. Words that take a number or a name are functions, so a language
+the like. `Tabs`, `LiquidTabs` and `LiquidNav` take `labels` for the words a
+count says. Words that take a number or a name are functions, so a language
 whose word changes with the count can say so. An entry passed as `undefined`
 (a catalog missing a key) keeps its English rather than leaving a control
 unnamed.
@@ -2123,13 +2260,13 @@ function App() {
 | `Breadcrumbs`     | Navigation trail; pass `linkComponent` to keep navigation client-side       |
 | `CheckboxGroup`   | Checkbox set reporting one `string[]`; groups, columns, scroll, error       |
 | `CallToAction`    | Prominent hero-style CTA block                                              |
-| `Carousel`        | Sideways row of items on native scroll snap; mouse drag, paging arrows, no autoplay |
+| `Carousel`        | Sideways row of items on native scroll snap; mouse drag, paging arrows, no autoplay; a selection mode for a strip of choices (see [Selection mode](#selection-mode)) |
 | `DescriptionList` | Label and value pairs as a real `<dl>`: inline, stacked, or split           |
 | `EmptyState`      | Zero-data placeholder with icon and action slot; `headingLevel` sets its title's `h1` to `h6` |
 | `ErrorState`      | Error display with retry action                                             |
-| `LiquidNav`       | `LiquidTabs`' strip as a `nav` of links; takes a router's link component    |
-| `LiquidTabs`      | Tab strip with a sliding pill; arrow keys, roving focus, counts, 44px `lg` size (see [LiquidTabs](#liquidtabs)) |
-| `LiquidTabPanel`  | The panel a `LiquidTabs` tab controls, named for its tab by construction; one swapping panel or one per tab |
+| `LiquidNav`       | The liquid tab strip as a `nav` of links; takes a router's link component   |
+| `LiquidTabs`      | Deprecated: `Tabs` with `variant="liquid"`, which it renders (see [Tabs](#tabs)) |
+| `LiquidTabPanel`  | Deprecated: the old name of `TabPanel`                                      |
 | `MatchupCard`     | Head-to-head comparison card                                                |
 | `MediaPreview`    | Thumbnail that falls back to "Preview unavailable, open original" when it can't render |
 | `Menu`            | A button's menu of actions: icons, shortcuts, checkbox and radio items, links, groups, submenus; the full keyboard pattern, 44px targets (see [Menu](#menu)) |
@@ -2142,6 +2279,8 @@ function App() {
 | `RadioGroup`      | Radio set reporting one `string`; descriptions, error, 44px targets         |
 | `Slider`          | A value along a track, starting in the middle or not set on request; named snap-point chips, a visible number, the full keyboard, 44px targets (see [Slider](#slider)) |
 | `RangeSlider`     | A low and a high on one track: two thumbs that meet and never cross, each its own slider to the keyboard (see [RangeSlider](#rangeslider)) |
+| `Tabs`            | Tab strip, plain (an underline) or liquid (a sliding pill); arrow keys, one tab stop, counts, 44px `lg` size (see [Tabs](#tabs)) |
+| `TabPanel`        | The panel a `Tabs` tab controls, named for its tab by construction; one swapping panel or one per tab |
 | `Toast`           | Transient floating notice; `Toaster` + the imperative `toast` handle        |
 
 ### Organisms
@@ -2307,6 +2446,13 @@ npm run check:prefix
 npm run check:classes-emit
 ```
 
+In CI the Storybook projects run inside Playwright's own image for the locked
+version (`mcr.microsoft.com/playwright:v<version>-noble` in `ci.yml`), so no
+browser or system library is installed from Ubuntu's mirrors. Bumping
+`playwright` means bumping that tag too: `src/ci-workflow.test.ts` fails until
+they match. Every job and test step has a time limit, so a stall fails with
+GitHub's "has timed out" message instead of running for hours.
+
 Three guards are worth knowing about, because the bugs they catch cannot be
 reproduced from inside this repo.
 

package/dist/components/molecules/Carousel/Carousel.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),Be=require("react"),$e=require("../../atoms/Button/Button.cjs"),T=require("../../../lib/utils.cjs"),ze=require("../../../lib/labels.cjs"),He=require("../../../internal/motion.cjs"),d=require("./carousel-math.cjs"),U=require("./carousel-layout.cjs"),Ue=require("../../../internal/key-focus.cjs");function Ve(o){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const f in o)if(f!=="default"){const x=Object.getOwnPropertyDescriptor(o,f);Object.defineProperty(a,f,x.get?x:{enumerable:!0,get:()=>o[f]})}}return a.default=o,Object.freeze(a)}const n=Ve(Be),We={position:(o,a)=>`${o} of ${a}`},Xe=o=>Math.min(3e3,500+o*.35),Ge='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])',V=o=>typeof o=="number"?`${o}px`:o;function se(o){const a=parseFloat(o);return Number.isFinite(a)?a:0}const Je="rst:hidden rst:[@media(any-hover:hover)]:inline-flex",Ke="rst:hidden rst:[@media(any-hover:hover)]:flex";function oe({direction:o}){return c.jsx("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 20 20",className:"rst:h-5 rst:w-5",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:c.jsx("path",{d:o==="prev"?"M12.5 4.5 7 10l5.5 5.5":"M7.5 4.5 13 10l-5.5 5.5"})})}const le={overflowing:null,canScrollPrev:!1,canScrollNext:!1,index:0},Qe=n.forwardRef(function({"aria-label":a,"aria-labelledby":f,children:x,itemWidth:I,perView:C,gap:W=12,gutter:X=16,bleed:ce=!1,snap:R="start",snapStrictness:ie="mandatory",oneAtATime:ae=!1,arrows:j="hover",arrowPlacement:M="controls",renderArrows:L,prevLabel:ue,nextLabel:de,prevIcon:fe,nextIcon:ge,arrowButtonProps:ve,fade:pe=!1,scrollbar:me=!1,showPosition:G=!1,labels:be,onIndexChange:J,onScrollStateChange:K,itemClassName:xe,listClassName:he,className:ye,style:Se,...we},Ne){Ue.useKeyFocus();const Q=ze.withLabels(We,be),p=n.useRef(null),Y=`${n.useId()}-list`,Z=n.Children.toArray(x),E=Z.length,[l,Te]=n.useState(le),ee=n.useRef(le),[Ie,Le]=n.useState(""),[Ee,Pe]=n.useState(!1),O=n.useRef({onIndexChange:J,onScrollStateChange:K});n.useEffect(()=>{O.current={onIndexChange:J,onScrollStateChange:K}});const g=n.useCallback(()=>{const e=p.current;if(!e)return null;const t=e.getBoundingClientRect(),r=getComputedStyle(e),s=t.left+e.clientLeft-e.scrollLeft;return{items:Array.from(e.children).map(u=>{const b=u.getBoundingClientRect();return{start:b.left-s,end:b.right-s}}),scrollLeft:e.scrollLeft,clientWidth:e.clientWidth,scrollWidth:e.scrollWidth,paddingStart:se(r.scrollPaddingInlineStart||r.scrollPaddingLeft),paddingEnd:se(r.scrollPaddingInlineEnd||r.scrollPaddingRight),align:R}},[R]),h=n.useCallback(()=>{const e=g();if(!e)return;const t={overflowing:d.overflows(e),canScrollPrev:d.canScrollPrev(e),canScrollNext:d.canScrollNext(e),index:e.items.length?d.currentIndex(e):0},r=ee.current;r.overflowing===t.overflowing&&r.canScrollPrev===t.canScrollPrev&&r.canScrollNext===t.canScrollNext&&r.index===t.index||(ee.current=t,Te(t),r.index!==t.index&&O.current.onIndexChange?.(t.index),(r.canScrollPrev!==t.canScrollPrev||r.canScrollNext!==t.canScrollNext)&&O.current.onScrollStateChange?.({canScrollPrev:t.canScrollPrev,canScrollNext:t.canScrollNext}))},[g]),ke=JSON.stringify([W,X,I,C]);n.useLayoutEffect(()=>{const e=p.current;if(!e)return;h();let t=0;const r=()=>{t||(t=requestAnimationFrame(()=>{t=0,h()}))};e.addEventListener("scroll",r,{passive:!0});const s=typeof ResizeObserver>"u"?null:new ResizeObserver(()=>h()),i=()=>{s?.observe(e),Array.from(e.children).forEach(b=>s?.observe(b))};i();const u=typeof MutationObserver>"u"?null:new MutationObserver(()=>{i(),h()});return u?.observe(e,{childList:!0}),()=>{e.removeEventListener("scroll",r),s?.disconnect(),u?.disconnect(),t&&cancelAnimationFrame(t)}},[h,E,ke]),n.useLayoutEffect(()=>{const e=p.current;if(e&&(Pe(!e.querySelector(Ge)),f)){const t=f.split(/\s+/).map(r=>document.getElementById(r)?.textContent?.trim()??"").filter(Boolean).join(" ");Le(t)}},[x,f]);const y=n.useRef(null),v=n.useCallback(()=>{const e=p.current,t=y.current;t&&(y.current=null,window.clearTimeout(t.timer),e?.removeEventListener("scrollend",t.done),e&&(e.style.scrollSnapType="",delete e.dataset.settling))},[]),m=n.useCallback((e,t)=>{const r=p.current;if(!r)return;if(v(),t!=="smooth"||He.prefersReducedMotion()||Math.abs(r.scrollLeft-e)<1){r.style.scrollSnapType="none",r.scrollTo({left:e,behavior:"instant"}),r.style.scrollSnapType="";return}r.style.scrollSnapType="none",r.dataset.settling="";const i=r.scrollLeft,u=()=>{Math.abs(r.scrollLeft-i)<.5||v()};y.current={timer:window.setTimeout(v,Xe(Math.abs(r.scrollLeft-e))),done:u,target:e},r.addEventListener("scrollend",u),r.scrollTo({left:e,behavior:"smooth"})},[v]),P=n.useCallback(e=>{const t=g();if(!t)return;const r=y.current?{...t,scrollLeft:y.current.target}:t;m(d.pageTarget(r,e),"smooth")},[g,m]);n.useImperativeHandle(Ne,()=>({scrollToIndex:(e,t)=>{const r=g();if(!r||!r.items.length)return;const s=Math.min(Math.max(0,Math.round(e)),r.items.length-1);m(d.snapPosition(r,s),t?.behavior??"smooth")},scrollPrev:()=>P(-1),scrollNext:()=>P(1)}),[g,P,m]),n.useEffect(()=>v,[v]);const D=n.useRef(null),F=n.useRef(null),_=n.useRef(null);n.useLayoutEffect(()=>{const e=_.current;if(!e)return;const t=e==="prev"?D.current:F.current,r=e==="prev"?F.current:D.current,s=e==="prev"?!l.canScrollPrev:!l.canScrollNext,i=document.activeElement;s&&(i!==t&&i!==document.body&&i!==null||r&&!r.disabled&&r.focus())},[l.canScrollPrev,l.canScrollNext]);const S=n.useRef(null),w=n.useRef(!1),Ce=e=>{e.pointerType!=="mouse"||e.button!==0||l.overflowing&&(v(),w.current=!1,S.current={pointerId:e.pointerId,x0:e.clientX,scroll0:e.currentTarget.scrollLeft,dragging:!1})},Re=e=>{const t=S.current;if(!t||e.pointerId!==t.pointerId)return;const r=e.currentTarget,s=e.clientX-t.x0;if(!t.dragging){if(Math.abs(s)<=d.CAROUSEL_DRAG_THRESHOLD)return;t.dragging=!0,r.dataset.dragging="",r.style.scrollSnapType="none",window.getSelection?.()?.removeAllRanges();try{r.setPointerCapture(e.pointerId)}catch{}}r.scrollLeft=t.scroll0-s},A=e=>{const t=S.current;if(!t||e.pointerId!==t.pointerId||(S.current=null,!t.dragging))return;const r=e.currentTarget;delete r.dataset.dragging,w.current=e.type==="pointerup",window.setTimeout(()=>{w.current=!1},0);const s=g();s?m(d.snapPosition(s,d.nearestIndex(s)),"smooth"):r.style.scrollSnapType=""},je=e=>{!w.current||e.detail===0||(w.current=!1,e.preventDefault(),e.stopPropagation())},Me=e=>{l.overflowing&&e.preventDefault()},Oe=e=>{const t=e.currentTarget,r=e.target;if(r===t||S.current?.dragging)return;let s=!1;try{s=r.matches(":focus-visible, [data-key-focus]")}catch{s=!1}if(!s)return;const i=r.closest("[data-carousel-item]");if(!i||i.parentElement!==t)return;const u=g();if(!u)return;const b=Array.prototype.indexOf.call(t.children,i);m(d.snapPosition(u,b),"instant")},[De,Fe]=n.useState(0);n.useEffect(()=>{const e=window.setTimeout(()=>Fe(l.index),150);return()=>window.clearTimeout(e)},[l.index]);const te=a??Ie,re=e=>te?`${e} ${te}`:e,q=j!=="none"&&l.overflowing!==!1,_e=j==="hover"?Je:"rst:inline-flex",ne=e=>{const t=e==="prev",{className:r,...s}=ve??{};return c.jsx($e.Button,{type:"button",variant:"outline",colorScheme:"neutral",size:"icon",...s,"aria-label":t?ue??re("Previous"):de??re("Next"),"aria-controls":Y,disabled:t?!l.canScrollPrev:!l.canScrollNext,onClick:()=>P(t?-1:1),ref:t?D:F,onFocus:()=>{_.current=e},onBlur:i=>{i.relatedTarget&&(_.current=null)},"data-carousel-arrow":e,className:T.cn("rst:size-11 rst:shrink-0 rst:rounded-full",M==="overlay"&&!L&&"rst:bg-[var(--roster-popover-bg)] rst:elevation-raised rst:hover:bg-[var(--roster-popover-bg)] rst:disabled:invisible",_e,r),children:t?fe??c.jsx(oe,{direction:"prev"}):ge??c.jsx(oe,{direction:"next"})})},k=q?ne("prev"):null,B=q?ne("next"):null,N=G&&E?c.jsx("p",{"aria-live":"polite",className:"rst:font-ui rst:m-0 rst:text-sm rst:tabular-nums rst:opacity-75","data-carousel-position":"",children:Q.position(De+1,E)}):null;let $=null;L?$=L({prev:k,next:B,position:N}):M==="controls"&&(k||N)&&($=c.jsxs("div",{className:T.cn("rst:mb-2 rst:items-center rst:justify-end rst:gap-2",!N&&j==="hover"?Ke:"rst:flex"),"data-carousel-controls":"",children:[N&&c.jsx("div",{className:"rst:mr-auto",children:N}),k,B]}));const z=pe&&l.overflowing&&(l.canScrollPrev||l.canScrollNext)?`linear-gradient(to right, ${l.canScrollPrev?"transparent, black 48px":"black"}, ${l.canScrollNext?"black calc(100% - 48px), transparent":"black"})`:void 0,H=I===void 0&&C!==void 0,Ae={"--rst-cv-gap":V(W),"--rst-cv-gutter":V(X),...H?U.perViewVars(C):{},...z?{maskImage:z,WebkitMaskImage:z}:{}},qe=I!==void 0?{width:V(I)}:H?{width:U.FLUID_ITEM_WIDTH}:void 0;return c.jsxs("div",{className:T.cn("rst:min-w-0",ye),style:Se,...we,children:[$,c.jsxs("div",{className:"rst:relative",children:[c.jsx("ul",{ref:p,id:Y,role:"list","aria-label":a,"aria-labelledby":a?void 0:f,tabIndex:Ee&&l.overflowing?0:void 0,"data-overflowing":l.overflowing?"":void 0,onPointerDown:Ce,onPointerMove:Re,onPointerUp:A,onPointerCancel:A,onLostPointerCapture:A,onClickCapture:je,onDragStart:Me,onFocus:Oe,style:Ae,className:T.cn("rst:m-0 rst:flex rst:list-none rst:overflow-x-auto rst:overflow-y-hidden","rst:gap-(--rst-cv-gap) rst:px-(--rst-cv-gutter) rst:py-1 rst:scroll-px-(--rst-cv-gutter)","rst:overscroll-x-contain",ie==="mandatory"?"rst:snap-x rst:snap-mandatory":"rst:snap-x rst:snap-proximity",ce&&"rst:-mx-(--rst-cv-gutter)",!me&&"rst:[scrollbar-width:none] rst:[&::-webkit-scrollbar]:hidden",H&&U.FLUID_CLASSES,"rst:data-overflowing:cursor-grab rst:data-dragging:cursor-grabbing rst:data-dragging:select-none","rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-inset",he),children:Z.map((e,t)=>c.jsx("li",{"data-carousel-item":"","aria-label":G?Q.position(t+1,E):void 0,style:qe,className:T.cn("rst:shrink-0",R==="start"?"rst:snap-start":"rst:snap-center",ae&&"rst:snap-always",xe),children:e},n.isValidElement(e)&&e.key!=null?e.key:t))}),!L&&M==="overlay"&&q&&c.jsxs(c.Fragment,{children:[c.jsx("div",{className:"rst:pointer-events-none rst:absolute rst:inset-y-0 rst:start-1 rst:flex rst:items-center",children:c.jsx("div",{className:"rst:pointer-events-auto",children:k})}),c.jsx("div",{className:"rst:pointer-events-none rst:absolute rst:inset-y-0 rst:end-1 rst:flex rst:items-center",children:c.jsx("div",{className:"rst:pointer-events-auto",children:B})})]})]})]})});exports.Carousel=Qe;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),Ee=require("react"),Te=require("../../atoms/Button/Button.cjs"),_=require("../../../lib/utils.cjs"),Ie=require("../../../lib/labels.cjs"),Ne=require("../../../internal/motion.cjs"),v=require("./carousel-math.cjs"),ct=require("./carousel-layout.cjs"),at=require("./carousel-selection.cjs"),Ce=require("../../../internal/key-focus.cjs"),Re=require("../../../internal/dev.cjs");function Pe(l){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const u in l)if(u!=="default"){const x=Object.getOwnPropertyDescriptor(l,u);Object.defineProperty(c,u,x.get?x:{enumerable:!0,get:()=>l[u]})}}return c.default=l,Object.freeze(c)}const s=Pe(Ee),Le={position:(l,c)=>`${l} of ${c}`},je=l=>Math.min(3e3,500+l*.35),ut='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])',dt=l=>typeof l=="number"?`${l}px`:l;function Lt(l){const c=parseFloat(l);return Number.isFinite(c)?c:0}const Oe="rst:hidden rst:[@media(any-hover:hover)]:inline-flex",De="rst:hidden rst:[@media(any-hover:hover)]:flex";function jt({direction:l}){return a.jsx("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 20 20",className:"rst:h-5 rst:w-5",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:a.jsx("path",{d:l==="prev"?"M12.5 4.5 7 10l5.5 5.5":"M7.5 4.5 13 10l-5.5 5.5"})})}const Me="rst:cursor-pointer rst:in-data-dragging:cursor-grabbing rst:outline-hidden rst:focus-visible:outline-solid rst:focus-visible:outline-2 rst:focus-visible:outline-offset-2 rst:focus-visible:outline-ring",Ae=s.memo(function({child:c,index:u,count:x,selected:C,active:k,label:P,style:q,className:F}){return a.jsx("li",{role:"option","aria-selected":C,"aria-setsize":x,"aria-posinset":u+1,"aria-label":P,tabIndex:k?0:-1,"data-carousel-item":"","data-selected":C?"":void 0,style:q,className:F,children:c})});function _e(l){const c=[];return s.Children.forEach(l,u=>{if(u==null||typeof u=="boolean")return;const x=s.isValidElement(u)&&u.key!==null;c.push({child:u,key:x?String(u.key):`#${c.length}`,keyed:x})}),c}const qe={active:null,keys:[],sig:"",selected:null,init:!1},W=(l,c)=>Array.prototype.indexOf.call(l.children,c),Ot={overflowing:null,canScrollPrev:!1,canScrollNext:!1,index:0},Fe=s.forwardRef(function({"aria-label":c,"aria-labelledby":u,"aria-describedby":x,children:C,itemWidth:k,perView:P,gap:q=12,gutter:F=16,bleed:Dt=!1,snap:G="start",snapStrictness:Mt="mandatory",oneAtATime:At=!1,arrows:X="hover",arrowPlacement:J="controls",renderArrows:$,prevLabel:_t,nextLabel:qt,prevIcon:Ft,nextIcon:$t,arrowButtonProps:Bt,fade:zt=!1,scrollbar:Ht=!1,showPosition:ft=!1,labels:Vt,onIndexChange:gt,onScrollStateChange:pt,selectable:p=!1,selectedKey:vt,defaultSelectedKey:Kt=null,onSelectionChange:Ut,onActivate:mt,clearable:Wt=!1,getOptionLabel:Y,itemClassName:Gt,listClassName:Xt,className:Jt,style:Yt,...Qt},Zt){Ce.useKeyFocus();const yt=Ie.withLabels(Le,Vt),h=s.useRef(null),xt=`${s.useId()}-list`,ht=s.Children.toArray(C),w=p?_e(C):null,L=w?w.length:ht.length,bt=vt!==void 0,[te,ee]=s.useState(Kt),d=bt?vt:te,[re,St]=s.useState(!1),m=w?w.map(t=>t.key):[],kt=m.join("\0"),[E,B]=s.useState(qe);let T=E.active;if(p&&(!E.init||E.sig!==kt||E.selected!==d)){const t=new Set(m);E.init&&E.selected!==d&&!re&&d!==null&&t.has(d)&&(T=d),(T===null||!t.has(T))&&(T=at.survivingNeighbor(E.keys,t,T)??(d!==null&&t.has(d)?d:m[0]??null)),B({active:T,keys:m,sig:kt,selected:d,init:!0})}const[f,ne]=s.useState(Ot),wt=s.useRef(Ot),[se,oe]=s.useState(""),[ie,le]=s.useState(!1),Q=s.useRef({onIndexChange:gt,onScrollStateChange:pt});s.useEffect(()=>{Q.current={onIndexChange:gt,onScrollStateChange:pt}});const y=s.useCallback(()=>{const t=h.current;if(!t)return null;const e=t.getBoundingClientRect(),r=getComputedStyle(t),n=e.left+t.clientLeft-t.scrollLeft;return{items:Array.from(t.children).map(i=>{const g=i.getBoundingClientRect();return{start:g.left-n,end:g.right-n}}),scrollLeft:t.scrollLeft,clientWidth:t.clientWidth,scrollWidth:t.scrollWidth,paddingStart:Lt(r.scrollPaddingInlineStart||r.scrollPaddingLeft),paddingEnd:Lt(r.scrollPaddingInlineEnd||r.scrollPaddingRight),align:G}},[G]),j=s.useCallback(()=>{const t=y();if(!t)return;const e={overflowing:v.overflows(t),canScrollPrev:v.canScrollPrev(t),canScrollNext:v.canScrollNext(t),index:t.items.length?v.currentIndex(t):0},r=wt.current;r.overflowing===e.overflowing&&r.canScrollPrev===e.canScrollPrev&&r.canScrollNext===e.canScrollNext&&r.index===e.index||(wt.current=e,ne(e),r.index!==e.index&&Q.current.onIndexChange?.(e.index),(r.canScrollPrev!==e.canScrollPrev||r.canScrollNext!==e.canScrollNext)&&Q.current.onScrollStateChange?.({canScrollPrev:e.canScrollPrev,canScrollNext:e.canScrollNext}))},[y]),ce=JSON.stringify([q,F,k,P]);s.useLayoutEffect(()=>{const t=h.current;if(!t)return;j();let e=0;const r=()=>{e||(e=requestAnimationFrame(()=>{e=0,j()}))};t.addEventListener("scroll",r,{passive:!0});const n=typeof ResizeObserver>"u"?null:new ResizeObserver(()=>j()),o=()=>{n?.observe(t),Array.from(t.children).forEach(g=>n?.observe(g))};o();const i=typeof MutationObserver>"u"?null:new MutationObserver(()=>{o(),j()});return i?.observe(t,{childList:!0}),()=>{t.removeEventListener("scroll",r),n?.disconnect(),i?.disconnect(),e&&cancelAnimationFrame(e)}},[j,L,ce]),s.useLayoutEffect(()=>{const t=h.current;if(t&&(le(!t.querySelector(ut)),u)){const e=u.split(/\s+/).map(r=>document.getElementById(r)?.textContent?.trim()??"").filter(Boolean).join(" ");oe(e)}},[C,u]);const I=s.useRef(null),N=s.useCallback(()=>{const t=h.current,e=I.current;e&&(I.current=null,window.clearTimeout(e.timer),t?.removeEventListener("scrollend",e.done),t&&(t.style.scrollSnapType="",delete t.dataset.settling))},[]),b=s.useCallback((t,e)=>{const r=h.current;if(!r)return;if(N(),e!=="smooth"||Ne.prefersReducedMotion()||Math.abs(r.scrollLeft-t)<1){r.style.scrollSnapType="none",r.scrollTo({left:t,behavior:"instant"}),r.style.scrollSnapType="";return}r.style.scrollSnapType="none",r.dataset.settling="";const o=r.scrollLeft,i=()=>{Math.abs(r.scrollLeft-o)<.5||N()};I.current={timer:window.setTimeout(N,je(Math.abs(r.scrollLeft-t))),done:i,target:t},r.addEventListener("scrollend",i),r.scrollTo({left:t,behavior:"smooth"})},[N]),z=s.useCallback(t=>{const e=y();if(!e)return;const r=I.current?{...e,scrollLeft:I.current.target}:e;b(v.pageTarget(r,t),"smooth")},[y,b]);s.useImperativeHandle(Zt,()=>({scrollToIndex:(t,e)=>{const r=y();if(!r||!r.items.length)return;const n=Math.min(Math.max(0,Math.round(t)),r.items.length-1);b(v.snapPosition(r,n),e?.behavior??"smooth")},scrollPrev:()=>z(-1),scrollNext:()=>z(1),focus:()=>{const t=h.current;if(!t)return;const e=p?t.querySelector(':scope > [tabindex="0"]'):t.querySelector(ut)??(t.tabIndex===0?t:null);if(!e)return;e.focus({preventScroll:!0});const r=e.closest("[data-carousel-item]"),n=y(),o=r&&r.parentElement===t?W(t,r):-1,i=n&&o>=0?v.revealTarget(n,o,I.current?.target??n.scrollLeft):null;i!==null&&b(i,"smooth")}}),[y,z,b,p]),s.useEffect(()=>N,[N]);const Z=s.useRef(null),tt=s.useRef(null),et=s.useRef(null);s.useLayoutEffect(()=>{const t=et.current;if(!t)return;const e=t==="prev"?Z.current:tt.current,r=t==="prev"?tt.current:Z.current,n=t==="prev"?!f.canScrollPrev:!f.canScrollNext,o=document.activeElement;n&&(o!==e&&o!==document.body&&o!==null||r&&!r.disabled&&r.focus())},[f.canScrollPrev,f.canScrollNext]);const R=s.useRef(null),O=s.useRef(!1),ae=t=>{t.pointerType!=="mouse"||t.button!==0||f.overflowing&&(N(),O.current=!1,R.current={pointerId:t.pointerId,x0:t.clientX,scroll0:t.currentTarget.scrollLeft,dragging:!1})},ue=t=>{const e=R.current;if(!e||t.pointerId!==e.pointerId)return;const r=t.currentTarget,n=t.clientX-e.x0;if(!e.dragging){if(Math.abs(n)<=v.CAROUSEL_DRAG_THRESHOLD)return;e.dragging=!0,r.dataset.dragging="",r.style.scrollSnapType="none",window.getSelection?.()?.removeAllRanges();try{r.setPointerCapture(t.pointerId)}catch{}}r.scrollLeft=e.scroll0-n},rt=t=>{const e=R.current;if(!e||t.pointerId!==e.pointerId||(R.current=null,!e.dragging))return;const r=t.currentTarget;delete r.dataset.dragging,O.current=t.type==="pointerup",window.setTimeout(()=>{O.current=!1},0);const n=y();n?b(v.snapPosition(n,v.nearestIndex(n)),"smooth"):r.style.scrollSnapType=""},de=t=>{!O.current||t.detail===0||(O.current=!1,t.preventDefault(),t.stopPropagation())},fe=t=>{f.overflowing&&t.preventDefault()},ge=t=>{if(p){ve(t);return}const e=t.currentTarget,r=t.target;if(r===e||R.current?.dragging)return;let n=!1;try{n=r.matches(":focus-visible, [data-key-focus]")}catch{n=!1}if(!n)return;const o=r.closest("[data-carousel-item]");if(!o||o.parentElement!==e)return;const i=y();if(!i)return;const g=Array.prototype.indexOf.call(e.children,o);b(v.snapPosition(i,g),"instant")},H=t=>{bt||ee(t),Ut?.(t)},pe=t=>{const e=y();if(!e)return;const r=v.revealTarget(e,t,I.current?.target??e.scrollLeft);r!==null&&b(r,"smooth")},ve=t=>{const e=t.currentTarget,r=t.target;if(r.parentElement!==e)return;const n=W(e,r),o=m[n];if(o===void 0||(B(g=>g.active===o?g:{...g,active:o}),St(!0),R.current?.dragging))return;let i=!1;try{i=r.matches(":focus-visible, [data-key-focus]")}catch{i=!1}i&&pe(n)},me=t=>{const e=t.relatedTarget;e&&t.currentTarget.contains(e)||(St(!1),d!==null&&m.includes(d)&&B(r=>r.active===d?r:{...r,active:d}))},ye=t=>{const e=t.currentTarget,r=t.target.closest("[data-carousel-item]");if(!r||r.parentElement!==e)return;const n=m[W(e,r)];n!==void 0&&(B(o=>o.active===n?o:{...o,active:n}),n===d?mt?.(n):H(n))},D=s.useRef({text:"",at:-1/0}),xe=t=>{const e=t.currentTarget,r=t.target;if(r.parentElement!==e||t.nativeEvent.isComposing||t.ctrlKey||t.metaKey||t.altKey)return;const n=m.length-1,o=W(e,r),i=m[o];if(i===void 0)return;const g=S=>{t.preventDefault();const A=Math.min(n,Math.max(0,S));A!==o&&e.children[A].focus({preventScroll:!0})},Rt=t.timeStamp-D.current.at<at.TYPEAHEAD_RESET_MS&&D.current.text!=="";switch(t.key.length!==1&&(D.current={text:"",at:-1/0}),t.key){case"ArrowRight":return g(o+1);case"ArrowLeft":return g(o-1);case"Home":return g(0);case"End":return g(n);case"PageDown":case"PageUp":{const S=y(),A=S?v.pageStep(S):1;return g(t.key==="PageDown"?o+A:o-A)}case"Enter":t.preventDefault(),i===d?mt?.(i):H(i);return;case" ":if(Rt)break;t.preventDefault(),i!==d&&H(i);return;case"Escape":if(!Wt||d===null)return;t.preventDefault(),t.stopPropagation(),H(null);return}if(t.key.length!==1)return;const Pt=(Rt?D.current.text:"")+t.key.toLowerCase();D.current={text:Pt,at:t.timeStamp},t.preventDefault();const we=S=>Y?Y(m[S],S):e.children[S]?.textContent??"",lt=at.typeaheadIndex(m.length,o,Pt,we);lt>=0&&lt!==o&&e.children[lt].focus({preventScroll:!0})},V=s.useRef({keys:!1,interactive:!1});s.useEffect(()=>{if(!p||!Re.isDevelopment())return;const t=h.current;!V.current.keys&&w?.some(e=>!e.keyed)&&(V.current.keys=!0,console.warn("Roster Carousel: selection mode needs a key on every child; it's the option's identity.")),!V.current.interactive&&t?.querySelector(`[data-carousel-item] :is(${ut})`)&&(V.current.interactive=!0,console.warn("Roster Carousel: an option holds something that takes focus. In selection mode the keys can't reach it; put it outside the row, or use onActivate."))});const[he,be]=s.useState(0);s.useEffect(()=>{const t=window.setTimeout(()=>be(f.index),150);return()=>window.clearTimeout(t)},[f.index]);const Et=c??se,Tt=t=>Et?`${t} ${Et}`:t,nt=X!=="none"&&f.overflowing!==!1,Se=X==="hover"?Oe:"rst:inline-flex",It=t=>{const e=t==="prev",{className:r,...n}=Bt??{};return a.jsx(Te.Button,{type:"button",variant:"outline",colorScheme:"neutral",size:"icon",...n,"aria-label":e?_t??Tt("Previous"):qt??Tt("Next"),"aria-controls":xt,disabled:e?!f.canScrollPrev:!f.canScrollNext,onClick:()=>z(e?-1:1),ref:e?Z:tt,onFocus:()=>{et.current=t},onBlur:o=>{o.relatedTarget&&(et.current=null)},"data-carousel-arrow":t,className:_.cn("rst:size-11 rst:shrink-0 rst:rounded-full",J==="overlay"&&!$&&"rst:bg-[var(--roster-popover-bg)] rst:elevation-raised rst:hover:bg-[var(--roster-popover-bg)] rst:disabled:invisible",Se,r),children:e?Ft??a.jsx(jt,{direction:"prev"}):$t??a.jsx(jt,{direction:"next"})})},K=nt?It("prev"):null,st=nt?It("next"):null,M=ft&&L?a.jsx("p",{"aria-live":"polite",className:"rst:font-ui rst:m-0 rst:text-sm rst:tabular-nums rst:opacity-75","data-carousel-position":"",children:yt.position(he+1,L)}):null;let ot=null;$?ot=$({prev:K,next:st,position:M}):J==="controls"&&(K||M)&&(ot=a.jsxs("div",{className:_.cn("rst:mb-2 rst:items-center rst:justify-end rst:gap-2",!M&&X==="hover"?De:"rst:flex"),"data-carousel-controls":"",children:[M&&a.jsx("div",{className:"rst:mr-auto",children:M}),K,st]}));const it=zt&&f.overflowing&&(f.canScrollPrev||f.canScrollNext)?`linear-gradient(to right, ${f.canScrollPrev?"transparent, black 48px":"black"}, ${f.canScrollNext?"black calc(100% - 48px), transparent":"black"})`:void 0,U=k===void 0&&P!==void 0,ke={"--rst-cv-gap":dt(q),"--rst-cv-gutter":dt(F),...U?ct.perViewVars(P):{},...it?{maskImage:it,WebkitMaskImage:it}:{}},Nt=s.useMemo(()=>k!==void 0?{width:dt(k)}:U?{width:ct.FLUID_ITEM_WIDTH}:void 0,[k,U]),Ct=_.cn("rst:shrink-0",G==="start"?"rst:snap-start":"rst:snap-center",At&&"rst:snap-always",p&&Me,Gt);return a.jsxs("div",{className:_.cn("rst:min-w-0",Jt),style:Yt,...Qt,"aria-describedby":p?void 0:x,children:[ot,a.jsxs("div",{className:"rst:relative",children:[a.jsx("ul",{ref:h,id:xt,role:p?"listbox":"list","aria-label":c,"aria-labelledby":c?void 0:u,"aria-orientation":p?"horizontal":void 0,"aria-describedby":p?x:void 0,tabIndex:!p&&ie&&f.overflowing?0:void 0,"data-overflowing":f.overflowing?"":void 0,onPointerDown:ae,onPointerMove:ue,onPointerUp:rt,onPointerCancel:rt,onLostPointerCapture:rt,onClickCapture:de,onClick:p?ye:void 0,onKeyDown:p?xe:void 0,onBlur:p?me:void 0,onDragStart:fe,onFocus:ge,style:ke,className:_.cn("rst:m-0 rst:flex rst:list-none rst:overflow-x-auto rst:overflow-y-hidden","rst:gap-(--rst-cv-gap) rst:px-(--rst-cv-gutter) rst:py-1 rst:scroll-px-(--rst-cv-gutter)","rst:overscroll-x-contain",Mt==="mandatory"?"rst:snap-x rst:snap-mandatory":"rst:snap-x rst:snap-proximity",Dt&&"rst:-mx-(--rst-cv-gutter)",!Ht&&"rst:[scrollbar-width:none] rst:[&::-webkit-scrollbar]:hidden",U&&ct.FLUID_CLASSES,"rst:data-overflowing:cursor-grab rst:data-dragging:cursor-grabbing rst:data-dragging:select-none","rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-inset",Xt),children:w?w.map((t,e)=>a.jsx(Ae,{child:t.child,index:e,count:L,selected:t.key===d,active:t.key===T,label:Y?.(t.key,e),style:Nt,className:Ct},t.key)):ht.map((t,e)=>a.jsx("li",{"data-carousel-item":"","aria-label":ft?yt.position(e+1,L):void 0,style:Nt,className:Ct,children:t},s.isValidElement(t)&&t.key!=null?t.key:e))}),!$&&J==="overlay"&&nt&&a.jsxs(a.Fragment,{children:[a.jsx("div",{className:"rst:pointer-events-none rst:absolute rst:inset-y-0 rst:start-1 rst:flex rst:items-center",children:a.jsx("div",{className:"rst:pointer-events-auto",children:K})}),a.jsx("div",{className:"rst:pointer-events-none rst:absolute rst:inset-y-0 rst:end-1 rst:flex rst:items-center",children:a.jsx("div",{className:"rst:pointer-events-auto",children:st})})]})]})]})});exports.Carousel=Fe;

package/dist/components/molecules/Carousel/Carousel.d.ts

@@ -17,6 +17,13 @@ export interface CarouselHandle {
     scrollPrev: () => void;
     /** What the next arrow does: on one page. */
     scrollNext: () => void;
+    /**
+     * Moves focus into the row. In selection mode, onto the option a Tab would
+     * land on: the selected one, or where the keys last left off. Otherwise onto
+     * the first item that can take focus, or the list when it's the tab stop.
+     * Scrolls it into view.
+     */
+    focus: () => void;
 }
 export interface CarouselArrowsRender {
     /** The previous arrow, or `null` while the row fits and there is nothing to page. */
@@ -35,7 +42,17 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     "aria-label"?: string;
     /** The id of the heading that names the row. */
     "aria-labelledby"?: string;
-    /** One child per item. Each is wrapped in the list item the row snaps to. */
+    /**
+     * In selection mode, describes the listbox: say how it works, as "Enter
+     * selects. Enter again opens it." Otherwise it describes the outer wrapper,
+     * as it always has.
+     */
+    "aria-describedby"?: string;
+    /**
+     * One child per item. Each is wrapped in the list item the row snaps to. In
+     * selection mode each child is an option, and its React `key` is its
+     * identity: give every child one.
+     */
     children: React.ReactNode;
     /**
      * Fixed mode: every item is this wide (a number is px). The row overflows
@@ -117,14 +134,53 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
         canScrollPrev: boolean;
         canScrollNext: boolean;
     }) => void;
+    /**
+     * Selection mode: the row becomes a listbox of options, one of which is
+     * selected. One tab stop, the arrow keys, Home, End and the Page keys move
+     * between options, type-ahead jumps to one, and Enter or Space selects.
+     * Selection doesn't follow focus: arrowing only moves focus. See the README
+     * for when to use it. Off by default, and off changes nothing.
+     *
+     * **Nothing interactive inside an option.** An option is one choice; a link
+     * or a button inside it would be a second tab stop the keys can't reach.
+     * Put actions outside the row (or use `onActivate`). A development build
+     * warns when an option holds something that takes focus.
+     */
+    selectable?: boolean;
+    /**
+     * Selection mode, controlled: the selected option's `key`, as React stores
+     * it (a string), or `null` for none.
+     */
+    selectedKey?: string | null;
+    /** Selection mode, uncontrolled: the option selected at first. */
+    defaultSelectedKey?: string | null;
+    /**
+     * Selection mode: an option was selected (Enter, Space, a click or a tap on
+     * one that isn't), with its key; or the selection was cleared (Escape, with
+     * `clearable`), with `null`.
+     */
+    onSelectionChange?: (key: string | null) => void;
+    /**
+     * Selection mode: Enter, or a click or a tap, on the option that's already
+     * selected. The second step after choosing, such as opening it.
+     */
+    onActivate?: (key: string) => void;
+    /** Selection mode: Escape clears the selection. */
+    clearable?: boolean;
+    /**
+     * Selection mode: each option's accessible name, which is also the text
+     * type-ahead matches. Without it an option is named by its content, and
+     * type-ahead reads its text.
+     */
+    getOptionLabel?: (key: string, index: number) => string;
     /** Classes for each list item. */
     itemClassName?: string;
     /** Classes for the scrolling list. `className` is the outer wrapper. */
     listClassName?: string;
 }
 /**
- * A sideways row of items: a row of cards, a selection strip, a gallery of one
- * per view.
+ * A sideways row of items: a row of cards, a selection strip (`selectable`), a
+ * gallery of one per view.
  *
  * Native first. The row is a real scroll container with CSS scroll snap, so
  * touch, trackpad, Shift with the wheel and focus all scroll it without
@@ -148,6 +204,12 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
  *
  * Renders a `ul` named by `aria-label` or `aria-labelledby`, one `li` per
  * child. There is no carousel role and no slide role: nothing rotates.
+ *
+ * For a strip of choices, one of which is picked, use `selectable`: the row
+ * becomes a horizontal listbox with one tab stop, roving focus over its
+ * options, and a selection that changes only on Enter, Space or a tap. A row
+ * of buttons with `aria-pressed` is as many tab stops as there are buttons,
+ * and a screen reader hears a list of unrelated buttons.
  */
 declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselHandle>>;
 export { Carousel };