prime-ui-kit 0.18.0 → 0.20.0

package/dist/chunks/{chunk-OAXJWF3L.js → chunk-3PY52JP3.js}

@@ -3333,6 +3333,39 @@ var Avatar = {
   Overflow: AvatarOverflow
 };
 
+// src/components/skeleton/Skeleton.module.css
+var Skeleton_default = {
+  root: "Skeleton_root",
+  primeSkeletonPulse: "Skeleton_primeSkeletonPulse",
+  line: "Skeleton_line"
+};
+
+// src/components/skeleton/Skeleton.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function Skeleton({
+  shape = "text",
+  size: sizeProp,
+  lines = 1,
+  className,
+  ...rest
+}) {
+  const size = useControlSize(sizeProp);
+  const count = shape === "text" ? Math.max(1, Math.floor(lines)) : 0;
+  return /* @__PURE__ */ jsx17(
+    "span",
+    {
+      "aria-hidden": "true",
+      ...rest,
+      className: cx(fieldTierClass, Skeleton_default.root, className),
+      ...toDataAttributes({ shape, size }),
+      children: Array.from({ length: count }, (_, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: identical placeholder lines
+        /* @__PURE__ */ jsx17("span", { className: Skeleton_default.line }, index)
+      ))
+    }
+  );
+}
+
 // src/components/label/Label.module.css
 var Label_default = {
   root: "Label_root",
@@ -3343,7 +3376,7 @@ var Label_default = {
 };
 
 // src/components/label/Label.tsx
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var LABEL_LABELS = { optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E" };
 function LabelRoot({
   className,
@@ -3362,7 +3395,7 @@ function LabelRoot({
   const labels = useLabels(LABEL_LABELS, labelsProp);
   return (
     // biome-ignore lint/a11y/noLabelWithoutControl: field label primitive; association via htmlFor or wrapping control is caller responsibility
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       "label",
       {
         ref,
@@ -3377,7 +3410,7 @@ function LabelRoot({
         children: tier.provide(
           /* @__PURE__ */ jsxs8(Fragment5, { children: [
             children,
-            /* @__PURE__ */ jsx17(LabelMarks, { required, optional, optionalLabel: labels.optional })
+            /* @__PURE__ */ jsx18(LabelMarks, { required, optional, optionalLabel: labels.optional })
           ] })
         )
       }
@@ -3393,16 +3426,16 @@ function LabelMarks({
 }) {
   const dim = disabled || void 0;
   return /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    required ? /* @__PURE__ */ jsx17("span", { className: Label_default.asterisk, "aria-hidden": "true", "data-disabled": dim, children: "*" }) : null,
-    optional ? /* @__PURE__ */ jsx17("span", { className: Label_default.optional, "data-disabled": dim, children: optionalLabel }) : null
+    required ? /* @__PURE__ */ jsx18("span", { className: Label_default.asterisk, "aria-hidden": "true", "data-disabled": dim, children: "*" }) : null,
+    optional ? /* @__PURE__ */ jsx18("span", { className: Label_default.optional, "data-disabled": dim, children: optionalLabel }) : null
   ] });
 }
 function LabelIcon({ className, ...rest }) {
-  return /* @__PURE__ */ jsx17("span", { className: cx(Label_default.icon, className), "aria-hidden": "true", ...rest });
+  return /* @__PURE__ */ jsx18("span", { className: cx(Label_default.icon, className), "aria-hidden": "true", ...rest });
 }
 LabelIcon.displayName = "Label.Icon";
 function LabelDescription({ className, ...rest }) {
-  return /* @__PURE__ */ jsx17("span", { className: cx(Label_default.description, className), ...rest });
+  return /* @__PURE__ */ jsx18("span", { className: cx(Label_default.description, className), ...rest });
 }
 LabelDescription.displayName = "Label.Description";
 var Label = {
@@ -3418,7 +3451,7 @@ var Hint_default = {
 };
 
 // src/components/hint/Hint.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function HintRoot({
   className,
   size: sizeProp,
@@ -3432,7 +3465,7 @@ function HintRoot({
   const disabled = useInheritedDisabled(disabledProp);
   const shownTone = tone === "neutral" || invalid || disabled ? void 0 : tone;
   return tier.provide(
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       "p",
       {
         ...rest,
@@ -3458,7 +3491,7 @@ function HintRoot({
 }
 HintRoot.displayName = "Hint.Root";
 function HintIcon({ className, ...rest }) {
-  return /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", className: cx(Hint_default.icon, className), ...rest });
+  return /* @__PURE__ */ jsx19("span", { "aria-hidden": "true", className: cx(Hint_default.icon, className), ...rest });
 }
 HintIcon.displayName = "Hint.Icon";
 var Hint = { Root: HintRoot, Icon: HintIcon };
@@ -3474,7 +3507,7 @@ var CheckMark_default = {
 };
 
 // src/internal/CheckMark.tsx
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 function CheckMark({ state, className }) {
   return /* @__PURE__ */ jsxs9(
     "svg",
@@ -3485,8 +3518,8 @@ function CheckMark({ state, className }) {
       "aria-hidden": "true",
       focusable: "false",
       children: [
-        /* @__PURE__ */ jsx19("path", { d: "M5.5 12.5l4.25 4.25L18.5 8", pathLength: 1, className: CheckMark_default.check }),
-        /* @__PURE__ */ jsx19("path", { d: "M7 12h10", pathLength: 1, className: CheckMark_default.bar })
+        /* @__PURE__ */ jsx20("path", { d: "M5.5 12.5l4.25 4.25L18.5 8", pathLength: 1, className: CheckMark_default.check }),
+        /* @__PURE__ */ jsx20("path", { d: "M7 12h10", pathLength: 1, className: CheckMark_default.bar })
       ]
     }
   );
@@ -3528,7 +3561,7 @@ var FieldFrame_default = {
 };
 
 // src/internal/FieldFrame.tsx
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 var REQUIRED_ROLES = /* @__PURE__ */ new Set([
   "checkbox",
   "combobox",
@@ -3617,9 +3650,9 @@ function FieldSupport({
 }) {
   let text = null;
   if (ids.showError) {
-    text = /* @__PURE__ */ jsx20(Hint.Root, { id: ids.errorId, size, invalid: true, className: textClassName, children: error });
+    text = /* @__PURE__ */ jsx21(Hint.Root, { id: ids.errorId, size, invalid: true, className: textClassName, children: error });
   } else if (leaving) {
-    text = /* @__PURE__ */ jsx20(
+    text = /* @__PURE__ */ jsx21(
       Hint.Root,
       {
         size,
@@ -3631,7 +3664,7 @@ function FieldSupport({
       }
     );
   } else if (ids.showHint) {
-    text = /* @__PURE__ */ jsx20(
+    text = /* @__PURE__ */ jsx21(
       Hint.Root,
       {
         id: ids.hintId,
@@ -3643,7 +3676,7 @@ function FieldSupport({
       }
     );
   }
-  return /* @__PURE__ */ jsx20("div", { className, "aria-live": live ? "polite" : void 0, children: text });
+  return /* @__PURE__ */ jsx21("div", { className, "aria-live": live ? "polite" : void 0, children: text });
 }
 function FieldFrame({
   size,
@@ -3670,7 +3703,7 @@ function FieldFrame({
   const shake = useErrorShake(ids.invalid, error);
   const cell = useFieldCell();
   const shownLabel = hasContent(label) ? label : cell?.label;
-  const labelNode = hasContent(shownLabel) ? /* @__PURE__ */ jsx20(
+  const labelNode = hasContent(shownLabel) ? /* @__PURE__ */ jsx21(
     Label.Root,
     {
       id: ids.labelId,
@@ -3702,7 +3735,7 @@ function FieldFrame({
       children: [
         labelEnd != null ? /* @__PURE__ */ jsxs10("div", { className: FieldFrame_default.labelRow, children: [
           labelNode,
-          /* @__PURE__ */ jsx20("span", { className: FieldFrame_default.labelEnd, children: labelEnd })
+          /* @__PURE__ */ jsx21("span", { className: FieldFrame_default.labelEnd, children: labelEnd })
         ] }) : labelNode,
         /* @__PURE__ */ jsxs10("div", { className: cx(FieldFrame_default.body, enterMotion_default.shakeParts), "data-shake": shake, children: [
           children,
@@ -3717,7 +3750,7 @@ function FieldFrame({
                 empty: !showSupport || void 0
               }),
               children: [
-                /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx21(
                   FieldSupport,
                   {
                     ids,
@@ -3736,7 +3769,7 @@ function FieldFrame({
             }
           )
         ] }),
-        requiredLabel && ids.required ? /* @__PURE__ */ jsx20(VisuallyHidden, { id: ids.requiredId, children: requiredLabel }) : null
+        requiredLabel && ids.required ? /* @__PURE__ */ jsx21(VisuallyHidden, { id: ids.requiredId, children: requiredLabel }) : null
       ]
     }
   );
@@ -3751,11 +3784,11 @@ function FieldCounter({ current, max, size, label, className, ...rest }) {
       "data-invalid": current > max || void 0,
       children: [
         /* @__PURE__ */ jsxs10("span", { "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx20(RollingNumber, { children: current }),
+          /* @__PURE__ */ jsx21(RollingNumber, { children: current }),
           "/",
           max
         ] }),
-        /* @__PURE__ */ jsx20(VisuallyHidden, { live: "polite", children: formatLabel(label, { current, max }) })
+        /* @__PURE__ */ jsx21(VisuallyHidden, { live: "polite", children: formatLabel(label, { current, max }) })
       ]
     }
   );
@@ -3775,7 +3808,7 @@ var ChoiceField_default = {
 };
 
 // src/internal/ChoiceField.tsx
-import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 var choiceInputClass = ChoiceField_default.input;
 var choiceVisualClass = cx(ChoiceField_default.visual, press_default.pressPartCompact);
 var choiceBoxClass = ChoiceField_default.box;
@@ -3805,7 +3838,7 @@ function ChoiceField({
     () => ({ required, optional, optionalLabel, disabled }),
     [required, optional, optionalLabel, disabled]
   );
-  return /* @__PURE__ */ jsx21(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx22(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs11(
     "div",
     {
       className: cx(fieldTierClass, ChoiceField_default.field, className),
@@ -3824,7 +3857,7 @@ function ChoiceField({
             className: cx(ChoiceField_default.row, press_default.pressHost),
             "data-loading": busy || void 0,
             children: [
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx22(
                 "span",
                 {
                   className: cx(ChoiceField_default.controlCell, enterMotion_default.shake, touchTargetClass),
@@ -3832,11 +3865,11 @@ function ChoiceField({
                   children: control
                 }
               ),
-              /* @__PURE__ */ jsx21(ChoiceMarksContext, { value: marks, children })
+              /* @__PURE__ */ jsx22(ChoiceMarksContext, { value: marks, children })
             ]
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           FieldSupport,
           {
             ids,
@@ -3861,7 +3894,7 @@ function ChoiceLabel({ className, children, ...rest }) {
     children,
     marked ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
       " ",
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         LabelMarks,
         {
           required: marks.required,
@@ -3882,7 +3915,7 @@ var Checkbox_default = {
 };
 
 // src/components/checkbox/Checkbox.tsx
-import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var CHECKBOX_LABELS = { optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E" };
 function CheckboxRoot({
   id,
@@ -3920,7 +3953,7 @@ function CheckboxRoot({
   React33.useLayoutEffect(() => {
     if (internalRef.current) internalRef.current.indeterminate = indeterminate;
   });
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     ChoiceField,
     {
       ids,
@@ -3936,7 +3969,7 @@ function CheckboxRoot({
       error,
       className: cx(Checkbox_default.root, className),
       control: /* @__PURE__ */ jsxs12(Fragment7, { children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           "input",
           {
             ...inputRest,
@@ -3955,13 +3988,13 @@ function CheckboxRoot({
             "aria-describedby": ids.describedBy
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           "span",
           {
             className: cx(choiceVisualClass, choiceBoxClass, Checkbox_default.control),
             "data-shape": shape,
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx22(
+            children: /* @__PURE__ */ jsx23(
               CheckMark,
               {
                 state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked"
@@ -3976,7 +4009,7 @@ function CheckboxRoot({
 }
 CheckboxRoot.displayName = "Checkbox.Root";
 function CheckboxLabel(props) {
-  return /* @__PURE__ */ jsx22(ChoiceLabel, { ...props });
+  return /* @__PURE__ */ jsx23(ChoiceLabel, { ...props });
 }
 CheckboxLabel.displayName = "Checkbox.Label";
 function CheckboxIndicator({
@@ -3989,7 +4022,7 @@ function CheckboxIndicator({
   ...rest
 }) {
   const size = useControlSize(sizeProp);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "span",
     {
       "aria-hidden": "true",
@@ -4008,7 +4041,7 @@ function CheckboxIndicator({
         disabled: disabled || void 0
       }),
       ...rest,
-      children: /* @__PURE__ */ jsx22(CheckMark, { state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked" })
+      children: /* @__PURE__ */ jsx23(CheckMark, { state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked" })
     }
   );
 }
@@ -4092,20 +4125,20 @@ var mediaDisk_default = {
 };
 
 // src/internal/mediaDisk.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var mediaDiskClass = cx(fieldTierClass, mediaPill_default.ink, mediaDisk_default.disk);
 function MediaPlayMark({
   shown = true,
   className
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "span",
     {
       className: cx(mediaDiskClass, className),
       "data-size": "l",
       "data-shown": shown,
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx23(Icon, { name: "action.play", fill: "currentColor" })
+      children: /* @__PURE__ */ jsx24(Icon, { name: "action.play", fill: "currentColor" })
     }
   );
 }
@@ -4165,7 +4198,7 @@ var Thumbnail_default = {
 };
 
 // src/components/thumbnail/Thumbnail.tsx
-import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var slot2 = createImageSlot("Thumbnail", { image: Thumbnail_default.image, fallback: Thumbnail_default.fallback });
 function ThumbnailRoot({
   size: sizeProp,
@@ -4207,7 +4240,7 @@ function ThumbnailRoot({
   if (selectable) {
     const { onClick: onClick2 } = rest;
     return provide(
-      /* @__PURE__ */ jsx24(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsxs13(
+      /* @__PURE__ */ jsx25(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsxs13(
         "button",
         {
           ...rest,
@@ -4222,7 +4255,7 @@ function ThumbnailRoot({
           },
           children: [
             children,
-            /* @__PURE__ */ jsx24("span", { className: cx(Thumbnail_default.check, mediaPill_default.choice), "aria-hidden": "true", children: /* @__PURE__ */ jsx24(Checkbox.Indicator, { checked, size: fullWidth ? "s" : compactTier(size) }) })
+            /* @__PURE__ */ jsx25("span", { className: cx(Thumbnail_default.check, mediaPill_default.choice), "aria-hidden": "true", children: /* @__PURE__ */ jsx25(Checkbox.Indicator, { checked, size: fullWidth ? "s" : compactTier(size) }) })
           ]
         }
       ) })
@@ -4230,16 +4263,16 @@ function ThumbnailRoot({
   }
   if (asChild) {
     return provide(
-      /* @__PURE__ */ jsx24(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsx24(Slot, { ...rest, ...frame2, ref, children }) })
+      /* @__PURE__ */ jsx25(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsx25(Slot, { ...rest, ...frame2, ref, children }) })
     );
   }
   return provide(
-    /* @__PURE__ */ jsx24(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsx24("div", { ref, ...frame2, ...rest, children }) })
+    /* @__PURE__ */ jsx25(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsx25("div", { ref, ...frame2, ...rest, children }) })
   );
 }
 ThumbnailRoot.displayName = "Thumbnail.Root";
 function ThumbnailImage({ fit = "cover", ...rest }) {
-  return /* @__PURE__ */ jsx24(slot2.Image, { ...rest, "data-fit": fit });
+  return /* @__PURE__ */ jsx25(slot2.Image, { ...rest, "data-fit": fit });
 }
 ThumbnailImage.displayName = "Thumbnail.Image";
 function ThumbnailVideoInner({
@@ -4274,7 +4307,7 @@ function ThumbnailVideoInner({
   const [still] = React35.useState(prefersReducedMotion);
   const loops = autoPlay && !still && !controls;
   return /* @__PURE__ */ jsxs13(Fragment8, { children: [
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(
       "video",
       {
         ...rest,
@@ -4309,12 +4342,12 @@ function ThumbnailVideoInner({
         }
       }
     ),
-    !controls && !loops ? /* @__PURE__ */ jsx24(MediaPlayMark, { shown: !playing, className: Thumbnail_default.play }) : null,
-    !controls && duration !== null ? /* @__PURE__ */ jsx24("span", { className: cx(textRole_default.caption, mediaPill_default.pill, Thumbnail_default.duration), children: formatDuration(duration) }) : null
+    !controls && !loops ? /* @__PURE__ */ jsx25(MediaPlayMark, { shown: !playing, className: Thumbnail_default.play }) : null,
+    !controls && duration !== null ? /* @__PURE__ */ jsx25("span", { className: cx(textRole_default.caption, mediaPill_default.pill, Thumbnail_default.duration), children: formatDuration(duration) }) : null
   ] });
 }
 function ThumbnailVideo(props) {
-  return /* @__PURE__ */ jsx24(ThumbnailVideoInner, { ...props }, props.src);
+  return /* @__PURE__ */ jsx25(ThumbnailVideoInner, { ...props }, props.src);
 }
 ThumbnailVideo.displayName = "Thumbnail.Video";
 var ThumbnailFallback = slot2.Fallback;
@@ -4325,8 +4358,8 @@ var Thumbnail = {
   Fallback: ThumbnailFallback
 };
 
-// src/components/popover/Popover.tsx
-import * as React47 from "react";
+// src/components/tooltip/Tooltip.tsx
+import * as React45 from "react";
 
 // src/hooks/useSwipeDismiss.ts
 import * as React36 from "react";
@@ -4776,10 +4809,10 @@ function useLayer(open, options) {
 }
 
 // src/internal/overlay/FloatingPanel.tsx
-import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 function SheetHandle({ swipe }) {
   if (!swipe.enabled) return null;
-  return /* @__PURE__ */ jsx25("div", { className: sheet_default.handle, ...{ [SWIPE_HANDLE_ATTRIBUTE]: "" }, "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx26("div", { className: sheet_default.handle, ...{ [SWIPE_HANDLE_ATTRIBUTE]: "" }, "aria-hidden": "true" });
 }
 function FloatingPanel({
   floating,
@@ -4817,9 +4850,9 @@ function FloatingPanel({
     }
   };
   const panelRef = sheet ? ref : mergedRef;
-  const panel = scroll ? /* @__PURE__ */ jsx25(ScrollContainer, { ...props, edges: "shadow", ref: panelRef, children }) : /* @__PURE__ */ jsx25("div", { ...props, ref: panelRef, children });
-  return /* @__PURE__ */ jsx25(Portal, { children: /* @__PURE__ */ jsx25(LayerProvider, { value: floating.layer, children: /* @__PURE__ */ jsx25(SurfaceDepthProvider, { value: "floating", children: /* @__PURE__ */ jsx25(ControlSizeProvider, { value: size, children: sheet ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
-    /* @__PURE__ */ jsx25(
+  const panel = scroll ? /* @__PURE__ */ jsx26(ScrollContainer, { ...props, edges: "shadow", ref: panelRef, children }) : /* @__PURE__ */ jsx26("div", { ...props, ref: panelRef, children });
+  return /* @__PURE__ */ jsx26(Portal, { children: /* @__PURE__ */ jsx26(LayerProvider, { value: floating.layer, children: /* @__PURE__ */ jsx26(SurfaceDepthProvider, { value: "floating", children: /* @__PURE__ */ jsx26(ControlSizeProvider, { value: size, children: sheet ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
+    /* @__PURE__ */ jsx26(
       "div",
       {
         role: "presentation",
@@ -4843,7 +4876,7 @@ function FloatingPanel({
         onPointerDown: swipe.onPointerDown,
         ...swipe.panelProps,
         children: [
-          /* @__PURE__ */ jsx25(SheetHandle, { swipe }),
+          /* @__PURE__ */ jsx26(SheetHandle, { swipe }),
           panel
         ]
       }
@@ -4851,35 +4884,21 @@ function FloatingPanel({
   ] }) : panel }) }) }) });
 }
 function FloatingTrigger({ triggerProps, children, ...forwarded }) {
-  return /* @__PURE__ */ jsx25(Slot, { ...forwarded, children: /* @__PURE__ */ jsx25(Slot, { ...triggerProps, children }) });
+  return /* @__PURE__ */ jsx26(Slot, { ...forwarded, children: /* @__PURE__ */ jsx26(Slot, { ...triggerProps, children }) });
 }
 
-// src/internal/overlay/useAnchorName.ts
-import * as React41 from "react";
-var CONTROL = "button, a[href], input, select, textarea, [tabindex]";
-function useAnchorName(open, named, anchorRef) {
-  const [name, setName] = React41.useState({});
-  React41.useLayoutEffect(() => {
-    if (!open || named) return;
-    const anchor = anchorRef.current;
-    if (!anchor) return;
-    const control = anchor.matches(CONTROL) ? anchor : getFocusable(anchor)[0] ?? anchor;
-    const next = control.id ? { id: control.id } : {
-      label: control.getAttribute("aria-label") ?? (control.textContent?.trim() || void 0)
-    };
-    setName((current) => current.id === next.id && current.label === next.label ? current : next);
-  }, [open, named, anchorRef]);
-  if (named) return {};
-  return name.id ? { "aria-labelledby": name.id } : { "aria-label": name.label };
-}
+// src/internal/overlay/tooltipSurface.module.css
+var tooltipSurface_default = {
+  chip: "tooltipSurface_chip"
+};
 
 // src/internal/overlay/useFloatingLayer.ts
-import * as React45 from "react";
+import * as React44 from "react";
 
 // src/hooks/useMediaQuery.ts
-import * as React42 from "react";
+import * as React41 from "react";
 function useMediaQuery(query, enabled = true) {
-  const subscribe = React42.useCallback(
+  const subscribe = React41.useCallback(
     (onChange) => {
       if (!enabled || typeof window === "undefined" || !window.matchMedia) return () => {
       };
@@ -4890,11 +4909,11 @@ function useMediaQuery(query, enabled = true) {
     [enabled, query]
   );
   const getSnapshot = () => enabled && typeof window !== "undefined" && !!window.matchMedia ? window.matchMedia(query).matches : false;
-  return React42.useSyncExternalStore(subscribe, getSnapshot, () => false);
+  return React41.useSyncExternalStore(subscribe, getSnapshot, () => false);
 }
 
 // src/hooks/useScrollLock.ts
-import * as React43 from "react";
+import * as React42 from "react";
 var lockCount = 0;
 var saved = null;
 function lockScroll() {
@@ -4919,7 +4938,7 @@ function unlockScroll() {
   }
 }
 function useScrollLock(enabled) {
-  React43.useEffect(() => {
+  React42.useEffect(() => {
     if (!enabled) return;
     lockScroll();
     return unlockScroll;
@@ -4927,7 +4946,7 @@ function useScrollLock(enabled) {
 }
 
 // src/internal/overlay/useContainScroll.ts
-import * as React44 from "react";
+import * as React43 from "react";
 function canScroll(el, deltaY) {
   const { overflowY } = getComputedStyle(el);
   if (overflowY !== "auto" && overflowY !== "scroll") return false;
@@ -4935,7 +4954,7 @@ function canScroll(el, deltaY) {
   return deltaY < 0 ? el.scrollTop > 0 : el.scrollTop + el.clientHeight < el.scrollHeight;
 }
 function useContainScroll(panel) {
-  React44.useEffect(() => {
+  React43.useEffect(() => {
     if (!panel) return;
     const onWheel = (event) => {
       for (let el = event.target; el; el = el.parentElement) {
@@ -4968,12 +4987,12 @@ function useFloatingLayer({
   const sheet = useMediaQuery(COMPACT_QUERY, sheetOption);
   const presence = usePresence(open, { exitDuration: sheet ? "base" : exitDuration });
   const mounted = presence.mounted && (open || !skipExit);
-  const contentRef = React45.useRef(null);
+  const contentRef = React44.useRef(null);
   const position = usePosition(mounted && !sheet, triggerRef, contentRef, positionOptions);
   useScrollLock(open && sheet);
-  const [panel, setPanel] = React45.useState(null);
+  const [panel, setPanel] = React44.useState(null);
   const { attachLayer } = position;
-  const panelRef = React45.useCallback(
+  const panelRef = React44.useCallback(
     (node) => {
       attachLayer(node);
       setPanel(node);
@@ -4982,12 +5001,12 @@ function useFloatingLayer({
   );
   const passive = dismiss === "none";
   useContainScroll(open && !sheet && !passive ? panel : null);
-  const outsideRef = React45.useRef(false);
-  const close = React45.useCallback(() => {
+  const outsideRef = React44.useRef(false);
+  const close = React44.useCallback(() => {
     outsideRef.current = false;
     onOpenChange(false);
   }, [onOpenChange]);
-  const dismissOutside = React45.useCallback(() => {
+  const dismissOutside = React44.useCallback(() => {
     outsideRef.current = true;
     onOpenChange(false);
   }, [onOpenChange]);
@@ -5008,7 +5027,7 @@ function useFloatingLayer({
     trap,
     onDismiss
   });
-  React45.useEffect(() => {
+  React44.useEffect(() => {
     if (!open || !panel || passive) return;
     outsideRef.current = false;
     if (focusOnOpen) {
@@ -5069,361 +5088,147 @@ function floatingTriggerProps({
   };
 }
 
-// src/internal/overlay/useOpenState.ts
-import * as React46 from "react";
-function useOpenState({
+// src/components/tooltip/Tooltip.module.css
+var Tooltip_default = {
+  content: "Tooltip_content",
+  arrow: "Tooltip_arrow",
+  focusHost: "Tooltip_focusHost",
+  disabledHost: "Tooltip_disabledHost"
+};
+
+// src/components/tooltip/Tooltip.tsx
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+var DEFAULT_DELAY_MS = 400;
+var DEFAULT_SKIP_DELAY_MS = 300;
+var CLOSE_GRACE_MS = 100;
+function createTooltipGroup(delayDuration, skipDelayDuration) {
+  let current = null;
+  let warmUntil = 0;
+  return {
+    delayDuration,
+    isWarm: () => current !== null || Date.now() < warmUntil,
+    opened: (close) => {
+      if (current && current !== close) current();
+      current = close;
+    },
+    closed: (close) => {
+      if (current === close) current = null;
+      warmUntil = Date.now() + skipDelayDuration;
+    }
+  };
+}
+var defaultGroup = createTooltipGroup(DEFAULT_DELAY_MS, DEFAULT_SKIP_DELAY_MS);
+var TooltipGroupContext = React45.createContext(defaultGroup);
+function TooltipProvider({
+  delayDuration = DEFAULT_DELAY_MS,
+  skipDelayDuration = DEFAULT_SKIP_DELAY_MS,
+  children
+}) {
+  const group = React45.useMemo(
+    () => createTooltipGroup(delayDuration, skipDelayDuration),
+    [delayDuration, skipDelayDuration]
+  );
+  return /* @__PURE__ */ jsx27(TooltipGroupContext.Provider, { value: group, children });
+}
+var [TooltipRootProvider, useTooltipRootContext] = createComponentContext("Tooltip");
+function TooltipRoot({
+  children,
   open,
-  defaultOpen = false,
+  defaultOpen,
   onOpenChange,
-  disabled = false
+  delayDuration: delayProp
 }) {
+  const group = React45.useContext(TooltipGroupContext);
+  const delayDuration = delayProp ?? group.delayDuration;
   const [isOpen, setIsOpen] = useControllableState({
     value: open,
-    defaultValue: defaultOpen,
+    defaultValue: defaultOpen ?? false,
     onChange: onOpenChange
   });
-  const disabledRef = React46.useRef(disabled);
-  disabledRef.current = disabled;
-  const setOpen = React46.useCallback(
-    (next) => {
-      setIsOpen((current) => {
-        const value = typeof next === "function" ? next(current && !disabledRef.current) : next;
-        return value && disabledRef.current ? current : value;
-      });
+  const [instant, setInstant] = React45.useState(false);
+  const triggerRef = React45.useRef(null);
+  const timerRef = React45.useRef(void 0);
+  const contentId = React45.useId();
+  const cancelPending = React45.useCallback(() => clearTimeout(timerRef.current), []);
+  const closeInstantlyRef = React45.useRef(() => {
+  });
+  closeInstantlyRef.current = () => {
+    clearTimeout(timerRef.current);
+    setInstant(true);
+    setIsOpen(false);
+  };
+  const closeInstantly = React45.useCallback(() => closeInstantlyRef.current(), []);
+  const show = React45.useCallback(
+    (asInstant) => {
+      setInstant(asInstant);
+      setIsOpen(true);
     },
     [setIsOpen]
   );
-  return [isOpen && !disabled, setOpen];
-}
-
-// src/components/popover/Popover.module.css
-var Popover_default = {
-  content: "Popover_content",
-  header: "Popover_header",
-  title: "Popover_title",
-  description: "Popover_description",
-  actions: "Popover_actions"
-};
-
-// src/components/popover/Popover.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
-var [PopoverProvider, usePopoverContext] = createComponentContext("Popover");
-function PopoverRoot({
-  open,
-  defaultOpen = false,
-  onOpenChange,
-  closeOnOutsideClick = true,
-  closeOnEscape = true,
-  openOnArrow = false,
-  children
-}) {
-  const [isOpen, setOpen] = useOpenState({ open, defaultOpen, onOpenChange });
-  const id = React47.useId();
-  const triggerRef = React47.useRef(null);
-  const anchoredRef = React47.useRef(false);
-  const value = React47.useMemo(
+  const scheduleOpen = React45.useCallback(() => {
+    clearTimeout(timerRef.current);
+    if (group.isWarm() || delayDuration <= 0) {
+      show(group.isWarm());
+      return;
+    }
+    timerRef.current = setTimeout(() => show(false), delayDuration);
+  }, [delayDuration, group, show]);
+  const close = React45.useCallback(() => {
+    clearTimeout(timerRef.current);
+    setInstant(false);
+    setIsOpen(false);
+  }, [setIsOpen]);
+  const scheduleClose = React45.useCallback(() => {
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(close, CLOSE_GRACE_MS);
+  }, [close]);
+  React45.useEffect(() => {
+    if (!isOpen) return;
+    group.opened(closeInstantly);
+    return () => group.closed(closeInstantly);
+  }, [isOpen, group, closeInstantly]);
+  React45.useEffect(() => () => clearTimeout(timerRef.current), []);
+  const value = React45.useMemo(
     () => ({
       isOpen,
-      setOpen,
-      triggerId: `${id}-trigger`,
-      contentId: `${id}-content`,
+      instant,
       triggerRef,
-      closeOnOutsideClick,
-      closeOnEscape,
-      openOnArrow,
-      anchoredRef
+      contentId,
+      scheduleOpen,
+      scheduleClose,
+      cancelPending,
+      close
     }),
-    [isOpen, setOpen, id, closeOnOutsideClick, closeOnEscape, openOnArrow]
+    [isOpen, instant, contentId, scheduleOpen, scheduleClose, cancelPending, close]
   );
-  return /* @__PURE__ */ jsx26(PopoverProvider, { value, children });
+  return /* @__PURE__ */ jsx27(TooltipRootProvider, { value, children });
 }
-PopoverRoot.displayName = "Popover.Root";
-function PopoverTrigger(props) {
-  const { isOpen, setOpen, triggerId, contentId, triggerRef, openOnArrow } = usePopoverContext("Popover.Trigger");
-  return /* @__PURE__ */ jsx26(
-    FloatingTrigger,
-    {
-      ...props,
-      triggerProps: {
-        ref: triggerRef,
-        id: triggerId,
-        "aria-haspopup": "dialog",
-        "aria-controls": isOpen ? contentId : void 0,
-        ...floatingTriggerProps({ open: isOpen, setOpen, openOnArrow })
-      }
-    }
-  );
-}
-PopoverTrigger.displayName = "Popover.Trigger";
-function PopoverAnchor({ children }) {
-  const { triggerRef, anchoredRef } = usePopoverContext("Popover.Anchor");
-  anchoredRef.current = true;
-  return /* @__PURE__ */ jsx26(Slot, { ref: triggerRef, children });
-}
-PopoverAnchor.displayName = "Popover.Anchor";
-function PopoverClose({ children }) {
-  const { setOpen } = usePopoverContext("Popover.Close");
-  return /* @__PURE__ */ jsx26(Slot, { onClick: () => setOpen(false), children });
-}
-PopoverClose.displayName = "Popover.Close";
-function PopoverContent({
-  side = DEFAULT_SIDE,
-  align = DEFAULT_ALIGN,
-  size = OVERLAY_CONTENT_SIZE,
-  width = "auto",
-  trapFocus = false,
-  initialFocus,
-  flush = false,
-  className,
-  children,
-  ...rest
-}) {
-  const {
-    isOpen,
-    setOpen,
-    triggerRef,
-    contentId,
-    closeOnOutsideClick,
-    closeOnEscape,
-    anchoredRef
-  } = usePopoverContext("Popover.Content");
-  const floating = useFloatingLayer({
-    open: isOpen,
-    onOpenChange: setOpen,
-    triggerRef,
-    side,
-    align,
-    matchAnchorWidth: width === "trigger" || width === "min-trigger",
-    closeOnEscape,
-    closeOnOutsideClick,
-    focusOnOpen: initialFocus ?? !anchoredRef.current,
-    trap: trapFocus,
-    tabExit: "edges",
-    // A panel driven by typing in its anchor stays next to the field.
-    sheet: !anchoredRef.current
-  });
-  const [titleId, setTitleId] = React47.useState(null);
-  const [descriptionId, setDescriptionId] = React47.useState(null);
-  const fallbackId = `${contentId}-title`;
-  const fallbackDescriptionId = `${contentId}-description`;
-  const slots = React47.useMemo(
-    () => ({ fallbackId, fallbackDescriptionId, setTitleId, setDescriptionId }),
-    [fallbackId, fallbackDescriptionId]
-  );
-  const anchorName = useAnchorName(isOpen, titleId !== null, triggerRef);
-  return /* @__PURE__ */ jsx26(
-    FloatingPanel,
-    {
-      ...rest,
-      floating,
-      size,
-      width,
-      scroll: true,
-      id: contentId,
-      role: "dialog",
-      "aria-modal": false,
-      ...anchorName,
-      "aria-labelledby": titleId ?? anchorName["aria-labelledby"],
-      "aria-describedby": descriptionId ?? void 0,
-      tabIndex: -1,
-      "data-flush": flush || void 0,
-      className: cx(fieldTierClass, Popover_default.content, className),
-      children: /* @__PURE__ */ jsx26(PopoverSlotsContext.Provider, { value: slots, children })
-    }
-  );
-}
-PopoverContent.displayName = "Popover.Content";
-var PopoverSlotsContext = React47.createContext(null);
-function useSlotId(id, kind) {
-  const slots = React47.useContext(PopoverSlotsContext);
-  const resolved = id ?? (kind === "title" ? slots?.fallbackId : slots?.fallbackDescriptionId);
-  const register = kind === "title" ? slots?.setTitleId : slots?.setDescriptionId;
-  React47.useLayoutEffect(() => {
-    if (!register || !resolved) return;
-    register(resolved);
-    return () => register(null);
-  }, [register, resolved]);
-  return resolved;
-}
-function PopoverHeader({ className, ...rest }) {
-  return /* @__PURE__ */ jsx26("div", { className: cx(Popover_default.header, className), ...rest });
-}
-PopoverHeader.displayName = "Popover.Header";
-function PopoverTitle({ className, id, ...rest }) {
-  const resolvedId = useSlotId(id, "title");
-  return /* @__PURE__ */ jsx26("h2", { id: resolvedId, className: cx(Popover_default.title, className), ...rest });
-}
-PopoverTitle.displayName = "Popover.Title";
-function PopoverDescription({ className, id, ...rest }) {
-  const resolvedId = useSlotId(id, "description");
-  return /* @__PURE__ */ jsx26("p", { id: resolvedId, className: cx(Popover_default.description, className), ...rest });
-}
-PopoverDescription.displayName = "Popover.Description";
-function PopoverActions({ className, ...rest }) {
-  return /* @__PURE__ */ jsx26("div", { className: cx(Popover_default.actions, className), ...rest });
-}
-PopoverActions.displayName = "Popover.Actions";
-var Popover = {
-  Root: PopoverRoot,
-  Trigger: PopoverTrigger,
-  Anchor: PopoverAnchor,
-  Content: PopoverContent,
-  Header: PopoverHeader,
-  Title: PopoverTitle,
-  Description: PopoverDescription,
-  Actions: PopoverActions,
-  Close: PopoverClose
-};
-
-// src/components/tooltip/Tooltip.tsx
-import * as React48 from "react";
-
-// src/internal/overlay/tooltipSurface.module.css
-var tooltipSurface_default = {
-  chip: "tooltipSurface_chip"
-};
-
-// src/components/tooltip/Tooltip.module.css
-var Tooltip_default = {
-  content: "Tooltip_content",
-  arrow: "Tooltip_arrow",
-  focusHost: "Tooltip_focusHost",
-  disabledHost: "Tooltip_disabledHost"
-};
-
-// src/components/tooltip/Tooltip.tsx
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
-var DEFAULT_DELAY_MS = 400;
-var DEFAULT_SKIP_DELAY_MS = 300;
-var CLOSE_GRACE_MS = 100;
-function createTooltipGroup(delayDuration, skipDelayDuration) {
-  let current = null;
-  let warmUntil = 0;
-  return {
-    delayDuration,
-    isWarm: () => current !== null || Date.now() < warmUntil,
-    opened: (close) => {
-      if (current && current !== close) current();
-      current = close;
-    },
-    closed: (close) => {
-      if (current === close) current = null;
-      warmUntil = Date.now() + skipDelayDuration;
-    }
-  };
-}
-var defaultGroup = createTooltipGroup(DEFAULT_DELAY_MS, DEFAULT_SKIP_DELAY_MS);
-var TooltipGroupContext = React48.createContext(defaultGroup);
-function TooltipProvider({
-  delayDuration = DEFAULT_DELAY_MS,
-  skipDelayDuration = DEFAULT_SKIP_DELAY_MS,
-  children
-}) {
-  const group = React48.useMemo(
-    () => createTooltipGroup(delayDuration, skipDelayDuration),
-    [delayDuration, skipDelayDuration]
-  );
-  return /* @__PURE__ */ jsx27(TooltipGroupContext.Provider, { value: group, children });
-}
-var [TooltipRootProvider, useTooltipRootContext] = createComponentContext("Tooltip");
-function TooltipRoot({
-  children,
-  open,
-  defaultOpen,
-  onOpenChange,
-  delayDuration: delayProp
-}) {
-  const group = React48.useContext(TooltipGroupContext);
-  const delayDuration = delayProp ?? group.delayDuration;
-  const [isOpen, setIsOpen] = useControllableState({
-    value: open,
-    defaultValue: defaultOpen ?? false,
-    onChange: onOpenChange
-  });
-  const [instant, setInstant] = React48.useState(false);
-  const triggerRef = React48.useRef(null);
-  const timerRef = React48.useRef(void 0);
-  const contentId = React48.useId();
-  const cancelPending = React48.useCallback(() => clearTimeout(timerRef.current), []);
-  const closeInstantlyRef = React48.useRef(() => {
-  });
-  closeInstantlyRef.current = () => {
-    clearTimeout(timerRef.current);
-    setInstant(true);
-    setIsOpen(false);
-  };
-  const closeInstantly = React48.useCallback(() => closeInstantlyRef.current(), []);
-  const show = React48.useCallback(
-    (asInstant) => {
-      setInstant(asInstant);
-      setIsOpen(true);
-    },
-    [setIsOpen]
-  );
-  const scheduleOpen = React48.useCallback(() => {
-    clearTimeout(timerRef.current);
-    if (group.isWarm() || delayDuration <= 0) {
-      show(group.isWarm());
-      return;
-    }
-    timerRef.current = setTimeout(() => show(false), delayDuration);
-  }, [delayDuration, group, show]);
-  const close = React48.useCallback(() => {
-    clearTimeout(timerRef.current);
-    setInstant(false);
-    setIsOpen(false);
-  }, [setIsOpen]);
-  const scheduleClose = React48.useCallback(() => {
-    clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(close, CLOSE_GRACE_MS);
-  }, [close]);
-  React48.useEffect(() => {
-    if (!isOpen) return;
-    group.opened(closeInstantly);
-    return () => group.closed(closeInstantly);
-  }, [isOpen, group, closeInstantly]);
-  React48.useEffect(() => () => clearTimeout(timerRef.current), []);
-  const value = React48.useMemo(
-    () => ({
-      isOpen,
-      instant,
-      triggerRef,
-      contentId,
-      scheduleOpen,
-      scheduleClose,
-      cancelPending,
-      close
-    }),
-    [isOpen, instant, contentId, scheduleOpen, scheduleClose, cancelPending, close]
-  );
-  return /* @__PURE__ */ jsx27(TooltipRootProvider, { value, children });
-}
-var BUTTON = 'button:not([role]), [role="button"]';
-function TooltipTrigger(props) {
-  const { children } = props;
-  const { isOpen, triggerRef, contentId, scheduleOpen, scheduleClose, close } = useTooltipRootContext("Tooltip.Trigger");
-  const pressedRef = React48.useRef(false);
-  const childProps = children.props;
-  const inheritedDisabled = useInheritedDisabled();
-  const [domDisabled, setDomDisabled] = React48.useState(false);
-  const disabledChild = childProps.disabled === true || inheritedDisabled && domDisabled;
-  const [ownTabStop, setOwnTabStop] = React48.useState(true);
-  const [buttonHost, setButtonHost] = React48.useState(false);
-  React48.useLayoutEffect(() => {
-    const node = triggerRef.current;
-    if (!node) return;
-    const host = node.hasAttribute("data-disabled-host");
-    const control = host ? node.firstElementChild : node;
-    setDomDisabled(
-      inheritedDisabled && control?.matches(":disabled, [aria-disabled='true']") === true
-    );
-    setButtonHost(host && control?.matches(BUTTON) === true);
-    if (!disabledChild) setOwnTabStop(childProps.tabIndex !== void 0 || hasNativeTabStop(node));
-  });
-  const madeFocusable = disabledChild || !ownTabStop;
-  const generatedId = React48.useId();
-  const controlId = typeof childProps.id === "string" ? childProps.id : generatedId;
-  return /* @__PURE__ */ jsx27(
+var BUTTON = 'button:not([role]), [role="button"]';
+function TooltipTrigger(props) {
+  const { children } = props;
+  const { isOpen, triggerRef, contentId, scheduleOpen, scheduleClose, close } = useTooltipRootContext("Tooltip.Trigger");
+  const pressedRef = React45.useRef(false);
+  const childProps = children.props;
+  const inheritedDisabled = useInheritedDisabled();
+  const [domDisabled, setDomDisabled] = React45.useState(false);
+  const disabledChild = childProps.disabled === true || inheritedDisabled && domDisabled;
+  const [ownTabStop, setOwnTabStop] = React45.useState(true);
+  const [buttonHost, setButtonHost] = React45.useState(false);
+  React45.useLayoutEffect(() => {
+    const node = triggerRef.current;
+    if (!node) return;
+    const host = node.hasAttribute("data-disabled-host");
+    const control = host ? node.firstElementChild : node;
+    setDomDisabled(
+      inheritedDisabled && control?.matches(":disabled, [aria-disabled='true']") === true
+    );
+    setButtonHost(host && control?.matches(BUTTON) === true);
+    if (!disabledChild) setOwnTabStop(childProps.tabIndex !== void 0 || hasNativeTabStop(node));
+  });
+  const madeFocusable = disabledChild || !ownTabStop;
+  const generatedId = React45.useId();
+  const controlId = typeof childProps.id === "string" ? childProps.id : generatedId;
+  return /* @__PURE__ */ jsx27(
     FloatingTrigger,
     {
       ...props,
@@ -5461,7 +5266,7 @@ function TooltipTrigger(props) {
             className: Tooltip_default.disabledHost,
             "data-disabled-host": "",
             ...buttonHost ? { role: "button", "aria-disabled": "true", "aria-labelledby": controlId } : null,
-            children: buttonHost ? React48.cloneElement(
+            children: buttonHost ? React45.cloneElement(
               children,
               {
                 id: controlId,
@@ -5551,40 +5356,235 @@ var Tooltip = {
   Content: TooltipContent
 };
 
-// src/components/skeleton/Skeleton.module.css
-var Skeleton_default = {
-  root: "Skeleton_root",
-  primeSkeletonPulse: "Skeleton_primeSkeletonPulse",
-  line: "Skeleton_line"
-};
-
-// src/components/skeleton/Skeleton.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
-function Skeleton({
-  shape = "text",
-  size: sizeProp,
-  lines = 1,
-  className,
-  ...rest
-}) {
-  const size = useControlSize(sizeProp);
-  const count = shape === "text" ? Math.max(1, Math.floor(lines)) : 0;
-  return /* @__PURE__ */ jsx28(
-    "span",
-    {
-      "aria-hidden": "true",
-      ...rest,
-      className: cx(fieldTierClass, Skeleton_default.root, className),
-      ...toDataAttributes({ shape, size }),
-      children: Array.from({ length: count }, (_, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: identical placeholder lines
-        /* @__PURE__ */ jsx28("span", { className: Skeleton_default.line }, index)
-      ))
-    }
-  );
-}
+// src/components/popover/Popover.tsx
+import * as React48 from "react";
 
-// src/components/progress-bar/ProgressBar.tsx
+// src/internal/overlay/useAnchorName.ts
+import * as React46 from "react";
+var CONTROL = "button, a[href], input, select, textarea, [tabindex]";
+function useAnchorName(open, named, anchorRef) {
+  const [name, setName] = React46.useState({});
+  React46.useLayoutEffect(() => {
+    if (!open || named) return;
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    const control = anchor.matches(CONTROL) ? anchor : getFocusable(anchor)[0] ?? anchor;
+    const next = control.id ? { id: control.id } : {
+      label: control.getAttribute("aria-label") ?? (control.textContent?.trim() || void 0)
+    };
+    setName((current) => current.id === next.id && current.label === next.label ? current : next);
+  }, [open, named, anchorRef]);
+  if (named) return {};
+  return name.id ? { "aria-labelledby": name.id } : { "aria-label": name.label };
+}
+
+// src/internal/overlay/useOpenState.ts
+import * as React47 from "react";
+function useOpenState({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false
+}) {
+  const [isOpen, setIsOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const disabledRef = React47.useRef(disabled);
+  disabledRef.current = disabled;
+  const setOpen = React47.useCallback(
+    (next) => {
+      setIsOpen((current) => {
+        const value = typeof next === "function" ? next(current && !disabledRef.current) : next;
+        return value && disabledRef.current ? current : value;
+      });
+    },
+    [setIsOpen]
+  );
+  return [isOpen && !disabled, setOpen];
+}
+
+// src/components/popover/Popover.module.css
+var Popover_default = {
+  content: "Popover_content",
+  header: "Popover_header",
+  title: "Popover_title",
+  description: "Popover_description",
+  actions: "Popover_actions"
+};
+
+// src/components/popover/Popover.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+var [PopoverProvider, usePopoverContext] = createComponentContext("Popover");
+function PopoverRoot({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  closeOnOutsideClick = true,
+  closeOnEscape = true,
+  openOnArrow = false,
+  children
+}) {
+  const [isOpen, setOpen] = useOpenState({ open, defaultOpen, onOpenChange });
+  const id = React48.useId();
+  const triggerRef = React48.useRef(null);
+  const anchoredRef = React48.useRef(false);
+  const value = React48.useMemo(
+    () => ({
+      isOpen,
+      setOpen,
+      triggerId: `${id}-trigger`,
+      contentId: `${id}-content`,
+      triggerRef,
+      closeOnOutsideClick,
+      closeOnEscape,
+      openOnArrow,
+      anchoredRef
+    }),
+    [isOpen, setOpen, id, closeOnOutsideClick, closeOnEscape, openOnArrow]
+  );
+  return /* @__PURE__ */ jsx28(PopoverProvider, { value, children });
+}
+PopoverRoot.displayName = "Popover.Root";
+function PopoverTrigger(props) {
+  const { isOpen, setOpen, triggerId, contentId, triggerRef, openOnArrow } = usePopoverContext("Popover.Trigger");
+  return /* @__PURE__ */ jsx28(
+    FloatingTrigger,
+    {
+      ...props,
+      triggerProps: {
+        ref: triggerRef,
+        id: triggerId,
+        "aria-haspopup": "dialog",
+        "aria-controls": isOpen ? contentId : void 0,
+        ...floatingTriggerProps({ open: isOpen, setOpen, openOnArrow })
+      }
+    }
+  );
+}
+PopoverTrigger.displayName = "Popover.Trigger";
+function PopoverAnchor({ children }) {
+  const { triggerRef, anchoredRef } = usePopoverContext("Popover.Anchor");
+  anchoredRef.current = true;
+  return /* @__PURE__ */ jsx28(Slot, { ref: triggerRef, children });
+}
+PopoverAnchor.displayName = "Popover.Anchor";
+function PopoverClose({ children }) {
+  const { setOpen } = usePopoverContext("Popover.Close");
+  return /* @__PURE__ */ jsx28(Slot, { onClick: () => setOpen(false), children });
+}
+PopoverClose.displayName = "Popover.Close";
+function PopoverContent({
+  side = DEFAULT_SIDE,
+  align = DEFAULT_ALIGN,
+  size = OVERLAY_CONTENT_SIZE,
+  width = "auto",
+  trapFocus = false,
+  initialFocus,
+  flush = false,
+  className,
+  children,
+  ...rest
+}) {
+  const {
+    isOpen,
+    setOpen,
+    triggerRef,
+    contentId,
+    closeOnOutsideClick,
+    closeOnEscape,
+    anchoredRef
+  } = usePopoverContext("Popover.Content");
+  const floating = useFloatingLayer({
+    open: isOpen,
+    onOpenChange: setOpen,
+    triggerRef,
+    side,
+    align,
+    matchAnchorWidth: width === "trigger" || width === "min-trigger",
+    closeOnEscape,
+    closeOnOutsideClick,
+    focusOnOpen: initialFocus ?? !anchoredRef.current,
+    trap: trapFocus,
+    tabExit: "edges",
+    // A panel driven by typing in its anchor stays next to the field.
+    sheet: !anchoredRef.current
+  });
+  const [titleId, setTitleId] = React48.useState(null);
+  const [descriptionId, setDescriptionId] = React48.useState(null);
+  const fallbackId = `${contentId}-title`;
+  const fallbackDescriptionId = `${contentId}-description`;
+  const slots = React48.useMemo(
+    () => ({ fallbackId, fallbackDescriptionId, setTitleId, setDescriptionId }),
+    [fallbackId, fallbackDescriptionId]
+  );
+  const anchorName = useAnchorName(isOpen, titleId !== null, triggerRef);
+  return /* @__PURE__ */ jsx28(
+    FloatingPanel,
+    {
+      ...rest,
+      floating,
+      size,
+      width,
+      scroll: true,
+      id: contentId,
+      role: "dialog",
+      "aria-modal": false,
+      ...anchorName,
+      "aria-labelledby": titleId ?? anchorName["aria-labelledby"],
+      "aria-describedby": descriptionId ?? void 0,
+      tabIndex: -1,
+      "data-flush": flush || void 0,
+      className: cx(fieldTierClass, Popover_default.content, className),
+      children: /* @__PURE__ */ jsx28(PopoverSlotsContext.Provider, { value: slots, children })
+    }
+  );
+}
+PopoverContent.displayName = "Popover.Content";
+var PopoverSlotsContext = React48.createContext(null);
+function useSlotId(id, kind) {
+  const slots = React48.useContext(PopoverSlotsContext);
+  const resolved = id ?? (kind === "title" ? slots?.fallbackId : slots?.fallbackDescriptionId);
+  const register = kind === "title" ? slots?.setTitleId : slots?.setDescriptionId;
+  React48.useLayoutEffect(() => {
+    if (!register || !resolved) return;
+    register(resolved);
+    return () => register(null);
+  }, [register, resolved]);
+  return resolved;
+}
+function PopoverHeader({ className, ...rest }) {
+  return /* @__PURE__ */ jsx28("div", { className: cx(Popover_default.header, className), ...rest });
+}
+PopoverHeader.displayName = "Popover.Header";
+function PopoverTitle({ className, id, ...rest }) {
+  const resolvedId = useSlotId(id, "title");
+  return /* @__PURE__ */ jsx28("h2", { id: resolvedId, className: cx(Popover_default.title, className), ...rest });
+}
+PopoverTitle.displayName = "Popover.Title";
+function PopoverDescription({ className, id, ...rest }) {
+  const resolvedId = useSlotId(id, "description");
+  return /* @__PURE__ */ jsx28("p", { id: resolvedId, className: cx(Popover_default.description, className), ...rest });
+}
+PopoverDescription.displayName = "Popover.Description";
+function PopoverActions({ className, ...rest }) {
+  return /* @__PURE__ */ jsx28("div", { className: cx(Popover_default.actions, className), ...rest });
+}
+PopoverActions.displayName = "Popover.Actions";
+var Popover = {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger,
+  Anchor: PopoverAnchor,
+  Content: PopoverContent,
+  Header: PopoverHeader,
+  Title: PopoverTitle,
+  Description: PopoverDescription,
+  Actions: PopoverActions,
+  Close: PopoverClose
+};
+
+// src/components/progress-bar/ProgressBar.tsx
 import * as React50 from "react";
 
 // src/internal/ProgressLegend.module.css
@@ -7311,1388 +7311,1388 @@ var EmptyPage = {
   RetryButton: EmptyPageRetryButton
 };
 
-// src/internal/swatch.tsx
-import * as React59 from "react";
+// src/components/select/Select.tsx
+import * as React62 from "react";
 
-// src/hooks/useElementSize.ts
+// src/hooks/useLoadMore.ts
 import * as React58 from "react";
-var rounded = (width, height) => ({
-  width: Math.round(width),
-  height: Math.round(height)
-});
-var sizeOf = (element) => {
-  const rect = element.getBoundingClientRect();
-  return rounded(rect.width, rect.height);
-};
-var entrySize = (entry) => {
-  const box = entry.borderBoxSize?.[0];
-  return box ? rounded(box.inlineSize, box.blockSize) : rounded(entry.contentRect.width, entry.contentRect.height);
-};
-var sameSize = (a, b) => a === b || a !== null && b !== null && a.width === b.width && a.height === b.height;
-function useRefNode(ref, enabled, subscribe) {
-  const subscribeRef = React58.useRef(subscribe);
-  const active2 = React58.useRef(null);
+var LIST_ROOT_MARGIN = "0px 0px 48px 0px";
+var NONE2 = /* @__PURE__ */ Symbol("none");
+function useLoadMore({
+  enabled,
+  onLoadMore,
+  scrollRef,
+  round,
+  rootMargin = LIST_ROOT_MARGIN
+}) {
+  const sentinelRef = React58.useRef(null);
+  const handlerRef = React58.useRef(onLoadMore);
+  handlerRef.current = onLoadMore;
+  const askedIn = React58.useRef(NONE2);
   React58.useLayoutEffect(() => {
-    subscribeRef.current = subscribe;
-    const node = enabled ? ref.current : null;
-    if (active2.current?.node === node) return;
-    active2.current?.stop();
-    active2.current = node ? { node, stop: subscribeRef.current(node) } : null;
-  });
-  React58.useLayoutEffect(
-    () => () => {
-      active2.current?.stop();
-      active2.current = null;
-    },
-    []
-  );
-}
-function useElementSize(ref, { enabled = true } = {}) {
-  const [size, setSize] = React58.useState(null);
-  useRefNode(ref, enabled, (node) => {
-    const update = (next) => setSize((prev) => sameSize(prev, next) ? prev : next);
-    update(sizeOf(node));
-    if (typeof ResizeObserver === "undefined") return () => update(null);
-    const observer = new ResizeObserver(([entry]) => update(entry ? entrySize(entry) : null));
-    observer.observe(node);
-    return () => {
-      observer.disconnect();
-      update(null);
-    };
-  });
-  return size;
+    if (!enabled) askedIn.current = NONE2;
+  }, [enabled]);
+  const request = React58.useCallback(() => {
+    if (!enabled || Object.is(askedIn.current, round)) return;
+    askedIn.current = round;
+    void handlerRef.current?.();
+  }, [enabled, round]);
+  React58.useEffect(() => {
+    const root = scrollRef.current;
+    const target = sentinelRef.current;
+    if (!enabled || !root || !target || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) request();
+      },
+      { root, rootMargin, threshold: 0 }
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [enabled, request, rootMargin, scrollRef]);
+  return { sentinelRef, request };
 }
-function useResizeEffect(ref, onResize, { enabled = true, children = false } = {}) {
-  const callback = React58.useRef(onResize);
-  React58.useLayoutEffect(() => {
-    callback.current = onResize;
-  });
-  useRefNode(ref, enabled, (node) => {
-    if (typeof ResizeObserver === "undefined") return () => {
-    };
-    const observer = new ResizeObserver(() => callback.current());
-    const observeAll = () => {
-      observer.observe(node);
-      if (children) for (const child of Array.from(node.children)) observer.observe(child);
-    };
-    observeAll();
-    const mutation = children ? new MutationObserver(observeAll) : null;
-    mutation?.observe(node, { childList: true });
-    return () => {
-      mutation?.disconnect();
-      observer.disconnect();
-    };
-  });
+
+// src/internal/MenuGroup.tsx
+import * as React59 from "react";
+import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
+function MenuGroup({ label, className, children, ...rest }) {
+  const labelId = React59.useId();
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: role="group" inside a menu / listbox; <fieldset> is not allowed there
+    /* @__PURE__ */ jsxs23(
+      "div",
+      {
+        ...rest,
+        role: "group",
+        "aria-labelledby": label != null ? labelId : void 0,
+        className: cx(menu_default.group, className),
+        children: [
+          label != null ? /* @__PURE__ */ jsx38("div", { id: labelId, role: "presentation", className: cx(textRole_default.caption, menu_default.groupLabel), children: label }) : null,
+          children
+        ]
+      }
+    )
+  );
 }
 
-// src/internal/swatch.module.css
-var swatch_default = {
-  fill: "swatch_fill",
-  checker: "swatch_checker",
-  checkerboard: "swatch_checkerboard",
-  hueFill: "swatch_hueFill",
-  tier: "swatch_tier",
-  grid: "swatch_grid",
-  chip: "swatch_chip",
-  swatch: "swatch_swatch",
-  trigger: "swatch_trigger",
-  check: "swatch_check"
+// src/components/select/Select.module.css
+var Select_default = {
+  trigger: "Select_trigger",
+  triggerMain: "Select_triggerMain",
+  value: "Select_value",
+  valueBody: "Select_valueBody",
+  triggerIcon: "Select_triggerIcon",
+  chevron: "Select_chevron",
+  clear: "Select_clear",
+  content: "Select_content",
+  listbox: "Select_listbox",
+  search: "Select_search",
+  group: "Select_group",
+  separator: "Select_separator",
+  actions: "Select_actions",
+  item: "Select_item",
+  itemText: "Select_itemText",
+  itemTitle: "Select_itemTitle",
+  itemDescription: "Select_itemDescription",
+  itemMeta: "Select_itemMeta",
+  media: "Select_media",
+  segment: "Select_segment",
+  segmentTrigger: "Select_segmentTrigger"
 };
 
-// src/internal/swatch.tsx
-import { Fragment as Fragment15, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
-var COLOR_PRESETS = [
-  { value: "#ef4444", label: "\u041A\u0440\u0430\u0441\u043D\u044B\u0439" },
-  { value: "#f97316", label: "\u041E\u0440\u0430\u043D\u0436\u0435\u0432\u044B\u0439" },
-  { value: "#eab308", label: "\u0416\u0451\u043B\u0442\u044B\u0439" },
-  { value: "#22c55e", label: "\u0417\u0435\u043B\u0451\u043D\u044B\u0439" },
-  { value: "#14b8a6", label: "\u0411\u0438\u0440\u044E\u0437\u043E\u0432\u044B\u0439" },
-  { value: "#5068f5", label: "\u0421\u0438\u043D\u0438\u0439" },
-  { value: "#a855f7", label: "\u0424\u0438\u043E\u043B\u0435\u0442\u043E\u0432\u044B\u0439" },
-  { value: "#ec4899", label: "\u0420\u043E\u0437\u043E\u0432\u044B\u0439" },
-  { value: "#b91c1c", label: "\u0422\u0451\u043C\u043D\u043E-\u043A\u0440\u0430\u0441\u043D\u044B\u0439" },
-  { value: "#c2410c", label: "\u0422\u0451\u043C\u043D\u043E-\u043E\u0440\u0430\u043D\u0436\u0435\u0432\u044B\u0439" },
-  { value: "#a16207", label: "\u0413\u043E\u0440\u0447\u0438\u0447\u043D\u044B\u0439" },
-  { value: "#15803d", label: "\u0422\u0451\u043C\u043D\u043E-\u0437\u0435\u043B\u0451\u043D\u044B\u0439" },
-  { value: "#0f766e", label: "\u0422\u0451\u043C\u043D\u043E-\u0431\u0438\u0440\u044E\u0437\u043E\u0432\u044B\u0439" },
-  { value: "#2f4ae0", label: "\u0422\u0451\u043C\u043D\u043E-\u0441\u0438\u043D\u0438\u0439" },
-  { value: "#7e22ce", label: "\u0422\u0451\u043C\u043D\u043E-\u0444\u0438\u043E\u043B\u0435\u0442\u043E\u0432\u044B\u0439" },
-  { value: "#be185d", label: "\u0422\u0451\u043C\u043D\u043E-\u0440\u043E\u0437\u043E\u0432\u044B\u0439" }
-];
-var PALETTE_COLOR_NAMES = {
-  gray: "\u0421\u0435\u0440\u044B\u0439",
-  red: "\u041A\u0440\u0430\u0441\u043D\u044B\u0439",
-  orange: "\u041E\u0440\u0430\u043D\u0436\u0435\u0432\u044B\u0439",
-  yellow: "\u0416\u0451\u043B\u0442\u044B\u0439",
-  green: "\u0417\u0435\u043B\u0451\u043D\u044B\u0439",
-  teal: "\u0411\u0438\u0440\u044E\u0437\u043E\u0432\u044B\u0439",
-  sky: "\u0413\u043E\u043B\u0443\u0431\u043E\u0439",
-  blue: "\u0421\u0438\u043D\u0438\u0439",
-  purple: "\u0424\u0438\u043E\u043B\u0435\u0442\u043E\u0432\u044B\u0439",
-  pink: "\u0420\u043E\u0437\u043E\u0432\u044B\u0439"
-};
-var PALETTE_ORDER = Object.keys(PALETTE_COLOR_NAMES);
-function useSwatchOptions(presets, allowEmpty, emptyLabel) {
-  return React59.useMemo(
-    () => [
-      ...presets.map((preset) => ({ ...preset, contrast: markContrast(preset.value) })),
-      ...allowEmpty ? [{ value: null, label: emptyLabel, contrast: "surface" }] : []
-    ],
-    [presets, allowEmpty, emptyLabel]
-  );
+// src/components/select/SelectItem.tsx
+import * as React61 from "react";
+
+// src/internal/nodeText.ts
+import * as React60 from "react";
+function nodeText(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(nodeText).join("");
+  if (React60.isValidElement(node)) {
+    return nodeText(node.props.children);
+  }
+  return "";
 }
-function usePaletteOptions(palette, allowEmpty, emptyLabel, names) {
-  return React59.useMemo(
-    () => [
-      ...palette.map((hue) => ({ value: hue, label: names[hue], contrast: "hue" })),
-      ...allowEmpty ? [{ value: null, label: emptyLabel, contrast: "surface" }] : []
-    ],
-    [palette, allowEmpty, emptyLabel, names]
-  );
+
+// src/components/select/selectContext.ts
+var normalize = (text) => text.trim().toLocaleLowerCase();
+var [SelectProvider, useSelectContext] = createComponentContext("Select");
+
+// src/components/select/SelectItem.tsx
+import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+function SelectItemIcon({ className, ...rest }) {
+  return /* @__PURE__ */ jsx39("span", { "aria-hidden": "true", className: cx(menu_default.itemIcon, iconSlotClass, className), ...rest });
 }
-var swatchClass = cx(swatch_default.swatch, press_default.press);
-var swatchTriggerClass = cx(swatch_default.trigger, press_default.press);
-var swatchTierClass = cx(fieldTierClass, swatch_default.tier);
-var swatchGridClass = swatch_default.grid;
-var checkerboardClass = swatch_default.checkerboard;
-function SwatchFill({ value, hue = false }) {
-  if (value == null) return /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: swatch_default.checker });
-  if (hue) return /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: cx(swatch_default.fill, swatch_default.hueFill) });
-  return /* @__PURE__ */ jsx38("svg", { className: swatch_default.fill, "aria-hidden": "true", viewBox: "0 0 1 1", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx38("rect", { width: "1", height: "1", fill: value }) });
+SelectItemIcon.displayName = "Select.ItemIcon";
+var OptionQueryContext = React61.createContext("");
+function SelectItemText({ children, className, ...rest }) {
+  const query = React61.useContext(OptionQueryContext);
+  return /* @__PURE__ */ jsx39("span", { ...rest, className: cx(Select_default.itemTitle, className), children: highlightChildren(children, query) });
 }
-function SwatchContent({
-  value,
-  selected,
-  hue = false
+SelectItemText.displayName = "Select.ItemText";
+function SelectItemDescription({
+  children,
+  className,
+  ...rest
 }) {
-  return /* @__PURE__ */ jsxs23(Fragment15, { children: [
-    /* @__PURE__ */ jsx38(SwatchFill, { value, hue }),
-    /* @__PURE__ */ jsx38(CheckMark, { state: selected ? "checked" : "unchecked", className: swatch_default.check })
-  ] });
-}
-function SwatchChip({ value, className, ...rest }) {
-  return /* @__PURE__ */ jsx38("span", { ...rest, "aria-hidden": true, className: cx(swatch_default.chip, className), children: /* @__PURE__ */ jsx38(SwatchFill, { value }) });
+  const query = React61.useContext(OptionQueryContext);
+  return /* @__PURE__ */ jsx39("span", { ...rest, className: cx(Select_default.itemDescription, className), children: highlightChildren(children, query) });
 }
-function parseHexColor(text) {
-  const hex = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(text.trim())?.[1]?.toLowerCase();
-  if (!hex) return null;
-  return `#${hex.length === 3 ? [...hex].map((c) => c + c).join("") : hex}`;
-}
-function sameColor(a, b) {
-  return (a ?? "").trim().toLowerCase() === (b ?? "").trim().toLowerCase();
+SelectItemDescription.displayName = "Select.ItemDescription";
+function SelectItemMeta({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx39("span", { ...rest, className: cx(Select_default.itemMeta, className), children });
 }
-function colorToRgb(value) {
-  const input = value.trim().toLowerCase();
-  const hex = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(input)?.[1];
-  if (hex) {
-    const full = hex.length <= 4 ? [...hex].map((c) => c + c).join("") : hex;
-    return [0, 2, 4].map((i) => Number.parseInt(full.slice(i, i + 2), 16));
-  }
-  const fn = /^(rgba?|hsla?)\(([^)]+)\)$/.exec(input);
-  if (!fn) return null;
-  const parts = fn[2].split(/[\s,/]+/).filter(Boolean);
-  if (parts.length < 3) return null;
-  const num = (part, scale) => part.endsWith("%") ? Number.parseFloat(part) / 100 * scale : Number.parseFloat(part);
-  if (fn[1].startsWith("rgb")) {
-    const rgb = parts.slice(0, 3).map((part) => num(part, 255));
-    return rgb.every(Number.isFinite) ? rgb : null;
-  }
-  const h = Number.parseFloat(parts[0]);
-  const s = num(parts[1], 1);
-  const l = num(parts[2], 1);
-  if (![h, s, l].every(Number.isFinite)) return null;
-  const a = s * Math.min(l, 1 - l);
-  const channel = (n) => {
-    const k = (n + h / 30) % 12;
-    return 255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1)));
+SelectItemMeta.displayName = "Select.ItemMeta";
+function splitItemChildren(children) {
+  const parts = {
+    leading: [],
+    body: [],
+    meta: [],
+    rich: false,
+    title: "",
+    description: ""
   };
-  return [channel(0), channel(8), channel(4)];
+  let plain = "";
+  for (const child of React61.Children.toArray(children)) {
+    if (!React61.isValidElement(child)) {
+      plain += nodeText(child);
+      parts.body.push(child);
+    } else if (child.type === React61.Fragment) {
+      const inner = splitItemChildren(child.props.children);
+      parts.leading.push(...inner.leading);
+      parts.body.push(...inner.body);
+      parts.meta.push(...inner.meta);
+      parts.rich ||= inner.rich;
+      parts.title ||= inner.title;
+      parts.description ||= inner.description;
+      plain += inner.title;
+    } else if (child.type === SelectItemIcon || child.type === Avatar.Root) {
+      parts.leading.push(child);
+    } else if (child.type === Thumbnail.Root) {
+      parts.leading.push(child);
+      parts.rich = true;
+    } else if (child.type === SelectItemMeta || child.type === Badge.Root) {
+      parts.meta.push(child);
+    } else {
+      if (child.type === SelectItemText) parts.title = nodeText(child.props.children);
+      if (child.type === SelectItemDescription) {
+        parts.description = nodeText(child.props.children);
+        parts.rich = true;
+      }
+      parts.body.push(child);
+    }
+  }
+  parts.title = (parts.title || plain).trim();
+  return parts;
 }
-function markContrast(value) {
-  const rgb = colorToRgb(value);
-  if (!rgb) return "dark";
-  const lin = (c) => {
-    const s = c / 255;
-    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
-  };
-  const l = 0.2126 * lin(rgb[0]) + 0.7152 * lin(rgb[1]) + 0.0722 * lin(rgb[2]);
-  return l > 0.179 ? "dark" : "light";
-}
-function balancedColumns(count, width, cell, gap) {
-  if (count < 1 || width <= 0 || cell <= 0) return Math.max(1, count);
-  const fit = Math.max(1, Math.floor((width + gap) / (cell + gap)));
-  const rows = Math.ceil(count / Math.min(count, fit));
-  return Math.ceil(count / rows);
-}
-function useBalancedColumns(gridRef, count, cellSelector) {
-  const [columns, setColumns] = React59.useState();
-  const measure = React59.useCallback(() => {
-    const grid = gridRef.current;
-    if (!grid) return;
-    const cell = grid.querySelector(cellSelector)?.offsetHeight ?? 0;
-    const gap = Number.parseFloat(getComputedStyle(grid).columnGap) || 0;
-    setColumns(cell > 0 ? balancedColumns(count, grid.clientWidth, cell, gap) : void 0);
-  }, [gridRef, count, cellSelector]);
-  React59.useLayoutEffect(measure, [measure]);
-  useResizeEffect(gridRef, measure);
-  return columns;
+function sizeMedia(leading, size) {
+  return leading.map(
+    (node) => React61.isValidElement(node) && (node.type === Thumbnail.Root || node.type === Avatar.Root) ? React61.cloneElement(node, {
+      size: node.props.size ?? tierMappings.rowMedia[size],
+      className: cx(Select_default.media, node.props.className),
+      "aria-hidden": true
+    }) : node
+  );
 }
-function firstRowLength(items) {
-  const top = items[0]?.offsetTop;
-  const count = items.findIndex((item) => !item || item.offsetTop !== top);
-  return Math.max(1, count === -1 ? items.length : count);
+function SelectItem({
+  value,
+  label,
+  keywords,
+  disabled = false,
+  className,
+  children,
+  onClick: onClick2,
+  onMouseMove,
+  ref,
+  ...rest
+}) {
+  const { multiple, size, selected, highlight, pick, registry, listboxId, query, filter } = useSelectContext();
+  const parts = splitItemChildren(children);
+  const resolvedLabel = label || parts.title || value;
+  const haystack = normalize(`${resolvedLabel} ${parts.description} ${keywords ?? ""}`);
+  const isSelected = selected.includes(value);
+  const isHighlighted = useStoreSlice(highlight, (current) => current === value);
+  const nodeRef = React61.useRef(null);
+  const setRefs = useMergedRefs(nodeRef, ref);
+  useListboxItem(
+    registry,
+    value,
+    { label: resolvedLabel, haystack, disabled, onActivate: () => pick(value) },
+    nodeRef
+  );
+  const search = normalize(query);
+  if (filter && search !== "" && !haystack.includes(search)) return null;
+  return (
+    // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the listbox / search (aria-activedescendant)
+    // biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard is handled on the listbox
+    /* @__PURE__ */ jsxs24(
+      "div",
+      {
+        ...rest,
+        ref: setRefs,
+        id: optionDomId(listboxId, value),
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": disabled || void 0,
+        className: cx(menu_default.item, Select_default.item, className),
+        onClick: (event) => {
+          onClick2?.(event);
+          if (!event.defaultPrevented) registry.activate(value);
+        },
+        onMouseMove: (event) => {
+          onMouseMove?.(event);
+          if (!disabled && !isHighlighted) highlight.set(value);
+        },
+        ...toDataAttributes({
+          value,
+          selected: isSelected,
+          highlighted: isHighlighted,
+          disabled,
+          rich: parts.rich || void 0
+        }),
+        children: [
+          multiple ? /* @__PURE__ */ jsx39(Checkbox.Indicator, { checked: isSelected, disabled, size: stepDown(size) }) : null,
+          sizeMedia(parts.leading, size),
+          /* @__PURE__ */ jsx39("span", { className: Select_default.itemText, children: /* @__PURE__ */ jsx39(OptionQueryContext.Provider, { value: query, children: highlightChildren(parts.body, query) }) }),
+          parts.meta,
+          multiple ? null : /* @__PURE__ */ jsx39("span", { className: menu_default.check, "aria-hidden": "true", children: isSelected ? /* @__PURE__ */ jsx39(Icon, { name: "action.check" }) : null })
+        ]
+      }
+    )
+  );
 }
-function useSwatchGrid(count) {
-  const items = React59.useRef([]);
-  const itemRef = React59.useCallback(
-    (index) => (node) => {
-      items.current[index] = node;
+SelectItem.displayName = "Select.Item";
+var ACTION_PREFIX = "__prime_select_action";
+var isActionValue = (value) => value.startsWith(ACTION_PREFIX);
+function SelectAction({
+  onSelect,
+  disabled = false,
+  className,
+  children,
+  onClick: onClick2,
+  onMouseMove,
+  ref,
+  ...rest
+}) {
+  const { highlight, listboxId, setOpen, size, registry } = useSelectContext();
+  const value = `${ACTION_PREFIX}${React61.useId()}`;
+  const isHighlighted = useStoreSlice(highlight, (current) => current === value);
+  const parts = splitItemChildren(children);
+  const nodeRef = React61.useRef(null);
+  const setRefs = useMergedRefs(nodeRef, ref);
+  useListboxItem(
+    registry,
+    value,
+    {
+      label: parts.title,
+      haystack: "",
+      disabled,
+      persistent: true,
+      onActivate: () => {
+        onSelect();
+        setOpen(false);
+      }
     },
-    []
+    nodeRef
   );
-  const move = React59.useCallback(
-    (event, from, columns) => {
-      const focused = document.activeElement;
-      const current = focused instanceof HTMLElement ? items.current.indexOf(focused) : -1;
-      const next = gridIndex(
-        event.key,
-        current === -1 ? from : current,
-        count,
-        columns ?? firstRowLength(items.current)
-      );
-      if (next === null) return null;
-      event.preventDefault();
-      items.current[next]?.focus();
-      return next;
-    },
-    [count]
+  return (
+    // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the listbox / search (aria-activedescendant)
+    // biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard is handled on the listbox
+    /* @__PURE__ */ jsxs24(
+      "div",
+      {
+        ...rest,
+        ref: setRefs,
+        id: optionDomId(listboxId, value),
+        role: "option",
+        "aria-disabled": disabled || void 0,
+        className: cx(menu_default.item, className),
+        onClick: (event) => {
+          onClick2?.(event);
+          if (!event.defaultPrevented) registry.activate(value);
+        },
+        onMouseMove: (event) => {
+          onMouseMove?.(event);
+          if (!disabled && !isHighlighted) highlight.set(value);
+        },
+        ...toDataAttributes({
+          value,
+          action: true,
+          highlighted: isHighlighted,
+          disabled
+        }),
+        children: [
+          sizeMedia(parts.leading, size),
+          /* @__PURE__ */ jsx39("span", { className: Select_default.itemText, children: parts.body })
+        ]
+      }
+    )
   );
-  const focus = React59.useCallback((index) => {
-    items.current[index]?.focus({ preventScroll: true });
-  }, []);
-  return { itemRef, move, focus };
 }
+SelectAction.displayName = "Select.Action";
 
-// src/components/color-swatches/ColorSwatches.tsx
-import * as React60 from "react";
-
-// src/components/color-swatches/ColorSwatches.module.css
-var ColorSwatches_default = {
-  grid: "ColorSwatches_grid"
-};
-
-// src/components/color-swatches/ColorSwatches.tsx
-import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
-var COLOR_SWATCHES_LABELS = {
-  group: "\u0426\u0432\u0435\u0442",
-  empty: "\u0411\u0435\u0437 \u0446\u0432\u0435\u0442\u0430",
+// src/components/select/Select.tsx
+import { Fragment as Fragment16, jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
+var SELECT_LABELS = {
+  search: "\u041F\u043E\u0438\u0441\u043A",
+  empty: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E",
+  emptyHint: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u0437\u0430\u043F\u0440\u043E\u0441",
+  loading: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026",
+  retry: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C",
+  clear: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
   optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E",
-  colorNames: PALETTE_COLOR_NAMES
+  changeFailed: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C \u0432\u044B\u0431\u043E\u0440"
 };
-function ColorSwatches(props) {
+function SelectRoot(props) {
   const {
-    mode,
-    value,
-    defaultValue,
-    onValueChange,
-    presets = COLOR_PRESETS,
-    palette = PALETTE_ORDER,
+    size: sizeProp,
+    label,
+    required = false,
+    optional,
+    hint,
+    hintTone,
+    error,
+    invalid,
+    focusRing,
+    disabled: disabledProp = false,
+    placeholder,
+    id,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    closeOnEscape = true,
+    closeOnOutsideClick = true,
+    clearable = false,
+    name,
+    search,
+    defaultSearch = "",
+    onSearchChange,
+    filter = true,
+    loading = false,
+    loadingMore = false,
+    hasMore = false,
+    onLoadMore,
+    loadError,
+    onRetry,
+    labels: labelsProp,
+    className,
+    children,
+    multiple: _multiple,
+    value: _value,
+    defaultValue: _defaultValue,
+    onValueChange: _onValueChange,
+    "aria-label": ariaLabel,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx39(
-    SwatchGrid,
-    {
-      ...rest,
-      hues: mode === "palette",
-      presets,
-      palette,
-      value,
-      defaultValue: defaultValue ?? null,
-      onValueChange
+  const multiple = props.multiple === true;
+  const tier = useHostTier(sizeProp);
+  const { size } = tier;
+  const disabled = useInheritedDisabled(disabledProp);
+  const labels = useLabels(SELECT_LABELS, labelsProp);
+  const ids = useFieldFrame(id, { label, hint, error, invalid, required });
+  const [stored, setStored] = useControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? (multiple ? [] : void 0)
+  });
+  const changes = usePendingChanges(stored, takeNext);
+  const value = changes.shown;
+  const saving = changes.pending.length > 0;
+  const [announcement, setAnnouncement] = React62.useState("");
+  const onValueChange = props.onValueChange;
+  const commit = (next) => {
+    if (saving || Object.is(next, value)) return;
+    const outcome = onValueChange?.(next);
+    if (!isPromiseLike(outcome)) {
+      setStored(next);
+      return;
     }
+    setAnnouncement("");
+    changes.track(next, outcome, {
+      onResolve: () => setStored(next),
+      onReject: () => setAnnouncement(labels.changeFailed)
+    });
+  };
+  const commitRef = React62.useRef(commit);
+  commitRef.current = commit;
+  const selected = React62.useMemo(
+    () => Array.isArray(value) ? value : value ? [value] : [],
+    [value]
   );
-}
-function SwatchGrid({
-  hues,
-  presets,
-  palette,
-  value: valueProp,
-  defaultValue,
-  onValueChange,
-  size: sizeProp,
-  disabled: disabledProp = false,
-  invalid,
-  allowEmpty = false,
-  name,
-  id,
-  className,
-  label,
-  required,
-  optional,
-  hint,
-  hintTone,
-  error,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  "aria-describedby": ariaDescribedBy,
-  labels: labelsProp,
-  ...rest
-}) {
-  const size = useControlSize(sizeProp);
-  const disabled = useInheritedDisabled(disabledProp);
-  const frameSize = useControlSize(void 0);
-  const merged = useLabels(COLOR_SWATCHES_LABELS, labelsProp);
-  const labels = React60.useMemo(
+  const [isOpen, setOpen] = useOpenState({ open, defaultOpen, onOpenChange, disabled });
+  const highlight = useCreateStore(void 0);
+  const registry = useListboxRegistry();
+  const [query, setQuery] = useControllableState({
+    value: search,
+    defaultValue: defaultSearch,
+    onChange: onSearchChange
+  });
+  const triggerRef = React62.useRef(null);
+  const inSegment = React62.useContext(InputSegmentContext);
+  const segment = React62.useMemo(
+    () => inSegment ? { label: ariaLabel } : null,
+    [inSegment, ariaLabel]
+  );
+  const wasOpenRef = React62.useRef(isOpen);
+  React62.useEffect(() => {
+    if (wasOpenRef.current && !isOpen) setQuery("");
+    wasOpenRef.current = isOpen;
+  }, [isOpen, setQuery]);
+  const pick = React62.useCallback(
+    (optionValue) => {
+      if (multiple) {
+        const list = Array.isArray(value) ? value : [];
+        commitRef.current(
+          list.includes(optionValue) ? list.filter((item) => item !== optionValue) : [...list, optionValue]
+        );
+        return;
+      }
+      commitRef.current(optionValue);
+      setOpen(false);
+    },
+    [multiple, value, setOpen]
+  );
+  const clear = React62.useCallback(() => commitRef.current(multiple ? [] : ""), [multiple]);
+  const context = React62.useMemo(
     () => ({
-      ...merged,
-      colorNames: { ...COLOR_SWATCHES_LABELS.colorNames, ...labelsProp?.colorNames }
+      size,
+      invalid: ids.invalid,
+      focusRing,
+      required: ids.required,
+      disabled,
+      placeholder,
+      multiple,
+      selected,
+      registry,
+      pick,
+      clear,
+      clearable,
+      loading,
+      saving,
+      loadingMore,
+      hasMore,
+      onLoadMore,
+      loadError,
+      onRetry,
+      filter,
+      isOpen,
+      setOpen,
+      closeOnEscape,
+      closeOnOutsideClick,
+      highlight,
+      query,
+      setQuery,
+      triggerId: ids.controlId,
+      listboxId: `${ids.controlId}-listbox`,
+      describedBy: ids.describedBy,
+      triggerRef,
+      labels,
+      segment
     }),
-    [merged, labelsProp?.colorNames]
-  );
-  const [value, setValue] = useControllableState({
-    value: valueProp,
-    defaultValue,
-    onChange: onValueChange
-  });
-  const ids = useFieldFrame(id, { label, hint, error, invalid }, ariaDescribedBy);
-  const colorOptions = useSwatchOptions(presets, allowEmpty, labels.empty);
-  const hueOptions = usePaletteOptions(palette, allowEmpty, labels.empty, labels.colorNames);
-  const options = hues ? hueOptions : colorOptions;
-  const selectedIndex = options.findIndex((option) => sameColor(option.value, value));
-  const focusIndex = Math.max(0, selectedIndex);
-  const grid = useSwatchGrid(options.length);
-  const gridRef = React60.useRef(null);
-  const columns = useBalancedColumns(gridRef, options.length, "[role='radio']");
-  const labelledBy = ariaLabelledBy ?? ids.labelledBy;
-  const onKeyDown2 = (event) => {
-    const next = grid.move(event, focusIndex);
-    if (next !== null) setValue(options[next]?.value ?? null);
-  };
-  return /* @__PURE__ */ jsx39(
-    FieldFrame,
-    {
-      ...rest,
-      size: frameSize,
-      ids,
-      label,
-      required,
-      optional,
-      hint,
-      hintTone,
-      error,
+    [
+      size,
+      ids.invalid,
+      ids.controlId,
+      ids.describedBy,
+      focusRing,
+      ids.required,
       disabled,
-      optionalLabel: labels.optional,
-      group: true,
-      className,
-      children: /* @__PURE__ */ jsxs24(
+      placeholder,
+      multiple,
+      selected,
+      registry,
+      pick,
+      clear,
+      clearable,
+      loading,
+      saving,
+      loadingMore,
+      hasMore,
+      onLoadMore,
+      loadError,
+      onRetry,
+      filter,
+      isOpen,
+      setOpen,
+      closeOnEscape,
+      closeOnOutsideClick,
+      highlight,
+      query,
+      setQuery,
+      labels,
+      segment
+    ]
+  );
+  const body = /* @__PURE__ */ jsxs25(Fragment16, { children: [
+    /* @__PURE__ */ jsx40(SelectProvider, { value: context, children }),
+    name ? (selected.length > 0 || multiple ? selected : [""]).map((item) => /* @__PURE__ */ jsx40("input", { type: "hidden", name, value: item, disabled }, item)) : null,
+    /* @__PURE__ */ jsx40(VisuallyHidden, { live: "polite", children: announcement })
+  ] });
+  if (segment) {
+    return tier.provide(
+      /* @__PURE__ */ jsx40(
         "div",
         {
-          ref: gridRef,
-          id: ids.controlId,
-          role: "radiogroup",
-          "aria-label": labelledBy ? void 0 : ariaLabel ?? labels.group,
-          "aria-labelledby": labelledBy,
-          "aria-describedby": ids.describedBy,
-          "aria-required": required || void 0,
-          "aria-invalid": ids.invalid || void 0,
-          className: cx(swatchTierClass, swatchGridClass, ColorSwatches_default.grid),
-          "data-base": "control",
-          "data-stretch": "true",
-          style: {
-            "--swatch-count": options.length,
-            "--swatch-columns": columns
-          },
-          ...toDataAttributes({
-            size,
-            invalid: ids.invalid || void 0,
-            disabled: disabled || void 0
-          }),
-          onKeyDown: disabled ? void 0 : onKeyDown2,
-          children: [
-            options.map((option, index) => {
-              const selected = index === selectedIndex;
-              return (
-                // biome-ignore lint/a11y/useSemanticElements: a swatch is a styled button in a roving radiogroup; a native radio cannot carry the color fill and check mark
-                /* @__PURE__ */ jsx39(
-                  "button",
-                  {
-                    ref: grid.itemRef(index),
-                    type: "button",
-                    role: "radio",
-                    "aria-checked": selected,
-                    "aria-label": option.label,
-                    title: option.label,
-                    tabIndex: index === focusIndex ? 0 : -1,
-                    disabled,
-                    className: cx(swatchClass, hues && option.value && palette_default.hue),
-                    ...toDataAttributes({
-                      state: selected ? "checked" : "unchecked",
-                      contrast: option.contrast,
-                      color: hues ? option.value ?? void 0 : void 0
-                    }),
-                    onClick: () => setValue(option.value),
-                    children: /* @__PURE__ */ jsx39(SwatchContent, { value: option.value, selected, hue: hues })
-                  },
-                  option.value ?? "empty"
-                )
-              );
-            }),
-            name ? /* @__PURE__ */ jsx39("input", { type: "hidden", name, value: value ?? "" }) : null
-          ]
+          ...rest,
+          className: cx(Select_default.segment, className),
+          "data-field-segment": "",
+          "data-size": size,
+          children: body
         }
       )
-    }
-  );
-}
-
-// src/components/select/Select.tsx
-import * as React65 from "react";
-
-// src/hooks/useLoadMore.ts
-import * as React61 from "react";
-var LIST_ROOT_MARGIN = "0px 0px 48px 0px";
-var NONE2 = /* @__PURE__ */ Symbol("none");
-function useLoadMore({
-  enabled,
-  onLoadMore,
-  scrollRef,
-  round,
-  rootMargin = LIST_ROOT_MARGIN
-}) {
-  const sentinelRef = React61.useRef(null);
-  const handlerRef = React61.useRef(onLoadMore);
-  handlerRef.current = onLoadMore;
-  const askedIn = React61.useRef(NONE2);
-  React61.useLayoutEffect(() => {
-    if (!enabled) askedIn.current = NONE2;
-  }, [enabled]);
-  const request = React61.useCallback(() => {
-    if (!enabled || Object.is(askedIn.current, round)) return;
-    askedIn.current = round;
-    void handlerRef.current?.();
-  }, [enabled, round]);
-  React61.useEffect(() => {
-    const root = scrollRef.current;
-    const target = sentinelRef.current;
-    if (!enabled || !root || !target || typeof IntersectionObserver === "undefined") return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry?.isIntersecting) request();
-      },
-      { root, rootMargin, threshold: 0 }
     );
-    observer.observe(target);
-    return () => observer.disconnect();
-  }, [enabled, request, rootMargin, scrollRef]);
-  return { sentinelRef, request };
-}
-
-// src/internal/MenuGroup.tsx
-import * as React62 from "react";
-import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
-function MenuGroup({ label, className, children, ...rest }) {
-  const labelId = React62.useId();
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: role="group" inside a menu / listbox; <fieldset> is not allowed there
-    /* @__PURE__ */ jsxs25(
-      "div",
-      {
-        ...rest,
-        role: "group",
-        "aria-labelledby": label != null ? labelId : void 0,
-        className: cx(menu_default.group, className),
-        children: [
-          label != null ? /* @__PURE__ */ jsx40("div", { id: labelId, role: "presentation", className: cx(textRole_default.caption, menu_default.groupLabel), children: label }) : null,
-          children
-        ]
-      }
-    )
-  );
-}
-
-// src/components/select/Select.module.css
-var Select_default = {
-  trigger: "Select_trigger",
-  triggerMain: "Select_triggerMain",
-  value: "Select_value",
-  valueBody: "Select_valueBody",
-  triggerIcon: "Select_triggerIcon",
-  chevron: "Select_chevron",
-  clear: "Select_clear",
-  content: "Select_content",
-  listbox: "Select_listbox",
-  search: "Select_search",
-  group: "Select_group",
-  separator: "Select_separator",
-  actions: "Select_actions",
-  item: "Select_item",
-  itemText: "Select_itemText",
-  itemTitle: "Select_itemTitle",
-  itemDescription: "Select_itemDescription",
-  itemMeta: "Select_itemMeta",
-  media: "Select_media",
-  segment: "Select_segment",
-  segmentTrigger: "Select_segmentTrigger"
-};
-
-// src/components/select/SelectItem.tsx
-import * as React64 from "react";
-
-// src/internal/nodeText.ts
-import * as React63 from "react";
-function nodeText(node) {
-  if (typeof node === "string" || typeof node === "number") return String(node);
-  if (Array.isArray(node)) return node.map(nodeText).join("");
-  if (React63.isValidElement(node)) {
-    return nodeText(node.props.children);
-  }
-  return "";
-}
-
-// src/components/select/selectContext.ts
-var normalize = (text) => text.trim().toLocaleLowerCase();
-var [SelectProvider, useSelectContext] = createComponentContext("Select");
-
-// src/components/select/SelectItem.tsx
-import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
-function SelectItemIcon({ className, ...rest }) {
-  return /* @__PURE__ */ jsx41("span", { "aria-hidden": "true", className: cx(menu_default.itemIcon, iconSlotClass, className), ...rest });
-}
-SelectItemIcon.displayName = "Select.ItemIcon";
-var OptionQueryContext = React64.createContext("");
-function SelectItemText({ children, className, ...rest }) {
-  const query = React64.useContext(OptionQueryContext);
-  return /* @__PURE__ */ jsx41("span", { ...rest, className: cx(Select_default.itemTitle, className), children: highlightChildren(children, query) });
-}
-SelectItemText.displayName = "Select.ItemText";
-function SelectItemDescription({
-  children,
-  className,
-  ...rest
-}) {
-  const query = React64.useContext(OptionQueryContext);
-  return /* @__PURE__ */ jsx41("span", { ...rest, className: cx(Select_default.itemDescription, className), children: highlightChildren(children, query) });
-}
-SelectItemDescription.displayName = "Select.ItemDescription";
-function SelectItemMeta({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx41("span", { ...rest, className: cx(Select_default.itemMeta, className), children });
-}
-SelectItemMeta.displayName = "Select.ItemMeta";
-function splitItemChildren(children) {
-  const parts = {
-    leading: [],
-    body: [],
-    meta: [],
-    rich: false,
-    title: "",
-    description: ""
-  };
-  let plain = "";
-  for (const child of React64.Children.toArray(children)) {
-    if (!React64.isValidElement(child)) {
-      plain += nodeText(child);
-      parts.body.push(child);
-    } else if (child.type === React64.Fragment) {
-      const inner = splitItemChildren(child.props.children);
-      parts.leading.push(...inner.leading);
-      parts.body.push(...inner.body);
-      parts.meta.push(...inner.meta);
-      parts.rich ||= inner.rich;
-      parts.title ||= inner.title;
-      parts.description ||= inner.description;
-      plain += inner.title;
-    } else if (child.type === SelectItemIcon || child.type === Avatar.Root) {
-      parts.leading.push(child);
-    } else if (child.type === Thumbnail.Root) {
-      parts.leading.push(child);
-      parts.rich = true;
-    } else if (child.type === SelectItemMeta || child.type === Badge.Root) {
-      parts.meta.push(child);
-    } else {
-      if (child.type === SelectItemText) parts.title = nodeText(child.props.children);
-      if (child.type === SelectItemDescription) {
-        parts.description = nodeText(child.props.children);
-        parts.rich = true;
-      }
-      parts.body.push(child);
-    }
   }
-  parts.title = (parts.title || plain).trim();
-  return parts;
-}
-function sizeMedia(leading, size) {
-  return leading.map(
-    (node) => React64.isValidElement(node) && (node.type === Thumbnail.Root || node.type === Avatar.Root) ? React64.cloneElement(node, {
-      size: node.props.size ?? tierMappings.rowMedia[size],
-      className: cx(Select_default.media, node.props.className),
-      "aria-hidden": true
-    }) : node
-  );
-}
-function SelectItem({
-  value,
-  label,
-  keywords,
-  disabled = false,
-  className,
-  children,
-  onClick: onClick2,
-  onMouseMove,
-  ref,
-  ...rest
-}) {
-  const { multiple, size, selected, highlight, pick, registry, listboxId, query, filter } = useSelectContext();
-  const parts = splitItemChildren(children);
-  const resolvedLabel = label || parts.title || value;
-  const haystack = normalize(`${resolvedLabel} ${parts.description} ${keywords ?? ""}`);
-  const isSelected = selected.includes(value);
-  const isHighlighted = useStoreSlice(highlight, (current) => current === value);
-  const nodeRef = React64.useRef(null);
-  const setRefs = useMergedRefs(nodeRef, ref);
-  useListboxItem(
-    registry,
-    value,
-    { label: resolvedLabel, haystack, disabled, onActivate: () => pick(value) },
-    nodeRef
-  );
-  const search = normalize(query);
-  if (filter && search !== "" && !haystack.includes(search)) return null;
-  return (
-    // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the listbox / search (aria-activedescendant)
-    // biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard is handled on the listbox
-    /* @__PURE__ */ jsxs26(
-      "div",
+  return tier.provide(
+    /* @__PURE__ */ jsx40(
+      FieldFrame,
       {
         ...rest,
-        ref: setRefs,
-        id: optionDomId(listboxId, value),
-        role: "option",
-        "aria-selected": isSelected,
-        "aria-disabled": disabled || void 0,
-        className: cx(menu_default.item, Select_default.item, className),
-        onClick: (event) => {
-          onClick2?.(event);
-          if (!event.defaultPrevented) registry.activate(value);
-        },
-        onMouseMove: (event) => {
-          onMouseMove?.(event);
-          if (!disabled && !isHighlighted) highlight.set(value);
-        },
-        ...toDataAttributes({
-          value,
-          selected: isSelected,
-          highlighted: isHighlighted,
-          disabled,
-          rich: parts.rich || void 0
-        }),
-        children: [
-          multiple ? /* @__PURE__ */ jsx41(Checkbox.Indicator, { checked: isSelected, disabled, size: stepDown(size) }) : null,
-          sizeMedia(parts.leading, size),
-          /* @__PURE__ */ jsx41("span", { className: Select_default.itemText, children: /* @__PURE__ */ jsx41(OptionQueryContext.Provider, { value: query, children: highlightChildren(parts.body, query) }) }),
-          parts.meta,
-          multiple ? null : /* @__PURE__ */ jsx41("span", { className: menu_default.check, "aria-hidden": "true", children: isSelected ? /* @__PURE__ */ jsx41(Icon, { name: "action.check" }) : null })
-        ]
+        "aria-label": ariaLabel,
+        size,
+        ids,
+        label,
+        required,
+        optional,
+        hint,
+        hintTone,
+        error,
+        disabled,
+        optionalLabel: labels.optional,
+        className,
+        children: body
       }
     )
   );
 }
-SelectItem.displayName = "Select.Item";
-var ACTION_PREFIX = "__prime_select_action";
-var isActionValue = (value) => value.startsWith(ACTION_PREFIX);
-function SelectAction({
-  onSelect,
-  disabled = false,
+SelectRoot.displayName = "Select.Root";
+var takeNext = (_current, next) => next;
+function SelectTrigger({
   className,
   children,
   onClick: onClick2,
-  onMouseMove,
+  onKeyDown: onKeyDown2,
+  "aria-describedby": ariaDescribedBy,
   ref,
   ...rest
 }) {
-  const { highlight, listboxId, setOpen, size, registry } = useSelectContext();
-  const value = `${ACTION_PREFIX}${React64.useId()}`;
-  const isHighlighted = useStoreSlice(highlight, (current) => current === value);
-  const parts = splitItemChildren(children);
-  const nodeRef = React64.useRef(null);
-  const setRefs = useMergedRefs(nodeRef, ref);
-  useListboxItem(
-    registry,
-    value,
-    {
-      label: parts.title,
-      haystack: "",
-      disabled,
-      persistent: true,
-      onActivate: () => {
-        onSelect();
-        setOpen(false);
-      }
-    },
-    nodeRef
-  );
-  return (
-    // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the listbox / search (aria-activedescendant)
-    // biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard is handled on the listbox
-    /* @__PURE__ */ jsxs26(
-      "div",
+  const {
+    isOpen,
+    setOpen,
+    triggerId,
+    listboxId,
+    disabled,
+    size,
+    invalid,
+    focusRing,
+    required,
+    describedBy,
+    triggerRef,
+    loading,
+    saving,
+    clearable,
+    selected,
+    clear,
+    labels,
+    registry,
+    segment
+  } = useSelectContext();
+  const mergedRef = useMergedRefs(triggerRef, ref);
+  useListboxView(registry);
+  const valueText = selected.map(registry.labelOf).join(", ");
+  const segmentName = segment?.label ? valueText ? `${segment.label}: ${valueText}` : segment.label : void 0;
+  const parts = React62.Children.toArray(children);
+  const iconOnly = parts.some((node) => React62.isValidElement(node) && node.type === SelectTriggerIcon) && !parts.some((node) => React62.isValidElement(node) && node.type === SelectValue);
+  const busy = loading || saving;
+  const showClear = clearable && selected.length > 0 && !disabled && !busy;
+  const clearPresence = usePartPresence({ present: showClear, axis: "inline" });
+  const toggle = floatingTriggerProps({ open: isOpen, setOpen, openOnArrow: true });
+  return /* @__PURE__ */ jsxs25(
+    "button",
+    {
+      ...rest,
+      ref: mergedRef,
+      id: triggerId,
+      type: "button",
+      role: "combobox",
+      "aria-expanded": toggle["aria-expanded"],
+      "aria-haspopup": "listbox",
+      "aria-controls": isOpen ? listboxId : void 0,
+      "aria-invalid": invalid || void 0,
+      "aria-required": required || void 0,
+      "aria-describedby": [ariaDescribedBy, describedBy].filter(Boolean).join(" ") || void 0,
+      "aria-busy": busy || void 0,
+      "aria-label": segmentName ?? rest["aria-label"],
+      disabled,
+      className: cx(
+        segment ? Select_default.segmentTrigger : cx(fieldTriggerClass, Select_default.trigger),
+        className
+      ),
+      onClick: (event) => {
+        onClick2?.(event);
+        if (!event.defaultPrevented) toggle.onClick();
+      },
+      onKeyDown: (event) => {
+        onKeyDown2?.(event);
+        if (event.defaultPrevented) return;
+        toggle.onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        if (event.key === " " || event.key === "Enter") {
+          event.preventDefault();
+          if (!isOpen) setOpen(true);
+        } else if (showClear && (event.key === "Delete" || event.key === "Backspace")) {
+          event.preventDefault();
+          clear();
+        }
+      },
+      ...toDataAttributes({
+        state: toggle["data-state"],
+        size,
+        invalid: invalid || void 0,
+        loading: busy || void 0,
+        disabled: disabled || void 0,
+        "focus-ring": focusRing,
+        "icon-only": iconOnly || void 0,
+        segment: segment ? true : void 0
+      }),
+      children: [
+        /* @__PURE__ */ jsxs25("span", { className: Select_default.triggerMain, children: [
+          children,
+          iconOnly ? /* @__PURE__ */ jsx40(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. A touch target in height, like the clear
+          // segment of a field (`FieldAction`).
+          /* @__PURE__ */ jsx40(
+            "span",
+            {
+              ref: clearPresence.ref,
+              className: cx(Select_default.clear, touchTargetBlockClass, clearPresence.className),
+              "aria-hidden": "true",
+              title: labels.clear,
+              "data-select-clear": "",
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: (event) => {
+                event.stopPropagation();
+                clear();
+              },
+              children: /* @__PURE__ */ jsx40(Icon, { name: "action.close" })
+            }
+          )
+        ) : null,
+        /* @__PURE__ */ jsx40("span", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx40(GlyphSwap, { children: busy ? /* @__PURE__ */ jsx40(Spinner, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx40(Icon, { name: "nav.chevronDown" }) }) })
+      ]
+    }
+  );
+}
+SelectTrigger.displayName = "Select.Trigger";
+function SelectValue({ renderValue, className, ...rest }) {
+  const { selected, registry, placeholder, multiple, size } = useSelectContext();
+  useListboxView(registry);
+  const text = selected.map(registry.labelOf).join(", ");
+  if (selected.length > 0 && renderValue && !multiple) {
+    const value = selected[0] ?? "";
+    const parts = splitItemChildren(renderValue({ value, label: text }));
+    return /* @__PURE__ */ jsxs25(
+      "span",
       {
         ...rest,
-        ref: setRefs,
-        id: optionDomId(listboxId, value),
-        role: "option",
-        "aria-disabled": disabled || void 0,
-        className: cx(menu_default.item, className),
-        onClick: (event) => {
-          onClick2?.(event);
-          if (!event.defaultPrevented) registry.activate(value);
-        },
-        onMouseMove: (event) => {
-          onMouseMove?.(event);
-          if (!disabled && !isHighlighted) highlight.set(value);
-        },
+        className: cx(Select_default.value, className),
         ...toDataAttributes({
-          value,
-          action: true,
-          highlighted: isHighlighted,
-          disabled
+          rich: parts.rich || void 0,
+          media: parts.leading.length > 0 || parts.meta.length > 0 || void 0
         }),
         children: [
           sizeMedia(parts.leading, size),
-          /* @__PURE__ */ jsx41("span", { className: Select_default.itemText, children: parts.body })
+          /* @__PURE__ */ jsx40("span", { className: Select_default.valueBody, children: parts.body }),
+          parts.meta
         ]
       }
-    )
+    );
+  }
+  return /* @__PURE__ */ jsx40(
+    "span",
+    {
+      ...rest,
+      className: cx(Select_default.value, className),
+      ...toDataAttributes({ placeholder: selected.length === 0 || void 0 }),
+      children: selected.length > 0 ? text : placeholder
+    }
   );
 }
-SelectAction.displayName = "Select.Action";
-
-// src/components/select/Select.tsx
-import { Fragment as Fragment17, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
-var SELECT_LABELS = {
-  search: "\u041F\u043E\u0438\u0441\u043A",
-  empty: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E",
-  emptyHint: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u0437\u0430\u043F\u0440\u043E\u0441",
-  loading: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026",
-  retry: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C",
-  clear: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
-  optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E",
-  changeFailed: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C \u0432\u044B\u0431\u043E\u0440"
-};
-function SelectRoot(props) {
+SelectValue.displayName = "Select.Value";
+function SelectTriggerIcon({ className, ...rest }) {
+  return /* @__PURE__ */ jsx40("span", { "aria-hidden": "true", className: cx(Select_default.triggerIcon, className), ...rest });
+}
+SelectTriggerIcon.displayName = "Select.TriggerIcon";
+var LOADING_ROWS2 = 4;
+var LOADING_MORE_ROWS = 2;
+function SkeletonRows({ count }) {
+  return Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx40(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cx(menu_default.item, menu_default.skeletonRow),
+      "data-skeleton": "",
+      children: /* @__PURE__ */ jsx40(Skeleton, {})
+    },
+    index
+  ));
+}
+function SelectContent({ searchable = false, className, children, ...rest }) {
   const {
-    size: sizeProp,
-    label,
-    required = false,
-    optional,
-    hint,
-    hintTone,
-    error,
-    invalid,
-    focusRing,
-    disabled: disabledProp = false,
-    placeholder,
-    id,
-    open,
-    defaultOpen = false,
-    onOpenChange,
-    closeOnEscape = true,
-    closeOnOutsideClick = true,
-    clearable = false,
-    name,
-    search,
-    defaultSearch = "",
-    onSearchChange,
-    filter = true,
-    loading = false,
-    loadingMore = false,
-    hasMore = false,
+    isOpen,
+    setOpen,
+    closeOnEscape,
+    closeOnOutsideClick,
+    triggerId,
+    listboxId,
+    triggerRef,
+    highlight,
+    multiple,
+    size,
+    query,
+    setQuery,
+    loading,
+    saving,
+    loadingMore,
+    hasMore,
     onLoadMore,
     loadError,
     onRetry,
-    labels: labelsProp,
-    className,
-    children,
-    multiple: _multiple,
-    value: _value,
-    defaultValue: _defaultValue,
-    onValueChange: _onValueChange,
-    "aria-label": ariaLabel,
-    ...rest
-  } = props;
-  const multiple = props.multiple === true;
-  const tier = useHostTier(sizeProp);
-  const { size } = tier;
-  const disabled = useInheritedDisabled(disabledProp);
-  const labels = useLabels(SELECT_LABELS, labelsProp);
-  const ids = useFieldFrame(id, { label, hint, error, invalid, required });
-  const [stored, setStored] = useControllableState({
-    value: props.value,
-    defaultValue: props.defaultValue ?? (multiple ? [] : void 0)
-  });
-  const changes = usePendingChanges(stored, takeNext);
-  const value = changes.shown;
-  const saving = changes.pending.length > 0;
-  const [announcement, setAnnouncement] = React65.useState("");
-  const onValueChange = props.onValueChange;
-  const commit = (next) => {
-    if (saving || Object.is(next, value)) return;
-    const outcome = onValueChange?.(next);
-    if (!isPromiseLike(outcome)) {
-      setStored(next);
-      return;
-    }
-    setAnnouncement("");
-    changes.track(next, outcome, {
-      onResolve: () => setStored(next),
-      onReject: () => setAnnouncement(labels.changeFailed)
-    });
-  };
-  const commitRef = React65.useRef(commit);
-  commitRef.current = commit;
-  const selected = React65.useMemo(
-    () => Array.isArray(value) ? value : value ? [value] : [],
-    [value]
-  );
-  const [isOpen, setOpen] = useOpenState({ open, defaultOpen, onOpenChange, disabled });
-  const highlight = useCreateStore(void 0);
-  const registry = useListboxRegistry();
-  const [query, setQuery] = useControllableState({
-    value: search,
-    defaultValue: defaultSearch,
-    onChange: onSearchChange
+    filter,
+    labels,
+    registry
+  } = useSelectContext();
+  const listboxRef = React62.useRef(null);
+  const setListboxRef = useMergedRefs(listboxRef);
+  const items = [];
+  const actions = [];
+  for (const child of React62.Children.toArray(children)) {
+    (React62.isValidElement(child) && child.type === SelectAction ? actions : items).push(child);
+  }
+  const actionsId = `${listboxId}-actions`;
+  const floating = useFloatingLayer({
+    open: isOpen,
+    onOpenChange: setOpen,
+    triggerRef,
+    closeOnEscape,
+    closeOnOutsideClick,
+    matchAnchorWidth: true,
+    focusOnOpen: true,
+    tabExit: "always",
+    sheet: true
   });
-  const triggerRef = React65.useRef(null);
-  const inSegment = React65.useContext(InputSegmentContext);
-  const segment = React65.useMemo(
-    () => inSegment ? { label: ariaLabel } : null,
-    [inSegment, ariaLabel]
-  );
-  const wasOpenRef = React65.useRef(isOpen);
-  React65.useEffect(() => {
-    if (wasOpenRef.current && !isOpen) setQuery("");
-    wasOpenRef.current = isOpen;
-  }, [isOpen, setQuery]);
-  const pick = React65.useCallback(
-    (optionValue) => {
-      if (multiple) {
-        const list = Array.isArray(value) ? value : [];
-        commitRef.current(
-          list.includes(optionValue) ? list.filter((item) => item !== optionValue) : [...list, optionValue]
-        );
-        return;
+  const highlighted = useStoreSlice(highlight, (value) => value);
+  const view = useListboxView(registry, query, filter);
+  const isEmpty = view.matchCount === 0;
+  const typeahead = useTypeahead();
+  const region = hasContent(loadError) ? "error" : loading && isEmpty ? "loading" : "ready";
+  const { sentinelRef, request: requestMore } = useLoadMore({
+    enabled: region === "ready" && hasMore && Boolean(onLoadMore) && !loading && !loadingMore,
+    onLoadMore,
+    scrollRef: listboxRef,
+    round: view
+  });
+  const setSentinelRef = useMergedRefs(sentinelRef);
+  const lastOption = view.navigable.filter((id) => !isActionValue(id)).at(-1);
+  React62.useEffect(() => {
+    if (highlighted !== void 0 && highlighted === lastOption) requestMore();
+  }, [highlighted, lastOption, requestMore]);
+  const handleKeyDown = (event) => {
+    if (region === "error") {
+      if (event.key === "Enter" && onRetry && !(event.target instanceof HTMLButtonElement)) {
+        event.preventDefault();
+        onRetry();
       }
-      commitRef.current(optionValue);
-      setOpen(false);
-    },
-    [multiple, value, setOpen]
-  );
-  const clear = React65.useCallback(() => commitRef.current(multiple ? [] : ""), [multiple]);
-  const context = React65.useMemo(
-    () => ({
-      size,
-      invalid: ids.invalid,
-      focusRing,
-      required: ids.required,
-      disabled,
-      placeholder,
-      multiple,
-      selected,
-      registry,
-      pick,
-      clear,
-      clearable,
-      loading,
-      saving,
-      loadingMore,
-      hasMore,
-      onLoadMore,
-      loadError,
-      onRetry,
-      filter,
-      isOpen,
-      setOpen,
-      closeOnEscape,
-      closeOnOutsideClick,
-      highlight,
-      query,
-      setQuery,
-      triggerId: ids.controlId,
-      listboxId: `${ids.controlId}-listbox`,
-      describedBy: ids.describedBy,
-      triggerRef,
-      labels,
-      segment
-    }),
-    [
-      size,
-      ids.invalid,
-      ids.controlId,
-      ids.describedBy,
-      focusRing,
-      ids.required,
-      disabled,
-      placeholder,
-      multiple,
-      selected,
-      registry,
-      pick,
-      clear,
-      clearable,
-      loading,
-      saving,
-      loadingMore,
-      hasMore,
-      onLoadMore,
-      loadError,
-      onRetry,
-      filter,
-      isOpen,
-      setOpen,
-      closeOnEscape,
-      closeOnOutsideClick,
-      highlight,
-      query,
-      setQuery,
-      labels,
-      segment
-    ]
-  );
-  const body = /* @__PURE__ */ jsxs27(Fragment17, { children: [
-    /* @__PURE__ */ jsx42(SelectProvider, { value: context, children }),
-    name ? (selected.length > 0 || multiple ? selected : [""]).map((item) => /* @__PURE__ */ jsx42("input", { type: "hidden", name, value: item, disabled }, item)) : null,
-    /* @__PURE__ */ jsx42(VisuallyHidden, { live: "polite", children: announcement })
-  ] });
-  if (segment) {
-    return tier.provide(
-      /* @__PURE__ */ jsx42(
-        "div",
-        {
-          ...rest,
-          className: cx(Select_default.segment, className),
-          "data-field-segment": "",
-          "data-size": size,
-          children: body
-        }
-      )
-    );
-  }
-  return tier.provide(
-    /* @__PURE__ */ jsx42(
-      FieldFrame,
-      {
-        ...rest,
-        "aria-label": ariaLabel,
-        size,
-        ids,
-        label,
-        required,
-        optional,
-        hint,
-        hintTone,
-        error,
-        disabled,
-        optionalLabel: labels.optional,
-        className,
-        children: body
+      return;
+    }
+    const inSearch = event.target instanceof HTMLInputElement;
+    if (inSearch && [" ", "Home", "End"].includes(event.key)) return;
+    const ids = view.navigable;
+    const printable = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+    if (printable && !inSearch && (event.key !== " " || typeahead.isTyping())) {
+      event.preventDefault();
+      const match = typeahead.find(event.key, ids, highlight.get(), registry.labelOf);
+      if (match !== void 0) {
+        highlight.set(match);
+        revealHighlighted(registry.nodeOf(match));
       }
-    )
-  );
-}
-SelectRoot.displayName = "Select.Root";
-var takeNext = (_current, next) => next;
-function SelectTrigger({
-  className,
-  children,
-  onClick: onClick2,
-  onKeyDown: onKeyDown2,
-  "aria-describedby": ariaDescribedBy,
-  ref,
-  ...rest
-}) {
-  const {
-    isOpen,
-    setOpen,
-    triggerId,
-    listboxId,
-    disabled,
-    size,
-    invalid,
-    focusRing,
-    required,
-    describedBy,
-    triggerRef,
-    loading,
-    saving,
-    clearable,
-    selected,
-    clear,
-    labels,
-    registry,
-    segment
-  } = useSelectContext();
-  const mergedRef = useMergedRefs(triggerRef, ref);
-  useListboxView(registry);
-  const valueText = selected.map(registry.labelOf).join(", ");
-  const segmentName = segment?.label ? valueText ? `${segment.label}: ${valueText}` : segment.label : void 0;
-  const parts = React65.Children.toArray(children);
-  const iconOnly = parts.some((node) => React65.isValidElement(node) && node.type === SelectTriggerIcon) && !parts.some((node) => React65.isValidElement(node) && node.type === SelectValue);
-  const busy = loading || saving;
-  const showClear = clearable && selected.length > 0 && !disabled && !busy;
-  const clearPresence = usePartPresence({ present: showClear, axis: "inline" });
-  const toggle = floatingTriggerProps({ open: isOpen, setOpen, openOnArrow: true });
-  return /* @__PURE__ */ jsxs27(
-    "button",
+      return;
+    }
+    const moved = handleListboxKeyDown(event, {
+      ids,
+      highlight,
+      activate: (value) => registry.activate(value)
+    });
+    if (moved !== null) revealHighlighted(registry.nodeOf(moved));
+  };
+  if (!floating.mounted) return /* @__PURE__ */ jsx40("div", { hidden: true, children: items });
+  const activeDescendant = isOpen && highlighted !== void 0 ? optionDomId(listboxId, highlighted) : void 0;
+  return /* @__PURE__ */ jsxs25(
+    FloatingPanel,
     {
       ...rest,
-      ref: mergedRef,
-      id: triggerId,
-      type: "button",
-      role: "combobox",
-      "aria-expanded": toggle["aria-expanded"],
-      "aria-haspopup": "listbox",
-      "aria-controls": isOpen ? listboxId : void 0,
-      "aria-invalid": invalid || void 0,
-      "aria-required": required || void 0,
-      "aria-describedby": [ariaDescribedBy, describedBy].filter(Boolean).join(" ") || void 0,
-      "aria-busy": busy || void 0,
-      "aria-label": segmentName ?? rest["aria-label"],
-      disabled,
-      className: cx(
-        segment ? Select_default.segmentTrigger : cx(fieldTriggerClass, Select_default.trigger),
-        className
-      ),
-      onClick: (event) => {
-        onClick2?.(event);
-        if (!event.defaultPrevented) toggle.onClick();
-      },
-      onKeyDown: (event) => {
-        onKeyDown2?.(event);
-        if (event.defaultPrevented) return;
-        toggle.onKeyDown?.(event);
-        if (event.defaultPrevented) return;
-        if (event.key === " " || event.key === "Enter") {
-          event.preventDefault();
-          if (!isOpen) setOpen(true);
-        } else if (showClear && (event.key === "Delete" || event.key === "Backspace")) {
-          event.preventDefault();
-          clear();
-        }
-      },
-      ...toDataAttributes({
-        state: toggle["data-state"],
-        size,
-        invalid: invalid || void 0,
-        loading: busy || void 0,
-        disabled: disabled || void 0,
-        "focus-ring": focusRing,
-        "icon-only": iconOnly || void 0,
-        segment: segment ? true : void 0
-      }),
+      floating,
+      size,
+      className: cx(fieldTierClass, menu_default.tier, menu_default.menu, Select_default.content, className),
+      onKeyDown: handleKeyDown,
+      ...toDataAttributes({ searching: query !== "" || void 0 }),
       children: [
-        /* @__PURE__ */ jsxs27("span", { className: Select_default.triggerMain, children: [
-          children,
-          iconOnly ? /* @__PURE__ */ jsx42(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. A touch target in height, like the clear
-          // segment of a field (`FieldAction`).
-          /* @__PURE__ */ jsx42(
-            "span",
+        searchable ? (
+          // The permanent focus of the panel: no ring, the caret is the indicator (foundation §7).
+          /* @__PURE__ */ jsxs25("div", { className: cx(menu_default.searchRow, Select_default.search), children: [
+            /* @__PURE__ */ jsx40(Icon, { name: "action.search", size: "s" }),
+            /* @__PURE__ */ jsx40(
+              "input",
+              {
+                type: "text",
+                className: menu_default.searchInput,
+                value: query,
+                placeholder: labels.search,
+                "aria-label": labels.search,
+                "aria-controls": region === "error" ? void 0 : listboxId,
+                "aria-activedescendant": activeDescendant,
+                "aria-autocomplete": "list",
+                autoComplete: "off",
+                spellCheck: false,
+                "data-autofocus": "",
+                onChange: (event) => setQuery(event.target.value)
+              }
+            )
+          ] })
+        ) : null,
+        /* @__PURE__ */ jsx40(RegionSwap, { state: region, fill: true, children: region === "error" ? /* @__PURE__ */ jsxs25(EmptyPage.Root, { layout: "compact", size, role: "alert", children: [
+          /* @__PURE__ */ jsx40(EmptyPage.Title, { as: "p", children: loadError }),
+          onRetry ? /* @__PURE__ */ jsx40(EmptyPage.Actions, { children: /* @__PURE__ */ jsxs25(Button.Root, { variant: "soft", tone: "neutral", onClick: onRetry, children: [
+            /* @__PURE__ */ jsx40(Button.Icon, { children: /* @__PURE__ */ jsx40(Icon, { name: "action.refresh" }) }),
+            labels.retry
+          ] }) }) : null
+        ] }) : /* @__PURE__ */ jsxs25(Fragment16, { children: [
+          /* @__PURE__ */ jsxs25(
+            ScrollContainer,
             {
-              ref: clearPresence.ref,
-              className: cx(Select_default.clear, touchTargetBlockClass, clearPresence.className),
-              "aria-hidden": "true",
-              title: labels.clear,
-              "data-select-clear": "",
-              onMouseDown: (event) => event.preventDefault(),
-              onClick: (event) => {
-                event.stopPropagation();
-                clear();
-              },
-              children: /* @__PURE__ */ jsx42(Icon, { name: "action.close" })
+              ref: setListboxRef,
+              id: listboxId,
+              role: "listbox",
+              "aria-multiselectable": multiple || void 0,
+              "aria-labelledby": triggerId,
+              "aria-activedescendant": searchable ? void 0 : activeDescendant,
+              "aria-busy": loading || loadingMore || saving || void 0,
+              "aria-owns": actions.length > 0 ? actionsId : void 0,
+              tabIndex: -1,
+              "data-autofocus": searchable ? void 0 : "",
+              className: Select_default.listbox,
+              children: [
+                items,
+                region === "loading" ? /* @__PURE__ */ jsx40(SkeletonRows, { count: LOADING_ROWS2 }) : null,
+                region === "ready" && hasMore ? /* @__PURE__ */ jsx40("div", { ref: setSentinelRef, "aria-hidden": "true", className: menu_default.loadSentinel }) : null,
+                region === "ready" && loadingMore ? /* @__PURE__ */ jsx40(SkeletonRows, { count: LOADING_MORE_ROWS }) : null
+              ]
             }
-          )
-        ) : null,
-        /* @__PURE__ */ jsx42("span", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx42(GlyphSwap, { children: busy ? /* @__PURE__ */ jsx42(Spinner, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx42(Icon, { name: "nav.chevronDown" }) }) })
+          ),
+          region === "ready" && isEmpty ? /* @__PURE__ */ jsxs25(EmptyPage.Root, { layout: "compact", size, role: "status", children: [
+            /* @__PURE__ */ jsx40(EmptyPage.Title, { as: "p", children: labels.empty }),
+            query !== "" && labels.emptyHint ? /* @__PURE__ */ jsx40(EmptyPage.Description, { children: labels.emptyHint }) : null
+          ] }) : null,
+          actions.length > 0 ? (
+            // Owned by the listbox (`aria-owns`): its options for assistive tech, pinned under
+            // the scroller and the empty state for the eye.
+            // biome-ignore lint/a11y/useSemanticElements: a group of options inside a listbox, not a form fieldset
+            /* @__PURE__ */ jsx40("div", { id: actionsId, role: "group", className: Select_default.actions, children: actions })
+          ) : null
+        ] }) }),
+        /* @__PURE__ */ jsx40(VisuallyHidden, { live: "polite", children: loading || loadingMore ? labels.loading : "" }),
+        /* @__PURE__ */ jsx40(HighlightOnOpen, {})
       ]
     }
   );
 }
-SelectTrigger.displayName = "Select.Trigger";
-function SelectValue({ renderValue, className, ...rest }) {
-  const { selected, registry, placeholder, multiple, size } = useSelectContext();
-  useListboxView(registry);
-  const text = selected.map(registry.labelOf).join(", ");
-  if (selected.length > 0 && renderValue && !multiple) {
-    const value = selected[0] ?? "";
-    const parts = splitItemChildren(renderValue({ value, label: text }));
-    return /* @__PURE__ */ jsxs27(
-      "span",
-      {
-        ...rest,
-        className: cx(Select_default.value, className),
-        ...toDataAttributes({
-          rich: parts.rich || void 0,
-          media: parts.leading.length > 0 || parts.meta.length > 0 || void 0
-        }),
-        children: [
-          sizeMedia(parts.leading, size),
-          /* @__PURE__ */ jsx42("span", { className: Select_default.valueBody, children: parts.body }),
-          parts.meta
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx42(
-    "span",
-    {
-      ...rest,
-      className: cx(Select_default.value, className),
-      ...toDataAttributes({ placeholder: selected.length === 0 || void 0 }),
-      children: selected.length > 0 ? text : placeholder
-    }
+SelectContent.displayName = "Select.Content";
+function HighlightOnOpen() {
+  const { isOpen, query, filter, selected, registry, highlight } = useSelectContext();
+  const view = useListboxView(registry, query, filter);
+  const latest = React62.useRef({ query, filter, selected });
+  latest.current = { query, filter, selected };
+  React62.useLayoutEffect(() => {
+    if (!isOpen) return;
+    const { query: text, filter: filtered, selected: picked } = latest.current;
+    const first = registry.view(text, filtered).navigable.find((id) => picked.includes(id));
+    highlight.set(first);
+    if (first !== void 0) revealHighlighted(registry.nodeOf(first));
+    return () => highlight.set(void 0);
+  }, [isOpen, registry, highlight]);
+  const latestView = React62.useRef(view);
+  latestView.current = view;
+  React62.useLayoutEffect(() => {
+    if (query !== "") highlight.set(latestView.current.navigable[0]);
+  }, [query, highlight]);
+  React62.useLayoutEffect(() => {
+    if (query === "") return;
+    const current = highlight.get();
+    if (current === void 0 || isActionValue(current) || !view.navigable.includes(current)) {
+      highlight.set(view.navigable[0]);
+    }
+  }, [view, query, highlight]);
+  return null;
+}
+function SelectGroup({ className, ...rest }) {
+  return /* @__PURE__ */ jsx40(MenuGroup, { ...rest, className: cx(Select_default.group, className) });
+}
+SelectGroup.displayName = "Select.Group";
+function SelectSeparator({ className, ...rest }) {
+  return /* @__PURE__ */ jsx40(Divider, { ...rest, className: cx(menu_default.separator, Select_default.separator, className) });
+}
+SelectSeparator.displayName = "Select.Separator";
+var Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  TriggerIcon: SelectTriggerIcon,
+  Content: SelectContent,
+  Item: SelectItem,
+  ItemIcon: SelectItemIcon,
+  ItemText: SelectItemText,
+  ItemDescription: SelectItemDescription,
+  ItemMeta: SelectItemMeta,
+  Group: SelectGroup,
+  Separator: SelectSeparator,
+  Action: SelectAction
+};
+
+// src/internal/swatch.tsx
+import * as React64 from "react";
+
+// src/hooks/useElementSize.ts
+import * as React63 from "react";
+var rounded = (width, height) => ({
+  width: Math.round(width),
+  height: Math.round(height)
+});
+var sizeOf = (element) => {
+  const rect = element.getBoundingClientRect();
+  return rounded(rect.width, rect.height);
+};
+var entrySize = (entry) => {
+  const box = entry.borderBoxSize?.[0];
+  return box ? rounded(box.inlineSize, box.blockSize) : rounded(entry.contentRect.width, entry.contentRect.height);
+};
+var sameSize = (a, b) => a === b || a !== null && b !== null && a.width === b.width && a.height === b.height;
+function useRefNode(ref, enabled, subscribe) {
+  const subscribeRef = React63.useRef(subscribe);
+  const active2 = React63.useRef(null);
+  React63.useLayoutEffect(() => {
+    subscribeRef.current = subscribe;
+    const node = enabled ? ref.current : null;
+    if (active2.current?.node === node) return;
+    active2.current?.stop();
+    active2.current = node ? { node, stop: subscribeRef.current(node) } : null;
+  });
+  React63.useLayoutEffect(
+    () => () => {
+      active2.current?.stop();
+      active2.current = null;
+    },
+    []
+  );
+}
+function useElementSize(ref, { enabled = true } = {}) {
+  const [size, setSize] = React63.useState(null);
+  useRefNode(ref, enabled, (node) => {
+    const update = (next) => setSize((prev) => sameSize(prev, next) ? prev : next);
+    update(sizeOf(node));
+    if (typeof ResizeObserver === "undefined") return () => update(null);
+    const observer = new ResizeObserver(([entry]) => update(entry ? entrySize(entry) : null));
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+      update(null);
+    };
+  });
+  return size;
+}
+function useResizeEffect(ref, onResize, { enabled = true, children = false } = {}) {
+  const callback = React63.useRef(onResize);
+  React63.useLayoutEffect(() => {
+    callback.current = onResize;
+  });
+  useRefNode(ref, enabled, (node) => {
+    if (typeof ResizeObserver === "undefined") return () => {
+    };
+    const observer = new ResizeObserver(() => callback.current());
+    const observeAll = () => {
+      observer.observe(node);
+      if (children) for (const child of Array.from(node.children)) observer.observe(child);
+    };
+    observeAll();
+    const mutation = children ? new MutationObserver(observeAll) : null;
+    mutation?.observe(node, { childList: true });
+    return () => {
+      mutation?.disconnect();
+      observer.disconnect();
+    };
+  });
+}
+
+// src/internal/swatch.module.css
+var swatch_default = {
+  fill: "swatch_fill",
+  checker: "swatch_checker",
+  checkerboard: "swatch_checkerboard",
+  hueFill: "swatch_hueFill",
+  tier: "swatch_tier",
+  grid: "swatch_grid",
+  chip: "swatch_chip",
+  swatch: "swatch_swatch",
+  trigger: "swatch_trigger",
+  check: "swatch_check"
+};
+
+// src/internal/swatch.tsx
+import { Fragment as Fragment17, jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+var COLOR_PRESETS = [
+  { value: "#ef4444", label: "\u041A\u0440\u0430\u0441\u043D\u044B\u0439" },
+  { value: "#f97316", label: "\u041E\u0440\u0430\u043D\u0436\u0435\u0432\u044B\u0439" },
+  { value: "#eab308", label: "\u0416\u0451\u043B\u0442\u044B\u0439" },
+  { value: "#22c55e", label: "\u0417\u0435\u043B\u0451\u043D\u044B\u0439" },
+  { value: "#14b8a6", label: "\u0411\u0438\u0440\u044E\u0437\u043E\u0432\u044B\u0439" },
+  { value: "#5068f5", label: "\u0421\u0438\u043D\u0438\u0439" },
+  { value: "#a855f7", label: "\u0424\u0438\u043E\u043B\u0435\u0442\u043E\u0432\u044B\u0439" },
+  { value: "#ec4899", label: "\u0420\u043E\u0437\u043E\u0432\u044B\u0439" },
+  { value: "#b91c1c", label: "\u0422\u0451\u043C\u043D\u043E-\u043A\u0440\u0430\u0441\u043D\u044B\u0439" },
+  { value: "#c2410c", label: "\u0422\u0451\u043C\u043D\u043E-\u043E\u0440\u0430\u043D\u0436\u0435\u0432\u044B\u0439" },
+  { value: "#a16207", label: "\u0413\u043E\u0440\u0447\u0438\u0447\u043D\u044B\u0439" },
+  { value: "#15803d", label: "\u0422\u0451\u043C\u043D\u043E-\u0437\u0435\u043B\u0451\u043D\u044B\u0439" },
+  { value: "#0f766e", label: "\u0422\u0451\u043C\u043D\u043E-\u0431\u0438\u0440\u044E\u0437\u043E\u0432\u044B\u0439" },
+  { value: "#2f4ae0", label: "\u0422\u0451\u043C\u043D\u043E-\u0441\u0438\u043D\u0438\u0439" },
+  { value: "#7e22ce", label: "\u0422\u0451\u043C\u043D\u043E-\u0444\u0438\u043E\u043B\u0435\u0442\u043E\u0432\u044B\u0439" },
+  { value: "#be185d", label: "\u0422\u0451\u043C\u043D\u043E-\u0440\u043E\u0437\u043E\u0432\u044B\u0439" }
+];
+var PALETTE_COLOR_NAMES = {
+  gray: "\u0421\u0435\u0440\u044B\u0439",
+  red: "\u041A\u0440\u0430\u0441\u043D\u044B\u0439",
+  orange: "\u041E\u0440\u0430\u043D\u0436\u0435\u0432\u044B\u0439",
+  yellow: "\u0416\u0451\u043B\u0442\u044B\u0439",
+  green: "\u0417\u0435\u043B\u0451\u043D\u044B\u0439",
+  teal: "\u0411\u0438\u0440\u044E\u0437\u043E\u0432\u044B\u0439",
+  sky: "\u0413\u043E\u043B\u0443\u0431\u043E\u0439",
+  blue: "\u0421\u0438\u043D\u0438\u0439",
+  purple: "\u0424\u0438\u043E\u043B\u0435\u0442\u043E\u0432\u044B\u0439",
+  pink: "\u0420\u043E\u0437\u043E\u0432\u044B\u0439"
+};
+var PALETTE_ORDER = Object.keys(PALETTE_COLOR_NAMES);
+function useSwatchOptions(presets, allowEmpty, emptyLabel) {
+  return React64.useMemo(
+    () => [
+      ...presets.map((preset) => ({ ...preset, contrast: markContrast(preset.value) })),
+      ...allowEmpty ? [{ value: null, label: emptyLabel, contrast: "surface" }] : []
+    ],
+    [presets, allowEmpty, emptyLabel]
+  );
+}
+function usePaletteOptions(palette, allowEmpty, emptyLabel, names) {
+  return React64.useMemo(
+    () => [
+      ...palette.map((hue) => ({ value: hue, label: names[hue], contrast: "hue" })),
+      ...allowEmpty ? [{ value: null, label: emptyLabel, contrast: "surface" }] : []
+    ],
+    [palette, allowEmpty, emptyLabel, names]
   );
 }
-SelectValue.displayName = "Select.Value";
-function SelectTriggerIcon({ className, ...rest }) {
-  return /* @__PURE__ */ jsx42("span", { "aria-hidden": "true", className: cx(Select_default.triggerIcon, className), ...rest });
+var swatchClass = cx(swatch_default.swatch, press_default.press);
+var swatchTriggerClass = cx(swatch_default.trigger, press_default.press);
+var swatchTierClass = cx(fieldTierClass, swatch_default.tier);
+var swatchGridClass = swatch_default.grid;
+var checkerboardClass = swatch_default.checkerboard;
+function SwatchFill({ value, hue = false }) {
+  if (value == null) return /* @__PURE__ */ jsx41("span", { "aria-hidden": true, className: swatch_default.checker });
+  if (hue) return /* @__PURE__ */ jsx41("span", { "aria-hidden": true, className: cx(swatch_default.fill, swatch_default.hueFill) });
+  return /* @__PURE__ */ jsx41("svg", { className: swatch_default.fill, "aria-hidden": "true", viewBox: "0 0 1 1", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx41("rect", { width: "1", height: "1", fill: value }) });
 }
-SelectTriggerIcon.displayName = "Select.TriggerIcon";
-var LOADING_ROWS2 = 4;
-var LOADING_MORE_ROWS = 2;
-function SkeletonRows({ count }) {
-  return Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx42(
-    "div",
-    {
-      "aria-hidden": "true",
-      className: cx(menu_default.item, menu_default.skeletonRow),
-      "data-skeleton": "",
-      children: /* @__PURE__ */ jsx42(Skeleton, {})
-    },
-    index
-  ));
+function SwatchContent({
+  value,
+  selected,
+  hue = false
+}) {
+  return /* @__PURE__ */ jsxs26(Fragment17, { children: [
+    /* @__PURE__ */ jsx41(SwatchFill, { value, hue }),
+    /* @__PURE__ */ jsx41(CheckMark, { state: selected ? "checked" : "unchecked", className: swatch_default.check })
+  ] });
 }
-function SelectContent({ searchable = false, className, children, ...rest }) {
-  const {
-    isOpen,
-    setOpen,
-    closeOnEscape,
-    closeOnOutsideClick,
-    triggerId,
-    listboxId,
-    triggerRef,
-    highlight,
-    multiple,
-    size,
-    query,
-    setQuery,
-    loading,
-    saving,
-    loadingMore,
-    hasMore,
-    onLoadMore,
-    loadError,
-    onRetry,
-    filter,
-    labels,
-    registry
-  } = useSelectContext();
-  const listboxRef = React65.useRef(null);
-  const setListboxRef = useMergedRefs(listboxRef);
-  const items = [];
-  const actions = [];
-  for (const child of React65.Children.toArray(children)) {
-    (React65.isValidElement(child) && child.type === SelectAction ? actions : items).push(child);
+function SwatchChip({ value, className, ...rest }) {
+  return /* @__PURE__ */ jsx41("span", { ...rest, "aria-hidden": true, className: cx(swatch_default.chip, className), children: /* @__PURE__ */ jsx41(SwatchFill, { value }) });
+}
+function parseHexColor(text) {
+  const hex = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(text.trim())?.[1]?.toLowerCase();
+  if (!hex) return null;
+  return `#${hex.length === 3 ? [...hex].map((c) => c + c).join("") : hex}`;
+}
+function sameColor(a, b) {
+  return (a ?? "").trim().toLowerCase() === (b ?? "").trim().toLowerCase();
+}
+function colorToRgb(value) {
+  const input = value.trim().toLowerCase();
+  const hex = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(input)?.[1];
+  if (hex) {
+    const full = hex.length <= 4 ? [...hex].map((c) => c + c).join("") : hex;
+    return [0, 2, 4].map((i) => Number.parseInt(full.slice(i, i + 2), 16));
   }
-  const actionsId = `${listboxId}-actions`;
-  const floating = useFloatingLayer({
-    open: isOpen,
-    onOpenChange: setOpen,
-    triggerRef,
-    closeOnEscape,
-    closeOnOutsideClick,
-    matchAnchorWidth: true,
-    focusOnOpen: true,
-    tabExit: "always",
-    sheet: true
-  });
-  const highlighted = useStoreSlice(highlight, (value) => value);
-  const view = useListboxView(registry, query, filter);
-  const isEmpty = view.matchCount === 0;
-  const typeahead = useTypeahead();
-  const region = hasContent(loadError) ? "error" : loading && isEmpty ? "loading" : "ready";
-  const { sentinelRef, request: requestMore } = useLoadMore({
-    enabled: region === "ready" && hasMore && Boolean(onLoadMore) && !loading && !loadingMore,
-    onLoadMore,
-    scrollRef: listboxRef,
-    round: view
-  });
-  const setSentinelRef = useMergedRefs(sentinelRef);
-  const lastOption = view.navigable.filter((id) => !isActionValue(id)).at(-1);
-  React65.useEffect(() => {
-    if (highlighted !== void 0 && highlighted === lastOption) requestMore();
-  }, [highlighted, lastOption, requestMore]);
-  const handleKeyDown = (event) => {
-    if (region === "error") {
-      if (event.key === "Enter" && onRetry && !(event.target instanceof HTMLButtonElement)) {
-        event.preventDefault();
-        onRetry();
-      }
-      return;
-    }
-    const inSearch = event.target instanceof HTMLInputElement;
-    if (inSearch && [" ", "Home", "End"].includes(event.key)) return;
-    const ids = view.navigable;
-    const printable = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
-    if (printable && !inSearch && (event.key !== " " || typeahead.isTyping())) {
-      event.preventDefault();
-      const match = typeahead.find(event.key, ids, highlight.get(), registry.labelOf);
-      if (match !== void 0) {
-        highlight.set(match);
-        revealHighlighted(registry.nodeOf(match));
-      }
-      return;
-    }
-    const moved = handleListboxKeyDown(event, {
-      ids,
-      highlight,
-      activate: (value) => registry.activate(value)
-    });
-    if (moved !== null) revealHighlighted(registry.nodeOf(moved));
+  const fn = /^(rgba?|hsla?)\(([^)]+)\)$/.exec(input);
+  if (!fn) return null;
+  const parts = fn[2].split(/[\s,/]+/).filter(Boolean);
+  if (parts.length < 3) return null;
+  const num = (part, scale) => part.endsWith("%") ? Number.parseFloat(part) / 100 * scale : Number.parseFloat(part);
+  if (fn[1].startsWith("rgb")) {
+    const rgb = parts.slice(0, 3).map((part) => num(part, 255));
+    return rgb.every(Number.isFinite) ? rgb : null;
+  }
+  const h = Number.parseFloat(parts[0]);
+  const s = num(parts[1], 1);
+  const l = num(parts[2], 1);
+  if (![h, s, l].every(Number.isFinite)) return null;
+  const a = s * Math.min(l, 1 - l);
+  const channel = (n) => {
+    const k = (n + h / 30) % 12;
+    return 255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1)));
   };
-  if (!floating.mounted) return /* @__PURE__ */ jsx42("div", { hidden: true, children: items });
-  const activeDescendant = isOpen && highlighted !== void 0 ? optionDomId(listboxId, highlighted) : void 0;
-  return /* @__PURE__ */ jsxs27(
-    FloatingPanel,
+  return [channel(0), channel(8), channel(4)];
+}
+function markContrast(value) {
+  const rgb = colorToRgb(value);
+  if (!rgb) return "dark";
+  const lin = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  const l = 0.2126 * lin(rgb[0]) + 0.7152 * lin(rgb[1]) + 0.0722 * lin(rgb[2]);
+  return l > 0.179 ? "dark" : "light";
+}
+function balancedColumns(count, width, cell, gap) {
+  if (count < 1 || width <= 0 || cell <= 0) return Math.max(1, count);
+  const fit = Math.max(1, Math.floor((width + gap) / (cell + gap)));
+  const rows = Math.ceil(count / Math.min(count, fit));
+  return Math.ceil(count / rows);
+}
+function useBalancedColumns(gridRef, count, cellSelector) {
+  const [columns, setColumns] = React64.useState();
+  const measure = React64.useCallback(() => {
+    const grid = gridRef.current;
+    if (!grid) return;
+    const cell = grid.querySelector(cellSelector)?.offsetHeight ?? 0;
+    const gap = Number.parseFloat(getComputedStyle(grid).columnGap) || 0;
+    setColumns(cell > 0 ? balancedColumns(count, grid.clientWidth, cell, gap) : void 0);
+  }, [gridRef, count, cellSelector]);
+  React64.useLayoutEffect(measure, [measure]);
+  useResizeEffect(gridRef, measure);
+  return columns;
+}
+function firstRowLength(items) {
+  const top = items[0]?.offsetTop;
+  const count = items.findIndex((item) => !item || item.offsetTop !== top);
+  return Math.max(1, count === -1 ? items.length : count);
+}
+function useSwatchGrid(count) {
+  const items = React64.useRef([]);
+  const itemRef = React64.useCallback(
+    (index) => (node) => {
+      items.current[index] = node;
+    },
+    []
+  );
+  const move = React64.useCallback(
+    (event, from, columns) => {
+      const focused = document.activeElement;
+      const current = focused instanceof HTMLElement ? items.current.indexOf(focused) : -1;
+      const next = gridIndex(
+        event.key,
+        current === -1 ? from : current,
+        count,
+        columns ?? firstRowLength(items.current)
+      );
+      if (next === null) return null;
+      event.preventDefault();
+      items.current[next]?.focus();
+      return next;
+    },
+    [count]
+  );
+  const focus = React64.useCallback((index) => {
+    items.current[index]?.focus({ preventScroll: true });
+  }, []);
+  return { itemRef, move, focus };
+}
+
+// src/components/color-swatches/ColorSwatches.tsx
+import * as React65 from "react";
+
+// src/components/color-swatches/ColorSwatches.module.css
+var ColorSwatches_default = {
+  grid: "ColorSwatches_grid"
+};
+
+// src/components/color-swatches/ColorSwatches.tsx
+import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+var COLOR_SWATCHES_LABELS = {
+  group: "\u0426\u0432\u0435\u0442",
+  empty: "\u0411\u0435\u0437 \u0446\u0432\u0435\u0442\u0430",
+  optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E",
+  colorNames: PALETTE_COLOR_NAMES
+};
+function ColorSwatches(props) {
+  const {
+    mode,
+    value,
+    defaultValue,
+    onValueChange,
+    presets = COLOR_PRESETS,
+    palette = PALETTE_ORDER,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx42(
+    SwatchGrid,
     {
       ...rest,
-      floating,
-      size,
-      className: cx(fieldTierClass, menu_default.tier, menu_default.menu, Select_default.content, className),
-      onKeyDown: handleKeyDown,
-      ...toDataAttributes({ searching: query !== "" || void 0 }),
-      children: [
-        searchable ? (
-          // The permanent focus of the panel: no ring, the caret is the indicator (foundation §7).
-          /* @__PURE__ */ jsxs27("div", { className: cx(menu_default.searchRow, Select_default.search), children: [
-            /* @__PURE__ */ jsx42(Icon, { name: "action.search", size: "s" }),
-            /* @__PURE__ */ jsx42(
-              "input",
-              {
-                type: "text",
-                className: menu_default.searchInput,
-                value: query,
-                placeholder: labels.search,
-                "aria-label": labels.search,
-                "aria-controls": region === "error" ? void 0 : listboxId,
-                "aria-activedescendant": activeDescendant,
-                "aria-autocomplete": "list",
-                autoComplete: "off",
-                spellCheck: false,
-                "data-autofocus": "",
-                onChange: (event) => setQuery(event.target.value)
-              }
-            )
-          ] })
-        ) : null,
-        /* @__PURE__ */ jsx42(RegionSwap, { state: region, fill: true, children: region === "error" ? /* @__PURE__ */ jsxs27(EmptyPage.Root, { layout: "compact", size, role: "alert", children: [
-          /* @__PURE__ */ jsx42(EmptyPage.Title, { as: "p", children: loadError }),
-          onRetry ? /* @__PURE__ */ jsx42(EmptyPage.Actions, { children: /* @__PURE__ */ jsxs27(Button.Root, { variant: "soft", tone: "neutral", onClick: onRetry, children: [
-            /* @__PURE__ */ jsx42(Button.Icon, { children: /* @__PURE__ */ jsx42(Icon, { name: "action.refresh" }) }),
-            labels.retry
-          ] }) }) : null
-        ] }) : /* @__PURE__ */ jsxs27(Fragment17, { children: [
-          /* @__PURE__ */ jsxs27(
-            ScrollContainer,
-            {
-              ref: setListboxRef,
-              id: listboxId,
-              role: "listbox",
-              "aria-multiselectable": multiple || void 0,
-              "aria-labelledby": triggerId,
-              "aria-activedescendant": searchable ? void 0 : activeDescendant,
-              "aria-busy": loading || loadingMore || saving || void 0,
-              "aria-owns": actions.length > 0 ? actionsId : void 0,
-              tabIndex: -1,
-              "data-autofocus": searchable ? void 0 : "",
-              className: Select_default.listbox,
-              children: [
-                items,
-                region === "loading" ? /* @__PURE__ */ jsx42(SkeletonRows, { count: LOADING_ROWS2 }) : null,
-                region === "ready" && hasMore ? /* @__PURE__ */ jsx42("div", { ref: setSentinelRef, "aria-hidden": "true", className: menu_default.loadSentinel }) : null,
-                region === "ready" && loadingMore ? /* @__PURE__ */ jsx42(SkeletonRows, { count: LOADING_MORE_ROWS }) : null
-              ]
-            }
-          ),
-          region === "ready" && isEmpty ? /* @__PURE__ */ jsxs27(EmptyPage.Root, { layout: "compact", size, role: "status", children: [
-            /* @__PURE__ */ jsx42(EmptyPage.Title, { as: "p", children: labels.empty }),
-            query !== "" && labels.emptyHint ? /* @__PURE__ */ jsx42(EmptyPage.Description, { children: labels.emptyHint }) : null
-          ] }) : null,
-          actions.length > 0 ? (
-            // Owned by the listbox (`aria-owns`): its options for assistive tech, pinned under
-            // the scroller and the empty state for the eye.
-            // biome-ignore lint/a11y/useSemanticElements: a group of options inside a listbox, not a form fieldset
-            /* @__PURE__ */ jsx42("div", { id: actionsId, role: "group", className: Select_default.actions, children: actions })
-          ) : null
-        ] }) }),
-        /* @__PURE__ */ jsx42(VisuallyHidden, { live: "polite", children: loading || loadingMore ? labels.loading : "" }),
-        /* @__PURE__ */ jsx42(HighlightOnOpen, {})
-      ]
+      hues: mode === "palette",
+      presets,
+      palette,
+      value,
+      defaultValue: defaultValue ?? null,
+      onValueChange
     }
   );
 }
-SelectContent.displayName = "Select.Content";
-function HighlightOnOpen() {
-  const { isOpen, query, filter, selected, registry, highlight } = useSelectContext();
-  const view = useListboxView(registry, query, filter);
-  const latest = React65.useRef({ query, filter, selected });
-  latest.current = { query, filter, selected };
-  React65.useLayoutEffect(() => {
-    if (!isOpen) return;
-    const { query: text, filter: filtered, selected: picked } = latest.current;
-    const first = registry.view(text, filtered).navigable.find((id) => picked.includes(id));
-    highlight.set(first);
-    if (first !== void 0) revealHighlighted(registry.nodeOf(first));
-    return () => highlight.set(void 0);
-  }, [isOpen, registry, highlight]);
-  const latestView = React65.useRef(view);
-  latestView.current = view;
-  React65.useLayoutEffect(() => {
-    if (query !== "") highlight.set(latestView.current.navigable[0]);
-  }, [query, highlight]);
-  React65.useLayoutEffect(() => {
-    if (query === "") return;
-    const current = highlight.get();
-    if (current === void 0 || isActionValue(current) || !view.navigable.includes(current)) {
-      highlight.set(view.navigable[0]);
+function SwatchGrid({
+  hues,
+  presets,
+  palette,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  size: sizeProp,
+  disabled: disabledProp = false,
+  invalid,
+  allowEmpty = false,
+  name,
+  id,
+  className,
+  label,
+  required,
+  optional,
+  hint,
+  hintTone,
+  error,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  labels: labelsProp,
+  ...rest
+}) {
+  const size = useControlSize(sizeProp);
+  const disabled = useInheritedDisabled(disabledProp);
+  const frameSize = useControlSize(void 0);
+  const merged = useLabels(COLOR_SWATCHES_LABELS, labelsProp);
+  const labels = React65.useMemo(
+    () => ({
+      ...merged,
+      colorNames: { ...COLOR_SWATCHES_LABELS.colorNames, ...labelsProp?.colorNames }
+    }),
+    [merged, labelsProp?.colorNames]
+  );
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const ids = useFieldFrame(id, { label, hint, error, invalid }, ariaDescribedBy);
+  const colorOptions = useSwatchOptions(presets, allowEmpty, labels.empty);
+  const hueOptions = usePaletteOptions(palette, allowEmpty, labels.empty, labels.colorNames);
+  const options = hues ? hueOptions : colorOptions;
+  const selectedIndex = options.findIndex((option) => sameColor(option.value, value));
+  const focusIndex = Math.max(0, selectedIndex);
+  const grid = useSwatchGrid(options.length);
+  const gridRef = React65.useRef(null);
+  const columns = useBalancedColumns(gridRef, options.length, "[role='radio']");
+  const labelledBy = ariaLabelledBy ?? ids.labelledBy;
+  const onKeyDown2 = (event) => {
+    const next = grid.move(event, focusIndex);
+    if (next !== null) setValue(options[next]?.value ?? null);
+  };
+  return /* @__PURE__ */ jsx42(
+    FieldFrame,
+    {
+      ...rest,
+      size: frameSize,
+      ids,
+      label,
+      required,
+      optional,
+      hint,
+      hintTone,
+      error,
+      disabled,
+      optionalLabel: labels.optional,
+      group: true,
+      className,
+      children: /* @__PURE__ */ jsxs27(
+        "div",
+        {
+          ref: gridRef,
+          id: ids.controlId,
+          role: "radiogroup",
+          "aria-label": labelledBy ? void 0 : ariaLabel ?? labels.group,
+          "aria-labelledby": labelledBy,
+          "aria-describedby": ids.describedBy,
+          "aria-required": required || void 0,
+          "aria-invalid": ids.invalid || void 0,
+          className: cx(swatchTierClass, swatchGridClass, ColorSwatches_default.grid),
+          "data-base": "control",
+          "data-stretch": "true",
+          style: {
+            "--swatch-count": options.length,
+            "--swatch-columns": columns
+          },
+          ...toDataAttributes({
+            size,
+            invalid: ids.invalid || void 0,
+            disabled: disabled || void 0
+          }),
+          onKeyDown: disabled ? void 0 : onKeyDown2,
+          children: [
+            options.map((option, index) => {
+              const selected = index === selectedIndex;
+              return (
+                // biome-ignore lint/a11y/useSemanticElements: a swatch is a styled button in a roving radiogroup; a native radio cannot carry the color fill and check mark
+                /* @__PURE__ */ jsx42(
+                  "button",
+                  {
+                    ref: grid.itemRef(index),
+                    type: "button",
+                    role: "radio",
+                    "aria-checked": selected,
+                    "aria-label": option.label,
+                    title: option.label,
+                    tabIndex: index === focusIndex ? 0 : -1,
+                    disabled,
+                    className: cx(swatchClass, hues && option.value && palette_default.hue),
+                    ...toDataAttributes({
+                      state: selected ? "checked" : "unchecked",
+                      contrast: option.contrast,
+                      color: hues ? option.value ?? void 0 : void 0
+                    }),
+                    onClick: () => setValue(option.value),
+                    children: /* @__PURE__ */ jsx42(SwatchContent, { value: option.value, selected, hue: hues })
+                  },
+                  option.value ?? "empty"
+                )
+              );
+            }),
+            name ? /* @__PURE__ */ jsx42("input", { type: "hidden", name, value: value ?? "" }) : null
+          ]
+        }
+      )
     }
-  }, [view, query, highlight]);
-  return null;
-}
-function SelectGroup({ className, ...rest }) {
-  return /* @__PURE__ */ jsx42(MenuGroup, { ...rest, className: cx(Select_default.group, className) });
-}
-SelectGroup.displayName = "Select.Group";
-function SelectSeparator({ className, ...rest }) {
-  return /* @__PURE__ */ jsx42(Divider, { ...rest, className: cx(menu_default.separator, Select_default.separator, className) });
+  );
 }
-SelectSeparator.displayName = "Select.Separator";
-var Select = {
-  Root: SelectRoot,
-  Trigger: SelectTrigger,
-  Value: SelectValue,
-  TriggerIcon: SelectTriggerIcon,
-  Content: SelectContent,
-  Item: SelectItem,
-  ItemIcon: SelectItemIcon,
-  ItemText: SelectItemText,
-  ItemDescription: SelectItemDescription,
-  ItemMeta: SelectItemMeta,
-  Group: SelectGroup,
-  Separator: SelectSeparator,
-  Action: SelectAction
-};
 
 export {
   AnchorRectProvider,
@@ -8808,6 +8808,7 @@ export {
   rovingIndex,
   useImageStatus,
   Avatar,
+  Skeleton,
   Label,
   Hint,
   FieldCellContext,
@@ -8834,9 +8835,10 @@ export {
   Thumbnail,
   RegionSwap,
   useSwapIn,
-  Popover,
   tooltipSurface_default,
   Tooltip,
+  nodeText,
+  Popover,
   FieldActionButton,
   FieldCopyButton,
   setControlValue,
@@ -8851,7 +8853,6 @@ export {
   isComposingKey,
   revealHighlighted,
   handleListboxKeyDown,
-  Skeleton,
   resolveValue,
   segmentFill,
   formatProgressValue,
@@ -8866,7 +8867,8 @@ export {
   getPasswordStrength,
   Input,
   EmptyPage,
-  nodeText,
+  useLoadMore,
+  Select,
   COLOR_PRESETS,
   useSwatchOptions,
   swatchClass,
@@ -8881,7 +8883,5 @@ export {
   sameColor,
   useBalancedColumns,
   useSwatchGrid,
-  ColorSwatches,
-  useLoadMore,
-  Select
+  ColorSwatches
 };