@blakesteve/roster 5.9.0 → 5.11.0

package/README.md

@@ -269,7 +269,7 @@ changes nothing.
 | ----- | ------- | -------- |
 | `--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 |
+| `--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-2xl` | `1rem` | `Dialog`, the top of `Sheet` |
 | `--roster-radius-3xl` | `1.5rem` | nothing yet; wired for the first component that uses it |
@@ -543,6 +543,18 @@ The band matters more than it looks. Without it the ring sits directly on the
 fill, and a `primary-500` ring on a `primary-600` button is 1.37:1 — which is
 why the ring and its offset are a pair rather than two independent knobs.
 
+**A row in a popup marks focus with the ring too.** The focused row in `Menu`,
+`Select`, `Combobox` and `MultiSelect` keeps its soft primary tint and adds a
+2px inset ring in `--roster-ring`. The tint alone was the indicator until
+5.11.0, and it measured 1.17:1 against the panel in light and 1.03:1 in dark
+on Roster's own defaults: a keyboard user couldn't see where they were. The
+ring follows the token you already set against your own surfaces, so it holds
+wherever the panel is: 6.37:1 and 5.61:1 on the defaults. If you set
+`--roster-popover-bg` to a surface `--roster-ring` doesn't contrast with, set
+the ring with it. In `Menu` the ring shows for keyboard focus only, because the
+pointer moves focus there too. Headless UI's popups mark the keys' row and the
+pointer's alike, so in theirs it shows on hover as well.
+
 ### Motion
 
 Two hand-rolled utilities, both of which stop for `prefers-reduced-motion`.
@@ -607,10 +619,14 @@ its `label` (default "loading") says so.
 The loading system has its own: `--roster-skeleton` and
 `--roster-skeleton-highlight` are the skeleton's fill and the light that
 crosses it, and the empty part of every progress bar (gray-200 and gray-100,
-gray-700 and gray-600 in dark). Three durations, unset by default, change the
-pace: `--roster-skeleton-duration` (1.8s), `--roster-progress-travel-duration`
-(1.4s, the indeterminate pill) and `--roster-dots-duration` (1.2s). Under
-reduced motion all three stop on a resting frame.
+gray-700 and gray-600 in dark). Four durations, unset by default, change the
+pace: `--roster-skeleton-duration` (1.8s, the shimmer),
+`--roster-skeleton-pulse-duration` (2s, the pulse),
+`--roster-progress-travel-duration` (1.4s, the indeterminate pill) and
+`--roster-dots-duration` (1.2s). `--roster-skeleton-pulse-opacity` (0.5) is
+how far a pulse fades. Under reduced motion all of them stop on a resting
+frame. `--roster-skeleton-radius` rounds skeleton blocks without touching the
+shared radius scale (see Skeleton below).
 
 ### Scrollbars
 
@@ -769,6 +785,8 @@ Every field therefore has a second prop, **named for the element it reaches**:
 | `Combobox`     | `className` | `inputClassName`     | `optionsClassName`  |
 | `CheckboxGroup`| `className` | —                    | `optionsClassName`  |
 | `RadioGroup`   | `className` | `radioClassName`     | `optionsClassName`, `optionClassName`, `labelClassName`, `optionLabelClassName`, `descriptionClassName`, `messageClassName` |
+| `Slider`       | `className` | `trackClassName`     | `thumbClassName`, `chipClassName`, `labelClassName`, `messageClassName` |
+| `RangeSlider`  | `className` | `thumbClassName`     | `trackClassName`, `chipClassName`, `labelClassName`, `messageClassName` |
 
 `CheckboxGroup` and `RadioGroup` have no single "control" to reach, since they
 hold one per option, so `RadioGroup`'s `radioClassName` lands on every radio
@@ -924,6 +942,10 @@ look like oversights until you know why:
   page does not reach it. All three components copy the nearest `.dark` onto
   the panel to fix that. Custom properties are not carried the same way — set
   `--roster-popover-*` at `:root`.
+- **A row is a click target, and focus is a ring.** Every option row shows
+  the pointer cursor, as `Menu`'s items do (a disabled one, `not-allowed`).
+  A focused row keeps its tint and adds an inset `--roster-ring`, which is
+  what reaches 3:1 against the panel ([Focus](#focus)).
 - **`Menu` shares the panel, not the anchoring.** Its panel takes the same
   surface, tokens and dark carry, but `Menu` places itself (see
   [Menu](#menu)), writing its own inline `max-height`. It reads the same
@@ -1039,7 +1061,7 @@ rather than vanishing from a field that still reports it.
 
 #### CheckboxGroup
 
-Three things it adds over the version mega-squad's squad form hand-rolled:
+Three things it adds over the version one app's form hand-rolled:
 
 - **Each option is a Headless UI `Field`**, so its label is wired to its own
   checkbox and clicking the text toggles it. The pointer cursor sits on the
@@ -1109,8 +1131,8 @@ silently drops any selected value whose option has not loaded yet.
 
 `CheckboxGroup` exists instead of a multi-select `Select`, and the reason is
 that neither multi-selection UI in the portfolio was ever a dropdown.
-mega-squad's squad form picks sports from a grouped, scrollable checklist with
-category headings; bb-memorial's share form picks tags from a flat row of
+One app's form picks sports from a grouped, scrollable checklist with
+category headings; another's share form picks tags from a flat row of
 toggles. Collapsing either into a menu would have hidden the options behind a
 click to save vertical space neither screen was short of, so the component
 follows the shape that already worked. A multi-select dropdown is still the
@@ -1205,7 +1227,7 @@ rather than a rewrite.
 
 ```tsx
 <RadioGroup
-  label="Who can see this squad"
+  label="Who can see this group"
   helperText="You can change this at any time."
   value={visibility}
   onChange={setVisibility}
@@ -1459,7 +1481,21 @@ import { SkeletonRegion, SkeletonCard } from "@blakesteve/roster";
 - The fill is `--roster-skeleton` (gray-200, gray-700 in dark), with
   `--roster-skeleton-highlight` crossing it. Neutral rather than the brand
   shimmer Countdown uses, and its own pair, so retinting one never recolors the
-  other. Under reduced motion it holds still.
+  other.
+- `animation` picks how it moves: `"shimmer"` (the default, a band of light
+  crossing the fill), `"pulse"` (the fill fading and returning, nothing
+  moving: quieter on a dense page) or `"none"`. Under reduced motion both
+  movements stop on the flat fill, and in forced colors every shape keeps its
+  outline (a pulse stops there, so the outline never fades). Pass it to
+  `SkeletonRegion` and every skeleton inside takes it, presets included; a
+  preset or a skeleton that names its own keeps it. A pulse runs
+  `--roster-skeleton-pulse-duration` (2s) and fades to
+  `--roster-skeleton-pulse-opacity` (0.5).
+- A block's corners are `--roster-skeleton-radius`, the `lg` step unless
+  set. Set it on `:root` or on a wrapper (`14px`, say) and skeleton blocks
+  follow, and nothing else does: the shared scale and every other component
+  stay as they are. A block's `radius` prop still wins, a line keeps its
+  small step, and a circle stays round.
 
 **Progress and ProgressField.** `ProgressField` is the form to reach for: the
 label and value on one baseline above the bar, an optional detail line below.
@@ -1566,8 +1602,10 @@ import { Menu, MenuButton, MenuItems, MenuItem, MenuSeparator } from "@blakestev
 - **Styling.** `className` on `MenuItems` and on each item merges last, so a
   fill such as `bg-gray-100` takes; the scroll shadows are drawn over it. Its
   ring and separators follow `--roster-border-width`. Items show the pointer
-  cursor, a disabled one `not-allowed`. In forced colors the focused item gets
-  an outline, since its fill is dropped.
+  cursor, a disabled one `not-allowed`. Keyboard focus adds an inset ring in
+  `--roster-ring` to the item's tint, which alone doesn't reach 3:1 against
+  the panel ([Focus](#focus)). In forced colors the focused item gets an
+  outline, since its fill and ring are dropped.
 - **Targets.** Every item is at least 44px tall, and `MenuButton` at least 44
   by 44 whatever its size. `MenuButton plain` renders a bare `<button>` for a
   trigger drawn its own way; keep its target at least 44 by 44 with a hit
@@ -1581,6 +1619,120 @@ that its rows are 44px tall rather than 36, and that with neither an inbox nor
 a theme row it no longer draws an empty band and rule at the top. It keeps its
 own white fill, whatever `--roster-popover-bg` says.
 
+### Slider
+
+A value picked along a track: tapped, dragged, stepped with the keys, or set
+from a named snap point.
+
+```tsx
+import { Slider } from "@blakesteve/roster";
+
+<Slider
+  label="How sure are you?"
+  value={sure}
+  onChange={setSure}
+  snapPoints={[{ value: 100, label: "Certain" }, { value: 75, label: "Likely" }, { value: 50, label: "Toss-up" }]}
+  formatValue={(v) => `${v}%`}
+/>;
+```
+
+- **It starts with a thumb**, in the middle of the range by default.
+  `startValue` moves where it starts, and `defaultValue` sets it outright:
+  `defaultValue={0}` starts it at the low end.
+- **Not set** is opt-in: `defaultValue={null}`, or `value={null}` when
+  controlled, leaves the track empty with no thumb until the first input. A
+  form takes it as a valid answer: under `name` it submits an empty string.
+  Controlled, `value` can go back to `null`, which is how a consumer offers a
+  clear.
+- **Snap points** are named stops, any values and labels: a selectable
+  `Chip` under the track for each, in the track's order, moves the thumb
+  there, and a bead on the rail shows where. They're shortcuts, so dragging
+  still lands anywhere between them. A chip shows as pressed (solid rather
+  than outline) while the value is exactly its value, and pressing it again
+  leaves it there. A point outside `min` to `max` is left out.
+- **The number** shows beside the label (`formatValue` writes it). A screen
+  reader hears it with the nearest snap point's name, "72%, Likely", and
+  "Not set" while there's no value, never a number. Every string is in
+  `labels`.
+- **In range.** A value outside `min` to `max` shows, and is said, at the
+  end it's past. A controlled owner that turns a change down (a clamp, say)
+  leaves the next key stepping from the value it kept.
+- **Pointer.** A tap on the track sets the value there; a press on the thumb
+  takes it without a jump, and commits only if the drag moved it. On touch
+  the track waits to see which way a finger goes: across is a drag, down the
+  page scrolls it and sets nothing (and takes no focus), and a tap sets on
+  lift. A pointermove with no press, which WebKit sends when content scrolls
+  under a resting pointer, sets nothing. A second finger is left alone.
+- **Keys.** The arrows step by `step`, PageUp and PageDown by `pageStep` (a
+  tenth of the range by default), Home and End go to the ends. **On an empty
+  slider an arrow or Page key places the thumb at `startValue`, the middle
+  by default**; it doesn't step from anywhere. A key at an end does nothing.
+  From a value between steps, a key goes to the next step that way. Keys
+  always step from the value last set, never from where the thumb is drawn
+  while it eases there, so a burst of presses counts every one. A key the
+  consumer's own `onKeyDown` handled (`preventDefault`) is left to it.
+- **Focus.** By keyboard, the ring is round the thumb; an empty slider rings
+  the track. A disabled slider takes no focus at all.
+- **Form.** Under `name` it submits its value, or an empty string while not
+  set; disabled, nothing, as a disabled input submits nothing. A form's
+  reset puts an uncontrolled slider back where it started.
+- **Targets.** The track is 44px tall and its rail stops 22px short of each
+  end, so the thumb's 44 by 44 target stays on it at every value. Each chip
+  has Chip's 44px-tall target and is at least 44 wide, and the chip row sits
+  8px under the track so its targets never take the thumb's. Under reduced
+  motion the thumb moves without easing. Under `dir="rtl"` the track runs
+  from the right.
+- **Look.** The rail is a light surface edged in `--roster-control-border`,
+  which carries a control edge's 3:1 when there's no thumb to show the
+  slider. Snap points are beads set in the rail, the edge's color on the bare
+  rail and the page's on the fill.
+
+One thumb. Two, for a range, is [RangeSlider](#rangeslider), on the same
+track, so `value` here stays a number.
+
+### RangeSlider
+
+A low and a high along one track: `Slider`'s track, with two thumbs.
+
+```tsx
+import { RangeSlider } from "@blakesteve/roster";
+
+<RangeSlider
+  label="Price"
+  min={0}
+  max={500}
+  step={5}
+  value={price}
+  onChange={setPrice}
+  formatValue={(v) => `$${v}`}
+/>;
+```
+
+- **It starts at the whole range**, `[min, max]`, unless `defaultValue`
+  says otherwise. `value` is `[low, high]`, always low first: a pair given
+  the wrong way round is shown the right way. There's no not-set state; the
+  whole range is what "any" looks like.
+- **Each thumb is a slider** to the keyboard and a screen reader: its own
+  tab stop, named for the slider and its end ("Price Minimum", "Price
+  Maximum", both in `labels`), whose `aria-valuemin` and `aria-valuemax`
+  run to the other thumb. The thumbs meet and never cross: End on the low
+  thumb takes it to the high one. The whole is a group named by the label.
+- **Pointer.** A press takes the nearer thumb: a tap on the track moves it
+  there, a drag carries it. Two thumbs on one spot part by the way the drag
+  first moves, up the range taking the high one. Touch, the resting
+  pointer, the second finger and the keys work as `Slider`'s do.
+- **Snap points** put a bead on the rail and a `Chip` under it, which does
+  what a tap on its mark does: moves the nearer thumb there (halfway, the
+  low one). A chip shows as pressed while either thumb is on it.
+- **The number** beside the label shows both, "$120 – $340"
+  (`labels.range`). Each thumb says its own value with the nearest snap
+  point's name.
+- **Form.** Under `name` both values are submitted, low then high, as a
+  multiple select's are: read them with `formData.getAll(name)`.
+- **Focus, targets, motion, RTL and look** as `Slider`'s: the ring is round
+  the focused thumb, each thumb's 44 by 44 target stays on the track at
+  every value.
+
 ### Pagination
 
 Moves through pages of a list, built for a long list browsed on a phone.
@@ -1833,7 +1985,7 @@ function App() {
 | `CollapsibleSection` | Clamps any content (prose, chips, image grids) to a fixed height with a fade and expand/collapse toggle      |
 | `Select`             | Dropdown selector, on the same size scale as `Button` and `Input`                                            |
 | `SegmentBar`         | Proportional horizontal bar divided into colored segments with optional legend (a split, not progress)       |
-| `Skeleton`           | Line, block or circle placeholder at the content's exact size; `SkeletonRegion` sets `aria-busy`              |
+| `Skeleton`           | Line, block or circle placeholder at the content's exact size, shimmering, pulsing or still; `SkeletonRegion` sets `aria-busy` |
 | `Progress`           | Continuous or segmented progress bar: determinate, indeterminate or busy; per-segment state                   |
 | `LoadingDots`        | Three dots for a model generating before its first token; replaced by the text                                |
 | `Stat`               | A figure with its label and, optionally, its source; a valid `<dl>` group, or `semantics="standalone"`       |
@@ -1868,6 +2020,8 @@ function App() {
 | `StepProgress`    | Named steps: a stepper with markers and connectors, or a compact segmented "Step x of y" |
 | `Pullquote`       | A line lifted out of prose, as `<figure>` + `<blockquote>` + `<figcaption>` |
 | `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)) |
 | `Toast`           | Transient floating notice; `Toaster` + the imperative `toast` handle        |
 
 ### Organisms
@@ -1979,6 +2133,32 @@ such as `AvatarStrip`'s `ringClass`, stays exactly as they wrote it.
 
 `npm run build` fails if any unprefixed class reaches `dist/roster.css`.
 
+## Authoring components: cursors
+
+**If it's clickable, it's the pointer.** Every element that does something
+when it's clicked shows `cursor: pointer`, and says so in its classes. A
+browser gives a button the arrow; Tailwind v3's preflight gave it the pointer
+and v4's doesn't, so a `<button>` with no cursor class shows the arrow. Until 5.11.0 the option rows
+in `Select`, `Combobox` and `MultiSelect` showed the arrow while `Menu`'s
+showed the pointer, and `PasswordInput`'s reveal button showed the arrow too.
+
+- A disabled control shows `not-allowed`.
+- A busy one may say so: `Button`'s `loading` shows `progress`.
+- A text field's label keeps the arrow, as a native one does: clicking it puts
+  the caret in the field rather than doing something.
+
+Three things keep another cursor, because they aren't click targets:
+
+- **`Breadcrumbs`' current crumb** is the page you're on, not a link:
+  `default`.
+- **`Tooltip`'s trigger wrapper** isn't necessarily clickable: `default`. A
+  control inside it brings its own pointer.
+- **A drag surface** says what it does: `Carousel`'s track and `Sheet`'s drag
+  handle show `grab`, then `grabbing`.
+
+`src/internal/popups.checks.stories.tsx` reads the computed cursor on a row in
+each popup, with a disabled row as its twin.
+
 ## Development
 
 Storybook is the component playground. Each component has dedicated stories covering all variants, props, and light/dark mode.
@@ -2037,14 +2217,15 @@ anything new. It also fails when a listed class starts emitting, so a fix cannot
 leave a stale entry behind. Run it with `--verbose` to print the list.
 
 Story tests that need the user's own input, a wheel, a mouse drag or a pointer
-resting on something, get it
-from `.storybook/real-input.ts`: Vitest browser commands that drive
-Playwright's mouse, whose events are trusted. A synthetic wheel or pointer
-event never scrolls anything, so "a vertical wheel scrolls the page, not the
-row" can't be tested without them. The commands fail loudly when the pointer
-isn't over their target, rather than letting a wheel land on the page and a
-test pass for the wrong reason. Storybook's own UI has no such input, so those
-steps are skipped there.
+resting on something, get it from `.storybook/real-input.ts`: Vitest browser
+commands that drive Playwright's mouse, whose events are trusted. They run in
+Chromium and in WebKit, where pointer and scroll events differ: WebKit sends a
+pointermove when content scrolls under a resting pointer, and Chromium doesn't.
+A synthetic wheel or pointer event never scrolls anything, so "a vertical wheel
+scrolls the page, not the row" can't be tested without them. The commands fail
+loudly when the pointer isn't over their target, rather than letting a wheel
+land on the page and a test pass for the wrong reason. Storybook's own UI has
+no such input, so those steps are skipped there.
 
 `src/lib/utils.test.ts` pins `cn`. `tailwind-merge` has to be configured with the
 prefix or it stops recognising Roster's classes as utilities and silently
@@ -2073,9 +2254,9 @@ Output in `dist/`:
 
 ### What `meta.json` is for
 
-Consumers read this package to describe it. blakeb.dev's case study takes the
-version from `package.json` and counts components by parsing the exports out of
-`dist/*.d.ts`, so both stay correct on their own.
+Consumers read this package to describe it. A portfolio site's case study takes
+the version from `package.json` and counts components by parsing the exports
+out of `dist/*.d.ts`, so both stay correct on their own.
 
 The test count has no such source. `files` is `["dist"]`, so the suite never
 leaves this repo, and the number on that page was a hand-typed literal that
@@ -2109,7 +2290,7 @@ like a file count but counts `describe` blocks — 166 against 92 real files.
 Pull requests are welcome. Please:
 
 1. Open an issue or discussion first for significant changes
-2. Follow the existing code style (CVA variants, forwardRef, Storybook stories, unit tests)
+2. Follow the existing code style (CVA variants, forwardRef, Storybook stories, unit tests) and the authoring rules above: the `rst:` prefix and cursors
 3. Fill out the pull request template checklist before requesting review
 
 ## License

package/dist/components/atoms/Button/button-variants.js

@@ -65,7 +65,7 @@ const e = /* @__PURE__ */ r(
       // Translucent rather than a solid tint step. A ghost button sits directly
       // on the host's own background, and a solid `bg-*-50` silently disappears
       // wherever that background happens to equal the step it names — which is
-      // exactly what happened to blakeb.dev, whose paper is the same value it
+      // exactly what happened to one app, whose paper is the same value it
       // maps `--roster-gray-100` to. An alpha wash darkens or lightens whatever
       // is actually behind it, so it reads on any surface.
       { variant: "ghost", colorScheme: "primary", className: "rst:text-primary-600 rst:hover:bg-primary-500/10 rst:dark:text-primary-400 rst:dark:hover:bg-primary-400/15" },

package/dist/components/atoms/Eyebrow/eyebrow-variants.d.ts

@@ -1,7 +1,7 @@
 /**
  * The small uppercase label that sits above a heading, beside a rule, or as a
- * column head. Extracted from blakeb.dev, where it was hand-rolled as a CSS
- * class and used 26 times before anyone noticed it was a component.
+ * column head. Extracted from a portfolio site, where it was hand-rolled as a
+ * CSS class and used 26 times before anyone noticed it was a component.
  *
  * Monospace on purpose: at this size, tracked-out uppercase reads as chrome
  * rather than prose, which is the whole job.

package/dist/components/atoms/Input/input-variants.js

@@ -49,7 +49,7 @@ const s = /* @__PURE__ */ r(
       },
       /* Deliberately the same three heights as Button: h-9 / h-10 / h-11.
          Input was a fixed 42px, which agreed with Button at no size at all, so
-         a field beside a submit button never lined up. retrospect gave up and
+         a field beside a submit button never lined up. One app gave up and
          kept a raw <input> pinned to h-11. */
       size: {
         sm: "rst:h-9 rst:px-3",

package/dist/components/atoms/PasswordInput/PasswordInput.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),j=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),c=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),a=require("../../../lib/utils.cjs"),S=require("../Input/Input.cjs"),u=i.forwardRef(({revealable:l=!0,defaultRevealed:d=!1,revealed:r,onRevealChange:p,showLabel:y="Show password",hideLabel:f="Hide password",disabled:e,variant:m,error:w,errorMessage:h,className:v,...x},g)=>{const[I,q]=i.useState(d),o=r!==void 0,t=o?r:I,b=()=>{const n=!t;o||q(n),p?.(n)};return s.jsx(S.Input,{ref:g,type:t?"text":"password",disabled:e,variant:m,error:w,errorMessage:h,className:a.cn("rst:[&_input::-ms-reveal]:hidden",v),endIcon:l?s.jsx("button",{type:"button",onClick:b,disabled:e,"aria-label":t?f:y,"aria-pressed":t,className:a.cn("rst:-m-1 rst:flex rst:items-center rst:rounded-sm rst:p-1 rst:transition-opacity","rst:opacity-70 rst:hover:opacity-100","rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",e&&"rst:cursor-not-allowed rst:opacity-40 rst:hover:opacity-40"),children:s.jsx(j.FontAwesomeIcon,{icon:t?c.faEyeSlash:c.faEye,className:"rst:h-4 rst:w-4","aria-hidden":"true"})}):void 0,...x})});u.displayName="PasswordInput";exports.PasswordInput=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),j=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),c=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),a=require("../../../lib/utils.cjs"),S=require("../Input/Input.cjs"),u=i.forwardRef(({revealable:l=!0,defaultRevealed:d=!1,revealed:r,onRevealChange:p,showLabel:y="Show password",hideLabel:f="Hide password",disabled:s,variant:m,error:w,errorMessage:h,className:v,...x},g)=>{const[I,q]=i.useState(d),o=r!==void 0,t=o?r:I,b=()=>{const n=!t;o||q(n),p?.(n)};return e.jsx(S.Input,{ref:g,type:t?"text":"password",disabled:s,variant:m,error:w,errorMessage:h,className:a.cn("rst:[&_input::-ms-reveal]:hidden",v),endIcon:l?e.jsx("button",{type:"button",onClick:b,disabled:s,"aria-label":t?f:y,"aria-pressed":t,className:a.cn("rst:-m-1 rst:flex rst:items-center rst:rounded-sm rst:p-1 rst:transition-opacity","rst:opacity-70 rst:hover:opacity-100","rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",s?"rst:cursor-not-allowed rst:opacity-40 rst:hover:opacity-40":"rst:cursor-pointer"),children:e.jsx(j.FontAwesomeIcon,{icon:t?c.faEyeSlash:c.faEye,className:"rst:h-4 rst:w-4","aria-hidden":"true"})}):void 0,...x})});u.displayName="PasswordInput";exports.PasswordInput=u;

package/dist/components/atoms/PasswordInput/PasswordInput.js

@@ -10,8 +10,8 @@ const C = i.forwardRef(
     revealable: c = !0,
     defaultRevealed: l = !1,
     revealed: s,
-    onRevealChange: d,
-    showLabel: p = "Show password",
+    onRevealChange: p,
+    showLabel: d = "Show password",
     hideLabel: m = "Hide password",
     disabled: r,
     variant: u,
@@ -22,7 +22,7 @@ const C = i.forwardRef(
   }, v) => {
     const [g, x] = i.useState(l), e = s !== void 0, t = e ? s : g, I = () => {
       const n = !t;
-      e || x(n), d?.(n);
+      e || x(n), p?.(n);
     };
     return /* @__PURE__ */ o(
       _,
@@ -40,13 +40,13 @@ const C = i.forwardRef(
             type: "button",
             onClick: I,
             disabled: r,
-            "aria-label": t ? m : p,
+            "aria-label": t ? m : d,
             "aria-pressed": t,
             className: a(
               "rst:-m-1 rst:flex rst:items-center rst:rounded-sm rst:p-1 rst:transition-opacity",
               "rst:opacity-70 rst:hover:opacity-100",
               "rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",
-              r && "rst:cursor-not-allowed rst:opacity-40 rst:hover:opacity-40"
+              r ? "rst:cursor-not-allowed rst:opacity-40 rst:hover:opacity-40" : "rst:cursor-pointer"
             ),
             children: /* @__PURE__ */ o(
               N,

package/dist/components/atoms/Select/select-variants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-ui rst:relative rst:flex rst:w-full rst:cursor-pointer rst:disabled:cursor-not-allowed rst:disabled:opacity-50 rst:items-center rst:rounded-md rst:h-10 rst:pl-4 rst:pr-10 rst:text-left rst:text-sm rst:font-medium rst:elevation-control rst:ring rst:ring-inset rst:transition-all rst:focus:outline-hidden rst:focus-visible:ring-[length:calc(var(--roster-border-width,1px)+1px)] rst:focus-visible:ring-ring",{variants:{variant:{white:"rst:bg-white rst:text-gray-900 rst:ring-gray-300 rst:hover:bg-gray-50 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:ring-gray-700 rst:dark:hover:bg-gray-700",soft:"rst:bg-gray-100 rst:text-gray-900 rst:ring-[var(--roster-control-border)] rst:hover:bg-gray-200 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:hover:bg-gray-700",slate:"rst:bg-gray-700 rst:text-gray-100 rst:ring-transparent rst:hover:bg-gray-600 rst:dark:bg-gray-900 rst:dark:text-gray-100 rst:dark:hover:bg-gray-800",outline:"rst:bg-[var(--roster-control-bg)] rst:text-[var(--roster-control-text)] rst:ring-[color:var(--roster-control-border)]",ghost:"rst:bg-transparent rst:text-gray-700 rst:ring-transparent rst:hover:bg-gray-100 rst:hover:text-gray-900 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800 rst:dark:hover:text-gray-100"},size:{sm:"rst:h-9 rst:pl-3 rst:pr-9",default:"rst:h-10 rst:pl-4 rst:pr-10",lg:"rst:h-11 rst:pl-4 rst:pr-10"},error:{true:"rst:ring-error-500 rst:text-error-600 rst:focus-visible:ring-error-500 rst:dark:ring-error-500 rst:dark:text-error-400 rst:dark:focus-visible:ring-error-400",false:""}},defaultVariants:{variant:"outline",size:"default",error:!1}}),s=r.cva("rst:text-sm rst:group rst:relative rst:cursor-default rst:select-none rst:py-2.5 rst:pl-4 rst:pr-9 rst:transition-colors rst:text-inherit rst:data-focus:bg-primary-100 rst:data-focus:text-primary-900 rst:dark:data-focus:bg-primary-900/30 rst:dark:data-focus:text-primary-100 rst:data-selected:bg-gray-50 rst:dark:data-selected:bg-gray-700/50 rst:data-disabled:opacity-50 rst:data-disabled:cursor-not-allowed",{variants:{size:{sm:"rst:py-2 rst:pl-3 rst:pr-8",default:"rst:py-2.5 rst:pl-4 rst:pr-9",lg:"rst:py-2.5 rst:pl-4 rst:pr-9"}},defaultVariants:{size:"default"}});exports.selectOptionVariants=s;exports.selectTriggerVariants=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-ui rst:relative rst:flex rst:w-full rst:cursor-pointer rst:disabled:cursor-not-allowed rst:disabled:opacity-50 rst:items-center rst:rounded-md rst:h-10 rst:pl-4 rst:pr-10 rst:text-left rst:text-sm rst:font-medium rst:elevation-control rst:ring rst:ring-inset rst:transition-all rst:focus:outline-hidden rst:focus-visible:ring-[length:calc(var(--roster-border-width,1px)+1px)] rst:focus-visible:ring-ring",{variants:{variant:{white:"rst:bg-white rst:text-gray-900 rst:ring-gray-300 rst:hover:bg-gray-50 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:ring-gray-700 rst:dark:hover:bg-gray-700",soft:"rst:bg-gray-100 rst:text-gray-900 rst:ring-[var(--roster-control-border)] rst:hover:bg-gray-200 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:hover:bg-gray-700",slate:"rst:bg-gray-700 rst:text-gray-100 rst:ring-transparent rst:hover:bg-gray-600 rst:dark:bg-gray-900 rst:dark:text-gray-100 rst:dark:hover:bg-gray-800",outline:"rst:bg-[var(--roster-control-bg)] rst:text-[var(--roster-control-text)] rst:ring-[color:var(--roster-control-border)]",ghost:"rst:bg-transparent rst:text-gray-700 rst:ring-transparent rst:hover:bg-gray-100 rst:hover:text-gray-900 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800 rst:dark:hover:text-gray-100"},size:{sm:"rst:h-9 rst:pl-3 rst:pr-9",default:"rst:h-10 rst:pl-4 rst:pr-10",lg:"rst:h-11 rst:pl-4 rst:pr-10"},error:{true:"rst:ring-error-500 rst:text-error-600 rst:focus-visible:ring-error-500 rst:dark:ring-error-500 rst:dark:text-error-400 rst:dark:focus-visible:ring-error-400",false:""}},defaultVariants:{variant:"outline",size:"default",error:!1}}),s=r.cva("rst:data-focus:ring-2 rst:data-focus:ring-inset rst:data-focus:ring-ring rst:forced-colors:data-focus:outline-solid rst:forced-colors:data-focus:outline-2 rst:forced-colors:data-focus:-outline-offset-2 rst:text-sm rst:group rst:relative rst:cursor-pointer rst:select-none rst:py-2.5 rst:pl-4 rst:pr-9 rst:transition-colors rst:text-inherit rst:data-focus:bg-primary-100 rst:data-focus:text-primary-900 rst:dark:data-focus:bg-primary-900/30 rst:dark:data-focus:text-primary-100 rst:data-selected:bg-gray-50 rst:dark:data-selected:bg-gray-700/50 rst:data-disabled:opacity-50 rst:data-disabled:cursor-not-allowed",{variants:{size:{sm:"rst:py-2 rst:pl-3 rst:pr-8",default:"rst:py-2.5 rst:pl-4 rst:pr-9",lg:"rst:py-2.5 rst:pl-4 rst:pr-9"}},defaultVariants:{size:"default"}});exports.selectOptionVariants=s;exports.selectTriggerVariants=t;

package/dist/components/atoms/Select/select-variants.js

@@ -76,8 +76,17 @@ const s = /* @__PURE__ */ r(
        `text-sm` lives here rather than on the popup, and carries no `sm:`. The
        popup used to set `text-base sm:text-sm`, which made a menu row 44px on
        mobile and 40px from `sm` up: the exact breakpoint-dependent geometry this
-       change removed from the trigger, still alive one element away. */
-  "rst:text-sm rst:group rst:relative rst:cursor-default rst:select-none rst:py-2.5 rst:pl-4 rst:pr-9 rst:transition-colors rst:text-inherit rst:data-focus:bg-primary-100 rst:data-focus:text-primary-900 rst:dark:data-focus:bg-primary-900/30 rst:dark:data-focus:text-primary-100 rst:data-selected:bg-gray-50 rst:dark:data-selected:bg-gray-700/50 rst:data-disabled:opacity-50 rst:data-disabled:cursor-not-allowed",
+       change removed from the trigger, still alive one element away.
+  
+       `cursor-pointer`: a row is a click target, as Menu's are.
+  
+       Focus is the tint and an inset ring in the focus token. The tint alone
+       measures under 1.2:1 against the panel in both themes, on the default
+       surface and a consumer's; the ring follows the token a consumer tunes
+       against their own surfaces, and holds 3:1 on any of them. Headless UI's
+       `data-focus` comes from the keys and the pointer alike, so the ring shows
+       on hover too. In forced colors, which drop both, focus is an outline. */
+  "rst:data-focus:ring-2 rst:data-focus:ring-inset rst:data-focus:ring-ring rst:forced-colors:data-focus:outline-solid rst:forced-colors:data-focus:outline-2 rst:forced-colors:data-focus:-outline-offset-2 rst:text-sm rst:group rst:relative rst:cursor-pointer rst:select-none rst:py-2.5 rst:pl-4 rst:pr-9 rst:transition-colors rst:text-inherit rst:data-focus:bg-primary-100 rst:data-focus:text-primary-900 rst:dark:data-focus:bg-primary-900/30 rst:dark:data-focus:text-primary-100 rst:data-selected:bg-gray-50 rst:dark:data-selected:bg-gray-700/50 rst:data-disabled:opacity-50 rst:data-disabled:cursor-not-allowed",
   {
     variants: {
       size: {

package/dist/components/atoms/Skeleton/Skeleton.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("react"),c=require("../../../lib/utils.cjs"),k={sm:"rst:text-xs",md:"rst:text-sm",lg:"rst:text-base",inherit:""},f={xs:"rst:h-6 rst:w-6",sm:"rst:h-8 rst:w-8",md:"rst:h-10 rst:w-10",lg:"rst:h-12 rst:w-12",xl:"rst:h-16 rst:w-16"},b={sm:"rst:rounded-sm",md:"rst:rounded-md",lg:"rst:rounded-lg",xl:"rst:rounded-xl",full:"rst:rounded-full"},h="rst:animate-skeleton rst:forced-colors:outline-solid rst:forced-colors:outline-1";function S({shape:s="line",size:r,lines:a=1,width:e,height:u,radius:i,className:l}){if(s==="circle"){const o=r&&r in f?r:"md";return t.jsx("span",{"aria-hidden":"true",className:c.cn("rst:block rst:shrink-0 rst:rounded-full rst:border rst:border-transparent",f[o],h,l),"data-skeleton":"circle"})}if(s==="block")return t.jsx("span",{"aria-hidden":"true",className:c.cn("rst:block rst:w-full",b[i??"lg"],h,l),style:{height:u??"8rem",width:e},"data-skeleton":"block"});const m=r&&r in k?r:"md",n=Math.max(1,Math.floor(a)),j=o=>{const d=o===n-1;return t.jsxs("span",{className:c.cn("rst:relative rst:block",n>1&&!d&&"rst:w-full"),style:{width:n>1?d?e??"60%":void 0:e},children:[" ",t.jsx("span",{className:c.cn("rst:absolute rst:inset-x-0 rst:top-1/2 rst:h-[0.7em] rst:-translate-y-1/2",b[i??"sm"],h)})]},o)};return t.jsx("span",{"aria-hidden":"true",className:c.cn("rst:block",k[m],l),"data-skeleton":"line",children:Array.from({length:n},(o,d)=>j(d))})}function g({loading:s,skeleton:r,label:a="Loading",announce:e=!0,children:u,className:i}){const[l,m]=x.useState("");return x.useEffect(()=>{const n=setTimeout(()=>m(s&&e?a:""),s?50:0);return()=>clearTimeout(n)},[s,a,e]),t.jsxs(t.Fragment,{children:[t.jsx("span",{role:"status",className:"rst:sr-only","data-skeleton-status":"",children:l}),t.jsx("div",{"aria-busy":s||void 0,className:i,"data-skeleton-region":s?"loading":"ready",children:s?t.jsx("div",{"aria-hidden":"true",children:r}):u})]})}exports.Skeleton=S;exports.SkeletonRegion=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("react"),i=require("../../../lib/utils.cjs"),b={sm:"rst:text-xs",md:"rst:text-sm",lg:"rst:text-base",inherit:""},j={xs:"rst:h-6 rst:w-6",sm:"rst:h-8 rst:w-8",md:"rst:h-10 rst:w-10",lg:"rst:h-12 rst:w-12",xl:"rst:h-16 rst:w-16"},p={sm:"rst:rounded-sm",md:"rst:rounded-md",lg:"rst:rounded-lg",xl:"rst:rounded-xl",full:"rst:rounded-full"},v="rst:rounded-skeleton",y={shimmer:"rst:animate-skeleton rst:forced-colors:outline-solid rst:forced-colors:outline-1",pulse:"rst:animate-skeleton-pulse rst:forced-colors:outline-solid rst:forced-colors:outline-1 rst:forced-colors:animate-none",none:"rst:skeleton-fill rst:forced-colors:outline-solid rst:forced-colors:outline-1"},S=d.createContext(void 0);function C({shape:e="line",size:s,lines:a=1,width:r,height:h,radius:n,animation:x,className:o}){const f=d.useContext(S),l=y[x??f??"shimmer"];if(e==="circle"){const c=s&&s in j?s:"md";return t.jsx("span",{"aria-hidden":"true",className:i.cn("rst:block rst:shrink-0 rst:rounded-full rst:border rst:border-transparent",j[c],l,o),"data-skeleton":"circle"})}if(e==="block")return t.jsx("span",{"aria-hidden":"true",className:i.cn("rst:block rst:w-full",n?p[n]:v,l,o),style:{height:h??"8rem",width:r},"data-skeleton":"block"});const k=s&&s in b?s:"md",u=Math.max(1,Math.floor(a)),g=c=>{const m=c===u-1;return t.jsxs("span",{className:i.cn("rst:relative rst:block",u>1&&!m&&"rst:w-full"),style:{width:u>1?m?r??"60%":void 0:r},children:[" ",t.jsx("span",{className:i.cn("rst:absolute rst:inset-x-0 rst:top-1/2 rst:h-[0.7em] rst:-translate-y-1/2",p[n??"sm"],l)})]},c)};return t.jsx("span",{"aria-hidden":"true",className:i.cn("rst:block",b[k],o),"data-skeleton":"line",children:Array.from({length:u},(c,m)=>g(m))})}function I({loading:e,skeleton:s,label:a="Loading",announce:r=!0,animation:h,children:n,className:x}){const o=d.useContext(S),[f,l]=d.useState("");return d.useEffect(()=>{const k=setTimeout(()=>l(e&&r?a:""),e?50:0);return()=>clearTimeout(k)},[e,a,r]),t.jsxs(t.Fragment,{children:[t.jsx("span",{role:"status",className:"rst:sr-only","data-skeleton-status":"",children:f}),t.jsx("div",{"aria-busy":e||void 0,className:x,"data-skeleton-region":e?"loading":"ready",children:e?t.jsx(S.Provider,{value:h??o,children:t.jsx("div",{"aria-hidden":"true",children:s})}):n})]})}exports.Skeleton=C;exports.SkeletonRegion=I;

package/dist/components/atoms/Skeleton/Skeleton.d.ts

@@ -24,6 +24,8 @@ declare const RADIUS: {
     readonly xl: "rst:rounded-xl";
     readonly full: "rst:rounded-full";
 };
+/** How a skeleton moves while it waits. */
+export type SkeletonAnimation = "shimmer" | "pulse" | "none";
 export interface SkeletonProps {
     /**
      * - `"line"`: a line of text, one line box tall at its `size`.
@@ -42,8 +44,20 @@ export interface SkeletonProps {
     width?: CSSProperties["width"];
     /** A block's height. */
     height?: CSSProperties["height"];
-    /** A block's corners, from the radius scale. */
+    /**
+     * A block's corners, from the radius scale. Without it a block reads
+     * `--roster-skeleton-radius`, which defaults to `lg`. A line's corners are
+     * `sm` unless this says otherwise; a circle is always round.
+     */
     radius?: keyof typeof RADIUS;
+    /**
+     * `"shimmer"` (the default): a highlight sweeps across the fill. `"pulse"`:
+     * the fill fades and returns, at `--roster-skeleton-pulse-duration` and down
+     * to `--roster-skeleton-pulse-opacity`. `"none"`: the fill holds still.
+     * Under reduced motion both movements stop. Inside a `SkeletonRegion`, it
+     * defaults to the region's.
+     */
+    animation?: SkeletonAnimation;
     className?: string;
 }
 /**
@@ -53,7 +67,7 @@ export interface SkeletonProps {
  * isn't there yet. The region it stands in for says it's busy; use
  * `SkeletonRegion`, which does that, or set `aria-busy` on it yourself.
  */
-declare function Skeleton({ shape, size, lines, width, height, radius, className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function Skeleton({ shape, size, lines, width, height, radius, animation, className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
 export interface SkeletonRegionProps {
     /** While true, the skeleton shows and the region says it's busy. */
     loading: boolean;
@@ -66,6 +80,8 @@ export interface SkeletonRegionProps {
      * together, a grid of cards say, or wrap them in one region instead.
      */
     announce?: boolean;
+    /** How the skeletons inside move, unless one says otherwise: see `Skeleton`. */
+    animation?: SkeletonAnimation;
     children?: ReactNode;
     className?: string;
 }
@@ -75,5 +91,5 @@ export interface SkeletonRegionProps {
  * When `loading` turns false the content replaces the skeleton in the same
  * box, so a skeleton drawn at the content's size means nothing moves.
  */
-declare function SkeletonRegion({ loading, skeleton, label, announce, children, className }: SkeletonRegionProps): import("react/jsx-runtime").JSX.Element;
+declare function SkeletonRegion({ loading, skeleton, label, announce, animation, children, className }: SkeletonRegionProps): import("react/jsx-runtime").JSX.Element;
 export { Skeleton, SkeletonRegion };