prime-ui-kit 0.9.1 → 0.9.2

package/dist/chunks/{chunk-NHOWNIAR.js → chunk-ZEFCDEEQ.js}

@@ -15,11 +15,137 @@ function useControlSize(sizeProp) {
   return sizeProp ?? host ?? "m";
 }
 
-// src/components/scroll-container/ScrollContainer.tsx
+// src/components/spinner/Spinner.tsx
+import * as React2 from "react";
+
+// src/internal/cx.ts
+function cx(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+// src/internal/data-attributes.ts
+function toDataAttributes(input) {
+  const result = {};
+  for (const [key, value] of Object.entries(input)) {
+    if (value === void 0) {
+      continue;
+    }
+    const attributeName = `data-${key}`;
+    result[attributeName] = typeof value === "boolean" ? String(value) : `${value}`;
+  }
+  return result;
+}
+
+// src/internal/iconBox.module.css
+var iconBox_default = {
+  box: "iconBox_box",
+  xs: "iconBox_xs",
+  s: "iconBox_s",
+  m: "iconBox_m",
+  l: "iconBox_l",
+  xl: "iconBox_xl",
+  inherit: "iconBox_inherit"
+};
+
+// src/internal/iconBox.ts
+function iconBoxClass(size, tier) {
+  return cx(iconBox_default.box, iconBox_default[size ?? tier ?? "m"], size === void 0 && iconBox_default.inherit);
+}
+
+// src/internal/textTone.module.css
+var textTone_default = {
+  tone: "textTone_tone"
+};
+
+// src/internal/VisuallyHidden.module.css
+var VisuallyHidden_default = {
+  root: "VisuallyHidden_root"
+};
+
+// src/internal/VisuallyHidden.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var visuallyHiddenClass = VisuallyHidden_default.root;
+function VisuallyHidden({ className, ...rest }) {
+  return /* @__PURE__ */ jsx2("span", { className: cx(VisuallyHidden_default.root, className), ...rest });
+}
+
+// src/components/spinner/Spinner.module.css
+var Spinner_default = {
+  root: "Spinner_root",
+  ring: "Spinner_ring",
+  primeSpinnerTurn: "Spinner_primeSpinnerTurn"
+};
+
+// src/components/spinner/Spinner.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var SPINNER_LABELS = {
+  loading: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430"
+};
+function Spinner({
+  size: sizeProp,
+  tone = "default",
+  labels: labelsProp,
+  className,
+  ...rest
+}) {
+  const controlSize = useOptionalControlSize();
+  const labels = React2.useMemo(() => ({ ...SPINNER_LABELS, ...labelsProp }), [labelsProp]);
+  const size = sizeProp ?? controlSize ?? "m";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "status",
+      className: cx(Spinner_default.root, iconBoxClass(sizeProp, controlSize), textTone_default.tone, className),
+      ...toDataAttributes({ size, tone: tone === "default" ? void 0 : tone }),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: Spinner_default.ring, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx3(VisuallyHidden, { children: labels.loading })
+      ]
+    }
+  );
+}
+
+// src/internal/fieldSurface.module.css
+var fieldSurface_default = {
+  surface: "fieldSurface_surface"
+};
+
+// src/internal/fieldTier.module.css
+var fieldTier_default = {
+  tier: "fieldTier_tier"
+};
+
+// src/internal/fieldTrigger.module.css
+var fieldTrigger_default = {
+  trigger: "fieldTrigger_trigger"
+};
+
+// src/internal/fieldClasses.ts
+var fieldSurfaceClass = fieldSurface_default.surface;
+var fieldTierClass = fieldTier_default.tier;
+var fieldTriggerClass = `${fieldTier_default.tier} ${fieldSurface_default.surface} ${fieldTrigger_default.trigger}`;
+
+// src/internal/iconLayout.ts
 import * as React3 from "react";
+function iconLayout(children, iconType) {
+  const content = React3.Children.toArray(children).filter(
+    (child) => !(typeof child === "string" && child.trim() === "")
+  );
+  const isIcon = (child) => React3.isValidElement(child) && child.type === iconType;
+  const iconOnly = content.length > 0 && content.every(isIcon);
+  return {
+    iconOnly,
+    leadingIcon: !iconOnly && content.length > 0 && isIcon(content[0]),
+    trailingIcon: !iconOnly && content.length > 0 && isIcon(content[content.length - 1])
+  };
+}
+
+// src/internal/slot.tsx
+import * as React5 from "react";
 
 // src/hooks/useMergedRefs.ts
-import * as React2 from "react";
+import * as React4 from "react";
 
 // src/internal/mergeRefs.ts
 function mergeRefs(...refs) {
@@ -37,144 +163,182 @@ function mergeRefs(...refs) {
 
 // src/hooks/useMergedRefs.ts
 function useMergedRefs(...refs) {
-  return React2.useMemo(() => mergeRefs(...refs), refs);
-}
-
-// src/internal/cx.ts
-function cx(...classNames) {
-  return classNames.filter(Boolean).join(" ");
+  return React4.useMemo(() => mergeRefs(...refs), refs);
 }
 
-// src/internal/data-attributes.ts
-function toDataAttributes(input) {
-  const result = {};
-  for (const [key, value] of Object.entries(input)) {
-    if (value === void 0) {
-      continue;
+// src/internal/slot.tsx
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+var isPrevented = (event) => typeof event === "object" && event !== null && event.defaultPrevented === true;
+function mergeProps(slotProps, childProps) {
+  const merged = { ...slotProps };
+  for (const key of Object.keys(childProps)) {
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    if (key === "ref") continue;
+    if (key === "className") {
+      if (typeof childValue === "function" && typeof slotValue === "string") {
+        const slotClass = slotValue;
+        merged[key] = (...args) => {
+          const resolved = childValue(...args);
+          return [slotClass, resolved].filter(Boolean).join(" ") || void 0;
+        };
+      } else {
+        const parts = [slotValue, childValue].filter(Boolean);
+        merged[key] = parts.length > 0 ? parts.join(" ") : void 0;
+      }
+    } else if (key === "style") {
+      merged[key] = slotValue != null && childValue != null ? { ...slotValue, ...childValue } : childValue ?? slotValue;
+    } else if (key === "aria-describedby" && slotValue && childValue) {
+      merged[key] = `${childValue} ${slotValue}`;
+    } else if (key.startsWith("on") && typeof slotValue === "function" && typeof childValue === "function") {
+      merged[key] = (...args) => {
+        childValue(...args);
+        if (!isPrevented(args[0])) slotValue(...args);
+      };
+    } else if (childValue !== void 0) {
+      merged[key] = childValue;
     }
-    const attributeName = `data-${key}`;
-    result[attributeName] = typeof value === "boolean" ? String(value) : `${value}`;
   }
-  return result;
+  return merged;
 }
+function blockDisabledClick(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+function Slot({ children, ref, ...slotProps }) {
+  const child = React5.isValidElement(children) ? children : null;
+  const childRef = child?.props.ref ?? void 0;
+  const composedRef = useMergedRefs(ref, childRef);
+  if (!child) return /* @__PURE__ */ jsx4(Fragment, { children });
+  const merged = mergeProps(slotProps, child.props);
+  const disabled = slotProps["aria-disabled"] === true || slotProps["aria-disabled"] === "true";
+  if (disabled) merged.onClickCapture = blockDisabledClick;
+  return React5.cloneElement(child, { ...merged, ref: composedRef });
+}
+Slot.displayName = "Slot";
 
-// src/components/scroll-container/ScrollContainer.module.css
-var ScrollContainer_default = {
-  root: "ScrollContainer_root",
-  vertical: "ScrollContainer_vertical",
-  horizontal: "ScrollContainer_horizontal",
-  both: "ScrollContainer_both",
-  overscrollContain: "ScrollContainer_overscrollContain",
-  overscrollNone: "ScrollContainer_overscrollNone",
-  scrollbarHidden: "ScrollContainer_scrollbarHidden"
+// src/internal/touchTarget.module.css
+var touchTarget_default = {
+  target: "touchTarget_target",
+  targetBlock: "touchTarget_targetBlock"
 };
 
-// src/components/scroll-container/ScrollContainer.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var axisClass = {
-  vertical: ScrollContainer_default.vertical,
-  horizontal: ScrollContainer_default.horizontal,
-  both: ScrollContainer_default.both
+// src/internal/touchTarget.ts
+var touchTargetClass = touchTarget_default.target;
+var touchTargetBlockClass = touchTarget_default.targetBlock;
+
+// src/components/button/Button.module.css
+var Button_default = {
+  root: "Button_root",
+  icon: "Button_icon",
+  spinner: "Button_spinner"
 };
-function useEdgeOverflow(ref, enabled, horizontal) {
-  const [overflow, setOverflow] = React3.useState({ start: false, end: false });
-  React3.useLayoutEffect(() => {
-    const node = ref.current;
-    if (!enabled || !node) return;
-    const update = () => {
-      const position = horizontal ? Math.abs(node.scrollLeft) : node.scrollTop;
-      const max = horizontal ? node.scrollWidth - node.clientWidth : node.scrollHeight - node.clientHeight;
-      const start = position > 1;
-      const end = max - position > 1;
-      setOverflow((prev) => prev.start === start && prev.end === end ? prev : { start, end });
-    };
-    let frame = 0;
-    const schedule = () => {
-      if (frame) return;
-      frame = requestAnimationFrame(() => {
-        frame = 0;
-        update();
-      });
-    };
-    update();
-    node.addEventListener("scroll", schedule, { passive: true });
-    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
-    const observeChildren = () => {
-      for (const child of Array.from(node.children)) resize?.observe(child);
-    };
-    resize?.observe(node);
-    observeChildren();
-    const mutation = new MutationObserver(() => {
-      observeChildren();
-      schedule();
-    });
-    mutation.observe(node, { childList: true });
-    return () => {
-      cancelAnimationFrame(frame);
-      node.removeEventListener("scroll", schedule);
-      resize?.disconnect();
-      mutation.disconnect();
-    };
-  }, [ref, enabled, horizontal]);
-  return enabled ? overflow : { start: false, end: false };
-}
-function ScrollContainer({
-  as: Component = "div",
-  axis = "vertical",
-  overscrollBehavior = "contain",
-  fade = false,
-  scrollbar = "thin",
+
+// src/components/button/Button.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function ButtonRoot({
+  children,
   className,
+  variant = "solid",
+  tone = "accent",
+  size: sizeProp,
+  fullWidth,
+  type = "button",
+  loading = false,
+  disabled,
+  asChild = false,
+  onClick: onClick2,
   ref,
   ...rest
 }) {
-  const innerRef = React3.useRef(null);
-  const mergedRef = useMergedRefs(innerRef, ref);
-  const horizontal = axis === "horizontal";
-  const overflow = useEdgeOverflow(innerRef, fade, horizontal);
-  return /* @__PURE__ */ jsx2(
-    Component,
+  const size = useControlSize(sizeProp);
+  const isDisabled = disabled || loading;
+  const layout = iconLayout(children, ButtonIcon);
+  const dataAttrs = toDataAttributes({
+    variant,
+    tone,
+    size,
+    // `disabled` only: a loading button is busy, not unavailable, and keeps its colors.
+    disabled: disabled || void 0,
+    loading,
+    "full-width": fullWidth,
+    "icon-only": layout.iconOnly || void 0,
+    "leading-icon": layout.leadingIcon || void 0,
+    "trailing-icon": layout.trailingIcon || void 0,
+    // Without a leading icon the spinner is centered over the hidden label: width stays put.
+    "loading-overlay": loading && !asChild && !layout.leadingIcon && !layout.iconOnly || void 0
+  });
+  const classes = cx(fieldTierClass, touchTargetClass, Button_default.root, className);
+  if (asChild) {
+    return /* @__PURE__ */ jsx5(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx5(
+      Slot,
+      {
+        ...rest,
+        ref,
+        className: classes,
+        "aria-disabled": isDisabled || void 0,
+        "aria-busy": loading || void 0,
+        onClick: isDisabled ? (event) => event.preventDefault() : onClick2,
+        ...dataAttrs,
+        children
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx5(
+    "button",
     {
-      ref: mergedRef,
-      className: cx(
-        ScrollContainer_default.root,
-        axisClass[axis],
-        overscrollBehavior === "contain" && ScrollContainer_default.overscrollContain,
-        overscrollBehavior === "none" && ScrollContainer_default.overscrollNone,
-        scrollbar === "hidden" && ScrollContainer_default.scrollbarHidden,
-        className
-      ),
-      ...toDataAttributes({
-        fade: fade ? horizontal ? "horizontal" : "vertical" : void 0,
-        "overflow-start": overflow.start || void 0,
-        "overflow-end": overflow.end || void 0
-      }),
-      ...rest
+      ...rest,
+      ref,
+      type,
+      className: classes,
+      disabled: isDisabled,
+      "aria-busy": loading || void 0,
+      onClick: onClick2,
+      ...dataAttrs,
+      children: /* @__PURE__ */ jsxs2(ControlSizeProvider, { value: size, children: [
+        loading ? /* @__PURE__ */ jsx5(Spinner, { className: Button_default.spinner, "aria-hidden": "true" }) : null,
+        children
+      ] })
     }
   );
 }
+ButtonRoot.displayName = "Button.Root";
+function ButtonIcon({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx5("span", { className: cx(Button_default.icon, className), "aria-hidden": "true", ...rest, children });
+}
+ButtonIcon.displayName = "Button.Icon";
+var Button = { Root: ButtonRoot, Icon: ButtonIcon };
 
-// src/internal/iconBox.module.css
-var iconBox_default = {
-  box: "iconBox_box",
-  xs: "iconBox_xs",
-  s: "iconBox_s",
-  m: "iconBox_m",
-  l: "iconBox_l",
-  xl: "iconBox_xl",
-  inherit: "iconBox_inherit"
+// src/components/divider/Divider.module.css
+var Divider_default = {
+  root: "Divider_root",
+  content: "Divider_content"
 };
 
-// src/internal/iconBox.ts
-function iconBoxClass(size, tier) {
-  return cx(iconBox_default.box, iconBox_default[size ?? tier ?? "m"], size === void 0 && iconBox_default.inherit);
+// src/components/divider/Divider.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Divider({
+  orientation = "horizontal",
+  align = "center",
+  size = "m",
+  children,
+  className,
+  role = "separator",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ...rest,
+      className: cx(Divider_default.root, className),
+      role,
+      ...orientation === "vertical" ? { "aria-orientation": "vertical" } : {},
+      ...toDataAttributes({ orientation, align, size }),
+      children: children != null ? /* @__PURE__ */ jsx6(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx6("span", { className: Divider_default.content, children }) }) : null
+    }
+  );
 }
 
-// src/internal/textTone.module.css
-var textTone_default = {
-  tone: "textTone_tone"
-};
-
 // src/icons/Icon.module.css
 var Icon_default = {
   root: "Icon_root"
@@ -340,7 +504,7 @@ var iconRegistry = {
 };
 
 // src/icons/Icon.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function IconSvg({
   glyph: GlyphSvg,
   className,
@@ -350,7 +514,7 @@ function IconSvg({
   ...rest
 }) {
   const tier = useOptionalControlSize();
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx7(
     GlyphSvg,
     {
       className: cx(Icon_default.root, iconBoxClass(size, tier), textTone_default.tone, className),
@@ -362,236 +526,118 @@ function IconSvg({
   );
 }
 function Icon({ name, ...rest }) {
-  return /* @__PURE__ */ jsx3(IconSvg, { glyph: iconRegistry[name], ...rest });
+  return /* @__PURE__ */ jsx7(IconSvg, { glyph: iconRegistry[name], ...rest });
 }
 function createIcon(glyph) {
   function DomainIcon(props) {
-    return /* @__PURE__ */ jsx3(IconSvg, { glyph, ...props });
+    return /* @__PURE__ */ jsx7(IconSvg, { glyph, ...props });
   }
   DomainIcon.displayName = `Icon(${glyph.displayName ?? "Glyph"})`;
   return DomainIcon;
 }
 
-// src/components/spinner/Spinner.tsx
-import * as React4 from "react";
-
-// src/internal/VisuallyHidden.module.css
-var VisuallyHidden_default = {
-  root: "VisuallyHidden_root"
-};
-
-// src/internal/VisuallyHidden.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var visuallyHiddenClass = VisuallyHidden_default.root;
-function VisuallyHidden({ className, ...rest }) {
-  return /* @__PURE__ */ jsx4("span", { className: cx(VisuallyHidden_default.root, className), ...rest });
-}
-
-// src/components/spinner/Spinner.module.css
-var Spinner_default = {
-  root: "Spinner_root",
-  ring: "Spinner_ring",
-  primeSpinnerTurn: "Spinner_primeSpinnerTurn"
-};
-
-// src/components/spinner/Spinner.tsx
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
-var SPINNER_LABELS = {
-  loading: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430"
-};
-function Spinner({
-  size: sizeProp,
-  tone = "default",
-  labels: labelsProp,
-  className,
-  ...rest
-}) {
-  const controlSize = useOptionalControlSize();
-  const labels = React4.useMemo(() => ({ ...SPINNER_LABELS, ...labelsProp }), [labelsProp]);
-  const size = sizeProp ?? controlSize ?? "m";
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      role: "status",
-      className: cx(Spinner_default.root, iconBoxClass(sizeProp, controlSize), textTone_default.tone, className),
-      ...toDataAttributes({ size, tone: tone === "default" ? void 0 : tone }),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx5("span", { className: Spinner_default.ring, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx5(VisuallyHidden, { children: labels.loading })
-      ]
-    }
-  );
-}
-
-// src/internal/fieldSurface.module.css
-var fieldSurface_default = {
-  surface: "fieldSurface_surface"
-};
-
-// src/internal/fieldTier.module.css
-var fieldTier_default = {
-  tier: "fieldTier_tier"
-};
-
-// src/internal/fieldTrigger.module.css
-var fieldTrigger_default = {
-  trigger: "fieldTrigger_trigger"
-};
-
-// src/internal/fieldClasses.ts
-var fieldSurfaceClass = fieldSurface_default.surface;
-var fieldTierClass = fieldTier_default.tier;
-var fieldTriggerClass = `${fieldTier_default.tier} ${fieldSurface_default.surface} ${fieldTrigger_default.trigger}`;
-
-// src/internal/iconLayout.ts
-import * as React5 from "react";
-function iconLayout(children, iconType) {
-  const content = React5.Children.toArray(children).filter(
-    (child) => !(typeof child === "string" && child.trim() === "")
-  );
-  const isIcon = (child) => React5.isValidElement(child) && child.type === iconType;
-  const iconOnly = content.length > 0 && content.every(isIcon);
-  return {
-    iconOnly,
-    leadingIcon: !iconOnly && content.length > 0 && isIcon(content[0]),
-    trailingIcon: !iconOnly && content.length > 0 && isIcon(content[content.length - 1])
-  };
-}
+// src/components/scroll-container/ScrollContainer.tsx
+import * as React7 from "react";
 
-// src/internal/slot.tsx
+// src/hooks/useEdgeOverflow.ts
 import * as React6 from "react";
-import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
-var isPrevented = (event) => typeof event === "object" && event !== null && event.defaultPrevented === true;
-function mergeProps(slotProps, childProps) {
-  const merged = { ...slotProps };
-  for (const key of Object.keys(childProps)) {
-    const slotValue = slotProps[key];
-    const childValue = childProps[key];
-    if (key === "ref") continue;
-    if (key === "className") {
-      if (typeof childValue === "function" && typeof slotValue === "string") {
-        const slotClass = slotValue;
-        merged[key] = (...args) => {
-          const resolved = childValue(...args);
-          return [slotClass, resolved].filter(Boolean).join(" ") || void 0;
-        };
-      } else {
-        const parts = [slotValue, childValue].filter(Boolean);
-        merged[key] = parts.length > 0 ? parts.join(" ") : void 0;
-      }
-    } else if (key === "style") {
-      merged[key] = slotValue != null && childValue != null ? { ...slotValue, ...childValue } : childValue ?? slotValue;
-    } else if (key === "aria-describedby" && slotValue && childValue) {
-      merged[key] = `${childValue} ${slotValue}`;
-    } else if (key.startsWith("on") && typeof slotValue === "function" && typeof childValue === "function") {
-      merged[key] = (...args) => {
-        childValue(...args);
-        if (!isPrevented(args[0])) slotValue(...args);
-      };
-    } else if (childValue !== void 0) {
-      merged[key] = childValue;
-    }
-  }
-  return merged;
-}
-function blockDisabledClick(event) {
-  event.preventDefault();
-  event.stopPropagation();
-}
-function Slot({ children, ref, ...slotProps }) {
-  const child = React6.isValidElement(children) ? children : null;
-  const childRef = child?.props.ref ?? void 0;
-  const composedRef = useMergedRefs(ref, childRef);
-  if (!child) return /* @__PURE__ */ jsx6(Fragment, { children });
-  const merged = mergeProps(slotProps, child.props);
-  const disabled = slotProps["aria-disabled"] === true || slotProps["aria-disabled"] === "true";
-  if (disabled) merged.onClickCapture = blockDisabledClick;
-  return React6.cloneElement(child, { ...merged, ref: composedRef });
+var NONE = { start: false, end: false };
+function useEdgeOverflow(ref, enabled, horizontal) {
+  const [overflow, setOverflow] = React6.useState(NONE);
+  React6.useLayoutEffect(() => {
+    const node = ref.current;
+    if (!enabled || !node) return;
+    const update = () => {
+      const position = horizontal ? Math.abs(node.scrollLeft) : node.scrollTop;
+      const max = horizontal ? node.scrollWidth - node.clientWidth : node.scrollHeight - node.clientHeight;
+      const start = position > 1;
+      const end = max - position > 1;
+      setOverflow((prev) => prev.start === start && prev.end === end ? prev : { start, end });
+    };
+    let frame = 0;
+    const schedule = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        update();
+      });
+    };
+    update();
+    node.addEventListener("scroll", schedule, { passive: true });
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+    const observeChildren = () => {
+      for (const child of Array.from(node.children)) resize?.observe(child);
+    };
+    resize?.observe(node);
+    observeChildren();
+    const mutation = new MutationObserver(() => {
+      observeChildren();
+      schedule();
+    });
+    mutation.observe(node, { childList: true });
+    return () => {
+      cancelAnimationFrame(frame);
+      node.removeEventListener("scroll", schedule);
+      resize?.disconnect();
+      mutation.disconnect();
+    };
+  }, [ref, enabled, horizontal]);
+  return enabled ? overflow : NONE;
 }
-Slot.displayName = "Slot";
 
-// src/components/button/Button.module.css
-var Button_default = {
-  root: "Button_root",
-  icon: "Button_icon",
-  spinner: "Button_spinner"
+// src/components/scroll-container/ScrollContainer.module.css
+var ScrollContainer_default = {
+  root: "ScrollContainer_root",
+  vertical: "ScrollContainer_vertical",
+  horizontal: "ScrollContainer_horizontal",
+  both: "ScrollContainer_both",
+  overscrollContain: "ScrollContainer_overscrollContain",
+  overscrollNone: "ScrollContainer_overscrollNone",
+  scrollbarHidden: "ScrollContainer_scrollbarHidden"
 };
 
-// src/components/button/Button.tsx
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
-function ButtonRoot({
-  children,
+// src/components/scroll-container/ScrollContainer.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var axisClass = {
+  vertical: ScrollContainer_default.vertical,
+  horizontal: ScrollContainer_default.horizontal,
+  both: ScrollContainer_default.both
+};
+function ScrollContainer({
+  as: Component = "div",
+  axis = "vertical",
+  overscrollBehavior = "contain",
+  fade = false,
+  scrollbar = "thin",
   className,
-  variant = "solid",
-  tone = "accent",
-  size: sizeProp,
-  fullWidth,
-  type = "button",
-  loading = false,
-  disabled,
-  asChild = false,
-  onClick: onClick2,
   ref,
   ...rest
 }) {
-  const size = useControlSize(sizeProp);
-  const isDisabled = disabled || loading;
-  const layout = iconLayout(children, ButtonIcon);
-  const dataAttrs = toDataAttributes({
-    variant,
-    tone,
-    size,
-    // `disabled` only: a loading button is busy, not unavailable, and keeps its colors.
-    disabled: disabled || void 0,
-    loading,
-    "full-width": fullWidth,
-    "icon-only": layout.iconOnly || void 0,
-    "leading-icon": layout.leadingIcon || void 0,
-    "trailing-icon": layout.trailingIcon || void 0,
-    // Without a leading icon the spinner is centered over the hidden label: width stays put.
-    "loading-overlay": loading && !asChild && !layout.leadingIcon && !layout.iconOnly || void 0
-  });
-  const classes = cx(fieldTierClass, Button_default.root, className);
-  if (asChild) {
-    return /* @__PURE__ */ jsx7(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx7(
-      Slot,
-      {
-        ...rest,
-        ref,
-        className: classes,
-        "aria-disabled": isDisabled || void 0,
-        "aria-busy": loading || void 0,
-        onClick: isDisabled ? (event) => event.preventDefault() : onClick2,
-        ...dataAttrs,
-        children
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsx7(
-    "button",
+  const innerRef = React7.useRef(null);
+  const mergedRef = useMergedRefs(innerRef, ref);
+  const horizontal = axis === "horizontal";
+  const overflow = useEdgeOverflow(innerRef, fade, horizontal);
+  return /* @__PURE__ */ jsx8(
+    Component,
     {
-      ...rest,
-      ref,
-      type,
-      className: classes,
-      disabled: isDisabled,
-      "aria-busy": loading || void 0,
-      onClick: onClick2,
-      ...dataAttrs,
-      children: /* @__PURE__ */ jsxs2(ControlSizeProvider, { value: size, children: [
-        loading ? /* @__PURE__ */ jsx7(Spinner, { className: Button_default.spinner, "aria-hidden": "true" }) : null,
-        children
-      ] })
+      ref: mergedRef,
+      className: cx(
+        ScrollContainer_default.root,
+        axisClass[axis],
+        overscrollBehavior === "contain" && ScrollContainer_default.overscrollContain,
+        overscrollBehavior === "none" && ScrollContainer_default.overscrollNone,
+        scrollbar === "hidden" && ScrollContainer_default.scrollbarHidden,
+        className
+      ),
+      ...toDataAttributes({
+        fade: fade ? horizontal ? "horizontal" : "vertical" : void 0,
+        "overflow-start": overflow.start || void 0,
+        "overflow-end": overflow.end || void 0
+      }),
+      ...rest
     }
   );
 }
-ButtonRoot.displayName = "Button.Root";
-function ButtonIcon({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx7("span", { className: cx(Button_default.icon, className), "aria-hidden": "true", ...rest, children });
-}
-ButtonIcon.displayName = "Button.Icon";
-var Button = { Root: ButtonRoot, Icon: ButtonIcon };
 
 // src/internal/states.ts
 var controlSizes = ["xs", "s", "m", "l", "xl"];
@@ -646,9 +692,9 @@ var Hint_default = {
 };
 
 // src/components/hint/Hint.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function HintRoot({ className, size = "m", invalid, disabled, children, ...rest }) {
-  return /* @__PURE__ */ jsx8(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx9(
     "p",
     {
       ...rest,
@@ -664,7 +710,7 @@ function HintRoot({ className, size = "m", invalid, disabled, children, ...rest
 }
 HintRoot.displayName = "Hint.Root";
 function HintIcon({ className, ...rest }) {
-  return /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: cx(Hint_default.icon, className), ...rest });
+  return /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", className: cx(Hint_default.icon, className), ...rest });
 }
 HintIcon.displayName = "Hint.Icon";
 var Hint = { Root: HintRoot, Icon: HintIcon };
@@ -679,7 +725,7 @@ var Label_default = {
 };
 
 // src/components/label/Label.tsx
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var LABEL_LABELS = { optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E" };
 function LabelRoot({
   className,
@@ -695,7 +741,7 @@ function LabelRoot({
   const size = useControlSize(sizeProp);
   return (
     // biome-ignore lint/a11y/noLabelWithoutControl: field label primitive; association via htmlFor or wrapping control is caller responsibility
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       "label",
       {
         ref,
@@ -705,8 +751,8 @@ function LabelRoot({
         ...toDataAttributes({ disabled: disabled || void 0, size }),
         children: /* @__PURE__ */ jsxs3(ControlSizeProvider, { value: size, children: [
           children,
-          required ? /* @__PURE__ */ jsx9("span", { className: Label_default.asterisk, "aria-hidden": "true", children: "*" }) : null,
-          optional ? /* @__PURE__ */ jsx9("span", { className: Label_default.optional, children: labels?.optional ?? LABEL_LABELS.optional }) : null
+          required ? /* @__PURE__ */ jsx10("span", { className: Label_default.asterisk, "aria-hidden": "true", children: "*" }) : null,
+          optional ? /* @__PURE__ */ jsx10("span", { className: Label_default.optional, children: labels?.optional ?? LABEL_LABELS.optional }) : null
         ] })
       }
     )
@@ -714,11 +760,11 @@ function LabelRoot({
 }
 LabelRoot.displayName = "Label.Root";
 function LabelIcon({ className, ...rest }) {
-  return /* @__PURE__ */ jsx9("span", { className: cx(Label_default.icon, className), "aria-hidden": "true", ...rest });
+  return /* @__PURE__ */ jsx10("span", { className: cx(Label_default.icon, className), "aria-hidden": "true", ...rest });
 }
 LabelIcon.displayName = "Label.Icon";
 function LabelDescription({ className, ...rest }) {
-  return /* @__PURE__ */ jsx9("span", { className: cx(Label_default.description, className), ...rest });
+  return /* @__PURE__ */ jsx10("span", { className: cx(Label_default.description, className), ...rest });
 }
 LabelDescription.displayName = "Label.Description";
 var Label = {
@@ -728,21 +774,21 @@ var Label = {
 };
 
 // src/components/checkbox/Checkbox.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 
 // src/hooks/useControllableState.ts
-import * as React7 from "react";
+import * as React8 from "react";
 function useControllableState({
   value,
   defaultValue,
   onChange
 }) {
-  const [internalValue, setInternalValue] = React7.useState(defaultValue);
+  const [internalValue, setInternalValue] = React8.useState(defaultValue);
   const isControlled = value !== void 0;
   const currentValue = isControlled ? value : internalValue;
-  const currentValueRef = React7.useRef(currentValue);
+  const currentValueRef = React8.useRef(currentValue);
   currentValueRef.current = currentValue;
-  const setValue = React7.useCallback(
+  const setValue = React8.useCallback(
     (nextValue) => {
       const previousValue = currentValueRef.current;
       const computedValue = typeof nextValue === "function" ? nextValue(previousValue) : nextValue;
@@ -773,7 +819,7 @@ var ChoiceField_default = {
 };
 
 // src/internal/ChoiceField.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var choiceInputClass = ChoiceField_default.input;
 var choiceVisualClass = ChoiceField_default.visual;
 var choiceTierClass = ChoiceField_default.tier;
@@ -789,7 +835,7 @@ function ChoiceField({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsx10(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx11(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cx(ChoiceField_default.tier, ChoiceField_default.field, className),
@@ -802,20 +848,20 @@ function ChoiceField({
       }),
       children: [
         /* @__PURE__ */ jsxs4("label", { htmlFor: ids.controlId, className: ChoiceField_default.row, children: [
-          /* @__PURE__ */ jsx10("span", { className: ChoiceField_default.controlCell, children: control }),
+          /* @__PURE__ */ jsx11("span", { className: cx(ChoiceField_default.controlCell, touchTargetClass), children: control }),
           children
         ] }),
-        ids.showError ? /* @__PURE__ */ jsx10(Hint.Root, { id: ids.errorId, size, invalid: true, className: ChoiceField_default.support, children: error }) : ids.showHint ? /* @__PURE__ */ jsx10(Hint.Root, { id: ids.hintId, size, disabled, className: ChoiceField_default.support, children: hint }) : null
+        ids.showError ? /* @__PURE__ */ jsx11(Hint.Root, { id: ids.errorId, size, invalid: true, className: ChoiceField_default.support, children: error }) : ids.showHint ? /* @__PURE__ */ jsx11(Hint.Root, { id: ids.hintId, size, disabled, className: ChoiceField_default.support, children: hint }) : null
       ]
     }
   ) });
 }
 function ChoiceLabel({ className, ...rest }) {
-  return /* @__PURE__ */ jsx10("span", { className: cx(ChoiceField_default.text, className), ...rest });
+  return /* @__PURE__ */ jsx11("span", { className: cx(ChoiceField_default.text, className), ...rest });
 }
 
 // src/internal/FieldFrame.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 
 // src/internal/formatLabel.ts
 function formatLabel(template, values) {
@@ -838,7 +884,7 @@ var FieldFrame_default = {
 };
 
 // src/internal/FieldFrame.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 function hasContent(node) {
   return node != null && node !== false && node !== "";
 }
@@ -848,7 +894,7 @@ function useFieldFrame(explicitId, {
   error,
   invalid
 }, ariaDescribedBy) {
-  const generated = React8.useId();
+  const generated = React9.useId();
   const controlId = explicitId ?? generated;
   const labelId = `${controlId}-label`;
   const hintId = `${controlId}-hint`;
@@ -888,7 +934,7 @@ function FieldFrame({
 }) {
   const { showError, showHint } = ids;
   const showSupport = showError || showHint || counter != null || reserveSupportRow;
-  const labelNode = hasContent(label) ? /* @__PURE__ */ jsx11(
+  const labelNode = hasContent(label) ? /* @__PURE__ */ jsx12(
     Label.Root,
     {
       id: ids.labelId,
@@ -915,7 +961,7 @@ function FieldFrame({
       children: [
         labelEnd != null ? /* @__PURE__ */ jsxs5("div", { className: FieldFrame_default.labelRow, children: [
           labelNode,
-          /* @__PURE__ */ jsx11("span", { className: FieldFrame_default.labelEnd, children: labelEnd })
+          /* @__PURE__ */ jsx12("span", { className: FieldFrame_default.labelEnd, children: labelEnd })
         ] }) : labelNode,
         /* @__PURE__ */ jsxs5("div", { className: FieldFrame_default.body, children: [
           children,
@@ -925,7 +971,7 @@ function FieldFrame({
               className: FieldFrame_default.support,
               ...toDataAttributes({ size, reserve: reserveSupportRow || void 0 }),
               children: [
-                showError ? /* @__PURE__ */ jsx11(Hint.Root, { id: ids.errorId, size, invalid: true, className: FieldFrame_default.supportText, children: error }) : showHint ? /* @__PURE__ */ jsx11(
+                showError ? /* @__PURE__ */ jsx12(Hint.Root, { id: ids.errorId, size, invalid: true, className: FieldFrame_default.supportText, children: error }) : showHint ? /* @__PURE__ */ jsx12(
                   Hint.Root,
                   {
                     id: ids.hintId,
@@ -934,7 +980,7 @@ function FieldFrame({
                     className: FieldFrame_default.supportText,
                     children: hint
                   }
-                ) : /* @__PURE__ */ jsx11("span", { className: FieldFrame_default.supportText }),
+                ) : /* @__PURE__ */ jsx12("span", { className: FieldFrame_default.supportText }),
                 counter
               ]
             }
@@ -959,7 +1005,7 @@ function FieldCounter({ current, max, size, label, className, ...rest }) {
           "/",
           max
         ] }),
-        /* @__PURE__ */ jsx11(VisuallyHidden, { children: formatLabel(label, { current, max }) })
+        /* @__PURE__ */ jsx12(VisuallyHidden, { children: formatLabel(label, { current, max }) })
       ]
     }
   );
@@ -976,11 +1022,11 @@ var Checkbox_default = {
 };
 
 // src/components/checkbox/Checkbox.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function CheckboxMark() {
   return /* @__PURE__ */ jsxs6("svg", { viewBox: "0 0 24 24", className: Checkbox_default.svg, "aria-hidden": "true", focusable: "false", children: [
-    /* @__PURE__ */ jsx12("path", { d: "M5.5 12.5l4.25 4.25L18.5 8", pathLength: 1, className: Checkbox_default.checkPath }),
-    /* @__PURE__ */ jsx12("path", { d: "M7 12h10", pathLength: 1, className: Checkbox_default.indeterminateLine })
+    /* @__PURE__ */ jsx13("path", { d: "M5.5 12.5l4.25 4.25L18.5 8", pathLength: 1, className: Checkbox_default.checkPath }),
+    /* @__PURE__ */ jsx13("path", { d: "M7 12h10", pathLength: 1, className: Checkbox_default.indeterminateLine })
   ] });
 }
 function CheckboxRoot({
@@ -1008,12 +1054,12 @@ function CheckboxRoot({
     defaultValue: defaultChecked,
     onChange: onCheckedChange
   });
-  const internalRef = React9.useRef(null);
+  const internalRef = React10.useRef(null);
   const mergedRef = useMergedRefs(internalRef, ref);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (internalRef.current) internalRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     ChoiceField,
     {
       ids,
@@ -1025,7 +1071,7 @@ function CheckboxRoot({
       error,
       className: cx(Checkbox_default.root, className),
       control: /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "input",
           {
             ...inputRest,
@@ -1043,7 +1089,7 @@ function CheckboxRoot({
             "aria-describedby": ids.describedBy
           }
         ),
-        /* @__PURE__ */ jsx12("span", { className: cx(choiceVisualClass, Checkbox_default.control), "aria-hidden": "true", children: /* @__PURE__ */ jsx12(CheckboxMark, {}) })
+        /* @__PURE__ */ jsx13("span", { className: cx(choiceVisualClass, Checkbox_default.control), "aria-hidden": "true", children: /* @__PURE__ */ jsx13(CheckboxMark, {}) })
       ] }),
       children
     }
@@ -1051,7 +1097,7 @@ function CheckboxRoot({
 }
 CheckboxRoot.displayName = "Checkbox.Root";
 function CheckboxLabel(props) {
-  return /* @__PURE__ */ jsx12(ChoiceLabel, { ...props });
+  return /* @__PURE__ */ jsx13(ChoiceLabel, { ...props });
 }
 CheckboxLabel.displayName = "Checkbox.Label";
 function CheckboxIndicator({
@@ -1063,7 +1109,7 @@ function CheckboxIndicator({
   ...rest
 }) {
   const size = useControlSize(sizeProp);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "span",
     {
       "aria-hidden": "true",
@@ -1080,7 +1126,7 @@ function CheckboxIndicator({
         disabled: disabled || void 0
       }),
       ...rest,
-      children: /* @__PURE__ */ jsx12(CheckboxMark, {})
+      children: /* @__PURE__ */ jsx13(CheckboxMark, {})
     }
   );
 }
@@ -1092,7 +1138,7 @@ var Checkbox = {
 };
 
 // src/internal/swatch.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 
 // src/internal/swatch.module.css
 var swatch_default = {
@@ -1105,7 +1151,7 @@ var swatch_default = {
 };
 
 // src/internal/swatch.tsx
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs7 } 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" },
@@ -1125,7 +1171,7 @@ var COLOR_PRESETS = [
   { value: "#be185d", label: "\u0422\u0451\u043C\u043D\u043E-\u0440\u043E\u0437\u043E\u0432\u044B\u0439" }
 ];
 function useSwatchOptions(presets, allowEmpty, emptyLabel) {
-  return React10.useMemo(
+  return React11.useMemo(
     () => [
       ...presets.map((preset) => ({ ...preset, contrast: markContrast(preset.value) })),
       ...allowEmpty ? [{ value: null, label: emptyLabel, contrast: "dark" }] : []
@@ -1136,17 +1182,17 @@ function useSwatchOptions(presets, allowEmpty, emptyLabel) {
 var swatchClass = swatch_default.swatch;
 var swatchTierClass = swatch_default.tier;
 function SwatchFill({ value }) {
-  if (value == null) return /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: swatch_default.checker });
-  return /* @__PURE__ */ jsx13("svg", { className: swatch_default.fill, "aria-hidden": "true", viewBox: "0 0 1 1", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx13("rect", { width: "1", height: "1", fill: value }) });
+  if (value == null) return /* @__PURE__ */ jsx14("span", { "aria-hidden": true, className: swatch_default.checker });
+  return /* @__PURE__ */ jsx14("svg", { className: swatch_default.fill, "aria-hidden": "true", viewBox: "0 0 1 1", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx14("rect", { width: "1", height: "1", fill: value }) });
 }
 function SwatchContent({ value, selected }) {
   return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    /* @__PURE__ */ jsx13(SwatchFill, { value }),
-    selected ? /* @__PURE__ */ jsx13(Icon, { name: "action.check", strokeWidth: 3, className: swatch_default.check }) : null
+    /* @__PURE__ */ jsx14(SwatchFill, { value }),
+    selected ? /* @__PURE__ */ jsx14(Icon, { name: "action.check", strokeWidth: 3, className: swatch_default.check }) : null
   ] });
 }
 function SwatchChip({ value, className, ...rest }) {
-  return /* @__PURE__ */ jsx13("span", { ...rest, "aria-hidden": true, className: cx(swatch_default.chip, className), children: /* @__PURE__ */ jsx13(SwatchFill, { value }) });
+  return /* @__PURE__ */ jsx14("span", { ...rest, "aria-hidden": true, className: cx(swatch_default.chip, className), children: /* @__PURE__ */ jsx14(SwatchFill, { value }) });
 }
 function sameColor(a, b) {
   return (a ?? "").trim().toLowerCase() === (b ?? "").trim().toLowerCase();
@@ -1190,7 +1236,7 @@ function markContrast(value) {
 }
 
 // src/components/color-swatches/ColorSwatches.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 
 // src/internal/rovingFocus.ts
 var PREV = {
@@ -1239,7 +1285,7 @@ var ColorSwatches_default = {
 };
 
 // src/components/color-swatches/ColorSwatches.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var COLOR_SWATCHES_LABELS = {
   group: "\u0426\u0432\u0435\u0442",
   empty: "\u0411\u0435\u0437 \u0446\u0432\u0435\u0442\u0430",
@@ -1284,7 +1330,7 @@ function ColorSwatches({
   const options = useSwatchOptions(presets, allowEmpty, labels.empty);
   const selectedIndex = options.findIndex((option) => sameColor(option.value, value));
   const focusIndex = Math.max(0, selectedIndex);
-  const itemRefs = React11.useRef([]);
+  const itemRefs = React12.useRef([]);
   const labelledBy = ariaLabelledBy ?? ids.labelledBy;
   const onKeyDown2 = (event) => {
     const current = itemRefs.current.indexOf(document.activeElement);
@@ -1299,7 +1345,7 @@ function ColorSwatches({
     setValue(options[next].value);
     itemRefs.current[next]?.focus();
   };
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     FieldFrame,
     {
       ...rest,
@@ -1336,7 +1382,7 @@ function ColorSwatches({
               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__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     ref: (el) => {
@@ -1355,13 +1401,13 @@ function ColorSwatches({
                       contrast: option.contrast
                     }),
                     onClick: () => setValue(option.value),
-                    children: /* @__PURE__ */ jsx14(SwatchContent, { value: option.value, selected })
+                    children: /* @__PURE__ */ jsx15(SwatchContent, { value: option.value, selected })
                   },
                   option.value ?? "empty"
                 )
               );
             }),
-            name ? /* @__PURE__ */ jsx14("input", { type: "hidden", name, value: value ?? "" }) : null
+            name ? /* @__PURE__ */ jsx15("input", { type: "hidden", name, value: value ?? "" }) : null
           ]
         }
       )
@@ -1379,7 +1425,7 @@ var EmptyPage_default = {
 };
 
 // src/components/empty-page/EmptyPage.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function EmptyPageRoot({
   size = "m",
   layout = "default",
@@ -1387,31 +1433,31 @@ function EmptyPageRoot({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       className: cx(EmptyPage_default.root, layout !== "compact" && enterMotion_default.enterBaseChildren, className),
       ...rest,
       ...toDataAttributes({ size, layout: layout === "default" ? void 0 : layout }),
-      children: /* @__PURE__ */ jsx15(ControlSizeProvider, { value: size, children })
+      children: /* @__PURE__ */ jsx16(ControlSizeProvider, { value: size, children })
     }
   );
 }
 EmptyPageRoot.displayName = "EmptyPage.Root";
 function EmptyPageIcon({ tone = "neutral", className, ...rest }) {
-  return /* @__PURE__ */ jsx15("div", { className: cx(EmptyPage_default.iconWrap, className), "data-tone": tone, ...rest });
+  return /* @__PURE__ */ jsx16("div", { className: cx(EmptyPage_default.iconWrap, className), "data-tone": tone, ...rest });
 }
 EmptyPageIcon.displayName = "EmptyPage.Icon";
 function EmptyPageTitle({ as: Tag = "h2", className, ref, ...rest }) {
-  return /* @__PURE__ */ jsx15(Tag, { ref, className: cx(EmptyPage_default.title, className), ...rest });
+  return /* @__PURE__ */ jsx16(Tag, { ref, className: cx(EmptyPage_default.title, className), ...rest });
 }
 EmptyPageTitle.displayName = "EmptyPage.Title";
 function EmptyPageDescription({ className, ...rest }) {
-  return /* @__PURE__ */ jsx15("p", { className: cx(EmptyPage_default.description, className), ...rest });
+  return /* @__PURE__ */ jsx16("p", { className: cx(EmptyPage_default.description, className), ...rest });
 }
 EmptyPageDescription.displayName = "EmptyPage.Description";
 function EmptyPageActions({ className, ...rest }) {
-  return /* @__PURE__ */ jsx15("div", { className: cx(EmptyPage_default.actions, className), ...rest });
+  return /* @__PURE__ */ jsx16("div", { className: cx(EmptyPage_default.actions, className), ...rest });
 }
 EmptyPageActions.displayName = "EmptyPage.Actions";
 var EmptyPage = {
@@ -1422,46 +1468,16 @@ var EmptyPage = {
   Actions: EmptyPageActions
 };
 
-// src/components/divider/Divider.module.css
-var Divider_default = {
-  root: "Divider_root",
-  content: "Divider_content"
-};
-
-// src/components/divider/Divider.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-function Divider({
-  orientation = "horizontal",
-  align = "center",
-  size = "m",
-  children,
-  className,
-  role = "separator",
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx16(
-    "div",
-    {
-      ...rest,
-      className: cx(Divider_default.root, className),
-      role,
-      ...orientation === "vertical" ? { "aria-orientation": "vertical" } : {},
-      ...toDataAttributes({ orientation, align, size }),
-      children: children != null ? /* @__PURE__ */ jsx16(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx16("span", { className: Divider_default.content, children }) }) : null
-    }
-  );
-}
-
 // src/components/input/Input.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 
 // src/internal/context.ts
-import * as React12 from "react";
+import * as React13 from "react";
 function createComponentContext(displayName) {
-  const Ctx = React12.createContext(null);
+  const Ctx = React13.createContext(null);
   Ctx.displayName = `${displayName}Context`;
   function useComponentContext() {
-    const value = React12.useContext(Ctx);
+    const value = React13.useContext(Ctx);
     if (value === null) {
       throw new Error(
         `[prime-ui-kit] \`${displayName}\` sub-component must be used inside \`${displayName}.Root\`.`
@@ -1510,10 +1526,10 @@ function InputRoot({
 }) {
   const size = useControlSize(sizeProp);
   const ids = useFieldFrame(id, { label, hint, error, invalid });
-  const labels = React13.useMemo(() => ({ ...INPUT_LABELS, ...labelsProp }), [labelsProp]);
+  const labels = React14.useMemo(() => ({ ...INPUT_LABELS, ...labelsProp }), [labelsProp]);
   const { invalid: isInvalid, controlId: inputId, describedBy } = ids;
-  const inputRef = React13.useRef(null);
-  const contextValue = React13.useMemo(
+  const inputRef = React14.useRef(null);
+  const contextValue = React14.useMemo(
     () => ({
       size,
       invalid: isInvalid,
@@ -1651,17 +1667,17 @@ var Input = {
 };
 
 // src/internal/imageSlot.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 
 // src/hooks/useImageStatus.ts
-import * as React14 from "react";
+import * as React15 from "react";
 function useImageStatus(report, { onLoad, onError } = {}) {
-  const [status, setStatus] = React14.useState("loading");
-  React14.useLayoutEffect(() => {
+  const [status, setStatus] = React15.useState("loading");
+  React15.useLayoutEffect(() => {
     report("loading");
     return () => report("idle");
   }, [report]);
-  const handleLoad = React14.useCallback(
+  const handleLoad = React15.useCallback(
     (event) => {
       setStatus("loaded");
       report("loaded");
@@ -1669,7 +1685,7 @@ function useImageStatus(report, { onLoad, onError } = {}) {
     },
     [onLoad, report]
   );
-  const handleError = React14.useCallback(
+  const handleError = React15.useCallback(
     (event) => {
       setStatus("error");
       report("error");
@@ -1685,8 +1701,8 @@ import { jsx as jsx18 } from "react/jsx-runtime";
 function createImageSlot(name, classNames) {
   const [Provider, useSlotContext] = createComponentContext(name);
   function ImageSlotProvider({ children }) {
-    const [imageStatus, setImageStatus] = React15.useState("idle");
-    const value = React15.useMemo(() => ({ imageStatus, setImageStatus }), [imageStatus]);
+    const [imageStatus, setImageStatus] = React16.useState("idle");
+    const value = React16.useMemo(() => ({ imageStatus, setImageStatus }), [imageStatus]);
     return /* @__PURE__ */ jsx18(Provider, { value, children });
   }
   function ImageInner({ src, alt = "", className, onLoad, onError, ...rest }) {
@@ -1785,10 +1801,10 @@ var Thumbnail = {
 };
 
 // src/components/select/Select.tsx
-import * as React26 from "react";
+import * as React30 from "react";
 
 // src/internal/listbox.ts
-import * as React16 from "react";
+import * as React17 from "react";
 var optionDomId = (listboxId, value) => `${listboxId}-opt-${value.replace(/\s+/g, "_")}`;
 function enabledOptions(container) {
   if (!container) return [];
@@ -1813,11 +1829,11 @@ function createStore(initial) {
   };
 }
 function useCreateStore(initial) {
-  return React16.useState(() => createStore(initial))[0];
+  return React17.useState(() => createStore(initial))[0];
 }
 function useStoreSlice(store, select) {
   const read = () => select(store.get());
-  return React16.useSyncExternalStore(store.subscribe, read, read);
+  return React17.useSyncExternalStore(store.subscribe, read, read);
 }
 function handleListboxKeyDown(event, { items, highlight, onSelect }) {
   if (items.length === 0) return;
@@ -1839,10 +1855,10 @@ function handleListboxKeyDown(event, { items, highlight, onSelect }) {
 }
 var TYPEAHEAD_RESET_MS = 500;
 function useTypeahead() {
-  const state = React16.useRef({ buffer: "", timer: 0 });
-  React16.useEffect(() => () => window.clearTimeout(state.current.timer), []);
-  const isTyping = React16.useCallback(() => state.current.buffer !== "", []);
-  const find = React16.useCallback(
+  const state = React17.useRef({ buffer: "", timer: 0 });
+  React17.useEffect(() => () => window.clearTimeout(state.current.timer), []);
+  const isTyping = React17.useCallback(() => state.current.buffer !== "", []);
+  const find = React17.useCallback(
     (key, items, highlighted) => {
       const s = state.current;
       window.clearTimeout(s.timer);
@@ -1864,7 +1880,7 @@ function useTypeahead() {
 }
 
 // src/internal/MenuGroup.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 
 // src/internal/menu.module.css
 var menu_default = {
@@ -1873,6 +1889,7 @@ var menu_default = {
   item: "menu_item",
   itemIcon: "menu_itemIcon",
   shortcut: "menu_shortcut",
+  check: "menu_check",
   group: "menu_group",
   groupLabel: "menu_groupLabel",
   separator: "menu_separator",
@@ -1883,7 +1900,7 @@ var menu_default = {
 // src/internal/MenuGroup.tsx
 import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 function MenuGroup({ label, className, children, ...rest }) {
-  const labelId = React17.useId();
+  const labelId = React18.useId();
   return (
     // biome-ignore lint/a11y/useSemanticElements: role="group" inside a menu / listbox; <fieldset> is not allowed there
     /* @__PURE__ */ jsxs9(
@@ -1905,13 +1922,17 @@ function MenuGroup({ label, className, children, ...rest }) {
 // src/internal/floatingSurface.module.css
 var floatingSurface_default = {
   surface: "floatingSurface_surface",
-  layer: "floatingSurface_layer"
+  layer: "floatingSurface_layer",
+  scrim: "floatingSurface_scrim",
+  sheet: "floatingSurface_sheet",
+  sheetContent: "floatingSurface_sheetContent"
 };
 
 // src/internal/overlayMotion.module.css
 var overlayMotion_default = {
   dialog: "overlayMotion_dialog",
   drawer: "overlayMotion_drawer",
+  sheet: "overlayMotion_sheet",
   floating: "overlayMotion_floating",
   scrim: "overlayMotion_scrim",
   overlayFadeIn: "overlayMotion_overlayFadeIn",
@@ -1927,11 +1948,11 @@ var overlayMotion_default = {
 };
 
 // src/internal/Portal.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { createPortal } from "react-dom";
 function Portal({ children, container }) {
-  const [mounted, setMounted] = React18.useState(false);
-  React18.useLayoutEffect(() => {
+  const [mounted, setMounted] = React19.useState(false);
+  React19.useLayoutEffect(() => {
     setMounted(true);
     return () => setMounted(false);
   }, []);
@@ -1939,8 +1960,15 @@ function Portal({ children, container }) {
   return createPortal(children, container ?? document.body);
 }
 
+// src/internal/sheet.module.css
+var sheet_default = {
+  handle: "sheet_handle",
+  swipeY: "sheet_swipeY",
+  swipeX: "sheet_swipeX"
+};
+
 // src/internal/overlay/layerStack.ts
-import * as React19 from "react";
+import * as React20 from "react";
 
 // src/internal/overlay/focus.ts
 var FOCUSABLE = [
@@ -2061,22 +2089,22 @@ function push(entry) {
     if (stack.length === 0) listen(false);
   };
 }
-var LayerContext = React19.createContext(null);
+var LayerContext = React20.createContext(null);
 var LayerProvider = LayerContext.Provider;
 function useLayer(open, options) {
-  const parent = React19.useContext(LayerContext);
-  const [entry] = React19.useState(() => ({ parent, trap: false, ...options }));
+  const parent = React20.useContext(LayerContext);
+  const [entry] = React20.useState(() => ({ parent, trap: false, ...options }));
   entry.parent = parent;
   entry.refs = options.refs;
   entry.dismiss = options.dismiss;
   entry.trap = options.trap ?? false;
   entry.onDismiss = options.onDismiss;
-  React19.useLayoutEffect(() => open ? push(entry) : void 0, [open, entry]);
+  React20.useLayoutEffect(() => open ? push(entry) : void 0, [open, entry]);
   return entry;
 }
 
 // src/internal/overlay/FloatingPanel.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 function FloatingPanel({
   floating,
   size,
@@ -2088,43 +2116,94 @@ function FloatingPanel({
   ref,
   ...rest
 }) {
-  const panelRef = useMergedRefs(floating.panelRef, ref);
+  const mergedRef = useMergedRefs(floating.panelRef, ref);
   if (!floating.mounted) return null;
+  const { sheet, presence } = floating;
+  const panelRef = sheet ? ref : mergedRef;
   const props = {
     ...rest,
-    className: cx(
+    className: sheet ? cx(floatingSurface_default.sheetContent, className) : cx(
       surface && floatingSurface_default.surface,
       floatingSurface_default.layer,
       overlayMotion_default.floating,
       className
     ),
-    "data-state": floating.presence.state,
-    "data-side": floating.side,
     "data-size": size,
-    onAnimationEnd: floating.presence.onExitEnd,
+    ...sheet ? null : {
+      "data-state": presence.state,
+      "data-side": floating.side,
+      onAnimationEnd: presence.onExitEnd
+    },
     onKeyDown: (event) => {
       onKeyDown2?.(event);
       floating.onKeyDown(event);
     }
   };
-  return /* @__PURE__ */ jsx21(Portal, { children: /* @__PURE__ */ jsx21(LayerProvider, { value: floating.layer, children: /* @__PURE__ */ jsx21(ControlSizeProvider, { value: size, children: scroll ? /* @__PURE__ */ jsx21(ScrollContainer, { ...props, ref: panelRef, children }) : /* @__PURE__ */ jsx21("div", { ...props, ref: panelRef, children }) }) }) });
+  const panel = scroll ? /* @__PURE__ */ jsx21(ScrollContainer, { ...props, ref: panelRef, children }) : /* @__PURE__ */ jsx21("div", { ...props, ref: panelRef, children });
+  return /* @__PURE__ */ jsx21(Portal, { children: /* @__PURE__ */ jsx21(LayerProvider, { value: floating.layer, children: /* @__PURE__ */ jsx21(ControlSizeProvider, { value: size, children: sheet ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx21(
+      "div",
+      {
+        role: "presentation",
+        className: cx(floatingSurface_default.scrim, floatingSurface_default.layer, overlayMotion_default.scrim),
+        "data-state": presence.state
+      }
+    ),
+    /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref: floating.panelRef,
+        className: cx(
+          floatingSurface_default.sheet,
+          floatingSurface_default.layer,
+          overlayMotion_default.sheet,
+          sheet_default.swipeY
+        ),
+        "data-state": presence.state,
+        onAnimationEnd: presence.onExitEnd,
+        onPointerDown: floating.onSheetPointerDown,
+        children: [
+          /* @__PURE__ */ jsx21("div", { className: sheet_default.handle, "data-swipe-handle": "", "aria-hidden": "true" }),
+          panel
+        ]
+      }
+    )
+  ] }) : panel }) }) });
 }
 function FloatingTrigger({ triggerProps, children, ...forwarded }) {
   return /* @__PURE__ */ jsx21(Slot, { ...forwarded, children: /* @__PURE__ */ jsx21(Slot, { ...triggerProps, children }) });
 }
 
 // src/internal/overlay/useFloatingLayer.ts
-import * as React23 from "react";
+import * as React27 from "react";
 
-// src/hooks/usePosition.ts
+// src/hooks/useMediaQuery.ts
 import * as React21 from "react";
+var COMPACT_QUERY = "(max-width: 639px)";
+function useMediaQuery(query, enabled = true) {
+  const subscribe = React21.useCallback(
+    (onChange) => {
+      if (!enabled || typeof window === "undefined" || !window.matchMedia) return () => {
+      };
+      const mq = window.matchMedia(query);
+      mq.addEventListener("change", onChange);
+      return () => mq.removeEventListener("change", onChange);
+    },
+    [enabled, query]
+  );
+  const getSnapshot = () => enabled && typeof window !== "undefined" && !!window.matchMedia ? window.matchMedia(query).matches : false;
+  return React21.useSyncExternalStore(subscribe, getSnapshot, () => false);
+}
+
+// src/hooks/usePosition.ts
+import * as React23 from "react";
 
 // src/internal/AnchorRectContext.tsx
-import * as React20 from "react";
-var AnchorRectContext = React20.createContext(null);
+import * as React22 from "react";
+var AnchorRectContext = React22.createContext(null);
 var AnchorRectProvider = AnchorRectContext.Provider;
 function useAnchorRectResolver() {
-  return React20.useContext(AnchorRectContext);
+  return React22.useContext(AnchorRectContext);
 }
 
 // src/internal/layoutPxFromPrimitives.ts
@@ -2249,11 +2328,11 @@ function usePosition(enabled, anchorRef, layerRef, {
   offsetToken = "--prime-panel-offset",
   arrowInset
 } = {}) {
-  const [attached, setAttached] = React21.useState(false);
-  const [resolvedSide, setResolvedSide] = React21.useState(preferredSide);
+  const [attached, setAttached] = React23.useState(false);
+  const [resolvedSide, setResolvedSide] = React23.useState(preferredSide);
   const resolveAnchorRect = useAnchorRectResolver();
-  const metricsRef = React21.useRef(null);
-  const update = React21.useCallback(
+  const metricsRef = React23.useRef(null);
+  const update = React23.useCallback(
     (remeasure) => {
       const anchor = anchorRef.current;
       const layer = layerRef.current;
@@ -2307,9 +2386,9 @@ function usePosition(enabled, anchorRef, layerRef, {
       resolveAnchorRect
     ]
   );
-  const updateRef = React21.useRef(update);
+  const updateRef = React23.useRef(update);
   updateRef.current = update;
-  const attachLayer = React21.useCallback(
+  const attachLayer = React23.useCallback(
     (node) => {
       layerRef.current = node;
       setAttached(node !== null);
@@ -2317,10 +2396,10 @@ function usePosition(enabled, anchorRef, layerRef, {
     [layerRef]
   );
   const active = enabled && attached;
-  React21.useLayoutEffect(() => {
+  React23.useLayoutEffect(() => {
     if (active) update(true);
   }, [active, update]);
-  React21.useLayoutEffect(() => {
+  React23.useLayoutEffect(() => {
     if (!active) return;
     let frame = 0;
     let remeasure = false;
@@ -2355,7 +2434,7 @@ function usePosition(enabled, anchorRef, layerRef, {
 }
 
 // src/hooks/usePresence.ts
-import * as React22 from "react";
+import * as React24 from "react";
 var DURATION_FALLBACK_MS = {
   fast: 230,
   base: 380,
@@ -2386,23 +2465,177 @@ function exitTimeoutMs(token) {
 }
 function usePresence(open, options = {}) {
   const { exitDuration = "base" } = options;
-  const [mounted, setMounted] = React22.useState(open);
+  const [mounted, setMounted] = React24.useState(open);
   if (open && !mounted) setMounted(true);
   if (!open && mounted && prefersReducedMotion()) setMounted(false);
-  const openRef = React22.useRef(open);
+  const openRef = React24.useRef(open);
   openRef.current = open;
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     if (open || !mounted) return;
     const id = window.setTimeout(() => setMounted(false), exitTimeoutMs(exitDuration));
     return () => window.clearTimeout(id);
   }, [open, mounted, exitDuration]);
-  const onExitEnd = React22.useCallback((event) => {
+  const onExitEnd = React24.useCallback((event) => {
     if (event.target !== event.currentTarget) return;
     if (!openRef.current) setMounted(false);
   }, []);
   return { mounted: open || mounted, state: open ? "open" : "closed", onExitEnd };
 }
 
+// src/hooks/useScrollLock.ts
+import * as React25 from "react";
+var lockCount = 0;
+var saved = null;
+function lockScroll() {
+  if (lockCount === 0) {
+    const { body, documentElement } = document;
+    const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
+    saved = { overflow: body.style.overflow, paddingRight: body.style.paddingRight };
+    if (scrollbarWidth > 0) {
+      const padding = Number.parseFloat(window.getComputedStyle(body).paddingRight) || 0;
+      body.style.paddingRight = `${padding + scrollbarWidth}px`;
+    }
+    body.style.overflow = "hidden";
+  }
+  lockCount++;
+}
+function unlockScroll() {
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0 && saved) {
+    document.body.style.overflow = saved.overflow;
+    document.body.style.paddingRight = saved.paddingRight;
+    saved = null;
+  }
+}
+function useScrollLock(enabled) {
+  React25.useEffect(() => {
+    if (!enabled) return;
+    lockScroll();
+    return unlockScroll;
+  }, [enabled]);
+}
+
+// src/hooks/useSwipeDismiss.ts
+import * as React26 from "react";
+var SLOP_PX = 8;
+var DISTANCE_RATIO = 0.3;
+var FLICK_VELOCITY = 0.5;
+var VELOCITY_WINDOW_MS = 100;
+var NO_DRAG = "input, textarea, select, [contenteditable], [role='slider']";
+var SWIPE_OFFSET_VAR = "--swipe-offset";
+var OVERPULL_PX = 24;
+function rubberBand(distance) {
+  return -OVERPULL_PX * (1 - 1 / (1 + Math.abs(distance) / OVERPULL_PX));
+}
+function inCrossScroller(target, panel, horizontal) {
+  for (let node = target; node && node !== panel; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    const overflow = horizontal ? style.overflowX : style.overflowY;
+    const scrolls = horizontal ? node.scrollWidth > node.clientWidth : node.scrollHeight > node.clientHeight;
+    if (scrolls && (overflow === "auto" || overflow === "scroll")) return true;
+  }
+  return false;
+}
+function useSwipeDismiss({
+  enabled,
+  direction,
+  onDismiss,
+  handle,
+  touchAnywhere = false,
+  onProgress
+}) {
+  const optionsRef = React26.useRef({ direction, onDismiss, handle, touchAnywhere, onProgress });
+  optionsRef.current = { direction, onDismiss, handle, touchAnywhere, onProgress };
+  const cleanupRef = React26.useRef(null);
+  React26.useEffect(() => () => cleanupRef.current?.(), []);
+  const onPointerDown2 = React26.useCallback(
+    (event) => {
+      if (!enabled || event.defaultPrevented || !event.isPrimary || event.button !== 0) return;
+      const { direction: direction2, handle: handle2, touchAnywhere: touchAnywhere2 } = optionsRef.current;
+      const panel = event.currentTarget;
+      const target = event.target;
+      if (target.closest(NO_DRAG)) return;
+      const fromHandle = target.closest(handle2) !== null && panel.contains(target.closest(handle2));
+      const horizontal = direction2 !== "down";
+      if (!fromHandle) {
+        if (!touchAnywhere2 || event.pointerType !== "touch") return;
+        if (inCrossScroller(target, panel, horizontal)) return;
+      }
+      cleanupRef.current?.();
+      const pointerId = event.pointerId;
+      const sign = direction2 === "left" ? -1 : 1;
+      const start = horizontal ? event.clientX : event.clientY;
+      const startCross = horizontal ? event.clientY : event.clientX;
+      let dragging = false;
+      let offset = 0;
+      let samples = [];
+      const full = horizontal ? panel.offsetWidth : panel.offsetHeight;
+      const write = (value, progress = full > 0 ? value / full : value > 0 ? 1 : 0) => {
+        panel.style.setProperty(SWIPE_OFFSET_VAR, `${value * sign}px`);
+        optionsRef.current.onProgress?.(Math.min(1, Math.max(0, progress)));
+      };
+      const finish = () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onCancel);
+        cleanupRef.current = null;
+      };
+      const settle = (dismiss) => {
+        delete panel.dataset.swiping;
+        if (dismiss) {
+          panel.dataset.swipeDismissed = "";
+          write(full, 1);
+          optionsRef.current.onDismiss();
+        } else {
+          write(0);
+        }
+      };
+      const onMove = (move) => {
+        if (move.pointerId !== pointerId) return;
+        const along = ((horizontal ? move.clientX : move.clientY) - start) * sign;
+        const across = (horizontal ? move.clientY : move.clientX) - startCross;
+        if (!dragging) {
+          if (Math.abs(along) < SLOP_PX && Math.abs(across) < SLOP_PX) return;
+          if (Math.abs(across) > Math.abs(along) || !fromHandle && along < 0) {
+            finish();
+            return;
+          }
+          dragging = true;
+          panel.dataset.swiping = "";
+          panel.setPointerCapture?.(pointerId);
+        }
+        move.preventDefault();
+        offset = along > 0 ? along : rubberBand(along);
+        write(offset);
+        const now = move.timeStamp;
+        samples.push({ t: now, d: along });
+        samples = samples.filter((s) => now - s.t <= VELOCITY_WINDOW_MS);
+      };
+      const onUp = (up) => {
+        if (up.pointerId !== pointerId) return;
+        finish();
+        if (!dragging) return;
+        const first = samples[0];
+        const last = samples[samples.length - 1];
+        const elapsed = first && last ? last.t - first.t : 0;
+        const velocity = elapsed > 0 ? (last.d - first.d) / elapsed : 0;
+        settle(offset > full * DISTANCE_RATIO || offset > SLOP_PX && velocity > FLICK_VELOCITY);
+      };
+      const onCancel = (cancel) => {
+        if (cancel.pointerId !== pointerId) return;
+        finish();
+        if (dragging) settle(false);
+      };
+      window.addEventListener("pointermove", onMove, { passive: false });
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointercancel", onCancel);
+      cleanupRef.current = finish;
+    },
+    [enabled]
+  );
+  return { onPointerDown: onPointerDown2 };
+}
+
 // src/internal/overlay/useFloatingLayer.ts
 function useFloatingLayer({
   open,
@@ -2416,32 +2649,44 @@ function useFloatingLayer({
   tabExit = "none",
   exitDuration = "fast",
   skipExit = false,
+  sheet: sheetOption = false,
   ...positionOptions
 }) {
-  const presence = usePresence(open, { exitDuration });
+  const sheet = useMediaQuery(COMPACT_QUERY, sheetOption);
+  const presence = usePresence(open, { exitDuration: sheet ? "base" : exitDuration });
   const mounted = presence.mounted && (open || !skipExit);
-  const contentRef = React23.useRef(null);
-  const position = usePosition(mounted, triggerRef, contentRef, positionOptions);
-  const [panel, setPanel] = React23.useState(null);
+  const contentRef = React27.useRef(null);
+  const position = usePosition(mounted && !sheet, triggerRef, contentRef, positionOptions);
+  useScrollLock(open && sheet);
+  const [panel, setPanel] = React27.useState(null);
   const { attachLayer } = position;
-  const panelRef = React23.useCallback(
+  const panelRef = React27.useCallback(
     (node) => {
       attachLayer(node);
       setPanel(node);
     },
     [attachLayer]
   );
-  const outsideRef = React23.useRef(false);
-  const close = React23.useCallback(() => {
+  const outsideRef = React27.useRef(false);
+  const close = React27.useCallback(() => {
     outsideRef.current = false;
     onOpenChange(false);
   }, [onOpenChange]);
+  const dismissOutside = React27.useCallback(() => {
+    outsideRef.current = true;
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const swipe = useSwipeDismiss({
+    enabled: sheet && open && closeOnOutsideClick,
+    direction: "down",
+    onDismiss: dismissOutside,
+    handle: "[data-swipe-handle]"
+  });
   const onDismiss = (reason) => {
     if (reason === "escape") {
       if (closeOnEscape) close();
     } else if (closeOnOutsideClick) {
-      outsideRef.current = true;
-      onOpenChange(false);
+      dismissOutside();
     }
   };
   const layer = useLayer(open, {
@@ -2451,7 +2696,7 @@ function useFloatingLayer({
     onDismiss
   });
   const passive = dismiss === "none";
-  React23.useEffect(() => {
+  React27.useEffect(() => {
     if (!open || !panel || passive) return;
     outsideRef.current = false;
     if (focusOnOpen) focusInto(panel);
@@ -2482,6 +2727,8 @@ function useFloatingLayer({
     presence,
     mounted,
     side: position.side,
+    sheet,
+    onSheetPointerDown: swipe.onPointerDown,
     panelRef,
     contentRef,
     layer,
@@ -2510,15 +2757,14 @@ var Select_default = {
   itemTitle: "Select_itemTitle",
   itemDescription: "Select_itemDescription",
   itemMeta: "Select_itemMeta",
-  media: "Select_media",
-  check: "Select_check"
+  media: "Select_media"
 };
 
 // src/components/select/SelectItem.tsx
-import * as React25 from "react";
+import * as React29 from "react";
 
 // src/internal/HighlightMatch.tsx
-import * as React24 from "react";
+import * as React28 from "react";
 
 // src/internal/HighlightMatch.module.css
 var HighlightMatch_default = {
@@ -2526,7 +2772,7 @@ var HighlightMatch_default = {
 };
 
 // src/internal/HighlightMatch.tsx
-import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 function matchIndex(text, query) {
   if (!query) return -1;
   return text.toLowerCase().indexOf(query.toLowerCase());
@@ -2534,8 +2780,8 @@ function matchIndex(text, query) {
 function HighlightMatch({ text, query }) {
   const q = query.trim();
   const at = matchIndex(text, q);
-  if (at < 0) return /* @__PURE__ */ jsx22(Fragment4, { children: text });
-  return /* @__PURE__ */ jsxs10("span", { children: [
+  if (at < 0) return /* @__PURE__ */ jsx22(Fragment5, { children: text });
+  return /* @__PURE__ */ jsxs11("span", { children: [
     text.slice(0, at),
     /* @__PURE__ */ jsx22("mark", { className: HighlightMatch_default.match, children: text.slice(at, at + q.length) }),
     text.slice(at + q.length)
@@ -2543,7 +2789,7 @@ function HighlightMatch({ text, query }) {
 }
 function highlightChildren(children, query) {
   if (!query.trim()) return children;
-  return React24.Children.map(
+  return React28.Children.map(
     children,
     (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx22(HighlightMatch, { text: String(child), query }) : child
   );
@@ -2579,13 +2825,13 @@ function createItemRegistry() {
 var [SelectProvider, useSelectContext] = createComponentContext("Select");
 
 // src/components/select/SelectItem.tsx
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var MEDIA_SIZE = { xs: "xs", s: "xs", m: "s", l: "s", xl: "m" };
 function textOf(node) {
   if (node == null || typeof node === "boolean") return "";
   if (typeof node === "string" || typeof node === "number") return String(node);
   if (Array.isArray(node)) return node.map(textOf).join("");
-  if (React25.isValidElement(node))
+  if (React29.isValidElement(node))
     return textOf(node.props.children);
   return "";
 }
@@ -2593,9 +2839,9 @@ function SelectItemIcon({ className, ...rest }) {
   return /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", className: cx(menu_default.itemIcon, className), ...rest });
 }
 SelectItemIcon.displayName = "Select.ItemIcon";
-var OptionQueryContext = React25.createContext("");
+var OptionQueryContext = React29.createContext("");
 function SelectItemText({ children, className, ...rest }) {
-  const query = React25.useContext(OptionQueryContext);
+  const query = React29.useContext(OptionQueryContext);
   return /* @__PURE__ */ jsx23("span", { ...rest, className: cx(Select_default.itemTitle, className), children: highlightChildren(children, query) });
 }
 SelectItemText.displayName = "Select.ItemText";
@@ -2604,7 +2850,7 @@ function SelectItemDescription({
   className,
   ...rest
 }) {
-  const query = React25.useContext(OptionQueryContext);
+  const query = React29.useContext(OptionQueryContext);
   return /* @__PURE__ */ jsx23("span", { ...rest, className: cx(Select_default.itemDescription, className), children: highlightChildren(children, query) });
 }
 SelectItemDescription.displayName = "Select.ItemDescription";
@@ -2622,11 +2868,11 @@ function splitItemChildren(children) {
     description: ""
   };
   let plain = "";
-  for (const child of React25.Children.toArray(children)) {
-    if (!React25.isValidElement(child)) {
+  for (const child of React29.Children.toArray(children)) {
+    if (!React29.isValidElement(child)) {
       plain += textOf(child);
       parts.body.push(child);
-    } else if (child.type === React25.Fragment) {
+    } else if (child.type === React29.Fragment) {
       const inner = splitItemChildren(child.props.children);
       parts.leading.push(...inner.leading);
       parts.body.push(...inner.body);
@@ -2656,7 +2902,7 @@ function splitItemChildren(children) {
 }
 function sizeMedia(leading, size) {
   return leading.map(
-    (node) => React25.isValidElement(node) && node.type === Thumbnail.Root ? React25.cloneElement(node, {
+    (node) => React29.isValidElement(node) && node.type === Thumbnail.Root ? React29.cloneElement(node, {
       size: node.props.size ?? MEDIA_SIZE[size],
       className: cx(Select_default.media, node.props.className),
       "aria-hidden": true
@@ -2678,7 +2924,7 @@ function SelectItem({
   const haystack = normalize(`${resolvedLabel} ${parts.description} ${keywords ?? ""}`);
   const isSelected = selected.includes(value);
   const isHighlighted = useStoreSlice(highlight, (current) => current === value);
-  React25.useLayoutEffect(
+  React29.useLayoutEffect(
     () => registry.register(value, resolvedLabel, haystack),
     [registry, value, resolvedLabel, haystack]
   );
@@ -2687,7 +2933,7 @@ function SelectItem({
   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__ */ jsxs11(
+    /* @__PURE__ */ jsxs12(
       "div",
       {
         ref,
@@ -2715,7 +2961,7 @@ function SelectItem({
           sizeMedia(parts.leading, size),
           /* @__PURE__ */ jsx23("span", { className: Select_default.itemText, children: /* @__PURE__ */ jsx23(OptionQueryContext.Provider, { value: query, children: highlightChildren(parts.body, query) }) }),
           parts.meta,
-          multiple ? null : /* @__PURE__ */ jsx23("span", { className: Select_default.check, "aria-hidden": "true", children: isSelected ? /* @__PURE__ */ jsx23(Icon, { name: "action.check" }) : null })
+          multiple ? null : /* @__PURE__ */ jsx23("span", { className: menu_default.check, "aria-hidden": "true", children: isSelected ? /* @__PURE__ */ jsx23(Icon, { name: "action.check" }) : null })
         ]
       }
     )
@@ -2724,7 +2970,7 @@ function SelectItem({
 SelectItem.displayName = "Select.Item";
 
 // src/components/select/Select.tsx
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } 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",
@@ -2761,14 +3007,14 @@ function SelectRoot(props) {
     ...rest
   } = props;
   const multiple = props.multiple === true;
-  const labels = React26.useMemo(() => ({ ...SELECT_LABELS, ...labelsProp }), [labelsProp]);
+  const labels = React30.useMemo(() => ({ ...SELECT_LABELS, ...labelsProp }), [labelsProp]);
   const ids = useFieldFrame(id, { hint, error, invalid });
   const [value, setValue] = useControllableState({
     value: props.value,
     defaultValue: props.defaultValue ?? (multiple ? [] : void 0),
     onChange: props.onValueChange
   });
-  const selected = React26.useMemo(
+  const selected = React30.useMemo(
     () => Array.isArray(value) ? value : value ? [value] : [],
     [value]
   );
@@ -2778,11 +3024,11 @@ function SelectRoot(props) {
     onChange: onOpenChange
   });
   const highlight = useCreateStore(void 0);
-  const [registry] = React26.useState(createItemRegistry);
-  const [query, setQuery] = React26.useState("");
-  const triggerRef = React26.useRef(null);
+  const [registry] = React30.useState(createItemRegistry);
+  const [query, setQuery] = React30.useState("");
+  const triggerRef = React30.useRef(null);
   if (!isOpen && query !== "") setQuery("");
-  const pick = React26.useCallback(
+  const pick = React30.useCallback(
     (optionValue) => {
       if (multiple) {
         setValue((prev) => {
@@ -2796,8 +3042,8 @@ function SelectRoot(props) {
     },
     [multiple, setValue, setOpen]
   );
-  const clear = React26.useCallback(() => setValue(multiple ? [] : ""), [multiple, setValue]);
-  const context = React26.useMemo(
+  const clear = React30.useCallback(() => setValue(multiple ? [] : ""), [multiple, setValue]);
+  const context = React30.useMemo(
     () => ({
       size,
       invalid: ids.invalid,
@@ -2894,7 +3140,7 @@ function SelectTrigger({
   } = useSelectContext();
   const mergedRef = useMergedRefs(triggerRef, ref);
   const showClear = clearable && selected.length > 0 && !disabled && !loading;
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "button",
     {
       ...rest,
@@ -2967,7 +3213,7 @@ function SelectValue({ renderValue, className, ...rest }) {
   if (selected.length > 0 && renderValue && !multiple) {
     const value = selected[0] ?? "";
     const parts = splitItemChildren(renderValue({ value, label: text }));
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       "span",
       {
         ...rest,
@@ -3012,7 +3258,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
     labels,
     registry
   } = useSelectContext();
-  const listboxRef = React26.useRef(null);
+  const listboxRef = React30.useRef(null);
   const floating = useFloatingLayer({
     open: isOpen,
     onOpenChange: setOpen,
@@ -3021,7 +3267,8 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
     align: "start",
     matchAnchorWidth: true,
     focusOnOpen: true,
-    tabExit: "always"
+    tabExit: "always",
+    sheet: true
   });
   const highlighted = useStoreSlice(highlight, (value) => value);
   const isEmpty = useStoreSlice(registry.version, () => !registry.anyMatch(normalize(query)));
@@ -3044,7 +3291,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
   };
   if (!floating.mounted) return /* @__PURE__ */ jsx24("div", { hidden: true, children });
   const activeDescendant = isOpen && highlighted !== void 0 ? optionDomId(listboxId, highlighted) : void 0;
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     FloatingPanel,
     {
       ...rest,
@@ -3056,7 +3303,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
       children: [
         searchable ? (
           // The permanent focus of the panel: no ring, the caret is the indicator (foundation §7).
-          /* @__PURE__ */ jsxs12("div", { className: cx(menu_default.searchRow, Select_default.search), "data-focus-ring": "false", children: [
+          /* @__PURE__ */ jsxs13("div", { className: cx(menu_default.searchRow, Select_default.search), "data-focus-ring": "false", children: [
             /* @__PURE__ */ jsx24(Icon, { name: "action.search", size: "s" }),
             /* @__PURE__ */ jsx24(
               "input",
@@ -3077,7 +3324,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
             )
           ] })
         ) : null,
-        loading ? /* @__PURE__ */ jsxs12("div", { className: Select_default.status, role: "status", children: [
+        loading ? /* @__PURE__ */ jsxs13("div", { className: Select_default.status, role: "status", children: [
           /* @__PURE__ */ jsx24(Spinner, { "aria-hidden": "true" }),
           labels.loading
         ] }) : null,
@@ -3097,7 +3344,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
             children
           }
         ),
-        isEmpty && !loading ? /* @__PURE__ */ jsxs12(EmptyPage.Root, { layout: "compact", role: "status", children: [
+        isEmpty && !loading ? /* @__PURE__ */ jsxs13(EmptyPage.Root, { layout: "compact", role: "status", children: [
           /* @__PURE__ */ jsx24(EmptyPage.Title, { as: "p", children: labels.empty }),
           query !== "" && labels.emptyHint ? /* @__PURE__ */ jsx24(EmptyPage.Description, { children: labels.emptyHint }) : null
         ] }) : null,
@@ -3112,9 +3359,9 @@ function HighlightOnOpen({
   highlight
 }) {
   const { isOpen, query, selected } = useSelectContext();
-  const selectedRef = React26.useRef(selected);
+  const selectedRef = React30.useRef(selected);
   selectedRef.current = selected;
-  React26.useLayoutEffect(() => {
+  React30.useLayoutEffect(() => {
     if (!isOpen) return;
     const options = enabledOptions(listboxRef.current);
     const first = options.find((item) => selectedRef.current.includes(item.dataset.value ?? ""));
@@ -3122,7 +3369,7 @@ function HighlightOnOpen({
     first?.scrollIntoView?.({ block: "nearest" });
     return () => highlight.set(void 0);
   }, [isOpen, listboxRef, highlight]);
-  React26.useLayoutEffect(() => {
+  React30.useLayoutEffect(() => {
     if (query !== "") highlight.set(enabledOptions(listboxRef.current)[0]?.dataset.value);
   }, [query, listboxRef, highlight]);
   return null;
@@ -3154,28 +3401,32 @@ export {
   ControlSizeProvider,
   useOptionalControlSize,
   useControlSize,
-  useMergedRefs,
   cx,
   toDataAttributes,
-  ScrollContainer,
-  createComponentContext,
-  createImageSlot,
-  palette_default,
-  textTone_default,
-  Icon,
-  createIcon,
   fieldSurfaceClass,
   fieldTierClass,
   fieldTriggerClass,
   iconLayout,
+  useMergedRefs,
   Slot,
+  touchTargetBlockClass,
+  textTone_default,
   visuallyHiddenClass,
   VisuallyHidden,
   Spinner,
   Button,
+  Divider,
+  Icon,
+  createIcon,
+  useEdgeOverflow,
+  ScrollContainer,
+  palette_default,
+  createComponentContext,
+  createImageSlot,
   useControllableState,
   overlayMotion_default,
   Portal,
+  sheet_default,
   focusInto,
   focusBack,
   activeElement,
@@ -3183,6 +3434,8 @@ export {
   useLayer,
   FloatingPanel,
   FloatingTrigger,
+  COMPACT_QUERY,
+  useMediaQuery,
   AnchorRectProvider,
   readCssLengthPx,
   getViewportPadPx,
@@ -3190,6 +3443,8 @@ export {
   motionDurationMs,
   exitTimeoutMs,
   usePresence,
+  useScrollLock,
+  useSwipeDismiss,
   useFloatingLayer,
   rovingIndex,
   gridIndex,
@@ -3232,7 +3487,6 @@ export {
   handleListboxKeyDown,
   menu_default,
   MenuGroup,
-  Divider,
   Input,
   Thumbnail,
   Select