@sia.soul/sia-react-ui 0.1.10 → 0.1.11

package/dist/index.cjs

@@ -2905,6 +2905,7 @@ var Select = (0, import_react15.forwardRef)(function Select2({
   optionHeight = showValue ? 54 : 34,
   disabled,
   className = "",
+  style,
   id,
   notFoundContent = "\u6682\u65E0\u6570\u636E",
   onKeyDown,
@@ -3135,7 +3136,7 @@ var Select = (0, import_react15.forwardRef)(function Select2({
     setModalValues([...modalValues.filter((value2) => !editable.has(value2)), ...modalEnabled.filter((option) => operation === "all" || operation === "invert" && !modalValues.includes(option.value)).map((option) => option.value)]);
   }
   const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasValue, active: open });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "button",
       {
@@ -4517,6 +4518,10 @@ function clamp3(value, min, max) {
 function ToolPanel({
   title,
   icon,
+  items,
+  activeKey,
+  defaultActiveKey,
+  onActiveKeyChange,
   placement = "left",
   open,
   defaultOpen = true,
@@ -4531,9 +4536,56 @@ function ToolPanel({
   children,
   ...props
 }) {
+  const panelId = (0, import_react23.useId)();
+  const [internalActiveKey, setInternalActiveKey] = (0, import_react23.useState)(defaultActiveKey);
   const [internalOpen, setInternalOpen] = (0, import_react23.useState)(defaultOpen);
   const [size, setSize] = (0, import_react23.useState)(() => clamp3(defaultSize, minSize, maxSize));
-  const isOpen = open ?? internalOpen;
+  const panels = items ?? [{ key: "single", title, icon, children }];
+  const requestedKey = activeKey ?? internalActiveKey;
+  const activePanel = panels.find((item) => item.key === requestedKey && !item.disabled) ?? panels.find((item) => !item.disabled);
+  const isOpen = (open ?? internalOpen) && Boolean(activePanel);
+  const railRef = (0, import_react23.useRef)(null);
+  const indicatorRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useLayoutEffect)(() => {
+    const rail2 = railRef.current;
+    const indicator = indicatorRef.current;
+    if (!rail2 || !indicator) return;
+    function updateIndicator() {
+      if (!rail2 || !indicator) return;
+      const active = rail2.querySelector(".sia-tool-panel__activity.is-active");
+      if (!active) {
+        indicator.style.visibility = "hidden";
+        delete indicator.dataset.ready;
+        return;
+      }
+      const railRect = rail2.getBoundingClientRect();
+      const rect = active.getBoundingClientRect();
+      const x = rect.left - railRect.left - rail2.clientLeft + rail2.scrollLeft + (placement === "left" ? rect.width - 3 : 0);
+      const y = rect.top - railRect.top - rail2.clientTop + rail2.scrollTop;
+      indicator.style.transform = `translate(${x}px, ${y}px)`;
+      indicator.style.height = `${rect.height}px`;
+      indicator.style.visibility = "visible";
+      if (!indicator.dataset.ready) {
+        indicator.getBoundingClientRect();
+        indicator.dataset.ready = "true";
+      }
+    }
+    updateIndicator();
+    const observer = new ResizeObserver(updateIndicator);
+    observer.observe(rail2);
+    rail2.querySelectorAll(".sia-tool-panel__activity").forEach((item) => observer.observe(item));
+    return () => observer.disconnect();
+  }, [isOpen, activePanel?.key, items, title, icon, placement]);
+  function activatePanel(item) {
+    if (item.disabled) return;
+    if (item.key === activePanel?.key) {
+      setOpen(!isOpen);
+    } else {
+      if (activeKey === void 0) setInternalActiveKey(item.key);
+      onActiveKeyChange?.(item.key);
+      if (!isOpen) setOpen(true);
+    }
+  }
   function setOpen(nextOpen) {
     if (open === void 0) setInternalOpen(nextOpen);
     onOpenChange?.(nextOpen);
@@ -4572,23 +4624,45 @@ function ToolPanel({
     const direction = event.key === "ArrowRight" ? 1 : -1;
     resize(size + (placement === "left" ? direction : -direction) * 12, true);
   }
-  const titleText = typeof title === "string" ? title : "\u5DE5\u5177";
-  const rail = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "sia-tool-panel__rail", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-    "button",
+  const titleText = typeof activePanel?.title === "string" ? activePanel.title : "\u5DE5\u5177";
+  const rail = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref: railRef, className: "sia-tool-panel__rail", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { ref: indicatorRef, className: "sia-tool-panel__indicator", "aria-hidden": "true" }),
+    panels.map((item, index) => {
+      const expanded = isOpen && item.key === activePanel?.key;
+      const label = typeof item.title === "string" ? item.title : "\u5DE5\u5177";
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        "button",
+        {
+          id: `${panelId}-activity-${index}`,
+          type: "button",
+          className: `sia-tool-panel__activity${expanded ? " is-active" : ""}`,
+          "aria-expanded": expanded,
+          "aria-controls": `${panelId}-content-${index}`,
+          "aria-label": `${expanded ? "\u6536\u8D77" : "\u5C55\u5F00"}${label}\u9762\u677F`,
+          title: typeof item.title === "string" ? item.title : void 0,
+          disabled: item.disabled,
+          onClick: () => activatePanel(item),
+          children: [
+            item.icon ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sia-tool-panel__activity-icon", children: item.icon }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sia-tool-panel__activity-label", children: item.title })
+          ]
+        },
+        item.key
+      );
+    })
+  ] });
+  const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "sia-tool-panel__content", hidden: !isOpen, "aria-hidden": !isOpen, children: panels.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "div",
     {
-      type: "button",
-      className: `sia-tool-panel__activity${isOpen ? " is-active" : ""}`,
-      "aria-expanded": isOpen,
-      "aria-label": `${isOpen ? "\u6536\u8D77" : "\u5C55\u5F00"}${titleText}\u9762\u677F`,
-      title: typeof title === "string" ? title : void 0,
-      onClick: () => setOpen(!isOpen),
-      children: [
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sia-tool-panel__activity-icon", children: icon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sia-tool-panel__activity-label", children: title })
-      ]
-    }
-  ) });
-  const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "sia-tool-panel__content", hidden: !isOpen, "aria-hidden": !isOpen, children });
+      id: `${panelId}-content-${index}`,
+      className: "sia-tool-panel__pane",
+      role: "region",
+      "aria-labelledby": `${panelId}-activity-${index}`,
+      hidden: !isOpen || item.key !== activePanel?.key,
+      children: item.children
+    },
+    item.key
+  )) });
   const resizeHandle = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
@@ -9535,6 +9609,38 @@ function Tabs({
   const enabledItems = (0, import_react40.useMemo)(() => items.filter((item) => !item.disabled), [items]);
   const resolvedPosition = tabPosition ?? (orientation === "vertical" ? "left" : "top");
   const resolvedOrientation = resolvedPosition === "left" || resolvedPosition === "right" ? "vertical" : "horizontal";
+  const sliding = ["capsule", "line", "underline", "tech", "tech-line"].includes(type);
+  const listRef = (0, import_react40.useRef)(null);
+  const indicatorRef = (0, import_react40.useRef)(null);
+  (0, import_react40.useLayoutEffect)(() => {
+    if (!sliding) return;
+    const list = listRef.current;
+    const indicator = indicatorRef.current;
+    if (!list || !indicator) return;
+    function updateIndicator() {
+      if (!list || !indicator) return;
+      const active = list.querySelector('[role="tab"][aria-selected="true"]');
+      if (!active) {
+        indicator.style.visibility = "hidden";
+        return;
+      }
+      const listRect = list.getBoundingClientRect();
+      const rect = active.getBoundingClientRect();
+      indicator.style.transform = `translate(${rect.left - listRect.left - list.clientLeft + list.scrollLeft}px, ${rect.top - listRect.top - list.clientTop + list.scrollTop}px)`;
+      indicator.style.width = `${rect.width}px`;
+      indicator.style.height = `${rect.height}px`;
+      indicator.style.visibility = "visible";
+      if (!indicator.dataset.ready) {
+        indicator.getBoundingClientRect();
+        indicator.dataset.ready = "true";
+      }
+    }
+    updateIndicator();
+    const observer = new ResizeObserver(updateIndicator);
+    observer.observe(list);
+    list.querySelectorAll('[role="tab"]').forEach((tab) => observer.observe(tab));
+    return () => observer.disconnect();
+  }, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable]);
   function selectTab(key) {
     if (key === selectedKey) return;
     if (activeKey === void 0) setInternalActiveKey(key);
@@ -9560,7 +9666,7 @@ function Tabs({
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
-      className: `sia-tabs sia-tabs--${type} sia-tabs--${size} sia-tabs--${resolvedOrientation} sia-tabs--${resolvedPosition}${centered ? " sia-tabs--centered" : ""} ${className}`.trim(),
+      className: `sia-tabs sia-tabs--${type}${type === "underline" ? " sia-tabs--line" : ""} sia-tabs--${size} sia-tabs--${resolvedOrientation} sia-tabs--${resolvedPosition}${centered ? " sia-tabs--centered" : ""} ${className}`.trim(),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "sia-tabs__header", children: [
@@ -9568,77 +9674,96 @@ function Tabs({
             tabBarTitle,
             type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M0 39 H5 Q8 39 10 35 L28 3 Q29 1 32 1", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }) : null
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "sia-tabs__list", role: "tablist", "aria-orientation": resolvedOrientation, children: items.map((item) => {
-            const selected = item.key === selectedKey;
-            const canClose = item.closable ?? closable;
-            const tabNode = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-                "button",
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ref: listRef, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
+            sliding ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { ref: indicatorRef, className: `sia-tabs__indicator${type === "capsule" ? " sia-tabs__capsule-indicator" : ""}`, "aria-hidden": "true", children: type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("svg", { className: "sia-tabs__indicator-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("linearGradient", { id: `${baseId}-tab-fill-indicator`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                "path",
                 {
-                  id: `${baseId}-tab-${item.key}`,
-                  type: "button",
-                  className: "sia-tabs__tab",
-                  role: "tab",
-                  "aria-selected": selected,
-                  "aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
-                  tabIndex: selected ? 0 : -1,
-                  disabled: item.disabled,
-                  onClick: () => selectTab(item.key),
-                  onKeyDown: (event) => handleKeyDown(event, item.key),
-                  children: [
-                    type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("svg", { className: "sia-tabs__tab-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("linearGradient", { id: `${baseId}-tab-fill-${item.key}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
-                      ] }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                        "path",
-                        {
-                          d: "M19 1 H96 Q99 1 97.5 4 L83.5 30 Q82 33 79 33 H4 Q1 33 2.5 30 L16.5 4 Q18 1 19 1 Z",
-                          fill: `url(#${baseId}-tab-fill-${item.key})`,
-                          stroke: "currentColor",
-                          strokeWidth: "1.5",
-                          vectorEffect: "non-scaling-stroke"
-                        }
-                      )
-                    ] }) : null,
-                    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "sia-tabs__icon", children: item.icon }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: item.label })
-                  ]
+                  d: "M19 1 H96 Q99 1 97.5 4 L83.5 30 Q82 33 79 33 H4 Q1 33 2.5 30 L16.5 4 Q18 1 19 1 Z",
+                  fill: `url(#${baseId}-tab-fill-indicator)`,
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  vectorEffect: "non-scaling-stroke"
                 }
-              ),
-              canClose ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                "button",
+              )
+            ] }) : null }, type) : null,
+            items.map((item) => {
+              const selected = item.key === selectedKey;
+              const canClose = item.closable ?? closable;
+              const tabNode = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                  "button",
+                  {
+                    id: `${baseId}-tab-${item.key}`,
+                    type: "button",
+                    className: "sia-tabs__tab",
+                    role: "tab",
+                    "aria-selected": selected,
+                    "aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
+                    tabIndex: selected ? 0 : -1,
+                    disabled: item.disabled,
+                    onClick: () => selectTab(item.key),
+                    onKeyDown: (event) => handleKeyDown(event, item.key),
+                    children: [
+                      type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("svg", { className: "sia-tabs__tab-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("linearGradient", { id: `${baseId}-tab-fill-${item.key}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
+                        ] }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                          "path",
+                          {
+                            d: "M19 1 H96 Q99 1 97.5 4 L83.5 30 Q82 33 79 33 H4 Q1 33 2.5 30 L16.5 4 Q18 1 19 1 Z",
+                            fill: `url(#${baseId}-tab-fill-${item.key})`,
+                            stroke: "currentColor",
+                            strokeWidth: "1.5",
+                            vectorEffect: "non-scaling-stroke"
+                          }
+                        )
+                      ] }) : null,
+                      item.icon ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "sia-tabs__icon", children: item.icon }) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: item.label })
+                    ]
+                  }
+                ),
+                canClose ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "sia-tabs__close",
+                    "aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
+                    disabled: item.disabled,
+                    onClick: () => onEdit?.(item.key, "remove"),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: "close", size: 12 })
+                  }
+                ) : null
+              ] }, item.key);
+              const contextMenuItems = typeof tabContextMenu === "function" ? tabContextMenu(item) : tabContextMenu;
+              if (!contextMenuItems?.length) return tabNode;
+              return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                Dropdown,
                 {
-                  type: "button",
-                  className: "sia-tabs__close",
-                  "aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
-                  disabled: item.disabled,
-                  onClick: () => onEdit?.(item.key, "remove"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: "close", size: 12 })
-                }
-              ) : null
-            ] }, item.key);
-            const contextMenuItems = typeof tabContextMenu === "function" ? tabContextMenu(item) : tabContextMenu;
-            if (!contextMenuItems?.length) return tabNode;
-            return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-              Dropdown,
-              {
-                className: "sia-tabs__tab-context-trigger",
-                popupClassName: "sia-tabs__tab-context-menu",
-                trigger: ["contextMenu"],
-                tabIndex: -1,
-                menu: {
-                  items: contextMenuItems,
-                  selectable: false,
-                  onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
+                  className: "sia-tabs__tab-context-trigger",
+                  popupClassName: "sia-tabs__tab-context-menu",
+                  trigger: ["contextMenu"],
+                  tabIndex: -1,
+                  menu: {
+                    items: contextMenuItems,
+                    selectable: false,
+                    onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
+                  },
+                  children: tabNode
                 },
-                children: tabNode
-              },
-              item.key
-            );
-          }) }),
+                item.key
+              );
+            })
+          ] }),
           tabBarExtraContent ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "sia-tabs__extra", children: tabBarExtraContent }) : null
         ] }),
         hasPanels ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "sia-tabs__panels", children: items.map((item) => {

package/dist/index.css

@@ -4121,12 +4121,14 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   }
 }
 .sia-table__settings-dropdown .sia-menu__item {
-  min-height: 44px;
-  padding: 10px 16px;
-  gap: 12px;
+  min-height: 34px;
+  padding: 4px 12px;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 24px;
 }
 .sia-table__settings-dropdown .sia-menu__divider {
-  margin: 8px 12px;
+  margin: 4px 8px;
 }
 .sia-table--borderless-toolbar {
   border: 0;
@@ -4263,6 +4265,184 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.sia-tabs--capsule,
+.sia-tabs--underline {
+  --sia-tabs-accent: var(--sia-color-primary);
+  --sia-tabs-selection-bg: var(--sia-color-primary-light);
+}
+.sia-tabs--capsule .sia-tabs__list {
+  position: relative;
+  isolation: isolate;
+  flex: 0 1 auto;
+  gap: 4px;
+  padding: 5px;
+  border: 1px solid var(--sia-color-border);
+  border-radius: 999px;
+  background: var(--sia-color-surface);
+  box-shadow: 0 3px 7px -3px rgb(0 0 0 / 24%);
+}
+.sia-tabs--capsule .sia-tabs__tab {
+  height: 34px;
+  padding-inline: 22px;
+  border-radius: 999px;
+  transition: background-color 240ms ease, color 240ms ease;
+}
+.sia-tabs--capsule .sia-tabs__tab[aria-selected=true] {
+  color: var(--sia-tabs-accent);
+  background: transparent;
+  font-weight: 500;
+}
+.sia-tabs--capsule.sia-tabs--small .sia-tabs__tab {
+  height: 26px;
+  padding-inline: 16px;
+}
+.sia-tabs--capsule.sia-tabs--large .sia-tabs__tab {
+  height: 42px;
+  padding-inline: 26px;
+}
+.sia-tabs--capsule.sia-tabs--centered .sia-tabs__header {
+  justify-content: center;
+}
+.sia-tabs--capsule.sia-tabs--vertical .sia-tabs__list {
+  border-radius: 24px;
+}
+.sia-tabs--underline .sia-tabs__list {
+  gap: 0;
+}
+.sia-tabs--underline .sia-tabs__tab {
+  padding-inline: 22px;
+  transition: color 240ms ease;
+}
+.sia-tabs--underline .sia-tabs__tab[aria-selected=true] {
+  color: var(--sia-tabs-accent);
+  font-weight: 500;
+}
+.sia-tabs--underline .sia-tabs__tab[aria-selected=true]::after {
+  background: var(--sia-tabs-accent);
+}
+.sia-tabs--underline .sia-tabs__tab .sia-badge {
+  margin-inline-end: 8px;
+}
+.sia-tabs--capsule .sia-tabs__tab:focus-visible,
+.sia-tabs--underline .sia-tabs__tab:focus-visible {
+  outline: 2px solid var(--sia-tabs-accent);
+  outline-offset: -2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-tabs--capsule .sia-tabs__tab,
+  .sia-tabs--underline .sia-tabs__tab {
+    transition: none;
+  }
+}
+.sia-tabs__capsule-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  visibility: hidden;
+  border-radius: 999px;
+  background: var(--sia-tabs-selection-bg);
+  pointer-events: none;
+}
+.sia-tabs__capsule-indicator[data-ready=true] {
+  transition:
+    transform 240ms ease,
+    width 240ms ease,
+    height 240ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-tabs__capsule-indicator[data-ready=true] {
+    transition: none;
+  }
+}
+.sia-tabs__list--sliding {
+  position: relative;
+  isolation: isolate;
+}
+.sia-tabs__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sia-tabs__indicator[data-ready=true] {
+  transition:
+    transform 240ms ease,
+    width 240ms ease,
+    height 240ms ease;
+}
+.sia-tabs--line .sia-tabs__tab[aria-selected=true]::after {
+  display: none;
+}
+.sia-tabs--line .sia-tabs__indicator::after {
+  position: absolute;
+  content: "";
+  background: var(--sia-tabs-accent, var(--sia-color-primary));
+}
+.sia-tabs--line.sia-tabs--top .sia-tabs__indicator::after {
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+}
+.sia-tabs--line.sia-tabs--bottom .sia-tabs__indicator::after {
+  top: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  border-radius: 0 0 2px 2px;
+}
+.sia-tabs--line.sia-tabs--left .sia-tabs__indicator::after {
+  top: 0;
+  bottom: 0;
+  right: -1px;
+  width: 2px;
+}
+.sia-tabs--line.sia-tabs--right .sia-tabs__indicator::after {
+  top: 0;
+  bottom: 0;
+  left: -1px;
+  width: 2px;
+}
+.sia-tabs--tech .sia-tabs__tab[aria-selected=true]::before,
+.sia-tabs--tech .sia-tabs__tab[aria-selected=true]::after {
+  display: none;
+}
+.sia-tabs--tech .sia-tabs__indicator::before,
+.sia-tabs--tech .sia-tabs__indicator::after {
+  position: absolute;
+  content: "";
+  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
+}
+.sia-tabs--tech .sia-tabs__indicator::before {
+  inset: 1px 0;
+  background: var(--sia-tabs-tech-accent);
+}
+.sia-tabs--tech .sia-tabs__indicator::after {
+  inset: 2px 1px;
+  background: var(--sia-tabs-tech-selection);
+}
+.sia-tabs--tech-line .sia-tabs__tab[aria-selected=true] .sia-tabs__tab-shape {
+  visibility: hidden;
+}
+.sia-tabs__indicator-shape {
+  display: block;
+  width: 100%;
+  height: 100%;
+  color: var(--sia-tabs-line-accent);
+}
+[data-sia-theme=dark] .sia-tabs--tech-line .sia-tabs__indicator {
+  --sia-tabs-line-fill-edge: var(--sia-tabs-line-surface);
+  --sia-tabs-line-fill-center: var(--sia-color-primary);
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-tabs__indicator[data-ready=true] {
+    transition: none;
+  }
+}
 
 /* src/components-extra.css */
 .sia-flex {
@@ -4634,11 +4814,14 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   width: calc(var(--sia-tool-panel-rail-size) + var(--sia-tool-panel-size) + var(--sia-tool-panel-handle-size));
 }
 .sia-tool-panel__rail {
+  position: relative;
   display: flex;
+  flex-direction: column;
   align-items: flex-start;
   flex: 0 0 var(--sia-tool-panel-rail-size);
   width: var(--sia-tool-panel-rail-size);
   min-width: 0;
+  overflow-y: auto;
   background: var(--sia-color-surface);
 }
 .sia-tool-panel--left:not(.is-open) .sia-tool-panel__rail {
@@ -4668,16 +4851,38 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   background: var(--sia-color-control-hover);
 }
 .sia-tool-panel__activity:focus-visible {
-  outline: none;
+  outline: 2px solid var(--sia-color-primary);
+  outline-offset: -2px;
+}
+.sia-tool-panel__activity {
+  flex-shrink: 0;
+}
+.sia-tool-panel__activity:disabled {
+  cursor: not-allowed;
+  opacity: .45;
+  background: transparent;
+  color: var(--sia-color-text-secondary);
 }
 .sia-tool-panel__activity.is-active {
   color: var(--sia-color-primary-text);
 }
-.sia-tool-panel--left .sia-tool-panel__activity.is-active {
-  box-shadow: inset -3px 0 0 var(--sia-color-primary);
+.sia-tool-panel__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 3px;
+  visibility: hidden;
+  background: var(--sia-color-primary);
+  pointer-events: none;
 }
-.sia-tool-panel--right .sia-tool-panel__activity.is-active {
-  box-shadow: inset 3px 0 0 var(--sia-color-primary);
+.sia-tool-panel__indicator[data-ready=true] {
+  transition: transform 240ms ease, height 240ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-tool-panel__indicator[data-ready=true] {
+    transition: none;
+  }
 }
 .sia-tool-panel__activity-icon {
   display: inline-flex;
@@ -4699,6 +4904,14 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 .sia-tool-panel__content[hidden] {
   display: none;
 }
+.sia-tool-panel__pane {
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+}
+.sia-tool-panel__pane[hidden] {
+  display: none;
+}
 .sia-tool-panel__resize-handle {
   position: relative;
   z-index: 2;