@sellmate/design-system 1.21.0 → 1.22.0

package/dist/cjs/sd-pagination_4.cjs.entry.js

@@ -234,7 +234,7 @@ const SdTbody = class {
 };
 SdTbody.style = sdTbodyCss();
 
-const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__bar{position:absolute;top:50%;right:0;transform:translateY(-50%);width:var(--table-border-width, 1px);height:var(--table-header-resizer-height, 16px);z-index:3;background-color:var(--table-header-resizer-color, #CCCCCC)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
+const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__bar{position:absolute;top:50%;right:0;transform:translateY(-50%);width:var(--table-border-width, 1px);height:var(--table-header-resizer-height, 16px);z-index:3;background-color:var(--table-header-resizer-color, #CCCCCC)}.th__dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:2px}.th__dropdown-trigger sd-icon{transition:transform 0.15s ease}.th__dropdown-trigger--open sd-icon{transform:rotate(180deg)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
 
 const SdThead = class {
     constructor(hostRef) {
@@ -270,14 +270,29 @@ const SdThead = class {
     _stickyHeader = false;
     _scrolledLeft = false;
     _scrolledRight = false;
+    dropdownOpenMap = {};
     tableEl = null;
+    dropdownRefs = {};
+    dropdownThRefs = {};
+    dropdownPortals = {};
     handleColumnsChange(newCols) {
         if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
             this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
         }
     }
+    disconnectedCallback() {
+        const portals = this.dropdownPortals ?? {};
+        Object.values(portals).forEach(portal => {
+            if (portal?.parentNode != null)
+                portal.parentNode.removeChild(portal);
+        });
+    }
     componentWillLoad() {
         this.syncTableContext();
+        this.dropdownOpenMap = this.dropdownOpenMap ?? {};
+        this.dropdownRefs = this.dropdownRefs ?? {};
+        this.dropdownThRefs = this.dropdownThRefs ?? {};
+        this.dropdownPortals = this.dropdownPortals ?? {};
         this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
         this.resolveConfig();
         if ((this.columnWidths ?? []).length === 0) {
@@ -287,6 +302,36 @@ const SdThead = class {
     componentDidLoad() {
         this.syncTableContext();
         this.resolveConfig();
+        this.initDropdownPortals();
+    }
+    // sd-portal을 body에 붙여 CSS transform 영향 없이 정확한 위치에 패널을 표시한다.
+    // <slot>을 render에 두지 않고 직접 DOM 이동(slot 속성 제거)으로 Stencil 슬롯 에뮬레이션 충돌을 피한다.
+    initDropdownPortals() {
+        const cols = this._columns ?? [];
+        const hasDropdownCols = cols.filter(c => c.hasDropdown === true);
+        if (hasDropdownCols.length === 0)
+            return;
+        for (const col of hasDropdownCols) {
+            const colName = col.name;
+            // 이미 포탈이 생성된 컬럼은 건너뜀 (refreshConfig 재호출 대비)
+            if ((this.dropdownPortals ?? {})[colName] != null)
+                continue;
+            const slotContent = this.el.querySelector(`[slot="dropdown-${colName}"]`);
+            if (slotContent == null)
+                continue;
+            // slot 속성 제거: Stencil 슬롯 에뮬레이션이 재배포하지 못하게 한다
+            slotContent.removeAttribute('slot');
+            const portal = document.createElement('sd-portal');
+            portal.parentRef = this.dropdownThRefs[colName] ?? null;
+            portal.open = false;
+            // 첫 open 전까지 포탈 호스트 자체를 숨긴다.
+            // moveSlotContent()가 open=true 시 children을 독립 wrapper div로 이동하므로 이후 동작에 영향 없음.
+            portal.style.display = 'none';
+            portal.addEventListener('sdClose', () => this.closeDropdown(colName));
+            portal.appendChild(slotContent);
+            document.body.appendChild(portal);
+            this.dropdownPortals[colName] = portal;
+        }
     }
     syncTableContext() {
         // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
@@ -329,6 +374,7 @@ const SdThead = class {
     /** 테이블 설정을 다시 불러옵니다. */
     async refreshConfig() {
         this.resolveConfig();
+        this.initDropdownPortals();
     }
     /** 컬럼 너비를 업데이트합니다. */
     async setColumnWidths(widths) {
@@ -373,6 +419,28 @@ const SdThead = class {
     handleColumnSort = (col) => {
         this.sdColumnSort.emit({ column: col });
     };
+    toggleDropdown(name) {
+        const isOpen = this.dropdownOpenMap[name] !== true;
+        const portals = this.dropdownPortals ?? {};
+        const newMap = { ...this.dropdownOpenMap };
+        // _columns 기준으로 순회: portals가 비어도 dropdownOpenMap은 항상 갱신됨
+        for (const col of (this._columns ?? []).filter(c => c.hasDropdown === true)) {
+            const shouldBeOpen = col.name === name ? isOpen : false;
+            newMap[col.name] = shouldBeOpen;
+            const portal = portals[col.name];
+            if (portal != null)
+                portal.open = shouldBeOpen;
+        }
+        this.dropdownOpenMap = newMap;
+    }
+    closeDropdown(name) {
+        if (this.dropdownOpenMap[name] !== true)
+            return;
+        this.dropdownOpenMap = { ...this.dropdownOpenMap, [name]: false };
+        const portal = (this.dropdownPortals ?? {})[name];
+        if (portal != null)
+            portal.open = false;
+    }
     handleSelectAll(checked) {
         const nextChecked = !!checked;
         const safeRows = Array.isArray(this.rows) ? this.rows : [];
@@ -389,6 +457,8 @@ const SdThead = class {
     }
     render() {
         const safeRows = Array.isArray(this.rows) ? this.rows : [];
+        const dropdownOpenMap = this.dropdownOpenMap ?? {};
+        const dropdownRefs = this.dropdownRefs ?? {};
         const stickyLeftCount = this._stickyColumn.left || 0;
         const stickyRightCount = this._stickyColumn.right || 0;
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
@@ -410,22 +480,25 @@ const SdThead = class {
             '--table-border-color': sdTable_config.TABLE_BORDER.color,
             '--table-border-width': `${sdTable_config.TABLE_BORDER.width}px`,
         };
-        return (index.h(index.Host, { key: '26981191de95775401cad61e80fbf1e22cb0250b', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: 'a53d430f1b71a45b98de2912b563d3f17cd20b24', class: {
+        return (index.h(index.Host, { key: '947f5e5b0e59e7e6f8a73e4fd44dbfa646cb630a', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: '2e0ffbfe9d96528c6e0082d4883fa462a18831d6', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, index.h("tr", { key: '27ce13b70bfda4b210b36eb746fb60d369d9f5be', class: "tr" }, this._selectable && (index.h("th", { key: 'e353b00c7a02b82781e5107b1fd73dc556427edf', class: {
+            } }, index.h("tr", { key: '5843a18e1548bc6546e447d4c9213375116af0e9', class: "tr" }, this._selectable && (index.h("th", { key: '914024ca35874747e39f1819337cd4ad1cbe733d', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '18eeabbcc4fc10196d6448bd9d0493b55778f9f1', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), index.h("div", { key: '1a5a0561fc94be53a8244827ac9ae4f98fa766c2', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: 'e07232f1f5fa02589573ddaae53ebdadbdb97674', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), index.h("div", { key: '08b504cfd4f420e76e91d649eed28c7068517044', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
                 'sticky-left-edge': idx === stickyLeftCount - 1,
                 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && idx !== lastColIdx && (
+            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
+                'th__dropdown-trigger': true,
+                'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
+            }, ref: el => { dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
         // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
@@ -433,7 +506,10 @@ const SdThead = class {
             return (index.h("th", { key: col.name, class: {
                     th: true,
                     [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && actualColIdx !== lastColIdx && (
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
+                    'th__dropdown-trigger': true,
+                    'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
+                }, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
             // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
@@ -445,7 +521,10 @@ const SdThead = class {
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && (
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
+                    'th__dropdown-trigger': true,
+                    'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
+                }, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && (
             // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             index.h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));

package/dist/collection/components/assets/CaretDown.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const CaretDown = (props) => {
     const { size = 24, ...rest } = props;
-    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M11.8033 17.754L2.72757 6.40942C2.59557 6.24442 2.71304 6 2.92435 6H21.0757C21.287 6 21.4045 6.24442 21.2725 6.40942L12.1968 17.754C12.0959 17.8801 11.9041 17.8801 11.8033 17.754Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M19.2188 8.25C19.9555 8.25 20.2813 9.44246 19.7061 10.0342L12.4874 17.46C12.2028 17.7526 11.7974 17.7526 11.5127 17.46L4.294 10.0342C3.71879 9.44247 4.04461 8.25 4.7813 8.25H19.2188Z", fill: "currentColor" })));
 };

package/dist/collection/components/assets/CaretLeft.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const CaretLeft = (props) => {
     const { size = 24, ...rest } = props;
-    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M6.24594 12.1968L17.5905 21.2725C17.7555 21.4045 18 21.287 18 21.0757V2.92435C18 2.71304 17.7555 2.59557 17.5905 2.72757L6.24594 11.8033C6.11984 11.9041 6.11984 12.0959 6.24594 12.1968Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M14.1423 4.29416C14.7698 3.71888 16.0358 4.04475 16.0358 4.78146V19.219C16.0358 19.9557 14.7698 20.2815 14.1423 19.7063L6.26827 12.4865C5.95813 12.2019 5.95791 11.7975 6.26827 11.5129L14.1423 4.29416Z", fill: "currentColor" })));
 };

package/dist/collection/components/assets/CaretRight.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const CaretRight = (props) => {
     const { size = 24, ...rest } = props;
-    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M17.754 12.1968L6.40942 21.2725C6.24442 21.4045 6 21.287 6 21.0757L6 2.92435C6 2.71304 6.24442 2.59557 6.40942 2.72757L17.754 11.8033C17.8801 11.9041 17.8801 12.0959 17.754 12.1968Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M8.25 4.78127C8.25 4.04456 9.44248 3.71871 10.0342 4.29397L17.46 11.5127C17.7526 11.7973 17.7526 12.2027 17.46 12.4873L10.0342 19.7061C9.44249 20.2814 8.25 19.9555 8.25 19.2188V4.78127Z", fill: "currentColor" })));
 };

package/dist/collection/components/assets/CaretUp.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const CaretUp = (props) => {
     const { size = 24, ...rest } = props;
-    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M11.8033 6.24594L2.72757 17.5905C2.59557 17.7555 2.71304 18 2.92435 18H21.0757C21.287 18 21.4045 17.7555 21.2725 17.5905L12.1968 6.24594C12.0959 6.11984 11.9041 6.11984 11.8033 6.24594Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M11.6252 6.44362C11.8583 6.27919 12.1422 6.27906 12.3752 6.44362L12.4865 6.5403L19.7063 13.9651C20.2815 14.5568 19.9557 15.7503 19.219 15.7503H4.78146C4.04475 15.7503 3.71888 14.5568 4.29416 13.9651L11.5129 6.5403L11.6252 6.44362Z", fill: "currentColor" })));
 };

package/dist/collection/components/sd-chip-input/sd-chip-input.css

@@ -133,6 +133,11 @@ sd-chip-input .sd-chip-input__suggestion-item--active {
   color: var(--sd-chip-input-suggestion-color-hover);
   font-weight: var(--sd-chip-input-suggestion-font-weight-selected);
 }
+sd-chip-input .sd-chip-input__suggestion-item--selected {
+  cursor: default;
+  overflow: visible;
+  text-overflow: unset;
+}
 sd-chip-input .sd-chip-input__suggestions-empty {
   padding: 12px;
   text-align: center;

package/dist/collection/components/sd-chip-input/sd-chip-input.js

@@ -222,7 +222,9 @@ export class SdChipInput {
             }
             if (event.key === 'Enter' && this.activeSuggestionIndex >= 0) {
                 event.preventDefault();
-                this.addChip(activeItems[this.activeSuggestionIndex]);
+                const selectedItem = activeItems[this.activeSuggestionIndex];
+                if (!(this.internalValues ?? []).includes(selectedItem))
+                    this.addChip(selectedItem);
                 return;
             }
         }
@@ -282,6 +284,10 @@ export class SdChipInput {
     };
     handleContainerClick = () => {
         if (!this.disabled) {
+            // 이미 포커스된 상태에서 재클릭 시 handleFocus가 다시 실행되지 않으므로
+            // suppress 플래그를 여기서 직접 해제한다.
+            this.suppressRecommendations = false;
+            this.suppressSuggestions = false;
             this.inputEl?.focus();
         }
     };
@@ -426,7 +432,7 @@ export class SdChipInput {
             fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
             color: CHIP_INPUT_SUGGESTIONS.emptyColor,
         };
-        return (h("sd-field", { key: '7135f3f1fe7c76276bcd780ba2cfdf391925a57b', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '8566ae7bc3bedaf6be95f29267587c49c090e73f', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: '00d9946c93d2e961466fa8baf617fc4ddc12d701', class: {
+        return (h("sd-field", { key: 'b72e33b6f204ebdf6791cc2f20d01bbb74a4203a', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '499114d06f4d375fed5575edd394c501f4d72691', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: '5910a2d0e0e9cbc472baa1d9c9c3fa07e89fbdcb', class: {
                 'sd-chip-input__field': true,
                 'sd-chip-input__field--filled': this.inputValue !== '',
                 'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
@@ -434,20 +440,38 @@ export class SdChipInput {
                 ? this.inputValue
                 : this.internalValues.length === 0
                     ? this.placeholder
-                    : '' }, h("input", { key: '2845394a5eaec2d5f37876a0e8938fa9d3f38263', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (h("div", { key: '7cec3884a4cace3d688e80006d6240d321ac60f3', class: "sd-chip-input__reset" }, this.inputValue === '' && h("span", { key: '761539e242437841a2703d95903f9d6b5fe3d69f', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: '1b448973ba3573c94ae09b74cd24720c8ea011d3', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '90d7582f35b8e7a8ee3c1dba717fa87c13c1de19', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (h("sd-portal", { key: '9495c87a4916829fe955f054a8c97d2b3fa04914', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: 'ac4afd8511316f0b4b957c312a051b02fc72f20e', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: '3b6855a7ad2ef48415160544a19014d59ca38ec1', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (h("div", { key: item, class: {
-                'sd-chip-input__suggestion-item': true,
-                'sd-chip-input__suggestion-item--active': i === this.activeSuggestionIndex,
-            }, role: "option", tabIndex: -1, "aria-selected": i === this.activeSuggestionIndex, style: i === this.activeSuggestionIndex
-                ? {
-                    ...suggestionItemStyle,
-                    background: CHIP_INPUT_SUGGESTIONS.itemBgHover,
-                    color: CHIP_INPUT_SUGGESTIONS.itemColorHover,
-                    fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
-                }
-                : suggestionItemStyle, onMouseDown: e => {
-                e.preventDefault();
-                this.addChip(item);
-            } }, item)))))))));
+                    : '' }, h("input", { key: '3c1e75d691332b67a500a2d17030d5db191bdeb9', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        h("div", { key: '4aa212280a928b88b85dffa3d453ea8f563e1fe0', class: "sd-chip-input__reset",
+            // 리셋 버튼 클릭 시 input blur → portal unmount → refocus → 새 portal mount로
+            // 두 wrapper가 body에 잠깐 겹치는 타이밍 이슈를 방지한다.
+            onMouseDown: e => e.preventDefault() }, this.inputValue === '' && h("span", { key: 'f7faa45b57d8e38dda8cc98119357f92d914fee4', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: 'dfde4ea82558414614fb2d817f7bfa1fb5d4bf5f', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '9b43c82c1a5d425e5b187e92b4259e7d919491e3', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (h("sd-portal", { key: 'aa205aacbbafcd8c3d9855268637e6da956d4a74', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: '26814734f202da3a13e695ae1d0c913ea430b888', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: 'df80d11b79f67dc6cfe6503b258528efa3752265', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => {
+            const isSelected = (this.internalValues ?? []).includes(item);
+            const isActive = i === this.activeSuggestionIndex && !isSelected;
+            return (h("div", { key: item, class: {
+                    'sd-chip-input__suggestion-item': true,
+                    'sd-chip-input__suggestion-item--active': isActive,
+                    'sd-chip-input__suggestion-item--selected': isSelected,
+                }, role: "option", tabIndex: -1, "aria-selected": isSelected || isActive, "aria-disabled": isSelected ? 'true' : undefined, style: isSelected
+                    ? {
+                        ...suggestionItemStyle,
+                        color: '#0075FF',
+                        fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
+                        cursor: 'default',
+                    }
+                    : isActive
+                        ? {
+                            ...suggestionItemStyle,
+                            background: CHIP_INPUT_SUGGESTIONS.itemBgHover,
+                            color: CHIP_INPUT_SUGGESTIONS.itemColorHover,
+                            fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
+                        }
+                        : suggestionItemStyle, onMouseDown: e => {
+                    e.preventDefault();
+                    if (!isSelected)
+                        this.addChip(item);
+                } }, h("span", { style: { flex: '1' } }, item), isSelected && (h("sd-icon", { name: "check", size: "12", style: { color: '#0075FF', flexShrink: '0' } }))));
+        })))))));
     }
     static get is() { return "sd-chip-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-table.stories.helpers.js

@@ -143,3 +143,100 @@ StoryVirtualTable = __decorate([
     customElement('story-virtual-table')
 ], StoryVirtualTable);
 export { StoryVirtualTable };
+const DROPDOWN_STATUS_META = {
+    active: { bg: '#DCFCE7', color: '#166534', label: 'Active' },
+    reviewing: { bg: '#FEF3C7', color: '#92400E', label: 'Reviewing' },
+    archived: { bg: '#E2E8F0', color: '#475569', label: 'Archived' },
+};
+const DROPDOWN_SEED = [
+    { id: 1, name: 'Avery Kim', role: 'Owner', region: 'Seoul', status: 'active' },
+    { id: 2, name: 'Mina Park', role: 'Manager', region: 'Busan', status: 'reviewing' },
+    { id: 3, name: 'Ethan Lee', role: 'Analyst', region: 'Incheon', status: 'archived' },
+    { id: 4, name: 'Sora Choi', role: 'Owner', region: 'Daegu', status: 'active' },
+    { id: 5, name: 'Jisoo Han', role: 'Manager', region: 'Daejeon', status: 'reviewing' },
+    { id: 6, name: 'Noah Yoon', role: 'Analyst', region: 'Gwangju', status: 'active' },
+    { id: 7, name: 'Iris Jung', role: 'Manager', region: 'Suwon', status: 'active' },
+    { id: 8, name: 'Liam Seo', role: 'Owner', region: 'Ulsan', status: 'reviewing' },
+];
+const DROPDOWN_COLUMNS = [
+    { name: 'name', label: 'Customer', field: 'name', autoWidth: true },
+    { name: 'role', label: 'Role', field: 'role', align: 'center', width: '100px', hasDropdown: true },
+    { name: 'region', label: 'Region', field: 'region', width: '100px' },
+    { name: 'status', label: 'Status', field: 'status', align: 'center', width: '110px', hasDropdown: true },
+];
+const LISTBOX_STYLE = 'margin:0;padding:4px;list-style:none;min-width:140px;background:white;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.10);';
+const ITEM_BASE_STYLE = 'padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px;';
+let StoryDropdownTable = class StoryDropdownTable extends LitElement {
+    // Disable shadow DOM so Stencil's slot emulation can see and move
+    // the slotted <ul> nodes without Lit's ChildPart losing track of them.
+    createRenderRoot() { return this; }
+    constructor() {
+        super();
+        this.roleFilter = 'All';
+        this.statusFilter = 'All';
+    }
+    get displayRows() {
+        return DROPDOWN_SEED.filter(row => (this.roleFilter === 'All' || row.role === this.roleFilter) &&
+            (this.statusFilter === 'All' || row.status === this.statusFilter));
+    }
+    itemStyle(active) {
+        return `${ITEM_BASE_STYLE}background:${active ? '#f0f9ff' : 'transparent'};color:${active ? '#0369a1' : '#374151'};font-weight:${active ? '600' : '400'};`;
+    }
+    render() {
+        const rows = this.displayRows;
+        const roleOptions = ['All', 'Owner', 'Manager', 'Analyst'];
+        const statusOptions = ['All', 'active', 'reviewing', 'archived'];
+        return html `
+      <div style="display:flex;flex-direction:column;gap:12px;">
+        <div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;">
+          <span style="color:#64748b;">Active filters:</span>
+          ${this.roleFilter !== 'All' ? html `<span style="border-radius:9999px;background:#ecfeff;padding:2px 12px;font-size:12px;font-weight:500;color:#0e7490;">Role: ${this.roleFilter}</span>` : nothing}
+          ${this.statusFilter !== 'All' ? html `<span style="border-radius:9999px;background:#ecfeff;padding:2px 12px;font-size:12px;font-weight:500;color:#0e7490;">Status: ${DROPDOWN_STATUS_META[this.statusFilter]?.label}</span>` : nothing}
+          ${this.roleFilter === 'All' && this.statusFilter === 'All' ? html `<span style="color:#94a3b8;">없음</span>` : nothing}
+          ${this.roleFilter !== 'All' || this.statusFilter !== 'All' ? html `<button style="font-size:12px;color:#64748b;text-decoration:underline;background:none;border:none;cursor:pointer;" @click=${() => { this.roleFilter = 'All'; this.statusFilter = 'All'; }}>초기화</button>` : nothing}
+        </div>
+
+        <sd-table .columns=${DROPDOWN_COLUMNS} .rows=${rows} row-key="id" width="100%">
+          <sd-thead>
+            <ul slot="dropdown-role" style=${LISTBOX_STYLE}>
+              ${roleOptions.map(opt => html `
+                <li style=${this.itemStyle(this.roleFilter === opt)} @click=${() => { this.roleFilter = opt; }}>${opt}</li>
+              `)}
+            </ul>
+            <ul slot="dropdown-status" style=${LISTBOX_STYLE}>
+              ${statusOptions.map(opt => html `
+                <li style=${this.itemStyle(this.statusFilter === opt)} @click=${() => { this.statusFilter = opt; }}>
+                  ${opt === 'All' ? 'All' : DROPDOWN_STATUS_META[opt].label}
+                </li>
+              `)}
+            </ul>
+          </sd-thead>
+          <sd-tbody>
+            ${repeat(rows, row => row.id, row => {
+            const meta = DROPDOWN_STATUS_META[row.status];
+            return html `
+                  <sd-tr row-key=${String(row.id)} .row=${row}>
+                    <sd-td field="status" row-key=${String(row.id)}>
+                      <span style="display:inline-flex;min-width:88px;align-items:center;justify-content:center;border-radius:9999px;padding:4px 10px;font-size:12px;font-weight:600;background:${meta.bg};color:${meta.color};">
+                        ${meta.label}
+                      </span>
+                    </sd-td>
+                  </sd-tr>
+                `;
+        })}
+          </sd-tbody>
+        </sd-table>
+      </div>
+    `;
+    }
+};
+__decorate([
+    state()
+], StoryDropdownTable.prototype, "roleFilter", void 0);
+__decorate([
+    state()
+], StoryDropdownTable.prototype, "statusFilter", void 0);
+StoryDropdownTable = __decorate([
+    customElement('story-dropdown-table')
+], StoryDropdownTable);
+export { StoryDropdownTable };

package/dist/collection/components/sd-table/sd-thead/sd-thead.css

@@ -143,6 +143,27 @@ sd-thead * {
   background-color: var(--table-header-resizer-color, #CCCCCC);
 }
 
+.th__dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: inherit;
+  border-radius: 2px;
+}
+.th__dropdown-trigger sd-icon {
+  transition: transform 0.15s ease;
+}
+.th__dropdown-trigger--open sd-icon {
+  transform: rotate(180deg);
+}
+
 .th__resizer {
   position: absolute;
   top: 50%;