@sellmate/design-system 1.4.0 → 1.6.0

package/dist/esm/sd-table.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-0U6dRjlq.js';
+import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-DNWwGHho.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
-import { T as TABLE_BODY_LAYOUT, a as TABLE_BODY_TYPOGRAPHY, b as TABLE_BORDER, c as TABLE_RADIUS } from './sd-table.config-DU7Pc6YH.js';
-import './component.table-DQFHAKL_.js';
-import './system-GBlVDmy4.js';
+import { T as TABLE_BODY_LAYOUT, a as TABLE_SELECTABLE_COLUMN_WIDTH, b as TABLE_BODY_TYPOGRAPHY, c as TABLE_BORDER, d as TABLE_RADIUS } from './sd-table.config-D9meRqTx.js';
+import './component.table-D6GUzecR.js';
+import './system-j2khhcHY.js';
 
 let urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
@@ -17,7 +17,7 @@ let nanoid = (size = 21) => {
   return id
 };
 
-const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, 100%);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:var(--table-container-height, 400px);border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-use-top{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
+const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, 100%);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:var(--table-container-height, 400px);border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--use-top{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
 
 const SdTable = class {
     constructor(hostRef) {
@@ -42,7 +42,7 @@ const SdTable = class {
     height;
     stickyHeader = false;
     stickyColumn = { left: 0, right: 0 };
-    radius = 'default';
+    useTop = false;
     noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     isLoading = false;
@@ -102,8 +102,6 @@ const SdTable = class {
     // 키: `${rowKey}::${field}` → sd-td의 sdClass 문자열
     // sd-tr가 td를 그릴 때 머지해서 셀-단위 커스텀 클래스를 적용한다.
     cellClassRegistry = new Map();
-    // separator 직전 행의 시각적 인덱스 집합
-    separatorPrevIndices = new Set();
     // rowKey 문자열 → rows 배열에서의 visual index.
     // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
     // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
@@ -234,6 +232,10 @@ const SdTable = class {
         if (this.pagination?.rowsPerPage != null) {
             this.innerRowsPerPage = this.pagination.rowsPerPage;
         }
+        // host element 에 자식 컴포넌트(sd-thead/sd-tbody/sd-tr) 가 직접 접근하는 internal sync helpers 를 monkey-patch.
+        // 28개 메서드 전체를 typed interface 로 노출하면 코드 비용이 크고, 어차피 internal 이라 외부 사용자가 호출하지 않는다.
+        // 정식 @Method 노출로 옮기는 작업은 별도 이슈로 분리.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const el = this.el;
         el.isRowSelectedSync = this.isRowSelectedSync.bind(this);
         el.updateRowSelectSync = this.updateRowSelectSync.bind(this);
@@ -252,9 +254,6 @@ const SdTable = class {
         el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
         el.getSpanSync = this.getSpanSync.bind(this);
         el.isCoveredSync = this.isCoveredSync.bind(this);
-        el.registerSeparatorSync = this.registerSeparatorSync.bind(this);
-        el.unregisterSeparatorSync = this.unregisterSeparatorSync.bind(this);
-        el.isVisualLastRowBeforeSeparatorSync = this.isVisualLastRowBeforeSeparatorSync.bind(this);
         el.hasRowspanSync = this.hasRowspanSync.bind(this);
         el.registerCellClassSync = this.registerCellClassSync.bind(this);
         el.unregisterCellClassSync = this.unregisterCellClassSync.bind(this);
@@ -350,7 +349,6 @@ const SdTable = class {
             }
         });
     }
-    // light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
     queryChildEl(selector) {
         return (this.el.querySelector(selector) ??
             this.el.shadowRoot?.querySelector(selector) ??
@@ -378,12 +376,12 @@ const SdTable = class {
     refreshChildrenSelection() {
         const thead = this.queryChildEl('sd-thead');
         thead?.refreshSelection?.();
-        this.queryAllTr().forEach(tr => tr?.refreshSelection?.());
+        this.queryAllTr().forEach(tr => tr.refreshSelection?.());
     }
     refreshChildrenConfig() {
         const thead = this.queryChildEl('sd-thead');
         thead?.refreshConfig?.();
-        this.queryAllTr().forEach(tr => tr?.refreshConfig?.());
+        this.queryAllTr().forEach(tr => tr.refreshConfig?.());
     }
     maybeEmitVirtualReachEnd(start, end) {
         const threshold = Math.max(1, this.virtualEndThreshold);
@@ -415,6 +413,7 @@ const SdTable = class {
         this.vsEnd = end;
         const topHeight = start * this.effectiveRowHeight;
         const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
+        // setSpacersSync 는 sd-tbody 가 host element 에 monkey-patch 하는 internal sync helper.
         const tbody = this.queryChildEl('sd-tbody');
         tbody?.setSpacersSync?.(topHeight, bottomHeight);
         if (rangeChanged) {
@@ -535,7 +534,7 @@ const SdTable = class {
         this.updateRowsVisibility();
     }
     updateRowsVisibility() {
-        this.queryAllTr().forEach(tr => tr?.updateVisibility?.());
+        this.queryAllTr().forEach(tr => tr.updateVisibility?.());
     }
     changeRowsPerPage(perPage) {
         const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
@@ -574,7 +573,7 @@ const SdTable = class {
             this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
             const thead = this.queryChildEl('sd-thead');
             thead?.setColumnWidths?.(this.columnWidths);
-            this.queryAllTr().forEach(tr => tr?.setColumnWidths?.(this.columnWidths));
+            this.queryAllTr().forEach(tr => tr.setColumnWidths?.(this.columnWidths));
             const stickyRightCount = this.stickyColumn?.right || 0;
             const visibleColCount = this.columns.filter(c => c.visible !== false).length;
             const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
@@ -594,7 +593,7 @@ const SdTable = class {
     getStickyStyleSync(colIdx) {
         const leftOffset = this.columnWidths
             .slice(0, colIdx)
-            .reduce((a, b) => a + b, this.selectable ? 52 : 0);
+            .reduce((a, b) => a + b, this.selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
         const rightOffset = this.columnWidths
             .filter((_, i) => i >=
             this.columns.filter(c => c.visible !== false).length -
@@ -629,9 +628,8 @@ const SdTable = class {
     // 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
     requestAllTrUpdate() {
         this.queryAllTr().forEach(tr => {
-            const trAny = tr;
-            if (typeof trAny.bumpSpansVersion === 'function') {
-                trAny.bumpSpansVersion();
+            if (typeof tr.bumpSpansVersion === 'function') {
+                tr.bumpSpansVersion();
             }
             else {
                 forceUpdate(tr);
@@ -745,36 +743,6 @@ const SdTable = class {
         }
         return false;
     }
-    // rowspan을 반영한 셀의 시각적 하단 행 인덱스를 반환한다.
-    // isVisualLastRowBeforeSeparatorSync 헬퍼.
-    resolveVisualBottom(rowKey, field) {
-        const myRowIdx = this.resolveRowIndex(rowKey);
-        if (myRowIdx == null)
-            return null;
-        const span = this.spanRegistry.get(this.spanKey(rowKey, field));
-        const rs = Math.max(1, span?.rowspan ?? 1);
-        return myRowIdx + rs - 1;
-    }
-    registerSeparatorSync(prevRowKey) {
-        const idx = this.resolveRowIndex(prevRowKey);
-        if (idx != null)
-            this.separatorPrevIndices.add(idx);
-    }
-    unregisterSeparatorSync(prevRowKey) {
-        const idx = this.resolveRowIndex(prevRowKey);
-        if (idx != null)
-            this.separatorPrevIndices.delete(idx);
-    }
-    // 셀의 시각적 하단이 separator 바로 앞 행인지 판정.
-    // 해당 셀에 border-bottom: none을 적용하기 위함.
-    isVisualLastRowBeforeSeparatorSync(rowKey, field) {
-        if (this.separatorPrevIndices.size === 0)
-            return false;
-        const visualBottom = this.resolveVisualBottom(rowKey, field);
-        if (visualBottom == null)
-            return false;
-        return this.separatorPrevIndices.has(visualBottom);
-    }
     setRowCountSync(count) {
         const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
         if (safeCount !== this.rowCount) {
@@ -870,26 +838,27 @@ const SdTable = class {
             '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
             '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
+            '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
         };
-        return (h(Host, { key: '2b7c1eaf862c45c73751af6035a022e8ce0314b4', style: hostStyle }, h("div", { key: '35851e539eef8ff69ff03bd31f5d55d95eb8bf7a', class: "sd-table__container", style: {
+        return (h(Host, { key: '4596e04bd57aca00fa6378fd26ce33a06a795eaf', style: hostStyle }, h("div", { key: '11a20d327410b0be659cede32917164e036e796c', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': effectiveTableHeight,
                 '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
-            } }, h("div", { key: 'e3bf5576fd1b1ee9ffab5d240de904204f4288d5', class: {
+            } }, h("div", { key: 'f4f3acf584dc4eacdae25b11aa2b62b73ffab949', class: {
                 'sd-table__wrapper': true,
-                'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
-            } }, h("div", { key: 'a67ebcb802a3ed443cca1fc33a00787642e08e84', class: {
+                'sd-table__wrapper--use-top': this.useTop,
+            } }, h("div", { key: 'c8ab618b9c990a22b8e9466a5bfb5f02f4de8b12', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (h("div", { key: '2cdaff94dab50598c05364930dd3e763a6f2f79a', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '49211d7555a38996d3fd9cfce0df50bb626fa1d6', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '3da9d42ecedbdc63858a06040f0e22d265a8183b', class: "sd-table__no-data-header-overlay" }), h("div", { key: '20b5d8be682572a4ddbce21b6cd265894d014499', class: "sd-table__no-data" }, h("div", { key: 'a024fa084f4a137a70fe176cee6918b4f701fd42', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (h("div", { key: 'a696933a70799ba282fc743281d0af27fd691a2e', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: 'cba6ac47367ef6499bf338b9b757ee74fdd7e6c1', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '6e22156bf5b0fb9814d9bf9cad57506758c6284b', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'b72f9fabcc8acb8e700ad55acc4d7aff08355a1c', class: "sd-table__no-data" }, h("div", { key: '43f271a8803121362f16e8153748328658f073ec', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, h("slot", { key: '9603eefa63fd5bc05dfa132c6be2302497d4c228', name: "no-data" }, h("span", { key: '0dad4e143d8251e375f748d1e5e1a77909fab164' }, this.resolvedNoDataLabel)))))), h("table", { key: '83325a8970f18bb9cf7a78dc665d16a24edc18da', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, h("slot", { key: '4b8533115bbc81962b80c9c2533fe4b44a87193c', name: "no-data" }, h("span", { key: 'd94c4f7cf9eca7901b99434f712480a7b20c869a' }, this.resolvedNoDataLabel)))))), h("table", { key: 'a9a353aca09124ed8a82fcd2f8a0a7de09b234f5', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (h("div", { key: '935b0f916cbc1de29a7f6b3805a5a3c25eaba467', class: "sd-table__pagination" }, h("sd-pagination", { key: '7faad5d0b2efe652a9ed989910551aa8bc5592ec', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'd514c41459a60ac47ffcd476a635c47386232c50', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: '8afeb9398c3d7540a54b9a3660fb9685ae1cddca', class: "sd-table__pagination" }, h("sd-pagination", { key: 'e2cbb3f7414f65b81ab2d33eaec5d9f28bed6cc8', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'ce723544dbc7e4cc0d77ced3b685b8575cf67e6f', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

package/dist/esm/sd-tabs.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
+import { r as registerInstance, c as createEvent, h } from './index-DNWwGHho.js';
 
 const tab = {
 	main: {
@@ -186,7 +186,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (h("div", { key: '880f1aa80c29f2d578ffe2d5e5e5e0c008c898d3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '92384577bf4ce85de90ae05a32e44715e595fe16', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {

package/dist/esm/sd-tag.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-0U6dRjlq.js';
+import { r as registerInstance, h } from './index-DNWwGHho.js';
 
 const tag = {
 	xs: {
@@ -184,6 +184,8 @@ const SdTag = class {
     name = 'square_sm_grey';
     label = '';
     icon;
+    // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
+    // eslint-disable-next-line stencil/ban-default-true
     isLeft = true;
     componentWillLoad() {
         this.name = this.name ?? 'square_sm_grey';
@@ -205,7 +207,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: '57f3c3f9ad53059fabff205cb44ffa3d1da9a711', class: "sd-tag", style: {
+        return (h("span", { key: 'c8b8b88e2c83401bb9d3e05004b0517d7e4a3a6a', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -215,7 +217,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '3360f36d18f073cd24699b6b8db2e731fda351ac', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '67094b09ab1d7b7e865c9f6b8017f8c5c3f8274a', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

package/dist/esm/sd-td.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-0U6dRjlq.js';
+import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-DNWwGHho.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
 
 const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;
@@ -156,7 +156,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (h(Host, { key: '505b602b609050870e7e80df9157dbc50d0cb8c1', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '9910f02d98ce5e115b2a380954dd0a994f9f1c12' })));
+        return (h(Host, { key: '1d7123e1f35cfb513a1fa89b4d60f8dde7715a2f', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'f7b9266106a6df93e2101ca9a324035960281a6f' })));
     }
     static get watchers() { return {
         "field": [{

package/dist/esm/sd-text-link.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
+import { r as registerInstance, c as createEvent, h } from './index-DNWwGHho.js';
 
 const textLink = {
 	gap: "4",

package/dist/esm/sd-toast-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-0U6dRjlq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DNWwGHho.js';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -232,7 +232,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (h("div", { key: 'bc3c9591b6453eed7df462841e29784c29b3aeef', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '1de55d255b75842f52e3f0a147a69493ed1a7de5', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/esm/sd-toast.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
+import { r as registerInstance, c as createEvent, h } from './index-DNWwGHho.js';
 
 const toast = {
 	icon: "16",
@@ -82,12 +82,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (h("div", { key: 'db3ffaf51dc96c39c05558017f25929c679a59df', style: {
+        return (h("div", { key: '735fa3f949ee4c7d0178f999c02e90c829c133b4', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, h("div", { key: '92344f5bb95b0d4787591207f2e017d7dd177091', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '991db58b2cb019dd3a787e000e9d8813014bbb09', class: "sd-toast__icon" }, h("sd-icon", { key: '24d53cd77fdea82ec07663a8968493ec2b794751', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '70cfad4ef389cca798be9baeac99bfc41efcc615', class: "sd-toast__content" }, h("span", { key: '5927023435b17dc25ee07630fc4ae4568aadd9b9', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '410c024fd81ebcc78175c1855a86f590566d1a81', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: 'd85287e7ef796a11f850a0ce5cde87f5881fa5c9', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '55a6bf6457bd89254f6eb01072d46a0edbb8b510', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: '4e483d858c3268bde838ddc5c5c9cb5065855326', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '007eded85c508bdd2da05b1c9d489ff2d03a4df9', class: "sd-toast__icon" }, h("sd-icon", { key: '099d5556f4b0a11f5162cb76a6166a2d662d9590', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '3825916248bc2385fe87c8aeb6d741b59738246f', class: "sd-toast__content" }, h("span", { key: 'fba817baf33179296f50d3fe4147cc99c38fbb83', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '39667765a9a72c761f0b464f78c7652e60e6dd16', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '3da2f9a5daf53de4400bfec79654b5795c3b6af4', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '2578d35dc11e06178c6902cb358bcdb8ccabbf36', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/esm/sd-toggle.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
+import { r as registerInstance, c as createEvent, h } from './index-DNWwGHho.js';
 
 const toggle = {
 	height: "28",
@@ -118,7 +118,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: 'b16577aa25863a9dc337314d9059328799c1cd1e', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '6130825b74df8a573f4e062671fd694508759e82', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: 'f1b1b68270d523f7f3e40c8145f35e93df269d73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '7e07c190916e19ffe8744f6b491e92e6bf8efd36', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/{system-GBlVDmy4.js → system-j2khhcHY.js}

@@ -11,13 +11,27 @@ const color = {
 		accent: "#0075FF",
 		inverse: "#FFFFFF"
 	},
+	divider: {
+		"default": "#E1E1E1"
+	},
 	blue: {
 		strong: "#0075FF"},
 	darkblue: {
 		strong: "#006AC1"},
 	grey: {
 		strong: "#737373"}};
+const shadow = {
+	spread: {
+		md: {
+			x: "0",
+			y: "0",
+			blur: "24",
+			spread: "0",
+			color: "rgba(34,34,34,0.2)"}
+	}};
 var systemTokens = {
-	color: color};
+	color: color,
+	shadow: shadow
+};
 
 export { systemTokens as s };

package/dist/esm/{tooltipArrow-O5LOsHae.js → tooltipArrow-Cj3AqWK0.js}

@@ -1,4 +1,4 @@
-import { h } from './index-0U6dRjlq.js';
+import { h } from './index-DNWwGHho.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/types/components/sd-calendar/sd-calendar.d.ts

@@ -4,6 +4,7 @@ export declare class SdCalendar {
     value: string | null;
     selectable?: [string, string];
     events?: CalendarEventGroup[];
+    elevated: boolean;
     private currentYear;
     private currentMonth;
     update: EventEmitter<string>;

package/dist/types/components/sd-callout/sd-callout.config.d.ts

@@ -0,0 +1,34 @@
+export type CalloutType = 'default' | 'danger';
+export declare const CALLOUT_LAYOUT: {
+    readonly radius: `${string}px`;
+    readonly borderWidth: `${string}px`;
+    readonly bodyPaddingX: `${string}px`;
+    readonly bodyPaddingY: `${string}px`;
+    readonly bodyGap: `${string}px`;
+    readonly titlePaddingX: `${string}px`;
+    readonly titleGap: `${string}px`;
+    readonly titleIconSize: number;
+};
+export declare const CALLOUT_TYPOGRAPHY: {
+    readonly body: {
+        readonly fontFamily: string;
+        readonly fontSize: `${string}px`;
+        readonly fontWeight: string;
+        readonly lineHeight: `${string}px`;
+    };
+    readonly title: {
+        readonly fontFamily: string;
+        readonly fontSize: `${string}px`;
+        readonly fontWeight: string;
+        readonly lineHeight: `${string}px`;
+    };
+};
+export declare const CALLOUT_TYPE_CONFIG: Record<CalloutType, {
+    bg: string;
+    border: string;
+    content: string;
+    titleBg?: string;
+    titleColor?: string;
+}>;
+export declare const DANGER_TITLE_LABEL = "\uC8FC\uC758\uC0AC\uD56D";
+export declare const TYPE_ICON: Record<CalloutType, IconName | undefined>;

package/dist/types/components/sd-callout/sd-callout.d.ts

@@ -0,0 +1,11 @@
+import { type CalloutType } from './sd-callout.config';
+export declare class SdCallout {
+    type: CalloutType;
+    message: (string | string[])[];
+    private get calloutStyle();
+    private renderListItem;
+    private renderLi;
+    private renderBody;
+    private renderTitle;
+    render(): any;
+}

package/dist/types/components/sd-divider/sd-divider.config.d.ts

@@ -0,0 +1,3 @@
+export declare const DIVIDER_COLORS: {
+    default: string;
+};

package/dist/types/components/sd-divider/sd-divider.d.ts

@@ -0,0 +1,5 @@
+export declare class SdDivider {
+    /** true면 수직 분할선, false면 수평 분할선 */
+    vertical: boolean;
+    render(): any;
+}

package/dist/types/components/sd-dropdown-button/sd-dropdown-button.d.ts

@@ -7,6 +7,7 @@ export declare class SdDropdownButton extends BaseDropdownEvent {
     label: string;
     items: DropdownButtonItem[];
     disabled: boolean;
+    split: boolean;
     private static readonly CLOSE_ANIMATION_DURATION;
     isOpen: boolean;
     isAnimatingOut: boolean;
@@ -15,6 +16,7 @@ export declare class SdDropdownButton extends BaseDropdownEvent {
     private menuRef?;
     private closeAnimationTimer?;
     click: EventEmitter<DropdownButtonValue>;
+    buttonClick: EventEmitter<void>;
     dropDownShow: EventEmitter<{
         isOpen: boolean;
     }>;
@@ -30,9 +32,12 @@ export declare class SdDropdownButton extends BaseDropdownEvent {
     private get resolvedConfig();
     private getNextEnabledIndex;
     private toggleDropdown;
+    private handleButtonClick;
     private selectItem;
     private getTriggerClasses;
+    private getTriggerStyle;
     private getMenuItemClasses;
     private renderDropdown;
+    private renderChevron;
     render(): any;
 }

package/dist/types/components/sd-number-input/sd-number-input.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Rule } from '../../types/form';
+import { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
 import { type NumberInputSize } from './sd-number-input.config';
 import { type FieldAddonAlign } from '../sd-field/sd-field.config';
 export declare class SdNumberInput {
@@ -13,6 +14,9 @@ export declare class SdNumberInput {
     value?: string | number | null;
     label?: string;
     labelWidth: string | number;
+    icon?: IconProps;
+    labelTooltip: string;
+    labelTooltipProps: SdTooltipProps | null;
     addonLabel: string;
     addonAlign: FieldAddonAlign;
     placeholder: string;

package/dist/types/components/sd-popover/sd-popover.d.ts

@@ -28,7 +28,6 @@ export declare class SdPopover {
     leftLink?: PopoverLink;
     button?: PopoverButton;
     menuClass: string;
-    useClose: boolean;
     showChange: EventEmitter<boolean>;
     private buttonEl?;
     private setShow;

package/dist/types/components/sd-table/sd-table.config.d.ts

@@ -44,6 +44,7 @@ export declare const TABLE_BORDER: {
 export declare const TABLE_SEPARATOR: {
     color: string;
     width: string;
+    denseWidth: string;
 };
 export declare const TABLE_RADIUS: string;
 export declare const TABLE_CONTENT: {
@@ -64,5 +65,6 @@ export declare const TABLE_KEY_VALUE: {
     bodyPadding: string;
     height: string;
 };
+export declare const TABLE_SELECTABLE_COLUMN_WIDTH = 48;
 export declare const resolveTableIconColor: (name: IconName, override?: string) => string | undefined;
 export declare const resolveSortIconName: (sort: SdTableColumnSort) => IconName;

package/dist/types/components/sd-table/sd-table.d.ts

@@ -15,7 +15,7 @@ export declare class SdTable {
     height?: string;
     stickyHeader: boolean;
     stickyColumn: SdTableStickyColumn;
-    radius: 'default' | 'useTop';
+    useTop: boolean;
     noDataLabel: string;
     resolvedNoDataLabel: string;
     isLoading: boolean;
@@ -63,7 +63,6 @@ export declare class SdTable {
     private spanRegistry;
     private useFrameRegistry;
     private cellClassRegistry;
-    private separatorPrevIndices;
     private rowIndexMap;
     private rebuildRowIndexMap;
     private resolveRowIndex;
@@ -137,10 +136,6 @@ export declare class SdTable {
     getCellClassSync(rowKey: string, field: string): string | undefined;
     hasRowspanSync(): boolean;
     isCoveredSync(rowKey: string, colIdx: number, columns: SdTableColumn[]): boolean;
-    private resolveVisualBottom;
-    registerSeparatorSync(prevRowKey: string): void;
-    unregisterSeparatorSync(prevRowKey: string): void;
-    isVisualLastRowBeforeSeparatorSync(rowKey: string, field: string): boolean;
     setRowCountSync(count: number): void;
     setRowCount(count: number): Promise<void>;
     calculateVisibleRange(scrollTop: number, containerHeight: number): {

package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts

@@ -6,7 +6,7 @@ export declare class SdTr {
     stickyColumn?: SdTableStickyColumn;
     rowKey: string;
     row: Row;
-    separator?: boolean;
+    separator?: '4' | '6' | 4 | 6 | null;
     tableId: string;
     columnWidths: number[];
     isVisible: boolean;
@@ -18,10 +18,8 @@ export declare class SdTr {
     private _scrolledRight;
     private _dense;
     private tableEl;
-    private _prevRowKey;
     componentWillLoad(): void;
     componentDidLoad(): void;
-    disconnectedCallback(): void;
     private syncTableContext;
     private resolveConfig;
     refreshConfig(): Promise<void>;
@@ -41,7 +39,5 @@ export declare class SdTr {
     private getCellClassFor;
     private getFramePaddingStyle;
     private expandCellClass;
-    private isVisualLastRowBeforeSeparator;
-    private isVisualLastRowBeforeSeparatorForSelfRow;
     render(): any;
 }