@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/scroll-area.d.ts

@@ -1,6 +1,4 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, Ref, RefObject } from 'react';
-
+import type { ComponentPropsWithoutRef, Ref, RefObject } from "react";
 /**
  * Whether `ref`'s element currently overflows its box — the one fact a scroll
  * container needs to decide whether it is a keyboard stop.
@@ -12,17 +10,17 @@ import { ComponentPropsWithoutRef, Ref, RefObject } from 'react';
  *
  * Shared with {@link Table}'s overflow wrapper, which has the same obligation.
  */
-declare function useScrollOverflow(ref: RefObject<HTMLElement | null>): boolean;
+export declare function useScrollOverflow(ref: RefObject<HTMLElement | null>): boolean;
 /** Thin, token-coloured scrollbars. `scrollbar-width` / `scrollbar-color` are the
  *  standard (Firefox, Chrome 121+); the `::-webkit-scrollbar` rules are for Safari,
  *  which has neither. Where the standard pair applies, Chrome ignores the rest. */
-declare const THIN_SCROLLBAR_CLASS: string;
+export declare const THIN_SCROLLBAR_CLASS: string;
 declare const AXIS: {
     readonly vertical: "overflow-y-auto overflow-x-hidden";
     readonly horizontal: "overflow-x-auto overflow-y-hidden";
     readonly both: "overflow-auto";
 };
-interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
+export interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
     /** Which way the content may scroll. Default `vertical`. */
     orientation?: keyof typeof AXIS;
     /**
@@ -48,6 +46,5 @@ interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
  * Page Up/Down scroll it natively. While nothing overflows it is not, so a short list
  * adds no empty stop to the tab order.
  */
-declare function ScrollArea({ orientation, label, className, ref, tabIndex, "aria-labelledby": labelledBy, ...rest }: ScrollAreaProps): react.JSX.Element;
-
-export { ScrollArea, type ScrollAreaProps, THIN_SCROLLBAR_CLASS, useScrollOverflow };
+export declare function ScrollArea({ orientation, label, className, ref, tabIndex, "aria-labelledby": labelledBy, ...rest }: ScrollAreaProps): import("react").JSX.Element;
+export {};

package/dist/components/scroll-area.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
+import { mergeRefs } from "./field-parts.js";
 function useScrollOverflow(ref) {
   const [overflowing, setOverflowing] = useState(false);
   const measure = useCallback(() => {
@@ -44,14 +45,7 @@ function ScrollArea({
 }) {
   const inner = useRef(null);
   const overflowing = useScrollOverflow(inner);
-  const setRef = useCallback(
-    (el) => {
-      inner.current = el;
-      if (typeof ref === "function") ref(el);
-      else if (ref) ref.current = el;
-    },
-    [ref]
-  );
+  const setRef = useMemo(() => mergeRefs(inner, ref), [ref]);
   const named = label !== void 0 || labelledBy !== void 0;
   return /* @__PURE__ */ jsx(
     "div",
@@ -72,7 +66,7 @@ function ScrollArea({
         // a row with its own background would cover exactly the part of the ring that
         // says where focus is. An outline paints above it, and the negative offset
         // keeps it inside a parent that clips.
-        "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
+        "focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand",
         className
       )
     }

package/dist/components/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, Ref, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * Whether `ref`'s element currently overflows its box — the one fact a scroll\n * container needs to decide whether it is a keyboard stop.\n *\n * Measured on every commit (cheap: two reads, and state is set only on a change) and\n * whenever the element or one of its direct children resizes, which covers both\n * \"the panel got narrower\" and \"the rows arrived\". Without `ResizeObserver` (jsdom,\n * very old engines) the per-commit measurement is what remains.\n *\n * Shared with {@link Table}'s overflow wrapper, which has the same obligation.\n */\nexport function useScrollOverflow(ref: RefObject<HTMLElement | null>): boolean {\n  const [overflowing, setOverflowing] = useState(false);\n\n  const measure = useCallback(() => {\n    const el = ref.current;\n    if (!el) return;\n    const next = el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;\n    setOverflowing((prev) => (prev === next ? prev : next));\n  }, [ref]);\n\n  // No dependency list on purpose: content changes arrive as re-renders.\n  useLayoutEffect(() => {\n    measure();\n  });\n\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    for (const child of Array.from(el.children)) ro.observe(child);\n    return () => ro.disconnect();\n  }, [ref, measure]);\n\n  return overflowing;\n}\n\n/** Thin, token-coloured scrollbars. `scrollbar-width` / `scrollbar-color` are the\n *  standard (Firefox, Chrome 121+); the `::-webkit-scrollbar` rules are for Safari,\n *  which has neither. Where the standard pair applies, Chrome ignores the rest. */\nexport const THIN_SCROLLBAR_CLASS = cn(\n  \"[scrollbar-width:thin] [scrollbar-color:var(--border-strong)_transparent]\",\n  \"[&::-webkit-scrollbar]:size-2 [&::-webkit-scrollbar-track]:bg-transparent\",\n  \"[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[var(--border-strong)]\",\n);\n\nconst AXIS = {\n  vertical: \"overflow-y-auto overflow-x-hidden\",\n  horizontal: \"overflow-x-auto overflow-y-hidden\",\n  both: \"overflow-auto\",\n} as const;\n\nexport interface ScrollAreaProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** Which way the content may scroll. Default `vertical`. */\n  orientation?: keyof typeof AXIS;\n  /**\n   * The region's accessible name. With it (or `aria-labelledby`) the container is a\n   * `role=\"region\"` a reader can find and name; without it, it is a plain box.\n   * Name every ScrollArea whose content can overflow: once it is a tab stop, a\n   * reader announces it on focus, and an unnamed one is announced as nothing.\n   */\n  label?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A styled overflow container: a thin scrollbar in the kit's colours, a focus ring,\n * and the keyboard access a plain `overflow-auto` div does not have.\n *\n * kastlan used Radix's ScrollArea for this and nothing else from it. Radix draws a\n * custom scrollbar in JavaScript; the platform's own, thinned and coloured, costs no\n * script and keeps native momentum, overscroll and scrollbar-dragging behaviour.\n *\n * A container that scrolls but holds nothing focusable cannot be scrolled from the\n * keyboard at all — Tab jumps straight past it (WCAG 2.1.1). So while the content\n * overflows, the container itself is a tab stop (`tabIndex=0`), and arrow keys and\n * Page Up/Down scroll it natively. While nothing overflows it is not, so a short list\n * adds no empty stop to the tab order.\n */\nexport function ScrollArea({\n  orientation = \"vertical\",\n  label,\n  className,\n  ref,\n  tabIndex,\n  \"aria-labelledby\": labelledBy,\n  ...rest\n}: ScrollAreaProps) {\n  const inner = useRef<HTMLDivElement | null>(null);\n  const overflowing = useScrollOverflow(inner);\n  const setRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      inner.current = el;\n      if (typeof ref === \"function\") ref(el);\n      else if (ref) ref.current = el;\n    },\n    [ref],\n  );\n  const named = label !== undefined || labelledBy !== undefined;\n\n  return (\n    <div\n      {...rest}\n      ref={setRef}\n      role={named ? \"region\" : undefined}\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      tabIndex={tabIndex ?? (overflowing ? 0 : undefined)}\n      data-overflowing={overflowing || undefined}\n      data-orientation={orientation}\n      className={cn(\n        \"relative min-h-0 min-w-0\",\n        AXIS[orientation],\n        THIN_SCROLLBAR_CLASS,\n        // An OUTLINE, inset: a ring is a box-shadow, which paints beneath the content —\n        // a row with its own background would cover exactly the part of the ring that\n        // says where focus is. An outline paints above it, and the negative offset\n        // keeps it inside a parent that clips.\n        \"focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]\",\n        className,\n      )}\n    />\n  );\n}\n"],"mappings":";AA0GI;AA1GJ,SAAS,aAAa,iBAAiB,QAAQ,gBAAgB;AAE/D,SAAS,UAAU;AAaZ,SAAS,kBAAkB,KAA6C;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,UAAU,YAAY,MAAM;AAChC,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,UAAM,OAAO,GAAG,eAAe,GAAG,eAAe,KAAK,GAAG,cAAc,GAAG,cAAc;AACxF,mBAAe,CAAC,SAAU,SAAS,OAAO,OAAO,IAAK;AAAA,EACxD,GAAG,CAAC,GAAG,CAAC;AAGR,kBAAgB,MAAM;AACpB,YAAQ;AAAA,EACV,CAAC;AAED,kBAAgB,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,MAAM,OAAO,mBAAmB,YAAa;AAClD,UAAM,KAAK,IAAI,eAAe,OAAO;AACrC,OAAG,QAAQ,EAAE;AACb,eAAW,SAAS,MAAM,KAAK,GAAG,QAAQ,EAAG,IAAG,QAAQ,KAAK;AAC7D,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,KAAK,OAAO,CAAC;AAEjB,SAAO;AACT;AAKO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,OAAO;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,MAAM;AACR;AA6BO,SAAS,WAAW;AAAA,EACzB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,GAAG;AACL,GAAoB;AAClB,QAAM,QAAQ,OAA8B,IAAI;AAChD,QAAM,cAAc,kBAAkB,KAAK;AAC3C,QAAM,SAAS;AAAA,IACb,CAAC,OAA8B;AAC7B,YAAM,UAAU;AAChB,UAAI,OAAO,QAAQ,WAAY,KAAI,EAAE;AAAA,eAC5B,IAAK,KAAI,UAAU;AAAA,IAC9B;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AACA,QAAM,QAAQ,UAAU,UAAa,eAAe;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,QAAQ,WAAW;AAAA,MACzB,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,UAAU,aAAa,cAAc,IAAI;AAAA,MACzC,oBAAkB,eAAe;AAAA,MACjC,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT;AAAA,QACA,KAAK,WAAW;AAAA,QAChB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, Ref, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\n\n/**\n * Whether `ref`'s element currently overflows its box — the one fact a scroll\n * container needs to decide whether it is a keyboard stop.\n *\n * Measured on every commit (cheap: two reads, and state is set only on a change) and\n * whenever the element or one of its direct children resizes, which covers both\n * \"the panel got narrower\" and \"the rows arrived\". Without `ResizeObserver` (jsdom,\n * very old engines) the per-commit measurement is what remains.\n *\n * Shared with {@link Table}'s overflow wrapper, which has the same obligation.\n */\nexport function useScrollOverflow(ref: RefObject<HTMLElement | null>): boolean {\n  const [overflowing, setOverflowing] = useState(false);\n\n  const measure = useCallback(() => {\n    const el = ref.current;\n    if (!el) return;\n    const next = el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;\n    setOverflowing((prev) => (prev === next ? prev : next));\n  }, [ref]);\n\n  // No dependency list on purpose: content changes arrive as re-renders.\n  useLayoutEffect(() => {\n    measure();\n  });\n\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    for (const child of Array.from(el.children)) ro.observe(child);\n    return () => ro.disconnect();\n  }, [ref, measure]);\n\n  return overflowing;\n}\n\n/** Thin, token-coloured scrollbars. `scrollbar-width` / `scrollbar-color` are the\n *  standard (Firefox, Chrome 121+); the `::-webkit-scrollbar` rules are for Safari,\n *  which has neither. Where the standard pair applies, Chrome ignores the rest. */\nexport const THIN_SCROLLBAR_CLASS = cn(\n  \"[scrollbar-width:thin] [scrollbar-color:var(--border-strong)_transparent]\",\n  \"[&::-webkit-scrollbar]:size-2 [&::-webkit-scrollbar-track]:bg-transparent\",\n  \"[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[var(--border-strong)]\",\n);\n\nconst AXIS = {\n  vertical: \"overflow-y-auto overflow-x-hidden\",\n  horizontal: \"overflow-x-auto overflow-y-hidden\",\n  both: \"overflow-auto\",\n} as const;\n\nexport interface ScrollAreaProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** Which way the content may scroll. Default `vertical`. */\n  orientation?: keyof typeof AXIS;\n  /**\n   * The region's accessible name. With it (or `aria-labelledby`) the container is a\n   * `role=\"region\"` a reader can find and name; without it, it is a plain box.\n   * Name every ScrollArea whose content can overflow: once it is a tab stop, a\n   * reader announces it on focus, and an unnamed one is announced as nothing.\n   */\n  label?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A styled overflow container: a thin scrollbar in the kit's colours, a focus ring,\n * and the keyboard access a plain `overflow-auto` div does not have.\n *\n * kastlan used Radix's ScrollArea for this and nothing else from it. Radix draws a\n * custom scrollbar in JavaScript; the platform's own, thinned and coloured, costs no\n * script and keeps native momentum, overscroll and scrollbar-dragging behaviour.\n *\n * A container that scrolls but holds nothing focusable cannot be scrolled from the\n * keyboard at all — Tab jumps straight past it (WCAG 2.1.1). So while the content\n * overflows, the container itself is a tab stop (`tabIndex=0`), and arrow keys and\n * Page Up/Down scroll it natively. While nothing overflows it is not, so a short list\n * adds no empty stop to the tab order.\n */\nexport function ScrollArea({\n  orientation = \"vertical\",\n  label,\n  className,\n  ref,\n  tabIndex,\n  \"aria-labelledby\": labelledBy,\n  ...rest\n}: ScrollAreaProps) {\n  const inner = useRef<HTMLDivElement | null>(null);\n  const overflowing = useScrollOverflow(inner);\n  const setRef = useMemo(() => mergeRefs(inner, ref), [ref]);\n  const named = label !== undefined || labelledBy !== undefined;\n\n  return (\n    <div\n      {...rest}\n      ref={setRef}\n      role={named ? \"region\" : undefined}\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      tabIndex={tabIndex ?? (overflowing ? 0 : undefined)}\n      data-overflowing={overflowing || undefined}\n      data-orientation={orientation}\n      className={cn(\n        \"relative min-h-0 min-w-0\",\n        AXIS[orientation],\n        THIN_SCROLLBAR_CLASS,\n        // An OUTLINE, inset: a ring is a box-shadow, which paints beneath the content —\n        // a row with its own background would cover exactly the part of the ring that\n        // says where focus is. An outline paints above it, and the negative offset\n        // keeps it inside a parent that clips.\n        \"focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand\",\n        className,\n      )}\n    />\n  );\n}\n"],"mappings":";AAoGI;AApGJ,SAAS,aAAa,iBAAiB,SAAS,QAAQ,gBAAgB;AAExE,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAanB,SAAS,kBAAkB,KAA6C;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,UAAU,YAAY,MAAM;AAChC,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,UAAM,OAAO,GAAG,eAAe,GAAG,eAAe,KAAK,GAAG,cAAc,GAAG,cAAc;AACxF,mBAAe,CAAC,SAAU,SAAS,OAAO,OAAO,IAAK;AAAA,EACxD,GAAG,CAAC,GAAG,CAAC;AAGR,kBAAgB,MAAM;AACpB,YAAQ;AAAA,EACV,CAAC;AAED,kBAAgB,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,MAAM,OAAO,mBAAmB,YAAa;AAClD,UAAM,KAAK,IAAI,eAAe,OAAO;AACrC,OAAG,QAAQ,EAAE;AACb,eAAW,SAAS,MAAM,KAAK,GAAG,QAAQ,EAAG,IAAG,QAAQ,KAAK;AAC7D,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,KAAK,OAAO,CAAC;AAEjB,SAAO;AACT;AAKO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,OAAO;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,MAAM;AACR;AA6BO,SAAS,WAAW;AAAA,EACzB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,GAAG;AACL,GAAoB;AAClB,QAAM,QAAQ,OAA8B,IAAI;AAChD,QAAM,cAAc,kBAAkB,KAAK;AAC3C,QAAM,SAAS,QAAQ,MAAM,UAAU,OAAO,GAAG,GAAG,CAAC,GAAG,CAAC;AACzD,QAAM,QAAQ,UAAU,UAAa,eAAe;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,QAAQ,WAAW;AAAA,MACzB,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,UAAU,aAAa,cAAc,IAAI;AAAA,MACzC,oBAAkB,eAAe;AAAA,MACjC,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT;AAAA,QACA,KAAK,WAAW;AAAA,QAChB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/search-field.d.ts

@@ -1,21 +1,10 @@
-import * as react from 'react';
-import { InputHTMLAttributes } from 'react';
-
+import type { InputHTMLAttributes, Ref } from "react";
 interface SearchFieldOwnProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type" | "aria-label"> {
     value: string;
     /** The typed text. Emitted as a plain string, not an event: every caller of the
      *  four this replaced wanted the string, and one of them held it in a URL param
      *  rather than in state. */
     onChange: (value: string) => void;
-    /**
-     * The field's accessible name.
-     *
-     * @deprecated Pass `aria-label` instead — the DOM spelling this kit standardised on
-     * when it found three names for one idea (`ariaLabel`, `aria-label`, and this).
-     * Unchanged and still supported; it names the field only when `aria-label` is
-     * absent, so a consumer can migrate one call site at a time.
-     */
-    label?: string;
     /** Names the clear button. Default: the catalogue's `common.clear`, in the
      *  provider's language. */
     clearLabel?: string;
@@ -50,20 +39,17 @@ interface SearchFieldOwnProps extends Omit<InputHTMLAttributes<HTMLInputElement>
     inputClassName?: string;
 }
 /**
- * One of the two spellings is REQUIRED, and the union is how that survives the
- * deprecation. Making `label` merely optional would have been the easy change and the
- * wrong one: the whole reason this component exists is that two of the four boxes it
- * replaced were named by nothing but their placeholder — which disappears the moment
- * someone types, i.e. exactly when a screen-reader user is working in the field. A
- * caller now has a choice of spelling; it still has no option to pass neither.
+ * `aria-label` is REQUIRED: the whole reason this component exists is that two of the
+ * four boxes it replaced were named by nothing but their placeholder — which disappears
+ * the moment someone types, i.e. exactly when a screen-reader user is working in the
+ * field. The `label` spelling it also took from 0.5 was removed in 0.34.
  */
-type SearchFieldProps = SearchFieldOwnProps & ({
+export type SearchFieldProps = SearchFieldOwnProps & {
     "aria-label": string;
-    label?: string;
-} | {
-    label: string;
-    "aria-label"?: string;
-});
+    /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it
+     *  was `forwardRef`. */
+    ref?: Ref<HTMLInputElement>;
+};
 /**
  * The page-level filter box: a search icon, a `type="search"` input, and a clear
  * "×" that appears once there is something to clear.
@@ -93,6 +79,5 @@ type SearchFieldProps = SearchFieldOwnProps & ({
  * and matches the app's other icon buttons, and it returns focus to the input so
  * the next query can be typed straight away.
  */
-declare const SearchField: react.ForwardRefExoticComponent<SearchFieldProps & react.RefAttributes<HTMLInputElement>>;
-
-export { SearchField, type SearchFieldProps };
+export declare function SearchField({ ref, value, onChange, clearLabel: clearLabelProp, clearable, className, inputClassName, placeholder, variant, "aria-label": ariaLabel, ...rest }: SearchFieldProps): import("react").JSX.Element;
+export {};

package/dist/components/search-field.js

@@ -1,16 +1,17 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef } from "react";
+import { useMemo, useRef } from "react";
 import { Search, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { FIELD_BASE, FIELD_TOUCH_TEXT } from "./ui.js";
+import { FIELD_BASE, FIELD_TOUCH_TEXT } from "./field-base.js";
+import { mergeRefs } from "./field-parts.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
-const SEARCH_INLINE = "block w-full min-w-0 border-0 bg-transparent py-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:outline-none focus:ring-0 " + // FIELD_BASE carries the 16 px touch floor (§10.1); the inline look needs it too.
+const SEARCH_INLINE = "block w-full min-w-0 border-0 bg-transparent py-1 text-primary shadow-none placeholder:text-placeholder focus:outline-none focus:ring-0 " + // FIELD_BASE carries the 16 px touch floor (§10.1); the inline look needs it too.
 FIELD_TOUCH_TEXT;
-const SearchField = forwardRef(function SearchField2({
+function SearchField({
+  ref,
   value,
   onChange,
-  label,
   clearLabel: clearLabelProp,
   clearable = true,
   className,
@@ -19,11 +20,12 @@ const SearchField = forwardRef(function SearchField2({
   variant = "field",
   "aria-label": ariaLabel,
   ...rest
-}, ref) {
+}) {
   const innerRef = useRef(null);
+  const setRef = useMemo(() => mergeRefs(innerRef, ref), [ref]);
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const clearLabel = clearable ? clearLabelProp ?? common.clear : void 0;
-  const name = ariaLabel ?? label;
+  const name = ariaLabel;
   const inline = variant === "inline";
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsx(
@@ -31,7 +33,7 @@ const SearchField = forwardRef(function SearchField2({
       {
         "aria-hidden": true,
         className: cn(
-          "pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
+          "pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 text-placeholder",
           // Logical sides throughout, so a right-to-left page gets the icon at the
           // start of the line and the clear button at its end.
           inline ? "start-0" : "start-3"
@@ -41,11 +43,7 @@ const SearchField = forwardRef(function SearchField2({
     /* @__PURE__ */ jsx(
       "input",
       {
-        ref: (node) => {
-          innerRef.current = node;
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-        },
+        ref: setRef,
         type: "search",
         value,
         onChange: (e) => onChange(e.target.value),
@@ -78,15 +76,14 @@ const SearchField = forwardRef(function SearchField2({
         },
         "aria-label": clearLabel,
         className: cn(
-          "absolute top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
+          "absolute top-1/2 -translate-y-1/2 rounded p-1 text-placeholder hover:text-secondary",
           inline ? "end-0" : "end-2"
         ),
         children: /* @__PURE__ */ jsx(X, { className: "size-4" })
       }
     )
   ] });
-});
-SearchField.displayName = "SearchField";
+}
 export {
   SearchField
 };

package/dist/components/search-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/search-field.tsx"],"sourcesContent":["import { forwardRef, useRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE, FIELD_TOUCH_TEXT } from \"./ui\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\ninterface SearchFieldOwnProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"value\" | \"onChange\" | \"type\" | \"aria-label\"\n  > {\n  value: string;\n  /** The typed text. Emitted as a plain string, not an event: every caller of the\n   *  four this replaced wanted the string, and one of them held it in a URL param\n   *  rather than in state. */\n  onChange: (value: string) => void;\n  /**\n   * The field's accessible name.\n   *\n   * @deprecated Pass `aria-label` instead — the DOM spelling this kit standardised on\n   * when it found three names for one idea (`ariaLabel`, `aria-label`, and this).\n   * Unchanged and still supported; it names the field only when `aria-label` is\n   * absent, so a consumer can migrate one call site at a time.\n   */\n  label?: string;\n  /** Names the clear button. Default: the catalogue's `common.clear`, in the\n   *  provider's language. */\n  clearLabel?: string;\n  /**\n   * Draw the \"×\" that empties the field once there is something in it. Default\n   * `true`.\n   *\n   * It used to appear only when a `clearLabel` was passed, and every kastlan call\n   * site passed one — lease-list-page.tsx:91, trial-balance-page.tsx:~196,\n   * account-ledger-page.tsx:~131 and data-table/resource-list-page.tsx:256 each\n   * spelled `clearLabel={t(\"table.clear\")}` — so the opt-in was boilerplate: a filter\n   * you can type into and not untype is the complaint that produced the button in\n   * the first place, and the catalogue already names it. `false` is for a field\n   * whose clearing lives elsewhere (a \"Reset filters\" beside it).\n   */\n  clearable?: boolean;\n  /**\n   * `\"field\"` (default): the bordered filter box that sits on a page.\n   *\n   * `\"inline\"`: no box at all — no border, no fill, no padding of its own — and no\n   * type size of its own either, so it takes the size of the header it sits in.\n   * For a search that IS the header: a command-palette sheet, a picker's top line\n   * (Keksdose's transaction search, which lost its `text-base` headline to a\n   * bordered `text-sm` box when it moved onto this component). The container is\n   * what frames it, so give the container the focus cue if it needs one\n   * (`focus-within:`); the caret is the field's own.\n   */\n  variant?: \"field\" | \"inline\";\n  /** Classes for the `<input>` itself. `className` styles the wrapper — the box the\n   *  icon and the clear button are positioned against — so it could set a width\n   *  and nothing else. See {@link Input}'s `inputClassName`. */\n  inputClassName?: string;\n}\n\n// The inline look: FIELD_DISPLAY's idea (the chrome gone, the value the thing\n// itself) without even its baseline, because the header it sits in already draws\n// the line. No `text-*` size, on purpose — the input inherits the caller's.\nconst SEARCH_INLINE =\n  \"block w-full min-w-0 border-0 bg-transparent py-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:outline-none focus:ring-0 \" +\n  // FIELD_BASE carries the 16 px touch floor (§10.1); the inline look needs it too.\n  FIELD_TOUCH_TEXT;\n\n/**\n * One of the two spellings is REQUIRED, and the union is how that survives the\n * deprecation. Making `label` merely optional would have been the easy change and the\n * wrong one: the whole reason this component exists is that two of the four boxes it\n * replaced were named by nothing but their placeholder — which disappears the moment\n * someone types, i.e. exactly when a screen-reader user is working in the field. A\n * caller now has a choice of spelling; it still has no option to pass neither.\n */\nexport type SearchFieldProps = SearchFieldOwnProps &\n  ({ \"aria-label\": string; label?: string } | { label: string; \"aria-label\"?: string });\n\n/**\n * The page-level filter box: a search icon, a `type=\"search\"` input, and a clear\n * \"×\" that appears once there is something to clear.\n *\n * ## Why it is a component\n *\n * Keksdose had four of these and no two agreed. Two were character-identical\n * twenty-line copies (the settings catalogue filter and the tour list filter) —\n * the same absolute icon at `left-3`, the same `pl-9 pr-9`, the same\n * `[&::-webkit-search-cancel-button]:appearance-none`, the same conditional clear\n * button at `right-2` — differing only in which state setter they called. The\n * third (the admin support queue) was the same idea at `left-2`/`size-3.5`/`pl-7`\n * with no clear button and no `type=\"search\"`, so it had neither the `searchbox`\n * role nor a way to empty itself. The fourth (the bank picker) was a bare `<Input\n * placeholder=\"Search\">`: no icon, no clear, and no accessible name at all once\n * the placeholder went away.\n *\n * None of that is a design decision anyone made; it is four people solving the\n * same problem on four days. A shared component is how the fourth screen gets the\n * clear button the first one earned.\n *\n * ## The two X's\n *\n * `type=\"search\"` is what gives the field its `searchbox` role — and, in Chrome, a\n * NATIVE clear cross that paints right next to ours, so a non-empty box shows two\n * X's an inch apart. Ours is the one that survives: it carries an accessible name\n * and matches the app's other icon buttons, and it returns focus to the input so\n * the next query can be typed straight away.\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  {\n    value,\n    onChange,\n    label,\n    clearLabel: clearLabelProp,\n    clearable = true,\n    className,\n    inputClassName,\n    placeholder,\n    variant = \"field\",\n    \"aria-label\": ariaLabel,\n    ...rest\n  },\n  ref,\n) {\n  const innerRef = useRef<HTMLInputElement>(null);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const clearLabel = clearable ? (clearLabelProp ?? common.clear) : undefined;\n  // Whichever spelling the caller used. It is the accessible name AND the placeholder\n  // fallback, so a box named only by `aria-label` still says what it is before anyone\n  // has typed in it — the same deal `label` has always had.\n  const name = ariaLabel ?? label;\n  const inline = variant === \"inline\";\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Search\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\",\n          // Logical sides throughout, so a right-to-left page gets the icon at the\n          // start of the line and the clear button at its end.\n          inline ? \"start-0\" : \"start-3\",\n        )}\n      />\n      <input\n        ref={(node) => {\n          innerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        aria-label={name}\n        placeholder={placeholder ?? name}\n        // Keksdose live #333: *\"Entering the search here — is that set as password?\n        // … I got prompted for remembering my name or mail address\"*, typed into the\n        // settings filter on a phone.\n        //\n        // A `type=\"search\"` input with no `name` and no `autocomplete` is a field\n        // Chrome's autofill classifies by GUESSWORK, from the labels around it and\n        // the other fields on the page — and a settings page has an email and a\n        // password on it. Naming the field and declaring the intent is what takes it\n        // out of that guess: `autocomplete=\"off\"` says it is not part of any profile,\n        // and a `name` of \"search\" is the strongest hint the heuristics take.\n        //\n        // The three that follow are not about autofill but about the same keyboard:\n        // a filter box that capitalises the first letter and autocorrects \"2fa\" to\n        // \"2FA\" is fighting the person typing into it. Declared BEFORE `{...rest}` so\n        // a caller with a reason can still override any of them.\n        name=\"search\"\n        autoComplete=\"off\"\n        autoCapitalize=\"none\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        {...rest}\n        className={cn(\n          inline ? SEARCH_INLINE : FIELD_BASE,\n          inline ? \"ps-7\" : \"ps-9\",\n          // Room for our own \"×\" only when there is one; a field that can't be\n          // cleared has no reason to reserve the space.\n          clearLabel === undefined ? (inline ? \"pe-0\" : \"pe-3\") : inline ? \"pe-8\" : \"pe-9\",\n          \"[&::-webkit-search-cancel-button]:appearance-none\",\n          inputClassName,\n        )}\n      />\n      {clearLabel !== undefined && value !== \"\" && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            onChange(\"\");\n            // Clearing is the start of the next query far more often than it is the\n            // end of this one, so the caret stays where it can be typed into.\n            innerRef.current?.focus();\n          }}\n          aria-label={clearLabel}\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\",\n            inline ? \"end-0\" : \"end-2\",\n          )}\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n});\nSearchField.displayName = \"SearchField\";\n"],"mappings":";AAqII,SACE,KADF;AArIJ,SAAS,YAAY,cAAc;AAEnC,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwB;AAC7C,SAAS,uBAAuB,oBAAoB;AA0DpD,MAAM,gBACJ;AAEA;AA0CK,MAAM,cAAc,WAA+C,SAASA,aACjF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,GAAG;AACL,GACA,KACA;AACA,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,aAAa,YAAa,kBAAkB,OAAO,QAAS;AAIlE,QAAM,OAAO,aAAa;AAC1B,QAAM,SAAS,YAAY;AAC3B,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA;AAAA;AAAA,UAGA,SAAS,YAAY;AAAA,QACvB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,CAAC,SAAS;AACb,mBAAS,UAAU;AACnB,cAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,mBAC9B,IAAK,KAAI,UAAU;AAAA,QAC9B;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,cAAY;AAAA,QACZ,aAAa,eAAe;AAAA,QAgB5B,MAAK;AAAA,QACL,cAAa;AAAA,QACb,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,YAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW;AAAA,UACT,SAAS,gBAAgB;AAAA,UACzB,SAAS,SAAS;AAAA;AAAA;AAAA,UAGlB,eAAe,SAAa,SAAS,SAAS,SAAU,SAAS,SAAS;AAAA,UAC1E;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC,eAAe,UAAa,UAAU,MACrC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM;AACb,mBAAS,EAAE;AAGX,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,SAAS,UAAU;AAAA,QACrB;AAAA,QAEA,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,IACxB;AAAA,KAEJ;AAEJ,CAAC;AACD,YAAY,cAAc;","names":["SearchField"]}
+{"version":3,"sources":["../../src/components/search-field.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\nimport type { InputHTMLAttributes, Ref } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE, FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { mergeRefs } from \"./field-parts\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\ninterface SearchFieldOwnProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"value\" | \"onChange\" | \"type\" | \"aria-label\"\n  > {\n  value: string;\n  /** The typed text. Emitted as a plain string, not an event: every caller of the\n   *  four this replaced wanted the string, and one of them held it in a URL param\n   *  rather than in state. */\n  onChange: (value: string) => void;\n  /** Names the clear button. Default: the catalogue's `common.clear`, in the\n   *  provider's language. */\n  clearLabel?: string;\n  /**\n   * Draw the \"×\" that empties the field once there is something in it. Default\n   * `true`.\n   *\n   * It used to appear only when a `clearLabel` was passed, and every kastlan call\n   * site passed one — lease-list-page.tsx:91, trial-balance-page.tsx:~196,\n   * account-ledger-page.tsx:~131 and data-table/resource-list-page.tsx:256 each\n   * spelled `clearLabel={t(\"table.clear\")}` — so the opt-in was boilerplate: a filter\n   * you can type into and not untype is the complaint that produced the button in\n   * the first place, and the catalogue already names it. `false` is for a field\n   * whose clearing lives elsewhere (a \"Reset filters\" beside it).\n   */\n  clearable?: boolean;\n  /**\n   * `\"field\"` (default): the bordered filter box that sits on a page.\n   *\n   * `\"inline\"`: no box at all — no border, no fill, no padding of its own — and no\n   * type size of its own either, so it takes the size of the header it sits in.\n   * For a search that IS the header: a command-palette sheet, a picker's top line\n   * (Keksdose's transaction search, which lost its `text-base` headline to a\n   * bordered `text-sm` box when it moved onto this component). The container is\n   * what frames it, so give the container the focus cue if it needs one\n   * (`focus-within:`); the caret is the field's own.\n   */\n  variant?: \"field\" | \"inline\";\n  /** Classes for the `<input>` itself. `className` styles the wrapper — the box the\n   *  icon and the clear button are positioned against — so it could set a width\n   *  and nothing else. See {@link Input}'s `inputClassName`. */\n  inputClassName?: string;\n}\n\n// The inline look: FIELD_DISPLAY's idea (the chrome gone, the value the thing\n// itself) without even its baseline, because the header it sits in already draws\n// the line. No `text-*` size, on purpose — the input inherits the caller's.\nconst SEARCH_INLINE =\n  \"block w-full min-w-0 border-0 bg-transparent py-1 text-primary shadow-none placeholder:text-placeholder focus:outline-none focus:ring-0 \" +\n  // FIELD_BASE carries the 16 px touch floor (§10.1); the inline look needs it too.\n  FIELD_TOUCH_TEXT;\n\n/**\n * `aria-label` is REQUIRED: the whole reason this component exists is that two of the\n * four boxes it replaced were named by nothing but their placeholder — which disappears\n * the moment someone types, i.e. exactly when a screen-reader user is working in the\n * field. The `label` spelling it also took from 0.5 was removed in 0.34.\n */\nexport type SearchFieldProps = SearchFieldOwnProps & {\n  \"aria-label\": string;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it\n   *  was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * The page-level filter box: a search icon, a `type=\"search\"` input, and a clear\n * \"×\" that appears once there is something to clear.\n *\n * ## Why it is a component\n *\n * Keksdose had four of these and no two agreed. Two were character-identical\n * twenty-line copies (the settings catalogue filter and the tour list filter) —\n * the same absolute icon at `left-3`, the same `pl-9 pr-9`, the same\n * `[&::-webkit-search-cancel-button]:appearance-none`, the same conditional clear\n * button at `right-2` — differing only in which state setter they called. The\n * third (the admin support queue) was the same idea at `left-2`/`size-3.5`/`pl-7`\n * with no clear button and no `type=\"search\"`, so it had neither the `searchbox`\n * role nor a way to empty itself. The fourth (the bank picker) was a bare `<Input\n * placeholder=\"Search\">`: no icon, no clear, and no accessible name at all once\n * the placeholder went away.\n *\n * None of that is a design decision anyone made; it is four people solving the\n * same problem on four days. A shared component is how the fourth screen gets the\n * clear button the first one earned.\n *\n * ## The two X's\n *\n * `type=\"search\"` is what gives the field its `searchbox` role — and, in Chrome, a\n * NATIVE clear cross that paints right next to ours, so a non-empty box shows two\n * X's an inch apart. Ours is the one that survives: it carries an accessible name\n * and matches the app's other icon buttons, and it returns focus to the input so\n * the next query can be typed straight away.\n */\nexport function SearchField({\n  ref,\n  value,\n  onChange,\n  clearLabel: clearLabelProp,\n  clearable = true,\n  className,\n  inputClassName,\n  placeholder,\n  variant = \"field\",\n  \"aria-label\": ariaLabel,\n  ...rest\n}: SearchFieldProps) {\n  const innerRef = useRef<HTMLInputElement>(null);\n  const setRef = useMemo(() => mergeRefs(innerRef, ref), [ref]);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const clearLabel = clearable ? (clearLabelProp ?? common.clear) : undefined;\n  // The accessible name AND the placeholder fallback, so the box says what it is\n  // before anyone has typed in it.\n  const name = ariaLabel;\n  const inline = variant === \"inline\";\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Search\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 text-placeholder\",\n          // Logical sides throughout, so a right-to-left page gets the icon at the\n          // start of the line and the clear button at its end.\n          inline ? \"start-0\" : \"start-3\",\n        )}\n      />\n      <input\n        ref={setRef}\n        type=\"search\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        aria-label={name}\n        placeholder={placeholder ?? name}\n        // Keksdose live #333: *\"Entering the search here — is that set as password?\n        // … I got prompted for remembering my name or mail address\"*, typed into the\n        // settings filter on a phone.\n        //\n        // A `type=\"search\"` input with no `name` and no `autocomplete` is a field\n        // Chrome's autofill classifies by GUESSWORK, from the labels around it and\n        // the other fields on the page — and a settings page has an email and a\n        // password on it. Naming the field and declaring the intent is what takes it\n        // out of that guess: `autocomplete=\"off\"` says it is not part of any profile,\n        // and a `name` of \"search\" is the strongest hint the heuristics take.\n        //\n        // The three that follow are not about autofill but about the same keyboard:\n        // a filter box that capitalises the first letter and autocorrects \"2fa\" to\n        // \"2FA\" is fighting the person typing into it. Declared BEFORE `{...rest}` so\n        // a caller with a reason can still override any of them.\n        name=\"search\"\n        autoComplete=\"off\"\n        autoCapitalize=\"none\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        {...rest}\n        className={cn(\n          inline ? SEARCH_INLINE : FIELD_BASE,\n          inline ? \"ps-7\" : \"ps-9\",\n          // Room for our own \"×\" only when there is one; a field that can't be\n          // cleared has no reason to reserve the space.\n          clearLabel === undefined ? (inline ? \"pe-0\" : \"pe-3\") : inline ? \"pe-8\" : \"pe-9\",\n          \"[&::-webkit-search-cancel-button]:appearance-none\",\n          inputClassName,\n        )}\n      />\n      {clearLabel !== undefined && value !== \"\" && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            onChange(\"\");\n            // Clearing is the start of the next query far more often than it is the\n            // end of this one, so the caret stays where it can be typed into.\n            innerRef.current?.focus();\n          }}\n          aria-label={clearLabel}\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 rounded p-1 text-placeholder hover:text-secondary\",\n            inline ? \"end-0\" : \"end-2\",\n          )}\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA4HI,SACE,KADF;AA5HJ,SAAS,SAAS,cAAc;AAEhC,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwB;AAC7C,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB,oBAAoB;AAiDpD,MAAM,gBACJ;AAEA;AA4CK,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,GAAG;AACL,GAAqB;AACnB,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,SAAS,QAAQ,MAAM,UAAU,UAAU,GAAG,GAAG,CAAC,GAAG,CAAC;AAC5D,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,aAAa,YAAa,kBAAkB,OAAO,QAAS;AAGlE,QAAM,OAAO;AACb,QAAM,SAAS,YAAY;AAC3B,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA;AAAA;AAAA,UAGA,SAAS,YAAY;AAAA,QACvB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,cAAY;AAAA,QACZ,aAAa,eAAe;AAAA,QAgB5B,MAAK;AAAA,QACL,cAAa;AAAA,QACb,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,YAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW;AAAA,UACT,SAAS,gBAAgB;AAAA,UACzB,SAAS,SAAS;AAAA;AAAA;AAAA,UAGlB,eAAe,SAAa,SAAS,SAAS,SAAU,SAAS,SAAS;AAAA,UAC1E;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC,eAAe,UAAa,UAAU,MACrC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM;AACb,mBAAS,EAAE;AAGX,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,SAAS,UAAU;AAAA,QACrB;AAAA,QAEA,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,IACxB;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/select.d.ts

@@ -0,0 +1,69 @@
+import type { ReactNode, Ref, SelectHTMLAttributes } from "react";
+import type { CommitScope } from "./write-lock.js";
+import { type DisabledReasonDisplay } from "./field-parts.js";
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    label?: ReactNode;
+    /** See {@link Input}'s `invalid`. */
+    invalid?: boolean;
+    /** See {@link Input}'s `error`. */
+    error?: ReactNode;
+    /** A {@link FieldHint} for the label line — see {@link FloatingField}. Plain
+     *  TEXT (a string or a number) is a caption instead, and goes UNDER the field
+     *  like every other field's hint, attached through `aria-describedby`: the label
+     *  line is 11px of strip shared with the label, and a sentence placed there was
+     *  set in the value's type on top of both the label and the value. On an
+     *  UNLABELLED Select (no label line) a FieldHint sits at the field's end edge,
+     *  outside the box. Since 0.34 a FieldHint is the caption at Large and on a touch
+     *  screen, as on Input (`useInlineHint`); a `HelpPopover` stays a "?". */
+    hint?: ReactNode;
+    /**
+     * `"sm"`: a 28px, 12px-type select for a toolbar or a table header, where the
+     * 36px field stands a head taller than the buttons beside it. `"md"` (default)
+     * is the field every form uses. Unlabelled selects only — a floating label needs
+     * the tall box to float in, so a labelled Select ignores `"sm"`.
+     *
+     * A NUMBER is still the native attribute (the rows of a list box) and is passed
+     * straight through, so the one HTML meaning of `size` keeps working. Above 1 (as
+     * with `multiple`) the browser draws a list box, and the Select drops its chevron
+     * and the end padding reserved for it.
+     */
+    size?: "sm" | "md" | number;
+    /** Classes for the `<select>` itself. `className` styles the WRAPPER — the box
+     *  the chevron is positioned against — so it could set a width and nothing
+     *  else; this is the way to the element. See {@link Input}'s `inputClassName`. */
+    selectClassName?: string;
+    /**
+     * Why the choice cannot be changed — {@link Button}'s `disabledReason`, for a select
+     * that SAVES on change (a role picker in a members table, a status in a row). keksdose
+     * K3: those sat inside a hand-rolled `SaveGuard` that forced a native `disabled`, which
+     * took the field out of the tab order so the reason never reached a keyboard.
+     *
+     * With a reason the select is `aria-disabled` instead — still focusable, still showing
+     * its value — its list does not open (pointer and keys are swallowed, Tab and Escape
+     * excepted), `onChange` is never called, and the reason is a line under the field at
+     * Large and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`),
+     * and on `aria-describedby`. It wears the settled look of a disabled field and drops
+     * its chevron, as a disabled Select does (dev#474). It wins over `disabled`.
+     *
+     * Use it CONTROLLED (`value` + `onChange`): React puts a controlled value back after
+     * the swallowed change. A touch platform's own picker may still open; nothing it picks
+     * is kept or reported.
+     */
+    disabledReason?: ReactNode;
+    /**
+     * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line
+     * under the field at Large and on a touch screen, the tooltip otherwise (§4 "No fact
+     * only in a tooltip"; DUP-3, refactor audit 2026-10).
+     */
+    disabledReasonDisplay?: DisabledReasonDisplay;
+    /**
+     * This select COMMITS — choosing saves. Under a locked {@link WriteLockProvider} it is
+     * locked the `disabledReason` way with the lock's reason (which wins over its own).
+     * No provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3; a
+     * {@link CommitScope} since 0.33.
+     */
+    commit?: CommitScope;
+    /** The `<select>`. A React 19 ref prop since 0.34 — see {@link InputProps.ref}. */
+    ref?: Ref<HTMLSelectElement>;
+}
+export declare function Select(props: SelectProps): import("react").JSX.Element;

package/dist/components/select.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../lib/cn.js";
+import {
+  LockedReason,
+  mergeDescribedBy,
+  useFieldError,
+  useFieldHint,
+  useLockReason
+} from "./field-parts.js";
+import {
+  FIELD_BASE,
+  FIELD_FLOATING_PAD,
+  FIELD_INVALID,
+  FieldChevron,
+  FieldGroup,
+  FloatingField,
+  fieldBelow
+} from "./field-base.js";
+const SELECT_SM = "h-7 py-0 ps-2 pe-7 text-xs";
+const LOCKED_SELECT_KEYS = /* @__PURE__ */ new Set(["Tab", "Escape", "Shift"]);
+const FIELD_LOCKED = "cursor-not-allowed bg-surface-2 text-muted";
+function Select(props) {
+  const {
+    ref,
+    className,
+    label,
+    id,
+    children,
+    invalid,
+    error,
+    hint: hintProp,
+    size,
+    selectClassName,
+    disabledReason,
+    disabledReasonDisplay,
+    commit,
+    onMouseDown,
+    onKeyDown,
+    onChange,
+    ...rest
+  } = props;
+  const reserve = "error" in props || "hint" in props || "showCount" in props;
+  const generated = useId();
+  const lock = useLockReason(commit, disabledReason);
+  const locked = lock.locked;
+  const nativeSize = typeof size === "number" ? size : void 0;
+  const listBox = nativeSize !== void 0 && nativeSize > 1 || Boolean(rest.multiple);
+  const small = size === "sm" && label === void 0;
+  const fieldId = id ?? generated;
+  const hintParts = useFieldHint(hintProp, rest["aria-describedby"]);
+  const hint = hintParts.labelHint;
+  const { isInvalid, describedBy, errorEl } = useFieldError(
+    error,
+    invalid,
+    // The caption goes in BEFORE the error — the standing advice first, the news
+    // second, the order useFieldError keeps for a caller's own description. A lock's
+    // reason sits between the two.
+    mergeDescribedBy(hintParts.describedBy, locked && lock.reasonId),
+    rest["aria-invalid"]
+  );
+  const below = fieldBelow(hintParts, null, errorEl);
+  const chevron = rest.disabled || listBox || locked ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "end-1.5 size-3.5" : void 0 });
+  const dress = listBox ? "overflow-y-auto [&_option]:py-1" : "appearance-none pe-9";
+  const interaction = locked ? {
+    disabled: void 0,
+    "aria-disabled": true,
+    onMouseDown: (e) => e.preventDefault(),
+    onKeyDown: (e) => {
+      if (!LOCKED_SELECT_KEYS.has(e.key) && !e.ctrlKey && !e.metaKey) e.preventDefault();
+    },
+    onChange: () => {
+    }
+  } : { onMouseDown, onKeyDown, onChange };
+  const boxClass = locked ? void 0 : className;
+  const withReason = (box) => locked ? /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: cn("block", className), children: box }) : box;
+  if (label === void 0) {
+    const select = /* @__PURE__ */ jsx(
+      "select",
+      {
+        ref,
+        id,
+        size: nativeSize,
+        ...rest,
+        ...interaction,
+        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+        "aria-describedby": describedBy,
+        className: cn(
+          FIELD_BASE,
+          dress,
+          listBox && "py-0",
+          small && SELECT_SM,
+          locked && FIELD_LOCKED,
+          selectClassName,
+          isInvalid && FIELD_INVALID
+        ),
+        children
+      }
+    );
+    if (hint !== void 0) {
+      return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", boxClass), children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
+            select,
+            chevron
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: hint })
+        ] })
+      ) });
+    }
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
+      /* @__PURE__ */ jsxs("div", { className: cn("relative", boxClass), children: [
+        select,
+        chevron
+      ] })
+    ) });
+  }
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
+    /* @__PURE__ */ jsxs(
+      FloatingField,
+      {
+        className: boxClass,
+        htmlFor: fieldId,
+        label,
+        staticLabel: true,
+        hint,
+        children: [
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              ref,
+              id: fieldId,
+              size: nativeSize,
+              ...rest,
+              ...interaction,
+              "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+              "aria-describedby": describedBy,
+              className: cn(
+                FIELD_BASE,
+                // The floated label takes the top strip of a list box too, so its first
+                // row starts under the label rather than behind it. No bottom padding — see
+                // `dress`.
+                // At Large the label stands above the field (§10.17): no strip.
+                listBox ? "pt-5 pb-0 large:pt-2" : FIELD_FLOATING_PAD,
+                "peer",
+                dress,
+                locked && FIELD_LOCKED,
+                selectClassName,
+                isInvalid && FIELD_INVALID
+              ),
+              children
+            }
+          ),
+          chevron
+        ]
+      }
+    )
+  ) });
+}
+export {
+  Select
+};
+//# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/select.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { KeyboardEvent, MouseEvent, ReactNode, Ref, SelectHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport type { CommitScope } from \"./write-lock\";\nimport {\n  LockedReason,\n  mergeDescribedBy,\n  type DisabledReasonDisplay,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n} from \"./field-parts\";\nimport {\n  FIELD_BASE,\n  FIELD_FLOATING_PAD,\n  FIELD_INVALID,\n  FieldChevron,\n  FieldGroup,\n  FloatingField,\n  fieldBelow,\n} from \"./field-base\";\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"size\"> {\n  label?: ReactNode;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`. */\n  error?: ReactNode;\n  /** A {@link FieldHint} for the label line — see {@link FloatingField}. Plain\n   *  TEXT (a string or a number) is a caption instead, and goes UNDER the field\n   *  like every other field's hint, attached through `aria-describedby`: the label\n   *  line is 11px of strip shared with the label, and a sentence placed there was\n   *  set in the value's type on top of both the label and the value. On an\n   *  UNLABELLED Select (no label line) a FieldHint sits at the field's end edge,\n   *  outside the box. Since 0.34 a FieldHint is the caption at Large and on a touch\n   *  screen, as on Input (`useInlineHint`); a `HelpPopover` stays a \"?\". */\n  hint?: ReactNode;\n  /**\n   * `\"sm\"`: a 28px, 12px-type select for a toolbar or a table header, where the\n   * 36px field stands a head taller than the buttons beside it. `\"md\"` (default)\n   * is the field every form uses. Unlabelled selects only — a floating label needs\n   * the tall box to float in, so a labelled Select ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native attribute (the rows of a list box) and is passed\n   * straight through, so the one HTML meaning of `size` keeps working. Above 1 (as\n   * with `multiple`) the browser draws a list box, and the Select drops its chevron\n   * and the end padding reserved for it.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** Classes for the `<select>` itself. `className` styles the WRAPPER — the box\n   *  the chevron is positioned against — so it could set a width and nothing\n   *  else; this is the way to the element. See {@link Input}'s `inputClassName`. */\n  selectClassName?: string;\n  /**\n   * Why the choice cannot be changed — {@link Button}'s `disabledReason`, for a select\n   * that SAVES on change (a role picker in a members table, a status in a row). keksdose\n   * K3: those sat inside a hand-rolled `SaveGuard` that forced a native `disabled`, which\n   * took the field out of the tab order so the reason never reached a keyboard.\n   *\n   * With a reason the select is `aria-disabled` instead — still focusable, still showing\n   * its value — its list does not open (pointer and keys are swallowed, Tab and Escape\n   * excepted), `onChange` is never called, and the reason is a line under the field at\n   * Large and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`),\n   * and on `aria-describedby`. It wears the settled look of a disabled field and drops\n   * its chevron, as a disabled Select does (dev#474). It wins over `disabled`.\n   *\n   * Use it CONTROLLED (`value` + `onChange`): React puts a controlled value back after\n   * the swallowed change. A touch platform's own picker may still open; nothing it picks\n   * is kept or reported.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n   * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n   * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This select COMMITS — choosing saves. Under a locked {@link WriteLockProvider} it is\n   * locked the `disabledReason` way with the lock's reason (which wins over its own).\n   * No provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3; a\n   * {@link CommitScope} since 0.33.\n   */\n  commit?: CommitScope;\n  /** The `<select>`. A React 19 ref prop since 0.34 — see {@link InputProps.ref}. */\n  ref?: Ref<HTMLSelectElement>;\n}\n\n// The compact select: the field's colours, a toolbar button's height. `py-0` and a\n// fixed height rather than a smaller padding, so the box is 28px whatever line\n// height the caller's type brings with it.\nconst SELECT_SM = \"h-7 py-0 ps-2 pe-7 text-xs\";\n\n/** Keys a locked select still answers: leaving it, and dismissing its tooltip. Every\n *  other key would open the list or step the value. */\nconst LOCKED_SELECT_KEYS = new Set([\"Tab\", \"Escape\", \"Shift\"]);\n\n/** FIELD_BASE's `disabled:` look, for a select that is locked without being `disabled`\n *  (the `:disabled` variants cannot match it). */\nconst FIELD_LOCKED = \"cursor-not-allowed bg-surface-2 text-muted\";\n\nexport function Select(props: SelectProps) {\n  const {\n    ref,\n    className,\n    label,\n    id,\n    children,\n    invalid,\n    error,\n    hint: hintProp,\n    size,\n    selectClassName,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onMouseDown,\n    onKeyDown,\n    onChange,\n    ...rest\n  } = props;\n  // See Input's `reserve`.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  // Only a number reaches the DOM; the two words are this component's own.\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // A numeric size above 1 (or `multiple`) makes the browser draw a LIST BOX — all\n  // the rows in the field, no menu to drop. The dropdown dress did not fit it: the\n  // chevron was centred on a box several rows tall, sat on top of the rows' text\n  // at the end edge, and `pe-9` clipped every option nine units early. A list box\n  // gets the plain field instead — its own native scroll, no chevron, even padding.\n  const listBox = (nativeSize !== undefined && nativeSize > 1) || Boolean(rest.multiple);\n  const small = size === \"sm\" && label === undefined;\n  const fieldId = id ?? generated;\n  // Text is a caption under the field; a FieldHint rides the label line — and at Large\n  // and on a touch screen is its words, a caption like any text (§4; a HelpPopover stays\n  // on the label line, §10.23). See `hint` above. Through useFieldHint since 0.34, not a\n  // copy of its rule (DUP-2, refactor audit 2026-10).\n  const hintParts = useFieldHint(hintProp, rest[\"aria-describedby\"]);\n  const hint = hintParts.labelHint;\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    // The caption goes in BEFORE the error — the standing advice first, the news\n    // second, the order useFieldError keeps for a caller's own description. A lock's\n    // reason sits between the two.\n    mergeDescribedBy(hintParts.describedBy, locked && lock.reasonId),\n    rest[\"aria-invalid\"],\n  );\n  const below = fieldBelow(hintParts, null, errorEl);\n  // Custom chevron (native arrow hidden via appearance-none) so it sits a touch\n  // in from the end border and matches both themes — feedback #223. A DISABLED\n  // select has no menu to drop, so it drops the chevron too: the arrow is the one\n  // thing on the control that promises a choice (Keksdose dev#474, where the\n  // account type became read-only and still looked exactly like a picker). A locked\n  // one has no menu either.\n  const chevron =\n    rest.disabled || listBox || locked ? null : (\n      <FieldChevron className={small ? \"end-1.5 size-3.5\" : undefined} />\n    );\n  // `pe-9` is the room the chevron takes; a list box has none to make room for.\n  //\n  // A list box's height is `size` rows plus its padding, but its rows are clipped at\n  // the PADDING edge, not the content edge — so FIELD_BASE's `pb-2` showed the next\n  // row through the bottom padding: `size={4}` drew four and a half. The vertical room\n  // moves onto the rows instead (option padding counts toward the row height the\n  // browser sizes the box by), and the box keeps no bottom padding: exactly `size`\n  // whole rows, at any width.\n  const dress = listBox ? \"overflow-y-auto [&_option]:py-1\" : \"appearance-none pe-9\";\n  // Locked: focusable, but nothing opens the list or moves the value, and nothing is\n  // reported. The no-op `onChange` keeps a controlled select's value where React put\n  // it (and keeps React from warning about a `value` with no handler).\n  const interaction = locked\n    ? {\n        disabled: undefined,\n        \"aria-disabled\": true as const,\n        onMouseDown: (e: MouseEvent<HTMLSelectElement>) => e.preventDefault(),\n        onKeyDown: (e: KeyboardEvent<HTMLSelectElement>) => {\n          if (!LOCKED_SELECT_KEYS.has(e.key) && !e.ctrlKey && !e.metaKey) e.preventDefault();\n        },\n        onChange: () => {},\n      }\n    : { onMouseDown, onKeyDown, onChange };\n  // While locked the field sits in the reason's frame (the line, or the Tooltip), which\n  // becomes the outermost box — so `className` (a width, a grid cell) moves onto it, and\n  // the form keeps its layout. `block` so a full-width field stays full width inside it.\n  const boxClass = locked ? undefined : className;\n  const withReason = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block\", className)}>\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n  if (label === undefined) {\n    const select = (\n      <select\n        ref={ref}\n        // `id` is destructured out of the props to feed `fieldId`, and this branch\n        // never put it back — so an UNLABELLED Select swallowed it and the\n        // consumer's own `<label for=\"…\">` pointed at nothing. The control stayed\n        // in the tab order with no accessible name at all: reachable, and silent\n        // when it was reached. Input and Textarea both forward it here; this is\n        // the third one doing the same thing.\n        id={id}\n        size={nativeSize}\n        {...rest}\n        {...interaction}\n        // OR-ed with the spread for the reason spelled out on Input's copy: this\n        // branch wrote `invalid || undefined`, so passing `aria-invalid` by hand\n        // to a Select — which is what a caller does when the validity is\n        // `\"grammar\"` or `\"spelling\"`, or when the paint is not wanted — had the\n        // attribute silently dropped. Input has never done that.\n        aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n        aria-describedby={describedBy}\n        className={cn(\n          FIELD_BASE,\n          dress,\n          listBox && \"py-0\",\n          small && SELECT_SM,\n          locked && FIELD_LOCKED,\n          selectClassName,\n          isInvalid && FIELD_INVALID,\n        )}\n      >\n        {children}\n      </select>\n    );\n    // A FieldHint with no label line to ride (0.15.5 P8): an unlabelled Select — named\n    // by `aria-label` or a `<label>` of the caller's — dropped a non-text `hint`\n    // without a trace, so the \"?\" a caller passed never rendered and a test looking\n    // for its button found none. It goes at the end of the field instead, outside the\n    // box, as the label line's own hint goes at the end of the label.\n    if (hint !== undefined) {\n      return (\n        <FieldGroup errorEl={below} reserve={reserve}>\n          {withReason(\n            <div className={cn(\"flex items-center gap-1.5\", boxClass)}>\n              <div className=\"relative min-w-0 flex-1\">\n                {select}\n                {chevron}\n              </div>\n              <span className=\"flex shrink-0 items-center\">{hint}</span>\n            </div>,\n          )}\n        </FieldGroup>\n      );\n    }\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        {withReason(\n          <div className={cn(\"relative\", boxClass)}>\n            {select}\n            {chevron}\n          </div>,\n        )}\n      </FieldGroup>\n    );\n  }\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      {withReason(\n        <FloatingField\n          className={boxClass}\n          htmlFor={fieldId}\n          label={label}\n          staticLabel\n          hint={hint}\n        >\n          <select\n            ref={ref}\n            id={fieldId}\n            size={nativeSize}\n            {...rest}\n            {...interaction}\n            aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n            aria-describedby={describedBy}\n            className={cn(\n              FIELD_BASE,\n              // The floated label takes the top strip of a list box too, so its first\n              // row starts under the label rather than behind it. No bottom padding — see\n              // `dress`.\n              // At Large the label stands above the field (§10.17): no strip.\n              listBox ? \"pt-5 pb-0 large:pt-2\" : FIELD_FLOATING_PAD,\n              \"peer\",\n              dress,\n              locked && FIELD_LOCKED,\n              selectClassName,\n              isInvalid && FIELD_INVALID,\n            )}\n          >\n            {children}\n          </select>\n          {chevron}\n        </FloatingField>,\n      )}\n    </FieldGroup>\n  );\n}\n"],"mappings":";AAgKM,cAiFQ,YAjFR;AAhKN,SAAS,aAAa;AAEtB,SAAS,UAAU;AAEnB;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAuEP,MAAM,YAAY;AAIlB,MAAM,qBAAqB,oBAAI,IAAI,CAAC,OAAO,UAAU,OAAO,CAAC;AAI7D,MAAM,eAAe;AAEd,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,UAAU,WAAW,SAAS,UAAU,SAAS,eAAe;AACtE,QAAM,YAAY,MAAM;AACxB,QAAM,OAAO,cAAc,QAAQ,cAAc;AACjD,QAAM,SAAS,KAAK;AAEpB,QAAM,aAAa,OAAO,SAAS,WAAW,OAAO;AAMrD,QAAM,UAAW,eAAe,UAAa,aAAa,KAAM,QAAQ,KAAK,QAAQ;AACrF,QAAM,QAAQ,SAAS,QAAQ,UAAU;AACzC,QAAM,UAAU,MAAM;AAKtB,QAAM,YAAY,aAAa,UAAU,KAAK,kBAAkB,CAAC;AACjE,QAAM,OAAO,UAAU;AACvB,QAAM,EAAE,WAAW,aAAa,QAAQ,IAAI;AAAA,IAC1C;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAiB,UAAU,aAAa,UAAU,KAAK,QAAQ;AAAA,IAC/D,KAAK,cAAc;AAAA,EACrB;AACA,QAAM,QAAQ,WAAW,WAAW,MAAM,OAAO;AAOjD,QAAM,UACJ,KAAK,YAAY,WAAW,SAAS,OACnC,oBAAC,gBAAa,WAAW,QAAQ,qBAAqB,QAAW;AAUrE,QAAM,QAAQ,UAAU,oCAAoC;AAI5D,QAAM,cAAc,SAChB;AAAA,IACE,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,aAAa,CAAC,MAAqC,EAAE,eAAe;AAAA,IACpE,WAAW,CAAC,MAAwC;AAClD,UAAI,CAAC,mBAAmB,IAAI,EAAE,GAAG,KAAK,CAAC,EAAE,WAAW,CAAC,EAAE,QAAS,GAAE,eAAe;AAAA,IACnF;AAAA,IACA,UAAU,MAAM;AAAA,IAAC;AAAA,EACnB,IACA,EAAE,aAAa,WAAW,SAAS;AAIvC,QAAM,WAAW,SAAS,SAAY;AACtC,QAAM,aAAa,CAAC,QAClB,SACE,oBAAC,gBAAa,MAAY,SAAS,uBAAuB,WAAW,GAAG,SAAS,SAAS,GACvF,eACH,IAEA;AAEJ,MAAI,UAAU,QAAW;AACvB,UAAM,SACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAOA;AAAA,QACA,MAAM;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,QAMJ,gBAAc,aAAa,KAAK,cAAc,KAAK;AAAA,QACnD,oBAAkB;AAAA,QAClB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,WAAW;AAAA,UACX,SAAS;AAAA,UACT,UAAU;AAAA,UACV;AAAA,UACA,aAAa;AAAA,QACf;AAAA,QAEC;AAAA;AAAA,IACH;AAOF,QAAI,SAAS,QAAW;AACtB,aACE,oBAAC,cAAW,SAAS,OAAO,SACzB;AAAA,QACC,qBAAC,SAAI,WAAW,GAAG,6BAA6B,QAAQ,GACtD;AAAA,+BAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,YACA;AAAA,aACH;AAAA,UACA,oBAAC,UAAK,WAAU,8BAA8B,gBAAK;AAAA,WACrD;AAAA,MACF,GACF;AAAA,IAEJ;AACA,WACE,oBAAC,cAAW,SAAS,OAAO,SACzB;AAAA,MACC,qBAAC,SAAI,WAAW,GAAG,YAAY,QAAQ,GACpC;AAAA;AAAA,QACA;AAAA,SACH;AAAA,IACF,GACF;AAAA,EAEJ;AACA,SACE,oBAAC,cAAW,SAAS,OAAO,SACzB;AAAA,IACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,SAAS;AAAA,QACT;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,IAAI;AAAA,cACJ,MAAM;AAAA,cACL,GAAG;AAAA,cACH,GAAG;AAAA,cACJ,gBAAc,aAAa,KAAK,cAAc,KAAK;AAAA,cACnD,oBAAkB;AAAA,cAClB,WAAW;AAAA,gBACT;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKA,UAAU,yBAAyB;AAAA,gBACnC;AAAA,gBACA;AAAA,gBACA,UAAU;AAAA,gBACV;AAAA,gBACA,aAAa;AAAA,cACf;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/components/separator.d.ts

@@ -1,7 +1,5 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef } from 'react';
-
-interface SeparatorProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "role"> {
+import type { ComponentPropsWithRef } from "react";
+export interface SeparatorProps extends Omit<ComponentPropsWithRef<"div">, "children" | "role"> {
     orientation?: "horizontal" | "vertical";
     /**
      * `false` (default, as in Radix): a real `role="separator"`, which a reader
@@ -18,6 +16,4 @@ interface SeparatorProps extends Omit<ComponentPropsWithoutRef<"div">, "children
  * horizontal is the role's default, and stating a default is noise in every reader's
  * verbose mode.
  */
-declare function Separator({ orientation, decorative, className, ...rest }: SeparatorProps): react.JSX.Element;
-
-export { Separator, type SeparatorProps };
+export declare function Separator({ orientation, decorative, className, ...rest }: SeparatorProps): import("react").JSX.Element;

package/dist/components/separator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/separator.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface SeparatorProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * `false` (default, as in Radix): a real `role=\"separator\"`, which a reader\n   * announces — right between groups of controls, a menu's sections, a toolbar's\n   * halves. `true`: a line for the eye only (`role=\"none\"`), for a divider that\n   * separates nothing the structure does not already separate.\n   */\n  decorative?: boolean;\n}\n\n/**\n * A hairline between two things.\n *\n * kastlan's other Radix leftover. `aria-orientation` is set only when vertical:\n * horizontal is the role's default, and stating a default is noise in every reader's\n * verbose mode.\n */\nexport function Separator({ orientation = \"horizontal\", decorative = false, className, ...rest }: SeparatorProps) {\n  const vertical = orientation === \"vertical\";\n  return (\n    <div\n      {...rest}\n      role={decorative ? \"none\" : \"separator\"}\n      aria-orientation={!decorative && vertical ? \"vertical\" : undefined}\n      data-orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-[var(--border)]\",\n        vertical ? \"w-px self-stretch\" : \"h-px w-full\",\n        className,\n      )}\n    />\n  );\n}\n"],"mappings":";AAwBI;AAvBJ,SAAS,UAAU;AAoBZ,SAAS,UAAU,EAAE,cAAc,cAAc,aAAa,OAAO,WAAW,GAAG,KAAK,GAAmB;AAChH,QAAM,WAAW,gBAAgB;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM,aAAa,SAAS;AAAA,MAC5B,oBAAkB,CAAC,cAAc,WAAW,aAAa;AAAA,MACzD,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT;AAAA,QACA,WAAW,sBAAsB;AAAA,QACjC;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/separator.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface SeparatorProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"role\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * `false` (default, as in Radix): a real `role=\"separator\"`, which a reader\n   * announces — right between groups of controls, a menu's sections, a toolbar's\n   * halves. `true`: a line for the eye only (`role=\"none\"`), for a divider that\n   * separates nothing the structure does not already separate.\n   */\n  decorative?: boolean;\n}\n\n/**\n * A hairline between two things.\n *\n * kastlan's other Radix leftover. `aria-orientation` is set only when vertical:\n * horizontal is the role's default, and stating a default is noise in every reader's\n * verbose mode.\n */\nexport function Separator({ orientation = \"horizontal\", decorative = false, className, ...rest }: SeparatorProps) {\n  const vertical = orientation === \"vertical\";\n  return (\n    <div\n      {...rest}\n      role={decorative ? \"none\" : \"separator\"}\n      aria-orientation={!decorative && vertical ? \"vertical\" : undefined}\n      data-orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-[var(--border)]\",\n        vertical ? \"w-px self-stretch\" : \"h-px w-full\",\n        className,\n      )}\n    />\n  );\n}\n"],"mappings":";AAwBI;AAvBJ,SAAS,UAAU;AAoBZ,SAAS,UAAU,EAAE,cAAc,cAAc,aAAa,OAAO,WAAW,GAAG,KAAK,GAAmB;AAChH,QAAM,WAAW,gBAAgB;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM,aAAa,SAAS;AAAA,MAC5B,oBAAkB,CAAC,cAAc,WAAW,aAAa;AAAA,MACzD,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT;AAAA,QACA,WAAW,sBAAsB;AAAA,QACjC;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}