@sellmate/design-system 1.0.62 → 1.0.63

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.js');
 
 const sdTabsCss = () => `sd-tabs{display:inline-block;width:100%}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:4px;border-bottom:1px solid #0075FF}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid #CCCCCC;border-bottom:none;border-radius:4px 4px 0 0;background-color:#F6F6F6;color:#888888;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.3s}sd-tabs .sd-tabs__tab--selected{border-color:#0075FF;color:#0075FF;background-color:white}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:700}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:#0075FF;opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:#888888;opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:700;visibility:hidden;position:relative;white-space:nowrap}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:400;transition:font-weight 0.2s ease}sd-tabs .sd-tabs--md .sd-tabs__tab{padding:12px 32px;font-size:12px;line-height:20px}sd-tabs .sd-tabs--sm .sd-tabs__tab{padding:8px 20px;font-size:12px;line-height:16px}sd-tabs .sd-tabs--sub{gap:32px;border-bottom:none}sd-tabs .sd-tabs--sub .sd-tabs__tab{border:none;border-radius:0;background-color:transparent;color:#222222;font-weight:400;padding:0 0 2px 0;position:relative}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;width:100%;background-color:#0075FF;opacity:0;transition:opacity 0.2s ease}sd-tabs .sd-tabs--sub .sd-tabs__tab::after{font-weight:400}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:#0075FF;background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::after{font-weight:700}`;
 
@@ -48,7 +48,7 @@ const SdTabs = class {
         return `square_xs_${color}`;
     }
     render() {
-        return (index.h("div", { key: 'df68b0102c4847bce978701991196b94447e82de', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '3ac46ee8a763ba5a4a566fb25d4e32366ff8288b', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && index.h("sd-tag", { name: badgeName, label: tab.badge.toString() })));
         })));

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.js');
 
 const tag = {
 	xs: {
 		height: "20",
-		paddingX: "6",
+		paddingX: "8",
 		gap: "4",
 		icon: "12",
 		typography: {
@@ -22,7 +22,8 @@ const tag = {
 		typography: {
 			fontSize: "12",
 			fontWeight: "700",
-			lineHeight: "20"},
+			lineHeight: "20"
+		},
 		radius: "6"
 	},
 	md: {
@@ -171,7 +172,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: 'acfc91bdd46c2f0fc53b066d6c6b9de94068c492', class: "sd-tag", style: {
+        return (index.h("span", { key: '773056b7cd351f05ec4c4b9fed8db790a8ab83d0', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -181,7 +182,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, index.h("span", { key: '8d7f7f40c4eb55687f2c7ebe66fba04c3846c0e2', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '6271ce5e0f6cda83e668119e846a18cee3db3a16', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -0,0 +1,66 @@
+'use strict';
+
+var index = require('./index-nsQP24mV.js');
+var constants = require('./constants-DJRV1upE.js');
+
+const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}.tbody--empty .tbody__no-data-row{display:table-row}.tbody--empty .tbody__no-data-cell{display:table-cell;padding:0;border-bottom:none}`;
+
+const SdTbody = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    rows = [];
+    tableId = '';
+    topSpacerHeight = 0;
+    bottomSpacerHeight = 0;
+    tableEl = null;
+    handleRowsChange(newRows) {
+        const safeRows = newRows ?? [];
+        if (this.tableEl?.setRowCountSync) {
+            this.tableEl.setRowCountSync(safeRows.length);
+        }
+    }
+    componentWillLoad() {
+        this.syncTableContext();
+        this.rows = this.rows ?? [];
+        if (this.tableEl?.setRowCountSync) {
+            this.tableEl.setRowCountSync(this.rows.length);
+        }
+        this.el.setSpacersSync = (top, bottom) => {
+            this.topSpacerHeight = top;
+            this.bottomSpacerHeight = bottom;
+        };
+    }
+    componentDidLoad() {
+        this.syncTableContext();
+    }
+    syncTableContext() {
+        const table = this.el.closest('sd-table');
+        this.tableEl = table;
+        const fromMethod = table?.getTableIdSync?.();
+        const fromAttr = table?.getAttribute(constants.TABLE_ID_ATTR);
+        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+            '';
+        if (resolvedTableId && resolvedTableId !== this.tableId) {
+            this.tableId = resolvedTableId;
+        }
+    }
+    render() {
+        const hasRows = this.rows.length > 0;
+        return (index.h(index.Host, { key: 'aaa6a5a3ae24728e004c769f8652c838f852aefc', slot: `${this.tableId}-body` }, index.h("tbody", { key: 'de2909b4fe23293abd69778aed02abdab4ee8120', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
+            this.topSpacerHeight > 0 && (index.h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
+            index.h("slot", null),
+            this.bottomSpacerHeight > 0 && (index.h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
+        ]) : (index.h("tr", { class: "tbody__no-data-row" }, index.h("td", { class: "tbody__no-data-cell", colSpan: 100 }, index.h("slot", { name: "no-data" })))))));
+    }
+    static get watchers() { return {
+        "rows": [{
+                "handleRowsChange": 0
+            }]
+    }; }
+};
+SdTbody.style = sdTbodyCss();
+
+exports.sd_tbody = SdTbody;

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

@@ -0,0 +1,58 @@
+'use strict';
+
+var index = require('./index-nsQP24mV.js');
+var constants = require('./constants-DJRV1upE.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}`;
+
+const SdTd = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    field;
+    rowKey;
+    align;
+    handleFieldChange() {
+        this.syncSlotName();
+    }
+    handleRowKeyChange() {
+        this.syncSlotName();
+    }
+    componentWillLoad() {
+        this.syncSlotName();
+        // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
+        const parentTr = this.el.parentElement;
+        if (parentTr?.tagName?.toLowerCase() === 'sd-tr') {
+            index.forceUpdate(parentTr);
+        }
+    }
+    componentDidLoad() {
+        this.syncSlotName();
+    }
+    syncSlotName() {
+        const table = this.el.closest('sd-table');
+        const fromMethod = table?.getTableIdSync?.();
+        const fromAttr = table?.getAttribute(constants.TABLE_ID_ATTR);
+        const tableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+            '';
+        if (this.field && this.rowKey !== undefined && tableId) {
+            this.el.setAttribute('slot', `${tableId}-${this.field}-${this.rowKey}`);
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '9fdf1f552785399ec47244f1d534d49070dd6fa1', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '845eddc0d15fd8bb2f2f93e146aa8fa1eb9d194f' })));
+    }
+    static get watchers() { return {
+        "field": [{
+                "handleFieldChange": 0
+            }],
+        "rowKey": [{
+                "handleRowKeyChange": 0
+            }]
+    }; }
+};
+SdTd.style = sdTdCss();
+
+exports.sd_td = SdTd;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.js');
 
 const textLink = {
 	gap: "4",
@@ -13,6 +13,9 @@ const textLink = {
 		underline: {
 			textDecoration: "underline"}
 	},
+	content: {
+		disabled: "#888888"
+	},
 	icon: {
 		"default": "#006AC1",
 		disabled: "#BBBBBB"
@@ -34,10 +37,11 @@ const TEXT_LINK_TYPOGRAPHY = {
     underline: textLinkTokens.textLink.typography.underline,
 };
 const TEXT_LINK_COLORS = {
+    content: textLinkTokens.textLink.content,
     icon: textLinkTokens.textLink.icon,
 };
 
-const sdTextLinkCss = () => `sd-text-link{display:inline-flex}sd-text-link .sd-text-link{display:inline-flex;align-items:center;gap:var(--sd-text-link-gap);cursor:pointer;user-select:none}sd-text-link .sd-text-link__label{text-decoration:var(--sd-text-link-text-decoration)}sd-text-link .sd-text-link:not(.sd-text-link--disabled):hover .sd-text-link__label{text-decoration:underline}sd-text-link .sd-text-link--disabled{cursor:not-allowed}`;
+const sdTextLinkCss = () => `sd-text-link{display:inline-flex}sd-text-link .sd-text-link{display:inline-flex;align-items:center;gap:var(--sd-text-link-gap);cursor:pointer;user-select:none}sd-text-link .sd-text-link__label{text-decoration:var(--sd-text-link-text-decoration);color:var(--sd-text-link-color, inherit)}sd-text-link .sd-text-link:not(.sd-text-link--disabled):hover .sd-text-link__label{text-decoration:underline}sd-text-link .sd-text-link--disabled{cursor:not-allowed}`;
 
 const SdTextLink = class {
     constructor(hostRef) {
@@ -59,9 +63,6 @@ const SdTextLink = class {
     };
     render() {
         const typo = this.underline ? TEXT_LINK_TYPOGRAPHY.underline : TEXT_LINK_TYPOGRAPHY.default;
-        // const contentColor = this.disabled
-        //   ? TEXT_LINK_COLORS.content.disabled
-        //   : TEXT_LINK_COLORS.content.default;
         const labelClassName = ['sd-text-link__label', this.labelClass].filter(Boolean).join(' ');
         const iconColor = this.disabled
             ? TEXT_LINK_COLORS.icon.disabled
@@ -69,22 +70,19 @@ const SdTextLink = class {
         const arrowColor = this.disabled ? TEXT_LINK_COLORS.icon.disabled : TEXT_LINK_LAYOUT.arrowColor;
         const cssVars = {
             '--sd-text-link-gap': `${TEXT_LINK_LAYOUT.gap}px`,
-            // '--sd-text-link-font-size': `${typo.fontSize}px`,
-            // '--sd-text-link-font-weight': typo.fontWeight,
-            // '--sd-text-link-line-height': `${typo.lineHeight}px`,
             '--sd-text-link-text-decoration': typo.textDecoration,
-            // '--sd-text-link-color': contentColor,
+            ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (index.h("span", { key: 'b20b183974df13a11812d3f3c16abd2456dd0eb5', class: {
+        return (index.h("span", { key: '348dc67e12982d74cd3f8b02d8e02071ad074c3f', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '581390418ffdd23767838b6f4777fa36cac3ec89', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'a733650304df4c66bb1a0f54cc0554538263830d', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: '1437e31870f22bcb13146cc8f2652f3b8d7fa57a', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '26c20691fd307e58b59339cf3b4fc1f3aab8c668', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'a767802a3df9fc15f7523d811d7dc69cc77404a1', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: 'a831f73d04cdfb970dcb78740889b6c5b242b880', 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',
-            } }, index.h("sd-icon", { key: '17a886109c8e5f72daf5f1f8baa4e185161c934d', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: 'a87e70e4977a2392de9876eb27904737c61b9e23', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var component_textinput = require('./component.textinput-C4SsDjA1.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 (index.h("sd-field", { key: 'ea611c76e2550f996cfe8848aa880d070325f133', name: this.name, label: this.label, addonLabel: this.addonLabel, 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 }, index.h("div", { key: '90dbe39c0dd4eb8e6dfbf15afb8d04925d1c767b', class: "sd-textarea__content" }, index.h("textarea", { key: '9026a4837b4b7bba8bc8237ad3c1f516b9dda267', 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 (index.h("sd-field", { key: '4525a68094b0655721c1d8679ee32bc041cf9677', name: this.name, label: this.label, addonLabel: this.addonLabel, 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 }, index.h("div", { key: '8a7724f1ff423b44dd9017f0446cfeb1220fda95', class: "sd-textarea__content" }, index.h("textarea", { key: '3eb2bafbbd31cd36ba5626aa9e0069d24d4634ec', 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/cjs/sd-thead.cjs.entry.js

@@ -0,0 +1,179 @@
+'use strict';
+
+var index = require('./index-nsQP24mV.js');
+var constants = require('./constants-DJRV1upE.js');
+
+const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:36px}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:#F5FAFF;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #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:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.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:#F5FAFF;z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:#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: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__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC}.th__resizer--left{right:auto;left:0}`;
+
+const SdThead = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    columns;
+    selectable;
+    resizable;
+    stickyColumn;
+    stickyHeader;
+    scrolledLeft;
+    scrolledRight;
+    rows = [];
+    columnWidths = [];
+    tableId = '';
+    _columns = [];
+    _selectable = false;
+    _resizable = false;
+    _stickyColumn = { left: 0, right: 0 };
+    _stickyHeader = false;
+    _scrolledLeft = false;
+    _scrolledRight = false;
+    tableEl = null;
+    handleColumnsChange(newCols) {
+        if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
+            this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+        }
+    }
+    componentWillLoad() {
+        this.syncTableContext();
+        this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
+        this.resolveConfig();
+        if ((this.columnWidths ?? []).length === 0) {
+            this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
+        }
+    }
+    componentDidLoad() {
+        this.syncTableContext();
+        this.resolveConfig();
+    }
+    syncTableContext() {
+        const table = this.el.closest('sd-table');
+        this.tableEl = table;
+        const fromMethod = table?.getTableIdSync?.();
+        const fromAttr = table?.getAttribute(constants.TABLE_ID_ATTR);
+        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+            '';
+        if (resolvedTableId && resolvedTableId !== this.tableId) {
+            this.tableId = resolvedTableId;
+        }
+    }
+    resolveConfig() {
+        const config = this.tableEl?.getConfigSync?.();
+        const resolvedColumns = Array.isArray(this.columns)
+            ? this.columns
+            : Array.isArray(config?.columns)
+                ? config.columns
+                : [];
+        this._columns = resolvedColumns;
+        this._selectable = this.selectable ?? config?.selectable ?? false;
+        this._resizable = this.resizable ?? config?.resizable ?? false;
+        this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
+        this._stickyHeader = this.stickyHeader ?? config?.stickyHeader ?? false;
+        this._scrolledLeft = this.scrolledLeft ?? config?.scrolledLeft ?? false;
+        this._scrolledRight = this.scrolledRight ?? config?.scrolledRight ?? false;
+        if (Array.isArray(config?.columnWidths) && (this.columnWidths ?? []).length === 0) {
+            this.columnWidths = [...config.columnWidths];
+        }
+        if (!Array.isArray(this.columnWidths)) {
+            this.columnWidths = [];
+        }
+    }
+    async refreshConfig() {
+        this.resolveConfig();
+    }
+    async setColumnWidths(widths) {
+        this.columnWidths = Array.isArray(widths) ? widths : [];
+    }
+    async refreshSelection() {
+        const checkbox = this.el.querySelector('sd-checkbox');
+        if (checkbox) {
+            checkbox.value = this.getIsAllChecked();
+        }
+    }
+    get visibleColumns() {
+        return this._columns.filter(col => col.visible !== false);
+    }
+    getStickyStyle(colIdx) {
+        if (this.tableEl?.getStickyStyleSync) {
+            return this.tableEl.getStickyStyleSync(colIdx);
+        }
+        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
+        const rightOffset = this.columnWidths
+            .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
+            .reduce((a, b) => a + b, 0);
+        return {
+            '--sticky-left-offset': `${leftOffset}px`,
+            '--sticky-right-offset': `${rightOffset}px`,
+            'width': `${this.columnWidths[colIdx]}px`,
+            'minWidth': `${this.columnWidths[colIdx]}px`,
+            'maxWidth': `${this.columnWidths[colIdx]}px`,
+        };
+    }
+    handleResize(index, event, reversed = false) {
+        if (this.tableEl?.handleResize) {
+            this.tableEl.handleResize(index, event, reversed);
+        }
+    }
+    handleSelectAll(checked) {
+        const currentState = this.getIsAllChecked();
+        const nextChecked = currentState === null ? false : !!checked;
+        const safeRows = Array.isArray(this.rows) ? this.rows : [];
+        if (this.tableEl?.toggleSelectAllSync) {
+            this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
+        }
+    }
+    getIsAllChecked() {
+        const safeRows = Array.isArray(this.rows) ? this.rows : [];
+        if (this.tableEl?.getIsAllCheckedSync && safeRows.length > 0) {
+            return this.tableEl.getIsAllCheckedSync(safeRows);
+        }
+        return false;
+    }
+    render() {
+        const safeRows = Array.isArray(this.rows) ? this.rows : [];
+        const stickyLeftCount = this._stickyColumn.left || 0;
+        const stickyRightCount = this._stickyColumn.right || 0;
+        const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
+        const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
+        const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
+        return (index.h(index.Host, { key: '5ccdb84a8876df2af0d73424be3f5a7fdb1979a5', slot: `${this.tableId}-head` }, index.h("thead", { key: '6517b6f3baf56173f27b8194de7bd1de625ea304', class: {
+                'thead': true,
+                'thead--sticky': this._stickyHeader,
+            } }, index.h("tr", { key: '8a9c268a3195376a8c9986411b29724896ff36d8', class: "tr" }, this._selectable && (index.h("th", { key: 'f0fae86684bbef173019ddb1dd23a5f57956fb04', 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: 'cde120ec02f8bf03fa869eadbc0d91b4fde8e1ba', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), 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.usePageMoveIcon && index.h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && (index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
+            const actualColIdx = stickyLeftCount + relativeIdx;
+            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.usePageMoveIcon && index.h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && (index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
+        }), stickyRightCols.map((col, relativeIdx) => {
+            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
+            return (index.h("th", { key: col.name, class: {
+                    'th': true,
+                    [`${col.thClass}`]: Boolean(col.thClass),
+                    '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.usePageMoveIcon && index.h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && (index.h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
+        })))));
+    }
+    static get watchers() { return {
+        "columns": [{
+                "handleColumnsChange": 0
+            }]
+    }; }
+};
+SdThead.style = sdTheadCss();
+
+exports.sd_thead = SdThead;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -234,7 +234,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 (index.h("div", { key: '18ef06077ee49165d6237dbd4fff06e8c1997bcb', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '8a63cb5f1e62fea7f562eac000743bb59ec69fda', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.js');
 
 const toast = {
 	icon: "16",
@@ -57,10 +57,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (index.h("div", { key: '2a054f05ab63f450e7b0dc1d3816dc9cfca149d0', style: {
+        return (index.h("div", { key: '0ae35299510680fdb91dcb7c6ef841cba1287c1a', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: 'e9ebafe293282a8df041b343e83ccbcca0f15919', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'ebd56ba5d1aea16453a8e90be0ab1d7be8ccd579', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'd01746c69004c6697209f76a88baba467bf290db', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '962d70832f11496be43a60415aa435a9094c3fef', class: "sd-toast__content" }, index.h("span", { key: 'fd868607134f556980c67f22c2e55d9819fbfb99', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '72feff87a7e2f0a7726ed293e14203ae1c82d80f', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: 'f98218ceb7d1a339065219a35bef7db4125ea30b', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: 'c0b4fb4e820e7e2435ce5516cebab1c3132dfe75', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '7c0b531a069b6fde7895b886603ceaf54f0a0a50', class: "sd-toast__icon" }, index.h("sd-icon", { key: '059de7e478b66a7e12c3e0560341311333e83b90', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '46911d81bc1cd24b541b6da71ec45a90237ea5a9', class: "sd-toast__content" }, index.h("span", { key: 'e5e80c82cda36042ad078bf35d2fdcf1d8556497', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '95882e33b93d391fc00a92540c5f85d1235c0b8a', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: 'e65eede91a5160ec3a0f4cab9f1f4bb02dc695f3', 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/cjs/sd-toggle.cjs.entry.js

@@ -1,8 +1,75 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.js');
 
-const sdToggleCss = () => `sd-toggle{display:inline-block;height:20px;line-height:0}sd-toggle .sd-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px}sd-toggle .sd-toggle>input{display:none}sd-toggle .sd-toggle__label{font-size:12px;color:#333333;line-height:20px}sd-toggle .sd-toggle__track{width:36px;height:20px;border-radius:12px;background:#CCCCCC;position:relative;transition:background-color 0.2s ease}sd-toggle .sd-toggle__thumb{width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;transition:transform 0.2s ease}sd-toggle .sd-toggle--checked .sd-toggle__track{background:#0075FF}sd-toggle .sd-toggle--checked .sd-toggle__thumb{transform:translateX(16px)}sd-toggle .sd-toggle--disabled{cursor:not-allowed}sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track{background:#BBDAFF}sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track{background:#EEEEEE}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track{background:#005CC9}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track{background:#BBBBBB}`;
+const toggle = {
+	height: "28",
+	paddingX: "12",
+	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",
+		fontSize: "12",
+		fontWeight: "500",
+		textDecoration: "none",
+		lineHeight: "20"
+	},
+	radius: "9999",
+	border: {
+		width: "1",
+		"default": "#CCCCCC",
+		select: "#0075FF",
+		disabled: "#CCCCCC"
+	},
+	bg: {
+		"default": "#FFFFFF",
+		hover: "#0075FF",
+		select: "#FFFFFF",
+		disabled: "#E1E1E1"
+	},
+	content: {
+		"default": "#555555",
+		hover: "#FFFFFF",
+		select: "#0075FF",
+		disabled: "#888888"
+	}
+};
+var toggleTokens = {
+	toggle: toggle
+};
+
+const TOGGLE_LAYOUT = {
+    height: Number(toggleTokens.toggle.height),
+    paddingX: Number(toggleTokens.toggle.paddingX),
+    radius: Number(toggleTokens.toggle.radius),
+    borderWidth: Number(toggleTokens.toggle.border.width),
+};
+const TOGGLE_TYPOGRAPHY = {
+    fontFamily: toggleTokens.toggle.typography.fontFamily,
+    fontWeight: toggleTokens.toggle.typography.fontWeight,
+    fontSize: Number(toggleTokens.toggle.typography.fontSize),
+    lineHeight: Number(toggleTokens.toggle.typography.lineHeight),
+    textDecoration: toggleTokens.toggle.typography.textDecoration,
+};
+const TOGGLE_COLORS = {
+    border: {
+        default: toggleTokens.toggle.border.default,
+        select: toggleTokens.toggle.border.select,
+        disabled: toggleTokens.toggle.border.disabled,
+    },
+    bg: {
+        default: toggleTokens.toggle.bg.default,
+        hover: toggleTokens.toggle.bg.hover,
+        select: toggleTokens.toggle.bg.select,
+        disabled: toggleTokens.toggle.bg.disabled,
+    },
+    content: {
+        default: toggleTokens.toggle.content.default,
+        hover: toggleTokens.toggle.content.hover,
+        select: toggleTokens.toggle.content.select,
+        disabled: toggleTokens.toggle.content.disabled,
+    },
+};
+
+const sdToggleCss = () => `sd-toggle{display:inline-block;line-height:0}.sd-toggle{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--sd-toggle-height);padding:0 var(--sd-toggle-padding-x);border-radius:var(--sd-toggle-radius);border:var(--sd-toggle-border-width) solid var(--sd-toggle-border-default);background:var(--sd-toggle-bg-default);color:var(--sd-toggle-content-default);font-family:var(--sd-toggle-font-family);font-weight:var(--sd-toggle-font-weight);font-size:var(--sd-toggle-font-size);line-height:var(--sd-toggle-line-height);text-decoration:var(--sd-toggle-text-decoration);white-space:nowrap;user-select:none;cursor:pointer;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}.sd-toggle:hover:not(.sd-toggle--disabled){background:var(--sd-toggle-bg-hover);border-color:var(--sd-toggle-border-select);color:var(--sd-toggle-content-hover)}.sd-toggle--active{background:var(--sd-toggle-bg-select);border-color:var(--sd-toggle-border-select);color:var(--sd-toggle-content-select)}.sd-toggle--disabled{background:var(--sd-toggle-bg-disabled);border-color:var(--sd-toggle-border-disabled);color:var(--sd-toggle-content-disabled);cursor:not-allowed}.sd-toggle--disabled.sd-toggle--active{background:var(--sd-toggle-bg-disabled);border-color:var(--sd-toggle-border-disabled);color:var(--sd-toggle-content-disabled)}`;
 
 const SdToggle = class {
     constructor(hostRef) {
@@ -13,17 +80,11 @@ const SdToggle = class {
     label = '';
     disabled = false;
     change;
-    componentWillLoad() {
-        this.updateCheckedState(this.value);
-    }
-    componentWillRender() {
-        this.updateCheckedState(this.value);
-    }
-    updateCheckedState(value) {
-        this.value = value;
-    }
     get toggleClasses() {
-        const classes = ['sd-toggle', this.value ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];
+        const classes = ['sd-toggle'];
+        if (this.value) {
+            classes.push('sd-toggle--active');
+        }
         if (this.disabled) {
             classes.push('sd-toggle--disabled');
         }
@@ -37,7 +98,29 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: 'ca08050cdbbb4e5e7e615f72411be5bff93955d8', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'abdae5d4dc59fc121ded9cc0800f68d3996d4e50', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '37d23f59f877100c53deace3c6c70b441df5748c', class: "sd-toggle__label" }, this.label), index.h("div", { key: '545f76c3c1e63198f6dc80bdf6bf44f6840082b2', class: "sd-toggle__track" }, index.h("div", { key: '4142b2e46b93cf1d5f86cb1b5a4490c0e6a03a05', class: "sd-toggle__thumb" }))));
+        const cssVars = {
+            '--sd-toggle-height': `${TOGGLE_LAYOUT.height}px`,
+            '--sd-toggle-padding-x': `${TOGGLE_LAYOUT.paddingX}px`,
+            '--sd-toggle-radius': `${TOGGLE_LAYOUT.radius}px`,
+            '--sd-toggle-border-width': `${TOGGLE_LAYOUT.borderWidth}px`,
+            '--sd-toggle-font-family': TOGGLE_TYPOGRAPHY.fontFamily,
+            '--sd-toggle-font-weight': TOGGLE_TYPOGRAPHY.fontWeight,
+            '--sd-toggle-font-size': `${TOGGLE_TYPOGRAPHY.fontSize}px`,
+            '--sd-toggle-line-height': `${TOGGLE_TYPOGRAPHY.lineHeight}px`,
+            '--sd-toggle-text-decoration': TOGGLE_TYPOGRAPHY.textDecoration,
+            '--sd-toggle-bg-default': TOGGLE_COLORS.bg.default,
+            '--sd-toggle-bg-hover': TOGGLE_COLORS.bg.hover,
+            '--sd-toggle-bg-select': TOGGLE_COLORS.bg.select,
+            '--sd-toggle-bg-disabled': TOGGLE_COLORS.bg.disabled,
+            '--sd-toggle-border-default': TOGGLE_COLORS.border.default,
+            '--sd-toggle-border-select': TOGGLE_COLORS.border.select,
+            '--sd-toggle-border-disabled': TOGGLE_COLORS.border.disabled,
+            '--sd-toggle-content-default': TOGGLE_COLORS.content.default,
+            '--sd-toggle-content-hover': TOGGLE_COLORS.content.hover,
+            '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
+            '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
+        };
+        return (index.h("label", { key: 'ec38c0ca834e5208d2cc5eb1fc32f959eacbb46d', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '2b47036dbd0cb880a7b7973523c985ae13e0cf22', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();