prime-ui-kit 0.13.0 → 0.14.0

package/dist/chunks/{chunk-E6SQBSDF.js → chunk-WXKRUVSE.js}

@@ -567,16 +567,16 @@ function MorphText({ children: text, className }) {
   React6.useLayoutEffect(() => {
     if (!morph) return;
     const root = rootRef.current;
-    const segment = segmentRef.current;
+    const segment2 = segmentRef.current;
     const sizer = sizerRef.current;
-    if (!root || !segment || !sizer) return;
+    if (!root || !segment2 || !sizer) return;
     const target = sizer.getBoundingClientRect().width;
     const still = root.getBoundingClientRect().width - target;
     const from = Math.max(0, morph.width - still);
     if (target !== from) {
-      segment.style.width = `${from}px`;
-      segment.getBoundingClientRect();
-      segment.style.width = `${target}px`;
+      segment2.style.width = `${from}px`;
+      segment2.getBoundingClientRect();
+      segment2.style.width = `${target}px`;
     }
     const changed = splitChange(morph.from, morph.to);
     const longest = changed.in.length > changed.out.length ? changed.in : changed.out;
@@ -1272,6 +1272,9 @@ function readCssLengthPx(name, fallbackPx) {
 function getViewportPadPx() {
   return readCssLengthPx("--prime-space-2", FALLBACK_VIEWPORT_PAD_PX);
 }
+function pointRect(x, y) {
+  return { left: x, right: x, top: y, bottom: y, width: 0, height: 0 };
+}
 var clamp = (value, min, max) => Math.max(min, Math.min(value, Math.max(min, max)));
 function computeFloatingPosition(anchor, contentW, contentH, vw, vh, opts) {
   const { align, offset, flip, matchAnchorWidth, arrowInset: arrowInset2, boundary } = opts;
@@ -1346,13 +1349,16 @@ function usePosition(enabled, anchorRef, layerRef, {
   align = DEFAULT_ALIGN,
   matchAnchorWidth = false,
   offsetToken = "--prime-panel-offset",
-  arrowInset: arrowInset2
+  arrowInset: arrowInset2,
+  anchorPoint = null
 } = {}) {
   const [attached, setAttached] = React12.useState(false);
   const [resolvedSide, setResolvedSide] = React12.useState(preferredSide);
   const resolveAnchorRect = useAnchorRectResolver();
   const resolveBoundary = useFloatingBoundaryResolver();
   const metricsRef = React12.useRef(null);
+  const pointRef = React12.useRef(anchorPoint);
+  pointRef.current = anchorPoint;
   const update = React12.useCallback(
     (remeasure) => {
       const anchor = anchorRef.current;
@@ -1366,36 +1372,44 @@ function usePosition(enabled, anchorRef, layerRef, {
         };
       }
       const { offset, pad, arrow } = metricsRef.current;
-      const rect = anchor.getBoundingClientRect();
-      const pos = computeFloatingPosition(
-        resolveAnchorRect ? resolveAnchorRect(anchor, rect) : rect,
-        layer.offsetWidth,
-        layer.offsetHeight,
-        window.innerWidth,
-        window.innerHeight,
-        {
-          side: preferredSide,
-          align,
-          offset,
-          viewportPad: pad,
-          flip: true,
-          matchAnchorWidth,
-          arrowInset: arrow,
-          boundary: resolveBoundary?.(anchor) ?? void 0
-        }
-      );
-      setResolvedSide(pos.side);
+      const rawRect = anchor.getBoundingClientRect();
+      const point = pointRef.current;
+      const rect = point ? pointRect(rawRect.left + point.x, rawRect.top + point.y) : resolveAnchorRect ? resolveAnchorRect(anchor, rawRect) : rawRect;
+      const boundary = resolveBoundary?.(anchor) ?? void 0;
+      const compute = (width2, height2) => computeFloatingPosition(rect, width2, height2, window.innerWidth, window.innerHeight, {
+        side: preferredSide,
+        align,
+        offset,
+        viewportPad: pad,
+        flip: true,
+        matchAnchorWidth,
+        arrowInset: arrow,
+        boundary
+      });
       const set = (name, value) => {
         if (layer.style.getPropertyValue(name) !== value) layer.style.setProperty(name, value);
       };
       const px = (n) => n === void 0 ? "" : `${n}px`;
       set("position", "fixed");
+      let width = layer.offsetWidth;
+      let height = layer.offsetHeight;
+      let pos = compute(width, height);
+      for (let pass = 0; pass < 3; pass++) {
+        set(FLOAT_MIN_WIDTH_VAR, px(pos.minWidth));
+        set(FLOAT_MAX_WIDTH_VAR, px(pos.maxWidth));
+        set(FLOAT_MAX_HEIGHT_VAR, px(pos.maxHeight));
+        const nextWidth = layer.offsetWidth;
+        const nextHeight = layer.offsetHeight;
+        if (nextWidth === width && nextHeight === height) break;
+        width = nextWidth;
+        height = nextHeight;
+        pos = compute(width, height);
+      }
+      setResolvedSide(pos.side);
       set("top", px(pos.top));
       set("left", px(pos.left));
-      set(FLOAT_MIN_WIDTH_VAR, px(pos.minWidth));
-      set(FLOAT_MAX_WIDTH_VAR, px(pos.maxWidth));
-      set(FLOAT_MAX_HEIGHT_VAR, px(pos.maxHeight));
       set(FLOAT_ARROW_VAR, px(pos.arrow));
+      delete layer.dataset.floatPending;
     },
     [
       anchorRef,
@@ -1411,9 +1425,12 @@ function usePosition(enabled, anchorRef, layerRef, {
   );
   const updateRef = React12.useRef(update);
   updateRef.current = update;
+  const enabledRef = React12.useRef(enabled);
+  enabledRef.current = enabled;
   const attachLayer = React12.useCallback(
     (node) => {
       layerRef.current = node;
+      if (node && enabledRef.current) node.dataset.floatPending = "";
       setAttached(node !== null);
     },
     [layerRef]
@@ -1422,6 +1439,11 @@ function usePosition(enabled, anchorRef, layerRef, {
   React12.useLayoutEffect(() => {
     if (active2) update(true);
   }, [active2, update]);
+  const pointX = anchorPoint?.x;
+  const pointY = anchorPoint?.y;
+  React12.useLayoutEffect(() => {
+    if (active2 && pointX !== void 0 && pointY !== void 0) updateRef.current(false);
+  }, [active2, pointX, pointY]);
   React12.useLayoutEffect(() => {
     if (!active2) return;
     let frame2 = 0;
@@ -1442,7 +1464,10 @@ function usePosition(enabled, anchorRef, layerRef, {
       target.addEventListener("scroll", follow, { passive: true });
     }
     window.visualViewport?.addEventListener("resize", resize);
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(follow);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+      cancelAnimationFrame(frame2);
+      updateRef.current(false);
+    });
     if (layerRef.current) observer?.observe(layerRef.current);
     if (anchorRef.current) observer?.observe(anchorRef.current);
     return () => {
@@ -3917,8 +3942,8 @@ function resolveValue(value, max) {
     percent: Math.round(clamped / top * 100)
   };
 }
-function segmentFill(segment) {
-  return segment.color ? { tone: void 0, color: segment.color } : { tone: segment.tone ?? "accent", color: void 0 };
+function segmentFill(segment2) {
+  return segment2.color ? { tone: void 0, color: segment2.color } : { tone: segment2.tone ?? "accent", color: void 0 };
 }
 function resolveRows(input, scale, max) {
   const segments = input.map((s) => ({ ...s, value: nonNegative(s.value) }));
@@ -3928,10 +3953,10 @@ function resolveRows(input, scale, max) {
   const first = segments[0]?.value ?? 0;
   const lengthBase = scale === "max" ? largest : scale === "first" ? first : sum;
   const shareBase = scale === "first" ? first : sum;
-  return segments.map((segment) => ({
-    segment,
-    ratio: lengthBase > 0 ? Math.min(1, segment.value / lengthBase) : 0,
-    percent: shareBase > 0 ? Math.round(segment.value / shareBase * 100) : 0
+  return segments.map((segment2) => ({
+    segment: segment2,
+    ratio: lengthBase > 0 ? Math.min(1, segment2.value / lengthBase) : 0,
+    percent: shareBase > 0 ? Math.round(segment2.value / shareBase * 100) : 0
   }));
 }
 var NUMBER = new Intl.NumberFormat("ru-RU");
@@ -3976,9 +4001,9 @@ function ProgressLegend({
   className
 }) {
   if (segments.length === 0) return null;
-  return /* @__PURE__ */ jsx23("ul", { id, className: cx(ProgressLegend_default.legend, className), "data-size": size, children: segments.map((segment, index) => {
-    const { tone, color } = segmentFill(segment);
-    const share = scale > 0 ? Math.round(segment.value / scale * 100) : 0;
+  return /* @__PURE__ */ jsx23("ul", { id, className: cx(ProgressLegend_default.legend, className), "data-size": size, children: segments.map((segment2, index) => {
+    const { tone, color } = segmentFill(segment2);
+    const share = scale > 0 ? Math.round(segment2.value / scale * 100) : 0;
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: parts in source order, like the bar
       /* @__PURE__ */ jsxs11("li", { className: ProgressLegend_default.item, children: [
@@ -3990,8 +4015,8 @@ function ProgressLegend({
             ...toDataAttributes({ tone, color })
           }
         ),
-        /* @__PURE__ */ jsx23("span", { className: ProgressLegend_default.name, children: segment.label }),
-        /* @__PURE__ */ jsx23("span", { className: ProgressLegend_default.value, children: formatValue(segment.value) }),
+        /* @__PURE__ */ jsx23("span", { className: ProgressLegend_default.name, children: segment2.label }),
+        /* @__PURE__ */ jsx23("span", { className: ProgressLegend_default.value, children: formatValue(segment2.value) }),
         /* @__PURE__ */ jsxs11("span", { className: ProgressLegend_default.share, children: [
           share,
           "%"
@@ -4113,12 +4138,12 @@ function ProgressBar(props) {
         /* @__PURE__ */ jsx24(ProgressLegendSkeleton, { rows: 1, size, className: ProgressBar_default.rowSkeletonText }),
         barSkeleton
       ] }, i)
-    )) }, "loading") : /* @__PURE__ */ jsx24("ol", { className: cx(ProgressBar_default.rows, swapClass), ...nameProps, children: rows.map(({ segment, ratio, percent: share }, i) => (
+    )) }, "loading") : /* @__PURE__ */ jsx24("ol", { className: cx(ProgressBar_default.rows, swapClass), ...nameProps, children: rows.map(({ segment: segment2, ratio, percent: share }, i) => (
       // biome-ignore lint/suspicious/noArrayIndexKey: rows in source order
       /* @__PURE__ */ jsxs12("li", { className: ProgressBar_default.row, children: [
         /* @__PURE__ */ jsxs12("div", { className: ProgressBar_default.rowHeader, children: [
-          /* @__PURE__ */ jsx24("span", { className: ProgressBar_default.rowLabel, children: segment.label }),
-          /* @__PURE__ */ jsx24("span", { className: ProgressBar_default.rowValue, children: formatValue(segment.value) }),
+          /* @__PURE__ */ jsx24("span", { className: ProgressBar_default.rowLabel, children: segment2.label }),
+          /* @__PURE__ */ jsx24("span", { className: ProgressBar_default.rowValue, children: formatValue(segment2.value) }),
           /* @__PURE__ */ jsxs12("span", { className: ProgressBar_default.rowShare, children: [
             share,
             "%"
@@ -4129,7 +4154,7 @@ function ProgressBar(props) {
           {
             className: cx(palette_default.hue, ProgressBar_default.fill),
             style: { "--pb-ratio": ratio },
-            ...toDataAttributes(segmentFill(segment))
+            ...toDataAttributes(segmentFill(segment2))
           }
         ) })
       ] }, i)
@@ -4239,7 +4264,7 @@ function getPasswordStrength(value) {
 }
 
 // src/components/input/Input.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 
 // src/internal/FieldAction.tsx
 import * as React38 from "react";
@@ -4253,7 +4278,7 @@ var FieldAction_default = {
 // src/internal/FieldAction.tsx
 import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var fieldActionClass = cx(FieldAction_default.action, touchTargetBlockClass);
-function FieldActionButton({
+function segment({
   label,
   asChild = false,
   className,
@@ -4269,17 +4294,15 @@ function FieldActionButton({
     "aria-label": label,
     "data-field-action": ""
   };
+  return asChild ? /* @__PURE__ */ jsx25(Slot, { ...shared, ref, "aria-disabled": disabled || void 0, children }) : /* @__PURE__ */ jsx25("button", { ...shared, ref, type, disabled, children });
+}
+function FieldActionSegment(props) {
+  return segment(props);
+}
+function FieldActionButton(props) {
   return /* @__PURE__ */ jsxs13(Tooltip.Root, { children: [
-    /* @__PURE__ */ jsx25(Tooltip.Trigger, { children: asChild ? /* @__PURE__ */ jsx25(
-      Slot,
-      {
-        ...shared,
-        ref,
-        "aria-disabled": disabled || void 0,
-        children
-      }
-    ) : /* @__PURE__ */ jsx25("button", { ...shared, ref, type, disabled, children }) }),
-    /* @__PURE__ */ jsx25(Tooltip.Content, { children: label })
+    /* @__PURE__ */ jsx25(Tooltip.Trigger, { children: segment(props) }),
+    /* @__PURE__ */ jsx25(Tooltip.Content, { children: props.label })
   ] });
 }
 var COPY_FEEDBACK_MS = 1600;
@@ -4443,7 +4466,14 @@ function FieldCommitStatus({
 }
 
 // src/internal/FieldFrame.tsx
+import * as React41 from "react";
+
+// src/internal/fieldCell.ts
 import * as React40 from "react";
+var FieldCellContext = React40.createContext(null);
+function useFieldCell() {
+  return React40.useContext(FieldCellContext);
+}
 
 // src/internal/formatLabel.ts
 function formatLabel(template, values) {
@@ -4457,6 +4487,8 @@ function formatLabel(template, values) {
 var FieldFrame_default = {
   root: "FieldFrame_root",
   label: "FieldFrame_label",
+  cellLabel: "FieldFrame_cellLabel",
+  "prime-field-list": "FieldFrame_prime-field-list",
   labelRow: "FieldFrame_labelRow",
   labelEnd: "FieldFrame_labelEnd",
   body: "FieldFrame_body",
@@ -4481,7 +4513,8 @@ function useFieldFrame(explicitId, {
   error,
   invalid
 }, ariaDescribedBy) {
-  const generated = React40.useId();
+  const generated = React41.useId();
+  const cell = useFieldCell();
   const controlId = explicitId ?? generated;
   const labelId = `${controlId}-label`;
   const hintId = `${controlId}-hint`;
@@ -4495,7 +4528,8 @@ function useFieldFrame(explicitId, {
     hintId,
     errorId,
     describedBy,
-    labelledBy: hasContent(label) ? labelId : void 0,
+    // In a FieldList cell the frame renders the column heading as the label when there is none.
+    labelledBy: hasContent(label) || cell ? labelId : void 0,
     showHint,
     showError,
     invalid: Boolean(invalid) || showError
@@ -4503,9 +4537,9 @@ function useFieldFrame(explicitId, {
 }
 function useErrorShake(invalid, error) {
   const key = !invalid ? null : typeof error === "string" || typeof error === "number" ? String(error) : "invalid";
-  const previous = React40.useRef(key);
-  const [count, setCount] = React40.useState(0);
-  React40.useEffect(() => {
+  const previous = React41.useRef(key);
+  const [count, setCount] = React41.useState(0);
+  React41.useEffect(() => {
     if (key !== null && key !== previous.current) setCount((n) => n + 1);
     previous.current = key;
   }, [key]);
@@ -4513,7 +4547,7 @@ function useErrorShake(invalid, error) {
   return count % 2 ? "odd" : "even";
 }
 function useLeavingError(showError, error) {
-  const last = React40.useRef(error);
+  const last = React41.useRef(error);
   if (showError) last.current = error;
   const presence = usePresence(showError, { exitDuration: "fast" });
   if (showError || !presence.mounted) return null;
@@ -4542,7 +4576,9 @@ function FieldFrame({
   const leaving = useLeavingError(showError, error);
   const showSupport = showError || showHint || leaving != null || counter != null || reserveSupportRow;
   const shake = useErrorShake(ids.invalid, error);
-  const labelNode = hasContent(label) ? /* @__PURE__ */ jsx27(
+  const cell = useFieldCell();
+  const shownLabel = hasContent(label) ? label : cell?.label;
+  const labelNode = hasContent(shownLabel) ? /* @__PURE__ */ jsx27(
     Label.Root,
     {
       id: ids.labelId,
@@ -4552,8 +4588,12 @@ function FieldFrame({
       optional,
       disabled,
       labels: { optional: optionalLabel },
-      className: FieldFrame_default.label,
-      children: label
+      className: cx(
+        FieldFrame_default.label,
+        cell && visuallyHiddenClass,
+        cell?.hidden === "wide" && FieldFrame_default.cellLabel
+      ),
+      children: shownLabel
     }
   ) : null;
   return /* @__PURE__ */ jsxs15(
@@ -4688,17 +4728,17 @@ function InputRoot({
   className,
   ...rest
 }) {
-  const [strengthValue, setStrengthValue] = React41.useState("");
+  const [strengthValue, setStrengthValue] = React42.useState("");
   const size = useControlSize(sizeProp);
   const ids = useFieldFrame(id, { label, hint, error, invalid });
-  const labels = React41.useMemo(() => ({ ...INPUT_LABELS, ...labelsProp }), [labelsProp]);
+  const labels = React42.useMemo(() => ({ ...INPUT_LABELS, ...labelsProp }), [labelsProp]);
   const { invalid: isInvalid, controlId: inputId, describedBy } = ids;
-  const inputRef = React41.useRef(null);
+  const inputRef = React42.useRef(null);
   const commit = useFieldCommit(inputRef, onCommit);
   const hasCommit = onCommit !== void 0;
-  const [revealed, setRevealed] = React41.useState(false);
-  const selectionRef = React41.useRef(null);
-  const contextValue = React41.useMemo(
+  const [revealed, setRevealed] = React42.useState(false);
+  const selectionRef = React42.useRef(null);
+  const contextValue = React42.useMemo(
     () => ({
       size,
       invalid: isInvalid,
@@ -4826,7 +4866,7 @@ function InputField({
   } = useInputContext();
   const setRefs = useMergedRefs(inputRef, ref);
   const disabled = useInheritedDisabled(disabledProp);
-  React41.useLayoutEffect(() => {
+  React42.useLayoutEffect(() => {
     const selection = selectionRef.current;
     const input = inputRef.current;
     if (!selection || !input) return;
@@ -4834,7 +4874,7 @@ function InputField({
     input.setSelectionRange(selection[0], selection[1]);
   }, [revealed, selectionRef, inputRef]);
   const controlled = rest.value;
-  React41.useEffect(() => {
+  React42.useEffect(() => {
     if (!reportValue) return;
     if (controlled !== void 0) reportValue(String(controlled));
     else if (inputRef.current) reportValue(inputRef.current.value);
@@ -4897,17 +4937,14 @@ function InputInlineAffix({ side, children, className, ...rest }) {
   );
 }
 InputInlineAffix.displayName = "Input.InlineAffix";
-function InputClearButton({ className, onClick: onClick2, ref, ...rest }) {
+function InputClearButton({ onClick: onClick2, ref, ...rest }) {
   const { inputId, inputRef, labels } = useInputContext();
   return /* @__PURE__ */ jsx28(
-    "button",
+    FieldActionSegment,
     {
       ...rest,
       ref,
-      type: "button",
-      className: cx(fieldActionClass, className),
-      "data-field-action": "",
-      "aria-label": labels.clear,
+      label: labels.clear,
       "aria-controls": inputId,
       onClick: (event) => {
         onClick2?.(event);
@@ -4934,23 +4971,14 @@ function InputCopyButton({ value, ...rest }) {
   );
 }
 InputCopyButton.displayName = "Input.CopyButton";
-function InputRevealButton({
-  className,
-  onClick: onClick2,
-  onMouseDown,
-  ref,
-  ...rest
-}) {
+function InputRevealButton({ onClick: onClick2, onMouseDown, ref, ...rest }) {
   const { inputId, inputRef, labels, revealed, setRevealed, selectionRef } = useInputContext();
   return /* @__PURE__ */ jsx28(
-    "button",
+    FieldActionSegment,
     {
       ...rest,
       ref,
-      type: "button",
-      className: cx(fieldActionClass, className),
-      "data-field-action": "",
-      "aria-label": labels.reveal,
+      label: labels.reveal,
       "aria-pressed": revealed,
       "aria-controls": inputId,
       onMouseDown: (event) => {
@@ -4993,7 +5021,7 @@ var Input = {
 };
 
 // src/components/checkbox/Checkbox.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 
 // src/internal/CheckMark.module.css
 var CheckMark_default = {
@@ -5132,9 +5160,9 @@ function CheckboxRoot({
     defaultValue: defaultChecked,
     onChange: onCheckedChange
   });
-  const internalRef = React42.useRef(null);
+  const internalRef = React43.useRef(null);
   const mergedRef = useMergedRefs(internalRef, ref);
-  React42.useEffect(() => {
+  React43.useEffect(() => {
     if (internalRef.current) internalRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
   return /* @__PURE__ */ jsx31(
@@ -5231,7 +5259,7 @@ var Checkbox = {
 };
 
 // src/components/thumbnail/Thumbnail.tsx
-import * as React44 from "react";
+import * as React45 from "react";
 
 // src/internal/formatClock.ts
 function formatClock(seconds) {
@@ -5260,7 +5288,7 @@ function firstFrame(src) {
 }
 
 // src/internal/mediaSession.ts
-import * as React43 from "react";
+import * as React44 from "react";
 var active = null;
 var audible = (media) => !media.muted && media.volume > 0;
 function claimPlayback(media) {
@@ -5272,7 +5300,7 @@ function releasePlayback(media) {
   if (active === media) active = null;
 }
 function useMediaSession(ref) {
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     const media = ref.current;
     if (!media) return;
     const claim = () => claimPlayback(media);
@@ -5402,22 +5430,22 @@ function ThumbnailVideoInner({
   ...rest
 }) {
   const report = slot2.useReportStatus();
-  const mute = React44.useCallback(
+  const mute = React45.useCallback(
     (node) => {
       if (node) node.muted = autoPlay && !controls;
     },
     [autoPlay, controls]
   );
-  const sessionRef = React44.useRef(null);
+  const sessionRef = React45.useRef(null);
   useMediaSession(sessionRef);
   const videoRef = useMergedRefs(mute, sessionRef, ref);
   const media = useImageStatus(report, {
     onLoad: onLoadedData,
     onError
   });
-  const [duration, setDuration] = React44.useState(null);
-  const [playing, setPlaying] = React44.useState(false);
-  const [still] = React44.useState(prefersReducedMotion);
+  const [duration, setDuration] = React45.useState(null);
+  const [playing, setPlaying] = React45.useState(false);
+  const [still] = React45.useState(prefersReducedMotion);
   const loops = autoPlay && !still && !controls;
   return /* @__PURE__ */ jsxs20(Fragment9, { children: [
     /* @__PURE__ */ jsx33(
@@ -5468,7 +5496,7 @@ var Thumbnail = {
 };
 
 // src/internal/swatch.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 
 // src/internal/swatch.module.css
 var swatch_default = {
@@ -5501,7 +5529,7 @@ var COLOR_PRESETS = [
   { value: "#be185d", label: "\u0422\u0451\u043C\u043D\u043E-\u0440\u043E\u0437\u043E\u0432\u044B\u0439" }
 ];
 function useSwatchOptions(presets, allowEmpty, emptyLabel) {
-  return React45.useMemo(
+  return React46.useMemo(
     () => [
       ...presets.map((preset) => ({ ...preset, contrast: markContrast(preset.value) })),
       ...allowEmpty ? [{ value: null, label: emptyLabel, contrast: "dark" }] : []
@@ -5566,7 +5594,7 @@ function markContrast(value) {
 }
 
 // src/components/color-swatches/ColorSwatches.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 
 // src/internal/rovingFocus.ts
 var PREV = {
@@ -5633,8 +5661,8 @@ function balancedColumns(count, width, cell, gap) {
   return Math.ceil(count / rows);
 }
 function useBalancedColumns(gridRef, count) {
-  const [columns, setColumns] = React46.useState();
-  React46.useLayoutEffect(() => {
+  const [columns, setColumns] = React47.useState();
+  React47.useLayoutEffect(() => {
     const grid = gridRef.current;
     if (!grid || typeof ResizeObserver === "undefined") return;
     const measure = () => {
@@ -5685,8 +5713,8 @@ function ColorSwatches({
   const options = useSwatchOptions(presets, allowEmpty, labels.empty);
   const selectedIndex = options.findIndex((option) => sameColor(option.value, value));
   const focusIndex = Math.max(0, selectedIndex);
-  const itemRefs = React46.useRef([]);
-  const gridRef = React46.useRef(null);
+  const itemRefs = React47.useRef([]);
+  const gridRef = React47.useRef(null);
   const columns = useBalancedColumns(gridRef, options.length);
   const labelledBy = ariaLabelledBy ?? ids.labelledBy;
   const onKeyDown2 = (event) => {
@@ -5778,10 +5806,10 @@ function ColorSwatches({
 }
 
 // src/components/select/Select.tsx
-import * as React51 from "react";
+import * as React52 from "react";
 
 // src/internal/listbox.ts
-import * as React47 from "react";
+import * as React48 from "react";
 var optionDomId = (listboxId, value) => `${listboxId}-opt-${value.replace(/\s+/g, "_")}`;
 function enabledOptions(container) {
   if (!container) return [];
@@ -5806,11 +5834,11 @@ function createStore(initial) {
   };
 }
 function useCreateStore(initial) {
-  return React47.useState(() => createStore(initial))[0];
+  return React48.useState(() => createStore(initial))[0];
 }
 function useStoreSlice(store, select) {
   const read = () => select(store.get());
-  return React47.useSyncExternalStore(store.subscribe, read, read);
+  return React48.useSyncExternalStore(store.subscribe, read, read);
 }
 function handleListboxKeyDown(event, { items, highlight, onSelect }) {
   if (items.length === 0) return;
@@ -5832,10 +5860,10 @@ function handleListboxKeyDown(event, { items, highlight, onSelect }) {
 }
 var TYPEAHEAD_RESET_MS = 500;
 function useTypeahead() {
-  const state = React47.useRef({ buffer: "", timer: 0 });
-  React47.useEffect(() => () => window.clearTimeout(state.current.timer), []);
-  const isTyping = React47.useCallback(() => state.current.buffer !== "", []);
-  const find = React47.useCallback(
+  const state = React48.useRef({ buffer: "", timer: 0 });
+  React48.useEffect(() => () => window.clearTimeout(state.current.timer), []);
+  const isTyping = React48.useCallback(() => state.current.buffer !== "", []);
+  const find = React48.useCallback(
     (key, items, highlighted) => {
       const s = state.current;
       window.clearTimeout(s.timer);
@@ -5857,19 +5885,19 @@ function useTypeahead() {
 }
 var LOAD_MORE_ROOT_MARGIN = "0px 0px 48px 0px";
 function useLoadMore({ enabled, onLoadMore, scrollRef, rearm }) {
-  const sentinelRef = React47.useRef(null);
-  const handlerRef = React47.useRef(onLoadMore);
+  const sentinelRef = React48.useRef(null);
+  const handlerRef = React48.useRef(onLoadMore);
   handlerRef.current = onLoadMore;
-  const askedRef = React47.useRef(false);
-  React47.useLayoutEffect(() => {
+  const askedRef = React48.useRef(false);
+  React48.useLayoutEffect(() => {
     askedRef.current = false;
   }, [enabled, rearm]);
-  const request = React47.useCallback(() => {
+  const request = React48.useCallback(() => {
     if (!enabled || askedRef.current) return;
     askedRef.current = true;
     void handlerRef.current?.();
   }, [enabled]);
-  React47.useEffect(() => {
+  React48.useEffect(() => {
     const root = scrollRef.current;
     const target = sentinelRef.current;
     if (!enabled || !root || !target || typeof IntersectionObserver === "undefined") return;
@@ -5886,7 +5914,7 @@ function useLoadMore({ enabled, onLoadMore, scrollRef, rearm }) {
 }
 
 // src/internal/MenuGroup.tsx
-import * as React48 from "react";
+import * as React49 from "react";
 
 // src/internal/menu.module.css
 var menu_default = {
@@ -5908,7 +5936,7 @@ var menu_default = {
 // src/internal/MenuGroup.tsx
 import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 function MenuGroup({ label, className, children, ...rest }) {
-  const labelId = React48.useId();
+  const labelId = React49.useId();
   return (
     // biome-ignore lint/a11y/useSemanticElements: role="group" inside a menu / listbox; <fieldset> is not allowed there
     /* @__PURE__ */ jsxs23(
@@ -5951,10 +5979,10 @@ var Select_default = {
 };
 
 // src/components/select/SelectItem.tsx
-import * as React50 from "react";
+import * as React51 from "react";
 
 // src/internal/HighlightMatch.tsx
-import * as React49 from "react";
+import * as React50 from "react";
 
 // src/internal/HighlightMatch.module.css
 var HighlightMatch_default = {
@@ -5998,7 +6026,7 @@ function HighlightMatch({
 }
 function highlightChildren(children, query) {
   if (!query.trim()) return children;
-  return React49.Children.map(
+  return React50.Children.map(
     children,
     (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx37(HighlightMatch, { text: String(child), query }) : child
   );
@@ -6040,7 +6068,7 @@ function textOf(node) {
   if (node == null || typeof node === "boolean") return "";
   if (typeof node === "string" || typeof node === "number") return String(node);
   if (Array.isArray(node)) return node.map(textOf).join("");
-  if (React50.isValidElement(node))
+  if (React51.isValidElement(node))
     return textOf(node.props.children);
   return "";
 }
@@ -6048,9 +6076,9 @@ function SelectItemIcon({ className, ...rest }) {
   return /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", className: cx(menu_default.itemIcon, className), ...rest });
 }
 SelectItemIcon.displayName = "Select.ItemIcon";
-var OptionQueryContext = React50.createContext("");
+var OptionQueryContext = React51.createContext("");
 function SelectItemText({ children, className, ...rest }) {
-  const query = React50.useContext(OptionQueryContext);
+  const query = React51.useContext(OptionQueryContext);
   return /* @__PURE__ */ jsx38("span", { ...rest, className: cx(Select_default.itemTitle, className), children: highlightChildren(children, query) });
 }
 SelectItemText.displayName = "Select.ItemText";
@@ -6059,7 +6087,7 @@ function SelectItemDescription({
   className,
   ...rest
 }) {
-  const query = React50.useContext(OptionQueryContext);
+  const query = React51.useContext(OptionQueryContext);
   return /* @__PURE__ */ jsx38("span", { ...rest, className: cx(Select_default.itemDescription, className), children: highlightChildren(children, query) });
 }
 SelectItemDescription.displayName = "Select.ItemDescription";
@@ -6077,11 +6105,11 @@ function splitItemChildren(children) {
     description: ""
   };
   let plain = "";
-  for (const child of React50.Children.toArray(children)) {
-    if (!React50.isValidElement(child)) {
+  for (const child of React51.Children.toArray(children)) {
+    if (!React51.isValidElement(child)) {
       plain += textOf(child);
       parts.body.push(child);
-    } else if (child.type === React50.Fragment) {
+    } else if (child.type === React51.Fragment) {
       const inner = splitItemChildren(child.props.children);
       parts.leading.push(...inner.leading);
       parts.body.push(...inner.body);
@@ -6111,7 +6139,7 @@ function splitItemChildren(children) {
 }
 function sizeMedia(leading, size) {
   return leading.map(
-    (node) => React50.isValidElement(node) && (node.type === Thumbnail.Root || node.type === Avatar.Root) ? React50.cloneElement(node, {
+    (node) => React51.isValidElement(node) && (node.type === Thumbnail.Root || node.type === Avatar.Root) ? React51.cloneElement(node, {
       size: node.props.size ?? MEDIA_SIZE[size],
       className: cx(Select_default.media, node.props.className),
       "aria-hidden": true
@@ -6133,7 +6161,7 @@ function SelectItem({
   const haystack = normalize(`${resolvedLabel} ${parts.description} ${keywords ?? ""}`);
   const isSelected = selected.includes(value);
   const isHighlighted = useStoreSlice(highlight, (current) => current === value);
-  React50.useLayoutEffect(
+  React51.useLayoutEffect(
     () => registry.register(value, resolvedLabel, haystack),
     [registry, value, resolvedLabel, haystack]
   );
@@ -6190,7 +6218,7 @@ function SelectAction({
   ...rest
 }) {
   const { highlight, listboxId, setOpen, size } = useSelectContext();
-  const value = `${ACTION_PREFIX}${React50.useId()}`;
+  const value = `${ACTION_PREFIX}${React51.useId()}`;
   const isHighlighted = useStoreSlice(highlight, (current) => current === value);
   const parts = splitItemChildren(children);
   return (
@@ -6282,7 +6310,7 @@ function SelectRoot(props) {
   } = props;
   const multiple = props.multiple === true;
   const disabled = useInheritedDisabled(disabledProp);
-  const labels = React51.useMemo(() => ({ ...SELECT_LABELS, ...labelsProp }), [labelsProp]);
+  const labels = React52.useMemo(() => ({ ...SELECT_LABELS, ...labelsProp }), [labelsProp]);
   const ids = useFieldFrame(id, { hint, error, invalid });
   const [stored, setStored] = useControllableState({
     value: props.value,
@@ -6291,7 +6319,7 @@ function SelectRoot(props) {
   const changes = usePendingChanges(stored, takeNext);
   const value = changes.shown;
   const saving = changes.pending.length > 0;
-  const [announcement, setAnnouncement] = React51.useState("");
+  const [announcement, setAnnouncement] = React52.useState("");
   const onValueChange = props.onValueChange;
   const commit = (next) => {
     if (saving || Object.is(next, value)) return;
@@ -6306,9 +6334,9 @@ function SelectRoot(props) {
       onReject: () => setAnnouncement(labels.changeFailed)
     });
   };
-  const commitRef = React51.useRef(commit);
+  const commitRef = React52.useRef(commit);
   commitRef.current = commit;
-  const selected = React51.useMemo(
+  const selected = React52.useMemo(
     () => Array.isArray(value) ? value : value ? [value] : [],
     [value]
   );
@@ -6318,19 +6346,19 @@ function SelectRoot(props) {
     onChange: onOpenChange
   });
   const highlight = useCreateStore(void 0);
-  const [registry] = React51.useState(createItemRegistry);
+  const [registry] = React52.useState(createItemRegistry);
   const [query, setQuery] = useControllableState({
     value: search,
     defaultValue: defaultSearch,
     onChange: onSearchChange
   });
-  const triggerRef = React51.useRef(null);
-  const wasOpenRef = React51.useRef(isOpen);
-  React51.useEffect(() => {
+  const triggerRef = React52.useRef(null);
+  const wasOpenRef = React52.useRef(isOpen);
+  React52.useEffect(() => {
     if (wasOpenRef.current && !isOpen) setQuery("");
     wasOpenRef.current = isOpen;
   }, [isOpen, setQuery]);
-  const pick = React51.useCallback(
+  const pick = React52.useCallback(
     (optionValue) => {
       if (multiple) {
         const list = Array.isArray(value) ? value : [];
@@ -6344,8 +6372,8 @@ function SelectRoot(props) {
     },
     [multiple, value, setOpen]
   );
-  const clear = React51.useCallback(() => commitRef.current(multiple ? [] : ""), [multiple]);
-  const context = React51.useMemo(
+  const clear = React52.useCallback(() => commitRef.current(multiple ? [] : ""), [multiple]);
+  const context = React52.useMemo(
     () => ({
       size,
       invalid: ids.invalid,
@@ -6462,6 +6490,8 @@ function SelectTrigger({
     labels
   } = useSelectContext();
   const mergedRef = useMergedRefs(triggerRef, ref);
+  const parts = React52.Children.toArray(children);
+  const iconOnly = parts.some((node) => React52.isValidElement(node) && node.type === SelectTriggerIcon) && !parts.some((node) => React52.isValidElement(node) && node.type === SelectValue);
   const busy = loading || saving;
   const showClear = clearable && selected.length > 0 && !disabled && !busy;
   return /* @__PURE__ */ jsxs26(
@@ -6502,17 +6532,22 @@ function SelectTrigger({
         invalid: invalid || void 0,
         loading: busy || void 0,
         disabled: disabled || void 0,
-        "focus-ring": focusRing ? void 0 : false
+        "focus-ring": focusRing ? void 0 : false,
+        "icon-only": iconOnly || void 0
       }),
       children: [
-        /* @__PURE__ */ jsx39("span", { className: Select_default.triggerMain, children }),
+        /* @__PURE__ */ jsxs26("span", { className: Select_default.triggerMain, children: [
+          children,
+          iconOnly ? /* @__PURE__ */ jsx39(SelectValue, { className: visuallyHiddenClass }) : null
+        ] }),
         showClear ? (
           // A segment, not a button: interactive content inside a <button> is invalid. The keyboard
-          // clears with Delete / Backspace on the trigger.
+          // clears with Delete / Backspace on the trigger. A touch target in height, like the clear
+          // segment of a field (`FieldAction`).
           /* @__PURE__ */ jsx39(
             "span",
             {
-              className: Select_default.clear,
+              className: cx(Select_default.clear, touchTargetBlockClass),
               "aria-hidden": "true",
               title: labels.clear,
               "data-select-clear": "",
@@ -6608,11 +6643,11 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
     labels,
     registry
   } = useSelectContext();
-  const listboxRef = React51.useRef(null);
+  const listboxRef = React52.useRef(null);
   const items = [];
   const actions = [];
-  for (const child of React51.Children.toArray(children)) {
-    (React51.isValidElement(child) && child.type === SelectAction ? actions : items).push(child);
+  for (const child of React52.Children.toArray(children)) {
+    (React52.isValidElement(child) && child.type === SelectAction ? actions : items).push(child);
   }
   const actionsId = `${listboxId}-actions`;
   const floating = useFloatingLayer({
@@ -6637,12 +6672,12 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
     scrollRef: listboxRef,
     rearm: version
   });
-  React51.useEffect(() => {
+  React52.useEffect(() => {
     if (highlighted === void 0) return;
     if (enabledOptions(listboxRef.current).at(-1)?.dataset.value === highlighted) requestMore();
   }, [highlighted, requestMore]);
   const panelRef = floating.contentRef;
-  React51.useEffect(() => {
+  React52.useEffect(() => {
     const panel = panelRef.current;
     if (isOpen && swapped && panel && !panel.contains(document.activeElement)) focusInto(panel);
   }, [region, swapped, isOpen, panelRef]);
@@ -6765,10 +6800,10 @@ function HighlightOnOpen({
   highlight
 }) {
   const { isOpen, query, selected, registry } = useSelectContext();
-  const selectedRef = React51.useRef(selected);
+  const selectedRef = React52.useRef(selected);
   selectedRef.current = selected;
   const version = useStoreSlice(registry.version, (value) => value);
-  React51.useLayoutEffect(() => {
+  React52.useLayoutEffect(() => {
     if (!isOpen) return;
     const options = enabledOptions(listboxRef.current);
     const first = options.find((item) => selectedRef.current.includes(item.dataset.value ?? ""));
@@ -6776,10 +6811,10 @@ function HighlightOnOpen({
     first?.scrollIntoView?.({ block: "nearest" });
     return () => highlight.set(void 0);
   }, [isOpen, listboxRef, highlight]);
-  React51.useLayoutEffect(() => {
+  React52.useLayoutEffect(() => {
     if (query !== "") highlight.set(enabledOptions(panelRef.current)[0]?.dataset.value);
   }, [query, panelRef, highlight]);
-  React51.useLayoutEffect(() => {
+  React52.useLayoutEffect(() => {
     if (query === "") return;
     const options = enabledOptions(listboxRef.current);
     if (!options.some((item) => item.dataset.value === highlight.get())) {
@@ -6896,6 +6931,8 @@ export {
   enterMotion_default,
   Hint,
   Label,
+  FieldCellContext,
+  useFieldCell,
   formatLabel,
   useFieldFrame,
   FieldFrame,