@tensor_1/react 2.40.2 → 2.42.0

package/dist/components/Kbd.d.ts

@@ -7,6 +7,25 @@ interface KbdProps extends HTMLAttributes<HTMLElement> {
 /** One keyboard key over `.uix-kbd` (HAR-1361; TENSOR C14, MOTUS B-A16). */
 declare function Kbd({ className, children, ...props }: KbdProps): react.JSX.Element;
 type KbdPlatform = 'mac' | 'other';
+/**
+ * The platform for glyphs and `aria-keyshortcuts`: `platform` when given, else the browser's. The
+ * server and the hydrating render use `other`; a component mounted later (a menu row on open)
+ * reads the platform at once, so it never flashes Ctrl before ⌘.
+ */
+declare function useKbdPlatform(platform?: KbdPlatform): KbdPlatform;
+/**
+ * A keyboard shortcut (HAR-2031): the keys pressed together, in `KbdCombo`'s names, e.g.
+ * `['Mod', 'K']`, `['Shift', '?']` or `['A']`. `Mod` is ⌘ on Apple and Ctrl elsewhere.
+ */
+type KeyShortcut = readonly string[];
+/**
+ * The `aria-keyshortcuts` value of a shortcut on a platform (HAR-2031): `['Mod', 'K']` is
+ * `Meta+K` on Apple and `Control+K` elsewhere; a single letter is upper-cased (`['a']` is `A`).
+ * For a control the kit does not render.
+ */
+declare function ariaKeyShortcuts(keys: KeyShortcut, platform: KbdPlatform): string;
+/** A `shortcut` prop that is key names rather than a node (HAR-2031). */
+declare const isKeyShortcut: (value: unknown) => value is KeyShortcut;
 interface KbdComboProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /**
      * Keys in order, e.g. `['Mod', 'K']`. `Mod` is ⌘ on Apple and Ctrl elsewhere; `Shift`,
@@ -24,4 +43,4 @@ interface KbdComboProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'
  */
 declare function KbdCombo({ keys, platform, keyLabels, className, ...props }: KbdComboProps): react.JSX.Element;
 
-export { Kbd, KbdCombo, type KbdComboProps, type KbdPlatform, type KbdProps };
+export { Kbd, KbdCombo, type KbdComboProps, type KbdPlatform, type KbdProps, type KeyShortcut, ariaKeyShortcuts, isKeyShortcut, useKbdPlatform };

package/dist/components/Kbd.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 import { cx } from "../cx.js";
 function Kbd({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("kbd", { className: cx("uix-kbd", className), ...props, children });
@@ -12,6 +12,11 @@ const KEYS = {
   Alt: { mac: ["\u2325", "Option"], other: ["Alt", "Alt"] },
   Enter: { mac: ["\u21B5", "Enter"], other: ["Enter", "Enter"] },
   Escape: { mac: ["Esc", "Escape"], other: ["Esc", "Escape"] },
+  Esc: { mac: ["Esc", "Escape"], other: ["Esc", "Escape"] },
+  Delete: { mac: ["Del", "Delete"], other: ["Del", "Delete"] },
+  Del: { mac: ["Del", "Delete"], other: ["Del", "Delete"] },
+  Space: { mac: ["Space", "Space"], other: ["Space", "Space"] },
+  " ": { mac: ["Space", "Space"], other: ["Space", "Space"] },
   Backspace: { mac: ["\u232B", "Backspace"], other: ["Backspace", "Backspace"] },
   Tab: { mac: ["\u21E5", "Tab"], other: ["Tab", "Tab"] },
   ArrowUp: { mac: ["\u2191", "Up arrow"], other: ["\u2191", "Up arrow"] },
@@ -24,12 +29,27 @@ const detectPlatform = () => {
   const nav = navigator;
   return /mac|iphone|ipad|ipod/i.test(nav.userAgentData?.platform ?? navigator.platform ?? "") ? "mac" : "other";
 };
+const noSubscription = () => () => {
+};
+const serverPlatform = () => "other";
+function useKbdPlatform(platform) {
+  const detected = useSyncExternalStore(noSubscription, detectPlatform, serverPlatform);
+  return platform ?? detected;
+}
+const ARIA_KEYS = {
+  Mod: { mac: "Meta", other: "Control" },
+  Ctrl: { mac: "Control", other: "Control" },
+  Esc: { mac: "Escape", other: "Escape" },
+  Del: { mac: "Delete", other: "Delete" },
+  " ": { mac: "Space", other: "Space" },
+  "+": { mac: "Plus", other: "Plus" }
+};
+function ariaKeyShortcuts(keys, platform) {
+  return keys.map((key) => ARIA_KEYS[key]?.[platform] ?? (key.length === 1 ? key.toUpperCase() : key)).join("+");
+}
+const isKeyShortcut = (value) => Array.isArray(value) && value.length > 0 && value.every((key) => typeof key === "string");
 function KbdCombo({ keys, platform, keyLabels, className, ...props }) {
-  const [detected, setDetected] = useState("other");
-  useEffect(() => {
-    if (!platform) setDetected(detectPlatform());
-  }, [platform]);
-  const active = platform ?? detected;
+  const active = useKbdPlatform(platform);
   const parts = keys.map((key) => {
     const known = KEYS[key]?.[active];
     return { glyph: known?.[0] ?? key, spoken: keyLabels?.[key] ?? known?.[1] ?? key };
@@ -41,5 +61,8 @@ function KbdCombo({ keys, platform, keyLabels, className, ...props }) {
 }
 export {
   Kbd,
-  KbdCombo
+  KbdCombo,
+  ariaKeyShortcuts,
+  isKeyShortcut,
+  useKbdPlatform
 };

package/dist/components/Menu.d.ts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { ReactElement, ReactNode } from 'react';
 import { UixRenderLink } from '../link.js';
 import { Placement } from '../overlay-position.js';
+import { KeyShortcut } from './Kbd.js';
 
 /** `id` and `data-*` for the item's own element (HAR-1629): a stable hook for tests, journeys and analytics. */
 interface MenuItemAttributes {
@@ -40,8 +41,12 @@ interface MenuItemProps extends MenuItemAttributes {
     href?: string;
     renderLink?: UixRenderLink;
     icon?: ReactNode;
-    /** Shortcut hint at the end of the row, e.g. `<KbdCombo keys={['Mod', 'D']} />`. */
-    shortcut?: ReactNode;
+    /**
+     * The row's keyboard shortcut, at its end. Key names (`['Mod', 'D']`, `['A']`) render with
+     * `KbdCombo` and set the row's `aria-keyshortcuts` for the viewer's platform (HAR-2031); any
+     * other node renders as given.
+     */
+    shortcut?: KeyShortcut | ReactNode;
     tone?: 'default' | 'danger';
     disabled?: boolean;
     className?: string;
@@ -70,7 +75,8 @@ interface MenuItemRadioProps extends MenuItemAttributes {
     closeOnSelect?: boolean;
     children?: ReactNode;
     icon?: ReactNode;
-    shortcut?: ReactNode;
+    /** Key names (`['Shift', 'W']`) or a node; see `MenuItemProps.shortcut`. */
+    shortcut?: KeyShortcut | ReactNode;
     disabled?: boolean;
     className?: string;
 }
@@ -83,7 +89,8 @@ interface MenuItemCheckboxProps extends MenuItemAttributes {
     closeOnSelect?: boolean;
     children?: ReactNode;
     icon?: ReactNode;
-    shortcut?: ReactNode;
+    /** Key names (`['Shift', 'W']`) or a node; see `MenuItemProps.shortcut`. */
+    shortcut?: KeyShortcut | ReactNode;
     disabled?: boolean;
     className?: string;
 }

package/dist/components/Menu.js

@@ -5,6 +5,16 @@ import { cx } from "../cx.js";
 import { Popover } from "./Popover.js";
 import { CheckIcon } from "../icons/components.js";
 import { renderUixLink } from "../link.js";
+import { KbdCombo, ariaKeyShortcuts, isKeyShortcut, useKbdPlatform } from "./Kbd.js";
+function useRowShortcut(shortcut) {
+  const platform = useKbdPlatform();
+  if (shortcut == null) return { node: null, aria: {} };
+  if (!isKeyShortcut(shortcut)) return { node: /* @__PURE__ */ jsx("span", { className: "uix-menu__shortcut", children: shortcut }), aria: {} };
+  return {
+    node: /* @__PURE__ */ jsx("span", { className: "uix-menu__shortcut", children: /* @__PURE__ */ jsx(KbdCombo, { keys: [...shortcut], platform }) }),
+    aria: { "aria-keyshortcuts": ariaKeyShortcuts(shortcut, platform) }
+  };
+}
 const MenuContext = createContext(null);
 const MenuRadioContext = createContext(null);
 const ITEM = '[role^="menuitem"]:not([aria-disabled="true"])';
@@ -150,18 +160,20 @@ function MenuItem({ children, onSelect, href, renderLink, icon, shortcut, tone =
   const menu = useContext(MenuContext);
   const classes = cx("uix-menu__item", tone === "danger" && "uix-menu__item--danger", className);
   const attributes = itemAttributes(rest);
+  const keys = useRowShortcut(shortcut);
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__icon", "aria-hidden": "true", children: icon }),
     /* @__PURE__ */ jsx("span", { className: "uix-menu__text", children }),
-    shortcut != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__shortcut", children: shortcut })
+    keys.node
   ] });
   if (href != null && !disabled) {
-    return /* @__PURE__ */ jsx(Fragment, { children: renderUixLink(renderLink, { ...attributes, href, role: "menuitem", tabIndex: -1, className: classes, onClick: () => menu?.close(false), children: body }) });
+    return /* @__PURE__ */ jsx(Fragment, { children: renderUixLink(renderLink, { ...attributes, ...keys.aria, href, role: "menuitem", tabIndex: -1, className: classes, onClick: () => menu?.close(false), children: body }) });
   }
   return /* @__PURE__ */ jsx(
     "button",
     {
       ...attributes,
+      ...keys.aria,
       type: "button",
       role: "menuitem",
       tabIndex: -1,
@@ -189,10 +201,12 @@ function CheckableItem({
   ...rest
 }) {
   const menu = useContext(MenuContext);
+  const keys = useRowShortcut(shortcut);
   return /* @__PURE__ */ jsxs(
     "button",
     {
       ...itemAttributes(rest),
+      ...keys.aria,
       type: "button",
       role,
       "aria-checked": checked,
@@ -216,7 +230,7 @@ function CheckableItem({
         /* @__PURE__ */ jsx("span", { className: "uix-menu__check", "aria-hidden": "true", children: checked && /* @__PURE__ */ jsx(CheckIcon, {}) }),
         icon != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__icon", "aria-hidden": "true", children: icon }),
         /* @__PURE__ */ jsx("span", { className: "uix-menu__text", children }),
-        shortcut != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__shortcut", children: shortcut })
+        keys.node
       ]
     }
   );

package/dist/components/MetricInput.d.ts

@@ -10,6 +10,13 @@ interface MetricInputProps {
     label: string;
     invalid?: boolean;
     errorMessage?: string;
+    /**
+     * A required value (HAR-1819): the label shows the same marker as `Field`, and the input
+     * gets native `required` and `aria-required="true"`.
+     */
+    required?: boolean;
+    /** Guidance under the control (a range, a unit rule), tied to the input by `aria-describedby`. */
+    hint?: string;
     disabled?: boolean;
     readOnly?: boolean;
     parse?: (input: string) => number | null;
@@ -18,6 +25,6 @@ interface MetricInputProps {
     id?: string;
 }
 /** Accessible numeric recipe composed from Input and the UIx stepper controls. */
-declare function MetricInput({ value, onValueChange, min, max, step, unit, label, invalid, errorMessage, disabled, readOnly, parse, format, className, id: providedId, }: MetricInputProps): react.JSX.Element;
+declare function MetricInput({ value, onValueChange, min, max, step, unit, label, invalid, errorMessage, required, hint, disabled, readOnly, parse, format, className, id: providedId, }: MetricInputProps): react.JSX.Element;
 
 export { MetricInput, type MetricInputProps };

package/dist/components/MetricInput.js

@@ -15,6 +15,8 @@ function MetricInput({
   label,
   invalid,
   errorMessage,
+  required,
+  hint,
   disabled,
   readOnly,
   parse = parseMetricValue,
@@ -25,6 +27,9 @@ function MetricInput({
   const generatedId = useId();
   const id = providedId ?? generatedId;
   const errorId = `${id}-error`;
+  const hintId = `${id}-hint`;
+  const showError = Boolean(invalid && errorMessage);
+  const describedBy = [hint ? hintId : null, showError ? errorId : null].filter(Boolean).join(" ") || void 0;
   const [text, setText] = useState(() => format(value));
   useEffect(() => setText(format(value)), [value, format]);
   const commit = (input) => {
@@ -53,7 +58,7 @@ function MetricInput({
     setText(parsed === null && event.currentTarget.value.trim() !== "" ? format(value) : format(parsed));
   };
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-metric-input", invalid && "uix-metric-input--invalid", className), children: [
-    /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: id, "data-required": required || void 0, children: label }),
     /* @__PURE__ */ jsxs("div", { className: "uix-metric-input__control", children: [
       /* @__PURE__ */ jsx(
         Input,
@@ -68,7 +73,9 @@ function MetricInput({
           "aria-valuenow": value ?? void 0,
           "aria-valuemin": min,
           "aria-valuemax": max,
-          "aria-describedby": invalid && errorMessage ? errorId : void 0,
+          "aria-describedby": describedBy,
+          required,
+          "aria-required": required || void 0,
           invalid,
           disabled,
           readOnly
@@ -84,7 +91,8 @@ function MetricInput({
       "Unit: ",
       unit
     ] }),
-    invalid && errorMessage && /* @__PURE__ */ jsx("span", { id: errorId, className: "uix-field__error", children: errorMessage })
+    hint && /* @__PURE__ */ jsx("span", { id: hintId, className: "uix-field__hint", children: hint }),
+    showError && /* @__PURE__ */ jsx("span", { id: errorId, className: "uix-field__error", children: errorMessage })
   ] });
 }
 export {

package/dist/components/Modal.d.ts

@@ -1,9 +1,23 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
+import { DiscardPromptLabels } from './DiscardPrompt.js';
+import './Button.js';
+import '../link.js';
+import './Kbd.js';
 
 interface ModalProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     open: boolean;
     onClose?: () => void;
+    /**
+     * The dialog holds input that is not saved (HAR-2029). Escape, the close button and a
+     * `DialogClose` then open an anchored "Discard changes?" step with focus on "Keep editing"
+     * instead of calling `onClose`; "Discard" calls it. A clean dialog closes at once.
+     */
+    dirty?: boolean;
+    /** A save is in flight: Escape, the close button and a `DialogClose` do nothing. */
+    pending?: boolean;
+    /** The words of the discard step. Default: `UixLabelsProvider` `discardPrompt`, then English. */
+    discardLabels?: Partial<DiscardPromptLabels>;
     title?: ReactNode;
     children?: ReactNode;
     footer?: ReactNode;
@@ -11,6 +25,6 @@ interface ModalProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     closeLabel?: string;
     role?: 'dialog' | 'alertdialog';
 }
-declare function Modal({ open, onClose, title, children, footer, className, closeLabel: closeLabelProp, role, ...rest }: ModalProps): react.JSX.Element;
+declare function Modal({ open, onClose, dirty, pending, discardLabels, title, children, footer, className, closeLabel: closeLabelProp, role, onKeyDown, ...rest }: ModalProps): react.JSX.Element;
 
 export { Modal, type ModalProps };

package/dist/components/Modal.js

@@ -1,23 +1,68 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef } from "react";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
-import { useDialog } from "../hooks/useDialog.js";
+import { useGuardedDialog } from "./DiscardPrompt.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Modal({ open, onClose, title, children, footer, className, closeLabel: closeLabelProp, role = "dialog", ...rest }) {
+function Modal({
+  open,
+  onClose,
+  dirty = false,
+  pending = false,
+  discardLabels,
+  title,
+  children,
+  footer,
+  className,
+  closeLabel: closeLabelProp,
+  role = "dialog",
+  onKeyDown,
+  ...rest
+}) {
   const uixLabels = useUixLabels();
   const closeLabel = closeLabelProp ?? uixLabels.modal?.close ?? "Close dialog";
-  const ref = useDialog(open, onClose);
+  const closeRef = useRef(null);
+  const guard = useGuardedDialog({ open, onClose, dirty, pending, labels: discardLabels, closeRef });
   const titleId = useId();
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-dialog", className), role, "aria-labelledby": title != null ? titleId : void 0, ...rest, children: [
-    (title != null || onClose) && /* @__PURE__ */ jsxs("div", { className: "uix-dialog__header", children: [
-      title && /* @__PURE__ */ jsx("h2", { className: "uix-dialog__title", id: titleId, children: title }),
-      onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-dialog__close", onClick: onClose, "aria-label": closeLabel, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
-    ] }),
-    children != null && /* @__PURE__ */ jsx("div", { className: "uix-dialog__body", children }),
-    footer != null && /* @__PURE__ */ jsx("div", { className: "uix-dialog__footer", children: footer })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ref: guard.ref,
+      className: cx("uix-dialog", className),
+      role,
+      "aria-labelledby": title != null ? titleId : void 0,
+      ...rest,
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        guard.onKeyDown(event);
+      },
+      children: [
+        guard.provide(
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            (title != null || onClose) && /* @__PURE__ */ jsxs("div", { className: "uix-dialog__header", children: [
+              title && /* @__PURE__ */ jsx("h2", { className: "uix-dialog__title", id: titleId, children: title }),
+              onClose && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: closeRef,
+                  type: "button",
+                  className: "uix-dialog__close",
+                  onClick: () => guard.requestClose(),
+                  "aria-label": closeLabel,
+                  "aria-disabled": pending || void 0,
+                  children: /* @__PURE__ */ jsx(CloseIcon, {})
+                }
+              )
+            ] }),
+            children != null && /* @__PURE__ */ jsx("div", { className: "uix-dialog__body", children }),
+            footer != null && /* @__PURE__ */ jsx("div", { className: "uix-dialog__footer", children: footer })
+          ] })
+        ),
+        guard.prompt
+      ]
+    }
+  );
 }
 export {
   Modal

package/dist/components/SearchBar.d.ts

@@ -0,0 +1,67 @@
+import * as react from 'react';
+import { HTMLAttributes, Ref } from 'react';
+import { ButtonVariant } from './Button.js';
+import '../link.js';
+import './Kbd.js';
+
+/** The words of a `SearchBar` (HAR-2030); the field's own name is its `label`. */
+interface SearchBarLabels {
+    /** Accessible name of the clear button. */
+    clear: string;
+    /** Text of the submit button (`submitButton`). */
+    submit: string;
+}
+interface SearchBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSubmit' | 'onChange' | 'defaultValue'> {
+    /**
+     * Accessible name of the field and of its search landmark, e.g. "Search services". It is not
+     * shown (the placeholder is not a label): the field shows `placeholder`.
+     */
+    label: string;
+    /** The text in the field (controlled). Leave it out, with `defaultValue`, for an uncontrolled field. */
+    value?: string;
+    defaultValue?: string;
+    /** Called on every edit, and with `''` when the field is cleared. */
+    onValueChange?: (value: string) => void;
+    /** Enter in the field, or the submit button: search for this text. */
+    onSubmit?: (value: string) => void;
+    /** After the clear button or Escape emptied the field. Focus stays in the field. */
+    onClear?: () => void;
+    placeholder?: string;
+    /** `md` (default) for a header or a toolbar; `lg` for a page-level or public search: 44 px, the touch floor. */
+    size?: 'md' | 'lg';
+    /** A submit button after the field, with `labels.submit`. Enter submits either way. */
+    submitButton?: boolean;
+    /** The submit button's variant. Default `primary`. */
+    submitVariant?: ButtonVariant;
+    /**
+     * A `search` landmark named by `label` (default). Pass `false` for a field that filters a list
+     * or a table, where one more landmark per toolbar would crowd the landmark list. Never wrap it
+     * in a `<search>` or `role="search"` of your own: that nests two landmarks.
+     */
+    landmark?: boolean;
+    /** Ids of elements that describe the field (a hint, a result count), as its `aria-describedby`. */
+    inputDescribedBy?: string;
+    /** The words. Default: `UixLabelsProvider` `searchBar`, then English. */
+    labels?: Partial<SearchBarLabels>;
+    /** The field's `name`. */
+    name?: string;
+    /** The field's `id`, e.g. for a "/" shortcut that focuses it. Default: generated. */
+    inputId?: string;
+    inputRef?: Ref<HTMLInputElement>;
+    autoFocus?: boolean;
+    disabled?: boolean;
+}
+/**
+ * One search field look and behaviour (HAR-2030; TENSOR audit UXC-02) over the `.uix-searchbar`
+ * contract: a leading magnifier, a clear button while there is text, Enter to search, Escape to
+ * clear (an empty field lets Escape through, so it still closes the dialog it sits in). It is a
+ * `search` landmark named by `label`.
+ *
+ * It is not a `<form>`, so it can sit inside one: Enter calls `onSubmit` and never submits a
+ * surrounding form. For suggestions while typing, use `SearchSuggest`. Inside an overlay that
+ * takes Escape itself before the field (a ConfirmPopover, the table's view menu), Escape closes
+ * the overlay rather than clearing the text.
+ */
+declare function SearchBar({ label, value: valueProp, defaultValue, onValueChange, onSubmit, onClear, placeholder, size, submitButton, submitVariant, landmark, inputDescribedBy, labels: labelsProp, name, inputId, inputRef, autoFocus, disabled, className, ...props }: SearchBarProps): react.JSX.Element;
+
+export { SearchBar, type SearchBarLabels, type SearchBarProps };

package/dist/components/SearchBar.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
+import { Button } from "./Button.js";
+const DEFAULT_SEARCH_BAR_LABELS = { clear: "Clear search", submit: "Search" };
+const SearchIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+] });
+const ClearIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+function SearchBar({
+  label,
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  onSubmit,
+  onClear,
+  placeholder,
+  size = "md",
+  submitButton = false,
+  submitVariant = "primary",
+  landmark = true,
+  inputDescribedBy,
+  labels: labelsProp,
+  name,
+  inputId,
+  inputRef,
+  autoFocus,
+  disabled,
+  className,
+  ...props
+}) {
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_SEARCH_BAR_LABELS, ...uixLabels.searchBar, ...labelsProp };
+  const id = useId();
+  const fieldId = inputId ?? `${id}-field`;
+  const labelId = `${id}-label`;
+  const field = useRef(null);
+  const [own, setOwn] = useState(defaultValue);
+  const value = valueProp ?? own;
+  const change = (next) => {
+    setOwn(next);
+    onValueChange?.(next);
+  };
+  const clear = () => {
+    change("");
+    field.current?.focus();
+    onClear?.();
+  };
+  const onKeyDown = (event) => {
+    if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onSubmit?.(value);
+    } else if (event.key === "Escape" && value !== "") {
+      event.preventDefault();
+      event.stopPropagation();
+      clear();
+    }
+  };
+  const setField = useCallback((node) => {
+    field.current = node;
+    if (typeof inputRef === "function") inputRef(node);
+    else if (inputRef) inputRef.current = node;
+  }, [inputRef]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: landmark ? "search" : void 0,
+      "aria-labelledby": landmark ? labelId : void 0,
+      className: cx("uix-searchbar", size === "md" && "uix-searchbar--md", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "uix-searchbar__wrap", children: [
+          /* @__PURE__ */ jsx("label", { id: labelId, htmlFor: fieldId, className: "uix-visually-hidden", children: label }),
+          /* @__PURE__ */ jsx(SearchIcon, {}),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: setField,
+              id: fieldId,
+              type: "search",
+              name,
+              className: "uix-input",
+              value,
+              placeholder,
+              autoComplete: "off",
+              enterKeyHint: "search",
+              "aria-describedby": inputDescribedBy,
+              autoFocus,
+              disabled,
+              onChange: (event) => change(event.currentTarget.value),
+              onKeyDown
+            }
+          ),
+          value !== "" && !disabled && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "uix-searchbar__clear",
+              "aria-label": labels.clear,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: clear,
+              children: /* @__PURE__ */ jsx(ClearIcon, {})
+            }
+          )
+        ] }),
+        submitButton && /* @__PURE__ */ jsx(Button, { type: "button", variant: submitVariant, size: size === "lg" ? "lg" : "md", disabled, onClick: () => onSubmit?.(value), children: labels.submit })
+      ]
+    }
+  );
+}
+export {
+  SearchBar
+};

package/dist/components/Select.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, Fragment as Fragment2, forwardRef, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
-import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
+import { useAnchoredPosition, zoomOf } from "../hooks/useAnchoredPosition.js";
 import { Drawer } from "./Drawer.js";
 import {
   buildSelectModel,
@@ -537,9 +537,10 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
       }
     };
     if (showing) {
+      const zoom = zoomOf(trigger);
       const r = trigger.getBoundingClientRect();
-      const room = Math.max(r.top, window.innerHeight - r.bottom) - OFFSET - EDGE;
-      popup.style.minWidth = `${Math.round(r.width)}px`;
+      const room = Math.max(r.top, window.innerHeight - r.bottom) / zoom - OFFSET - EDGE;
+      popup.style.minWidth = `${Math.round(r.width / zoom)}px`;
       popup.style.maxHeight = `${Math.max(96, Math.min(MAX_HEIGHT, Math.floor(room)))}px`;
       try {
         if (!isOpen()) popup.showPopover();
@@ -581,7 +582,7 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
     doc.addEventListener("pointerdown", onDown, true);
     return () => doc.removeEventListener("pointerdown", onDown, true);
   }, [showing]);
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!open) return;
     if (active >= entries.length || active < 0 && entries.length) setActive(entries.length ? selectedIndexIn(entries) >= 0 ? selectedIndexIn(entries) : firstEnabled(entries) : -1);
   }, [open, entries.length, query]);

package/dist/components/ShortcutHint.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { KeyShortcut } from './Kbd.js';
+
+interface ShortcutHintProps {
+    keys: KeyShortcut;
+    /** Text before the keys, e.g. an icon button's name. */
+    label?: string;
+    /** Set the button's `aria-keyshortcuts`. `false` when the button already has its own (a prop, or a Tooltip's). */
+    ownsAria: boolean;
+}
+/**
+ * The hover / keyboard-focus hint of a `Button` with `shortcut` (HAR-2031). In the button it
+ * leaves only an empty, hidden marker, so the button's text, name, layout and selectors are
+ * unchanged (no wrapper, no sibling). The bubble itself is portalled after mount into the
+ * nearest `<dialog>` (outside one a modal dialog makes everything inert) or `<body>`, as a
+ * top-layer popover, `aria-hidden`: assistive technology gets the key from the button's
+ * `aria-keyshortcuts`, which this sets for the viewer's platform (Mod is Meta on Apple, Control
+ * elsewhere) unless the button already has its own.
+ *
+ * It opens on hover and on keyboard focus (`:focus-visible`), so focus a menu or dialog sends back
+ * after a mouse choice does not open it. It closes on leave, blur, Escape and when the button is
+ * disabled, and stays while the pointer is on it (WCAG 1.4.13). Inside a `Tooltip` it steps aside:
+ * the Tooltip shows the keys in its own bubble.
+ *
+ * It is its own client component so that `Button`, which has no hooks, still renders on a server.
+ */
+declare function ShortcutHint({ keys, label, ownsAria }: ShortcutHintProps): react.JSX.Element;
+
+export { ShortcutHint, type ShortcutHintProps };