@sia.soul/sia-react-ui 0.1.47 → 0.1.49

package/dist/{chunk-ZDC7PMZN.js → chunk-DTZUBD2O.js}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   Icon,
   Input
-} from "./chunk-XCVAVCIO.js";
+} from "./chunk-IUZ2RSI5.js";
 import {
   Button
 } from "./chunk-IKAMZNCK.js";

package/dist/{chunk-KXPNW4E6.js → chunk-FJ3FP4YV.js}

@@ -5,11 +5,11 @@ import {
   Popover,
   Tooltip,
   useOverlayLifecycle
-} from "./chunk-NYJSSPIX.js";
+} from "./chunk-PJT676UK.js";
 import {
   Dropdown,
   Icon
-} from "./chunk-XCVAVCIO.js";
+} from "./chunk-IUZ2RSI5.js";
 import {
   Button
 } from "./chunk-IKAMZNCK.js";

package/dist/{chunk-XCVAVCIO.js → chunk-IUZ2RSI5.js}

@@ -830,7 +830,7 @@ var Icon = forwardRef(function Icon2({ name, size = "1em", strokeWidth = 1.8, ro
 });
 
 // src/components/Navigation.tsx
-import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 import { createElement } from "react";
 function MenuPopup({
@@ -844,6 +844,16 @@ function MenuPopup({
   onMouseLeave
 }) {
   const [mounted, setMounted] = useState(open);
+  const [fontSize, setFontSize] = useState();
+  useLayoutEffect(() => {
+    const anchor = anchorRef.current;
+    if (!mounted || !anchor) return;
+    const syncFontSize = () => setFontSize(getComputedStyle(anchor).fontSize);
+    syncFontSize();
+    const observer = new ResizeObserver(syncFontSize);
+    observer.observe(anchor);
+    return () => observer.disconnect();
+  });
   useEffect(() => {
     if (open) {
       setMounted(true);
@@ -860,6 +870,7 @@ function MenuPopup({
       placement,
       offset: 4,
       className: `sia-menu__popup sia-menu--${theme}${open ? " is-open" : " is-closing"}`,
+      style: { fontSize },
       "data-sia-menu-owner": menuId,
       onMouseEnter,
       onMouseLeave,
@@ -1054,7 +1065,7 @@ function Segmented({ options, value, defaultValue, size: sizeProp, block = false
 }
 
 // src/components/Dropdown.tsx
-import { cloneElement, isValidElement, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { cloneElement, isValidElement, useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var placementMap = {
   bottomLeft: "bottom-start",
@@ -1098,6 +1109,17 @@ function DropdownRoot({
   const visible = open ?? internalOpen;
   const triggerSet = new Set(trigger);
   const pointAtCenter = typeof arrow === "object" && arrow.pointAtCenter;
+  const [triggerFontSize, setTriggerFontSize] = useState2();
+  useLayoutEffect2(() => {
+    if (!visible || !rootRef.current) return;
+    const root = rootRef.current;
+    const target = root.querySelector("button, [role='button'], a") ?? (root.firstElementChild !== contextAnchorRef.current ? root.firstElementChild : null) ?? root;
+    const syncFontSize = () => setTriggerFontSize(getComputedStyle(target).fontSize);
+    syncFontSize();
+    const observer = new ResizeObserver(syncFontSize);
+    observer.observe(target);
+    return () => observer.disconnect();
+  });
   function clearTimer(ref) {
     if (ref.current === void 0) return;
     window.clearTimeout(ref.current);
@@ -1269,7 +1291,7 @@ function DropdownRoot({
             placement: contextPoint ? "bottom-start" : placementMap[placement],
             offset: contextPoint ? 2 : 6,
             className: `sia-dropdown__popup${visible ? " is-open" : " is-closing"}${arrow ? " sia-dropdown__popup--arrow" : ""}${pointAtCenter ? " sia-dropdown__popup--arrow-center" : ""} ${popupClassName}`.trim(),
-            style: popupStyle,
+            style: { fontSize: triggerFontSize, ...popupStyle },
             onMouseEnter: () => {
               clearTimer(closeTimerRef);
               if (!disabled && triggerSet.has("hover")) clearTimer(openTimerRef);

package/dist/{chunk-NYJSSPIX.js → chunk-PJT676UK.js}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   Icon,
   Input
-} from "./chunk-XCVAVCIO.js";
+} from "./chunk-IUZ2RSI5.js";
 import {
   Button
 } from "./chunk-IKAMZNCK.js";

package/dist/{chunk-E4RMSZOC.js → chunk-ZX2YNHQJ.js}

@@ -1,10 +1,10 @@
 import {
   FloatingScrollbarProvider,
   Select
-} from "./chunk-NYJSSPIX.js";
+} from "./chunk-PJT676UK.js";
 import {
   Icon
-} from "./chunk-XCVAVCIO.js";
+} from "./chunk-IUZ2RSI5.js";
 import {
   PopupPortal,
   useControlSize,

package/dist/{core-wsymjzoC.d.ts → core-Bb0160em.d.ts}

@@ -787,7 +787,7 @@ interface DropdownMenuProps extends Pick<MenuProps, "multiple" | "selectable" |
 interface DropdownProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children" | "onOpenChange"> {
     /** 菜单项、选中状态与点击回调 */
     menu: DropdownMenuProps;
-    /** 子内容；组件嵌套内容或当前节点的子项。 */
+    /** 触发内容；菜单默认跟随触发按钮的实际字号，无按钮时使用首个触发元素或外层容器的字号。 */
     children: ReactNode;
     /**
      * 触发显示的交互方式。
@@ -841,7 +841,7 @@ interface DropdownProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"
      * @defaultValue ""
      */
     popupClassName?: string;
-    /** 弹出面板的内联样式。 */
+    /** 弹出面板的内联样式；fontSize 可覆盖默认跟随触发按钮的菜单字号。 */
     popupStyle?: CSSProperties;
     /** 自定义菜单浮层内容 */
     popupRender?: (menu: ReactNode) => ReactNode;

package/dist/{core-CADzSGab.d.cts → core-D2IjiQhj.d.cts}

@@ -787,7 +787,7 @@ interface DropdownMenuProps extends Pick<MenuProps, "multiple" | "selectable" |
 interface DropdownProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children" | "onOpenChange"> {
     /** 菜单项、选中状态与点击回调 */
     menu: DropdownMenuProps;
-    /** 子内容；组件嵌套内容或当前节点的子项。 */
+    /** 触发内容；菜单默认跟随触发按钮的实际字号，无按钮时使用首个触发元素或外层容器的字号。 */
     children: ReactNode;
     /**
      * 触发显示的交互方式。
@@ -841,7 +841,7 @@ interface DropdownProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"
      * @defaultValue ""
      */
     popupClassName?: string;
-    /** 弹出面板的内联样式。 */
+    /** 弹出面板的内联样式；fontSize 可覆盖默认跟随触发按钮的菜单字号。 */
     popupStyle?: CSSProperties;
     /** 自定义菜单浮层内容 */
     popupRender?: (menu: ReactNode) => ReactNode;

package/dist/core.cjs

@@ -1215,6 +1215,16 @@ function MenuPopup({
   onMouseLeave
 }) {
   const [mounted, setMounted] = (0, import_react5.useState)(open);
+  const [fontSize, setFontSize] = (0, import_react5.useState)();
+  (0, import_react5.useLayoutEffect)(() => {
+    const anchor = anchorRef.current;
+    if (!mounted || !anchor) return;
+    const syncFontSize = () => setFontSize(getComputedStyle(anchor).fontSize);
+    syncFontSize();
+    const observer = new ResizeObserver(syncFontSize);
+    observer.observe(anchor);
+    return () => observer.disconnect();
+  });
   (0, import_react5.useEffect)(() => {
     if (open) {
       setMounted(true);
@@ -1231,6 +1241,7 @@ function MenuPopup({
       placement,
       offset: 4,
       className: `sia-menu__popup sia-menu--${theme}${open ? " is-open" : " is-closing"}`,
+      style: { fontSize },
       "data-sia-menu-owner": menuId,
       onMouseEnter,
       onMouseLeave,
@@ -1447,6 +1458,17 @@ function DropdownRoot({
   const visible = open ?? internalOpen;
   const triggerSet = new Set(trigger);
   const pointAtCenter = typeof arrow === "object" && arrow.pointAtCenter;
+  const [triggerFontSize, setTriggerFontSize] = (0, import_react7.useState)();
+  (0, import_react7.useLayoutEffect)(() => {
+    if (!visible || !rootRef.current) return;
+    const root = rootRef.current;
+    const target = root.querySelector("button, [role='button'], a") ?? (root.firstElementChild !== contextAnchorRef.current ? root.firstElementChild : null) ?? root;
+    const syncFontSize = () => setTriggerFontSize(getComputedStyle(target).fontSize);
+    syncFontSize();
+    const observer = new ResizeObserver(syncFontSize);
+    observer.observe(target);
+    return () => observer.disconnect();
+  });
   function clearTimer(ref) {
     if (ref.current === void 0) return;
     window.clearTimeout(ref.current);
@@ -1618,7 +1640,7 @@ function DropdownRoot({
             placement: contextPoint ? "bottom-start" : placementMap[placement],
             offset: contextPoint ? 2 : 6,
             className: `sia-dropdown__popup${visible ? " is-open" : " is-closing"}${arrow ? " sia-dropdown__popup--arrow" : ""}${pointAtCenter ? " sia-dropdown__popup--arrow-center" : ""} ${popupClassName}`.trim(),
-            style: popupStyle,
+            style: { fontSize: triggerFontSize, ...popupStyle },
             onMouseEnter: () => {
               clearTimer(closeTimerRef);
               if (!disabled && triggerSet.has("hover")) clearTimer(openTimerRef);

package/dist/core.css

@@ -7458,11 +7458,15 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 }
 .sia-form-item {
   display: grid;
-  grid-template-columns: minmax(90px, 140px) minmax(0, 1fr);
+  grid-template-columns: var(--sia-form-label-width, var(--sia-form-auto-label-width, 0px)) minmax(0, 1fr);
   gap: 8px 14px;
   margin-bottom: 6px;
   color: var(--sia-color-text);
 }
+.sia-form-item__label-content {
+  display: inline-block;
+  width: max-content;
+}
 .sia-form-item__label {
   padding-top: 8px;
   text-align: right;
@@ -7554,6 +7558,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   gap: 8px;
 }
 .sia-form--inline .sia-form-item__label {
+  flex: 0 0 var(--sia-form-label-width, var(--sia-form-auto-label-width, 0px));
   text-align: left;
 }
 .sia-form-error-list {
@@ -7934,6 +7939,10 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   background: transparent;
   border: 0;
 }
+.sia-dropdown__menu .sia-menu__item,
+.sia-menu__popup .sia-menu__item {
+  font-size: inherit;
+}
 .sia-dropdown__menu > .sia-menu__entry:first-child {
   margin-top: 0;
 }

package/dist/core.d.cts

@@ -1,4 +1,4 @@
-export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-CADzSGab.cjs';
+export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-D2IjiQhj.cjs';
 export { f as Button, B as ButtonProps, e as ButtonSize, g as ButtonVariant, h as Modal, d as ModalActionResult, M as ModalOpenConfig, i as ModalProps, j as ModalType, a as OverlayApiHandle, k as Select, S as SelectOption, c as SelectProps, m as SelectValue } from './Select-YJbT-MF1.cjs';
 import 'react';
 import './shared-Bx4B28Wh.cjs';

package/dist/core.d.ts

@@ -1,4 +1,4 @@
-export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-wsymjzoC.js';
+export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-Bb0160em.js';
 export { f as Button, B as ButtonProps, e as ButtonSize, g as ButtonVariant, h as Modal, d as ModalActionResult, M as ModalOpenConfig, i as ModalProps, j as ModalType, a as OverlayApiHandle, k as Select, S as SelectOption, c as SelectProps, m as SelectValue } from './Select-CCrPqULn.js';
 import 'react';
 import './shared-Bx4B28Wh.js';

package/dist/core.js

@@ -10,17 +10,17 @@ import {
   Typography,
   Upload,
   message
-} from "./chunk-KXPNW4E6.js";
+} from "./chunk-FJ3FP4YV.js";
 import "./chunk-SMCYEPBL.js";
 import {
   Modal,
   Select
-} from "./chunk-NYJSSPIX.js";
+} from "./chunk-PJT676UK.js";
 import {
   Icon,
   Input,
   Segmented
-} from "./chunk-XCVAVCIO.js";
+} from "./chunk-IUZ2RSI5.js";
 import {
   Button
 } from "./chunk-IKAMZNCK.js";

package/dist/index.cjs

@@ -1363,6 +1363,16 @@ function MenuPopup({
   onMouseLeave
 }) {
   const [mounted, setMounted] = (0, import_react5.useState)(open);
+  const [fontSize, setFontSize] = (0, import_react5.useState)();
+  (0, import_react5.useLayoutEffect)(() => {
+    const anchor = anchorRef.current;
+    if (!mounted || !anchor) return;
+    const syncFontSize = () => setFontSize(getComputedStyle(anchor).fontSize);
+    syncFontSize();
+    const observer = new ResizeObserver(syncFontSize);
+    observer.observe(anchor);
+    return () => observer.disconnect();
+  });
   (0, import_react5.useEffect)(() => {
     if (open) {
       setMounted(true);
@@ -1379,6 +1389,7 @@ function MenuPopup({
       placement,
       offset: 4,
       className: `sia-menu__popup sia-menu--${theme}${open ? " is-open" : " is-closing"}`,
+      style: { fontSize },
       "data-sia-menu-owner": menuId,
       onMouseEnter,
       onMouseLeave,
@@ -1616,6 +1627,17 @@ function DropdownRoot({
   const visible = open ?? internalOpen;
   const triggerSet = new Set(trigger);
   const pointAtCenter = typeof arrow === "object" && arrow.pointAtCenter;
+  const [triggerFontSize, setTriggerFontSize] = (0, import_react7.useState)();
+  (0, import_react7.useLayoutEffect)(() => {
+    if (!visible || !rootRef.current) return;
+    const root = rootRef.current;
+    const target = root.querySelector("button, [role='button'], a") ?? (root.firstElementChild !== contextAnchorRef.current ? root.firstElementChild : null) ?? root;
+    const syncFontSize = () => setTriggerFontSize(getComputedStyle(target).fontSize);
+    syncFontSize();
+    const observer = new ResizeObserver(syncFontSize);
+    observer.observe(target);
+    return () => observer.disconnect();
+  });
   function clearTimer(ref) {
     if (ref.current === void 0) return;
     window.clearTimeout(ref.current);
@@ -1787,7 +1809,7 @@ function DropdownRoot({
             placement: contextPoint ? "bottom-start" : placementMap[placement],
             offset: contextPoint ? 2 : 6,
             className: `sia-dropdown__popup${visible ? " is-open" : " is-closing"}${arrow ? " sia-dropdown__popup--arrow" : ""}${pointAtCenter ? " sia-dropdown__popup--arrow-center" : ""} ${popupClassName}`.trim(),
-            style: popupStyle,
+            style: { fontSize: triggerFontSize, ...popupStyle },
             onMouseEnter: () => {
               clearTimer(closeTimerRef);
               if (!disabled && triggerSet.has("hover")) clearTimer(openTimerRef);
@@ -6330,9 +6352,51 @@ function FormRoot({
   const instance = internalForm;
   instance.configure(initialValues, { onFinish, onFinishFailed, onValuesChange });
   const context = (0, import_react29.useMemo)(() => instance, [instance]);
+  const formRef = (0, import_react29.useRef)(null);
+  (0, import_react29.useLayoutEffect)(() => {
+    const root = formRef.current;
+    if (!root) return;
+    let frame = 0;
+    const observed = /* @__PURE__ */ new Set();
+    const measure = () => {
+      frame = 0;
+      const labels = [...root.querySelectorAll(".sia-form-item__label-content")].filter((label) => label.closest(".sia-form") === root);
+      const next = new Set(labels);
+      observed.forEach((label) => {
+        if (!next.has(label)) {
+          resizeObserver.unobserve(label);
+          observed.delete(label);
+        }
+      });
+      let width = 0;
+      labels.forEach((label) => {
+        if (!observed.has(label)) {
+          resizeObserver.observe(label);
+          observed.add(label);
+        }
+        if (label.getClientRects().length) width = Math.max(width, label.offsetWidth);
+      });
+      const value = `${Math.ceil(width)}px`;
+      if (root.style.getPropertyValue("--sia-form-auto-label-width") !== value) root.style.setProperty("--sia-form-auto-label-width", value);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    const resizeObserver = new ResizeObserver(schedule);
+    resizeObserver.observe(root);
+    const mutations = new MutationObserver(schedule);
+    mutations.observe(root, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["class", "style", "hidden"] });
+    measure();
+    return () => {
+      resizeObserver.disconnect();
+      mutations.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PlaceholderModeContext.Provider, { value: resolvedPlaceholderMode, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "form",
     {
+      ref: formRef,
       ...withTitleTooltip(props),
       className: `sia-form sia-form--${layout} sia-form--${size}${disabled ? " is-disabled" : ""} ${className}`.trim(),
       "data-required-mark": requiredMark,
@@ -6425,10 +6489,10 @@ function FormItem({
   const inputWrap = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "sia-form-item__input-wrap", children: content });
   const hasError = status === "error" && Boolean(helpContent);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref: itemRef, className: `sia-form-item${status ? ` sia-form-item--${status}` : ""} ${className}`.trim(), "data-sia-form-field": key || void 0, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { id: labelId, className: "sia-form-item__label", children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { id: labelId, className: "sia-form-item__label", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "sia-form-item__label-content", children: [
       ruleRequired ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "sia-form-item__required-mark", "aria-hidden": "true", children: "*" }) : null,
       label
-    ] }) : null,
+    ] }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "sia-form-item__control", children: [
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Tooltip,
@@ -12095,7 +12159,11 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
     const schedule = () => {
       if (!frame) frame = requestAnimationFrame(draw);
     };
-    scroller.addEventListener("scroll", schedule, { passive: true });
+    const onScroll = () => {
+      cancelAnimationFrame(frame);
+      draw();
+    };
+    scroller.addEventListener("scroll", onScroll, { passive: true, capture: true });
     const resize = new ResizeObserver(schedule);
     resize.observe(scroller);
     const content = new MutationObserver(schedule);
@@ -12109,7 +12177,7 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
       resize.disconnect();
       content.disconnect();
       theme.disconnect();
-      scroller.removeEventListener("scroll", schedule);
+      scroller.removeEventListener("scroll", onScroll, true);
       window.removeEventListener("resize", schedule);
     };
   }, [viewport, rows, columns, widths, rowHeight, headerHeight]);

package/dist/index.css

@@ -7458,11 +7458,15 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 }
 .sia-form-item {
   display: grid;
-  grid-template-columns: minmax(90px, 140px) minmax(0, 1fr);
+  grid-template-columns: var(--sia-form-label-width, var(--sia-form-auto-label-width, 0px)) minmax(0, 1fr);
   gap: 8px 14px;
   margin-bottom: 6px;
   color: var(--sia-color-text);
 }
+.sia-form-item__label-content {
+  display: inline-block;
+  width: max-content;
+}
 .sia-form-item__label {
   padding-top: 8px;
   text-align: right;
@@ -7554,6 +7558,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   gap: 8px;
 }
 .sia-form--inline .sia-form-item__label {
+  flex: 0 0 var(--sia-form-label-width, var(--sia-form-auto-label-width, 0px));
   text-align: left;
 }
 .sia-form-error-list {
@@ -7934,6 +7939,10 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   background: transparent;
   border: 0;
 }
+.sia-dropdown__menu .sia-menu__item,
+.sia-menu__popup .sia-menu__item {
+  font-size: inherit;
+}
 .sia-dropdown__menu > .sia-menu__entry:first-child {
   margin-top: 0;
 }

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { T as TagStatus, B as BadgeProps } from './core-CADzSGab.cjs';
-export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-CADzSGab.cjs';
+import { T as TagStatus, B as BadgeProps } from './core-D2IjiQhj.cjs';
+export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-D2IjiQhj.cjs';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.cjs';
@@ -736,7 +736,7 @@ interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"
     /** 表单初始值 */
     initialValues?: FormValues;
     /**
-     * 布局方式。
+     * 布局方式；horizontal 与 inline 默认按当前表单内最宽标签对齐，vertical 保持标签在控件上方。
      * @defaultValue "horizontal"
      */
     layout?: "horizontal" | "vertical" | "inline";
@@ -769,7 +769,7 @@ declare function FormRoot({ form, initialValues, layout, size: sizeProp, placeho
 interface FormItemProps {
     /** 绑定到表单值的字段名或嵌套路径，例如 ["user", "name"]。 */
     name?: NamePath;
-    /** 字段标签，支持文本或 React 节点。 */
+    /** 字段标签，支持文本或 React 节点；横向及行内布局未指定标签列宽时，与同一 Form 内最宽的可见标签对齐，测量包含必填标记。 */
     label?: ReactNode;
     /**
      * 字段的校验规则，按配置执行。

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { T as TagStatus, B as BadgeProps } from './core-wsymjzoC.js';
-export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-wsymjzoC.js';
+import { T as TagStatus, B as BadgeProps } from './core-Bb0160em.js';
+export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-Bb0160em.js';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.js';
@@ -736,7 +736,7 @@ interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"
     /** 表单初始值 */
     initialValues?: FormValues;
     /**
-     * 布局方式。
+     * 布局方式；horizontal 与 inline 默认按当前表单内最宽标签对齐，vertical 保持标签在控件上方。
      * @defaultValue "horizontal"
      */
     layout?: "horizontal" | "vertical" | "inline";
@@ -769,7 +769,7 @@ declare function FormRoot({ form, initialValues, layout, size: sizeProp, placeho
 interface FormItemProps {
     /** 绑定到表单值的字段名或嵌套路径，例如 ["user", "name"]。 */
     name?: NamePath;
-    /** 字段标签，支持文本或 React 节点。 */
+    /** 字段标签，支持文本或 React 节点；横向及行内布局未指定标签列宽时，与同一 Form 内最宽的可见标签对齐，测量包含必填标记。 */
     label?: ReactNode;
     /**
      * 字段的校验规则，按配置执行。

package/dist/index.js

@@ -80,7 +80,7 @@ import {
   Watermark,
   message,
   notification
-} from "./chunk-KXPNW4E6.js";
+} from "./chunk-FJ3FP4YV.js";
 import {
   TextArea
 } from "./chunk-SMCYEPBL.js";
@@ -90,12 +90,12 @@ import {
 import {
   RichTextContent,
   RichTextEditor
-} from "./chunk-ZDC7PMZN.js";
+} from "./chunk-DTZUBD2O.js";
 import {
   DatePicker,
   SelectDateRange,
   TimePanel
-} from "./chunk-E4RMSZOC.js";
+} from "./chunk-ZX2YNHQJ.js";
 import {
   Checkbox,
   FloatingScrollbarProvider,
@@ -110,7 +110,7 @@ import {
   Tree,
   useOverlayLifecycle,
   useScrollbarProximity
-} from "./chunk-NYJSSPIX.js";
+} from "./chunk-PJT676UK.js";
 import {
   Dropdown,
   FILLED_ICON_NAMES,
@@ -120,7 +120,7 @@ import {
   Menu,
   Segmented,
   Steps
-} from "./chunk-XCVAVCIO.js";
+} from "./chunk-IUZ2RSI5.js";
 import {
   Button
 } from "./chunk-IKAMZNCK.js";
@@ -1413,7 +1413,7 @@ var Drawer2 = Object.assign(DrawerRoot, {
 });
 
 // src/components/Form.tsx
-import { Children as Children3, cloneElement as cloneElement2, createContext as createContext2, forwardRef as forwardRef2, isValidElement as isValidElement2, useContext as useContext2, useEffect as useEffect3, useId as useId3, useMemo as useMemo4, useRef as useRef5, useSyncExternalStore } from "react";
+import { Children as Children3, cloneElement as cloneElement2, createContext as createContext2, forwardRef as forwardRef2, isValidElement as isValidElement2, useContext as useContext2, useEffect as useEffect3, useId as useId3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef5, useSyncExternalStore } from "react";
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var Switch = forwardRef2(function Switch2({
   label,
@@ -1660,9 +1660,51 @@ function FormRoot({
   const instance = internalForm;
   instance.configure(initialValues, { onFinish, onFinishFailed, onValuesChange });
   const context = useMemo4(() => instance, [instance]);
+  const formRef = useRef5(null);
+  useLayoutEffect2(() => {
+    const root = formRef.current;
+    if (!root) return;
+    let frame = 0;
+    const observed = /* @__PURE__ */ new Set();
+    const measure = () => {
+      frame = 0;
+      const labels = [...root.querySelectorAll(".sia-form-item__label-content")].filter((label) => label.closest(".sia-form") === root);
+      const next = new Set(labels);
+      observed.forEach((label) => {
+        if (!next.has(label)) {
+          resizeObserver.unobserve(label);
+          observed.delete(label);
+        }
+      });
+      let width = 0;
+      labels.forEach((label) => {
+        if (!observed.has(label)) {
+          resizeObserver.observe(label);
+          observed.add(label);
+        }
+        if (label.getClientRects().length) width = Math.max(width, label.offsetWidth);
+      });
+      const value = `${Math.ceil(width)}px`;
+      if (root.style.getPropertyValue("--sia-form-auto-label-width") !== value) root.style.setProperty("--sia-form-auto-label-width", value);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    const resizeObserver = new ResizeObserver(schedule);
+    resizeObserver.observe(root);
+    const mutations = new MutationObserver(schedule);
+    mutations.observe(root, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["class", "style", "hidden"] });
+    measure();
+    return () => {
+      resizeObserver.disconnect();
+      mutations.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
   return /* @__PURE__ */ jsx9(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx9(PlaceholderModeContext.Provider, { value: resolvedPlaceholderMode, children: /* @__PURE__ */ jsx9(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx9(
     "form",
     {
+      ref: formRef,
       ...withTitleTooltip(props),
       className: `sia-form sia-form--${layout} sia-form--${size}${disabled ? " is-disabled" : ""} ${className}`.trim(),
       "data-required-mark": requiredMark,
@@ -1755,10 +1797,10 @@ function FormItem({
   const inputWrap = /* @__PURE__ */ jsx9("div", { className: "sia-form-item__input-wrap", children: content });
   const hasError = status === "error" && Boolean(helpContent);
   return /* @__PURE__ */ jsxs9("div", { ref: itemRef, className: `sia-form-item${status ? ` sia-form-item--${status}` : ""} ${className}`.trim(), "data-sia-form-field": key || void 0, children: [
-    label ? /* @__PURE__ */ jsxs9("div", { id: labelId, className: "sia-form-item__label", children: [
+    label ? /* @__PURE__ */ jsx9("div", { id: labelId, className: "sia-form-item__label", children: /* @__PURE__ */ jsxs9("span", { className: "sia-form-item__label-content", children: [
       ruleRequired ? /* @__PURE__ */ jsx9("span", { className: "sia-form-item__required-mark", "aria-hidden": "true", children: "*" }) : null,
       label
-    ] }) : null,
+    ] }) }) : null,
     /* @__PURE__ */ jsxs9("div", { className: "sia-form-item__control", children: [
       /* @__PURE__ */ jsx9(
         Tooltip,
@@ -4652,7 +4694,7 @@ function Treemap({
 }
 
 // src/components/Table/TableCellContent.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef13, useState as useState16 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef13, useState as useState16 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var pendingLayouts = /* @__PURE__ */ new Map();
 var layoutFrame;
@@ -4674,7 +4716,7 @@ function TableCellContent({ children, ellipsis, title }) {
   const ref = useRef13(null);
   const [overflowing, setOverflowing] = useState16(false);
   const customContent = typeof children !== "string" && typeof children !== "number" && children != null;
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const element = ref.current;
     if (!element || !ellipsis || !customContent) return;
     const normalizeLayouts = (parent, layouts) => {
@@ -4710,7 +4752,7 @@ function TableCellContent({ children, ellipsis, title }) {
 }
 
 // src/components/Table/TableCanvasLayer.tsx
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef14 } from "react";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef14 } from "react";
 
 // src/components/Table/utils.ts
 var AUTO_WIDTH_COLUMN_KEYS = /* @__PURE__ */ new Set(["action", "actions", "operation", "operations"]);
@@ -4766,7 +4808,7 @@ function toTablePageParams(current, pageSize) {
 import { jsx as jsx21 } from "react/jsx-runtime";
 function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHeight }) {
   const canvasRef = useRef14(null);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     const canvas = canvasRef.current;
     const scroller = viewport.current;
     if (!canvas || !scroller) return;
@@ -4867,7 +4909,11 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
     const schedule = () => {
       if (!frame) frame = requestAnimationFrame(draw);
     };
-    scroller.addEventListener("scroll", schedule, { passive: true });
+    const onScroll = () => {
+      cancelAnimationFrame(frame);
+      draw();
+    };
+    scroller.addEventListener("scroll", onScroll, { passive: true, capture: true });
     const resize = new ResizeObserver(schedule);
     resize.observe(scroller);
     const content = new MutationObserver(schedule);
@@ -4881,7 +4927,7 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
       resize.disconnect();
       content.disconnect();
       theme.disconnect();
-      scroller.removeEventListener("scroll", schedule);
+      scroller.removeEventListener("scroll", onScroll, true);
       window.removeEventListener("resize", schedule);
     };
   }, [viewport, rows, columns, widths, rowHeight, headerHeight]);
@@ -8421,7 +8467,7 @@ var InputSelect = forwardRef7(function InputSelect2({
 });
 
 // src/components/QueryForm.tsx
-import { Children as Children4, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState20 } from "react";
+import { Children as Children4, useLayoutEffect as useLayoutEffect5, useRef as useRef18, useState as useState20 } from "react";
 import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 function QueryForm({
   fields,
@@ -8477,7 +8523,7 @@ function QueryForm({
   const rowRef = useRef18(null);
   const actionsRef = useRef18(null);
   const [fittingCount, setFittingCount] = useState20(limit);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!collapsed) return;
     const row = rowRef.current;
     const actions = actionsRef.current;

package/dist/rich-text-editor.cjs

@@ -1233,6 +1233,16 @@ function MenuPopup({
   onMouseLeave
 }) {
   const [mounted, setMounted] = (0, import_react5.useState)(open);
+  const [fontSize, setFontSize] = (0, import_react5.useState)();
+  (0, import_react5.useLayoutEffect)(() => {
+    const anchor = anchorRef.current;
+    if (!mounted || !anchor) return;
+    const syncFontSize = () => setFontSize(getComputedStyle(anchor).fontSize);
+    syncFontSize();
+    const observer = new ResizeObserver(syncFontSize);
+    observer.observe(anchor);
+    return () => observer.disconnect();
+  });
   (0, import_react5.useEffect)(() => {
     if (open) {
       setMounted(true);
@@ -1249,6 +1259,7 @@ function MenuPopup({
       placement,
       offset: 4,
       className: `sia-menu__popup sia-menu--${theme}${open ? " is-open" : " is-closing"}`,
+      style: { fontSize },
       "data-sia-menu-owner": menuId,
       onMouseEnter,
       onMouseLeave,
@@ -1450,6 +1461,17 @@ function DropdownRoot({
   const visible = open ?? internalOpen;
   const triggerSet = new Set(trigger);
   const pointAtCenter = typeof arrow === "object" && arrow.pointAtCenter;
+  const [triggerFontSize, setTriggerFontSize] = (0, import_react7.useState)();
+  (0, import_react7.useLayoutEffect)(() => {
+    if (!visible || !rootRef.current) return;
+    const root = rootRef.current;
+    const target = root.querySelector("button, [role='button'], a") ?? (root.firstElementChild !== contextAnchorRef.current ? root.firstElementChild : null) ?? root;
+    const syncFontSize = () => setTriggerFontSize(getComputedStyle(target).fontSize);
+    syncFontSize();
+    const observer = new ResizeObserver(syncFontSize);
+    observer.observe(target);
+    return () => observer.disconnect();
+  });
   function clearTimer(ref) {
     if (ref.current === void 0) return;
     window.clearTimeout(ref.current);
@@ -1621,7 +1643,7 @@ function DropdownRoot({
             placement: contextPoint ? "bottom-start" : placementMap[placement],
             offset: contextPoint ? 2 : 6,
             className: `sia-dropdown__popup${visible ? " is-open" : " is-closing"}${arrow ? " sia-dropdown__popup--arrow" : ""}${pointAtCenter ? " sia-dropdown__popup--arrow-center" : ""} ${popupClassName}`.trim(),
-            style: popupStyle,
+            style: { fontSize: triggerFontSize, ...popupStyle },
             onMouseEnter: () => {
               clearTimer(closeTimerRef);
               if (!disabled && triggerSet.has("hover")) clearTimer(openTimerRef);

package/dist/rich-text-editor.js

@@ -1,8 +1,8 @@
 import {
   RichTextContent,
   RichTextEditor
-} from "./chunk-ZDC7PMZN.js";
-import "./chunk-XCVAVCIO.js";
+} from "./chunk-DTZUBD2O.js";
+import "./chunk-IUZ2RSI5.js";
 import "./chunk-IKAMZNCK.js";
 import "./chunk-H7IAG72O.js";
 export {

package/dist/select-date-range.js

@@ -1,8 +1,8 @@
 import {
   SelectDateRange
-} from "./chunk-E4RMSZOC.js";
-import "./chunk-NYJSSPIX.js";
-import "./chunk-XCVAVCIO.js";
+} from "./chunk-ZX2YNHQJ.js";
+import "./chunk-PJT676UK.js";
+import "./chunk-IUZ2RSI5.js";
 import "./chunk-IKAMZNCK.js";
 import "./chunk-H7IAG72O.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",