sellmate-design-system-react 9.0.0-beta.55 → 9.0.0-beta.56

package/dist/index.cjs

@@ -371,6 +371,43 @@ var Icon_alert = (p) => {
     }
   );
 };
+var Icon_alignCenter = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M20 16.25C20.4142 16.25 20.75 16.5858 20.75 17C20.75 17.4142 20.4142 17.75 20 17.75H4C3.58579 17.75 3.25 17.4142 3.25 17C3.25 16.5858 3.58579 16.25 4 16.25H20Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M16 11.25C16.4142 11.25 16.75 11.5858 16.75 12C16.75 12.4142 16.4142 12.75 16 12.75H7C6.58579 12.75 6.25 12.4142 6.25 12C6.25 11.5858 6.58579 11.25 7 11.25H16Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21.4004 6.25C21.8144 6.25021 22.1504 6.58592 22.1504 7C22.1504 7.41408 21.8144 7.74979 21.4004 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H21.4004Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_alignKorean = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -410,6 +447,147 @@ var Icon_alignKorean = (p) => {
     }
   );
 };
+var Icon_alignLeft = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M19 16.25C19.4142 16.25 19.75 16.5858 19.75 17C19.75 17.4142 19.4142 17.75 19 17.75H3C2.58579 17.75 2.25 17.4142 2.25 17C2.25 16.5858 2.58579 16.25 3 16.25H19Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M12 11.25C12.4142 11.25 12.75 11.5858 12.75 12C12.75 12.4142 12.4142 12.75 12 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H12Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21.4004 6.25C21.8144 6.25021 22.1504 6.58592 22.1504 7C22.1504 7.41408 21.8144 7.74979 21.4004 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H21.4004Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
+var Icon_alignMiddle = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M11.4844 13.9551C11.7735 13.6819 12.2265 13.6819 12.5156 13.9551L15.5156 16.79C15.8165 17.0746 15.8294 17.5496 15.5449 17.8506C15.2604 18.1515 14.7854 18.1653 14.4844 17.8809L12.75 16.2422V20.5C12.75 20.9142 12.4142 21.25 12 21.25C11.5858 21.25 11.25 20.9142 11.25 20.5V16.2422L9.51562 17.8809C9.21463 18.1653 8.73961 18.1515 8.45508 17.8506C8.17061 17.5496 8.18347 17.0746 8.48438 16.79L11.4844 13.9551Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21.2002 11.25C21.6142 11.2502 21.9502 11.5859 21.9502 12C21.9502 12.4141 21.6142 12.7498 21.2002 12.75H2.7998C2.38568 12.7499 2.0498 12.4142 2.0498 12C2.0498 11.5858 2.38568 11.2501 2.7998 11.25H21.2002Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M12 2.75C12.4142 2.75 12.75 3.08579 12.75 3.5V7.75781L14.4844 6.11914C14.7854 5.83467 15.2604 5.8485 15.5449 6.14941C15.8294 6.45041 15.8165 6.92543 15.5156 7.20996L12.5156 10.0449C12.2265 10.3182 11.7735 10.3182 11.4844 10.0449L8.48438 7.20996C8.18347 6.92543 8.17061 6.45041 8.45508 6.14941C8.73961 5.8485 9.21463 5.83467 9.51562 6.11914L11.25 7.75781V3.5C11.25 3.08579 11.5858 2.75 12 2.75Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
+var Icon_alignRight = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21 16.25C21.4142 16.25 21.75 16.5858 21.75 17C21.75 17.4142 21.4142 17.75 21 17.75H5C4.58579 17.75 4.25 17.4142 4.25 17C4.25 16.5858 4.58579 16.25 5 16.25H21Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21 11.25C21.4142 11.25 21.75 11.5858 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75H12C11.5858 12.75 11.25 12.4142 11.25 12C11.25 11.5858 11.5858 11.25 12 11.25H21Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21.4004 6.25C21.8144 6.25021 22.1504 6.58592 22.1504 7C22.1504 7.41408 21.8144 7.74979 21.4004 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H21.4004Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
+var Icon_alignTop = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M12 6.1499C12.2017 6.1499 12.3951 6.23132 12.5361 6.37549L18.5361 12.519C18.8254 12.8153 18.8204 13.2901 18.5244 13.5796C18.2281 13.869 17.7533 13.8631 17.4639 13.5669L12.75 8.7417V19.8999C12.75 20.3141 12.4142 20.6499 12 20.6499C11.5858 20.6499 11.25 20.3141 11.25 19.8999V8.7417L6.53613 13.5669C6.24671 13.8631 5.77189 13.869 5.47559 13.5796C5.1796 13.2901 5.17456 12.8153 5.46387 12.519L11.4639 6.37549C11.6049 6.23132 11.7983 6.1499 12 6.1499Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21.2002 3.24951C21.6142 3.24972 21.9502 3.58641 21.9502 4.00049C21.9499 4.41435 21.6141 4.75028 21.2002 4.75049H2.7998C2.38584 4.75039 2.05007 4.41442 2.0498 4.00049C2.0498 3.58634 2.38568 3.24961 2.7998 3.24951H21.2002Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_archive = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3428,7 +3606,12 @@ var ICONS = {
   account: Icon_account,
   add: Icon_add,
   alert: Icon_alert,
+  alignCenter: Icon_alignCenter,
   alignKorean: Icon_alignKorean,
+  alignLeft: Icon_alignLeft,
+  alignMiddle: Icon_alignMiddle,
+  alignRight: Icon_alignRight,
+  alignTop: Icon_alignTop,
   archive: Icon_archive,
   arrowDown: Icon_arrowDown,
   arrowLeft: Icon_arrowLeft,
@@ -6193,6 +6376,13 @@ function SDraggableListInner({
   );
 }
 var SDraggableList = /* @__PURE__ */ react.forwardRef(SDraggableListInner);
+function useInertRef(inert) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    ref.current?.toggleAttribute("inert", inert);
+  }, [inert]);
+  return ref;
+}
 var SExpansionItemDescendantContext = /* @__PURE__ */ react.createContext(
   null
 );
@@ -6224,6 +6414,7 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
     const [hovered, setHovered] = react.useState(false);
     const parentDescendantContext = react.useContext(SExpansionItemDescendantContext);
     const isExpanded = expanded ?? internalExpanded;
+    const bodyRef = useInertRef(!isExpanded);
     const isSelected = isExpanded && (selected || expandedDescendantCount === 0);
     const hasChevronInteraction = interaction === "chevron";
     const showInteractionChevron = hasChevronInteraction && !disabled && (isSelected || hovered);
@@ -6347,6 +6538,7 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
             "div",
             {
               id,
+              ref: bodyRef,
               "aria-hidden": !isExpanded,
               className: cn(
                 "grid overflow-hidden bg-(--cmp-listExpansionItem-body-bg) transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
@@ -6792,11 +6984,29 @@ function TreeConnector({
     ] })
   ] });
 }
+function TreeBranch({ expanded, children }) {
+  const branchRef = useInertRef(!expanded);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: branchRef,
+      "aria-hidden": !expanded,
+      className: cn(
+        "grid w-full overflow-hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+        expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 overflow-hidden", children })
+    }
+  );
+}
 function STreeAllItem({
   selected,
   indeterminate,
   border,
   size,
+  rowId,
+  tabIndex,
+  onKeyDown,
   onSelect
 }) {
   const checkboxValue = indeterminate ? null : selected;
@@ -6808,6 +7018,9 @@ function STreeAllItem({
       role: "treeitem",
       "aria-level": 1,
       "aria-selected": selected,
+      "data-tree-row": rowId,
+      tabIndex,
+      onKeyDown,
       onClick: onSelect,
       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)",
@@ -6993,6 +7206,34 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   const someSelected = selectableIds.some((id) => selectedSet.has(id));
   const allIndeterminate = someSelected && !allSelected;
   const showAllItem = selectable && showSelectAll;
+  const visibleRows = react.useMemo(() => {
+    const rows = [];
+    if (showAllItem) {
+      rows.push({ id: TREE_ALL_NODE.id, node: TREE_ALL_NODE, parentId: null, expanded: false });
+    }
+    const walk = (nodes, parentId) => {
+      nodes.forEach((node) => {
+        const expanded = !!node.children?.length && expandedSet.has(node.id);
+        rows.push({ id: node.id, node, parentId, expanded });
+        if (expanded) walk(node.children, node.id);
+      });
+    };
+    walk(items, null);
+    return rows;
+  }, [items, expandedSet, showAllItem]);
+  const [focusedId, setFocusedId] = react.useState(null);
+  const activeRowId = focusedId != null && visibleRows.some((row) => row.id === focusedId) ? focusedId : visibleRows[0]?.id ?? null;
+  const treeRef = react.useRef(null);
+  const focusRow = (id) => {
+    setFocusedId(id);
+    const rows = treeRef.current?.querySelectorAll("[data-tree-row]") ?? [];
+    for (const row of rows) {
+      if (row.dataset.treeRow === id) {
+        row.focus();
+        return;
+      }
+    }
+  };
   const updateExpanded = (node) => {
     const next = new Set(currentExpandedIds);
     if (next.has(node.id)) next.delete(node.id);
@@ -7026,6 +7267,59 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
     if (value === void 0) setInternalValue(orderedIds);
     onValueChange?.(orderedIds, TREE_ALL_NODE);
   };
+  const handleTreeKeyDown = (event) => {
+    const target = event.target;
+    const rowId = target.dataset?.treeRow;
+    if (rowId == null) return;
+    const index = visibleRows.findIndex((row2) => row2.id === rowId);
+    if (index < 0) return;
+    const row = visibleRows[index];
+    const hasChildren = !!row.node.children?.length;
+    switch (event.key) {
+      case "ArrowDown": {
+        const next = visibleRows[index + 1];
+        if (next) focusRow(next.id);
+        break;
+      }
+      case "ArrowUp": {
+        const prev = visibleRows[index - 1];
+        if (prev) focusRow(prev.id);
+        break;
+      }
+      case "ArrowRight": {
+        if (!hasChildren || row.node.disabled) return;
+        if (!row.expanded) updateExpanded(row.node);
+        else if (visibleRows[index + 1]) focusRow(visibleRows[index + 1].id);
+        break;
+      }
+      case "ArrowLeft": {
+        if (hasChildren && row.expanded && !row.node.disabled) updateExpanded(row.node);
+        else if (row.parentId != null) focusRow(row.parentId);
+        else return;
+        break;
+      }
+      case "Home": {
+        if (visibleRows[0]) focusRow(visibleRows[0].id);
+        break;
+      }
+      case "End": {
+        const last = visibleRows[visibleRows.length - 1];
+        if (last) focusRow(last.id);
+        break;
+      }
+      case "Enter":
+      case " ": {
+        if (row.id === TREE_ALL_NODE.id) updateAllSelected();
+        else if (selectable) updateSelected(row.node);
+        else if (hasChildren && !row.node.disabled) updateExpanded(row.node);
+        else return;
+        break;
+      }
+      default:
+        return;
+    }
+    event.preventDefault();
+  };
   const renderNodes = (nodes, depth = 1, ancestorLast = []) => nodes.map((node, index) => {
     const isLast = index === nodes.length - 1;
     const isExpanded = expandedSet.has(node.id);
@@ -7034,6 +7328,9 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
       /* @__PURE__ */ jsxRuntime.jsx(
         STreeItem2,
         {
+          "data-tree-row": node.id,
+          tabIndex: activeRowId === node.id ? 0 : -1,
+          onKeyDown: handleTreeKeyDown,
           node,
           depth,
           last: isLast,
@@ -7051,30 +7348,31 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
           onTreeSelect: updateSelected
         }
       ),
-      node.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          "aria-hidden": !isExpanded,
-          className: cn(
-            "grid w-full overflow-hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
-            isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 overflow-hidden", children: renderNodes(node.children, depth + 1, [...ancestorLast, isLast]) })
-        }
-      ) : null
+      node.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(TreeBranch, { expanded: isExpanded, children: renderNodes(node.children, depth + 1, [...ancestorLast, isLast]) }) : null
     ] }, node.id);
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref,
+      ref: (node) => {
+        treeRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
       role: "tree",
       className: cn("flex w-full flex-col items-start bg-(--cmp-tree-item-bg-default)", className),
+      onFocus: (event) => {
+        const rowId = event.target.closest?.("[data-tree-row]")?.getAttribute("data-tree-row");
+        if (rowId != null) setFocusedId(rowId);
+      },
       ...rest,
       children: [
         showAllItem && /* @__PURE__ */ jsxRuntime.jsx(
           STreeAllItem,
           {
+            rowId: TREE_ALL_NODE.id,
+            tabIndex: activeRowId === TREE_ALL_NODE.id ? 0 : -1,
+            onKeyDown: handleTreeKeyDown,
             selected: allSelected,
             indeterminate: allIndeterminate,
             border,
@@ -7844,10 +8142,11 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
 // src/lib/global-overlay.ts
 var GLOBAL_OVERLAY_ATTR = "data-s-global-overlay";
 var globalOverlayProps = { [GLOBAL_OVERLAY_ATTR]: "" };
+var ELEMENT_NODE = 1;
 function isFromGlobalOverlay(event) {
   const detail = event.detail;
   const target = detail?.originalEvent?.target ?? event.target;
-  const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+  const element = target == null ? null : target.nodeType === ELEMENT_NODE ? target : target.parentElement ?? null;
   return !!element?.closest(`[${GLOBAL_OVERLAY_ATTR}]`);
 }
 var SLoadingContainer = /* @__PURE__ */ react.forwardRef(
@@ -14274,6 +14573,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const [open, setOpen] = react.useState(false);
   const [pendingOpen, setPendingOpen] = react.useState(false);
   const [focusedIndex, setFocusedIndex] = react.useState(-1);
+  const baseId = react.useId();
+  const listboxId = `${baseId}-listbox`;
+  const activeOptionId = `${baseId}-active-option`;
   const [win, setWin] = react.useState({ start: 0, end: 0, top: 0, bottom: 0 });
   const winRef = react.useRef(win);
   winRef.current = win;
@@ -14359,13 +14661,15 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     setPendingOpen(false);
     commitOpen(true);
   }, [insideModal, pendingOpen, portalContainer]);
+  const requestOpenRef = react.useRef(requestOpen);
+  requestOpenRef.current = requestOpen;
   react.useImperativeHandle(
     ref,
     () => ({
       focus: () => triggerRef.current?.focus(),
-      open: () => requestOpen(true)
+      open: () => requestOpenRef.current(true)
     }),
-    [insideModal, portalContainer]
+    []
   );
   useFormField({
     name,
@@ -14703,6 +15007,8 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
             disabled: effectiveDisabled,
             "aria-haspopup": "listbox",
             "aria-expanded": open,
+            "aria-controls": open ? listboxId : void 0,
+            "aria-activedescendant": open && focusedIndex >= 0 ? activeOptionId : 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",
@@ -14829,7 +15135,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                           onValueChange: setSearch,
                           onKeyDown: handleKeyDown,
                           placeholder: "\uAC80\uC0C9",
-                          clearable: true
+                          clearable: true,
+                          "aria-controls": listboxId,
+                          "aria-activedescendant": focusedIndex >= 0 ? activeOptionId : void 0
                         }
                       )
                     }
@@ -14837,6 +15145,8 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                   hasItems ? /* @__PURE__ */ jsxRuntime.jsx(
                     ItemList,
                     {
+                      listboxId,
+                      activeOptionId,
                       items: visibleItems,
                       indexOffset: windowStart,
                       topSpacer: win.top,
@@ -14885,6 +15195,8 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
 });
 var SSelect2 = /* @__PURE__ */ withDisplayName(SSelectImpl, "SSelect");
 function ItemList({
+  listboxId,
+  activeOptionId,
   items,
   indexOffset,
   topSpacer,
@@ -14910,12 +15222,13 @@ function ItemList({
     "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listBoxItem-content-disabled)]"
   );
   const activeClass = "hover:bg-[var(--cmp-listBoxItem-bg-hover)] hover:text-[color:var(--cmp-listBoxItem-content-hover)] focus-visible:bg-[var(--cmp-listBoxItem-bg-hover)] focus-visible:text-[color:var(--cmp-listBoxItem-content-hover)]";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "listbox", "aria-multiselectable": multi || void 0, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: listboxId, role: "listbox", "aria-multiselectable": multi || void 0, children: [
     showSelectAll && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
         "data-select-all-row": true,
+        id: focusedValue === "__select_all__" ? activeOptionId : void 0,
         "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
         "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
         className: cn(
@@ -14957,6 +15270,7 @@ function ItemList({
               type: "button",
               "data-select-row": true,
               "data-index": idx,
+              id: groupFocused ? activeOptionId : void 0,
               role: "option",
               "aria-selected": groupState === true,
               disabled: groupDisabled,
@@ -15030,6 +15344,7 @@ function ItemList({
           type: "button",
           "data-select-row": true,
           "data-index": idx,
+          id: focusedValue === o.value ? activeOptionId : void 0,
           disabled: o.disabled,
           role: "option",
           "aria-selected": isSelected,
@@ -24055,6 +24370,8 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
 }, ref) {
   const autoId = react.useId();
   const resolvedName = name ?? autoId;
+  const listboxId = `${autoId}-listbox`;
+  const activeOptionId = `${autoId}-active-option`;
   const [inputValue, setInputValue] = react.useState("");
   const [focused, setFocused] = react.useState(false);
   const [hovered, setHovered] = react.useState(false);
@@ -24277,6 +24594,11 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                       ref: inputRef,
                       name: resolvedName,
                       size: 1,
+                      role: "combobox",
+                      "aria-expanded": showDropdown,
+                      "aria-controls": showDropdown ? listboxId : void 0,
+                      "aria-activedescendant": showDropdown && activeIndex >= 0 ? activeOptionId : void 0,
+                      "aria-autocomplete": "list",
                       className: cn(
                         "s-chip-input__input col-start-1 row-start-1 w-full border-0 bg-transparent p-0 font-normal text-(--cmp-chip-content-focus) outline-none placeholder:text-(--cmp-chipInput-text-placeholder) disabled:cursor-not-allowed",
                         AUTOFILL_RESET_CLASS,
@@ -24390,6 +24712,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                 children: /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
+                    id: listboxId,
                     role: "listbox",
                     className: "s-chip-input__suggestions flex w-full flex-col outline-none",
                     onMouseDown: (e) => e.preventDefault(),
@@ -24401,6 +24724,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                         return /* @__PURE__ */ jsxRuntime.jsx(
                           "div",
                           {
+                            id: active ? activeOptionId : void 0,
                             role: "option",
                             "aria-selected": selected || active,
                             className: "rounded-full",
@@ -24419,6 +24743,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                         return /* @__PURE__ */ jsxRuntime.jsxs(
                           "div",
                           {
+                            id: active ? activeOptionId : void 0,
                             role: "option",
                             "aria-selected": selected || active,
                             className: cn(