@misoto22/design 0.7.0 → 0.9.0

package/dist/components/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useId, useRef, useState, type PointerEvent } from 'react'\nimport { cn } from '../../lib/cn'\nimport {\n  clamp,\n  colorFormat,\n  colorToRgb,\n  fitGamut,\n  formatColor,\n  maxChroma,\n  parseColor,\n  type Color,\n  type ColorFormat,\n  type ColorSpace,\n} from '../../lib/color'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\nimport { warnBlankName } from '../../lib/warn'\nimport { useFieldControl } from '../Field/field-control'\nimport { Input } from '../Input/Input'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\nimport { ToggleGroup, ToggleGroupItem } from '../ToggleGroup/ToggleGroup'\n\n/** The plane's pixel grid. Wider than it is tall, like the panel holding it. */\nconst PLANE_W = 256\nconst PLANE_H = 160\n\n/** Hue stops in the strip behind the hue slider. Every 5°, plus the wrap. */\nconst HUE_STOPS = 73\n\nconst BLACK: Color = { l: 0, c: 0, h: 0, a: 1 }\n\nconst FORMAT_LABELS: Record<ColorFormat, string> = {\n  hex: 'Hex',\n  oklch: 'OKLCH',\n  // Not \"Display P3\": the three segments share the strip evenly, and the long\n  // name wraps to two lines inside its third and makes the whole row twice as\n  // tall as the two beside it.\n  p3: 'P3',\n}\n\n/**\n * A checkerboard, so alpha reads as alpha rather than as a lighter colour.\n *\n * Sized per surface: 8px checks read as a texture behind a full-width track and\n * as two grey squares inside a 16px swatch.\n */\nconst checkerboard = (square: string) =>\n  `repeating-conic-gradient(var(--stone) 0% 25%, var(--paper) 0% 50%) 0 0 / ${square} ${square}`\n\nexport interface ColorPickerProps {\n  /**\n   * Names the control. Required — the trigger shows a colour, and a colour is\n   * not a name.\n   *\n   * Announced together with the value, the way `Select`'s is: a reader hears\n   * \"Brand colour, #a78bfa\". Inside a `Field` with a label, that label is used\n   * and this one is not repeated.\n   */\n  label: string\n  /** The colour, as any absolute CSS colour string. */\n  value?: string\n  defaultValue?: string\n  /**\n   * Fires with a CSS colour string in whichever notation the panel is set to —\n   * so the notation a caller passes in is the notation they get back until\n   * somebody changes it in the panel.\n   */\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  className?: string\n  /** The TRIGGER's id — the element a label points at. A `Field` sets it. */\n  id?: string\n  /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */\n  'aria-describedby'?: string\n  /** The spelling a form library sets; read together with `invalid`. */\n  'aria-invalid'?: boolean | 'true' | 'false'\n  /** Announced on the trigger. A `Field` sets it from `required`. */\n  'aria-required'?: boolean\n}\n\n/**\n * A colour, chosen or typed.\n *\n * The panel works in OKLCH, and that is the reason to reach for this rather\n * than `<input type=\"color\">`. In HSV — which is what the native picker and\n * most libraries use — dragging along a row of constant \"lightness\" walks\n * through colours the eye reads as getting darker, so a reader tuning a palette\n * is fighting the instrument. OKLCH's lightness is the one a person sees, so\n * two colours at the same height on the plane genuinely match, and the hue\n * strip stays at the lightness already chosen instead of showing a rainbow that\n * belongs to some other colour.\n *\n * The plane is normalised to the gamut ROW BY ROW: its right edge is the most\n * chroma that exists at that lightness and hue, so the whole surface is\n * reachable rather than a lens of colour inside a field of clipped duplicates.\n *\n * **What it accepts.** Hex, `rgb()`, `hsl()`, `oklch()` and\n * `color(display-p3 …)`, in both syntaxes. Named colours are not accepted:\n * resolving them needs a table of every CSS name or a live DOM, and a box that\n * takes \"rebeccapurple\" but not \"papayawhip\" is worse than one that takes\n * neither.\n *\n * **Keyboard.** The plane is a group of two real sliders — chroma across,\n * lightness up — so the arrows move it and a screen reader announces where it\n * is. That is the part a 2D canvas usually leaves out, and leaving it out makes\n * the control unusable rather than merely awkward.\n *\n * @example\n * <Field label=\"Brand colour\"><ColorPicker label=\"Brand colour\" defaultValue=\"#a78bfa\" /></Field>\n */\nexport function ColorPicker({\n  label,\n  value: controlled,\n  defaultValue = '#000000',\n  onValueChange,\n  disabled,\n  invalid,\n  className,\n  id,\n  'aria-describedby': describedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n}: ColorPickerProps) {\n  warnBlankName('ColorPicker', 'label', label, 'the trigger is announced with no name')\n  const bad = isInvalid(invalid, ariaInvalid)\n\n  const field = useFieldControl()\n  const generated = useId()\n  const triggerId = id ?? generated\n  const valueId = `${triggerId}-value`\n  const nameId = field?.labelId ?? `${triggerId}-name`\n\n  const [uncontrolled, setUncontrolled] = useState(defaultValue)\n  const value = controlled ?? uncontrolled\n\n  const [color, setColor] = useState<Color>(() => parseColor(defaultValue) ?? BLACK)\n  const [format, setFormat] = useState<ColorFormat>(() => colorFormat(defaultValue))\n  // What this component last wrote out, so its own emission does not read back\n  // as an outside change and re-derive the hue it just preserved.\n  const emitted = useRef<string | null>(null)\n\n  // The plane's horizontal position, kept across the two rows where it cannot\n  // be derived: at pure black and pure white every chroma is zero, so `c / max`\n  // is 0/0 and the handle would jump to the left edge on the way past.\n  const saturationRef = useRef(0)\n\n  useEffect(() => {\n    if (value === emitted.current) return\n    const parsed = parseColor(value)\n    if (!parsed) return\n    // A grey has no hue — only the angle of its rounding error. Keeping the\n    // last real one is what stops the strip spinning when a reader drags the\n    // handle through the neutral column.\n    setColor((prev) => ({ ...parsed, h: parsed.c < 1e-7 ? prev.h : parsed.h }))\n    setFormat(colorFormat(value))\n  }, [value])\n\n  // Hex is bounded to sRGB; both of the others can address the wider gamut, so\n  // the plane shows what the notation can actually hold.\n  const space: ColorSpace = format === 'hex' ? 'srgb' : 'p3'\n  const ceiling = maxChroma(color.l, color.h, space)\n  const saturation = ceiling > 0 ? clamp(color.c / ceiling) : saturationRef.current\n\n  useEffect(() => {\n    if (ceiling > 0) saturationRef.current = saturation\n  }, [ceiling, saturation])\n\n  const commit = (next: Color, nextFormat: ColorFormat = format) => {\n    const fitted = nextFormat === 'oklch' ? next : fitGamut(next, nextFormat === 'p3' ? 'p3' : 'srgb')\n    setColor(fitted)\n    setFormat(nextFormat)\n    const text = formatColor(fitted, nextFormat)\n    emitted.current = text\n    if (controlled === undefined) setUncontrolled(text)\n    onValueChange?.(text)\n  }\n\n  /** Moves the plane handle, in the 0–1 coordinates the plane is drawn in. */\n  const setPlane = (nextSaturation: number, lightness: number) => {\n    saturationRef.current = nextSaturation\n    commit({ ...color, l: lightness, c: nextSaturation * maxChroma(lightness, color.h, space) })\n  }\n\n  const planeRef = useRef<HTMLDivElement>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const painted = useRef<string>('')\n\n  const trackPointer = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = planeRef.current?.getBoundingClientRect()\n    if (!rect || rect.width === 0 || rect.height === 0) return\n    setPlane(\n      clamp((event.clientX - rect.left) / rect.width),\n      clamp(1 - (event.clientY - rect.top) / rect.height),\n    )\n  }\n\n  /**\n   * Fills the plane, at most once per hue.\n   *\n   * Called from the canvas's own ref callback rather than only from an effect,\n   * because the canvas does not exist until the panel is open AND Radix's\n   * popper has measured it — which is a commit later than the one that opened\n   * it. An effect keyed to the open state runs on the commit BEFORE the node\n   * arrives, finds a ref holding null, and never runs again: a plane that\n   * stayed blank until the reader happened to move the hue.\n   */\n  const paint = (canvas: HTMLCanvasElement | null) => {\n    if (!canvas) return\n    const key = `${color.h.toFixed(3)}:${space}`\n    if (painted.current === key) return\n    const context = canvas.getContext('2d')\n    // A headless environment can hand back a 2D context with most of the\n    // drawing surface missing. Nothing here is load-bearing — the plane is the\n    // pointer's aim, and the two sliders under it work either way — so a\n    // partial context means no plane rather than a thrown render.\n    if (!context || typeof context.createImageData !== 'function') return\n    painted.current = key\n\n    const pixels = context.createImageData(PLANE_W, PLANE_H)\n    for (let y = 0; y < PLANE_H; y++) {\n      const l = 1 - y / (PLANE_H - 1)\n      // Each row is normalised to its OWN reachable chroma. Painted against one\n      // global maximum instead, the top and bottom thirds of the plane are\n      // bands of clipped duplicates a reader can never pick apart.\n      const rowMax = maxChroma(l, color.h, space)\n      for (let x = 0; x < PLANE_W; x++) {\n        const rgb = colorToRgb({ l, c: (x / (PLANE_W - 1)) * rowMax, h: color.h, a: 1 }, 'srgb')\n        const at = (y * PLANE_W + x) * 4\n        for (let channel = 0; channel < 3; channel++) {\n          pixels.data[at + channel] = Math.round(clamp(rgb[channel] ?? 0) * 255)\n        }\n        pixels.data[at + 3] = 255\n      }\n    }\n    context.putImageData(pixels, 0, 0)\n  }\n\n  /** Repaints a canvas that is already on screen when the hue moves under it. */\n  useEffect(() => {\n    paint(canvasRef.current)\n  })\n\n  const opaque = formatColor({ ...color, a: 1 }, 'oklch')\n  const hueTrack = Array.from({ length: HUE_STOPS }, (_, i) => {\n    const h = i * (360 / (HUE_STOPS - 1))\n    return formatColor({ l: color.l, c: saturation * maxChroma(color.l, h, space), h, a: 1 }, 'oklch')\n  }).join(', ')\n\n  const typed = parseColor(value)\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          id={triggerId}\n          disabled={disabled}\n          // Named by the label AND by its own value, in that order — the same\n          // arrangement Select uses, and for the same reason: `aria-label`\n          // outranks the content, so naming it \"Brand colour\" would tell a\n          // reader the noun and never the answer.\n          aria-labelledby={`${nameId} ${valueId}`}\n          aria-describedby={describedBy}\n          aria-required={ariaRequired}\n          aria-invalid={bad || undefined}\n          className={cn(\n            CONTROL_BASE,\n            bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n            'flex cursor-pointer items-center gap-2.5 text-start',\n            className,\n          )}\n        >\n          {/* Standing outside a Field there is no label to point at, so the\n              trigger carries its own — the name half of the two the\n              `aria-labelledby` above names, with the value as the other. */}\n          {field?.labelId == null && (\n            <span id={nameId} className=\"sr-only\">\n              {label}\n            </span>\n          )}\n          <span\n            aria-hidden=\"true\"\n            className=\"size-4 shrink-0 rounded-(--radius-xs) border border-(--rule-2)\"\n            // The colour as a flat GRADIENT, not as a colour. In the\n            // `background` shorthand a plain colour is only legal in the last\n            // layer, so `background: #a78bfa, <checks>` is invalid and the\n            // whole declaration is dropped — which drew an empty swatch.\n            style={{ background: `linear-gradient(${value}, ${value}), ${checkerboard('4px')}` }}\n          />\n          <span id={valueId} className=\"mono-meta truncate\">\n            {value}\n          </span>\n        </button>\n      </PopoverTrigger>\n\n      <PopoverContent label={`${label} picker`} className=\"flex w-72 flex-col gap-3\">\n        <ToggleGroup\n          type=\"single\"\n          value={format}\n          // `type=\"single\"` commits an empty string when the pressed segment is\n          // the selected one, which here would leave the panel with no notation\n          // to write in at all.\n          onValueChange={(next) => next && commit(color, next as ColorFormat)}\n          aria-label=\"Colour notation\"\n          className=\"w-full\"\n        >\n          {(Object.keys(FORMAT_LABELS) as ColorFormat[]).map((option) => (\n            <ToggleGroupItem key={option} value={option} className=\"flex-1\">\n              {FORMAT_LABELS[option]}\n            </ToggleGroupItem>\n          ))}\n        </ToggleGroup>\n\n        {/* A group of two real sliders rather than a canvas with key handlers:\n            the arrows, Home and End are then the platform's, and a reader is\n            told which axis they are on and where they are along it. The canvas\n            underneath is what a pointer aims at. */}\n        <div\n          ref={planeRef}\n          role=\"group\"\n          aria-label={`${label} field`}\n          onPointerDown={(event) => {\n            if (event.button !== 0) return\n            event.preventDefault()\n            event.currentTarget.setPointerCapture(event.pointerId)\n            trackPointer(event)\n          }}\n          onPointerMove={(event) => {\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) trackPointer(event)\n          }}\n          onPointerUp={(event) => {\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n              event.currentTarget.releasePointerCapture(event.pointerId)\n            }\n          }}\n          // The focus ring has to be drawn HERE: the two sliders that take the\n          // focus are `sr-only`, so the one the browser draws on them is\n          // clipped away with the rest of the box.\n          className=\"relative h-40 w-full cursor-crosshair touch-none select-none rounded-(--radius) focus-within:[outline:var(--focus-w)_solid_var(--focus)] focus-within:[outline-offset:var(--focus-off)]\"\n        >\n          <canvas\n            ref={(node) => {\n              canvasRef.current = node\n              // Closing destroys the canvas and its bitmap with it, so the next\n              // open has to repaint even at the same hue.\n              if (!node) painted.current = ''\n              paint(node)\n            }}\n            width={PLANE_W}\n            height={PLANE_H}\n            aria-hidden=\"true\"\n            className=\"block size-full rounded-(--radius)\"\n          />\n          {/* A hairline over the plane, so the light corner still has an edge. */}\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 rounded-(--radius) shadow-[inset_0_0_0_1px_var(--rule)]\"\n          />\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute -m-1.5 size-3 rounded-(--radius-pill) border-2 border-(--paper) shadow-[0_0_0_1px_var(--rule-hard)]\"\n            style={{ left: `${saturation * 100}%`, top: `${(1 - color.l) * 100}%`, background: opaque }}\n          />\n          <input\n            type=\"range\"\n            min={0}\n            max={100}\n            step={1}\n            value={Math.round(saturation * 100)}\n            aria-label=\"Chroma\"\n            aria-valuetext={`${Math.round(saturation * 100)} percent chroma`}\n            onChange={(event) => setPlane(Number(event.target.value) / 100, color.l)}\n            className=\"sr-only\"\n          />\n          <input\n            type=\"range\"\n            min={0}\n            max={100}\n            step={1}\n            value={Math.round(color.l * 100)}\n            aria-label=\"Lightness\"\n            aria-valuetext={`${Math.round(color.l * 100)} percent lightness`}\n            onChange={(event) => setPlane(saturation, Number(event.target.value) / 100)}\n            className=\"sr-only\"\n          />\n        </div>\n\n        <ColorTrack\n          name=\"Hue\"\n          max={360}\n          step={1}\n          value={color.h}\n          announce={`${Math.round(color.h)} degrees`}\n          thumb={opaque}\n          track={`linear-gradient(to right in oklab, ${hueTrack})`}\n          onChange={(h) => commit({ ...color, h, c: saturation * maxChroma(color.l, h, space) })}\n        />\n        <ColorTrack\n          name=\"Opacity\"\n          max={100}\n          step={1}\n          value={color.a * 100}\n          announce={`${Math.round(color.a * 100)} percent`}\n          thumb={formatColor(color, 'oklch')}\n          track={`linear-gradient(to right, transparent, ${opaque}), ${checkerboard('8px')}`}\n          onChange={(percent) => commit({ ...color, a: percent / 100 })}\n        />\n\n        <Input\n          value={value}\n          spellCheck={false}\n          autoComplete=\"off\"\n          aria-label={`${label} as CSS`}\n          invalid={typed === null}\n          onChange={(event) => {\n            const next = event.target.value\n            emitted.current = next\n            if (controlled === undefined) setUncontrolled(next)\n            const parsed = parseColor(next)\n            if (parsed) {\n              setColor(parsed)\n              setFormat(colorFormat(next))\n            }\n            onValueChange?.(next)\n          }}\n          className=\"mono-meta\"\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\ninterface ColorTrackProps {\n  name: string\n  max: number\n  step: number\n  value: number\n  /** What the number MEANS, since a bare \"212\" on a hue slider is not a reading. */\n  announce: string\n  /** CSS for the strip behind the thumb. */\n  track: string\n  /** The colour the thumb is filled with. */\n  thumb: string\n  onChange: (value: number) => void\n}\n\n/**\n * One channel of the picker, as a native range input.\n *\n * Native rather than this system's `Slider`, and deliberately: the whole point\n * of these two is the strip BEHIND the thumb — a hue ramp taken at the current\n * lightness, an opacity ramp over a checkerboard — and Radix's track is not a\n * surface a caller can paint. A native range gives the same keyboard contract\n * for nothing, which is what made the trade worth taking.\n */\nfunction ColorTrack({ name, max, step, value, announce, track, thumb, onChange }: ColorTrackProps) {\n  return (\n    <label className=\"flex items-center gap-3 text-sm text-(--ink-2)\">\n      <span className=\"w-14 shrink-0\">{name}</span>\n      <input\n        type=\"range\"\n        min={0}\n        max={max}\n        step={step}\n        value={value}\n        aria-valuetext={announce}\n        onChange={(event) => onChange(Number(event.target.value))}\n        style={{ background: track }}\n        className={cn(\n          'h-4 w-full cursor-pointer appearance-none rounded-(--radius-xs) shadow-[inset_0_0_0_1px_var(--rule)]',\n          '[&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-(--radius-xs) [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-(--paper) [&::-webkit-slider-thumb]:bg-(--thumb) [&::-webkit-slider-thumb]:bg-clip-padding [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_var(--rule-hard)]',\n          '[&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-(--radius-xs) [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-(--paper) [&::-moz-range-thumb]:bg-(--thumb) [&::-moz-range-thumb]:bg-clip-padding [&::-moz-range-thumb]:shadow-[0_0_0_1px_var(--rule-hard)]',\n        )}\n        // Read by both thumb rules above; a pseudo-element cannot take a style\n        // attribute of its own, so the colour has to arrive as a variable.\n        ref={(node) => {\n          node?.style.setProperty('--thumb', thumb)\n        }}\n      />\n    </label>\n  )\n}\n\nexport default ColorPicker\n"],"mappings":";AAgQQ,SAuBI,KAvBJ;AA9PR,SAAS,WAAW,OAAO,QAAQ,gBAAmC;AACtE,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,cAAc,gBAAgB,iBAAiB;AACxD,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,aAAa;AACtB,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,aAAa,uBAAuB;AAG7C,MAAM,UAAU;AAChB,MAAM,UAAU;AAGhB,MAAM,YAAY;AAElB,MAAM,QAAe,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE;AAE9C,MAAM,gBAA6C;AAAA,EACjD,KAAK;AAAA,EACL,OAAO;AAAA;AAAA;AAAA;AAAA,EAIP,IAAI;AACN;AAQA,MAAM,eAAe,CAAC,WACpB,4EAA4E,MAAM,IAAI,MAAM;AAiEvF,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,iBAAiB;AACnB,GAAqB;AACnB,gBAAc,eAAe,SAAS,OAAO,uCAAuC;AACpF,QAAM,MAAM,UAAU,SAAS,WAAW;AAE1C,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,YAAY,MAAM;AACxB,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,GAAG,SAAS;AAC5B,QAAM,SAAS,OAAO,WAAW,GAAG,SAAS;AAE7C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,YAAY;AAC7D,QAAM,QAAQ,cAAc;AAE5B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAgB,MAAM,WAAW,YAAY,KAAK,KAAK;AACjF,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsB,MAAM,YAAY,YAAY,CAAC;AAGjF,QAAM,UAAU,OAAsB,IAAI;AAK1C,QAAM,gBAAgB,OAAO,CAAC;AAE9B,YAAU,MAAM;AACd,QAAI,UAAU,QAAQ,QAAS;AAC/B,UAAM,SAAS,WAAW,KAAK;AAC/B,QAAI,CAAC,OAAQ;AAIb,aAAS,CAAC,UAAU,EAAE,GAAG,QAAQ,GAAG,OAAO,IAAI,OAAO,KAAK,IAAI,OAAO,EAAE,EAAE;AAC1E,cAAU,YAAY,KAAK,CAAC;AAAA,EAC9B,GAAG,CAAC,KAAK,CAAC;AAIV,QAAM,QAAoB,WAAW,QAAQ,SAAS;AACtD,QAAM,UAAU,UAAU,MAAM,GAAG,MAAM,GAAG,KAAK;AACjD,QAAM,aAAa,UAAU,IAAI,MAAM,MAAM,IAAI,OAAO,IAAI,cAAc;AAE1E,YAAU,MAAM;AACd,QAAI,UAAU,EAAG,eAAc,UAAU;AAAA,EAC3C,GAAG,CAAC,SAAS,UAAU,CAAC;AAExB,QAAM,SAAS,CAAC,MAAa,aAA0B,WAAW;AAChE,UAAM,SAAS,eAAe,UAAU,OAAO,SAAS,MAAM,eAAe,OAAO,OAAO,MAAM;AACjG,aAAS,MAAM;AACf,cAAU,UAAU;AACpB,UAAM,OAAO,YAAY,QAAQ,UAAU;AAC3C,YAAQ,UAAU;AAClB,QAAI,eAAe,OAAW,iBAAgB,IAAI;AAClD,oBAAgB,IAAI;AAAA,EACtB;AAGA,QAAM,WAAW,CAAC,gBAAwB,cAAsB;AAC9D,kBAAc,UAAU;AACxB,WAAO,EAAE,GAAG,OAAO,GAAG,WAAW,GAAG,iBAAiB,UAAU,WAAW,MAAM,GAAG,KAAK,EAAE,CAAC;AAAA,EAC7F;AAEA,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,UAAU,OAAe,EAAE;AAEjC,QAAM,eAAe,CAAC,UAAwC;AAC5D,UAAM,OAAO,SAAS,SAAS,sBAAsB;AACrD,QAAI,CAAC,QAAQ,KAAK,UAAU,KAAK,KAAK,WAAW,EAAG;AACpD;AAAA,MACE,OAAO,MAAM,UAAU,KAAK,QAAQ,KAAK,KAAK;AAAA,MAC9C,MAAM,KAAK,MAAM,UAAU,KAAK,OAAO,KAAK,MAAM;AAAA,IACpD;AAAA,EACF;AAYA,QAAM,QAAQ,CAAC,WAAqC;AAClD,QAAI,CAAC,OAAQ;AACb,UAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,CAAC,CAAC,IAAI,KAAK;AAC1C,QAAI,QAAQ,YAAY,IAAK;AAC7B,UAAM,UAAU,OAAO,WAAW,IAAI;AAKtC,QAAI,CAAC,WAAW,OAAO,QAAQ,oBAAoB,WAAY;AAC/D,YAAQ,UAAU;AAElB,UAAM,SAAS,QAAQ,gBAAgB,SAAS,OAAO;AACvD,aAAS,IAAI,GAAG,IAAI,SAAS,KAAK;AAChC,YAAM,IAAI,IAAI,KAAK,UAAU;AAI7B,YAAM,SAAS,UAAU,GAAG,MAAM,GAAG,KAAK;AAC1C,eAAS,IAAI,GAAG,IAAI,SAAS,KAAK;AAChC,cAAM,MAAM,WAAW,EAAE,GAAG,GAAI,KAAK,UAAU,KAAM,QAAQ,GAAG,MAAM,GAAG,GAAG,EAAE,GAAG,MAAM;AACvF,cAAM,MAAM,IAAI,UAAU,KAAK;AAC/B,iBAAS,UAAU,GAAG,UAAU,GAAG,WAAW;AAC5C,iBAAO,KAAK,KAAK,OAAO,IAAI,KAAK,MAAM,MAAM,IAAI,OAAO,KAAK,CAAC,IAAI,GAAG;AAAA,QACvE;AACA,eAAO,KAAK,KAAK,CAAC,IAAI;AAAA,MACxB;AAAA,IACF;AACA,YAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,EACnC;AAGA,YAAU,MAAM;AACd,UAAM,UAAU,OAAO;AAAA,EACzB,CAAC;AAED,QAAM,SAAS,YAAY,EAAE,GAAG,OAAO,GAAG,EAAE,GAAG,OAAO;AACtD,QAAM,WAAW,MAAM,KAAK,EAAE,QAAQ,UAAU,GAAG,CAAC,GAAG,MAAM;AAC3D,UAAM,IAAI,KAAK,OAAO,YAAY;AAClC,WAAO,YAAY,EAAE,GAAG,MAAM,GAAG,GAAG,aAAa,UAAU,MAAM,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,OAAO;AAAA,EACnG,CAAC,EAAE,KAAK,IAAI;AAEZ,QAAM,QAAQ,WAAW,KAAK;AAE9B,SACE,qBAAC,WACC;AAAA,wBAAC,kBAAe,SAAO,MACrB;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI;AAAA,QACJ;AAAA,QAKA,mBAAiB,GAAG,MAAM,IAAI,OAAO;AAAA,QACrC,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,gBAAc,OAAO;AAAA,QACrB,WAAW;AAAA,UACT;AAAA,UACA,MAAM,eAAe,UAAU,eAAe;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,QAKC;AAAA,iBAAO,WAAW,QACjB,oBAAC,UAAK,IAAI,QAAQ,WAAU,WACzB,iBACH;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAU;AAAA,cAKV,OAAO,EAAE,YAAY,mBAAmB,KAAK,KAAK,KAAK,MAAM,aAAa,KAAK,CAAC,GAAG;AAAA;AAAA,UACrF;AAAA,UACA,oBAAC,UAAK,IAAI,SAAS,WAAU,sBAC1B,iBACH;AAAA;AAAA;AAAA,IACF,GACF;AAAA,IAEA,qBAAC,kBAAe,OAAO,GAAG,KAAK,WAAW,WAAU,4BAClD;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UAIP,eAAe,CAAC,SAAS,QAAQ,OAAO,OAAO,IAAmB;AAAA,UAClE,cAAW;AAAA,UACX,WAAU;AAAA,UAER,iBAAO,KAAK,aAAa,EAAoB,IAAI,CAAC,WAClD,oBAAC,mBAA6B,OAAO,QAAQ,WAAU,UACpD,wBAAc,MAAM,KADD,MAEtB,CACD;AAAA;AAAA,MACH;AAAA,MAMA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,cAAY,GAAG,KAAK;AAAA,UACpB,eAAe,CAAC,UAAU;AACxB,gBAAI,MAAM,WAAW,EAAG;AACxB,kBAAM,eAAe;AACrB,kBAAM,cAAc,kBAAkB,MAAM,SAAS;AACrD,yBAAa,KAAK;AAAA,UACpB;AAAA,UACA,eAAe,CAAC,UAAU;AACxB,gBAAI,MAAM,cAAc,kBAAkB,MAAM,SAAS,EAAG,cAAa,KAAK;AAAA,UAChF;AAAA,UACA,aAAa,CAAC,UAAU;AACtB,gBAAI,MAAM,cAAc,kBAAkB,MAAM,SAAS,GAAG;AAC1D,oBAAM,cAAc,sBAAsB,MAAM,SAAS;AAAA,YAC3D;AAAA,UACF;AAAA,UAIA,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK,CAAC,SAAS;AACb,4BAAU,UAAU;AAGpB,sBAAI,CAAC,KAAM,SAAQ,UAAU;AAC7B,wBAAM,IAAI;AAAA,gBACZ;AAAA,gBACA,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,eAAY;AAAA,gBACZ,WAAU;AAAA;AAAA,YACZ;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACV,OAAO,EAAE,MAAM,GAAG,aAAa,GAAG,KAAK,KAAK,IAAI,IAAI,MAAM,KAAK,GAAG,KAAK,YAAY,OAAO;AAAA;AAAA,YAC5F;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,KAAK;AAAA,gBACL,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN,OAAO,KAAK,MAAM,aAAa,GAAG;AAAA,gBAClC,cAAW;AAAA,gBACX,kBAAgB,GAAG,KAAK,MAAM,aAAa,GAAG,CAAC;AAAA,gBAC/C,UAAU,CAAC,UAAU,SAAS,OAAO,MAAM,OAAO,KAAK,IAAI,KAAK,MAAM,CAAC;AAAA,gBACvE,WAAU;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,KAAK;AAAA,gBACL,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN,OAAO,KAAK,MAAM,MAAM,IAAI,GAAG;AAAA,gBAC/B,cAAW;AAAA,gBACX,kBAAgB,GAAG,KAAK,MAAM,MAAM,IAAI,GAAG,CAAC;AAAA,gBAC5C,UAAU,CAAC,UAAU,SAAS,YAAY,OAAO,MAAM,OAAO,KAAK,IAAI,GAAG;AAAA,gBAC1E,WAAU;AAAA;AAAA,YACZ;AAAA;AAAA;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO,MAAM;AAAA,UACb,UAAU,GAAG,KAAK,MAAM,MAAM,CAAC,CAAC;AAAA,UAChC,OAAO;AAAA,UACP,OAAO,sCAAsC,QAAQ;AAAA,UACrD,UAAU,CAAC,MAAM,OAAO,EAAE,GAAG,OAAO,GAAG,GAAG,aAAa,UAAU,MAAM,GAAG,GAAG,KAAK,EAAE,CAAC;AAAA;AAAA,MACvF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO,MAAM,IAAI;AAAA,UACjB,UAAU,GAAG,KAAK,MAAM,MAAM,IAAI,GAAG,CAAC;AAAA,UACtC,OAAO,YAAY,OAAO,OAAO;AAAA,UACjC,OAAO,0CAA0C,MAAM,MAAM,aAAa,KAAK,CAAC;AAAA,UAChF,UAAU,CAAC,YAAY,OAAO,EAAE,GAAG,OAAO,GAAG,UAAU,IAAI,CAAC;AAAA;AAAA,MAC9D;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,YAAY;AAAA,UACZ,cAAa;AAAA,UACb,cAAY,GAAG,KAAK;AAAA,UACpB,SAAS,UAAU;AAAA,UACnB,UAAU,CAAC,UAAU;AACnB,kBAAM,OAAO,MAAM,OAAO;AAC1B,oBAAQ,UAAU;AAClB,gBAAI,eAAe,OAAW,iBAAgB,IAAI;AAClD,kBAAM,SAAS,WAAW,IAAI;AAC9B,gBAAI,QAAQ;AACV,uBAAS,MAAM;AACf,wBAAU,YAAY,IAAI,CAAC;AAAA,YAC7B;AACA,4BAAgB,IAAI;AAAA,UACtB;AAAA,UACA,WAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,KACF;AAEJ;AAyBA,SAAS,WAAW,EAAE,MAAM,KAAK,MAAM,OAAO,UAAU,OAAO,OAAO,SAAS,GAAoB;AACjG,SACE,qBAAC,WAAM,WAAU,kDACf;AAAA,wBAAC,UAAK,WAAU,iBAAiB,gBAAK;AAAA,IACtC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAgB;AAAA,QAChB,UAAU,CAAC,UAAU,SAAS,OAAO,MAAM,OAAO,KAAK,CAAC;AAAA,QACxD,OAAO,EAAE,YAAY,MAAM;AAAA,QAC3B,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAGA,KAAK,CAAC,SAAS;AACb,gBAAM,MAAM,YAAY,WAAW,KAAK;AAAA,QAC1C;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/components/Combobox/Combobox.d.ts

@@ -9,7 +9,13 @@ interface ComboboxOption {
 }
 interface CommonProps {
     options: ComboboxOption[];
-    /** Names the control. Required — the trigger's text is a value, not a label. */
+    /**
+     * Names the control. Required — the trigger's text is a value, not a label.
+     *
+     * Announced together with the summary rather than instead of it, so a reader
+     * hears "Tags, 3 selected". Inside a `Field` with a label, that label names
+     * the trigger and this one is not repeated.
+     */
     label: string;
     /** Shown on the trigger when nothing is chosen. */
     placeholder?: string;
@@ -19,6 +25,14 @@ interface CommonProps {
     emptyMessage?: string;
     disabled?: boolean;
     className?: string;
+    /** The TRIGGER's id — the element a label points at. A `Field` sets it. */
+    id?: string;
+    /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */
+    'aria-describedby'?: string;
+    /** Paints the resting border with `--danger` and is announced. A `Field` sets it from `error`. */
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /** Announced on the trigger. A `Field` sets it from `required`. */
+    'aria-required'?: boolean;
 }
 interface SingleProps extends CommonProps {
     multiple?: false;

package/dist/components/Combobox/Combobox.js

@@ -1,8 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronsUpDown, X } from "lucide-react";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { cn } from "../../lib/cn.js";
+import { CONTROL_BORDER, isInvalid } from "../../lib/control.js";
+import { useFieldControl } from "../Field/field-control.js";
+import { warnBlankName } from "../../lib/warn.js";
 import {
   Command,
   CommandEmpty,
@@ -21,9 +24,20 @@ function Combobox(props) {
     searchPlaceholder = "Search\u2026",
     emptyMessage = "Nothing matches.",
     disabled = false,
-    className
+    className,
+    id,
+    "aria-describedby": describedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired
   } = props;
   const multiple = props.multiple === true;
+  warnBlankName("Combobox", "label", label, "the trigger is announced with no name");
+  const field = useFieldControl();
+  const generated = useId();
+  const triggerId = id ?? generated;
+  const summaryId = `${triggerId}-value`;
+  const nameId = field?.labelId ?? `${triggerId}-name`;
+  const bad = isInvalid(void 0, ariaInvalid);
   const [open, setOpen] = useState(false);
   const [uncontrolled, setUncontrolled] = useState(() => {
     if (props.multiple === true) return props.defaultValue ?? [];
@@ -51,16 +65,22 @@ function Combobox(props) {
       PopoverTrigger,
       {
         role: "combobox",
+        id: triggerId,
         "aria-expanded": open,
-        "aria-label": label,
+        "aria-labelledby": `${nameId} ${summaryId}`,
+        "aria-describedby": describedBy,
+        "aria-required": ariaRequired,
+        "aria-invalid": bad || void 0,
         disabled,
         className: cn(
-          "group flex w-full items-center justify-between gap-2 rounded-(--radius) border border-(--rule-2) bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
+          "group flex w-full items-center justify-between gap-2 rounded-(--radius) border bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
+          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,
           chosen.length > 0 ? "text-(--ink)" : "text-(--ink-3-aa)",
           className
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: summary }),
+          field?.labelId == null && /* @__PURE__ */ jsx("span", { id: nameId, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx("span", { id: summaryId, className: "truncate", children: summary }),
           /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
             multiple && chosen.length > 0 && // A `<span role="button">` rather than a nested `<button>`, which
             // is invalid inside the trigger and which browsers reparent — the

package/dist/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["'use client'\n\nimport { Check, ChevronsUpDown, X } from 'lucide-react'\nimport { useState } from 'react'\nimport { cn } from '../../lib/cn'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '../Command/Command'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\n\nexport interface ComboboxOption {\n  value: string\n  label: string\n  /** Extra text matched by the filter but not shown as the label. */\n  keywords?: string[]\n  disabled?: boolean\n}\n\ninterface CommonProps {\n  options: ComboboxOption[]\n  /** Names the control. Required — the trigger's text is a value, not a label. */\n  label: string\n  /** Shown on the trigger when nothing is chosen. */\n  placeholder?: string\n  /** Placeholder inside the filter field. */\n  searchPlaceholder?: string\n  /** Shown when the filter matches nothing. Say what WOULD match. */\n  emptyMessage?: string\n  disabled?: boolean\n  className?: string\n}\n\ninterface SingleProps extends CommonProps {\n  multiple?: false\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\ninterface MultipleProps extends CommonProps {\n  /**\n   * Several at once. The trigger then summarises the choice rather than naming\n   * it — \"3 selected\" past a threshold, because a trigger that grows with its\n   * value reflows the form every time someone picks another one.\n   */\n  multiple: true\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (value: string[]) => void\n}\n\nexport type ComboboxProps = SingleProps | MultipleProps\n\n/** How many labels the trigger prints before it starts counting instead. */\nconst SUMMARISE_AFTER = 2\n\n/**\n * A select you can type into, choosing one or several.\n *\n * The line against `Select` is length, and it is not a matter of taste: a\n * styled select is better up to roughly a dozen options, because a list nobody\n * can filter is faster to scan than one they have to think about. Past that,\n * this is the right answer.\n *\n * Filtering, the highlighted row and the arrow keys come from cmdk, which\n * implements the ARIA combobox pattern properly: the highlight moves through\n * `aria-activedescendant` while focus stays in the input. Hand-rolled comboboxes\n * move focus into the list instead, and the typed text stops being editable.\n *\n * Controlled or uncontrolled, like every other form control here.\n *\n * @example\n * <Combobox label=\"Framework\" options={FRAMEWORKS} placeholder=\"Pick one\" />\n * @example\n * <Combobox multiple label=\"Tags\" options={TAGS} />\n */\nexport function Combobox(props: ComboboxProps) {\n  const {\n    options,\n    label,\n    placeholder = 'Select…',\n    searchPlaceholder = 'Search…',\n    emptyMessage = 'Nothing matches.',\n    disabled = false,\n    className,\n  } = props\n  const multiple = props.multiple === true\n\n  const [open, setOpen] = useState(false)\n  const [uncontrolled, setUncontrolled] = useState<string[]>(() => {\n    if (props.multiple === true) return props.defaultValue ?? []\n    return props.defaultValue ? [props.defaultValue] : []\n  })\n\n  const controlled =\n    props.multiple === true\n      ? props.value\n      : props.value === undefined\n        ? undefined\n        : props.value === ''\n          ? []\n          : [props.value]\n  const current = controlled ?? uncontrolled\n\n  const commit = (next: string[]) => {\n    if (controlled === undefined) setUncontrolled(next)\n    if (props.multiple === true) props.onValueChange?.(next)\n    else props.onValueChange?.(next[0] ?? '')\n  }\n\n  const choose = (option: string) => {\n    if (multiple) {\n      // Toggling, and the panel stays open — picking three things should not\n      // cost three round trips through the trigger.\n      commit(current.includes(option) ? current.filter((v) => v !== option) : [...current, option])\n      return\n    }\n    // Choosing the selected option again clears it, which is what a reader\n    // expects from a control whose value is optional.\n    commit(current.includes(option) ? [] : [option])\n    setOpen(false)\n  }\n\n  const chosen = options.filter((option) => current.includes(option.value))\n  const summary =\n    chosen.length === 0\n      ? placeholder\n      : chosen.length <= SUMMARISE_AFTER\n        ? chosen.map((option) => option.label).join(', ')\n        : `${chosen.length} selected`\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        // A combobox trigger is a button that OPENS a listbox; the roles for\n        // the list itself belong to cmdk inside the panel.\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-label={label}\n        disabled={disabled}\n        className={cn(\n          'group flex w-full items-center justify-between gap-2 rounded-(--radius) border border-(--rule-2) bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n          chosen.length > 0 ? 'text-(--ink)' : 'text-(--ink-3-aa)',\n          className,\n        )}\n      >\n        <span className=\"truncate\">{summary}</span>\n        <span className=\"flex shrink-0 items-center gap-1\">\n          {multiple && chosen.length > 0 && (\n            // A `<span role=\"button\">` rather than a nested `<button>`, which\n            // is invalid inside the trigger and which browsers reparent — the\n            // clear control then falls outside the field entirely.\n            <span\n              role=\"button\"\n              tabIndex={0}\n              aria-label={`Clear ${label}`}\n              onClick={(event) => {\n                event.preventDefault()\n                event.stopPropagation()\n                commit([])\n              }}\n              onKeyDown={(event) => {\n                if (event.key !== 'Enter' && event.key !== ' ') return\n                event.preventDefault()\n                event.stopPropagation()\n                commit([])\n              }}\n              className=\"grid size-5 cursor-pointer place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n            >\n              <X size={12} strokeWidth={2} aria-hidden />\n            </span>\n          )}\n          <ChevronsUpDown size={14} strokeWidth={1.5} aria-hidden className=\"text-(--ink-3-aa)\" />\n        </span>\n      </PopoverTrigger>\n      <PopoverContent\n        label={label}\n        // `overflow-hidden` so the panel's own corners clip the square-cornered\n        // command list inside it; without it the list's edges poked through the\n        // radius and the two bottom corners looked chipped.\n        className=\"w-(--radix-popover-trigger-width) overflow-hidden p-0\"\n        align=\"start\"\n      >\n        <Command label={`${label}: ${searchPlaceholder}`} className=\"rounded-none border-0\">\n          {/* The panel's own name is \"<label>: <placeholder>\", set on Command\n              above. cmdk points the input's aria-labelledby at it, and\n              aria-labelledby beats aria-label — so naming the input directly\n              did nothing, and a screen reader met two comboboxes called \"Tags\",\n              one inside the other. */}\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => {\n                const selected = current.includes(option.value)\n                return (\n                  <CommandItem\n                    key={option.value}\n                    value={option.value}\n                    keywords={[option.label, ...(option.keywords ?? [])]}\n                    disabled={option.disabled}\n                    onSelect={choose}\n                    aria-selected={selected}\n                  >\n                    <span\n                      className={cn(\n                        'grid size-4 shrink-0 place-items-center transition-opacity duration-(--duration-fast)',\n                        multiple &&\n                          'rounded-(--radius-sm) border border-(--rule-2) text-(--accent-foreground) data-[on=true]:border-(--accent) data-[on=true]:bg-(--accent)',\n                      )}\n                      data-on={selected}\n                    >\n                      <Check\n                        size={12}\n                        strokeWidth={2.5}\n                        aria-hidden\n                        className={selected ? 'opacity-100' : 'opacity-0'}\n                      />\n                    </span>\n                    {option.label}\n                  </CommandItem>\n                )\n              })}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport default Combobox\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["'use client'\n\nimport { Check, ChevronsUpDown, X } from 'lucide-react'\nimport { useId, useState } from 'react'\nimport { cn } from '../../lib/cn'\nimport { CONTROL_BORDER, isInvalid } from '../../lib/control'\nimport { useFieldControl } from '../Field/field-control'\nimport { warnBlankName } from '../../lib/warn'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '../Command/Command'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\n\nexport interface ComboboxOption {\n  value: string\n  label: string\n  /** Extra text matched by the filter but not shown as the label. */\n  keywords?: string[]\n  disabled?: boolean\n}\n\ninterface CommonProps {\n  options: ComboboxOption[]\n  /**\n   * Names the control. Required — the trigger's text is a value, not a label.\n   *\n   * Announced together with the summary rather than instead of it, so a reader\n   * hears \"Tags, 3 selected\". Inside a `Field` with a label, that label names\n   * the trigger and this one is not repeated.\n   */\n  label: string\n  /** Shown on the trigger when nothing is chosen. */\n  placeholder?: string\n  /** Placeholder inside the filter field. */\n  searchPlaceholder?: string\n  /** Shown when the filter matches nothing. Say what WOULD match. */\n  emptyMessage?: string\n  disabled?: boolean\n  className?: string\n  /** The TRIGGER's id — the element a label points at. A `Field` sets it. */\n  id?: string\n  /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */\n  'aria-describedby'?: string\n  /** Paints the resting border with `--danger` and is announced. A `Field` sets it from `error`. */\n  'aria-invalid'?: boolean | 'true' | 'false'\n  /** Announced on the trigger. A `Field` sets it from `required`. */\n  'aria-required'?: boolean\n}\n\ninterface SingleProps extends CommonProps {\n  multiple?: false\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\ninterface MultipleProps extends CommonProps {\n  /**\n   * Several at once. The trigger then summarises the choice rather than naming\n   * it — \"3 selected\" past a threshold, because a trigger that grows with its\n   * value reflows the form every time someone picks another one.\n   */\n  multiple: true\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (value: string[]) => void\n}\n\nexport type ComboboxProps = SingleProps | MultipleProps\n\n/** How many labels the trigger prints before it starts counting instead. */\nconst SUMMARISE_AFTER = 2\n\n/**\n * A select you can type into, choosing one or several.\n *\n * The line against `Select` is length, and it is not a matter of taste: a\n * styled select is better up to roughly a dozen options, because a list nobody\n * can filter is faster to scan than one they have to think about. Past that,\n * this is the right answer.\n *\n * Filtering, the highlighted row and the arrow keys come from cmdk, which\n * implements the ARIA combobox pattern properly: the highlight moves through\n * `aria-activedescendant` while focus stays in the input. Hand-rolled comboboxes\n * move focus into the list instead, and the typed text stops being editable.\n *\n * Controlled or uncontrolled, like every other form control here.\n *\n * @example\n * <Combobox label=\"Framework\" options={FRAMEWORKS} placeholder=\"Pick one\" />\n * @example\n * <Combobox multiple label=\"Tags\" options={TAGS} />\n */\nexport function Combobox(props: ComboboxProps) {\n  const {\n    options,\n    label,\n    placeholder = 'Select…',\n    searchPlaceholder = 'Search…',\n    emptyMessage = 'Nothing matches.',\n    disabled = false,\n    className,\n    id,\n    'aria-describedby': describedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n  } = props\n  const multiple = props.multiple === true\n  warnBlankName('Combobox', 'label', label, 'the trigger is announced with no name')\n\n  const field = useFieldControl()\n  const generated = useId()\n  const triggerId = id ?? generated\n  const summaryId = `${triggerId}-value`\n  const nameId = field?.labelId ?? `${triggerId}-name`\n  const bad = isInvalid(undefined, ariaInvalid)\n\n  const [open, setOpen] = useState(false)\n  const [uncontrolled, setUncontrolled] = useState<string[]>(() => {\n    if (props.multiple === true) return props.defaultValue ?? []\n    return props.defaultValue ? [props.defaultValue] : []\n  })\n\n  const controlled =\n    props.multiple === true\n      ? props.value\n      : props.value === undefined\n        ? undefined\n        : props.value === ''\n          ? []\n          : [props.value]\n  const current = controlled ?? uncontrolled\n\n  const commit = (next: string[]) => {\n    if (controlled === undefined) setUncontrolled(next)\n    if (props.multiple === true) props.onValueChange?.(next)\n    else props.onValueChange?.(next[0] ?? '')\n  }\n\n  const choose = (option: string) => {\n    if (multiple) {\n      // Toggling, and the panel stays open — picking three things should not\n      // cost three round trips through the trigger.\n      commit(current.includes(option) ? current.filter((v) => v !== option) : [...current, option])\n      return\n    }\n    // Choosing the selected option again clears it, which is what a reader\n    // expects from a control whose value is optional.\n    commit(current.includes(option) ? [] : [option])\n    setOpen(false)\n  }\n\n  const chosen = options.filter((option) => current.includes(option.value))\n  const summary =\n    chosen.length === 0\n      ? placeholder\n      : chosen.length <= SUMMARISE_AFTER\n        ? chosen.map((option) => option.label).join(', ')\n        : `${chosen.length} selected`\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        // A combobox trigger is a button that OPENS a listbox; the roles for\n        // the list itself belong to cmdk inside the panel.\n        role=\"combobox\"\n        id={triggerId}\n        aria-expanded={open}\n        // The label and the summary, in that order — never the label alone.\n        // `aria-label` outranks the trigger's own text, so a reader was told\n        // \"Tags\" and never \"3 selected\". The two ids are named explicitly\n        // rather than pointing at the whole trigger, which would drag the clear\n        // control's own name into the value.\n        aria-labelledby={`${nameId} ${summaryId}`}\n        aria-describedby={describedBy}\n        aria-required={ariaRequired}\n        aria-invalid={bad || undefined}\n        disabled={disabled}\n        className={cn(\n          'group flex w-full items-center justify-between gap-2 rounded-(--radius) border bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n          chosen.length > 0 ? 'text-(--ink)' : 'text-(--ink-3-aa)',\n          className,\n        )}\n      >\n        {field?.labelId == null && (\n          <span id={nameId} className=\"sr-only\">\n            {label}\n          </span>\n        )}\n        <span id={summaryId} className=\"truncate\">\n          {summary}\n        </span>\n        <span className=\"flex shrink-0 items-center gap-1\">\n          {multiple && chosen.length > 0 && (\n            // A `<span role=\"button\">` rather than a nested `<button>`, which\n            // is invalid inside the trigger and which browsers reparent — the\n            // clear control then falls outside the field entirely.\n            <span\n              role=\"button\"\n              tabIndex={0}\n              aria-label={`Clear ${label}`}\n              onClick={(event) => {\n                event.preventDefault()\n                event.stopPropagation()\n                commit([])\n              }}\n              onKeyDown={(event) => {\n                if (event.key !== 'Enter' && event.key !== ' ') return\n                event.preventDefault()\n                event.stopPropagation()\n                commit([])\n              }}\n              className=\"grid size-5 cursor-pointer place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n            >\n              <X size={12} strokeWidth={2} aria-hidden />\n            </span>\n          )}\n          <ChevronsUpDown size={14} strokeWidth={1.5} aria-hidden className=\"text-(--ink-3-aa)\" />\n        </span>\n      </PopoverTrigger>\n      <PopoverContent\n        label={label}\n        // `overflow-hidden` so the panel's own corners clip the square-cornered\n        // command list inside it; without it the list's edges poked through the\n        // radius and the two bottom corners looked chipped.\n        className=\"w-(--radix-popover-trigger-width) overflow-hidden p-0\"\n        align=\"start\"\n      >\n        <Command label={`${label}: ${searchPlaceholder}`} className=\"rounded-none border-0\">\n          {/* The panel's own name is \"<label>: <placeholder>\", set on Command\n              above. cmdk points the input's aria-labelledby at it, and\n              aria-labelledby beats aria-label — so naming the input directly\n              did nothing, and a screen reader met two comboboxes called \"Tags\",\n              one inside the other. */}\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => {\n                const selected = current.includes(option.value)\n                return (\n                  <CommandItem\n                    key={option.value}\n                    value={option.value}\n                    keywords={[option.label, ...(option.keywords ?? [])]}\n                    disabled={option.disabled}\n                    onSelect={choose}\n                    aria-selected={selected}\n                  >\n                    <span\n                      className={cn(\n                        'grid size-4 shrink-0 place-items-center transition-opacity duration-(--duration-fast)',\n                        multiple &&\n                          'rounded-(--radius-sm) border border-(--rule-2) text-(--accent-foreground) data-[on=true]:border-(--accent) data-[on=true]:bg-(--accent)',\n                      )}\n                      data-on={selected}\n                    >\n                      <Check\n                        size={12}\n                        strokeWidth={2.5}\n                        aria-hidden\n                        className={selected ? 'opacity-100' : 'opacity-0'}\n                      />\n                    </span>\n                    {option.label}\n                  </CommandItem>\n                )\n              })}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport default Combobox\n"],"mappings":"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","names":[]}

package/dist/components/Command/Command.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import { Command as Command$1 } from 'cmdk';
+import { LucideIcon } from 'lucide-react';
 
 /**
  * A filterable list of actions — the ⌘K surface.
@@ -66,12 +67,13 @@ interface CommandItemProps extends ComponentProps<typeof Command$1.Item> {
     /** A shortcut printed at the end of the row. */
     shortcut?: string;
     /**
-     * A leading glyph. Pass the icon element, sized 16.
+     * A leading glyph. Either spelling — `icon={<Settings size={16} />}` passes
+     * the element, `icon={Settings}` passes the component and this sizes it.
      *
      * It is what makes a long list scannable — the eye sorts by shape before it
      * reads, and forty identical rows of text defeat that.
      */
-    icon?: ReactNode;
+    icon?: LucideIcon | ReactNode;
     /**
      * A quiet note at the end of the row — what kind of thing this is, or its
      * current state. Not a description: a palette that prints a sentence per row

package/dist/components/Command/Command.js

@@ -2,7 +2,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
+import { isValidElement } from "react";
 import { cn } from "../../lib/cn.js";
+function isIconComponent(icon) {
+  if (isValidElement(icon)) return false;
+  if (typeof icon === "function") return true;
+  if (typeof icon !== "object" || icon === null) return false;
+  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !("then" in icon);
+}
+function iconNode(icon) {
+  if (!isIconComponent(icon)) return icon;
+  const Icon = icon;
+  return /* @__PURE__ */ jsx(Icon, { size: 16, strokeWidth: 1.5, "aria-hidden": true });
+}
 import { Dialog, DialogContent } from "../Dialog/Dialog.js";
 import { Kbd } from "../Kbd/Kbd.js";
 function Command({
@@ -13,7 +25,7 @@ function Command({
     CommandPrimitive,
     {
       className: cn(
-        "flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) panel-blur",
+        "flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) shadow-(--panel-lift) panel-blur",
         className
       ),
       ...props
@@ -122,7 +134,7 @@ function CommandItem({ shortcut, icon, meta, className, children, ...props }) {
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4", children: icon }),
+        icon && /* @__PURE__ */ jsx("span", { className: "grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4", children: iconNode(icon) }),
         children,
         meta && /* @__PURE__ */ jsx("span", { className: "ms-auto ps-3 mono-meta text-(--ink-3-aa)", children: meta }),
         shortcut && /* @__PURE__ */ jsx(Kbd, { className: cn(meta ? "" : "ms-auto"), children: shortcut })

package/dist/components/Command/Command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { Dialog, DialogContent } from '../Dialog/Dialog'\nimport { Kbd } from '../Kbd/Kbd'\n\n/**\n * A filterable list of actions — the ⌘K surface.\n *\n * Built on cmdk rather than on a `Select` or a menu, because the interaction is\n * neither: the list is filtered as you type, the highlighted row moves with the\n * arrow keys while focus STAYS in the input, and Enter runs the highlighted\n * row. That is the ARIA combobox pattern, and it is the part nobody should\n * hand-roll — `aria-activedescendant` moving without focus moving is precisely\n * where a home-made palette stops working with a screen reader.\n *\n * @example\n * <Command label=\"Command palette\">\n *   <CommandInput placeholder=\"Type a command…\" />\n *   <CommandList>\n *     <CommandEmpty>Nothing matches.</CommandEmpty>\n *     <CommandGroup heading=\"Navigate\">\n *       <CommandItem onSelect={go}>Components</CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </Command>\n */\nexport function Command({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) panel-blur',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The filter field. Carries the search icon and the combobox semantics. */\nexport function CommandInput({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex items-center gap-3 border-b border-(--rule) px-4\">\n      <Search size={18} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'h-13 w-full bg-transparent text-[15px] text-(--ink) outline-none placeholder:text-(--ink-3-aa)',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-72 overflow-y-auto overflow-x-hidden p-2 scroll-slim', className)}\n      {...props}\n    />\n  )\n}\n\n/** Shown when the filter matches nothing. Say what would match, not \"no results\". */\nexport function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"px-3 py-10 text-center text-sm text-(--ink-3-aa)\"\n      {...props}\n    />\n  )\n}\n\n/**\n * The key-hint strip along the bottom.\n *\n * A palette is a keyboard surface whose keys are invisible: nothing on screen\n * says the arrows move the row or that Enter runs it, and a reader who reaches\n * for the mouse has been failed by the design rather than by themselves.\n *\n * @example\n * <CommandFooter>\n *   <CommandHint keys={['↑', '↓']}>navigate</CommandHint>\n *   <CommandHint keys={['↵']}>open</CommandHint>\n * </CommandFooter>\n */\nexport function CommandFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-4 border-t border-(--rule) bg-(--paper-2) px-3.5 py-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandHintProps extends Omit<ComponentProps<'span'>, 'children'> {\n  /** The keys this hint describes, printed as `Kbd` chips. */\n  keys: string[]\n  /** What they do — a verb, lowercase, no sentence. */\n  children: ReactNode\n}\n\n/** One key-and-verb pair inside a `CommandFooter`. */\nexport function CommandHint({ keys, children, className, ...props }: CommandHintProps) {\n  return (\n    <span className={cn('flex items-center gap-1.5 mono-meta text-(--ink-3-aa)', className)} {...props}>\n      {keys.map((key) => (\n        <Kbd key={key}>{key}</Kbd>\n      ))}\n      {children}\n    </span>\n  )\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-(--ink-3-aa)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A divider between groups.\n *\n * Marked presentational, because ARIA permits a `listbox` to contain only\n * `option` and `group` — and the library renders this as `role=\"separator\"`,\n * which puts a critical `aria-required-children` violation inside every palette\n * that uses one. The grouping is already announced by the groups themselves, so\n * removing the divider from the accessibility tree loses nothing.\n */\nexport function CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandItemProps extends ComponentProps<typeof CommandPrimitive.Item> {\n  /** A shortcut printed at the end of the row. */\n  shortcut?: string\n  /**\n   * A leading glyph. Pass the icon element, sized 16.\n   *\n   * It is what makes a long list scannable — the eye sorts by shape before it\n   * reads, and forty identical rows of text defeat that.\n   */\n  icon?: ReactNode\n  /**\n   * A quiet note at the end of the row — what kind of thing this is, or its\n   * current state. Not a description: a palette that prints a sentence per row\n   * stops being scannable at about six of them.\n   */\n  meta?: ReactNode\n}\n\nexport function CommandItem({ shortcut, icon, meta, className, children, ...props }: CommandItemProps) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-3 rounded-(--radius-row) px-3 py-2.5 text-[15px] text-(--ink-2) outline-none transition-colors duration-(--duration-fast)',\n        // The highlighted row is a chosen state, and law 7 says a chosen state\n        // reads --accent. The leading rule gives it an edge the eye catches\n        // while scrolling, which a fill alone does not.\n        'relative data-[selected=true]:bg-(--accent-muted) data-[selected=true]:text-(--ink)',\n        'before:absolute before:inset-y-1 before:start-0 before:w-0.5 before:rounded-(--radius-pill) before:bg-transparent data-[selected=true]:before:bg-(--accent)',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-(--disabled-opacity)',\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span className=\"grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4\">\n          {icon}\n        </span>\n      )}\n      {children}\n      {meta && <span className=\"ms-auto ps-3 mono-meta text-(--ink-3-aa)\">{meta}</span>}\n      {shortcut && <Kbd className={cn(meta ? '' : 'ms-auto')}>{shortcut}</Kbd>}\n    </CommandPrimitive.Item>\n  )\n}\n\nexport interface CommandDialogProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Names the palette for assistive tech. */\n  label: string\n  children: ReactNode\n}\n\n/**\n * The palette in a modal, which is how it is nearly always used.\n *\n * The dialog's own padding is removed: a palette is edge-to-edge, and its input\n * is the first thing focus lands on.\n */\nexport function CommandDialog({ open, onOpenChange, label, children }: CommandDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        title={label}\n        hideTitle\n        showClose={false}\n        // Above centre, not at it. A palette is read as a layer over the page\n        // rather than as a message about it, and centring it puts the list\n        // under the reader's own hands on a laptop.\n        // `scrollbar-gutter: auto` undoes the `stable` that `Dialog`'s own\n        // `scroll-slim` sets. The dialog never scrolls — the list inside it\n        // does — but the reserved gutter was still there, so the list stopped\n        // thirteen pixels short of the panel and drew its own hairline inside\n        // an empty channel. Two bars, one of them permanently blank.\n        className=\"top-[10vh] w-[min(94vw,44rem)] translate-y-0 overflow-hidden p-0 [scrollbar-gutter:auto]\"\n      >\n        {/* The modal has the whole screen, so its list may be taller than the\n            default an inline menu should keep.\n\n            `scroll-hairline` rather than `scroll-slim`: eleven pixels of grey\n            down the side of a palette is the widest thing in it. */}\n        <Command\n          label={label}\n          className=\"rounded-none border-0 [&_[cmdk-list]]:max-h-[26rem] [&_[cmdk-list]]:scroll-hairline\"\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default Command\n"],"mappings":";AAmCI,cAgBA,YAhBA;AAjCJ,SAAS,WAAW,wBAAwB;AAC5C,SAAS,cAAc;AAEvB,SAAS,UAAU;AACnB,SAAS,QAAQ,qBAAqB;AACtC,SAAS,WAAW;AAuBb,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,GAAG;AACL,GAAkD;AAChD,SACE,qBAAC,SAAI,WAAU,yDACb;AAAA,wBAAC,UAAO,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,WAAU,8BAA6B;AAAA,IACvF;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,WAAW,GAAG,8DAA8D,SAAS;AAAA,MACpF,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,aAAa,OAAsD;AACjF,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,WAAU;AAAA,MACT,GAAG;AAAA;AAAA,EACN;AAEJ;AAeO,SAAS,cAAc,EAAE,WAAW,GAAG,MAAM,GAA0B;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAUO,SAAS,YAAY,EAAE,MAAM,UAAU,WAAW,GAAG,MAAM,GAAqB;AACrF,SACE,qBAAC,UAAK,WAAW,GAAG,yDAAyD,SAAS,GAAI,GAAG,OAC1F;AAAA,SAAK,IAAI,CAAC,QACT,oBAAC,OAAe,iBAAN,GAAU,CACrB;AAAA,IACA;AAAA,KACH;AAEJ;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,GAAG;AACL,GAAkD;AAChD,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAWO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,GAAsD;AACpD,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;AAoBO,SAAS,YAAY,EAAE,UAAU,MAAM,MAAM,WAAW,UAAU,GAAG,MAAM,GAAqB;AACrG,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,WAAW;AAAA,QACT;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,gBACC,oBAAC,UAAK,WAAU,4EACb,gBACH;AAAA,QAED;AAAA,QACA,QAAQ,oBAAC,UAAK,WAAU,4CAA4C,gBAAK;AAAA,QACzE,YAAY,oBAAC,OAAI,WAAW,GAAG,OAAO,KAAK,SAAS,GAAI,oBAAS;AAAA;AAAA;AAAA,EACpE;AAEJ;AAgBO,SAAS,cAAc,EAAE,MAAM,cAAc,OAAO,SAAS,GAAuB;AACzF,SACE,oBAAC,UAAO,MAAY,cAClB;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAS;AAAA,MACT,WAAW;AAAA,MASX,WAAU;AAAA,MAOV;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search, type LucideIcon } from 'lucide-react'\nimport { isValidElement, type ComponentProps, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * True for a component type — `icon={Settings}` — rather than a rendered element.\n *\n * Everything a `ReactNode` can be is an element, a primitive, an array, another\n * iterable or a promise; a Lucide icon is none of those, it is a `forwardRef`\n * object. So both spellings are tellable apart at runtime, which is what lets\n * one prop take either — and it has to, because this prop meant the opposite\n * thing one import away and the wrong spelling failed at render, not at the\n * type.\n */\nfunction isIconComponent(icon: LucideIcon | ReactNode): icon is LucideIcon {\n  if (isValidElement(icon)) return false\n  if (typeof icon === 'function') return true\n  if (typeof icon !== 'object' || icon === null) return false\n  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !('then' in icon)\n}\n\n/** The leading glyph, sized by this component when it was handed a component. */\nfunction iconNode(icon: LucideIcon | ReactNode): ReactNode {\n  if (!isIconComponent(icon)) return icon\n  const Icon = icon\n  return <Icon size={16} strokeWidth={1.5} aria-hidden />\n}\nimport { Dialog, DialogContent } from '../Dialog/Dialog'\nimport { Kbd } from '../Kbd/Kbd'\n\n/**\n * A filterable list of actions — the ⌘K surface.\n *\n * Built on cmdk rather than on a `Select` or a menu, because the interaction is\n * neither: the list is filtered as you type, the highlighted row moves with the\n * arrow keys while focus STAYS in the input, and Enter runs the highlighted\n * row. That is the ARIA combobox pattern, and it is the part nobody should\n * hand-roll — `aria-activedescendant` moving without focus moving is precisely\n * where a home-made palette stops working with a screen reader.\n *\n * @example\n * <Command label=\"Command palette\">\n *   <CommandInput placeholder=\"Type a command…\" />\n *   <CommandList>\n *     <CommandEmpty>Nothing matches.</CommandEmpty>\n *     <CommandGroup heading=\"Navigate\">\n *       <CommandItem onSelect={go}>Components</CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </Command>\n */\nexport function Command({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) shadow-(--panel-lift) panel-blur',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The filter field. Carries the search icon and the combobox semantics. */\nexport function CommandInput({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex items-center gap-3 border-b border-(--rule) px-4\">\n      <Search size={18} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'h-13 w-full bg-transparent text-[15px] text-(--ink) outline-none placeholder:text-(--ink-3-aa)',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-72 overflow-y-auto overflow-x-hidden p-2 scroll-slim', className)}\n      {...props}\n    />\n  )\n}\n\n/** Shown when the filter matches nothing. Say what would match, not \"no results\". */\nexport function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"px-3 py-10 text-center text-sm text-(--ink-3-aa)\"\n      {...props}\n    />\n  )\n}\n\n/**\n * The key-hint strip along the bottom.\n *\n * A palette is a keyboard surface whose keys are invisible: nothing on screen\n * says the arrows move the row or that Enter runs it, and a reader who reaches\n * for the mouse has been failed by the design rather than by themselves.\n *\n * @example\n * <CommandFooter>\n *   <CommandHint keys={['↑', '↓']}>navigate</CommandHint>\n *   <CommandHint keys={['↵']}>open</CommandHint>\n * </CommandFooter>\n */\nexport function CommandFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-4 border-t border-(--rule) bg-(--paper-2) px-3.5 py-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandHintProps extends Omit<ComponentProps<'span'>, 'children'> {\n  /** The keys this hint describes, printed as `Kbd` chips. */\n  keys: string[]\n  /** What they do — a verb, lowercase, no sentence. */\n  children: ReactNode\n}\n\n/** One key-and-verb pair inside a `CommandFooter`. */\nexport function CommandHint({ keys, children, className, ...props }: CommandHintProps) {\n  return (\n    <span className={cn('flex items-center gap-1.5 mono-meta text-(--ink-3-aa)', className)} {...props}>\n      {keys.map((key) => (\n        <Kbd key={key}>{key}</Kbd>\n      ))}\n      {children}\n    </span>\n  )\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-(--ink-3-aa)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A divider between groups.\n *\n * Marked presentational, because ARIA permits a `listbox` to contain only\n * `option` and `group` — and the library renders this as `role=\"separator\"`,\n * which puts a critical `aria-required-children` violation inside every palette\n * that uses one. The grouping is already announced by the groups themselves, so\n * removing the divider from the accessibility tree loses nothing.\n */\nexport function CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandItemProps extends ComponentProps<typeof CommandPrimitive.Item> {\n  /** A shortcut printed at the end of the row. */\n  shortcut?: string\n  /**\n   * A leading glyph. Either spelling — `icon={<Settings size={16} />}` passes\n   * the element, `icon={Settings}` passes the component and this sizes it.\n   *\n   * It is what makes a long list scannable — the eye sorts by shape before it\n   * reads, and forty identical rows of text defeat that.\n   */\n  icon?: LucideIcon | ReactNode\n  /**\n   * A quiet note at the end of the row — what kind of thing this is, or its\n   * current state. Not a description: a palette that prints a sentence per row\n   * stops being scannable at about six of them.\n   */\n  meta?: ReactNode\n}\n\nexport function CommandItem({ shortcut, icon, meta, className, children, ...props }: CommandItemProps) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-3 rounded-(--radius-row) px-3 py-2.5 text-[15px] text-(--ink-2) outline-none transition-colors duration-(--duration-fast)',\n        // The highlighted row is a chosen state, and law 7 says a chosen state\n        // reads --accent. The leading rule gives it an edge the eye catches\n        // while scrolling, which a fill alone does not.\n        'relative data-[selected=true]:bg-(--accent-muted) data-[selected=true]:text-(--ink)',\n        'before:absolute before:inset-y-1 before:start-0 before:w-0.5 before:rounded-(--radius-pill) before:bg-transparent data-[selected=true]:before:bg-(--accent)',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-(--disabled-opacity)',\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span className=\"grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4\">\n          {iconNode(icon)}\n        </span>\n      )}\n      {children}\n      {meta && <span className=\"ms-auto ps-3 mono-meta text-(--ink-3-aa)\">{meta}</span>}\n      {shortcut && <Kbd className={cn(meta ? '' : 'ms-auto')}>{shortcut}</Kbd>}\n    </CommandPrimitive.Item>\n  )\n}\n\nexport interface CommandDialogProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Names the palette for assistive tech. */\n  label: string\n  children: ReactNode\n}\n\n/**\n * The palette in a modal, which is how it is nearly always used.\n *\n * The dialog's own padding is removed: a palette is edge-to-edge, and its input\n * is the first thing focus lands on.\n */\nexport function CommandDialog({ open, onOpenChange, label, children }: CommandDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        title={label}\n        hideTitle\n        showClose={false}\n        // Above centre, not at it. A palette is read as a layer over the page\n        // rather than as a message about it, and centring it puts the list\n        // under the reader's own hands on a laptop.\n        // `scrollbar-gutter: auto` undoes the `stable` that `Dialog`'s own\n        // `scroll-slim` sets. The dialog never scrolls — the list inside it\n        // does — but the reserved gutter was still there, so the list stopped\n        // thirteen pixels short of the panel and drew its own hairline inside\n        // an empty channel. Two bars, one of them permanently blank.\n        className=\"top-[10vh] w-[min(94vw,44rem)] translate-y-0 overflow-hidden p-0 [scrollbar-gutter:auto]\"\n      >\n        {/* The modal has the whole screen, so its list may be taller than the\n            default an inline menu should keep.\n\n            `scroll-hairline` rather than `scroll-slim`: eleven pixels of grey\n            down the side of a palette is the widest thing in it. */}\n        <Command\n          label={label}\n          className=\"rounded-none border-0 [&_[cmdk-list]]:max-h-[26rem] [&_[cmdk-list]]:scroll-hairline\"\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default Command\n"],"mappings":"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","names":[]}

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { LucideIcon } from 'lucide-react';
 
@@ -25,14 +25,39 @@ declare const ContextMenuTrigger: react.ForwardRefExoticComponent<ContextMenuPri
  */
 declare function ContextMenuContent({ className, ...rest }: ComponentProps<typeof ContextMenuPrimitive.Content>): react.JSX.Element;
 interface ContextMenuItemProps extends ComponentProps<typeof ContextMenuPrimitive.Item> {
-    icon?: LucideIcon;
+    /**
+     * Optional leading icon. Either spelling — `icon={Copy}` passes the component
+     * and this sizes it, `icon={<Copy size={16} />}` passes the element and this
+     * places it.
+     */
+    icon?: LucideIcon | ReactNode;
+    /** Paints the row as destructive. Use for delete, revoke, disconnect. */
     destructive?: boolean;
 }
 /** A row. Highlight follows `data-highlighted`, which covers hover and keyboard. */
-declare function ContextMenuItem({ icon: Icon, destructive, className, children, ...rest }: ContextMenuItemProps): react.JSX.Element;
+declare function ContextMenuItem({ icon, destructive, className, children, ...rest }: ContextMenuItemProps): react.JSX.Element;
 /** Hairline divider between groups. */
 declare function ContextMenuSeparator({ className, ...rest }: ComponentProps<typeof ContextMenuPrimitive.Separator>): react.JSX.Element;
-/** Mono eyebrow heading for a group. */
+/**
+ * Mono eyebrow heading, on its own.
+ *
+ * Visual only: Radix renders it as a bare `<div>` with no role. Reach for
+ * `ContextMenuGroup` when the eyebrow is a HEADING over rows; this is right for
+ * a line that heads nothing.
+ */
 declare function ContextMenuLabel({ className, ...rest }: ComponentProps<typeof ContextMenuPrimitive.Label>): react.JSX.Element;
+interface ContextMenuGroupProps extends ComponentProps<typeof ContextMenuPrimitive.Group> {
+    /** The eyebrow over the rows, and the group's accessible name. */
+    label?: ReactNode;
+}
+/**
+ * A named section of a menu.
+ *
+ * The eyebrow alone was a picture of a heading: Radix's `MenuLabel` carries no
+ * role and no `aria-labelledby` wiring, so a sighted reader saw sections and a
+ * screen-reader user got one undifferentiated list. This renders the group,
+ * renders the label inside it, and points the one at the other.
+ */
+declare function ContextMenuGroup({ label, children, ...rest }: ContextMenuGroupProps): react.JSX.Element;
 
-export { ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger, ContextMenu as default };
+export { ContextMenu, ContextMenuContent, ContextMenuGroup, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger, ContextMenu as default };

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,8 +1,23 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { isValidElement, useId } from "react";
 import { cn } from "../../lib/cn.js";
 import { useOverlayContainer } from "../../lib/overlay-container.js";
+function isIconComponent(icon) {
+  if (isValidElement(icon)) return false;
+  if (typeof icon === "function") return true;
+  if (typeof icon !== "object" || icon === null) return false;
+  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !("then" in icon);
+}
+function iconNode(icon) {
+  if (icon === void 0 || icon === null || icon === false) return null;
+  if (!isIconComponent(icon)) {
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "grid size-4 shrink-0 place-items-center [&_svg]:size-4", children: icon });
+  }
+  const Icon = icon;
+  return /* @__PURE__ */ jsx(Icon, { size: 16, strokeWidth: 1.5, className: "shrink-0", "aria-hidden": true });
+}
 const ContextMenu = ContextMenuPrimitive.Root;
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 function ContextMenuContent({
@@ -17,7 +32,7 @@ function ContextMenuContent({
       collisionPadding: 8,
       "data-m22-animated": true,
       className: cn(
-        "z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 panel-blur",
+        "z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 shadow-(--panel-lift) panel-blur",
         "data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)",
         className
       ),
@@ -26,7 +41,7 @@ function ContextMenuContent({
   ) });
 }
 function ContextMenuItem({
-  icon: Icon,
+  icon,
   destructive = false,
   className,
   children,
@@ -42,7 +57,7 @@ function ContextMenuItem({
       ),
       ...rest,
       children: [
-        Icon && /* @__PURE__ */ jsx(Icon, { size: 16, strokeWidth: 1.5, className: "shrink-0", "aria-hidden": true }),
+        iconNode(icon),
         children
       ]
     }
@@ -66,10 +81,25 @@ function ContextMenuLabel({
     }
   );
 }
+function ContextMenuGroup({ label, children, ...rest }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.Group,
+    {
+      "aria-labelledby": label === void 0 ? void 0 : id,
+      ...rest,
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsx(ContextMenuLabel, { id, children: label }),
+        children
+      ]
+    }
+  );
+}
 var ContextMenu_default = ContextMenu;
 export {
   ContextMenu,
   ContextMenuContent,
+  ContextMenuGroup,
   ContextMenuItem,
   ContextMenuLabel,
   ContextMenuSeparator,

package/dist/components/ContextMenu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["'use client'\n\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu'\nimport type { LucideIcon } from 'lucide-react'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/** Radix ContextMenu root and trigger, as typed passthroughs. */\nexport const ContextMenu = ContextMenuPrimitive.Root\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\n/**\n * The menu a right-click opens.\n *\n * Never the only way to reach an action. A context menu is opened by a\n * secondary pointer button or a keyboard's own menu key, and a meaningful share\n * of readers have neither — a touch user, someone on a trackpad they have not\n * configured, anyone driving the page by keyboard alone. Whatever is in here\n * belongs somewhere reachable too: a row's overflow button, a toolbar.\n *\n * @example\n * <ContextMenu>\n *   <ContextMenuTrigger asChild><Card>Right-click me</Card></ContextMenuTrigger>\n *   <ContextMenuContent>\n *     <ContextMenuItem icon={Copy}>Copy</ContextMenuItem>\n *   </ContextMenuContent>\n * </ContextMenu>\n */\nexport function ContextMenuContent({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  const container = useOverlayContainer()\n\n  return (\n    <ContextMenuPrimitive.Portal container={container ?? undefined}>\n      <ContextMenuPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        data-m22-animated\n        className={cn(\n          'z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 panel-blur',\n          'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nexport interface ContextMenuItemProps\n  extends ComponentProps<typeof ContextMenuPrimitive.Item> {\n  icon?: LucideIcon\n  destructive?: boolean\n}\n\n/** A row. Highlight follows `data-highlighted`, which covers hover and keyboard. */\nexport function ContextMenuItem({\n  icon: Icon,\n  destructive = false,\n  className,\n  children,\n  ...rest\n}: ContextMenuItemProps) {\n  return (\n    <ContextMenuPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-2.5 rounded-(--radius-row) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)',\n        destructive ? 'text-(--danger)' : 'text-(--ink-2) data-[highlighted]:text-(--ink)',\n        className,\n      )}\n      {...rest}\n    >\n      {Icon && <Icon size={16} strokeWidth={1.5} className=\"shrink-0\" aria-hidden />}\n      {children}\n    </ContextMenuPrimitive.Item>\n  )\n}\n\n/** Hairline divider between groups. */\nexport function ContextMenuSeparator({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator className={cn('my-1 h-px bg-(--rule)', className)} {...rest} />\n  )\n}\n\n/** Mono eyebrow heading for a group. */\nexport function ContextMenuLabel({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Label>) {\n  return (\n    <ContextMenuPrimitive.Label\n      className={cn('px-2.5 py-1.5 eyebrow text-(--ink-3-aa)', className)}\n      {...rest}\n    />\n  )\n}\n\nexport default ContextMenu\n"],"mappings":";AAqCM,cA8BF,YA9BE;AAnCN,YAAY,0BAA0B;AAGtC,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAG7B,MAAM,cAAc,qBAAqB;AACzC,MAAM,qBAAqB,qBAAqB;AAmBhD,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAwD;AACtD,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,qBAAqB,QAArB,EAA4B,WAAW,aAAa,QACnD;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AASO,SAAS,gBAAgB;AAAA,EAC9B,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,oBAAoB;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,gBAAQ,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,WAAU,YAAW,eAAW,MAAC;AAAA,QAC3E;AAAA;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAA0D;AACxD,SACE,oBAAC,qBAAqB,WAArB,EAA+B,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MAAM;AAEjG;AAGO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,GAAsD;AACpD,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["'use client'\n\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu'\nimport type { LucideIcon } from 'lucide-react'\nimport { isValidElement, useId, type ComponentProps, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/**\n * True for a component type — `icon={Copy}` — rather than a rendered element.\n *\n * Everything a `ReactNode` can be is an element, a primitive, an array, another\n * iterable or a promise; a Lucide icon is none of those, it is a `forwardRef`\n * object. So both spellings are tellable apart at runtime, which is what lets\n * one prop take either — and it has to, because this prop meant the opposite\n * thing one import away and the wrong spelling failed at render, not at the\n * type.\n */\nfunction isIconComponent(icon: LucideIcon | ReactNode): icon is LucideIcon {\n  if (isValidElement(icon)) return false\n  if (typeof icon === 'function') return true\n  if (typeof icon !== 'object' || icon === null) return false\n  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !('then' in icon)\n}\n\n/** The leading glyph, sized by this component when it was handed a component. */\nfunction iconNode(icon: LucideIcon | ReactNode): ReactNode {\n  if (icon === undefined || icon === null || icon === false) return null\n  if (!isIconComponent(icon)) {\n    return (\n      <span aria-hidden className=\"grid size-4 shrink-0 place-items-center [&_svg]:size-4\">\n        {icon}\n      </span>\n    )\n  }\n  const Icon = icon\n  return <Icon size={16} strokeWidth={1.5} className=\"shrink-0\" aria-hidden />\n}\n\n/** Radix ContextMenu root and trigger, as typed passthroughs. */\nexport const ContextMenu = ContextMenuPrimitive.Root\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\n/**\n * The menu a right-click opens.\n *\n * Never the only way to reach an action. A context menu is opened by a\n * secondary pointer button or a keyboard's own menu key, and a meaningful share\n * of readers have neither — a touch user, someone on a trackpad they have not\n * configured, anyone driving the page by keyboard alone. Whatever is in here\n * belongs somewhere reachable too: a row's overflow button, a toolbar.\n *\n * @example\n * <ContextMenu>\n *   <ContextMenuTrigger asChild><Card>Right-click me</Card></ContextMenuTrigger>\n *   <ContextMenuContent>\n *     <ContextMenuItem icon={Copy}>Copy</ContextMenuItem>\n *   </ContextMenuContent>\n * </ContextMenu>\n */\nexport function ContextMenuContent({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  const container = useOverlayContainer()\n\n  return (\n    <ContextMenuPrimitive.Portal container={container ?? undefined}>\n      <ContextMenuPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        data-m22-animated\n        className={cn(\n          'z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 shadow-(--panel-lift) panel-blur',\n          'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nexport interface ContextMenuItemProps\n  extends ComponentProps<typeof ContextMenuPrimitive.Item> {\n  /**\n   * Optional leading icon. Either spelling — `icon={Copy}` passes the component\n   * and this sizes it, `icon={<Copy size={16} />}` passes the element and this\n   * places it.\n   */\n  icon?: LucideIcon | ReactNode\n  /** Paints the row as destructive. Use for delete, revoke, disconnect. */\n  destructive?: boolean\n}\n\n/** A row. Highlight follows `data-highlighted`, which covers hover and keyboard. */\nexport function ContextMenuItem({\n  icon,\n  destructive = false,\n  className,\n  children,\n  ...rest\n}: ContextMenuItemProps) {\n  return (\n    <ContextMenuPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-2.5 rounded-(--radius-row) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)',\n        destructive ? 'text-(--danger)' : 'text-(--ink-2) data-[highlighted]:text-(--ink)',\n        className,\n      )}\n      {...rest}\n    >\n      {iconNode(icon)}\n      {children}\n    </ContextMenuPrimitive.Item>\n  )\n}\n\n/** Hairline divider between groups. */\nexport function ContextMenuSeparator({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator className={cn('my-1 h-px bg-(--rule)', className)} {...rest} />\n  )\n}\n\n/**\n * Mono eyebrow heading, on its own.\n *\n * Visual only: Radix renders it as a bare `<div>` with no role. Reach for\n * `ContextMenuGroup` when the eyebrow is a HEADING over rows; this is right for\n * a line that heads nothing.\n */\nexport function ContextMenuLabel({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Label>) {\n  return (\n    <ContextMenuPrimitive.Label\n      className={cn('px-2.5 py-1.5 eyebrow text-(--ink-3-aa)', className)}\n      {...rest}\n    />\n  )\n}\n\nexport interface ContextMenuGroupProps\n  extends ComponentProps<typeof ContextMenuPrimitive.Group> {\n  /** The eyebrow over the rows, and the group's accessible name. */\n  label?: ReactNode\n}\n\n/**\n * A named section of a menu.\n *\n * The eyebrow alone was a picture of a heading: Radix's `MenuLabel` carries no\n * role and no `aria-labelledby` wiring, so a sighted reader saw sections and a\n * screen-reader user got one undifferentiated list. This renders the group,\n * renders the label inside it, and points the one at the other.\n */\nexport function ContextMenuGroup({ label, children, ...rest }: ContextMenuGroupProps) {\n  const id = useId()\n\n  return (\n    <ContextMenuPrimitive.Group\n      aria-labelledby={label === undefined ? undefined : id}\n      {...rest}\n    >\n      {label !== undefined && <ContextMenuLabel id={id}>{label}</ContextMenuLabel>}\n      {children}\n    </ContextMenuPrimitive.Group>\n  )\n}\n\nexport default ContextMenu\n"],"mappings":";AA8BM,cA0EF,YA1EE;AA5BN,YAAY,0BAA0B;AAEtC,SAAS,gBAAgB,aAAkD;AAC3E,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAYpC,SAAS,gBAAgB,MAAkD;AACzE,MAAI,eAAe,IAAI,EAAG,QAAO;AACjC,MAAI,OAAO,SAAS,WAAY,QAAO;AACvC,MAAI,OAAO,SAAS,YAAY,SAAS,KAAM,QAAO;AACtD,SAAO,CAAC,MAAM,QAAQ,IAAI,KAAK,EAAE,OAAO,YAAY,SAAS,EAAE,UAAU;AAC3E;AAGA,SAAS,SAAS,MAAyC;AACzD,MAAI,SAAS,UAAa,SAAS,QAAQ,SAAS,MAAO,QAAO;AAClE,MAAI,CAAC,gBAAgB,IAAI,GAAG;AAC1B,WACE,oBAAC,UAAK,eAAW,MAAC,WAAU,0DACzB,gBACH;AAAA,EAEJ;AACA,QAAM,OAAO;AACb,SAAO,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,WAAU,YAAW,eAAW,MAAC;AAC5E;AAGO,MAAM,cAAc,qBAAqB;AACzC,MAAM,qBAAqB,qBAAqB;AAmBhD,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAwD;AACtD,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,qBAAqB,QAArB,EAA4B,WAAW,aAAa,QACnD;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAeO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,oBAAoB;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,iBAAS,IAAI;AAAA,QACb;AAAA;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAA0D;AACxD,SACE,oBAAC,qBAAqB,WAArB,EAA+B,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MAAM;AAEjG;AASO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,GAAsD;AACpD,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AAgBO,SAAS,iBAAiB,EAAE,OAAO,UAAU,GAAG,KAAK,GAA0B;AACpF,QAAM,KAAK,MAAM;AAEjB,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,mBAAiB,UAAU,SAAY,SAAY;AAAA,MAClD,GAAG;AAAA,MAEH;AAAA,kBAAU,UAAa,oBAAC,oBAAiB,IAAS,iBAAM;AAAA,QACxD;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/components/DatePicker/DatePicker.d.ts

@@ -24,11 +24,23 @@ interface DatePickerProps {
     value?: Date;
     defaultValue?: Date;
     onValueChange?: (value: Date | undefined) => void;
-    /** Names the control. Required — the trigger's text is a value, not a label. */
+    /**
+     * Names the control. Required — the trigger's text is a value, not a label.
+     *
+     * Announced together with the printed date rather than instead of it, so
+     * `format` reaches a screen reader as well as the screen. Inside a `Field`
+     * with a label, that label names the trigger and this one is not repeated.
+     */
     label: string;
     placeholder?: string;
     disabled?: boolean;
-    /** Days the reader may not choose. Passed straight to the calendar. */
+    /**
+     * Days the reader may not choose.
+     *
+     * Reaches the calendar AND the shortcut rail: a preset landing on a blocked
+     * day is drawn unavailable and refuses the click, rather than committing a
+     * value the grid beside it would not accept.
+     */
     disabledDates?: ComponentProps<typeof Calendar>['disabled'];
     /** How the chosen date is printed on the trigger. */
     format?: (date: Date) => string;
@@ -38,6 +50,12 @@ interface DatePickerProps {
      */
     presets?: boolean | DatePreset<Date>[];
     className?: string;
+    /** The TRIGGER's id — the element a label points at. A `Field` sets it. */
+    id?: string;
+    /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */
+    'aria-describedby'?: string;
+    /** Announced on the trigger. A `Field` sets it from `error`. */
+    'aria-invalid'?: boolean | 'true' | 'false';
 }
 /**
  * A date, chosen from a calendar.
@@ -55,14 +73,22 @@ interface DatePickerProps {
  * @example
  * <Field label="Publish on"><DatePicker label="Publish on" /></Field>
  */
-declare function DatePicker({ value, defaultValue, onValueChange, label, placeholder, disabled, disabledDates, format, presets, className, }: DatePickerProps): react.JSX.Element;
+declare function DatePicker({ value, defaultValue, onValueChange, label, placeholder, disabled, disabledDates, format, presets, className, id, 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, }: DatePickerProps): react.JSX.Element;
 interface DateRangePickerProps {
     value?: DateRange;
     defaultValue?: DateRange;
     onValueChange?: (value: DateRange | undefined) => void;
+    /** Names the control. Announced together with the printed range, not instead of it. */
     label: string;
     placeholder?: string;
     disabled?: boolean;
+    /**
+     * Days the reader may not choose.
+     *
+     * Reaches the shortcut rail as well as the grid, at the ENDS of each preset
+     * range — a shortcut whose interior straddles a blocked day is still offered,
+     * the way the grid still lets a reader drag a range across one.
+     */
     disabledDates?: ComponentProps<typeof Calendar>['disabled'];
     /** How many months are shown side by side. Falls back to one under `sm`. */
     months?: number;
@@ -77,6 +103,12 @@ interface DateRangePickerProps {
      */
     presets?: boolean | DatePreset<DateRange>[];
     className?: string;
+    /** The TRIGGER's id — the element a label points at. A `Field` sets it. */
+    id?: string;
+    /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */
+    'aria-describedby'?: string;
+    /** Announced on the trigger. A `Field` sets it from `error`. */
+    'aria-invalid'?: boolean | 'true' | 'false';
 }
 /**
  * A span of dates — a stay, a reporting period, a filter.
@@ -93,6 +125,6 @@ interface DateRangePickerProps {
  * @example
  * <DateRangePicker label="Reporting period" />
  */
-declare function DateRangePicker({ value, defaultValue, onValueChange, label, placeholder, disabled, disabledDates, months, format, presets, className, }: DateRangePickerProps): react.JSX.Element;
+declare function DateRangePicker({ value, defaultValue, onValueChange, label, placeholder, disabled, disabledDates, months, format, presets, className, id, 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, }: DateRangePickerProps): react.JSX.Element;
 
 export { DATE_PRESETS, DatePicker, type DatePickerProps, type DatePreset, DateRangePicker, type DateRangePickerProps, RANGE_PRESETS, DatePicker as default };