@sellmate/design-system 1.0.76 → 1.0.77

package/dist/esm/sd-table.config-DKkzCQwJ.js

@@ -0,0 +1,94 @@
+import { s as systemTokens } from './system-CZxeqYuw.js';
+
+const table = {
+	header: {
+		height: "36",
+		paddingX: "16",
+		gap: "4",
+		bg: "#F5FAFF",
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "500",
+			fontSize: "12",
+			lineHeight: "20",
+			textDecoration: "none"
+		},
+		resizingBar: {
+			color: "#CCCCCC",
+			height: "16"
+		}
+	},
+	body: {
+		"default": {
+			height: "44"},
+		paddingX: "16",
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20",
+			textDecoration: "none"
+		}
+	},
+	border: {
+		"default": "#E1E1E1",
+		width: {
+			width: "1"
+		}
+	},
+	radius: "8"};
+var tableTokens = {
+	table: table
+};
+
+// ── Header Tokens ──
+const TABLE_HEADER_LAYOUT = {
+    height: tableTokens.table.header.height,
+    paddingX: tableTokens.table.header.paddingX,
+    gap: tableTokens.table.header.gap,
+};
+const TABLE_HEADER_TYPOGRAPHY = {
+    fontFamily: tableTokens.table.header.typography.fontFamily,
+    fontWeight: tableTokens.table.header.typography.fontWeight,
+    fontSize: tableTokens.table.header.typography.fontSize,
+    lineHeight: tableTokens.table.header.typography.lineHeight,
+    textDecoration: tableTokens.table.header.typography.textDecoration,
+};
+const TABLE_HEADER_COLORS = {
+    bg: tableTokens.table.header.bg,
+};
+const TABLE_HEADER_RESIZING_BAR = {
+    color: tableTokens.table.header.resizingBar.color,
+    height: tableTokens.table.header.resizingBar.height,
+};
+// ── Body Tokens ──
+const TABLE_BODY_LAYOUT = {
+    default: {
+        height: tableTokens.table.body.default.height},
+    paddingX: tableTokens.table.body.paddingX};
+const TABLE_BODY_TYPOGRAPHY = {
+    fontFamily: tableTokens.table.body.typography.fontFamily,
+    fontWeight: tableTokens.table.body.typography.fontWeight,
+    fontSize: tableTokens.table.body.typography.fontSize,
+    lineHeight: tableTokens.table.body.typography.lineHeight,
+    textDecoration: tableTokens.table.body.typography.textDecoration,
+};
+// ── Frame / Border Tokens ──
+const TABLE_BORDER = {
+    color: tableTokens.table.border.default,
+    width: tableTokens.table.border.width.width,
+};
+const TABLE_RADIUS = tableTokens.table.radius;
+// ── Header Icon Color Defaults ──
+const ICON_DEFAULT_COLOR = {
+    pageEdit: systemTokens.color.darkblue.strong,
+    arrowDown: systemTokens.color.darkblue.strong,
+    arrowUp: systemTokens.color.darkblue.strong,
+    updown: systemTokens.color.grey.strong,
+    pageMove: systemTokens.color.darkblue.strong,
+    star: systemTokens.color.blue.strong,
+};
+const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
+const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
+
+export { TABLE_BODY_TYPOGRAPHY as T, TABLE_BORDER as a, TABLE_RADIUS as b, resolveSortIconName as c, TABLE_HEADER_RESIZING_BAR as d, TABLE_HEADER_TYPOGRAPHY as e, TABLE_HEADER_COLORS as f, TABLE_HEADER_LAYOUT as g, TABLE_BODY_LAYOUT as h, resolveTableIconColor as r };

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

@@ -1,5 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-BHmXH7dZ.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
+import { T as TABLE_BODY_TYPOGRAPHY, a as TABLE_BORDER, b as TABLE_RADIUS } from './sd-table.config-DKkzCQwJ.js';
+import './system-CZxeqYuw.js';
 
 const urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
@@ -14,7 +16,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__clip{width:100%;min-width:0;height:var(--table-container-height, 400px);border:1px solid #E1E1E1;border-radius:8px;overflow:hidden}.sd-table__clip--has-pagination{border-radius:8px 8px 0 0}.sd-table__wrapper{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-size:12px;overflow:auto;background:#FFFFFF}.sd-table__wrapper--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.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:1px solid #E1E1E1;border-top:none;border-radius:0 0 8px 8px}.sd-table__pagination sd-select-v2{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__clip{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__clip--has-pagination{border-radius:var(--table-radius, 8px) var(--table-radius, 8px) 0 0}.sd-table__wrapper{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__wrapper--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;inset: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 ::slotted(*),.sd-table__no-data span{pointer-events:auto}.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);border-top:none;border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
 
 const SdTable = class {
     constructor(hostRef) {
@@ -638,12 +640,10 @@ const SdTable = class {
         const allRows = this.rows ?? [];
         const pageInfo = this.getPaginationInfoSync();
         const startIdx = pageInfo?.startIndex ?? 0;
-        const displayed = pageInfo
-            ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex)
-            : allRows;
+        const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
         return displayed.map((row, i) => {
             const absoluteIdx = startIdx + i;
-            return (h("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row }));
+            return h("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
         });
     }
     get tableClasses() {
@@ -665,24 +665,34 @@ const SdTable = class {
     }
     render() {
         const resolvedTableId = this.getResolvedTableId();
-        return (h(Host, { key: 'd73cd690ad11ce92af37b6f32374f6f891c5b677' }, h("div", { key: 'f51d23212885ad8121b9a4e895fb854f1e142bc4', class: "sd-table__container", style: {
+        const hostStyle = {
+            '--table-radius': `${TABLE_RADIUS}px`,
+            '--table-border-color': TABLE_BORDER.color,
+            '--table-border-width': `${TABLE_BORDER.width}px`,
+            '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
+            '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
+            '--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,
+        };
+        return (h(Host, { key: '1a80b7c3589a8a2eefaabf24ed895c927543aac4', style: hostStyle }, h("div", { key: 'd97aa6c04948153671e26066b6df02e206fc35e6', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
                 '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
-            } }, h("div", { key: '84b1ba7b2220ff55304b9c19e59304ca2257cff0', class: {
+            } }, h("div", { key: '0e13dbbe062953c93a0acaaf5c00ca40a5b7e245', class: {
                 'sd-table__clip': true,
                 'sd-table__clip--has-pagination': !!(this.pagination &&
                     this.pagination.rowsPerPage > 0 &&
                     this.rowCount > 0 &&
                     !this.useVirtualScroll),
-            } }, h("div", { key: 'c901eba67eae29515bf0b3edcc6632b2aacf0f80', class: {
+            } }, h("div", { key: 'c800ecac543d1540d9b6c9faf06753c9dc10aaf3', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--loading': this.isLoading,
                 'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
-            } }, this.isLoading && (h("div", { key: '35a237d0203b2479dbdb77ac42c918a9375bdfd3', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '21a29981c1cdbd679f46abd2e7de7794c9ebbca9', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '07ad28bc6e7556cfe229fc1e952410f388424a7f', class: "sd-table__no-data" }, h("slot", { key: 'bf21e60f5b86614587b704bea2965b9467c7f467', name: "no-data" }, h("span", { key: 'f3d012d12e9189545b0cef52250502d46cb9a764' }, this.resolvedNoDataLabel)))), h("table", { key: '655d3dc017c6445ec454faef0e5e9837b7ee0013', 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.isLoading && (h("div", { key: '656bc53538c8513e014f31f1e976fd66ce79c7aa', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '74078add6860fc95e238d89335d57e205e751cd6', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '18a33a7247bde3d08472f8082325c76217734e5d', class: "sd-table__no-data" }, h("slot", { key: '966cb066f721695013a3e5a1a64543544b09fa77', name: "no-data" }, h("span", { key: 'd335a9b1b2e847b267cefb9d12f7265c5f67f394' }, this.resolvedNoDataLabel)))), h("table", { key: '8fd0a2428bfd4dd6a574bbb02139088c31408866', 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: '7ab0b30a0c0e0a197b0f79c6b07ef5614d5d2879', class: "sd-table__pagination" }, h("sd-pagination", { key: '71d44bba5a82f4d8f7c067e525db15fe9a36c305', 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-v2", { key: 'a9ab33347db0714da188f658a2ca1902502db690', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: '6f483b1a23456bbe42ff769a50c9de5638e7754f', class: "sd-table__pagination" }, h("sd-pagination", { key: '841c545c23de8b4bba4cce3c9f6608d16f7b4e54', 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: 'a67e17bf3067953169ffa119ee41b1d7f46c2058', 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-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, h } from './index-BHmXH7dZ.js';
 
 const tab = {
 	main: {
@@ -186,7 +186,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (h("div", { key: '3698b7b43e74ff053d61d5ce696b987373fd27d6', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: 'ff758fbab0a594c28968074a26ad92a28cd4850b', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Bp7ytJz5.js';
+import { r as registerInstance, h } from './index-BHmXH7dZ.js';
 
 const tag = {
 	xs: {
@@ -170,7 +170,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: 'def10730670f37a62fa76b507f7f15a1b1f956fc', class: "sd-tag", style: {
+        return (h("span", { key: '3e7a6602ee73f56e5709711ac735460230de7e58', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -180,7 +180,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: '32082536736e20074263632aa29f36bc7709db39', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '8da56711cb12127f96195404799581480280507f', 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-Bp7ytJz5.js';
+import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-BHmXH7dZ.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}`;
@@ -86,7 +86,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (h(Host, { key: 'da9ce2edb986d4b3cf1a6e5f59030009f1288250', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '8514071bd38c4f5b1997ae7239b8585a25f97ce0' })));
+        return (h(Host, { key: '1702396f538453cf26beb81b63926ea73b7baa89', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'bd04afefd83178f48eb93b4e7d189386a817ff72' })));
     }
     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-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, h } from './index-BHmXH7dZ.js';
 
 const textLink = {
 	gap: "4",
@@ -71,16 +71,16 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (h("span", { key: '77c1aa4a4a6297af9431947b7146db2ddfad52b5', class: {
+        return (h("span", { key: '9bd62ac603764a5938f3c72bac3a8bf893dfb233', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '6f760b3c7e0adccd2aa08cb662cca90a3d3a227b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '3ff017970956d8e5cb72b4d6e26d33aaf0551e76', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '8332cbe3b2283ce866044e55804e35338569a38f', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '9d63aea3c45c4962e5766e7059a166a85e7a357f', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'dc73d60dd1e593c597a6b5dd977db380c21ff680', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '2b25dfb6ae2f857b674341427f93ee34e4691893', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, h("sd-icon", { key: '2fa166ef60f6d1ee933450146bc667ee89dad2ce', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: 'a5c8fb48e66f4a6820da1a54cedd7b1a13c5dcec', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BHmXH7dZ.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 import { i as inputTokens } from './component.textinput-ByhWX2NK.js';
 
@@ -128,7 +128,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: 'a77834af45e2ca7abaa019d18b6108a51f0cf4ae', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '2cbc8ef4febeab89eb336cb29d34abdbf9f2f080', class: "sd-textarea__content" }, h("textarea", { key: '3b09e30b4e42affc7f03fb8a354387b57e5ee0fe', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (h("sd-field", { key: 'ca7dc6c13d22ba43cd99ee1e976599d7efb1eceb', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'a36ffabff714596bf780f2a63ccfde3e02eadda7', class: "sd-textarea__content" }, h("textarea", { key: 'b7f8a55b7ee4dfc394c380a97e21c6cc34d12b9b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{

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-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BHmXH7dZ.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: '5057793be2d6ce213edc84d58f7273248646dc19', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '925f4bf56626e8c722051afa65aa64f2a50007db', 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-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, h } from './index-BHmXH7dZ.js';
 
 const toast = {
 	icon: "16",
@@ -55,10 +55,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (h("div", { key: '77954c9d285339cb48032eec5eca0dcbe308affc', style: {
+        return (h("div", { key: 'f5db941adee41c3d2c57c2c7a12d94d03dcdebb6', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, h("div", { key: '73c792f19982140f91397a3ec7d6e22914ca316f', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'cc140bfd043b0d0cd6a7697053f736dac707f86b', class: "sd-toast__icon" }, h("sd-icon", { key: '85f38036cd39cb4d0f4a43ef0d307ef9faa03eb1', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '4d36e34a9ccac80fc2ed01f33b1e2aa80d70c78b', class: "sd-toast__content" }, h("span", { key: '9105d37004bbde90e8a7118ca5a58a6e4d6953f5', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: 'fdaabae7d8efb6540ce770cc5783b286789cdb3c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: 'c5985e50041b8f3e8c77e142fd06afaf0537de47', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: '68362fac26744fc7e805a18c589f4aff5845edc1', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '8ec7941b469b6d0242ab68b7928a9dbf6e75bb5f', class: "sd-toast__icon" }, h("sd-icon", { key: 'c057a100de91cecc3435bfa6a95c928727eb1836', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '21e84dd6cdf7efa52611da532a0983268c7c2cb2', class: "sd-toast__content" }, h("span", { key: '99c370fe3d4a54103fbccef395afadf2923f3613', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '3ce7109c2d1f5cd03f4fcc6bb01ede14c6400734', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: '2cf982fd1fe538533ceff61bbdecdacd2d69e51c', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? '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-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, h } from './index-BHmXH7dZ.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: 'e9bb126d92605cdd3a88ff1840aa79a4b66c7cf8', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '41c18a29c10ae91b84ecd6d2619a40ab99f5d151', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '9ef981165b998f43ec23f3bb1cf0ef385962d7fb', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '6b6d2a89f43036f624c7bc291b2c5aa7a93c8f0a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/{system-BgFLSKqC.js → system-CZxeqYuw.js}

@@ -7,7 +7,13 @@ const color = {
 		secondary: "#555555",
 		tertiary: "#888888",
 		inverse: "#FFFFFF"
-	}};
+	},
+	blue: {
+		strong: "#0075FF"},
+	darkblue: {
+		strong: "#006AC1"},
+	grey: {
+		strong: "#737373"}};
 var systemTokens = {
 	color: color
 };

package/dist/esm/{tooltipArrow-BHRQVawd.js → tooltipArrow-DZ-N5HBq.js}

@@ -1,4 +1,4 @@
-import { h } from './index-Bp7ytJz5.js';
+import { h } from './index-BHmXH7dZ.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-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.d.ts → sd-select/sd-select-list-item/sd-select-list-item.d.ts}

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { type SelectV2Option } from '../sd-select-v2.config';
-export declare class SdSelectV2ListItem {
-    option: SelectV2Option;
+import { type SelectOption } from '../sd-select.config';
+export declare class SdSelectListItem {
+    option: SelectOption;
     depth: number;
     isSelected: boolean | null;
     isFocused: boolean;
@@ -10,7 +10,7 @@ export declare class SdSelectV2ListItem {
         selected: number;
         total: number;
     };
-    listItemClick: EventEmitter<SelectV2Option>;
+    listItemClick: EventEmitter<SelectOption>;
     private get isGroup();
     private get isSelectable();
     private get depthKey();

package/dist/types/components/{sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.d.ts → sd-select/sd-select-list-item-search/sd-select-list-item-search.d.ts}

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class SdSelectV2ListItemSearch {
+export declare class SdSelectListItemSearch {
     isScrolled: boolean;
     private searchText;
     searchFilter: EventEmitter<string>;

package/dist/types/components/{sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.d.ts → sd-select/sd-select-listbox/sd-select-listbox.d.ts}

@@ -1,9 +1,9 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { type SelectV2Option, type SelectV2Type, type SelectV2Value, type SelectV2OptionSelectDetail } from '../sd-select-v2.config';
-export declare class SdSelectV2Listbox {
-    type: SelectV2Type;
-    options: SelectV2Option[];
-    value: SelectV2Value;
+import { type SelectOption, type SelectType, type SelectValue, type SelectOptionSelectDetail } from '../sd-select.config';
+export declare class SdSelectListbox {
+    type: SelectType;
+    options: SelectOption[];
+    value: SelectValue;
     emitValue: boolean;
     useSearch: boolean;
     useSelectAll: boolean;
@@ -13,7 +13,7 @@ export declare class SdSelectV2Listbox {
     private searchKeyword;
     private isScrolled;
     private focusedIndex;
-    optionSelect: EventEmitter<SelectV2OptionSelectDetail>;
+    optionSelect: EventEmitter<SelectOptionSelectDetail>;
     private listEl?;
     private lastScrolledIndex;
     private keydownAttached;

package/dist/types/components/{sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.d.ts → sd-select/sd-select-trigger/sd-select-trigger.d.ts}

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class SdSelectV2Trigger {
+export declare class SdSelectTrigger {
     displayText: string;
     placeholder: string;
     disabled: boolean;

package/dist/types/components/{sd-select-v2/sd-select-v2.config.d.ts → sd-select/sd-select.config.d.ts}

@@ -1,18 +1,18 @@
-export interface SelectV2Option {
+export interface SelectOption {
     value: string | number;
     label: string;
     disabled?: boolean;
-    children?: SelectV2Option[];
+    children?: SelectOption[];
 }
-export type SelectV2Type = 'default' | 'multi' | 'default_depth' | 'multi_depth';
-export type SelectV2Value = string | number | null | SelectV2Option | SelectV2Option[] | (string | number)[];
-export interface SelectV2UpdateDetail {
-    value: SelectV2Value;
-    option: SelectV2Option | SelectV2Option[] | null;
+export type SelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
+export type SelectValue = string | number | null | SelectOption | SelectOption[] | (string | number)[];
+export interface SelectUpdateDetail {
+    value: SelectValue;
+    option: SelectOption | SelectOption[] | null;
 }
-export interface SelectV2OptionSelectDetail {
-    option: SelectV2Option;
-    leaves: SelectV2Option[];
+export interface SelectOptionSelectDetail {
+    option: SelectOption;
+    leaves: SelectOption[];
 }
 export declare const SELECT_LAYOUT: {
     height: string;
@@ -93,5 +93,5 @@ export declare const SEARCH_THRESHOLD = 11;
 export declare const SEARCH_DEBOUNCE_MS = 1000;
 export declare const MAX_DROPDOWN_WIDTH = "640px";
 export declare const EMPTY_MESSAGE = "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.";
-export declare function countLeaves(options: SelectV2Option[]): number;
-export declare function filterTree(options: SelectV2Option[], keyword: string): SelectV2Option[];
+export declare function countLeaves(options: SelectOption[]): number;
+export declare function filterTree(options: SelectOption[], keyword: string): SelectOption[];

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

@@ -1,103 +1,75 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { BaseDropdownEvent } from '../../utils/base-dropdown-event';
-import { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
-import { Rule } from '../../components';
+import type { SelectOption, SelectType, SelectValue } from './sd-select.config';
+import type { Rule } from '../../types/form';
+import type { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
 import { type FieldAddonAlign } from '../sd-field/sd-field.config';
-export interface SelectOption {
-    value: string | number;
-    label: string;
-    disabled?: boolean;
-}
-export type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';
-export interface SelectOptionGroup extends SelectOption {
-    type: SelectGroupOptionType;
-    parent?: string;
-}
-export interface SelectStyleProps {
-    containerStyle?: {
-        [key: string]: string;
-    };
-    triggerStyle?: {
-        [key: string]: string;
-    };
-    dropdownStyle?: {
-        [key: string]: string;
-    };
-    optionStyle?: {
-        [key: string]: string;
-    };
-    labelStyle?: {
-        [key: string]: string;
-    };
-}
-export interface SelectEvents {
-    sdUpdate: {
-        value: string | number | null;
-        option: SelectOption | null;
-    };
-    dropDownShow: {
-        isOpen: boolean;
-    };
-}
-export interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {
-    sdUpdate: SelectOption[] | null;
-}
-/**
- * @deprecated sd-select-v2를 사용하세요.
- */
-export declare class SdSelect extends BaseDropdownEvent {
+export declare class SdSelect {
+    private static readonly VIEWPORT_PADDING;
+    private static readonly PORTAL_OFFSET_Y;
+    private static readonly CLOSE_ANIMATION_DURATION;
     el: HTMLElement;
-    value: string | number | null;
+    type: SelectType;
+    value: SelectValue;
     options: SelectOption[];
     placeholder: string;
-    optionPlaceholder: string;
-    width: string;
+    maxDropdownWidth: string;
     dropdownHeight: string;
-    autoFocus: boolean;
     disabled: boolean;
-    clearable: boolean;
-    searchable: boolean;
     label: string;
     labelWidth: string | number;
     addonLabel: string;
     addonAlign: FieldAddonAlign;
+    error: boolean;
+    hint: string;
+    errorMessage: string;
+    rules?: Rule[];
     icon?: IconProps;
     labelTooltip: string;
     labelTooltipProps: SdTooltipProps | null;
-    rules?: Rule[];
-    error?: boolean;
-    optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;
-    isOpen: boolean;
-    itemIndex: number;
-    isScrolled: boolean;
-    update?: EventEmitter<SelectEvents['sdUpdate']>;
-    dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;
-    private selectRef?;
+    emitValue: boolean;
+    width: string | number;
+    useSearch: boolean;
+    allSelectedLabel: string;
+    useSelectAll: boolean;
+    private isOpen;
+    private isAnimatingOut;
+    private triggerWidth;
+    private resolvedDropdownHeight;
+    private resolvedMaxDropdownWidth;
+    private focused;
+    private hovered;
+    update: EventEmitter<SelectValue>;
+    dropDownShow: EventEmitter<{
+        isOpen: boolean;
+    }>;
+    sdFocus(): Promise<void>;
+    sdOpen(): Promise<void>;
     private triggerRef?;
-    private formField?;
-    private filteredOptions;
-    private dropDownWidth;
+    private triggerComponentRef?;
+    private closeAnimationTimer?;
     name: string;
-    sdOpen(): Promise<void>;
-    sdValidate(): Promise<void>;
-    sdReset(): Promise<void>;
-    sdResetValidate(): Promise<void>;
-    sdFocus(): Promise<void>;
-    isOpenChanged(): Promise<void>;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    componentDidRender(): void;
+    private triggerHasFocus;
+    watchIsOpen(newValue: boolean): void;
+    private get isMulti();
+    private get displayText();
+    private flattenOptions;
+    private getNonDisabledLeaves;
+    private getSelectedOptions;
+    private toMultiValue;
+    private parsePixelValue;
+    private updateDropdownViewportConstraints;
+    private handleViewportResize;
+    private findOriginalOption;
+    private closeDropdown;
+    private prepareDropdownGeometry;
+    private syncFocusedState;
+    private handleTriggerFocus;
+    private handleTriggerBlur;
+    private handleTriggerClick;
+    private emitUpdate;
+    private handleOptionSelect;
+    private handleMultiSelect;
+    connectedCallback(): void;
     disconnectedCallback(): void;
-    protected handleDocumentClick(event: Event): void;
-    protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void;
-    private getSelectedOption;
-    closeDropdown(): void;
-    handleTriggerClick: (event: Event) => void;
-    handleOptionClick: (detail: {
-        option: SelectOption;
-        event: Event;
-    }) => void;
     render(): any;
-    private renderTrigger;
-    private renderDropdown;
 }