@blakesteve/roster 5.12.0 → 5.14.0

package/README.md

@@ -561,7 +561,7 @@ element marked `data-key-focus`. WebKit doesn't match `:focus-visible` on an
 element a script focuses in answer to a key once the page has been clicked.
 Escape handing focus back to a menu's or a select's trigger, or to a dialog's
 opener, and a radio group's or tabs' arrows all drew no ring in Safari after
-a click. A small internal tracker marks those elements: keyboard mode starts on a navigation key (Tab, Option+Tab, the
+a click. A small tracker marks those elements: keyboard mode starts on a navigation key (Tab, Option+Tab, the
 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
@@ -576,6 +576,23 @@ variant in your stylesheet as Roster does:
 @custom-variant focus-visible (&:is(:focus-visible, [data-key-focus]));
 ```
 
+The variant is enough for your rings on a page where one of Roster's
+components has the tracker running. A control of your own that moves focus by
+script in answer to a key, arrows around a hand-drawn wheel or a grid that
+roves its own focus, shouldn't count on one: call `useKeyFocus()` in it, and
+the tracker runs while it's mounted. The listeners are shared, so it costs
+nothing beside Roster's own components. `KEY_FOCUS` is the attribute's name,
+for a selector or a test.
+
+```tsx
+import { useKeyFocus } from "@blakesteve/roster";
+
+function Wheel() {
+  useKeyFocus();
+  // arrows move focus between the stops with stop.focus(); rings on focus-visible:
+}
+```
+
 ### Motion
 
 Two hand-rolled utilities, both of which stop for `prefers-reduced-motion`.
@@ -1352,6 +1369,10 @@ What it promises:
   item's decision.
 - **Steps take focus and give it back.** Escape or Cancel returns focus to the
   button that opened the step.
+- **A blocked step says why, plainly.** A step that can't be submitted yet (a
+  reason not picked, an edit with nothing changed) says why in plain text,
+  and its submit is described by it. A submit tried anyway decides nothing
+  and turns the reason into an error.
 - **An item that disappears** (another reviewer, a reload) with its step open
   closes the step without deciding, and is announced once as decided
   elsewhere. Without a step, it moves focus only if focus was inside it.
@@ -1360,10 +1381,11 @@ What it promises:
 - **Phones.** Every button is 44px tall at every width, and nothing scrolls
   sideways at 320px. Nothing animates as an item leaves.
 
-Counts for a tab badge need no API: the app holds the items, so it's
-`items.length`. `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.
+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
+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.
 
 ### FileUpload
 
@@ -1839,8 +1861,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.
@@ -1873,11 +1895,159 @@ 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.
 
+#### Selection mode
+
+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.
+
+```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.
+
+### LiquidTabs
+
+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.
+
+**Counts.** A tab or a nav link takes `count`, shown in a small mark after its
+label:
+
+```tsx
+<LiquidTabs tabs={[{ id: "queue", label: "Queue", count: queue.length }, …]} … />
+```
+
+The count is part of the name, "Queue, 12 items" rather than "Queue12" or
+"Queue (12)", and its words come from `labels`, English by default with a
+plural. Name your own noun, and use `Intl.PluralRules` for a language with
+more than two forms:
+
+```tsx
+labels={{ count: (n) => (n === 1 ? "1 game" : `${n.toLocaleString()} games`) }}
+```
+
+- **Zero shows,** as "0" and "Queue, 0 items": an empty queue is worth
+  saying. To show no count, pass `undefined`.
+- **A count that isn't a whole number from zero** (negative, a fraction,
+  `NaN`) shows nothing, as if there were none, rather than being rounded or
+  clamped into a number nobody passed.
+- **Large counts are written whole,** "12,345", in the mark and the name. To
+  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
+  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 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:
+
+```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>
+
+// 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>
+```
+
+Per tab, a panel that isn't selected stays in the page, hidden, so every tab's
+`aria-controls` points at something, and renders no content. `keepMounted`
+keeps its content mounted, so a half-filled form or a scroll position survives
+a switch away and back. A panel with nothing inside it to Tab to is itself in
+the tab order (`tabIndex={0}`), as the WAI pattern asks, so a keyboard user
+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.
+
 ### Components that render links
 
 `Breadcrumbs` renders a plain `<a>` by default, which is right for a static
@@ -1899,8 +2069,10 @@ once, and the pages that use the wrapper stay server-rendered.
 `LiquidNav` takes a `linkComponent` too, with a wider contract: each link
 receives `href` and `to` with the same value, so React Router's `Link` works as
 well as `next/link`, plus `className`, `children`, `aria-current`, `onClick` and
-`data-tab-id`, which it must forward to the DOM. The props type is exported as
-`LiquidNavLinkProps`. The same client-component rule applies.
+`data-tab-id`, which it must forward to the DOM, and `aria-label` when the
+link has a count (forward it too; a component that doesn't still gets a name
+with the count in it). The props type is exported as `LiquidNavLinkProps`. The
+same client-component rule applies.
 
 `Eyebrow` takes the other approach: `as` accepts any element and the props
 follow it, so `<Eyebrow as="a" href="/work">` works, as does `as={NextLink}`.
@@ -1926,7 +2098,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. Words that take a number or a name are functions, so a language
+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
 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.
@@ -2033,12 +2206,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, 44px `lg` size     |
+| `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 |
 | `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)) |
@@ -2125,6 +2299,7 @@ the one that can not be affected by a future change to the barrel.
 | Hook             | Description                                                                     |
 | ---------------- | ------------------------------------------------------------------------------- |
 | `useCountdown`   | Countdown timer logic without the UI; `days` counts the whole remaining total   |
+| `useKeyFocus`    | Keeps keyboard focus ringed in Safari for your own control that moves focus by script (see [Focus](#focus)). Ships `KEY_FOCUS` |
 | `useKeySequence` | Fires a callback when a sequence of keys is typed in order. Ships `KONAMI_CODE` |
 
 ## Authoring components: the `rst:` prefix

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 };