sellmate-design-system-react 9.0.0-beta.75 → 9.0.0-beta.77

package/dist/index.js

@@ -3764,43 +3764,46 @@ var STROKE = 12;
 var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 var COLOR_MAP = {
   primary: { arc: "var(--cmp-progress-color-active)", track: "var(--cmp-progress-color-track)" },
-  // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)
-  inverse: { arc: "var(--color-white)", track: "rgba(255,255,255,0.4)" },
-  error: { arc: "var(--color-red-75)", track: "var(--cmp-progress-color-track)" },
-  complete: { arc: "#01BB4B", track: "var(--cmp-progress-color-track)" },
+  // inverse: 어두운 배경용 — arc 는 반전색, track 은 반전색을 inverse-opacity 만큼만(회색 링)
+  inverse: {
+    arc: "var(--cmp-progress-inverse-color)",
+    track: "color-mix(in srgb, var(--cmp-progress-inverse-color) var(--cmp-progress-inverse-opacity), transparent)"
+  },
+  warning: { arc: "var(--cmp-progress-color-warning)", track: "var(--cmp-progress-color-track)" },
+  error: { arc: "var(--cmp-progress-color-error)", track: "var(--cmp-progress-color-track)" },
+  complete: { arc: "var(--cmp-progress-color-success)", track: "var(--cmp-progress-color-track)" },
   // neutral: 콘텐츠가 아직 없는 자리를 채우는 용도 — arc 도 회색이라 진행률보다 "대기"로 읽힌다
-  neutral: { arc: "var(--color-grey-35)", track: "var(--cmp-progress-color-track)" }
+  neutral: { arc: "var(--cmp-progress-color-neutral)", track: "var(--cmp-progress-color-track)" }
 };
-var DEFAULT_SIZE = 80;
 var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
 var SCircleProgress = /* @__PURE__ */ forwardRef(
   function SCircleProgress2({
     value = 0,
     type = "primary",
     indeterminate = false,
-    size = DEFAULT_SIZE,
+    size,
     label,
     innerValue = false,
     className,
     style
   }, ref) {
     const v = clamp(value);
-    const dimension = typeof size === "number" ? `${size}px` : size;
+    const dimension = size === void 0 ? "var(--cmp-progress-circular-size)" : typeof size === "number" ? `${size}px` : size;
     const colors = COLOR_MAP[type];
     const c = VIEWBOX / 2;
-    const percentColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : colors.arc;
+    const percentColor = v === 0 ? "var(--sys-color-fg-tertiary)" : colors.arc;
     const filled = v / 100 * CIRCUMFERENCE;
     const showPercent = !indeterminate;
     const percentNode = /* @__PURE__ */ jsxs(
       "span",
       {
         className: cn(
-          "text-center text-[16px] font-bold",
+          "typo-heading-md text-center",
           innerValue ? (
             // leading-[normal]: 26px leading 은 폰트 content(19px) 위아래로 홀수(7px)만큼 남아
             // 3px/4px 로 쪼개지고 글자가 링 중심보다 위로 뜬다. (leading-normal 은 1.5 라 동일 문제)
             "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-[normal]"
-          ) : "leading-[26px]"
+          ) : void 0
         ),
         style: { color: percentColor },
         children: [
@@ -3866,7 +3869,7 @@ var SCircleProgress = /* @__PURE__ */ forwardRef(
             showPercent && innerValue && percentNode
           ] }),
           showPercent && !innerValue && percentNode,
-          label && /* @__PURE__ */ jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
+          label && /* @__PURE__ */ jsx("span", { className: "typo-feedback-sm-regular text-center text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }
     );
@@ -7603,6 +7606,10 @@ function TreeBranch({ expanded, children }) {
     }
   );
 }
+function isRowControlClick(event) {
+  const control = event.target.closest("[data-tree-control]");
+  return control != null && event.currentTarget.contains(control);
+}
 function STreeAllItem({
   selected,
   indeterminate,
@@ -7625,14 +7632,16 @@ function STreeAllItem({
       "data-tree-row": rowId,
       tabIndex,
       onKeyDown,
-      onClick: onSelect,
+      onClick: (event) => {
+        if (!isRowControlClick(event)) onSelect(event);
+      },
       className: cn(
         "group/tree-item box-border flex w-full cursor-pointer items-center overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)",
         typography.rowHeight,
         border && "border-b border-(--cmp-tree-item-border-default)"
       ),
       children: /* @__PURE__ */ jsxs("div", { className: "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)", children: [
-        /* @__PURE__ */ jsx("span", { onClick: (event) => event.stopPropagation(), className: "flex shrink-0", children: /* @__PURE__ */ jsx(SCheckbox, { value: checkboxValue, onValueChange: () => onSelect() }) }),
+        /* @__PURE__ */ jsx("span", { "data-tree-control": true, className: "flex shrink-0", children: /* @__PURE__ */ jsx(SCheckbox, { value: checkboxValue, onValueChange: () => onSelect() }) }),
         /* @__PURE__ */ jsx(
           "span",
           {
@@ -7663,6 +7672,10 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
   trailing,
   onToggle,
   onTreeSelect,
+  // treeitem 은 포커스를 받을 수 있어야 한다. tab 순서는 STree 가 한 줄에만 0 을 줘서 정한다(roving).
+  tabIndex = -1,
+  // 줄 단위 키보드 조작(화살표·Enter·Space)은 줄 사이를 오가야 해서 STree 가 쥐고 내려준다
+  onKeyDown,
   className,
   ...rest
 }, ref) {
@@ -7687,6 +7700,11 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
     onTreeSelect?.(node, event);
   };
   const handleRowClick = (event) => {
+    if (isRowControlClick(event)) return;
+    if (selectable && event.target.closest("[data-tree-label]")) {
+      handleSelect(event);
+      return;
+    }
     if (hasChildren) onToggle?.(node, event);
   };
   return /* @__PURE__ */ jsxs(
@@ -7698,6 +7716,8 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
       "aria-expanded": hasChildren ? expanded : void 0,
       "aria-selected": selectable ? selected : void 0,
       "aria-disabled": node.disabled || void 0,
+      tabIndex,
+      onKeyDown,
       onClick: handleRowClick,
       className: cn(
         "group/tree-item box-border flex w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left",
@@ -7743,7 +7763,7 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
           selectable && /* @__PURE__ */ jsx(
             "span",
             {
-              onClick: (event) => event.stopPropagation(),
+              "data-tree-control": true,
               className: "flex shrink-0",
               "aria-hidden": node.disabled ? "true" : void 0,
               children: /* @__PURE__ */ jsx(
@@ -7759,11 +7779,7 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
           /* @__PURE__ */ jsx(
             "span",
             {
-              onClick: (event) => {
-                if (!selectable) return;
-                event.stopPropagation();
-                if (!node.disabled && selectable) onTreeSelect?.(node, event);
-              },
+              "data-tree-label": true,
               className: cn(
                 "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
                 labelTypo,
@@ -8767,6 +8783,7 @@ var SContextAlert = /* @__PURE__ */ forwardRef(function SContextAlert2({ intent
 });
 var FILL_COLOR = {
   primary: "var(--cmp-progress-color-active)",
+  warning: "var(--cmp-progress-color-warning)",
   error: "var(--cmp-progress-color-error)",
   complete: "var(--cmp-progress-color-success)"
 };
@@ -8775,20 +8792,20 @@ var SLinearProgress = /* @__PURE__ */ forwardRef(
   function SLinearProgress2({ value = 0, type = "primary", size = "sm", indeterminate = false, label, className, style }, ref) {
     const v = clamp2(value);
     const fill = FILL_COLOR[type];
-    const valueColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : fill;
+    const valueColor = v === 0 ? "var(--sys-color-fg-tertiary)" : fill;
     const valueText = `${Math.round(v)}%`;
     const showValue = !indeterminate && size !== "xs";
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
-        className: cn("flex w-full flex-col gap-[12px]", className),
+        className: cn("flex w-full flex-col gap-[var(--cmp-progress-linear-gap)]", className),
         style,
         children: [
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "relative w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]",
+              className: "relative w-full overflow-hidden rounded-[var(--cmp-progress-linear-radius)] bg-[var(--cmp-progress-color-track)]",
               style: { height: `var(--cmp-progress-linear-height-${size})` },
               children: [
                 /* @__PURE__ */ jsx(
@@ -8805,7 +8822,7 @@ var SLinearProgress = /* @__PURE__ */ forwardRef(
                   /* @__PURE__ */ jsx(
                     "span",
                     {
-                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px]",
+                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 typo-feedback-sm-bold select-none text-center",
                       style: { color: valueColor },
                       children: valueText
                     }
@@ -8813,7 +8830,7 @@ var SLinearProgress = /* @__PURE__ */ forwardRef(
                   /* @__PURE__ */ jsx(
                     "span",
                     {
-                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px] text-[color:var(--cmp-progress-bar-text)]",
+                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 typo-feedback-sm-bold select-none text-center text-[color:var(--cmp-progress-bar-text)]",
                       style: { clipPath: `inset(0 ${100 - v}% 0 0)` },
                       children: valueText
                     }
@@ -8822,7 +8839,7 @@ var SLinearProgress = /* @__PURE__ */ forwardRef(
               ]
             }
           ),
-          label && /* @__PURE__ */ jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
+          label && /* @__PURE__ */ jsx("span", { className: "typo-feedback-sm-regular text-center text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }
     );
@@ -15700,10 +15717,12 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
     }
     commitOpen(next);
   };
+  const commitOpenRef = useRef(commitOpen);
+  commitOpenRef.current = commitOpen;
   useEffect(() => {
     if (!insideModal || portalContainer == null || !pendingOpen) return;
     setPendingOpen(false);
-    commitOpen(true);
+    commitOpenRef.current(true);
   }, [insideModal, pendingOpen, portalContainer]);
   const requestOpenRef = useRef(requestOpen);
   requestOpenRef.current = requestOpen;
@@ -15905,6 +15924,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
     return labelByValue.get(selected[0]) ?? valueOptions.get(selected[0])?.label ?? selected[0];
   })();
   const isPlaceholder = selected.length === 0;
+  const showTriggerSpinner = loading2 && !effectiveDisabled;
   const showClear = clearable && !effectiveDisabled && !isPlaceholder;
   const handleClear = () => {
     emit3([]);
@@ -16079,6 +16099,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
             "aria-expanded": open,
             "aria-controls": open ? listboxId : void 0,
             "aria-activedescendant": open && focusedIndex >= 0 ? activeOptionId : void 0,
+            "aria-busy": showTriggerSpinner || void 0,
             onClick: () => requestOpen(!open),
             onKeyDown: handleKeyDown,
             className: "flex h-full w-full cursor-pointer items-center justify-between gap-[8px] bg-transparent px-[12px] text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
@@ -16130,7 +16151,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                showTriggerSpinner ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0", "data-select-trigger-spinner": true, children: /* @__PURE__ */ jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: 12 }) }) : /* @__PURE__ */ jsx(
                   SIcon,
                   {
                     name: "chevronDown",
@@ -16246,12 +16267,15 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
                     // 첫 페이지를 받는 중에는 "없다"고 단정하지 않는다 — 아래 로딩 표시가 대신 나온다.
                     /* @__PURE__ */ jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
                   ),
-                  loading2 && /* @__PURE__ */ jsx(
+                  loading2 && /* @__PURE__ */ jsxs(
                     "div",
                     {
                       role: "status",
-                      className: "px-[12px] py-[12px] text-center text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]",
-                      children: "\uBD88\uB7EC\uC624\uB294 \uC911..."
+                      className: "flex items-center justify-center gap-[8px] px-[12px] py-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]",
+                      children: [
+                        /* @__PURE__ */ jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: 16 }),
+                        "\uBD88\uB7EC\uC624\uB294 \uC911..."
+                      ]
                     }
                   )
                 ]
@@ -16521,7 +16545,7 @@ var colWidthFromDef = (c) => {
   const px = typeof c.width === "number" ? c.width : parseInt(c.width, 10);
   return Number.isFinite(px) ? px : DEFAULT_COLUMN_WIDTH;
 };
-var STable = /* @__PURE__ */ forwardRef(function STable2({
+var STableImpl = /* @__PURE__ */ forwardRef(function STable({
   columns = [],
   headerGroups,
   rows = [],
@@ -16562,6 +16586,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
   onVirtualReachEnd,
   tableId,
   onRowClick,
+  onRowDoubleClick,
   className,
   style
 }, ref) {
@@ -17414,13 +17439,18 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
                                 {
                                   "data-row-index": rowIndex,
                                   onClick: () => onRowClick?.(row),
+                                  onDoubleClick: onRowDoubleClick ? (event) => {
+                                    const target = event.target;
+                                    if (target.closest(ROW_INTERACTIVE_SELECTOR)) return;
+                                    onRowDoubleClick(row);
+                                  } : void 0,
                                   onMouseDown: dragSelectOn ? (event) => startDragSelect(rowIndex, event) : void 0,
                                   onMouseEnter: dragSelectOn ? () => extendDragSelect(rowIndex) : void 0,
                                   onContextMenu: contextMenuOn ? (event) => openContextMenu(row, event) : void 0,
                                   className: cn(
                                     "group/table-row",
                                     rowHover && "hover:bg-[var(--color-grey-05)]",
-                                    onRowClick && "cursor-pointer",
+                                    (onRowClick || onRowDoubleClick) && "cursor-pointer",
                                     dragSelectOn && "select-none"
                                   ),
                                   style: { height: virtualScroll ? effectiveRowHeight : rowH },
@@ -17443,6 +17473,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
                                           background: rowLocked ? LOCKED_BG : void 0
                                         },
                                         onClick: (e) => e.stopPropagation(),
+                                        onDoubleClick: (e) => e.stopPropagation(),
                                         onClickCapture: (e) => {
                                           shiftPressedRef.current = e.shiftKey;
                                           if (e.shiftKey) window.getSelection()?.removeAllRanges();
@@ -17631,6 +17662,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
     }
   );
 });
+var STable2 = STableImpl;
 var COUNT_NULL = "var(--cmp-table-bar-count-null)";
 var totalColor = (n) => n > 0 ? "var(--cmp-table-bar-count-total)" : COUNT_NULL;
 var selectedColor = (n) => n > 0 ? "var(--color-brilliantblue-75)" : COUNT_NULL;
@@ -18437,11 +18469,13 @@ function SCalendar({
   const base = value || today;
   const [y, setY] = useState(() => Number(base.split("-")[0]));
   const [m, setM] = useState(() => Number(base.split("-")[1]));
-  useEffect(() => {
+  const [syncedValue, setSyncedValue] = useState(value);
+  if (syncedValue !== value) {
+    setSyncedValue(value);
     const b = value || today;
     setY(Number(b.split("-")[0]));
     setM(Number(b.split("-")[1]));
-  }, [value]);
+  }
   const cells = useMemo(() => monthCells(y, m), [y, m]);
   const eventMap = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -19764,6 +19798,7 @@ var SChipImpl = /* @__PURE__ */ forwardRef(function SChip({
           {
             ref: inputRef,
             role: "textbox",
+            tabIndex: 0,
             contentEditable: !disabled,
             suppressContentEditableWarning: true,
             spellCheck: false,
@@ -22188,6 +22223,7 @@ var SToastContainer = /* @__PURE__ */ forwardRef(
     const [mounted2, setMounted] = useState(false);
     const timers = useRef(/* @__PURE__ */ new Map());
     const elRefs = useRef(/* @__PURE__ */ new Map());
+    const resizeObserverRef = useRef(null);
     const [heights, setHeights] = useState(/* @__PURE__ */ new Map());
     const onShowRef = useRef(onShow);
     const onDismissRef = useRef(onDismiss);
@@ -22201,6 +22237,8 @@ var SToastContainer = /* @__PURE__ */ forwardRef(
       if (!liveIds.current.has(id)) return;
       liveIds.current.delete(id);
       setToasts((prev) => prev.filter((t) => t.id !== id));
+      const el = elRefs.current.get(id);
+      if (el) resizeObserverRef.current?.unobserve(el);
       elRefs.current.delete(id);
       setHeights((prev) => {
         if (!prev.has(id)) return prev;
@@ -22234,21 +22272,31 @@ var SToastContainer = /* @__PURE__ */ forwardRef(
       });
       return () => cancelAnimationFrame(raf);
     }, [toasts]);
-    useLayoutEffect(() => {
-      let changed = false;
-      const next = new Map(heights);
-      toasts.forEach((t) => {
-        const el = elRefs.current.get(t.id);
-        if (el) {
+    useEffect(() => {
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver((entries4) => {
+        const measured = [];
+        for (const entry of entries4) {
+          const el = entry.target;
+          const id = el.dataset.toastId;
           const h = el.offsetHeight;
-          if (h > 0 && next.get(t.id) !== h) {
-            next.set(t.id, h);
-            changed = true;
-          }
+          if (id != null && h > 0 && liveIds.current.has(id)) measured.push([id, h]);
         }
+        if (measured.length === 0) return;
+        setHeights((prev) => {
+          if (measured.every(([id, h]) => prev.get(id) === h)) return prev;
+          const next = new Map(prev);
+          for (const [id, h] of measured) next.set(id, h);
+          return next;
+        });
       });
-      if (changed) setHeights(next);
-    });
+      resizeObserverRef.current = observer;
+      elRefs.current.forEach((el) => observer.observe(el));
+      return () => {
+        observer.disconnect();
+        resizeObserverRef.current = null;
+      };
+    }, []);
     const scheduleAutoClose = useCallback(
       (id, duration) => {
         if (duration > 0)
@@ -22387,8 +22435,11 @@ var SToastContainer = /* @__PURE__ */ forwardRef(
           children: toasts.map((entry) => /* @__PURE__ */ jsx(
             "div",
             {
+              "data-toast-id": entry.id,
               ref: (el) => {
-                if (el) elRefs.current.set(entry.id, el);
+                if (el == null || elRefs.current.get(entry.id) === el) return;
+                elRefs.current.set(entry.id, el);
+                resizeObserverRef.current?.observe(el);
               },
               style: itemStyle(entry),
               children: /* @__PURE__ */ jsx(SToast, { ...entry.options, onClose: () => startDismiss(entry.id) })
@@ -26709,7 +26760,16 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
   const loading2 = effectiveAutocomplete ? loadingSuggestions && suggestions.length === 0 : loadingRecommendedItems && recommendedItems.length === 0;
   const isFieldEmpty = inputValue === "" && values.length > 0 && !focused;
   const isFieldFilled = inputValue !== "";
+  const reopenDropdown = () => {
+    setSuppressSuggestions(false);
+    setSuppressRecommendations(false);
+  };
   const onKeyDown = (e) => {
+    if (e.key === "ArrowDown" && !showDropdown && (inputValue === "" ? suppressRecommendations : suppressSuggestions)) {
+      e.preventDefault();
+      reopenDropdown();
+      return;
+    }
     if (showDropdown && items.length > 0) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
@@ -26787,10 +26847,10 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
             "relative box-border flex w-full flex-wrap content-center items-center gap-(--cmp-chipInput-chip-gap)",
             size === "md" ? "min-h-(--cmp-chipInput-md-minHeight) px-(--cmp-chipInput-md-paddingX) py-(--cmp-chipInput-md-paddingY)" : "min-h-(--cmp-chipInput-sm-minHeight) px-(--cmp-chipInput-sm-paddingX) py-(--cmp-chipInput-sm-paddingY)"
           ),
+          role: "presentation",
           onClick: () => {
             if (!disabled) {
-              setSuppressSuggestions(false);
-              setSuppressRecommendations(false);
+              reopenDropdown();
               inputRef.current?.focus();
             }
           },
@@ -26921,6 +26981,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                   metaPlacement === "end" && "ml-auto"
                 ),
                 "data-placement": metaPlacement,
+                role: "presentation",
                 onMouseDown: (e) => e.preventDefault(),
                 children: [
                   /* @__PURE__ */ jsx(
@@ -26977,6 +27038,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                   {
                     id: listboxId,
                     role: "listbox",
+                    tabIndex: -1,
                     className: "s-chip-input__suggestions flex w-full flex-col outline-none",
                     onMouseDown: (e) => e.preventDefault(),
                     children: [
@@ -26990,6 +27052,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                             id: active ? activeOptionId : void 0,
                             role: "option",
                             "aria-selected": selected || active,
+                            tabIndex: -1,
                             className: "rounded-full",
                             style: active ? { outline: "2px solid var(--color-border-accent)", outlineOffset: 1 } : void 0,
                             onMouseDown: (e) => {
@@ -27009,6 +27072,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                             id: active ? activeOptionId : void 0,
                             role: "option",
                             "aria-selected": selected || active,
+                            tabIndex: -1,
                             className: cn(
                               "s-chip-input__suggestion-item flex shrink-0 cursor-pointer items-center gap-sd-8 overflow-hidden text-ellipsis whitespace-nowrap px-sd-12 py-sd-4 text-12 leading-sd-20",
                               selected ? "cursor-default overflow-visible font-bold text-(--cmp-listBoxItem-content-selected)" : active ? "bg-(--cmp-listBoxItem-bg-hover) font-medium text-(--cmp-listBoxItem-content-hover)" : "text-(--cmp-listBoxItem-content-default)"
@@ -28124,6 +28188,6 @@ function STimeRangePicker({
   );
 }
 
-export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_CONSOLE_HEIGHT, LAUNCHER_LIST_BOX_CONSOLE_ICON, LAUNCHER_LIST_BOX_CONSOLE_LABEL, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_DIRECTIONS, LOGO_MODES, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SContextAlert, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
+export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_CONSOLE_HEIGHT, LAUNCHER_LIST_BOX_CONSOLE_ICON, LAUNCHER_LIST_BOX_CONSOLE_LABEL, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_DIRECTIONS, LOGO_MODES, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SContextAlert, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable2 as STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map