@pearpages/pulp-react 0.2.1 → 0.3.0

package/dist/chunk-Y7KC2FDU.js

@@ -0,0 +1,88 @@
+import { renderAsChild } from './chunk-QJG5ILK5.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { useId, useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/segmented-control/SegmentedControl.module.css
+var SegmentedControl_default = {
+  root: "SegmentedControl_root",
+  list: "SegmentedControl_list",
+  option: "SegmentedControl_option",
+  input: "SegmentedControl_input",
+  segment: "SegmentedControl_segment",
+  icon: "SegmentedControl_icon"
+};
+function SegmentedControl({
+  label,
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  name,
+  look = "segmented",
+  size = "md",
+  fullWidth = false,
+  disabled = false,
+  className,
+  ref,
+  ...rest
+}) {
+  const generated = useId();
+  const [own, setOwn] = useState(defaultValue);
+  const selected = value ?? own;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      role: "radiogroup",
+      "aria-label": label,
+      "aria-disabled": disabled || void 0,
+      className: classes(SegmentedControl_default.root, className),
+      "data-look": look,
+      "data-size": size,
+      "data-full-width": fullWidth ? "" : void 0,
+      children: options.map((option) => /* @__PURE__ */ jsxs("label", { className: SegmentedControl_default.option, "data-selected": option.value === selected ? "" : void 0, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            className: SegmentedControl_default.input,
+            name: name ?? generated,
+            value: option.value,
+            checked: option.value === selected,
+            disabled: disabled || option.disabled,
+            onChange: () => {
+              if (value === void 0) setOwn(option.value);
+              onValueChange?.(option.value);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: SegmentedControl_default.segment, children: [
+          option.icon != null && /* @__PURE__ */ jsx("span", { className: SegmentedControl_default.icon, "aria-hidden": "true", children: option.icon }),
+          option.label
+        ] })
+      ] }, option.value))
+    }
+  );
+}
+function SegmentedControlNav({ label, look = "segmented", size = "md", fullWidth = false, className, ref, children, ...rest }) {
+  return /* @__PURE__ */ jsx("nav", { ...rest, ref, "aria-label": label, className: classes(SegmentedControl_default.root, className), "data-look": look, "data-size": size, "data-full-width": fullWidth ? "" : void 0, children: /* @__PURE__ */ jsx("ul", { role: "list", className: SegmentedControl_default.list, children }) });
+}
+function SegmentedControlNavItem({ current = false, asChild = false, className, ref, children, ...rest }) {
+  const segment = classes(SegmentedControl_default.segment, className);
+  const ariaCurrent = current ? "page" : void 0;
+  return /* @__PURE__ */ jsx("li", { className: SegmentedControl_default.option, "data-selected": current ? "" : void 0, children: asChild ? (
+    // eslint-disable-next-line react-hooks/refs -- forwarded, not read
+    renderAsChild("SegmentedControl.NavItem", children, { ...rest, ref, className: segment, "aria-current": ariaCurrent })
+  ) : /* @__PURE__ */ jsx("a", { ...rest, ref, className: segment, "aria-current": ariaCurrent, children }) });
+}
+SegmentedControl.displayName = "SegmentedControl";
+SegmentedControlNav.displayName = "SegmentedControl.Nav";
+SegmentedControlNavItem.displayName = "SegmentedControl.NavItem";
+SegmentedControl.Nav = SegmentedControlNav;
+SegmentedControl.NavItem = SegmentedControlNavItem;
+
+export { SegmentedControl };
+//# sourceMappingURL=chunk-Y7KC2FDU.js.map
+//# sourceMappingURL=chunk-Y7KC2FDU.js.map

package/dist/chunk-Y7KC2FDU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segmented-control/SegmentedControl.module.css","../src/segmented-control/SegmentedControl.tsx"],"names":["root","list","option","input","segment","icon"],"mappings":"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","file":"chunk-Y7KC2FDU.js","sourcesContent":["/* Every value is a token: --segmented-control-* in packages/tokens/tokens/component/segmented-control.json */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --_height: var(--segmented-control-height-md);\n    --_padding: var(--segmented-control-padding-x-md);\n\n    display: inline-flex;\n    box-sizing: border-box;\n    max-inline-size: 100%;\n    color: var(--segmented-control-fg);\n    font-family: var(--font-family-body);\n    font-size: var(--segmented-control-font-size-md);\n    font-weight: var(--segmented-control-weight);\n    line-height: 1;\n\n    &[data-size='sm'] {\n      --_height: var(--segmented-control-height-sm);\n      --_padding: var(--segmented-control-padding-x-sm);\n\n      font-size: var(--segmented-control-font-size-sm);\n    }\n\n    &[data-look='segmented'] {\n      padding: var(--segmented-control-inset);\n      border: var(--segmented-control-border-width) solid var(--segmented-control-track-border);\n      border-radius: var(--segmented-control-track-radius);\n      background: var(--segmented-control-track-bg);\n    }\n\n    &[data-look='chips'] {\n      flex-wrap: wrap;\n      gap: var(--segmented-control-gap);\n    }\n\n    &[data-full-width][data-look='segmented'] {\n      display: flex;\n    }\n\n    &[aria-disabled='true'] {\n      opacity: 0.55;\n    }\n  }\n\n  /* The Nav flavour: the list is the flex row the root is for the radios. */\n  .list {\n    display: contents;\n  }\n\n  .option {\n    display: inline-flex;\n    position: relative;\n    min-inline-size: 0;\n\n    .root[data-full-width] & {\n      flex: 1;\n    }\n  }\n\n  /* Visually hidden, still focusable and still in the form: the segment draws its state. */\n  .input {\n    position: absolute;\n    inset: 0;\n    inline-size: 100%;\n    block-size: 100%;\n    margin: 0;\n    opacity: 0;\n    cursor: pointer;\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  .segment {\n    display: inline-flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    gap: var(--segmented-control-gap);\n    box-sizing: border-box;\n    min-block-size: calc(var(--_height) - 2 * var(--segmented-control-inset) - 2 * var(--segmented-control-border-width));\n    padding-block: 0;\n    padding-inline: var(--_padding);\n    border: var(--segmented-control-border-width) solid transparent;\n    border-radius: var(--segmented-control-segment-radius);\n    color: inherit;\n    text-decoration: none;\n    white-space: nowrap;\n    transition:\n      background-color var(--motion-duration-fast) var(--motion-easing-standard),\n      color var(--motion-duration-fast) var(--motion-easing-standard);\n\n    .root[data-look='chips'] & {\n      min-block-size: var(--_height);\n      border-color: var(--segmented-control-chip-border);\n      border-radius: var(--segmented-control-chip-radius);\n      background: var(--segmented-control-chip-bg);\n    }\n  }\n\n  .option:hover .segment,\n  a.segment:hover {\n    color: var(--segmented-control-fg-hover);\n  }\n\n  .option[data-selected] .segment {\n    border-color: var(--segmented-control-segment-selected-border);\n    background: var(--segmented-control-segment-selected-bg);\n    box-shadow: var(--segmented-control-segment-selected-shadow);\n    color: var(--segmented-control-segment-selected-fg);\n\n    .root[data-look='chips'] & {\n      border-color: var(--segmented-control-chip-selected-border);\n      background: var(--segmented-control-chip-selected-bg);\n      box-shadow: none;\n      color: var(--segmented-control-chip-selected-fg);\n    }\n  }\n\n  .input:focus-visible + .segment,\n  a.segment:focus-visible {\n    outline: var(--segmented-control-focus-ring-width) solid var(--segmented-control-focus-ring);\n    outline-offset: var(--segmented-control-focus-ring-offset);\n  }\n\n  .input:disabled + .segment {\n    opacity: 0.55;\n  }\n\n  .icon {\n    display: inline-flex;\n  }\n}\n","import { useId, useState, type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { renderAsChild } from '../internal/asChild';\nimport { classes } from '../internal/classes';\nimport styles from './SegmentedControl.module.css';\n\nexport type SegmentedControlSize = 'sm' | 'md';\nexport type SegmentedControlLook = 'segmented' | 'chips';\n\nexport interface SegmentedControlOption<T extends string = string> {\n  value: T;\n  label: ReactNode;\n  /** Decorative: hidden from assistive technology, so the label must stand on its own. */\n  icon?: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<T extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> {\n  /** Names the group for assistive technology. Not rendered; label it visibly with `aria-labelledby` instead when there is a heading. */\n  label?: string;\n  options: ReadonlyArray<SegmentedControlOption<T>>;\n  /** Controlled selected value. */\n  value?: T;\n  /** Initially selected value when uncontrolled. */\n  defaultValue?: T;\n  onValueChange?: (value: T) => void;\n  /** Form field name shared by the radios. Generated when omitted. */\n  name?: string;\n  /** `segmented` is one track with a raised thumb; `chips` is separate pills that wrap. @default 'segmented' */\n  look?: SegmentedControlLook;\n  /** @default 'md' */\n  size?: SegmentedControlSize;\n  /** Segments share the container's width equally. `segmented` look only. @default false */\n  fullWidth?: boolean;\n  disabled?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * One choice out of a few, all visible, switching what is shown in place: a\n * view mode, a unit, a sort order. Generic over a string union, so `value`\n * and `onValueChange` are typed by the options. For links that navigate to\n * another page use `SegmentedControl.Nav`, which looks the same and is a `nav`.\n *\n * @status experimental\n * @category Forms\n * @accessibility A `radiogroup` of native radio inputs, exactly as RadioGroup: the keyboard is the browser's own (arrows move and select, Tab enters on the checked radio and leaves the group), nothing is re-implemented. Name the group with `label` or `aria-labelledby`. The inputs are visually hidden, not removed, so the focus ring is drawn on the visible segment and the control takes part in a form (`name`). Icons are decorative.\n * @do Use it for two to five short options that change the view in place.\n * @do Use `SegmentedControl.Nav` when each option is a URL.\n * @dont Use it for on/off; that is a Switch. For several at once, toggle Chips.\n * @dont Use it for a form question with longer labels or a description; that is a RadioGroup.\n */\nexport function SegmentedControl<T extends string = string>({\n  label,\n  options,\n  value,\n  defaultValue,\n  onValueChange,\n  name,\n  look = 'segmented',\n  size = 'md',\n  fullWidth = false,\n  disabled = false,\n  className,\n  ref,\n  ...rest\n}: SegmentedControlProps<T>) {\n  const generated = useId();\n  const [own, setOwn] = useState<T | undefined>(defaultValue);\n  const selected = value ?? own;\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      role=\"radiogroup\"\n      aria-label={label}\n      aria-disabled={disabled || undefined}\n      className={classes(styles.root, className)}\n      data-look={look}\n      data-size={size}\n      data-full-width={fullWidth ? '' : undefined}\n    >\n      {options.map((option) => (\n        <label key={option.value} className={styles.option} data-selected={option.value === selected ? '' : undefined}>\n          <input\n            type=\"radio\"\n            className={styles.input}\n            name={name ?? generated}\n            value={option.value}\n            checked={option.value === selected}\n            disabled={disabled || option.disabled}\n            onChange={() => {\n              if (value === undefined) setOwn(option.value);\n              onValueChange?.(option.value);\n            }}\n          />\n          <span className={styles.segment}>\n            {option.icon != null && (\n              <span className={styles.icon} aria-hidden=\"true\">\n                {option.icon}\n              </span>\n            )}\n            {option.label}\n          </span>\n        </label>\n      ))}\n    </div>\n  );\n}\n\nexport interface SegmentedControlNavProps extends HTMLAttributes<HTMLElement> {\n  /** Names the landmark (\"Feed view\"). Required: a page with several `nav`s needs them told apart. */\n  label: string;\n  /** @default 'segmented' */\n  look?: SegmentedControlLook;\n  /** @default 'md' */\n  size?: SegmentedControlSize;\n  /** @default false */\n  fullWidth?: boolean;\n  ref?: Ref<HTMLElement>;\n  /** `SegmentedControl.NavItem`s. */\n  children: ReactNode;\n}\n\n/**\n * The same look for links that navigate: a labelled `nav` with a list of\n * links, the current one marked `aria-current=\"page\"`. Not a radiogroup and\n * not tabs: following a link loads another page, and a screen reader user\n * should be told so.\n */\nfunction SegmentedControlNav({ label, look = 'segmented', size = 'md', fullWidth = false, className, ref, children, ...rest }: SegmentedControlNavProps) {\n  return (\n    <nav {...rest} ref={ref} aria-label={label} className={classes(styles.root, className)} data-look={look} data-size={size} data-full-width={fullWidth ? '' : undefined}>\n      <ul role=\"list\" className={styles.list}>\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\nexport interface SegmentedControlNavItemProps<E extends HTMLElement = HTMLAnchorElement> extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** This link is the page being shown: `aria-current=\"page\"` and the selected look. @default false */\n  current?: boolean;\n  /** Render the single child instead of an `a`: a router's link component. @default false */\n  asChild?: boolean;\n  ref?: Ref<E>;\n  children: ReactNode;\n}\n\n/** One link of a `SegmentedControl.Nav`. With `asChild`, the router's own link takes the styles. */\nfunction SegmentedControlNavItem<E extends HTMLElement = HTMLAnchorElement>({ current = false, asChild = false, className, ref, children, ...rest }: SegmentedControlNavItemProps<E>) {\n  const segment = classes(styles.segment, className);\n  const ariaCurrent = current ? ('page' as const) : undefined;\n  return (\n    <li className={styles.option} data-selected={current ? '' : undefined}>\n      {asChild ? (\n        // eslint-disable-next-line react-hooks/refs -- forwarded, not read\n        renderAsChild('SegmentedControl.NavItem', children, { ...rest, ref, className: segment, 'aria-current': ariaCurrent })\n      ) : (\n        <a {...rest} ref={ref as Ref<HTMLAnchorElement>} className={segment} aria-current={ariaCurrent}>\n          {children}\n        </a>\n      )}\n    </li>\n  );\n}\n\nSegmentedControl.displayName = 'SegmentedControl';\nSegmentedControlNav.displayName = 'SegmentedControl.Nav';\nSegmentedControlNavItem.displayName = 'SegmentedControl.NavItem';\n\nSegmentedControl.Nav = SegmentedControlNav;\nSegmentedControl.NavItem = SegmentedControlNavItem;\n"]}

package/dist/{chunk-P5C2U5ZF.js → chunk-YBECKOVP.js}

@@ -1,4 +1,4 @@
-import { AriaField_default } from './chunk-YUHS5S5Y.js';
+import { AriaField_default } from './chunk-DGIXNUNI.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { Slider as Slider$1, Label, SliderOutput, SliderTrack, SliderFill, SliderThumb, Text } from 'react-aria-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -69,5 +69,5 @@ function Slider({
 Slider.displayName = "Slider";
 
 export { Slider };
-//# sourceMappingURL=chunk-P5C2U5ZF.js.map
-//# sourceMappingURL=chunk-P5C2U5ZF.js.map
+//# sourceMappingURL=chunk-YBECKOVP.js.map
+//# sourceMappingURL=chunk-YBECKOVP.js.map

package/dist/chunk-YBECKOVP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slider/Slider.module.css","../src/slider/Slider.tsx"],"names":["root","header","hidden","output","track","rail","fill","thumb","AriaSlider","AriaLabel","AriaSliderOutput","AriaSliderTrack","AriaSliderFill","AriaSliderThumb","AriaText"],"mappings":"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","file":"chunk-YBECKOVP.js","sourcesContent":["/*\n * Every value is a token (--slider-*); the label and description read\n * --field-*. React Aria positions the thumbs and the fill (its inline\n * values); the rail is the visible track inside a larger pointer target.\n * State: data-orientation and data-disabled on the root; data-dragging,\n * data-hovered, data-focus-visible on a thumb.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --_thumb: var(--slider-thumb-size);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--slider-gap);\n    inline-size: 100%;\n    font-family: var(--slider-font-family);\n\n    &[data-orientation=\"vertical\"] {\n      inline-size: auto;\n      block-size: var(--slider-track-length);\n    }\n\n  }\n\n  .header {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--slider-gap);\n  }\n\n  .hidden {\n    position: absolute;\n    inline-size: var(--size-hairline);\n    block-size: var(--size-hairline);\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  .output {\n    color: var(--slider-output-fg);\n    font-family: var(--slider-output-font-family);\n    font-size: var(--slider-output-font-size);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .track {\n    position: relative;\n    block-size: var(--slider-track-hit-size);\n\n    .root[data-orientation=\"vertical\"] & {\n      inline-size: var(--slider-track-hit-size);\n      block-size: 100%;\n    }\n  }\n\n  /* Disabled dims the track, not the label and output, so the text keeps its contrast. */\n  .root[data-disabled] .track {\n    opacity: 0.55;\n  }\n\n  .rail {\n    position: absolute;\n    inset-block-start: 50%;\n    inline-size: 100%;\n    block-size: var(--slider-track-size);\n    overflow: hidden;\n    border-radius: var(--slider-track-radius);\n    background-color: var(--slider-track-bg);\n    translate: 0 -50%;\n\n    .root[data-orientation=\"vertical\"] & {\n      inset-block-start: 0;\n      inset-inline-start: 50%;\n      inline-size: var(--slider-track-size);\n      block-size: 100%;\n      translate: -50% 0;\n    }\n  }\n\n  .fill {\n    position: absolute;\n    block-size: 100%;\n    background-color: var(--slider-fill);\n\n    .root[data-orientation=\"vertical\"] & {\n      inline-size: 100%;\n    }\n  }\n\n  .thumb {\n    inset-block-start: 50%;\n    inline-size: var(--_thumb);\n    block-size: var(--_thumb);\n    border: var(--slider-thumb-border-width) solid var(--slider-thumb-border);\n    border-radius: var(--slider-thumb-radius);\n    background-color: var(--slider-thumb-bg);\n    box-shadow: var(--slider-thumb-shadow);\n    cursor: grab;\n    transition: border-color var(--slider-motion-duration) var(--motion-easing-standard);\n\n    .root[data-orientation=\"vertical\"] & {\n      inset-block-start: auto;\n      inset-inline-start: 50%;\n    }\n\n    &[data-hovered],\n    &[data-dragging] {\n      border-color: var(--slider-thumb-border-hover);\n    }\n\n    &[data-dragging] {\n      cursor: grabbing;\n    }\n\n    &[data-focus-visible] {\n      outline: var(--slider-focus-ring-width) solid var(--slider-focus-ring);\n      outline-offset: var(--slider-focus-ring-offset);\n    }\n  }\n}\n","import type { ReactNode, Ref } from 'react';\nimport {\n  Label as AriaLabel,\n  Slider as AriaSlider,\n  SliderFill as AriaSliderFill,\n  SliderOutput as AriaSliderOutput,\n  SliderThumb as AriaSliderThumb,\n  SliderTrack as AriaSliderTrack,\n  Text as AriaText,\n} from 'react-aria-components';\nimport { classes } from '../internal/classes';\nimport fieldStyles from '../internal/AriaField.module.css';\nimport styles from './Slider.module.css';\n\nexport type SliderValue = number | [number, number];\nexport type SliderOrientation = 'horizontal' | 'vertical';\n\nexport interface SliderProps<T extends SliderValue = number> {\n  /** Visible label. Always rendered; `hideLabel` keeps it for assistive technology only. */\n  label: ReactNode;\n  /** @default false */\n  hideLabel?: boolean;\n  description?: ReactNode;\n  /** One number, or a `[start, end]` pair for a range with two thumbs. */\n  value?: T;\n  defaultValue?: T;\n  /** Called on every change while dragging or pressing arrows. */\n  onChange?: (value: T) => void;\n  /** Called once when the drag ends or the key is released. */\n  onChangeEnd?: (value: T) => void;\n  /** @default 0 */\n  min?: number;\n  /** @default 100 */\n  max?: number;\n  /** @default 1 */\n  step?: number;\n  /** How the value reads in the output and to assistive technology, for instance `{ style: 'percent' }` or `{ style: 'currency', currency: 'EUR' }`. */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** Names for the two thumbs of a range. @default ['Minimum', 'Maximum'] */\n  thumbLabels?: readonly [string, string];\n  /** Show the formatted value next to the label. @default true */\n  showOutput?: boolean;\n  /** @default 'horizontal' */\n  orientation?: SliderOrientation;\n  /** @default false */\n  disabled?: boolean;\n  /** Submitted with a form; a range submits two inputs with this name. */\n  name?: string;\n  className?: string;\n  /** The group element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Picks a number, or a range, on a track: React Aria's slider (decision\n * record 001) provides the hidden range inputs, arrow, Page Up/Down, Home and\n * End keys, drag with a thumb that stays under the pointer, and\n * `aria-valuetext` in the formatted form. The output element shows the\n * same text, so what a screen reader hears is what sighted users see.\n *\n * @status experimental\n * @category Forms\n * @accessibility A `group` named by the label containing one hidden `input type=\"range\"` per thumb (named by `thumbLabels` for a range) with `aria-valuetext` in the formatted form; the `output` element shows the same text. Arrows step, Page Up/Down step by ten, Home/End jump; thumbs drag with mouse or touch.\n * @do Set `formatOptions` so the spoken value matches the unit (\"40%\", \"€200\").\n * Use `hideLabel` only when a visible heading already names it.\n * @dont Use it for precise values; provide a numeric field alongside.\n * Use a `step` so small the keyboard cannot reach the ends in reasonable time.\n */\nexport function Slider<T extends SliderValue = number>({\n  label,\n  hideLabel = false,\n  description,\n  value,\n  defaultValue,\n  onChange,\n  onChangeEnd,\n  min = 0,\n  max = 100,\n  step = 1,\n  formatOptions,\n  thumbLabels = ['Minimum', 'Maximum'],\n  showOutput = true,\n  orientation = 'horizontal',\n  disabled = false,\n  name,\n  className,\n  ref,\n}: SliderProps<T>) {\n  const range = Array.isArray(value ?? defaultValue);\n  return (\n    <AriaSlider\n      ref={ref}\n      className={classes(styles.root, className)}\n      data-range={range ? '' : undefined}\n      value={value as number | number[] | undefined}\n      defaultValue={(defaultValue ?? (range ? [min, max] : min)) as number | number[]}\n      onChange={onChange as ((value: number | number[]) => void) | undefined}\n      onChangeEnd={onChangeEnd as ((value: number | number[]) => void) | undefined}\n      minValue={min}\n      maxValue={max}\n      step={step}\n      formatOptions={formatOptions}\n      orientation={orientation}\n      isDisabled={disabled}\n    >\n      <div className={styles.header}>\n        <AriaLabel className={classes(fieldStyles.label, hideLabel && styles.hidden)}>{label}</AriaLabel>\n        {showOutput && <AriaSliderOutput className={styles.output} />}\n      </div>\n      <AriaSliderTrack className={styles.track}>\n        <span className={styles.rail} aria-hidden=\"true\">\n          <AriaSliderFill className={styles.fill} />\n        </span>\n        <AriaSliderThumb index={0} className={styles.thumb} aria-label={range ? thumbLabels[0] : undefined} name={name} />\n        {range && <AriaSliderThumb index={1} className={styles.thumb} aria-label={thumbLabels[1]} name={name} />}\n      </AriaSliderTrack>\n      {description && (\n        <AriaText slot=\"description\" className={fieldStyles.description}>\n          {description}\n        </AriaText>\n      )}\n    </AriaSlider>\n  );\n}\n\nSlider.displayName = 'Slider';\n"]}

package/dist/{chunk-75GTNRBH.js → chunk-YK2OOM56.js}

@@ -1,4 +1,4 @@
-import { VisuallyHidden } from './chunk-Z4PN6B2C.js';
+import { VisuallyHidden } from './chunk-IB5UUE3S.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -41,5 +41,5 @@ function Progress({ value, max = 100, label, hideLabel = false, valueText, tone
 Progress.displayName = "Progress";
 
 export { Progress };
-//# sourceMappingURL=chunk-75GTNRBH.js.map
-//# sourceMappingURL=chunk-75GTNRBH.js.map
+//# sourceMappingURL=chunk-YK2OOM56.js.map
+//# sourceMappingURL=chunk-YK2OOM56.js.map

package/dist/chunk-YK2OOM56.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/progress/Progress.module.css","../src/progress/Progress.tsx"],"names":["progress","header","label","value","track","indicator"],"mappings":";;;;;;AAAA,IAAA,gBAAA,GAAA;AAAA,EAKG,QAAA,EAAAA,mBAAAA;AAAA,EAeA,MAAA,EAAAC,iBAAAA;AAAA,EAOA,KAAA,EAAAC,gBAAAA;AAAA,EAIA,KAAA,EAAAC,gBAAAA;AAAA,EAKA,KAAA,EAAAC,gBAAAA;AAAA,EAOA,SAAA,EAAAC,oBAUY,CAAA;ACfR,SAAS,SAAS,EAAE,KAAA,EAAO,GAAA,GAAM,GAAA,EAAK,OAAO,SAAA,GAAY,KAAA,EAAO,SAAA,EAAW,IAAA,GAAO,WAAW,IAAA,GAAO,IAAA,EAAM,WAAW,GAAA,EAAK,GAAG,MAAK,EAAkB;AACzJ,EAAA,MAAM,KAAK,KAAA,EAAM;AACjB,EAAA,MAAM,OAAA,GAAU,GAAG,EAAE,CAAA,MAAA,CAAA;AACrB,EAAA,MAAM,gBAAgB,KAAA,KAAU,MAAA;AAChC,EAAA,MAAM,OAAA,GAAU,aAAA,GAAgB,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,IAAA,CAAK,GAAA,CAAI,CAAA,EAAI,KAAA,GAAQ,GAAA,GAAO,GAAG,CAAC,CAAA;AAClF,EAAA,MAAM,IAAA,GAAO,gBAAgB,MAAA,GAAa,SAAA,IAAa,GAAG,IAAA,CAAK,KAAA,CAAM,OAAO,CAAC,CAAA,CAAA,CAAA;AAE7E,EAAA,MAAM,IAAA,GAAO,EAAE,UAAA,EAAY,CAAA,EAAG,OAAO,CAAA,CAAA,CAAA,EAAI;AAEzC,EAAA,4BACG,KAAA,EAAA,EAAK,GAAG,MAAM,GAAA,EAAU,SAAA,EAAW,QAAQ,gBAAA,CAAO,QAAA,EAAU,SAAS,CAAA,EAAG,aAAW,IAAA,EAAM,WAAA,EAAW,MAAM,oBAAA,EAAoB,aAAA,GAAgB,KAAK,MAAA,EAClJ,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,gBAAA,CAAO,MAAA,EACpB,QAAA,EAAA;AAAA,MAAA,SAAA,mBACC,GAAA,CAAC,cAAA,EAAA,EAAe,EAAA,EAAI,OAAA,EAAU,QAAA,EAAA,KAAA,EAAM,CAAA,mBAEpC,GAAA,CAAC,MAAA,EAAA,EAAK,EAAA,EAAI,OAAA,EAAS,SAAA,EAAW,gBAAA,CAAO,OAClC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,MAED,IAAA,IAAQ,CAAC,SAAA,oBAAa,GAAA,CAAC,UAAK,SAAA,EAAW,gBAAA,CAAO,OAAQ,QAAA,EAAA,IAAA,EAAK;AAAA,KAAA,EAC9D,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,aAAA;AAAA,QACL,iBAAA,EAAiB,OAAA;AAAA,QACjB,eAAA,EAAe,CAAA;AAAA,QACf,eAAA,EAAe,GAAA;AAAA,QACf,eAAA,EAAe,gBAAgB,MAAA,GAAY,KAAA;AAAA,QAC3C,gBAAA,EAAgB,IAAA;AAAA,QAChB,WAAW,gBAAA,CAAO,KAAA;AAAA,QAGlB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,gBAAA,CAAO,SAAA,EAAW,OAAO,IAAA,EAAM;AAAA;AAAA;AACjD,GAAA,EACF,CAAA;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-YK2OOM56.js","sourcesContent":["/* Every value is a token (--progress-*). The fill width is the per-instance --_value custom property. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .progress {\n    --_height: var(--progress-height-md);\n    --_indicator: var(--progress-indicator-primary);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--progress-gap);\n    font-family: var(--font-family-body);\n\n    &[data-size=\"sm\"] { --_height: var(--progress-height-sm); }\n    &[data-tone=\"success\"] { --_indicator: var(--progress-indicator-success); }\n    &[data-tone=\"warning\"] { --_indicator: var(--progress-indicator-warning); }\n    &[data-tone=\"error\"] { --_indicator: var(--progress-indicator-error); }\n  }\n\n  .header {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--space-3);\n    font-size: var(--progress-label-font-size);\n  }\n\n  .label {\n    color: var(--progress-label-fg);\n  }\n\n  .value {\n    color: var(--progress-value-fg);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .track {\n    overflow: hidden;\n    block-size: var(--_height);\n    border-radius: var(--progress-radius);\n    background-color: var(--progress-track);\n  }\n\n  .indicator {\n    block-size: 100%;\n    inline-size: var(--_value, 0%);\n    border-radius: var(--progress-radius);\n    background-color: var(--_indicator);\n    transition: inline-size var(--progress-duration) var(--motion-easing-standard);\n  }\n\n  .progress[data-indeterminate] .indicator {\n    inline-size: 40%;\n    animation: slide calc(4 * var(--progress-duration)) var(--motion-easing-standard) infinite;\n  }\n\n  @keyframes slide {\n    from {\n      translate: -100% 0;\n    }\n\n    to {\n      translate: 250% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress[data-indeterminate] .indicator {\n      inline-size: 50%;\n      animation: none;\n    }\n  }\n}\n","import { useId, type CSSProperties, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport { VisuallyHidden } from '../visually-hidden';\nimport styles from './Progress.module.css';\n\nexport type ProgressTone = 'primary' | 'success' | 'warning' | 'error';\nexport type ProgressSize = 'sm' | 'md';\n\nexport interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Current value; omit for indeterminate. */\n  value?: number;\n  /** @default 100 */\n  max?: number;\n  /** Required: what is progressing. Visible unless `hideLabel`. */\n  label: ReactNode;\n  /** Keep the label for assistive technology only. @default false */\n  hideLabel?: boolean;\n  /** Human-readable value (\"3 of 10 files\"); defaults to a percentage. */\n  valueText?: string;\n  /** @default 'primary' */\n  tone?: ProgressTone;\n  /** @default 'md' */\n  size?: ProgressSize;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A determinate or indeterminate progress bar. The bar is `role=\"progressbar\"`\n * labelled by the visible (or visually hidden) label; the fill width is the\n * one place in the library that carries a per-instance inline value, set as\n * a custom property. Indeterminate motion stops under reduced motion.\n *\n * @status stable\n * @category Feedback\n * @accessibility `role=\"progressbar\"` labelled by the required `label` (visible or visually hidden), with `aria-valuenow`/`aria-valuemin`/`aria-valuemax` when determinate and `aria-valuetext` from `valueText`. Indeterminate bars omit `aria-valuenow`.\n * @do Set `valueText` when the percentage is not the meaningful reading (\"3 of 5 files\").\n * @dont Use it for an unknown wait shorter than a few seconds; use Spinner.\n */\nexport function Progress({ value, max = 100, label, hideLabel = false, valueText, tone = 'primary', size = 'md', className, ref, ...rest }: ProgressProps) {\n  const id = useId();\n  const labelId = `${id}-label`;\n  const indeterminate = value === undefined;\n  const percent = indeterminate ? 0 : Math.min(100, Math.max(0, (value / max) * 100));\n  const text = indeterminate ? undefined : (valueText ?? `${Math.round(percent)}%`);\n  // The single per-instance value the bar needs. A stylesheet cannot enumerate percentages.\n  const fill = { '--_value': `${percent}%` } as CSSProperties;\n\n  return (\n    <div {...rest} ref={ref} className={classes(styles.progress, className)} data-size={size} data-tone={tone} data-indeterminate={indeterminate ? '' : undefined}>\n      <div className={styles.header}>\n        {hideLabel ? (\n          <VisuallyHidden id={labelId}>{label}</VisuallyHidden>\n        ) : (\n          <span id={labelId} className={styles.label}>\n            {label}\n          </span>\n        )}\n        {text && !hideLabel && <span className={styles.value}>{text}</span>}\n      </div>\n      <div\n        role=\"progressbar\"\n        aria-labelledby={labelId}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-valuenow={indeterminate ? undefined : value}\n        aria-valuetext={text}\n        className={styles.track}\n      >\n        {/* eslint-disable-next-line react/forbid-dom-props -- per-instance fill width, see the component JSDoc */}\n        <div className={styles.indicator} style={fill} />\n      </div>\n    </div>\n  );\n}\n\nProgress.displayName = 'Progress';\n"]}

package/dist/{chunk-OGIQRHNF.js → chunk-ZEVQQQOA.js}

@@ -1,4 +1,4 @@
-import { Field } from './chunk-2PXTVZ7H.js';
+import { Field } from './chunk-SXMORGSG.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -48,5 +48,5 @@ function Select({
 Select.displayName = "Select";
 
 export { Select };
-//# sourceMappingURL=chunk-OGIQRHNF.js.map
-//# sourceMappingURL=chunk-OGIQRHNF.js.map
+//# sourceMappingURL=chunk-ZEVQQQOA.js.map
+//# sourceMappingURL=chunk-ZEVQQQOA.js.map

package/dist/chunk-ZEVQQQOA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/select/Select.module.css","../src/select/Select.tsx"],"names":["field","control","select"],"mappings":";;;;;AAAA,IAAA,cAAA,GAAA;AAAA,EASG,KAAA,EAAAA,cAAAA;AAAA,EAoBA,OAAA,EAAAC,gBAAAA;AAAA,EAuBA,MAAA,EAAAC;AAAA,CAAA;ACfI,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,WAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,kBAAA,EAAoB,WAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,UAAU,KAAA,KAAU,MAAA,IAAa,UAAU,IAAA,IAAQ,KAAA,KAAU,SAAS,KAAA,KAAU,EAAA;AACtF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,SAAA,EAAW,OAAA,CAAQ,cAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,4BACnB,MAAA,EAAA,EAAK,SAAA,EAAW,eAAO,OAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,MAAM,OAAA,EAAN,EAAc,kBAAA,EAAkB,WAAA,EAC/B,+BAAC,QAAA,EAAA,EAAQ,GAAG,MAAM,GAAA,EAAU,SAAA,EAAW,eAAO,MAAA,EAC3C,QAAA,EAAA;AAAA,UAAA,WAAA,KAAgB,0BACf,GAAA,CAAC,QAAA,EAAA,EAAO,OAAM,EAAA,EAAG,QAAA,EAAU,UACxB,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAED;AAAA,SAAA,EACH,GACF,CAAA,EACF,CAAA;AAAA,QACC,WAAA,oBAAe,GAAA,CAAC,KAAA,CAAM,WAAA,EAAN,EAAmB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QAC/C,OAAA,oBAAW,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAClC;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-ZEVQQQOA.js","sourcesContent":["/*\n * Every value is a token (--select-*). The chevron is the wrapper's ::after,\n * sharing the select's grid cell. Size and invalid state resolve into private\n * custom properties on the root.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    --_height: var(--select-height-md);\n    --_font-size: var(--select-font-size-md);\n    --_border: var(--select-border-default);\n\n    font-family: var(--select-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--select-height-sm);\n      --_font-size: var(--select-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--select-height-lg);\n      --_font-size: var(--select-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--select-border-invalid); }\n  }\n\n  .control {\n    display: grid;\n    align-items: center;\n\n    & > * {\n      grid-area: 1 / 1;\n    }\n\n    &::after {\n      content: \"\";\n      inline-size: var(--space-2);\n      block-size: var(--space-2);\n      margin-inline-end: var(--select-chevron-inset);\n      border-inline-end: var(--select-chevron-width) solid var(--select-chevron);\n      border-block-end: var(--select-chevron-width) solid var(--select-chevron);\n      justify-self: end;\n      rotate: 45deg;\n      translate: 0 -25%;\n      pointer-events: none;\n      grid-area: 1 / 1;\n    }\n  }\n\n  .select {\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--select-padding-inline) var(--select-chevron-gap);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--select-radius);\n    background-color: var(--select-bg);\n    color: var(--select-fg);\n    font-size: var(--_font-size);\n    appearance: none;\n    cursor: pointer;\n    transition: border-color var(--select-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      border-color: var(--select-border-focus);\n      outline: var(--select-focus-ring-width) solid var(--select-focus-ring);\n      outline-offset: var(--select-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--select-border-hover);\n    }\n\n    &:has(option[value=\"\"]:checked) {\n      color: var(--select-placeholder);\n    }\n  }\n}\n","import type { ReactNode, Ref, SelectHTMLAttributes } from 'react';\nimport { Field } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './Select.module.css';\n\nexport type SelectSize = 'sm' | 'md' | 'lg';\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n  /** Visible label. Always rendered. */\n  label: ReactNode;\n  description?: ReactNode;\n  /** Presence marks the control invalid and announces the message. */\n  error?: ReactNode;\n  /** @default 'md' */\n  size?: SelectSize;\n  /** An empty first option shown until a value is chosen. */\n  placeholder?: string;\n  /** The `<select>` element. */\n  ref?: Ref<HTMLSelectElement>;\n  /** Applied to the wrapper, not the select. */\n  className?: string;\n  /** `<option>` and `<optgroup>` elements. */\n  children: ReactNode;\n}\n\n/**\n * A native `<select>` on top of Field: the browser's own popup, keyboard and\n * assistive-technology support, with the closed control drawn from\n * `--select-*` tokens. For rich options or multi-select, a listbox component\n * comes later on a headless layer; this one stays native on purpose.\n *\n * @status stable\n * @category Forms\n * @accessibility A native `select` on top of Field: the browser's own popup, keyboard and screen-reader behaviour; the placeholder is a disabled empty option when `required`.\n * @do Use it for a plain list of words; it is the most robust choice on every platform.\n * @dont Use it for options that need a description or an icon; use Picker.\n */\nexport function Select({\n  label,\n  description,\n  error,\n  size = 'md',\n  placeholder,\n  required,\n  disabled,\n  id,\n  className,\n  ref,\n  children,\n  'aria-describedby': describedBy,\n  ...rest\n}: SelectProps) {\n  const invalid = error !== undefined && error !== null && error !== false && error !== '';\n  return (\n    <Field\n      id={id}\n      invalid={invalid}\n      disabled={Boolean(disabled)}\n      required={Boolean(required)}\n      className={classes(styles.field, className)}\n      data-size={size}\n    >\n      <Field.Label>{label}</Field.Label>\n      <span className={styles.control}>\n        <Field.Control aria-describedby={describedBy}>\n          <select {...rest} ref={ref} className={styles.select}>\n            {placeholder !== undefined && (\n              <option value=\"\" disabled={required}>\n                {placeholder}\n              </option>\n            )}\n            {children}\n          </select>\n        </Field.Control>\n      </span>\n      {description && <Field.Description>{description}</Field.Description>}\n      {invalid && <Field.Error>{error}</Field.Error>}\n    </Field>\n  );\n}\n\nSelect.displayName = 'Select';\n"]}

package/dist/{chunk-I4KC4V6A.js → chunk-ZL5MMRLG.js}

@@ -1,4 +1,4 @@
-import { VisuallyHidden } from './chunk-Z4PN6B2C.js';
+import { VisuallyHidden } from './chunk-IB5UUE3S.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -27,5 +27,5 @@ function Spinner({ size = "md", tone = "default", label = "Loading", decorative
 Spinner.displayName = "Spinner";
 
 export { Spinner };
-//# sourceMappingURL=chunk-I4KC4V6A.js.map
-//# sourceMappingURL=chunk-I4KC4V6A.js.map
+//# sourceMappingURL=chunk-ZL5MMRLG.js.map
+//# sourceMappingURL=chunk-ZL5MMRLG.js.map

package/dist/chunk-ZL5MMRLG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spinner/Spinner.module.css","../src/spinner/Spinner.tsx"],"names":["spinner","ring"],"mappings":";;;;;AAAA,IAAA,eAAA,GAAA;AAAA,EAKG,OAAA,EAAAA,iBAAAA;AAAA,EAqBA,IAAA,EAAAC,cAMY,CAAA;ACAR,SAAS,OAAA,CAAQ,EAAE,IAAA,GAAO,IAAA,EAAM,OAAO,SAAA,EAAW,KAAA,GAAQ,SAAA,EAAW,UAAA,GAAa,KAAA,EAAO,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,EAAiB;AACvI,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAA,EAAW,OAAA,CAAQ,eAAA,CAAO,OAAA,EAAS,SAAS,CAAA;AAAA,MAC5C,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,IAAA;AAAA,MACX,IAAA,EAAM,aAAa,MAAA,GAAY,QAAA;AAAA,MAC/B,eAAa,UAAA,IAAc,MAAA;AAAA,MAE3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,eAAA,CAAO,IAAA,EAAM,eAAY,MAAA,EAAO,CAAA;AAAA,QAChD,CAAC,UAAA,oBAAc,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GACzC;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-ZL5MMRLG.js","sourcesContent":["/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","import type { HTMLAttributes, Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport { VisuallyHidden } from '../visually-hidden';\nimport styles from './Spinner.module.css';\n\nexport type SpinnerSize = 'sm' | 'md' | 'lg' | 'inherit';\nexport type SpinnerTone = 'default' | 'inherit';\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  /** `inherit` follows the surrounding font size, for spinners inside controls. @default 'md' */\n  size?: SpinnerSize;\n  /** `inherit` draws with the surrounding text colour, for coloured controls. @default 'default' */\n  tone?: SpinnerTone;\n  /** Announced to assistive technology (`role=\"status\"`). @default 'Loading' */\n  label?: string;\n  /** Hide from assistive technology: the parent already announces busy. @default false */\n  decorative?: boolean;\n  ref?: Ref<HTMLSpanElement>;\n}\n\n/**\n * An indeterminate progress indicator. Announces its label as a status\n * unless `decorative`, in which case the parent is responsible (Button sets\n * `aria-busy`). Under reduced motion the ring stops but keeps its coloured\n * quarter, so it still reads as \"in progress\".\n *\n * @status stable\n * @category Feedback\n * @accessibility `role=\"status\"` with a visually hidden label (\"Loading\" by default) unless `decorative`, in which case the parent announces busy. Under reduced motion the ring stops but keeps its coloured quarter.\n * @do Use `decorative` inside a control that already sets `aria-busy`.\n * @dont Show several spinners for one operation.\n */\nexport function Spinner({ size = 'md', tone = 'default', label = 'Loading', decorative = false, className, ref, ...rest }: SpinnerProps) {\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      className={classes(styles.spinner, className)}\n      data-size={size}\n      data-tone={tone}\n      role={decorative ? undefined : 'status'}\n      aria-hidden={decorative || undefined}\n    >\n      <span className={styles.ring} aria-hidden=\"true\" />\n      {!decorative && <VisuallyHidden>{label}</VisuallyHidden>}\n    </span>\n  );\n}\n\nSpinner.displayName = 'Spinner';\n"]}

package/dist/combobox.css

@@ -1,4 +1,5 @@
 /* src/icon/Icon.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Icon_icon {
     display: inline-flex;
@@ -24,6 +25,7 @@
 }
 
 /* src/internal/AriaField.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .AriaField_field {
     display: flex;
@@ -53,6 +55,7 @@
 }
 
 /* src/listbox/Listbox.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Listbox_list {
     display: flex;
@@ -123,6 +126,7 @@
 }
 
 /* src/visually-hidden/VisuallyHidden.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .VisuallyHidden_root {
     position: absolute;
@@ -138,6 +142,7 @@
 }
 
 /* src/spinner/Spinner.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Spinner_spinner {
     --_size: var(--spinner-size-md);
@@ -183,6 +188,7 @@
 }
 
 /* src/combobox/Combobox.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Combobox_root {
     --_height: var(--combobox-height-md);
@@ -266,6 +272,9 @@
   .Combobox_list {
     box-shadow: var(--combobox-popover-shadow);
   }
+  .Combobox_popover .Combobox_list {
+    background-color: var(--combobox-popover-bg);
+  }
   @keyframes Combobox_fade {
     from {
       opacity: 0;

package/dist/combobox.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icon/Icon.module.css","../src/internal/AriaField.module.css","../src/listbox/Listbox.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/combobox/Combobox.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n    font-family: var(--font-family-body);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","/*\n * Every value is a token (--listbox-*). React Aria writes the state:\n * data-focused (real or virtual focus), data-selected, data-disabled,\n * data-hovered, data-focus-visible, data-empty. The tick is in the DOM for\n * every option and revealed by data-selected.\n */\n\n@layer components {\n  .list {\n    display: flex;\n    flex-direction: column;\n    max-block-size: var(--listbox-max-height);\n    padding: var(--listbox-padding);\n    overflow: auto;\n    border: var(--size-hairline) solid var(--listbox-border);\n    border-radius: var(--listbox-radius);\n    background-color: var(--listbox-bg);\n    color: var(--listbox-fg);\n    font-family: var(--listbox-font-family);\n    font-size: var(--listbox-font-size);\n    outline: none;\n\n    &[data-focus-visible] {\n      outline: var(--listbox-focus-ring-width) solid var(--listbox-focus-ring);\n      outline-offset: var(--listbox-focus-ring-offset);\n    }\n  }\n\n  .check {\n    flex: none;\n    visibility: hidden;\n    color: var(--listbox-item-check);\n  }\n\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--listbox-item-gap);\n    padding-block: var(--listbox-item-padding-block);\n    padding-inline: var(--listbox-item-padding-inline);\n    border-radius: var(--listbox-item-radius);\n    color: var(--listbox-item-fg);\n    cursor: default;\n    outline: none;\n\n    &[data-hovered],\n    &[data-focused] {\n      background-color: var(--listbox-item-bg-focus);\n    }\n\n    &[data-selected] {\n      background-color: var(--listbox-item-bg-selected);\n\n      .check {\n        visibility: visible;\n      }\n    }\n\n    &[data-disabled] {\n      color: var(--listbox-item-fg-disabled);\n      cursor: not-allowed;\n    }\n  }\n\n  .itemBody {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .itemLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .itemDescription {\n    color: var(--listbox-item-fg-muted);\n    font-size: var(--listbox-item-description-font-size);\n  }\n\n  .empty {\n    padding: var(--listbox-empty-padding);\n    color: var(--listbox-empty-fg);\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token (--combobox-*); the options read --listbox-*. Size\n * and invalid state resolve into private custom properties on the root. The\n * popover is positioned by React Aria; the gap to the control is its own\n * padding, so no offset number lives in code, and --trigger-width (set by\n * the vendor) makes it as wide as the control.\n */\n\n@layer components {\n  .root {\n    --_height: var(--combobox-height-md);\n    --_font-size: var(--combobox-font-size-md);\n    --_border: var(--combobox-border-default);\n\n    font-family: var(--combobox-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--combobox-height-sm);\n      --_font-size: var(--combobox-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--combobox-height-lg);\n      --_font-size: var(--combobox-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--combobox-border-invalid); }\n  }\n\n  .control {\n    display: grid;\n    align-items: center;\n\n    & > * {\n      grid-area: 1 / 1;\n    }\n  }\n\n  .input {\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--combobox-padding-inline) var(--combobox-icon-size);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--combobox-radius);\n    background-color: var(--combobox-bg);\n    color: var(--combobox-fg);\n    font-size: var(--_font-size);\n    transition: border-color var(--combobox-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--combobox-placeholder);\n    }\n\n    &[data-focused] {\n      border-color: var(--combobox-border-focus);\n      outline: var(--combobox-focus-ring-width) solid var(--combobox-focus-ring);\n      outline-offset: var(--combobox-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-hovered]:not([data-focused], [data-disabled]) {\n      border-color: var(--combobox-border-hover);\n    }\n  }\n\n  .button {\n    display: grid;\n    place-items: center;\n    inline-size: var(--combobox-icon-size);\n    block-size: var(--_height);\n    padding: 0;\n    border: none;\n    border-radius: var(--combobox-radius);\n    background-color: transparent;\n    color: var(--combobox-icon);\n    justify-self: end;\n    cursor: pointer;\n\n    &[data-focus-visible] {\n      outline: var(--combobox-focus-ring-width) solid var(--combobox-focus-ring);\n      outline-offset: calc(-1 * var(--combobox-focus-ring-width));\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .popover {\n    inline-size: var(--trigger-width);\n    padding-block-start: var(--combobox-gap);\n    animation: fade var(--combobox-popover-duration) var(--motion-easing-standard);\n\n    &[data-placement=\"top\"] {\n      padding-block: 0 var(--combobox-gap);\n    }\n  }\n\n  .list {\n    box-shadow: var(--combobox-popover-shadow);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popover {\n      animation: none;\n    }\n  }\n}\n"],"mappings":"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","names":["icon","field","label","required","description","error","list","check","item","itemBody","itemLabel","itemDescription","empty","root","spinner","ring","spin","root","control","input","button","popover","list","fade"]}
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/internal/AriaField.module.css","../src/listbox/Listbox.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/combobox/Combobox.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n    font-family: var(--font-family-body);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","/*\n * Every value is a token (--listbox-*). React Aria writes the state:\n * data-focused (real or virtual focus), data-selected, data-disabled,\n * data-hovered, data-focus-visible, data-empty. The tick is in the DOM for\n * every option and revealed by data-selected.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .list {\n    display: flex;\n    flex-direction: column;\n    max-block-size: var(--listbox-max-height);\n    padding: var(--listbox-padding);\n    overflow: auto;\n    border: var(--size-hairline) solid var(--listbox-border);\n    border-radius: var(--listbox-radius);\n    background-color: var(--listbox-bg);\n    color: var(--listbox-fg);\n    font-family: var(--listbox-font-family);\n    font-size: var(--listbox-font-size);\n    outline: none;\n\n    &[data-focus-visible] {\n      outline: var(--listbox-focus-ring-width) solid var(--listbox-focus-ring);\n      outline-offset: var(--listbox-focus-ring-offset);\n    }\n  }\n\n  .check {\n    flex: none;\n    visibility: hidden;\n    color: var(--listbox-item-check);\n  }\n\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--listbox-item-gap);\n    padding-block: var(--listbox-item-padding-block);\n    padding-inline: var(--listbox-item-padding-inline);\n    border-radius: var(--listbox-item-radius);\n    color: var(--listbox-item-fg);\n    cursor: default;\n    outline: none;\n\n    &[data-hovered],\n    &[data-focused] {\n      background-color: var(--listbox-item-bg-focus);\n    }\n\n    &[data-selected] {\n      background-color: var(--listbox-item-bg-selected);\n\n      .check {\n        visibility: visible;\n      }\n    }\n\n    &[data-disabled] {\n      color: var(--listbox-item-fg-disabled);\n      cursor: not-allowed;\n    }\n  }\n\n  .itemBody {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .itemLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .itemDescription {\n    color: var(--listbox-item-fg-muted);\n    font-size: var(--listbox-item-description-font-size);\n  }\n\n  .empty {\n    padding: var(--listbox-empty-padding);\n    color: var(--listbox-empty-fg);\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token (--combobox-*); the options read --listbox-*. Size\n * and invalid state resolve into private custom properties on the root. The\n * popover is positioned by React Aria; the gap to the control is its own\n * padding, so no offset number lives in code, and --trigger-width (set by\n * the vendor) makes it as wide as the control.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --_height: var(--combobox-height-md);\n    --_font-size: var(--combobox-font-size-md);\n    --_border: var(--combobox-border-default);\n\n    font-family: var(--combobox-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--combobox-height-sm);\n      --_font-size: var(--combobox-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--combobox-height-lg);\n      --_font-size: var(--combobox-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--combobox-border-invalid); }\n  }\n\n  .control {\n    display: grid;\n    align-items: center;\n\n    & > * {\n      grid-area: 1 / 1;\n    }\n  }\n\n  .input {\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--combobox-padding-inline) var(--combobox-icon-size);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--combobox-radius);\n    background-color: var(--combobox-bg);\n    color: var(--combobox-fg);\n    font-size: var(--_font-size);\n    transition: border-color var(--combobox-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--combobox-placeholder);\n    }\n\n    &[data-focused] {\n      border-color: var(--combobox-border-focus);\n      outline: var(--combobox-focus-ring-width) solid var(--combobox-focus-ring);\n      outline-offset: var(--combobox-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-hovered]:not([data-focused], [data-disabled]) {\n      border-color: var(--combobox-border-hover);\n    }\n  }\n\n  .button {\n    display: grid;\n    place-items: center;\n    inline-size: var(--combobox-icon-size);\n    block-size: var(--_height);\n    padding: 0;\n    border: none;\n    border-radius: var(--combobox-radius);\n    background-color: transparent;\n    color: var(--combobox-icon);\n    justify-self: end;\n    cursor: pointer;\n\n    &[data-focus-visible] {\n      outline: var(--combobox-focus-ring-width) solid var(--combobox-focus-ring);\n      outline-offset: calc(-1 * var(--combobox-focus-ring-width));\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .popover {\n    inline-size: var(--trigger-width);\n    padding-block-start: var(--combobox-gap);\n    animation: fade var(--combobox-popover-duration) var(--motion-easing-standard);\n\n    &[data-placement=\"top\"] {\n      padding-block: 0 var(--combobox-gap);\n    }\n  }\n\n  .list {\n    box-shadow: var(--combobox-popover-shadow);\n  }\n\n  /* The shared list styles paint an inline Listbox's surface; here the list floats. Two classes, so it wins whatever the stylesheet order. */\n  .popover .list {\n    background-color: var(--combobox-popover-bg);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popover {\n      animation: none;\n    }\n  }\n}\n"],"mappings":"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","names":["icon","field","label","required","description","error","list","check","item","itemBody","itemLabel","itemDescription","empty","root","spinner","ring","spin","root","control","input","button","popover","list","fade"]}

package/dist/combobox.js

@@ -1,10 +1,10 @@
-export { Combobox } from './chunk-GUZMLYST.js';
-import './chunk-I4KC4V6A.js';
-import './chunk-Z4PN6B2C.js';
-import './chunk-T76YSNTZ.js';
-import './chunk-4HRNRTXI.js';
-import './chunk-YUHS5S5Y.js';
-import './chunk-ASNTNTJW.js';
+"use client";export { Combobox } from './chunk-WDIFWMKE.js';
+import './chunk-ZL5MMRLG.js';
+import './chunk-IB5UUE3S.js';
+import './chunk-IRNTXAA7.js';
+import './chunk-DGIXNUNI.js';
+import './chunk-EDTA65L5.js';
+import './chunk-O5LII5XP.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=combobox.js.map
 //# sourceMappingURL=combobox.js.map